[chore] Update eslint and fix newly-generated warnings (#1394)

NickLanam · web-flow · commit e4917a6ae597 · 2023-05-31T12:53:00.000-07:00
Summary: Changes to eslint also changed how a couple of the rules
behave.

Type of change: /kind cleanup

Test Plan: `yarn install &amp;&amp; yarn lint`.

Signed-off-by: Nick Lanam &lt;nlanam@pixielabs.ai&gt;
diff --git a/src/ui/package.json b/src/ui/package.json
@@ -27,8 +27,8 @@
     "@types/react-table": "^7.7.1",
     "@types/react-window": "^1.8.3",
     "@types/segment-analytics": "^0.0.32",
-    "@typescript-eslint/eslint-plugin": "^5.9.1",
-    "@typescript-eslint/parser": "^5.9.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
     "@welldone-software/why-did-you-render": "^4.3.1",
     "@yarnpkg/pnpify": "^3.1.0",
     "archiver": "^5.0.2",
@@ -42,15 +42,15 @@
     "esbuild": "^0.13.13",
     "esbuild-jest": "^0.5.0",
     "esbuild-loader": "^2.16.0",
-    "eslint": "^8.6.0",
+    "eslint": "^8.41.0",
     "eslint-config-airbnb-typescript": "^16.1.0",
     "eslint-import-resolver-node": "^0.3.6",
-    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^25.3.4",
-    "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-memo": "^0.0.3",
     "favicons": "^7.1.2",
     "favicons-webpack-plugin": "^6.0.0",
@@ -158,7 +158,7 @@
     "coverage": "jest --coverage",
     "coverage_ci": "jest --coverage --maxWorkers=4",
     "license_check": "yarn pnpify license-checker --relativeLicensePath",
-    "lint": "tsc --noEmit && eslint -c .eslintrc.json .",
+    "lint": "yarn typecheck && eslint -c .eslintrc.json .",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run"
   },
diff --git a/src/ui/src/api/api-client.ts b/src/ui/src/api/api-client.ts
@@ -25,7 +25,6 @@ import { switchMap } from 'rxjs/operators';
 import { Status } from 'app/types/generated/vizierapi_pb';
 import { containsMutation } from 'app/utils/pxl';
 
-import { GetCSRFCookie } from '../pages/auth/utils';
 import { PixieAPIClientOptions } from './api-options';
 import { CloudClient } from './cloud-gql-client';
 import { VizierQueryError } from './vizier';
@@ -35,6 +34,7 @@ import {
   VizierQueryFunc,
   ExecuteScriptOptions,
 } from './vizier-grpc-client';
+import { GetCSRFCookie } from '../pages/auth/utils';
 
 /**
  * When calling `PixieAPIClient.create`, this specifies which clusters to connect to, and any special configuration for
diff --git a/src/ui/src/api/cloud-gql-client.ts b/src/ui/src/api/cloud-gql-client.ts
@@ -33,8 +33,8 @@ import fetch from 'cross-fetch';
 
 import { isPixieEmbedded } from 'app/common/embed-context';
 
-import { GetCSRFCookie } from '../pages/auth/utils';
 import { PixieAPIClientOptions } from './api-options';
+import { GetCSRFCookie } from '../pages/auth/utils';
 
 // Apollo link that adds cookies in the request.
 const makeCloudAuthLink = (opts: PixieAPIClientOptions) => setContext((_, { headers }) => ({
diff --git a/src/ui/src/components/auth/pixienaut-octopus.tsx b/src/ui/src/components/auth/pixienaut-octopus.tsx
@@ -20,7 +20,7 @@ import React from 'react';
 
 // eslint-disable-next-line react-memo/require-memo,react/display-name
 export const PixienautOctopusSvg: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  /* eslint-disable max-len */
+  /* eslint-disable max-len,react/no-unknown-property */
   <svg {...props} width='3681' height='1684' viewBox='0 0 3681 1684' fill='none' xmlns='http://www.w3.org/2000/svg'>
     <path
       d='M255.23 1413.48C255.23 1413.48 375.911 1507.73 471.019 1497.44C566.699 1487.09 623.566 1429.79 603.898 1377.1C584.23 1324.4 492.114 1378.5 459.752 1354.9C427.39 1331.27 413.834 1311.11 413.834 1311.11L255.23 1413.48Z'
diff --git a/src/ui/src/components/auth/pixienaut-toilet.tsx b/src/ui/src/components/auth/pixienaut-toilet.tsx
@@ -20,7 +20,7 @@ import React from 'react';
 
 // eslint-disable-next-line react-memo/require-memo,react/display-name
 export const PixienautToiletSvg: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  /* eslint-disable max-len */
