webui: enhance ESLint config, improve JSX accessibility, and optimize Vite build settings

nopcoder · nopcoder · commit ce32fbdc531e · 2025-08-26T14:51:30.000+03:00
diff --git a/webui/eslint.config.js b/webui/eslint.config.js
@@ -19,6 +19,11 @@ export default [
       sourceType: "module",
       globals: {
         ...globals.browser,
+        JSX: "readonly",
+        Options: "readonly",
+        process: "readonly",
+        Buffer: "readonly",
+        __buildVersion: "readonly",
       },
       parserOptions: {
         ecmaFeatures: { jsx: true },
@@ -78,6 +83,11 @@ export default [
       "react-hooks/exhaustive-deps": "warn",
       "react/prop-types": "off",
       "react/jsx-key": "error",
+      "jsx-a11y/no-autofocus": "error",
+      "jsx-a11y/click-events-have-key-events": "error",
+      "jsx-a11y/no-static-element-interactions": "error",
+      "jsx-a11y/anchor-is-valid": "error",
+      "jsx-a11y/alt-text": "error",
     },
   },
   {
diff --git a/webui/src/lib/components/auth/credentials.jsx b/webui/src/lib/components/auth/credentials.jsx
@@ -51,12 +51,12 @@ export const CredentialsTable = ({userId, currentAccessKey, refresh, after, onPa
                 results={results}
                 headers={['Access Key ID', 'Creation Date', '']}
                 rowFn={row => [
-                    <>
+                    <span key={`access-key-${row.access_key_id}`}>
                         <code>{row.access_key_id}</code>
                         {(currentAccessKey === row.access_key_id) && <strong>{' '}(current)</strong>}
-                    </>,
-                    <FormattedDate dateValue={row.creation_date}/>,
-                    <span className="row-hover">
+                    </span>,
+                    <FormattedDate key={`date-${row.access_key_id}`} dateValue={row.creation_date}/>,
+                    <span key={`actions-${row.access_key_id}`} className="row-hover">
                         {(currentAccessKey !== row.access_key_id) &&
                             <ConfirmationButton
                                 variant="outline-danger"
@@ -81,11 +81,11 @@ export const CredentialsTable = ({userId, currentAccessKey, refresh, after, onPa
 
 
 export const CredentialsShowModal = ({credentials, show, onHide}) => {
-    if (!credentials) return <></>;
-
     const {state} = useContext(AppContext);
     const buttonVariant = state.settings.darkMode ? "outline-light" : "outline-dark";
 
+    if (!credentials) return <></>;;
+
     return (
         <Modal show={show} onHide={onHide} size="lg">
             <Modal.Header closeButton>
diff --git a/webui/src/lib/components/auth/forms.jsx b/webui/src/lib/components/auth/forms.jsx
@@ -43,11 +43,12 @@ export const AttachModal = ({
           results={response.results}
           rowFn={ent => [
             <Checkbox
+              key={`checkbox-${ent.id}`}
               defaultChecked={selected.some(selectedEnt => selectedEnt.id === ent.id)}
               onAdd={() => setSelected([...selected, ent])}
               onRemove={() => setSelected(selected.filter(selectedEnt => selectedEnt.id !== ent.id))}
               name={'selected'}/>,
-            <strong>{resolveEntityFn(ent)}</strong>
+            <strong key={`entity-${ent.id}`}>{resolveEntityFn(ent)}</strong>
           ]}
           firstFixedCol={true}
         />
@@ -186,7 +187,7 @@ export const EntityActionModal = ({
           e.preventDefault()
           onSubmit()
         }}>
-          <FormControl ref={idField} autoFocus placeholder={placeholder} type="text"/>
+          <FormControl ref={idField} placeholder={placeholder} type="text"/>
           {showExtraField &&
             <FormControl ref={extraField} placeholder={extraPlaceholder} type="text" className="mt-3"/>
           }
diff --git a/webui/src/lib/components/controls.jsx b/webui/src/lib/components/controls.jsx
@@ -324,7 +324,6 @@ export const PrefixSearchWidget = ({ onFilter, text = "Search by Prefix", defaul
                 <InputGroup className="prefix-search-input-group">
                     <Form.Control
                         ref={ref}
-                        autoFocus
                         defaultValue={defaultValue}
                         placeholder={text}
                         aria-label={text}
@@ -493,7 +492,7 @@ export const ExitConfirmationDialog = ({dialogAlert, dialogDescription, onExit,
                 </DialogContentText>
             </DialogContent>
             <DialogActions>
-                <MuiButton onClick={onContinue} autoFocus>Cancel</MuiButton>
+                <MuiButton onClick={onContinue}>Cancel</MuiButton>
                 <MuiButton onClick={onExit}>
                     Exit
                 </MuiButton>
@@ -535,7 +534,6 @@ export const SearchInput = ({searchPrefix, setSearchPrefix, placeholder}) => {
     return (
         <InputGroup>
             <Form.Control
-                autoFocus
                 placeholder={placeholder}
                 value={searchPrefix}
                 onChange={(e) => setSearchPrefix(e.target.value)}
diff --git a/webui/src/lib/components/policy.jsx b/webui/src/lib/components/policy.jsx
@@ -77,7 +77,7 @@ export const PolicyEditor = ({ show, onHide, onSubmit, policy = null, noID = fal
                 }}>
                     {(policy === null) && !noID && (
                         <Form.Group className="mb-3">
-                            <FormControl ref={idField} autoFocus placeholder="Policy ID (e.g. 'MyRepoReadWrite')" type="text"/>
+                            <FormControl ref={idField} placeholder="Policy ID (e.g. 'MyRepoReadWrite')" type="text"/>
                         </Form.Group>
                     )}
                     <Form.Group className="mb-3">
diff --git a/webui/src/lib/components/repository/ChangeSummary.jsx b/webui/src/lib/components/repository/ChangeSummary.jsx
@@ -86,7 +86,7 @@ const ChangeSummary = ({prefix, getMore}) => {
                                 </Tooltip>
                             }>
                 <small>
-                    &gt;= {MAX_NUM_OBJECTS.toLocaleString()} results, <a href="#" onClick={onLoadAll}>load more?</a>
+                    &gt;= {MAX_NUM_OBJECTS.toLocaleString()} results, <button type="button" className="btn-link" onClick={onLoadAll}>load more?</button>
                 </small>
             </OverlayTrigger>
         )
diff --git a/webui/src/lib/components/repository/ObjectsDiff.jsx b/webui/src/lib/components/repository/ObjectsDiff.jsx
@@ -27,44 +27,46 @@ export const ObjectsDiff = ({diffType, repoId, leftRef, rightRef, path}) => {
     if (hooksError) return <AlertError error={hooksError}/>;
 
     const readable = readableObject(path);
-    let left;
-    let right;
-    switch (diffType) {
-        case 'changed':
-        case 'conflict':
-            left = useAPI(async () => objects.getStat(repoId, leftRef, path),
-                [repoId, leftRef, path]);
-            right = useAPI(async () => objects.getStat(repoId, rightRef, path),
-                [repoId, rightRef, path]);
-            break;
-        case 'added':
-            right = useAPI(async () => objects.getStat(repoId, rightRef, path),
-                [repoId, rightRef, path]);
-            break;
-        case 'removed':
-            left = useAPI(async () => objects.getStat(repoId, leftRef, path),
-                [repoId, leftRef, path]);
-            break;
-        default:
-            return <AlertError error={"Unsupported diff type " + diffType}/>;
+    // Always call hooks at the top level
+    const leftStatResponse = useAPI(async () => {
+        if (diffType === 'changed' || diffType === 'conflict' || diffType === 'removed') {
+            return objects.getStat(repoId, leftRef, path);
+        }
+        return null;
+    }, [repoId, leftRef, path, diffType]);
+
+    const rightStatResponse = useAPI(async () => {
+        if (diffType === 'changed' || diffType === 'conflict' || diffType === 'added') {
+            return objects.getStat(repoId, rightRef, path);
+        }
+        return null;
+    }, [repoId, rightRef, path, diffType]);
+
+    if (!['changed', 'conflict', 'added', 'removed'].includes(diffType)) {
+        return <AlertError error={"Unsupported diff type " + diffType}/>;
     }
 
+    let left = leftStatResponse;
+    let right = rightStatResponse;
+
+    const hooksLoading = (left && left.loading) || (right && right.loading);
+
     if (hooksLoading || (left && left.loading) || (right && right.loading)) return <Loading/>;
     const err = (left && left.error) || (right && right.err);
     if (err) return <AlertError error={err}/>;
 
-    const leftStat = left && left.response;
-    const rightStat = right && right.response;
+    const leftStatResponseResponse = left && left.response;
+    const rightStatResponseResponse = right && right.response;
     if (!readable) {
-        return <NoContentDiff left={leftStat} right={rightStat} diffType={diffType}/>;
+        return <NoContentDiff left={leftStatResponseResponse} right={rightStatResponseResponse} diffType={diffType}/>;
     }
-    const objectTooBig = (leftStat && leftStat.size_bytes > maxDiffSizeBytes) || (rightStat && rightStat.size_bytes > maxDiffSizeBytes);
+    const objectTooBig = (leftStatResponse && leftStatResponse.size_bytes > maxDiffSizeBytes) || (rightStatResponse && rightStatResponse.size_bytes > maxDiffSizeBytes);
     if (objectTooBig) {
         return <AlertError error={path + " is too big (> " + humanSize(maxDiffSizeBytes)+ "). To view its diff please download" +
         " the objects and use an external diff tool."}/>
     }
-    const leftSize = leftStat && leftStat.size_bytes;
-    const rightSize = rightStat && rightStat.size_bytes;
+    const leftSize = leftStatResponse && leftStatResponse.size_bytes;
+    const rightSize = rightStatResponse && rightStatResponse.size_bytes;
     return <ContentDiff
         config={storageConfig}
         repoId={repoId}
@@ -122,10 +124,19 @@ const ContentDiff = ({config, repoId, path, leftRef, rightRef, leftSize, rightSi
 
 
 const TextDiff = ({ config, repoId, path, leftRef, rightRef, leftSize, rightSize, diffType, isDarkMode }) => {
-    const left = leftRef && useAPI(async () => objects.get(repoId, leftRef, path, config.pre_sign_support_ui),
-        [repoId, leftRef, path]);
-    const right = rightRef && useAPI(async () => objects.get(repoId, rightRef, path, config.pre_sign_support_ui),
-        [repoId, rightRef, path]);
+    const left = useAPI(async () => {
+        if (leftRef) {
+            return objects.get(repoId, leftRef, path, config.pre_sign_support_ui);
+        }
+        return null;
+    }, [repoId, leftRef, path, config.pre_sign_support_ui]);
+    
+    const right = useAPI(async () => {
+        if (rightRef) {
+            return objects.get(repoId, rightRef, path, config.pre_sign_support_ui);
+        }
+        return null;
+    }, [repoId, rightRef, path, config.pre_sign_support_ui]);
 
     if ((left && left.loading) || (right && right.loading)) return <Loading/>;
     const err = (left && left.error) || (right && right.error);
diff --git a/webui/src/lib/components/repository/commits.jsx b/webui/src/lib/components/repository/commits.jsx
@@ -56,7 +56,7 @@ const CommitMetadataTable = ({ commit }) => {
         </thead>
         <tbody>
         {keys.map(key =>
-          <MetadataRow metadata_key={key} metadata_value={commit.metadata[key]}/>)}
+          <MetadataRow key={key} metadata_key={key} metadata_value={commit.metadata[key]}/>)}
         </tbody>
       </Table>
     </>
@@ -69,7 +69,7 @@ const CommitMetadataUIButtons = ({ commit }) => {
 
   return (
     <>{
-      keys.map((key) => <MetadataUIButton metadata_key={key} metadata_value={commit.metadata[key]}/>)
+      keys.map((key) => <MetadataUIButton key={key} metadata_key={key} metadata_value={commit.metadata[key]}/>)
     }</>
   );
 };
diff --git a/webui/src/lib/components/repository/treeRows.jsx b/webui/src/lib/components/repository/treeRows.jsx
@@ -97,9 +97,14 @@ export const PrefixTreeEntryRow = ({entry, relativeTo = "", dirExpanded, depth =
     );
 };
 const PrefixExpansionSection = ({dirExpanded, onClick}) => {
-    return (<span onClick={onClick} className="prefix-expand-icon">
+    return (<button 
+                type="button"
+                onClick={onClick} 
+                className="prefix-expand-icon btn btn-link p-0 border-0"
+                aria-label={dirExpanded ? "Collapse directory" : "Expand directory"}
+            >
                 {dirExpanded ? <ChevronDownIcon/> : <ChevronRightIcon/>}
-            </span>)
+            </button>)
 }
 
 const TableRow = ({diffIndicator, depth, loading, showSummary, entry, getMore, rowActions,
diff --git a/webui/src/pages/auth/groups/group/members.jsx b/webui/src/pages/auth/groups/group/members.jsx
@@ -73,8 +73,8 @@ const GroupMemberList = ({ groupId, after, onPaginate }) => {
                 <DataTable
                     keyFn={user => user.id}
                     rowFn={user => [
-                        <Link href={{pathname: '/auth/users/:userId', params: {userId: user.id}}}>{resolveUserDisplayName(user)}</Link>,
-                        <FormattedDate dateValue={user.creation_date}/>
+                        <Link key={`user-${user.id}`} href={{pathname: '/auth/users/:userId', params: {userId: user.id}}}>{resolveUserDisplayName(user)}</Link>,
+                        <FormattedDate key={`date-${user.id}`} dateValue={user.creation_date}/>
                     ]}
                     headers={['User ID', 'Created At']}
                     actions={[{
diff --git a/webui/src/pages/auth/groups/group/policies.jsx b/webui/src/pages/auth/groups/group/policies.jsx
@@ -43,8 +43,8 @@ const GroupPoliciesList = ({ groupId, after, onPaginate }) => {
                 <DataTable
                     keyFn={policy => policy.id}
                     rowFn={policy => [
-                        <Link href={{pathname: '/auth/policies/:policyId', params: {policyId: policy.id}}}>{policy.id}</Link>,
-                        <FormattedDate dateValue={policy.creation_date}/>
+                        <Link key={`policy-${policy.id}`} href={{pathname: '/auth/policies/:policyId', params: {policyId: policy.id}}}>{policy.id}</Link>,
+                        <FormattedDate key={`date-${policy.id}`} dateValue={policy.creation_date}/>
                     ]}
                     headers={['Policy ID', 'Created At']}
                     actions={[{
diff --git a/webui/src/pages/auth/groups/index.tsx b/webui/src/pages/auth/groups/index.tsx
@@ -197,11 +197,12 @@ const GroupsContainer = () => {
                 rowFn={group => {
                     const elements = [
                         <Checkbox
+                            key={`checkbox-${group.id}`}
                             name={group.id}
                             onAdd={() => setSelected([...selected, group])}
                             onRemove={() => setSelected(selected.filter(g => g !== group))}
                         />,
-                        <Link href={{pathname: '/auth/groups/:groupId', params: {groupId: group.id}}}>
+                        <Link key={`link-${group.id}`} href={{pathname: '/auth/groups/:groupId', params: {groupId: group.id}}}>
                             {group.name}
                         </Link>]
                     if (simplified) {
diff --git a/webui/src/pages/auth/login.tsx b/webui/src/pages/auth/login.tsx
@@ -55,7 +55,7 @@ const LoginForm = ({loginConfig}: {loginConfig: LoginConfig}) => {
                                 <Form.Control 
                                     type="text" 
                                     placeholder={usernamePlaceholder} 
-                                    autoFocus
+                                    
                                     className="bg-light"
                                 />
                             </Form.Group>
diff --git a/webui/src/pages/auth/policies/index.jsx b/webui/src/pages/auth/policies/index.jsx
@@ -125,14 +125,15 @@ const PoliciesContainer = () => {
                 keyFn={policy => policy.id}
                 rowFn={policy => [
                     <Checkbox
+                        key={`checkbox-${policy.id}`}
                         name={policy.id}
                         onAdd={() => setSelected([...selected, policy])}
                         onRemove={() => setSelected(selected.filter(p => p !== policy))}
                     />,
-                    <Link href={{pathname: '/auth/policies/:policyId', params: {policyId: policy.id}}}>
+                    <Link key={`link-${policy.id}`} href={{pathname: '/auth/policies/:policyId', params: {policyId: policy.id}}}>
                         {policy.id}
                     </Link>,
-                    <FormattedDate dateValue={policy.creation_date}/>
+                    <FormattedDate key={`date-${policy.id}`} dateValue={policy.creation_date}/>
                 ]}
                 firstFixedCol={true}
             />
diff --git a/webui/src/pages/auth/users/index.jsx b/webui/src/pages/auth/users/index.jsx
@@ -149,15 +149,16 @@ const UsersContainer = ({ refresh, setRefresh, allUsers, loading, error }) => {
                 keyFn={user => user.id}
                 rowFn={user => [
                     <Checkbox
+                        key={`checkbox-${user.id}`}
                         disabled={(!!currentUser && currentUser.id === user.id)}
                         name={user.id}
                         onAdd={() => setSelected([...selected, user])}
                         onRemove={() => setSelected(selected.filter(u => u !== user))}
                     />,
-                    <Link href={{pathname: '/auth/users/:userId', params: {userId: user.id}}}>
+                    <Link key={`link-${user.id}`} href={{pathname: '/auth/users/:userId', params: {userId: user.id}}}>
                         { resolveUserDisplayName(user) }
                     </Link>,
-                    <FormattedDate dateValue={user.creation_date}/>
+                    <FormattedDate key={`date-${user.id}`} dateValue={user.creation_date}/>
                 ]}
                 firstFixedCol={true}
             />
diff --git a/webui/src/pages/auth/users/user/effectivePolicies.jsx b/webui/src/pages/auth/users/user/effectivePolicies.jsx
@@ -34,8 +34,8 @@ const UserEffectivePoliciesList = ({ userId, after, onPaginate }) => {
                <DataTable
                     keyFn={policy => policy.id}
                     rowFn={policy => [
-                        <Link href={{pathname: '/auth/policies/:policyId', params: {policyId: policy.id}}}>{policy.id}</Link>,
-                        <FormattedDate dateValue={policy.creation_date}/>
+                        <Link key={`policy-${policy.id}`} href={{pathname: '/auth/policies/:policyId', params: {policyId: policy.id}}}>{policy.id}</Link>,
+                        <FormattedDate key={`policy-date-${policy.id}`} dateValue={policy.creation_date}/>
                     ]}
                     headers={['Policy ID', 'Created At']}
                     results={results}
diff --git a/webui/src/pages/auth/users/user/groups.jsx b/webui/src/pages/auth/users/user/groups.jsx
@@ -49,14 +49,15 @@ const UserGroupsList = ({ userId, after, onPaginate }) => {
           keyFn={(group) => group.id}
           rowFn={(group) => [
             <Link
+              key={`link-${group.id}`}
               href={{
                 pathname: "/auth/groups/:groupId",
                 params: { groupId: group.id },
               }}
             >
               {group.name}
             </Link>,
-            <FormattedDate dateValue={group.creation_date} />,
+            <FormattedDate key={`date-${group.id}`} dateValue={group.creation_date} />,
           ]}
           headers={["Group Name", "Created At"]}
           actions={[
diff --git a/webui/src/pages/auth/users/user/policies.jsx b/webui/src/pages/auth/users/user/policies.jsx
@@ -40,8 +40,8 @@ const UserPoliciesList = ({ userId, after, onPaginate }) => {
                 <DataTable
                     keyFn={policy => policy.id}
                     rowFn={policy => [
-                        <Link href={{pathname: '/auth/policies/:policyId', params: {policyId: policy.id}}}>{policy.id}</Link>,
-                        <FormattedDate dateValue={policy.creation_date}/>
+                        <Link key={`policy-${policy.id}`} href={{pathname: '/auth/policies/:policyId', params: {policyId: policy.id}}}>{policy.id}</Link>,
+                        <FormattedDate key={`date-${policy.id}`} dateValue={policy.creation_date}/>
                     ]}
                     headers={['Policy ID', 'Created At']}
                     actions={[{
diff --git a/webui/src/pages/repositories/index.jsx b/webui/src/pages/repositories/index.jsx
@@ -329,7 +329,7 @@ const RepositoriesPage = () => {
                                     <Form.Control
                                         className="border-start-0 bg-light"
                                         placeholder="Search repositories..."
-                                        autoFocus
+                                        
                                         value={search}
                                         onChange={event => setSearch(event.target.value)}
                                     />
diff --git a/webui/src/pages/repositories/repository/settings/branches.jsx b/webui/src/pages/repositories/repository/settings/branches.jsx
@@ -122,7 +122,7 @@ const CreateRuleModal = ({show, hideFn, onSuccess, repoID, currentRulesResponse}
                 <Form.Group as={Row} controlId="pattern">
                     <Form.Label column sm={4}>Branch name pattern</Form.Label>
                     <Col>
-                        <Form.Control sm={8} type="text" autoFocus ref={patternField}
+                        <Form.Control sm={8} type="text"  ref={patternField}
                                       onChange={() => setCreateButtonDisabled(!patternField.current || !patternField.current.value)}/>
                     </Col>
                 </Form.Group>
diff --git a/webui/src/pages/repositories/repository/settings/general.jsx b/webui/src/pages/repositories/repository/settings/general.jsx
diff --git a/webui/src/pages/repositories/services/import_data.jsx b/webui/src/pages/repositories/services/import_data.jsx
diff --git a/webui/src/pages/setup/userConfiguration.tsx b/webui/src/pages/setup/userConfiguration.tsx
diff --git a/webui/vite.config.mts b/webui/vite.config.mts

Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,7 @@ const ChangeSummary = ({prefix, getMore}) => {`
`86`	`86`	`</Tooltip>`
`87`	`87`	`}>`
`88`	`88`	`<small>`
`89`		`- >= {MAX_NUM_OBJECTS.toLocaleString()} results, <a href="#" onClick={onLoadAll}>load more?</a>`
	`89`	`+ >= {MAX_NUM_OBJECTS.toLocaleString()} results, <button type="button" className="btn-link" onClick={onLoadAll}>load more?</button>`
`90`	`90`	`</small>`
`91`	`91`	`</OverlayTrigger>`
`92`	`92`	`)`