Error for all recommend ESLint rules (#20117)

joshmgross · web-flow · commit 65c9959e81d6 · 2026-05-15T16:31:17.000-04:00
Signed-off-by: Josh Gross &lt;git@joshmgross.com&gt;
diff --git a/web/vtadmin/eslint.config.js b/web/vtadmin/eslint.config.js
@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 import js from '@eslint/js';
+import { defineConfig } from 'eslint/config'
 import tseslint from 'typescript-eslint';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
 import jsxA11y from 'eslint-plugin-jsx-a11y';
 import globals from 'globals';
 
-export default tseslint.config(
+export default defineConfig(
     {
         ignores: ['build/**', 'node_modules/**', 'src/proto/**'],
     },
@@ -54,7 +55,7 @@ export default tseslint.config(
         },
         rules: {
             // Carried over from eslint-config-react-app
-            '@typescript-eslint/no-unused-vars': ['warn', { args: 'none', ignoreRestSiblings: true }],
+            '@typescript-eslint/no-unused-vars': ['error', { args: 'none', ignoreRestSiblings: true }],
             '@typescript-eslint/no-explicit-any': 'off',
             '@typescript-eslint/no-empty-object-type': 'off',
             '@typescript-eslint/no-unsafe-function-type': 'off',
@@ -73,23 +74,22 @@ export default tseslint.config(
                 'statusbar', 'stop', 'toolbar', 'top',
             ],
 
-            // Not enabled in eslint-config-react-app; disable to keep migration clean
-            'prefer-const': 'off',
-            'no-extra-boolean-cast': 'off',
-            'no-var': 'off',
-            'no-case-declarations': 'off',
+            'prefer-const': 'error',
+            'no-extra-boolean-cast': 'error',
+            'no-var': 'error',
+            'no-case-declarations': 'error',
 
             // React
             'react/prop-types': 'off', // TypeScript handles prop validation
             'react/display-name': 'off',
-            'react/jsx-key': 'warn',
-            'react/jsx-no-target-blank': 'warn',
+            'react/jsx-key': 'error',
+            'react/jsx-no-target-blank': 'error',
             'react/no-unescaped-entities': 'off',
 
             // Accessibility: match eslint-config-react-app (warn, not error)
-            'jsx-a11y/no-autofocus': 'warn',
-            'jsx-a11y/click-events-have-key-events': 'warn',
-            'jsx-a11y/no-static-element-interactions': 'warn',
+            'jsx-a11y/no-autofocus': 'error',
+            'jsx-a11y/click-events-have-key-events': 'error',
+            'jsx-a11y/no-static-element-interactions': 'error',
 
             // react-hooks plugin v7 added these; not in eslint-config-react-app
             'react-hooks/immutability': 'off',
diff --git a/web/vtadmin/src/api/http.test.ts b/web/vtadmin/src/api/http.test.ts
@@ -81,7 +81,7 @@ describe('api/http', () => {
             try {
                 await api.fetchTablets();
             } catch (error) {
-                let e: HttpResponseNotOkError = error as HttpResponseNotOkError;
+                const e: HttpResponseNotOkError = error as HttpResponseNotOkError;
                 expect(e.name).toEqual(HTTP_RESPONSE_NOT_OK_ERROR);
                 expect(e.message).toEqual('[status 500] /api/tablets: oh_no something went wrong');
                 expect(e.response).toEqual(response);
@@ -107,7 +107,7 @@ describe('api/http', () => {
             try {
                 await api.vtfetch(endpoint);
             } catch (error) {
-                let e: MalformedHttpResponseError = error as MalformedHttpResponseError;
+                const e: MalformedHttpResponseError = error as MalformedHttpResponseError;
                 expect(e.name).toEqual(MALFORMED_HTTP_RESPONSE_ERROR);
                 expect(e.message).toContain(
                     `[status 504] /api/tablets: Unexpected token '<', "<html><hea"... is not valid JSON`
@@ -127,7 +127,7 @@ describe('api/http', () => {
             try {
                 await api.vtfetch(endpoint);
             } catch (error) {
-                let e: MalformedHttpResponseError = error as MalformedHttpResponseError;
+                const e: MalformedHttpResponseError = error as MalformedHttpResponseError;
                 expect(e.name).toEqual(MALFORMED_HTTP_RESPONSE_ERROR);
             }
         });
@@ -182,7 +182,7 @@ describe('api/http', () => {
                 try {
                     await api.vtfetch(endpoint);
                 } catch (error) {
-                    let e: HttpFetchError = error as HttpFetchError;
+                    const e: HttpFetchError = error as HttpFetchError;
                     expect(e.message).toEqual(
                         'Invalid fetch credentials property: nope. Must be undefined or one of omit, same-origin, include'
                     );
@@ -254,7 +254,7 @@ describe('api/http', () => {
                     transform: (e) => null, // doesn't matter
                 });
             } catch (error) {
-                let e: HttpFetchError = error as HttpFetchError;
+                const e: HttpFetchError = error as HttpFetchError;
                 expect(e.message).toMatch('expected entities to be an array, got null');
 
                 expect(errorHandler.notify).toHaveBeenCalledTimes(1);
diff --git a/web/vtadmin/src/components/pips/ShardServingPip.tsx b/web/vtadmin/src/components/pips/ShardServingPip.tsx
@@ -27,6 +27,6 @@ interface Props {
 }
 
 export const ShardServingPip = ({ isLoading, isServing }: Props) => {
-    let state: PipState = isServing ? 'success' : 'danger';
+    const state: PipState = isServing ? 'success' : 'danger';
     return <Pip state={isLoading ? null : state} />;
 };
diff --git a/web/vtadmin/src/components/placeholders/QueryErrorPlaceholder.test.tsx b/web/vtadmin/src/components/placeholders/QueryErrorPlaceholder.test.tsx
@@ -71,8 +71,8 @@ describe('QueryErrorPlaceholder', () => {
 
         expect((httpAPI.fetchClusters as any).mock.calls.length).toEqual(1);
 
-        let placeholder = await screen.findByRole('status');
-        let button = within(placeholder).getByRole('button');
+        const placeholder = await screen.findByRole('status');
+        const button = within(placeholder).getByRole('button');
         expect(button).not.toBeNull();
         expect(button.textContent).toEqual('Try again');
 
diff --git a/web/vtadmin/src/components/routes/Workflows.tsx b/web/vtadmin/src/components/routes/Workflows.tsx
@@ -122,16 +122,16 @@ export const Workflows = () => {
                             {/* TODO(doeg): add a protobuf enum for this (https://github.com/vitessio/vitess/projects/12#card-60190340) */}
                             {['Error', 'Copying', 'Running', 'Stopped'].map((streamState) => {
                                 if (streamState in row.streams) {
-                                    var numThrottled = 0;
-                                    var throttledApp: string | undefined = '';
+                                    let numThrottled = 0;
+                                    let throttledApp: string | undefined = '';
                                     const streamCount = row.streams[streamState].length;
-                                    var streamDescription: string;
+                                    let streamDescription: string;
                                     switch (streamState) {
                                         case 'Error':
                                             streamDescription = 'failed';
                                             break;
                                         case 'Running':
-                                        case 'Copying':
+                                        case 'Copying': {
                                             const streams = row.streams[streamState];
                                             if (streams !== undefined && streams !== null) {
                                                 for (const stream of streams) {
@@ -157,6 +157,7 @@ export const Workflows = () => {
                                                 streamState = 'Throttled';
                                             }
                                             break;
+                                        }
                                         default:
                                             streamDescription = streamState.toLocaleLowerCase();
                                     }
diff --git a/web/vtadmin/src/components/routes/createKeyspace/CreateKeyspace.tsx b/web/vtadmin/src/components/routes/createKeyspace/CreateKeyspace.tsx
@@ -66,7 +66,7 @@ export const CreateKeyspace = () => {
     );
 
     let selectedCluster = null;
-    if (!!formData.clusterID) {
+    if (formData.clusterID) {
         selectedCluster = clusters.find((c) => c.id === formData.clusterID);
     }
 
diff --git a/web/vtadmin/src/components/routes/createSchemaMigration/CreateSchemaMigration.tsx b/web/vtadmin/src/components/routes/createSchemaMigration/CreateSchemaMigration.tsx
@@ -106,12 +106,12 @@ export const CreateSchemaMigration = () => {
     );
 
     let selectedCluster = null;
-    if (!!formData.clusterID) {
+    if (formData.clusterID) {
         selectedCluster = clusters.find((c) => c.id === formData.clusterID);
     }
 
     let selectedKeyspace = null;
-    if (!!formData.keyspace) {
+    if (formData.keyspace) {
         selectedKeyspace = keyspaces.find((ks) => ks.keyspace?.name === formData.keyspace);
     }
 
diff --git a/web/vtadmin/src/components/routes/createWorkflow/CreateMaterialize.tsx b/web/vtadmin/src/components/routes/createWorkflow/CreateMaterialize.tsx
@@ -116,17 +116,17 @@ export const CreateMaterialize = () => {
     );
 
     let selectedCluster = null;
-    if (!!formData.clusterID) {
+    if (formData.clusterID) {
         selectedCluster = clusters.find((c) => c.id === formData.clusterID);
     }
 
     let selectedSourceKeyspace = null;
-    if (!!formData.sourceKeyspace) {
+    if (formData.sourceKeyspace) {
         selectedSourceKeyspace = keyspaces.find((ks) => ks.keyspace?.name === formData.sourceKeyspace);
     }
 
     let selectedTargetKeyspace = null;
-    if (!!formData.targetKeyspace) {
+    if (formData.targetKeyspace) {
         selectedTargetKeyspace = keyspaces.find((ks) => ks.keyspace?.name === formData.targetKeyspace);
     }
 
diff --git a/web/vtadmin/src/components/routes/createWorkflow/CreateMoveTables.tsx b/web/vtadmin/src/components/routes/createWorkflow/CreateMoveTables.tsx
@@ -112,17 +112,17 @@ export const CreateMoveTables = () => {
     );
 
     let selectedCluster = null;
-    if (!!formData.clusterID) {
+    if (formData.clusterID) {
         selectedCluster = clusters.find((c) => c.id === formData.clusterID);
     }
 
     let selectedSourceKeyspace = null;
-    if (!!formData.sourceKeyspace) {
+    if (formData.sourceKeyspace) {
         selectedSourceKeyspace = keyspaces.find((ks) => ks.keyspace?.name === formData.sourceKeyspace);
     }
 
     let selectedTargetKeyspace = null;
-    if (!!formData.targetKeyspace) {
+    if (formData.targetKeyspace) {
         selectedTargetKeyspace = keyspaces.find((ks) => ks.keyspace?.name === formData.targetKeyspace);
     }
 
diff --git a/web/vtadmin/src/components/routes/createWorkflow/CreateReshard.tsx b/web/vtadmin/src/components/routes/createWorkflow/CreateReshard.tsx
@@ -116,12 +116,12 @@ export const CreateReshard = () => {
     );
 
     let selectedCluster = null;
-    if (!!formData.clusterID) {
+    if (formData.clusterID) {
         selectedCluster = clusters.find((c) => c.id === formData.clusterID);
     }
 
     let selectedKeyspace = null;
-    if (!!formData.keyspace) {
+    if (formData.keyspace) {
         selectedKeyspace = keyspaces.find((ks) => ks.keyspace?.name === formData.keyspace);
     }
 
diff --git a/web/vtadmin/src/components/routes/workflow/WorkflowDetails.tsx b/web/vtadmin/src/components/routes/workflow/WorkflowDetails.tsx
@@ -92,7 +92,7 @@ export const WorkflowDetails = ({ clusterID, keyspace, name, refetchInterval }:
             Error: 0,
         };
         streamList.forEach((stream) => {
-            var isThrottled =
+            const isThrottled =
                 Number(stream.throttler_status?.time_throttled?.seconds) > Date.now() / 1000 - ThrottleThresholdSeconds;
             const streamState = isThrottled ? 'Throttled' : stream.state;
             if (streamState) {
@@ -164,7 +164,7 @@ export const WorkflowDetails = ({ clusterID, keyspace, name, refetchInterval }:
                     ? `/workflow/${clusterID}/${keyspace}/${name}/stream/${row.tablet.cell}/${row.tablet.uid}/${row.id}`
                     : null;
 
-            var isThrottled =
+            const isThrottled =
                 Number(row?.throttler_status?.time_throttled?.seconds) > Date.now() / 1000 - ThrottleThresholdSeconds;
             const rowState = isThrottled ? 'Throttled' : row.state;
             return (
diff --git a/web/vtadmin/src/components/routes/workflow/WorkflowVDiff.tsx b/web/vtadmin/src/components/routes/workflow/WorkflowVDiff.tsx
@@ -62,7 +62,7 @@ export const WorkflowVDiff = ({ clusterID, keyspace, name }: Props) => {
         createVDiffMutation.mutate();
     };
 
-    let hasMutationRun = !!createVDiffMutation.data || !!createVDiffMutation.error;
+    const hasMutationRun = !!createVDiffMutation.data || !!createVDiffMutation.error;
 
     const closeDialog = () => {
         setDialogOpen(false);
diff --git a/web/vtadmin/src/errors/bugsnag.ts b/web/vtadmin/src/errors/bugsnag.ts
@@ -37,7 +37,7 @@ export const notify = (error: Error, env: object, metadata?: object) => {
     BugsnagJS.notify(error, (event) => {
         event.addMetadata('env', env);
 
-        if (!!metadata) {
+        if (metadata) {
             event.addMetadata('metadata', metadata);
         }
     });
diff --git a/web/vtadmin/src/util/filterNouns.ts b/web/vtadmin/src/util/filterNouns.ts
@@ -54,11 +54,12 @@ export const filterNouns = <T extends { [k: string]: any }>(needle: string | nul
 
     return otherTokens.reduce((acc, token) => {
         switch (token.type) {
-            case SearchTokenTypes.EXACT:
+            case SearchTokenTypes.EXACT: {
                 const needle = token.value;
                 return acc.filter((o: T) => {
                     return Object.values(o).some((val) => val === needle);
                 });
+            }
             case SearchTokenTypes.FUZZY:
                 return acc.filter((o: T) => {
                     return Object.values(o).some((val) => fuzzyCompare(token.value, `${val}`));
diff --git a/web/vtadmin/src/util/tabletDebugVars.ts b/web/vtadmin/src/util/tabletDebugVars.ts
@@ -92,7 +92,7 @@ export const formatTimeseriesMap = (rates: { [k: string]: number[] }, endAt?: nu
     //      (b) contain a minimum of two series, one of them named "All".
     // In the first case, inserting an empty "All" series renders more nicely
     // on a graph since it will include the axes, etc. So, we add it here.
-    const _rates = !!Object.keys(rates).length ? rates : { All: [] };
+    const _rates = Object.keys(rates).length ? rates : { All: [] };
 
     const planTypes = Object.keys(_rates);
 

Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,6 @@ interface Props {`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`export const ShardServingPip = ({ isLoading, isServing }: Props) => {`
`30`		`- let state: PipState = isServing ? 'success' : 'danger';`
	`30`	`+ const state: PipState = isServing ? 'success' : 'danger';`
`31`	`31`	`return <Pip state={isLoading ? null : state} />;`
`32`	`32`	`};`
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@ export const CreateKeyspace = () => {`
`66`	`66`	`);`
`67`	`67`
`68`	`68`	`let selectedCluster = null;`
`69`		`- if (!!formData.clusterID) {`
	`69`	`+ if (formData.clusterID) {`
`70`	`70`	`selectedCluster = clusters.find((c) => c.id === formData.clusterID);`
`71`	`71`	`}`
`72`	`72`
Original file line number	Diff line number	Diff line change
`@@ -106,12 +106,12 @@ export const CreateSchemaMigration = () => {`
`106`	`106`	`);`
`107`	`107`
`108`	`108`	`let selectedCluster = null;`
`109`		`- if (!!formData.clusterID) {`
	`109`	`+ if (formData.clusterID) {`
`110`	`110`	`selectedCluster = clusters.find((c) => c.id === formData.clusterID);`
`111`	`111`	`}`
`112`	`112`
`113`	`113`	`let selectedKeyspace = null;`
`114`		`- if (!!formData.keyspace) {`
	`114`	`+ if (formData.keyspace) {`
`115`	`115`	`selectedKeyspace = keyspaces.find((ks) => ks.keyspace?.name === formData.keyspace);`
`116`	`116`	`}`
`117`	`117`
Original file line number	Diff line number	Diff line change
`@@ -116,17 +116,17 @@ export const CreateMaterialize = () => {`
`116`	`116`	`);`
`117`	`117`
`118`	`118`	`let selectedCluster = null;`
`119`		`- if (!!formData.clusterID) {`
	`119`	`+ if (formData.clusterID) {`
`120`	`120`	`selectedCluster = clusters.find((c) => c.id === formData.clusterID);`
`121`	`121`	`}`
`122`	`122`
`123`	`123`	`let selectedSourceKeyspace = null;`
`124`		`- if (!!formData.sourceKeyspace) {`
	`124`	`+ if (formData.sourceKeyspace) {`
`125`	`125`	`selectedSourceKeyspace = keyspaces.find((ks) => ks.keyspace?.name === formData.sourceKeyspace);`
`126`	`126`	`}`
`127`	`127`
`128`	`128`	`let selectedTargetKeyspace = null;`
`129`		`- if (!!formData.targetKeyspace) {`
	`129`	`+ if (formData.targetKeyspace) {`
`130`	`130`	`selectedTargetKeyspace = keyspaces.find((ks) => ks.keyspace?.name === formData.targetKeyspace);`
`131`	`131`	`}`
`132`	`132`
Original file line number	Diff line number	Diff line change
`@@ -112,17 +112,17 @@ export const CreateMoveTables = () => {`
`112`	`112`	`);`
`113`	`113`
`114`	`114`	`let selectedCluster = null;`
`115`		`- if (!!formData.clusterID) {`
	`115`	`+ if (formData.clusterID) {`
`116`	`116`	`selectedCluster = clusters.find((c) => c.id === formData.clusterID);`
`117`	`117`	`}`
`118`	`118`
`119`	`119`	`let selectedSourceKeyspace = null;`
`120`		`- if (!!formData.sourceKeyspace) {`
	`120`	`+ if (formData.sourceKeyspace) {`
`121`	`121`	`selectedSourceKeyspace = keyspaces.find((ks) => ks.keyspace?.name === formData.sourceKeyspace);`
`122`	`122`	`}`
`123`	`123`
`124`	`124`	`let selectedTargetKeyspace = null;`
`125`		`- if (!!formData.targetKeyspace) {`
	`125`	`+ if (formData.targetKeyspace) {`
`126`	`126`	`selectedTargetKeyspace = keyspaces.find((ks) => ks.keyspace?.name === formData.targetKeyspace);`
`127`	`127`	`}`
`128`	`128`
Original file line number	Diff line number	Diff line change
`@@ -116,12 +116,12 @@ export const CreateReshard = () => {`
`116`	`116`	`);`
`117`	`117`
`118`	`118`	`let selectedCluster = null;`
`119`		`- if (!!formData.clusterID) {`
	`119`	`+ if (formData.clusterID) {`
`120`	`120`	`selectedCluster = clusters.find((c) => c.id === formData.clusterID);`
`121`	`121`	`}`
`122`	`122`
`123`	`123`	`let selectedKeyspace = null;`
`124`		`- if (!!formData.keyspace) {`
	`124`	`+ if (formData.keyspace) {`
`125`	`125`	`selectedKeyspace = keyspaces.find((ks) => ks.keyspace?.name === formData.keyspace);`
`126`	`126`	`}`
`127`	`127`