chore(connections): remove connectionInfoAccess interface from everywhere in the app COMPASS-8306 (#6249)

* chore(connections): remove connectionInfoAccess interface from everywhere in the app

* chore: fix various check failures

* chore(serverstats): esm export for refactored component

* chore(serverstats): fix component import

Author: gribnoysup

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

@@ -47,8 +47,8 @@ import {
 import { TelemetryProvider } from '@mongodb-js/compass-telemetry/provider';
 import { CompassComponentsProvider } from '@mongodb-js/compass-components';
 import {
+  TestEnvCurrentConnectionContext,
   ConnectionInfoProvider,
-  TEST_CONNECTION_INFO,
 } from '@mongodb-js/compass-connections/src/connection-info-provider';
 import type { State } from '@mongodb-js/compass-connections/src/stores/connections-store-redux';
 import { createDefaultConnectionInfo } from '@mongodb-js/compass-connections/src/stores/connections-store-redux';
@@ -231,6 +231,17 @@ const EmptyWrapper = ({ children }: { children: React.ReactElement }) => {
   return <>{children}</>;
 };
 
+const TEST_ENV_CURRENT_CONNECTION = {
+  info: {
+    id: 'TEST',
+    connectionOptions: {
+      connectionString: 'mongodb://localhost:27020',
+    },
+  },
+  status: 'connected' as const,
+  error: null,
+};
+
 function createWrapper(
   options: TestConnectionsOptions,
   // When using renderHook, anything that will try to call createPortal will
@@ -331,9 +342,13 @@ function createWrapper(
                         preloadStorageConnectionInfos={options.connections}
                       >
                         <StoreGetter>
-                          <TestingLibraryWrapper {...props}>
-                            {children}
-                          </TestingLibraryWrapper>
+                          <TestEnvCurrentConnectionContext.Provider
+                            value={TEST_ENV_CURRENT_CONNECTION}
+                          >
+                            <TestingLibraryWrapper {...props}>
+                              {children}
+                            </TestingLibraryWrapper>
+                          </TestEnvCurrentConnectionContext.Provider>
                         </StoreGetter>
                       </CompassConnections>
                     </ConnectFnProvider>
@@ -461,7 +476,7 @@ function createConnectionInfoWrapper(
 
 async function renderWithActiveConnection(
   ui: React.ReactElement,
-  connectionInfo: ConnectionInfo = TEST_CONNECTION_INFO,
+  connectionInfo: ConnectionInfo = TEST_ENV_CURRENT_CONNECTION.info,
   {
     connections,
     wrapper: Wrapper = EmptyWrapper,
@@ -483,7 +498,7 @@ async function renderWithActiveConnection(
 
 async function renderHookWithActiveConnection<HookProps, HookResult>(
   cb: (props: HookProps) => HookResult,
-  connectionInfo: ConnectionInfo = TEST_CONNECTION_INFO,
+  connectionInfo: ConnectionInfo = TEST_ENV_CURRENT_CONNECTION.info,
   {
     connections,
     wrapper: Wrapper = EmptyWrapper,

package-lock.json

@@ -91,5 +91,10 @@
     "packages/*",
     "configs/*",
     "scripts"
-  ]
+  ],
+  "overrides": {
+    "@types/enzyme": {
+      "@types/react": "^17.0.5"
+    }
+  }
 }

package.json

@@ -38,6 +38,7 @@
     "@mongodb-js/testing-library-compass": "^1.0.1",
     "@mongodb-js/tsconfig-compass": "^1.0.5",
     "@types/babel__generator": "^7.6.8",
+    "@types/enzyme": "^3.10.14",
     "@types/lodash": "^4.14.188",
     "@types/semver": "^7.3.9",
     "chai": "^4.3.6",

packages/compass-aggregations/package.json

@@ -18,7 +18,7 @@ import { FeedbackLink } from './feedback-link';
 import { addWizard } from '../../modules/pipeline-builder/stage-editor';
 import { UseCaseCard } from './stage-wizard-use-cases';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
-import { useConnectionInfoAccess } from '@mongodb-js/compass-connections/provider';
+import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
 
 const containerStyles = css({
   height: '100%',
@@ -80,7 +80,7 @@ export const AggregationSidePanel = ({
   onSelectUseCase,
 }: AggregationSidePanelProps) => {
   const track = useTelemetry();
-  const connectionInfoAccess = useConnectionInfoAccess();
+  const connectionInfoRef = useConnectionInfoRef();
   const [searchText, setSearchText] = useState<string>('');
   const darkMode = useDarkMode();
 
@@ -112,10 +112,10 @@ export const AggregationSidePanel = ({
           drag_and_drop: false,
           stage_name: useCase.stageOperator,
         },
-        connectionInfoAccess.getCurrentConnectionInfo()
+        connectionInfoRef.current
       );
     },
-    [onSelectUseCase, track, connectionInfoAccess]
+    [onSelectUseCase, track, connectionInfoRef]
   );
 
   return (

packages/compass-aggregations/src/components/aggregation-side-panel/index.tsx

@@ -21,7 +21,7 @@ import { changeEditorValue } from '../../../modules/pipeline-builder/text-editor
 import type { PipelineParserError } from '../../../modules/pipeline-builder/pipeline-parser/utils';
 import { useAutocompleteFields } from '@mongodb-js/compass-field-store';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
-import { useConnectionInfoAccess } from '@mongodb-js/compass-connections/provider';
+import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
 
 const containerStyles = css({
   position: 'relative',
@@ -81,7 +81,7 @@ export const PipelineEditor: React.FunctionComponent<PipelineEditorProps> = ({
 }) => {
   const fields = useAutocompleteFields(namespace);
   const track = useTelemetry();
-  const connectionInfoAccess = useConnectionInfoAccess();
+  const connectionInfoRef = useConnectionInfoRef();
   const editorInitialValueRef = useRef<string>(pipelineText);
   const editorCurrentValueRef = useRef<string>(pipelineText);
   editorCurrentValueRef.current = pipelineText;
@@ -108,11 +108,11 @@ export const PipelineEditor: React.FunctionComponent<PipelineEditorProps> = ({
           num_stages,
           editor_view_type: 'text',
         },
-        connectionInfoAccess.getCurrentConnectionInfo()
+        connectionInfoRef.current
       );
       editorInitialValueRef.current = editorCurrentValueRef.current;
     }
-  }, [num_stages, track, connectionInfoAccess]);
+  }, [num_stages, track, connectionInfoRef]);
 
   const annotations: Annotation[] = useMemo(() => {
     return syntaxErrors

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

@@ -17,7 +17,7 @@ import { UseCaseCardLayout } from '../../aggregation-side-panel/stage-wizard-use
 import type { PipelineBuilderUIWorkspaceProps } from '.';
 import type { DraggedUseCase } from '../../aggregation-side-panel/stage-wizard-use-cases/use-case-card';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
-import { useConnectionInfoAccess } from '@mongodb-js/compass-connections/provider';
+import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
 
 // Types
 type PipelineBuilderDndWrapperProps = {
@@ -72,7 +72,7 @@ const PipelineBuilderDndWrapper = ({
     })
   );
 
-  const connectionInfoAccess = useConnectionInfoAccess();
+  const connectionInfoRef = useConnectionInfoRef();
 
   const handleUseCaseDropped = useCallback(
     (event: DragEndEvent) => {
@@ -85,7 +85,7 @@ const PipelineBuilderDndWrapper = ({
             drag_and_drop: true,
             stage_name: draggedUseCase.stageOperator,
           },
-          connectionInfoAccess.getCurrentConnectionInfo()
+          connectionInfoRef.current
         );
         onUseCaseDropped(
           draggedUseCase.id,
@@ -95,7 +95,7 @@ const PipelineBuilderDndWrapper = ({
       }
       setDraggedUseCase(null);
     },
-    [draggedUseCase, onUseCaseDropped, track, connectionInfoAccess]
+    [draggedUseCase, onUseCaseDropped, track, connectionInfoRef]
   );
 
   const handleSortEnd = useCallback(

packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-builder-ui-workspace/dnd-wrapper.tsx

@@ -15,12 +15,12 @@ import type { RootState } from '../../modules';
 import { useLogger } from '@mongodb-js/compass-logging/provider';
 import { getPipelineStageOperatorsFromBuilderState } from '../../modules/pipeline-builder/builder-helpers';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
-import { useConnectionInfoAccess } from '@mongodb-js/compass-connections/provider';
+import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
 
 const useOnSubmitFeedback = (lastAIPipelineRequestId: string | null) => {
   const logger = useLogger('AI-PIPELINE-UI');
   const track = useTelemetry();
-  const connectionInfoAccess = useConnectionInfoAccess();
+  const connectionInfoRef = useConnectionInfoRef();
   return useCallback(
     (feedback: 'positive' | 'negative', text: string) => {
       const { log, mongoLogId } = logger;
@@ -42,7 +42,7 @@ const useOnSubmitFeedback = (lastAIPipelineRequestId: string | null) => {
           request_id: lastAIPipelineRequestId,
           text,
         }),
-        connectionInfoAccess.getCurrentConnectionInfo()
+        connectionInfoRef.current
       );
 
       openToast('pipeline-ai-feedback-submitted', {
@@ -51,7 +51,7 @@ const useOnSubmitFeedback = (lastAIPipelineRequestId: string | null) => {
         timeout: 10_000,
       });
     },
-    [logger, track, lastAIPipelineRequestId, connectionInfoAccess]
+    [logger, track, lastAIPipelineRequestId, connectionInfoRef]
   );
 };
 

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-ai.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@mongodb-js/testing-library-compass';
 import sinon from 'sinon';
 import { expect } from 'chai';
 
 import { StageEditor } from './stage-editor';
 
 describe('StageEditor [Component]', function () {
-  let component: ReturnType<typeof mount> | null;
   const spy = sinon.spy();
   const stage = '{ name: "testing" }';
   const stageOperator = '$match';
 
   beforeEach(function () {
-    component = mount(
+    render(
       <StageEditor
         namespace="test.test"
         stageValue={stage}
@@ -28,11 +27,7 @@ describe('StageEditor [Component]', function () {
     );
   });
 
-  afterEach(function () {
-    component = null;
-  });
-
   it('renders the wrapper div', function () {
-    expect(component?.find('StageEditor')).to.exist;
+    expect(screen.getByTestId('stage-editor')).to.exist;
   });
 });