+  /* eslint-disable max-len,react/no-unknown-property */
   <svg {...props} width='882' height='1045' viewBox='0 0 882 1045' fill='none' xmlns='http://www.w3.org/2000/svg'>
     <path
       d='M184.025 691.843L275.173 695.709C294.849 696.544 304.686 696.961 312.753 700.741C319.769 704.028 325.802 709.094 330.256 715.434C335.376 722.724 337.491 732.34 341.721 751.574L341.721 751.574C348.015 780.193 351.163 794.503 345.206 807.858C340.886 817.545 328.496 828.707 318.412 831.996C304.51 836.531 294.116 833.079 273.33 826.174C222.881 809.417 184.025 771.539 184.025 691.843Z'
diff --git a/src/ui/src/components/command-palette/providers/script/missing-script-provider.tsx b/src/ui/src/components/command-palette/providers/script/missing-script-provider.tsx
@@ -35,7 +35,6 @@ import { checkExhaustive } from 'app/utils/check-exhaustive';
 import { Script } from 'app/utils/script-bundle';
 import { highlightNamespacedScoredMatch, highlightScoredMatch } from 'app/utils/string-search';
 
-import { CommandPaletteContext } from '../../command-palette-context';
 import {
   CompletionDescription,
   CompletionLabel,
@@ -48,12 +47,13 @@ import {
   getFullScriptSuggestions,
   getSuggestedArgsFromPossibleEntity,
 } from './script-suggestions';
+import { CommandPaletteContext } from '../../command-palette-context';
 
 type DecoratedCompletion = CommandCompletion & { forScript: string };
 
 const DEFAULT: CommandProviderState = Object.freeze({
   input: '',
-  selection: [0, 0],
+  selection: [0, 0] as [start: number, end: number],
   providerName: 'MissingScriptProvider',
   loading: false,
   completions: [],
diff --git a/src/ui/src/components/command-palette/providers/script/script-provider.tsx b/src/ui/src/components/command-palette/providers/script/script-provider.tsx
@@ -37,7 +37,6 @@ import { CancellablePromise, makeCancellable } from 'app/utils/cancellable-promi
 import { checkExhaustive } from 'app/utils/check-exhaustive';
 import { Script } from 'app/utils/script-bundle';
 
-import { CommandPaletteContext } from '../../command-palette-context';
 import {
   CompletionLabel,
   getFieldSuggestions,
@@ -50,10 +49,11 @@ import {
   getScriptArgSuggestions,
   getScriptArgValueSuggestions,
 } from './script-suggestions';
+import { CommandPaletteContext } from '../../command-palette-context';
 
 const DEFAULT: CommandProviderState = Object.freeze({
   input: '',
-  selection: [0, 0],
+  selection: [0, 0] as [start: number, end: number],
   providerName: 'ScriptProvider',
   loading: false,
   completions: [],
diff --git a/src/ui/src/containers/live-data-table/live-data-table.tsx b/src/ui/src/containers/live-data-table/live-data-table.tsx
@@ -57,7 +57,7 @@ const DataAlignmentMap = new Map<DataType, CellAlignment>(
 
 export type CompleteColumnDef =
   ReactTableColumn<Record<string, any>>
-  & { Cell: ({ value: any }) => (JSX.Element | null) };
+  & { Cell: ({ value }: { value: any }) => (JSX.Element | null) };
 
 /** Transforms a table coming from a script into something react-table understands. */
 function useConvertedTable(
diff --git a/src/ui/src/containers/live-widgets/graph/graph.tsx b/src/ui/src/containers/live-widgets/graph/graph.tsx
@@ -36,15 +36,15 @@ import { Relation, SemanticType } from 'app/types/generated/vizierapi_pb';
 import { Arguments } from 'app/utils/args-utils';
 import { GaugeLevel, getColor, getLatencyNSLevel } from 'app/utils/metric-thresholds';
 
-import { formatByDataType, formatBySemType } from '../../format-data/format-data';
-import { deepLinkURLFromSemanticType } from '../utils/live-view-params';
 import { GraphBase } from './graph-base';
 import {
   ColInfo,
   colInfoFromName,
   getGraphOptions,
   semTypeToShapeConfig,
 } from './graph-utils';
+import { formatByDataType, formatBySemType } from '../../format-data/format-data';
+import { deepLinkURLFromSemanticType } from '../utils/live-view-params';
 
 interface AdjacencyList {
   toColumn: string;
diff --git a/src/ui/src/containers/live-widgets/graph/request-graph-manager.ts b/src/ui/src/containers/live-widgets/graph/request-graph-manager.ts
@@ -19,8 +19,8 @@
 import { data as visData } from 'vis-network/standalone';
 
 import { dataWithUnitsToString, formatBySemType } from 'app/containers/format-data/format-data';
-import { deepLinkURLFromSemanticType, EmbedState } from 'app/containers/live-widgets/utils/live-view-params';
 import { WidgetDisplay } from 'app/containers/live/vis';
+import { deepLinkURLFromSemanticType, EmbedState } from 'app/containers/live-widgets/utils/live-view-params';
 import { Relation, SemanticType } from 'app/types/generated/vizierapi_pb';
 import { Arguments } from 'app/utils/args-utils';
 import { formatFloat64Data } from 'app/utils/format-data';
diff --git a/src/ui/src/containers/live-widgets/table/query-result-viewer.tsx b/src/ui/src/containers/live-widgets/table/query-result-viewer.tsx
@@ -23,8 +23,8 @@ import { Theme } from '@mui/material/styles';
 import { createStyles, makeStyles } from '@mui/styles';
 
 import { ROW_RETENTION_LIMIT, VizierTable } from 'app/api';
-import { CompleteColumnDef, LiveDataTable } from 'app/containers/live-data-table/live-data-table';
 import { WidgetDisplay } from 'app/containers/live/vis';
+import { CompleteColumnDef, LiveDataTable } from 'app/containers/live-data-table/live-data-table';
 import { ResultsContext, useLatestRowCount } from 'app/context/results-context';
 import { Arguments } from 'app/utils/args-utils';
 
diff --git a/src/ui/src/containers/live-widgets/vega/vega.tsx b/src/ui/src/containers/live-widgets/vega/vega.tsx
@@ -59,8 +59,8 @@ import {
 import { formatFloat64Data } from 'app/utils/format-data';
 import noop from 'app/utils/noop';
 
-import { TimeSeriesContext } from '../context/time-series-context';
 import { FlamegraphIDEMenu } from './flamegraph-ide';
+import { TimeSeriesContext } from '../context/time-series-context';
 
 const NUMERAL_FORMAT_STRING = '0.00';
 
diff --git a/src/ui/src/containers/live/convert-to-vega-spec/convert-to-vega-spec.ts b/src/ui/src/containers/live/convert-to-vega-spec/convert-to-vega-spec.ts
@@ -25,8 +25,8 @@ import { vegaLite, VisualizationSpec } from 'vega-embed';
 import { TopLevelSpec as VlSpec } from 'vega-lite';
 
 import { getFormatFnMetadata, DataWithUnits } from 'app/containers/format-data/format-data';
-import { addPxTimeFormatExpression } from 'app/containers/live-widgets/vega/timeseries-axis';
 import { DISPLAY_TYPE_KEY, WidgetDisplay } from 'app/containers/live/vis';
+import { addPxTimeFormatExpression } from 'app/containers/live-widgets/vega/timeseries-axis';
 import { Relation, SemanticType } from 'app/types/generated/vizierapi_pb';
 
 import { BarDisplay, convertToBarChart } from './bar';
diff --git a/src/ui/src/pages/configure-data-export/data-export-history.tsx b/src/ui/src/pages/configure-data-export/data-export-history.tsx
@@ -26,9 +26,9 @@ import { Link } from 'react-router-dom';
 
 import { ClusterContext } from 'app/common/cluster-context';
 import { Spinner, StatusCell, StatusGroup } from 'app/components';
+import { DISPLAY_TYPE_KEY, TABLE_DISPLAY_TYPE } from 'app/containers/live/vis';
 import { CompleteColumnDef } from 'app/containers/live-data-table/live-data-table';
 import { QueryResultTable } from 'app/containers/live-widgets/table/query-result-viewer';
-import { DISPLAY_TYPE_KEY, TABLE_DISPLAY_TYPE } from 'app/containers/live/vis';
 import { SetStateFunc } from 'app/context/common';
 import { ResultsContext } from 'app/context/results-context';
 import { GQLClusterStatus, GQLDetailedRetentionScript, GQLRetentionScript } from 'app/types/schema';
diff --git a/src/ui/src/utils/debounce.ts b/src/ui/src/utils/debounce.ts
@@ -21,6 +21,7 @@ export function debounce<P extends any[] = any[]>(func: (...args: P) => void, wa
   let context;
   let lastArgs;
   return function call(...args: P): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     context = this;
     lastArgs = args;
     const onTimeout = () => {
diff --git a/src/ui/yarn.lock b/src/ui/yarn.lock
