fix(eslint): update eslint to latest and resolve all new issues

Author: gribnoysup

configs/eslint-config-compass/package.json

@@ -18,16 +18,16 @@
     "@babel/eslint-parser": "^7.14.3",
     "@mongodb-js/eslint-config-devtools": "^0.9.9",
     "@mongodb-js/eslint-plugin-compass": "^1.2.17",
-    "@typescript-eslint/eslint-plugin": "^8.43.0",
-    "@typescript-eslint/parser": "^8.43.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.2",
+    "@typescript-eslint/parser": "^8.46.2",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-chai-friendly": "^1.1.0",
     "eslint-plugin-filename-rules": "^1.2.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-mocha": "^8.0.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0"
+    "eslint-plugin-react-hooks": "^7.0.1"
   },
   "scripts": {
     "prettier": "prettier-compass",

configs/testing-library-compass/src/index.tsx

@@ -340,8 +340,12 @@ function createWrapper(
   const StoreGetter: React.FunctionComponent = ({ children }) => {
     const store = useStore();
     const actions = useConnectionActions();
+    // We're breaking the rules of hooks on purpose here to expose the values
+    // outside of the render
+    /* eslint-disable react-hooks/immutability */
     wrapperState.connectionsStore.getState = store.getState.bind(store);
     wrapperState.connectionsStore.actions = actions;
+    /* eslint-enable react-hooks/immutability */
     return <>{children}</>;
   };
   const logger = {
@@ -618,6 +622,9 @@ function createPluginWrapper<
 ) {
   const ref: { current: PluginContext } = { current: {} as any };
   function ComponentWithProvider({ children, ...props }: any) {
+    // We're breaking the rules of hooks on purpose here to expose the ref
+    // outside of the render
+    // eslint-disable-next-line react-hooks/immutability
     const plugin = (ref.current = Plugin.useActivate(
       initialPluginProps ?? ({} as any)
     ));

package-lock.json

@@ -104,12 +104,12 @@
       "cheerio": "1.0.0-rc.10"
     },
     "@mongodb-js/eslint-config-devtools": {
-      "@typescript-eslint/eslint-plugin": "^8.43.0",
-      "@typescript-eslint/parser": "^8.43.0",
+      "@typescript-eslint/eslint-plugin": "^8.46.2",
+      "@typescript-eslint/parser": "^8.46.2",
       "eslint": "^8.57.1",
       "eslint-plugin-jsx-a11y": "^6.10.2",
       "eslint-plugin-react": "^7.37.5",
-      "eslint-plugin-react-hooks": "^5.2.0"
+      "eslint-plugin-react-hooks": "^7.0.1"
     },
     "@leafygreen-ui/emotion": "^4.0.9",
     "@leafygreen-ui/lib": "^15.3.0",

package.json

@@ -9,6 +9,7 @@ import {
   useDarkMode,
   cx,
   useRequiredURLSearchParams,
+  useCurrentValueRef,
 } from '@mongodb-js/compass-components';
 import {
   createAggregationAutocompleter,
@@ -83,8 +84,7 @@ export const PipelineEditor: React.FunctionComponent<PipelineEditorProps> = ({
   const track = useTelemetry();
   const connectionInfoRef = useConnectionInfoRef();
   const editorInitialValueRef = useRef<string>(pipelineText);
-  const editorCurrentValueRef = useRef<string>(pipelineText);
-  editorCurrentValueRef.current = pipelineText;
+  const editorCurrentValueRef = useCurrentValueRef<string>(pipelineText);
 
   const { utmSource, utmMedium } = useRequiredURLSearchParams();
 
@@ -112,7 +112,7 @@ export const PipelineEditor: React.FunctionComponent<PipelineEditorProps> = ({
       );
       editorInitialValueRef.current = editorCurrentValueRef.current;
     }
-  }, [num_stages, track, connectionInfoRef]);
+  }, [editorCurrentValueRef, track, num_stages, connectionInfoRef]);
 
   const annotations: Annotation[] = useMemo(() => {
     return syntaxErrors

packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-editor.tsx

@@ -14,6 +14,7 @@ import {
   Banner,
   useDarkMode,
   useRequiredURLSearchParams,
+  useCurrentValueRef,
 } from '@mongodb-js/compass-components';
 import {
   changeStageValue,
@@ -99,8 +100,7 @@ export const StageEditor = ({
   const connectionInfoRef = useConnectionInfoRef();
   const darkMode = useDarkMode();
   const editorInitialValueRef = useRef<string | null>(stageValue);
-  const editorCurrentValueRef = useRef<string | null>(stageValue);
-  editorCurrentValueRef.current = stageValue;
+  const editorCurrentValueRef = useCurrentValueRef<string | null>(stageValue);
 
   const fields = useAutocompleteFields(namespace);
 
@@ -150,6 +150,7 @@ export const StageEditor = ({
       editorInitialValueRef.current = editorCurrentValueRef.current;
     }
   }, [
+    editorCurrentValueRef,
     track,
     num_stages,
     index,

packages/compass-aggregations/src/components/stage-editor/stage-editor.tsx

@@ -31,7 +31,7 @@ describe('PipelinePreviewManager', function () {
 
     const result = await Promise.allSettled([
       previewManager.getPreviewForStage(0, 'test.test', []),
-      previewManager.cancelPreviewForStage(0),
+      Promise.resolve(previewManager.cancelPreviewForStage(0)),
     ]);
 
     expect(result[0]).to.have.property('status', 'rejected');
@@ -108,7 +108,7 @@ describe('PipelinePreviewManager', function () {
       previewManager.getPreviewForStage(2, 'test.test', []),
       previewManager.getPreviewForStage(3, 'test.test', []),
       previewManager.getPreviewForStage(4, 'test.test', []),
-      previewManager.clearQueue(1),
+      Promise.resolve(previewManager.clearQueue(1)),
     ]);
 
     // Only pipeline for stage 0 was executed

packages/compass-aggregations/src/modules/pipeline-builder/pipeline-preview-manager.spec.ts

@@ -3,7 +3,7 @@ import type { PipelineBuilderThunkAction } from '.';
 import type { SearchIndex } from 'mongodb-data-service';
 import { isAction } from '../utils/is-action';
 
-enum SearchIndexesStatuses {
+export enum SearchIndexesStatuses {
   INITIAL = 'INITIAL',
   LOADING = 'LOADING',
   READY = 'READY',
@@ -39,7 +39,7 @@ export type SearchIndexesAction =
 type State = {
   isSearchIndexesSupported: boolean;
   indexes: SearchIndex[];
-  status: SearchIndexesStatus;
+  status: SearchIndexesStatuses;
 };
 
 export const INITIAL_STATE: State = {

packages/compass-aggregations/src/modules/search-indexes.ts

@@ -48,6 +48,7 @@
     "reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
   },
   "dependencies": {
+    "@mongodb-js/compass-components": "^1.56.0",
     "eventemitter3": "^4.0.0",
     "react": "^17.0.2",
     "react-redux": "^8.1.3",

packages/compass-app-registry/package.json

@@ -1,10 +1,5 @@
-import React, {
-  createContext,
-  useEffect,
-  useRef,
-  useContext,
-  useState,
-} from 'react';
+import React, { createContext, useEffect, useContext, useState } from 'react';
+import { useInitialValue } from '@mongodb-js/compass-components';
 import { globalAppRegistry, AppRegistry } from './app-registry';
 
 /**
@@ -57,7 +52,7 @@ export function GlobalAppRegistryProvider({
   value?: AppRegistry;
   children?: React.ReactNode;
 }) {
-  const appRegistry = useRef(value ?? globalAppRegistry).current;
+  const appRegistry = useInitialValue(value ?? globalAppRegistry);
   return (
     <GlobalAppRegistryContext.Provider value={appRegistry}>
       {children}
@@ -73,11 +68,11 @@ export function AppRegistryProvider({
   children,
   ...props
 }: AppRegistryProviderProps) {
-  const initialPropsRef = useRef(props);
+  const initialProps = useInitialValue(props);
   const {
     localAppRegistry: initialLocalAppRegistry,
     deactivateOnUnmount = true,
-  } = initialPropsRef.current;
+  } = initialProps;
 
   const globalAppRegistry = useGlobalAppRegistry();
   const isTopLevelProvider = useIsTopLevelProvider();