chore(compass-sidebar, compass-connections-import-export): adds an entrypoint in the multiple connections sidebar for import and export of saved connections COMPASS-7981 (#5950)

Author: himanshusinghs

package-lock.json

@@ -30,7 +30,7 @@ export function ExportConnectionsModal({
   trackingProps,
 }: {
   open: boolean;
-  setOpen: (newOpen: boolean) => void;
+  setOpen: (newOpen: boolean, trackingProps?: Record<string, unknown>) => void;
   afterExport?: () => void;
   trackingProps?: Record<string, unknown>;
 }): React.ReactElement {
@@ -51,7 +51,15 @@ export function ExportConnectionsModal({
     [afterExport, openToast, setOpen]
   );
 
-  useOpenModalThroughIpc(open, setOpen, 'compass:open-export-connections');
+  const openModalThroughIpc = useCallback(() => {
+    setOpen(true, { context: 'menuBar' });
+  }, [setOpen]);
+
+  useOpenModalThroughIpc(
+    open,
+    openModalThroughIpc,
+    'compass:open-export-connections'
+  );
 
   const protectConnectionStrings = !!usePreference('protectConnectionStrings');
   const {

packages/compass-connection-import-export/src/components/export-modal.tsx

@@ -14,6 +14,7 @@ import { SelectTable } from './select-table';
 import type { ImportExportResult } from '../hooks/common';
 import { useOpenModalThroughIpc } from '../hooks/common';
 import { useImportConnections } from '../hooks/use-import';
+import { usePreference } from 'compass-preferences-model/provider';
 
 const TOAST_TIMEOUT_MS = 5000;
 
@@ -34,9 +35,12 @@ export function ImportConnectionsModal({
   trackingProps,
 }: {
   open: boolean;
-  setOpen: (newOpen: boolean) => void;
+  setOpen: (newOpen: boolean, trackingProps?: Record<string, unknown>) => void;
   trackingProps?: Record<string, unknown>;
 }): React.ReactElement {
+  const multipleConnectionsEnabled = usePreference(
+    'enableNewMultipleConnectionSystem'
+  );
   const { openToast } = useToast('compass-connection-import-export');
   const finish = useCallback(
     (result: ImportExportResult) => {
@@ -53,7 +57,15 @@ export function ImportConnectionsModal({
     [openToast, setOpen]
   );
 
-  useOpenModalThroughIpc(open, setOpen, 'compass:open-import-connections');
+  const openModalThroughIpc = useCallback(() => {
+    setOpen(true, { context: 'menuBar' });
+  }, [setOpen]);
+
+  useOpenModalThroughIpc(
+    open,
+    openModalThroughIpc,
+    'compass:open-import-connections'
+  );
 
   const {
     onSubmit,
@@ -82,21 +94,22 @@ export function ImportConnectionsModal({
         displayName: (
           <>
             {conn.name}
-            {conn.isExistingFavorite && (
+            {conn.isExistingConnection && (
               <Badge
                 className={existingFavoriteBadgeStyles}
                 variant={conn.selected ? 'yellow' : 'lightgray'}
                 data-testid={`existing-favorite-badge-${conn.id}`}
               >
-                Existing Favorite
+                Existing{' '}
+                {multipleConnectionsEnabled ? 'Connection' : 'Favorite'}
               </Badge>
             )}
           </>
         ),
       })),
-      connectionList.some((conn) => conn.isExistingFavorite && conn.selected),
+      connectionList.some((conn) => conn.isExistingConnection && conn.selected),
     ];
-  }, [connectionList]);
+  }, [connectionList, multipleConnectionsEnabled]);
 
   return (
     <FormModal

packages/compass-connection-import-export/src/components/import-modal.tsx

@@ -0,0 +1,138 @@
+import React, { useCallback, useContext, useRef, useState } from 'react';
+import { ImportConnectionsModal } from './components/import-modal';
+import { ExportConnectionsModal } from './components/export-modal';
+
+type ConnectionImportExportService = {
+  getHandlers(): {
+    openConnectionImportModal(trackingProps?: Record<string, unknown>): void;
+    openConnectionExportModal(trackingProps?: Record<string, unknown>): void;
+  };
+};
+
+const ConnectionImportExportServiceContext =
+  React.createContext<ConnectionImportExportService | null>(null);
+
+export const ConnectionImportExportProvider: React.FC = ({ children }) => {
+  const [importModalState, setImportModalState] = useState<{
+    opened: boolean;
+    // trackingProps are passed to deserializeConnections implementation in
+    // compass-main-storage. Known props passed are:
+    // { context: 'CLI' | 'connectionsList' | 'menuBar' }
+    trackingProps?: Record<string, unknown>;
+  }>({
+    opened: false,
+  });
+  const [exportModalState, setExportModalState] = useState<{
+    opened: boolean;
+    // trackingProps are passed to serializeConnections implementation in
+    // compass-main-storage. Known props passed are:
+    // { context: 'CLI' | 'connectionsList' | 'menuBar' }
+    trackingProps?: Record<string, unknown>;
+  }>({
+    opened: false,
+  });
+
+  const setImportModalOpen = useCallback(
+    (isOpened: boolean, trackingProps?: Record<string, unknown>) => {
+      setImportModalState({
+        opened: isOpened,
+        trackingProps,
+      });
+    },
+    []
+  );
+
+  const openConnectionImportModal = useCallback(
+    (trackingProps?: Record<string, unknown>) => {
+      setImportModalState({
+        opened: true,
+        trackingProps,
+      });
+    },
+    []
+  );
+
+  const setExportModalOpen = useCallback(
+    (isOpened: boolean, trackingProps?: Record<string, unknown>) => {
+      setExportModalState({
+        opened: isOpened,
+        trackingProps,
+      });
+    },
+    []
+  );
+
+  const openConnectionExportModal = useCallback(
+    (trackingProps?: Record<string, unknown>) => {
+      setExportModalState({
+        opened: true,
+        trackingProps,
+      });
+    },
+    []
+  );
+
+  const connectionImportExportServiceRef =
+    useRef<ConnectionImportExportService>({
+      getHandlers() {
+        return {
+          openConnectionImportModal,
+          openConnectionExportModal,
+        };
+      },
+    });
+
+  return (
+    <ConnectionImportExportServiceContext.Provider
+      value={connectionImportExportServiceRef.current}
+    >
+      {children}
+      <ImportConnectionsModal
+        open={importModalState.opened}
+        setOpen={setImportModalOpen}
+        trackingProps={importModalState.trackingProps}
+      />
+      <ExportConnectionsModal
+        open={exportModalState.opened}
+        setOpen={setExportModalOpen}
+        trackingProps={exportModalState.trackingProps}
+      />
+    </ConnectionImportExportServiceContext.Provider>
+  );
+};
+
+export type ConnectionImportExportAction =
+  | 'import-saved-connections'
+  | 'export-saved-connections';
+
+export const useOpenConnectionImportExportModal = (
+  trackingProps?: Record<string, unknown>
+): {
+  supportsConnectionImportExport: boolean;
+  openConnectionImportExportModal: (
+    action: ConnectionImportExportAction
+  ) => void;
+} => {
+  const service = useContext(ConnectionImportExportServiceContext);
+  if (!service) {
+    return {
+      supportsConnectionImportExport: false,
+      openConnectionImportExportModal() {
+        // noop
+      },
+    };
+  }
+
+  return {
+    supportsConnectionImportExport: true,
+    openConnectionImportExportModal(action: ConnectionImportExportAction) {
+      if (action === 'import-saved-connections') {
+        service.getHandlers().openConnectionImportModal(trackingProps);
+      } else if (action === 'export-saved-connections') {
+        service.getHandlers().openConnectionExportModal(trackingProps);
+      } else {
+        throw new Error(`Unidentified action ${action} passed to handler`);
+      }
+    },
+  };
+};

packages/compass-connection-import-export/src/context.tsx

@@ -62,7 +62,12 @@ describe('common utilities', function () {
 
       const { result } = renderHook(() => {
         const [open, setOpen] = useState(false);
-        useOpenModalThroughIpc(open, setOpen, event, fakeIpc as any);
+        useOpenModalThroughIpc(
+          open,
+          () => setOpen(true),
+          event,
+          fakeIpc as any
+        );
         return { open, setOpen };
       });
 

packages/compass-connection-import-export/src/hooks/common.spec.ts

@@ -58,7 +58,7 @@ export function useImportExportConnectionsCommon<S>(
 
 export function useOpenModalThroughIpc(
   open: boolean,
-  setOpen: (newValue: boolean) => void,
+  openModal: () => void,
   ipcEvent: string,
   ipcForTesting: HadronIpcRenderer | undefined = undefined
 ): void {
@@ -67,12 +67,12 @@ export function useOpenModalThroughIpc(
   useEffect(() => {
     if (ipc?.on && !open) {
       const listener = () => {
-        setOpen(true);
+        openModal();
       };
       ipc.on(ipcEvent, listener);
       return () => {
         ipc.off(ipcEvent, listener);
       };
     }
-  }, [open, setOpen]);
+  }, [open, openModal]);
 }

packages/compass-connection-import-export/src/hooks/common.ts

@@ -271,4 +271,84 @@ describe('useExportConnections', function () {
 
     expect(result.current.exportConnections.state.error).to.equal('');
   });
+
+  context('when multiple connections is enabled', function () {
+    beforeEach(async function () {
+      const preferences = await createSandboxFromDefaultPreferences();
+      await preferences.savePreferences({
+        enableNewMultipleConnectionSystem: true,
+      });
+      const wrapper: React.FC = ({ children }) =>
+        createElement(PreferencesProvider, {
+          value: preferences,
+          children: createElement(ConnectionStorageProvider, {
+            value: connectionStorage,
+            children,
+          }),
+        });
+      renderHookResult = renderHook(
+        (props: Partial<UseExportConnectionsProps> = {}) => {
+          return {
+            connectionRepository: useConnectionRepository(),
+            exportConnections: useExportConnections({
+              ...defaultProps,
+              ...props,
+            }),
+          };
+        },
+        { wrapper }
+      );
+      ({ result, rerender } = renderHookResult);
+    });
+
+    it('includes also the non-favorites connections in the export list', async function () {
+      expect(
+        result.current.exportConnections.state.connectionList
+      ).to.deep.equal([]);
+
+      // expecting to include the non-favorite connections as well
+      await act(async () => {
+        await result.current.connectionRepository.saveConnection({
+          id: 'id1',
+          connectionOptions: { connectionString: 'mongodb://localhost:2020' },
+          favorite: {
+            name: 'name1',
+          },
+          savedConnectionType: 'recent',
+        });
+      });
+
+      rerender({});
+      expect(
+        result.current.exportConnections.state.connectionList
+      ).to.deep.equal([{ id: 'id1', name: 'name1', selected: true }]);
+
+      act(() => {
+        result.current.exportConnections.onChangeConnectionList([
+          { id: 'id1', name: 'name1', selected: false },
+        ]);
+      });
+      expect(
+        result.current.exportConnections.state.connectionList
+      ).to.deep.equal([{ id: 'id1', name: 'name1', selected: false }]);
+
+      await act(async () => {
+        await result.current.connectionRepository.saveConnection({
+          id: 'id2',
+          connectionOptions: { connectionString: 'mongodb://localhost:2020' },
+          favorite: {
+            name: 'name2',
+          },
+          savedConnectionType: 'recent',
+        });
+      });
+
+      expect(
+        result.current.exportConnections.state.connectionList
+      ).to.deep.equal([
+        { id: 'id1', name: 'name1', selected: false },
+        { id: 'id2', name: 'name2', selected: true },
+      ]);
+    });
+  });
 });