Cleanup: add no-unused-vars and imports eslint rules and fix the codebase

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
   ],
+  plugins: ['unused-imports'],
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
@@ -24,6 +25,9 @@ module.exports = {
     '@typescript-eslint/no-namespace': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-unused-vars': 'off',
+    'no-unused-vars': 'off',
+    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-vars': ['error', { ignoreRestSiblings: true }],
     '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/no-use-before-define': [
       'error',

package.json

@@ -34,6 +34,7 @@
     "@blueprintjs/select": "5.1.1",
     "@improbable-eng/grpc-web": "^0.15.0",
     "@react-hook/resize-observer": "1.2.6",
+    "@react-spring/web": "9.7.3",
     "@use-gesture/react": "10.3.0",
     "classnames": "2.5.1",
     "core-js": "3.35.1",
@@ -51,7 +52,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.22.0",
-    "@react-spring/web": "9.7.3",
     "react-window": "1.8.10",
     "url-parse": "1.5.10"
   },
@@ -91,6 +91,7 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-unused-imports": "^3.1.0",
     "fs-extra": "11.2.0",
     "html-webpack-plugin": "5.6.0",
     "husky": "9.0.10",

scripts/assets-transformer.js

@@ -4,7 +4,7 @@
 const path = require('path');
 
 module.exports = {
-  process(src, filename, config, options) {
+  process(_, filename) {
     return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
   },
 };

scripts/install-grpc-deps/protoc.mjs

@@ -5,8 +5,7 @@ import decompress from 'decompress';
 
 const VERSION = '3.11.4';
 
-const DL_PREFIX =
-  'https://github.com/protocolbuffers/protobuf/releases/download';
+const DL_PREFIX = 'https://github.com/protocolbuffers/protobuf/releases/download';
 
 const PLATFORM =
   {
@@ -53,9 +52,7 @@ async function download(url, targetFile) {
         if (code > 300 && code < 400 && !!response.headers.location) {
           return resolve(download(response.headers.location, targetFile));
         }
-        const fileWriter = fs
-          .createWriteStream(targetFile)
-          .on('finish', () => resolve());
+        const fileWriter = fs.createWriteStream(targetFile).on('finish', () => resolve());
         response.pipe(fileWriter);
       })
       .on('error', error => reject(error));

src/api/customprotocol-core/stream.ts

@@ -385,6 +385,8 @@ export class Stream<H extends HandlerTypes = {}> extends EventEmitter<Union<Hand
     return false;
   }
 
+  // TODO: fix inheritance - _isFirst is used in Stream implementation so can't be removed here
+  // eslint-disable-next-line unused-imports/no-unused-vars
   protected messageBuilder(msg: Message, _isFirst: boolean): Message {
     return msg;
   }

src/api/grpc/error.ts

@@ -1,4 +1,4 @@
-import { GrpcError, GrpcStatus, StatusCode, GrpcMetadata } from './common';
+import { GrpcError, GrpcStatus, StatusCode } from './common';
 
 // TODO: provide additional getters if needed
 export class GrpcWrappedError implements Error {

src/api/http-client/result.ts

@@ -1,5 +1,3 @@
-import _ from 'lodash';
-
 import { camelCasify } from '~/domain/misc';
 import { Result } from '~/utils';
 

src/components/ArrowsRenderer/index.tsx

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import { observer } from 'mobx-react';
 import React, { useRef } from 'react';
 

src/components/Card/index.tsx

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import classnames from 'classnames';
 import React, { useLayoutEffect, useRef } from 'react';
 import { observer } from 'mobx-react';

src/components/DetailsPanel/hooks/usePanelResize.ts

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import { sizes } from '~/ui/vars';
 
 import * as storage from '~/storage/local';

src/components/DetailsPanel/index.tsx

@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react';
-import React, { FunctionComponent, useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
 import { DragPanel } from '~/components/DragPanel';
 import {

src/components/EndpointCardHeader/index.tsx

@@ -35,40 +35,3 @@ export const EndpointCardHeader = memo(function EndpointCardHeader(props: Props)
     </div>
   );
 });
-
-interface PolicyProps {
-  ingress: boolean;
-  egress: boolean;
-}
-
-const PolicyInfo = memo(function PolicyProps(props: PolicyProps) {
-  const inLocked = props.ingress ? 'locked' : 'unlocked';
-  const eLocked = props.egress ? 'locked' : 'unlocked';
-
-  const ingressIcon = `icons/misc/ingress-${inLocked}.svg`;
-  const egressIcon = `icons/misc/ingress-${eLocked}.svg`;
-
-  const ingressCls = classnames({
-    [css.left]: true,
-    [css.active]: props.ingress,
-  });
-
-  const egressCls = classnames({
-    [css.right]: true,
-    [css.active]: props.egress,
-  });
-
-  return (
-    <div className={css.connectors}>
-      <div className={ingressCls}>
-        <img src={ingressIcon} />
-        <span>Ingress</span>
-      </div>
-
-      <div className={egressCls}>
-        <span>Egress</span>
-        <img src={egressIcon} />
-      </div>
-    </div>
-  );
-});

src/components/FlowsTable/ColumnsSelector.tsx

@@ -3,7 +3,7 @@ import React, { memo, useCallback } from 'react';
 
 import { usePopover } from '~/ui/hooks/usePopover';
 
-import { CommonProps, Column, columnKeys, getColumnLabel } from './general';
+import { CommonProps, Column, getColumnLabel } from './general';
 
 export interface Props extends CommonProps {
   visibleColumns: Set<Column>;

src/components/FlowsTable/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { Icon } from '@blueprintjs/core';
-import React, { memo, useCallback, useMemo, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 
 import { Flow, Verdict } from '~/domain/flows';
 import { Filters, FilterEntry, FilterDirection } from '~/domain/filtering';
@@ -51,7 +51,7 @@ export const FlowsTableSidebar = memo<Props>(function FlowsTableSidebar(props) {
   const [podSelection, setPodSelection] = useState<Set<string>>(new Set());
   const [identitySelection, setIdSelection] = useState<Set<number>>(new Set());
   const [ipSelection, setIpSelection] = useState<Set<string>>(new Set());
-  const [tcpFlagSelection, setTCPSelection] = useState<Set<TCPFlagName>>(new Set());
+  const [tcpFlagSelection] = useState<Set<TCPFlagName>>(new Set());
 
   const [isDnsSelected, setDnsSelected] = useState(false);
 

src/components/FlowsTable/SidebarComponents.tsx

@@ -138,10 +138,6 @@ export const VerdictEntry = memo<VerdictEntryProps>(function FlowsTableSidebarVe
     [css.auditVerdict]: props.verdict === Verdict.Audit,
   });
 
-  const onClick = useCallback(() => {
-    props.onClick?.();
-  }, [props.onClick]);
-
   return (
     <span className={className} onClick={props.onClick}>
       {verdictHelpers.toString(props.verdict)}

src/components/FlowsTable/__tests__/Row.test.tsx

@@ -7,8 +7,6 @@ import { Column } from '~/components/FlowsTable';
 import { Flow } from '~/domain/flows';
 import { HubbleFlow } from '~/domain/hubble';
 
-const tsUpdateDelay = 5000;
-
 jest.useFakeTimers();
 
 interface Expectations {
@@ -63,7 +61,7 @@ const runAppearanceTests = (row: HTMLElement, exps: Expectations, selected: bool
   }
 };
 
-const runTemporalTests = (row: HTMLElement, flow: Flow) => {
+const runTemporalTests = (row: HTMLElement) => {
   jest.clearAllTimers();
   const tsLabel = row.querySelector('.cell:nth-child(12)')!;
 
@@ -77,7 +75,7 @@ const runTest = (ntest: number, hf: HubbleFlow, exps: Expectations) => {
   const isSelected = [false, true];
 
   isSelected.forEach(selected => {
-    const onSelect = jest.fn((flow: Flow | null) => void 0);
+    const onSelect = jest.fn(() => void 0);
     const selectedStr = selected ? 'selected' : 'not-selected';
 
     describe(`FlowsTable: Row (${selectedStr}) / test ${ntest}`, () => {
@@ -99,7 +97,7 @@ const runTest = (ntest: number, hf: HubbleFlow, exps: Expectations) => {
       });
 
       test(`temporal`, () => {
-        runTemporalTests(row, flow);
+        runTemporalTests(row);
       });
 
       test(`interactions`, () => {

src/components/FlowsTable/hooks/useScroll.ts

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, MutableRefObject } from 'react';
+import { useRef, useEffect, MutableRefObject } from 'react';
 import { FixedSizeListProps } from 'react-window';
 
 import { sizes } from '~/ui';

src/components/FlowsTable/index.tsx

@@ -4,7 +4,6 @@ import { FixedSizeList } from 'react-window';
 
 import { Flow } from '~/domain/flows';
 import { sizes } from '~/ui';
-import { Ticker } from '~/utils/ticker';
 
 import { CommonProps, TickerEvents } from './general';
 import { useScroll, OnFlowsDiffCount } from './hooks/useScroll';

src/components/Map/NamespaceBackplate.tsx

@@ -1,7 +1,6 @@
 import React, { memo } from 'react';
 
 import { XYWH } from '~/domain/geometry';
-import { sizes } from '~/ui/vars';
 
 import css from './styles.scss';
 

src/components/ServiceMapApp/index.tsx

@@ -198,7 +198,7 @@ export const ServiceMapApp = observer(function ServiceMapApp() {
             visibleHeight={mapVisibleHeight ?? 0}
             wasDragged={mapWasDragged}
             onMapDrag={onMapDrag}
-            onCardMutated={muts => ui.serviceMap.cardsMutationsObserved(muts)}
+            onCardMutated={() => ui.serviceMap.cardsMutationsObserved()}
           />
         ) : (
           <LoadingOverlay

src/components/ServiceMapArrowRenderer/ServiceMapArrowBody.tsx

@@ -1,14 +1,12 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import classnames from 'classnames';
-import * as mobx from 'mobx';
 import * as d3 from 'd3';
 
 import { XY } from '~/domain/geometry';
-import { link } from '~/domain/helpers';
 
 import { ArrowRendererProps } from '~/components/ArrowsRenderer';
-import { ServiceMapArrow, AccessPointArrow } from '~/ui-layer/service-map/coordinates/arrow';
+import { ServiceMapArrow } from '~/ui-layer/service-map/coordinates/arrow';
 import { colors, sizes } from '~/ui/vars';
 
 import * as helpers from './helpers';
@@ -22,14 +20,6 @@ export const ServiceMapArrowBody = observer(function ServiceMapArrowBody(props:
   const endingFigures = useRef<SVGGElement | null>(null);
   const innerArrows = useRef<SVGGElement | null>(null);
 
-  const arrow = mobx
-    .computed(() => {
-      if (!(props.arrow instanceof ServiceMapArrow)) return null;
-
-      return props.arrow;
-    })
-    .get();
-
   const renderArrow = useCallback((arrow: ServiceMapArrow) => {
     // NOTE: Here we use data bind with one element in array just to have
     // NOTE: an access to enter/update sets (see d3 General Update Pattern).
@@ -85,7 +75,7 @@ export const ServiceMapArrowBody = observer(function ServiceMapArrowBody(props:
     const startPlate = d3
       .select(endingFigures.current!)
       .selectAll<SVGPathElement, XY>('path.start-plate')
-      .data([arrow.start], _ => `${arrow.id}-start-plate`);
+      .data([arrow.start], () => `${arrow.id}-start-plate`);
 
     startPlate.attr('d', helpers.svg.startPlatePath);
 

src/components/ServiceMapArrowRenderer/ServiceMapArrowDuckFeet.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import * as d3 from 'd3';
@@ -40,7 +40,7 @@ export const ServiceMapArrowDuckFeet = observer(function ServiceMapArrowDuckFeet
       const endingConnector = d3
         .select(target)
         .selectAll<SVGCircleElement, XY>('circle.ending-connector')
-        .data([connectorPosition], _ => `${connectorId}-ending-connector`);
+        .data([connectorPosition], () => `${connectorId}-ending-connector`);
 
       endingConnector.attr('cx', d => d.x).attr('cy', d => d.y);
 

src/components/ServiceMapCard/http-groups.ts

@@ -8,7 +8,6 @@ export class HTTPEndpointGroup {
   public static createSorted(endpoints?: PartialConnections<L7Endpoint>): HTTPEndpointGroup[] {
     if (endpoints == null) return [];
 
-    const pathGroups: Map<string, L7Endpoint[]> = new Map();
     const sortedEndpoints: L7Endpoint[] = [];
 
     endpoints?.get(L7Kind.HTTP)?.forEach(ep => {

src/components/Teleport/index.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 export type Props = {

src/components/TopBar/FlowsFilterInput.tsx

@@ -1,12 +1,11 @@
 import { Button, Classes, MenuItem } from '@blueprintjs/core';
 import { ItemRenderer, MultiSelect2 } from '@blueprintjs/select';
 import { trim } from 'lodash';
-import React, { useCallback, useState, memo } from 'react';
-import classnames from 'classnames';
+import React, { useCallback, useState } from 'react';
 
 import { TagDirection } from './TagDirection';
 
-import { FilterDirection, FilterEntry, FilterKind } from '~/domain/filtering';
+import { FilterEntry, FilterKind } from '~/domain/filtering';
 import { Labels } from '~/domain/labels';
 
 import css from './FlowsFilterInput.scss';

src/components/TopBar/index.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import { Verdict } from '~/domain/hubble';
 import { FilterEntry } from '~/domain/filtering';
 import { Status } from '~/domain/status';
-import { DataMode, TransferState } from '~/domain/interactions';
+import { TransferState } from '~/domain/interactions';
 import { NamespaceDescriptor } from '~/domain/namespaces';
 
 import { FlowsFilterInput } from './FlowsFilterInput';