help

Author: lerouxb

packages/compass-connections/src/index.tsx

@@ -77,7 +77,10 @@ export const ConnectFnProvider: React.FunctionComponent<{
 };
 
 export default function CompassConnections(
-  props: Omit<React.ComponentProps<typeof ConnectionsComponent>, 'connectFn'>
+  props: Omit<
+    React.ComponentProps<typeof CompassConnectionsPlugin>,
+    'connectFn'
+  >
 ) {
   const connectFn = useContext(ConnectFnContext);
   return (

packages/compass-connections/src/plugin.tsx

@@ -29,6 +29,7 @@ const ConnectionsComponent: React.FunctionComponent<{
   preloadStorageConnectionInfos?: ConnectionInfo[];
   editingConnectionInfoId?: ConnectionId;
 }> = ({ editingConnectionInfoId, children }) => {
+  console.log({ editingConnectionInfoId });
   const formPreferences = useConnectionFormPreferences();
   return (
     <ConnectionActionsProvider>

packages/compass/src/app/components/home.tsx

@@ -8,22 +8,15 @@ import {
   getScrollbarStyles,
   palette,
   resetGlobalCSS,
-  useEffectOnChange,
 } from '@mongodb-js/compass-components';
-import CompassConnections, {
-  SingleConnectionForm,
-  LegacyConnectionsModal,
-} from '@mongodb-js/compass-connections';
 import { CompassFindInPagePlugin } from '@mongodb-js/compass-find-in-page';
 import type { SettingsTabId } from '@mongodb-js/compass-settings';
 import { CompassSettingsPlugin } from '@mongodb-js/compass-settings';
+import CompassConnections from '@mongodb-js/compass-connections';
 import { WelcomeModal } from '@mongodb-js/compass-welcome';
-import * as hadronIpc from 'hadron-ipc';
 import { type ConnectionStorage } from '@mongodb-js/connection-storage/provider';
-import { AppRegistryProvider, useLocalAppRegistry } from 'hadron-app-registry';
-import type AppRegistry from 'hadron-app-registry';
-import { useSingleConnectionModeConnectionInfoStatus } from '@mongodb-js/compass-connections/provider';
-import React, { useCallback, useEffect, useState } from 'react';
+import { AppRegistryProvider } from 'hadron-app-registry';
+import React, { useCallback, useState } from 'react';
 import Workspace from './workspace';
 import { getExtraConnectionData } from '../utils/telemetry';
 // The only place where the app-stores plugin can be used as a plugin and not a
@@ -35,26 +28,11 @@ import { AtlasAuthPlugin } from '@mongodb-js/atlas-service/renderer';
 import { CompassGenerativeAIPlugin } from '@mongodb-js/compass-generative-ai';
 import type { WorkspaceTab } from '@mongodb-js/compass-workspaces';
 import { ConnectionStorageProvider } from '@mongodb-js/connection-storage/provider';
-import {
-  ConnectionImportExportProvider,
-  useOpenConnectionImportExportModal,
-} from '@mongodb-js/compass-connection-import-export';
-import { usePreference } from 'compass-preferences-model/provider';
+import { ConnectionImportExportProvider } from '@mongodb-js/compass-connection-import-export';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
-import { ConnectionInfoProvider } from '@mongodb-js/compass-connections/provider';
-import { CompassShellPlugin } from '@mongodb-js/compass-shell';
 
 resetGlobalCSS();
 
-const homePageStyles = css({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'stretch',
-  flex: 1,
-  overflow: 'auto',
-  height: '100%',
-});
-
 const homeContainerStyles = css({
   height: '100vh',
   width: '100vw',
@@ -83,26 +61,10 @@ export type HomeProps = {
   showCollectionSubMenu: (args: { isReadOnly: boolean }) => void;
   hideCollectionSubMenu: () => void;
   showSettings: (tab?: SettingsTabId) => void;
-};
-
-function SingleConnectionFormWithConnectionImportExport({
-  appRegistry,
-}: {
-  appRegistry: AppRegistry;
-}) {
-  const { supportsConnectionImportExport, openConnectionImportExportModal } =
-    useOpenConnectionImportExportModal({ context: 'connectionsList' });
-  return (
-    <SingleConnectionForm
-      appRegistry={appRegistry}
-      openConnectionImportExportModal={
-        supportsConnectionImportExport
-          ? openConnectionImportExportModal
-          : undefined
-      }
-    />
-  );
-}
+} & Pick<
+  React.ComponentProps<typeof CompassConnections>,
+  'onAutoconnectInfoRequest'
+>;
 
 const verticalSplitStyles = css({
   width: '100vw',
@@ -113,23 +75,18 @@ const verticalSplitStyles = css({
   overflow: 'hidden',
 });
 
-const shellContainerStyles = css({
-  zIndex: 5,
-});
-
 function Home({
   appName,
   showWelcomeModal = false,
   createFileInputBackend,
-  onDisconnect,
+  //onDisconnect,
   showCollectionSubMenu,
   hideCollectionSubMenu,
   showSettings,
+  onAutoconnectInfoRequest,
 }: Omit<HomeProps, 'connectionStorage'>): React.ReactElement | null {
-  const appRegistry = useLocalAppRegistry();
-  const { connectionInfo, isConnected, disconnect } =
-    useSingleConnectionModeConnectionInfoStatus();
-
+  // TODO: port single connection code
+  /*
   useEffect(() => {
     function onDisconnect() {
       void disconnect();
@@ -142,6 +99,7 @@ function Home({
       hadronIpc.ipcRenderer?.removeListener('app:disconnect', onDisconnect);
     };
   }, [disconnect]);
+  */
 
   const onWorkspaceChange = useCallback(
     (ws: WorkspaceTab | null, collectionInfo) => {
@@ -154,12 +112,15 @@ function Home({
     [showCollectionSubMenu, hideCollectionSubMenu]
   );
 
+  // TODO: port single connection code
+  /*
   useEffectOnChange(() => {
     if (!isConnected) {
       hideCollectionSubMenu();
       onDisconnect();
     }
   }, [isConnected, onDisconnect, hideCollectionSubMenu]);
+  */
 
   const [isWelcomeOpen, setIsWelcomeOpen] = useState(showWelcomeModal);
 
@@ -173,60 +134,37 @@ function Home({
     [setIsWelcomeOpen, showSettings]
   );
 
-  const multiConnectionsEnabled = usePreference(
-    'enableMultipleConnectionSystem'
-  );
-
   return (
-    <FileInputBackendProvider createFileInputBackend={createFileInputBackend}>
-      <ConnectionImportExportProvider>
-        <CompassInstanceStorePlugin>
-          <FieldStorePlugin>
-            <div data-testid="home" className={verticalSplitStyles}>
-              {multiConnectionsEnabled && (
+    <CompassConnections
+      appName={appName}
+      onExtraConnectionDataRequest={getExtraConnectionData}
+      onAutoconnectInfoRequest={onAutoconnectInfoRequest}
+    >
+      <FileInputBackendProvider createFileInputBackend={createFileInputBackend}>
+        <ConnectionImportExportProvider>
+          <CompassInstanceStorePlugin>
+            <FieldStorePlugin>
+              <div data-testid="home" className={verticalSplitStyles}>
                 <AppRegistryProvider scopeName="Multiple Connections">
                   <Workspace
                     appName={appName}
                     onActiveWorkspaceTabChange={onWorkspaceChange}
                   />
                 </AppRegistryProvider>
-              )}
-              {!multiConnectionsEnabled &&
-                (isConnected ? (
-                  <AppRegistryProvider scopeName="Single Connection">
-                    <ConnectionInfoProvider
-                      connectionInfoId={connectionInfo.id}
-                    >
-                      <Workspace
-                        appName={appName}
-                        onActiveWorkspaceTabChange={onWorkspaceChange}
-                      />
-                      <div className={shellContainerStyles}>
-                        <CompassShellPlugin />
-                      </div>
-                    </ConnectionInfoProvider>
-                  </AppRegistryProvider>
-                ) : (
-                  <div className={homePageStyles}>
-                    <SingleConnectionFormWithConnectionImportExport
-                      appRegistry={appRegistry}
-                    />
-                  </div>
-                ))}
-            </div>
-            <WelcomeModal
-              isOpen={isWelcomeOpen}
-              closeModal={closeWelcomeModal}
-            />
-            <CompassSettingsPlugin></CompassSettingsPlugin>
-            <CompassFindInPagePlugin></CompassFindInPagePlugin>
-            <AtlasAuthPlugin></AtlasAuthPlugin>
-            <CompassGenerativeAIPlugin></CompassGenerativeAIPlugin>
-            <LegacyConnectionsModal />
-          </FieldStorePlugin>
-        </CompassInstanceStorePlugin>
-      </ConnectionImportExportProvider>
-    </FileInputBackendProvider>
+              </div>
+              <WelcomeModal
+                isOpen={isWelcomeOpen}
+                closeModal={closeWelcomeModal}
+              />
+              <CompassSettingsPlugin></CompassSettingsPlugin>
+              <CompassFindInPagePlugin></CompassFindInPagePlugin>
+              <AtlasAuthPlugin></AtlasAuthPlugin>
+              <CompassGenerativeAIPlugin></CompassGenerativeAIPlugin>
+            </FieldStorePlugin>
+          </CompassInstanceStorePlugin>
+        </ConnectionImportExportProvider>
+      </FileInputBackendProvider>
+    </CompassConnections>
   );
 }
 
@@ -297,25 +235,14 @@ export function ThemedHome(
 }
 
 export default function HomeWithConnections({
-  onAutoconnectInfoRequest,
   connectionStorage,
   ...props
-}: HomeProps &
-  Pick<
-    React.ComponentProps<typeof CompassConnections>,
-    'onAutoconnectInfoRequest'
-  > & {
-    connectionStorage: ConnectionStorage;
-  }) {
+}: HomeProps & {
+  connectionStorage: ConnectionStorage;
+}) {
   return (
     <ConnectionStorageProvider value={connectionStorage}>
-      <CompassConnections
-        appName={props.appName}
-        onExtraConnectionDataRequest={getExtraConnectionData}
-        onAutoconnectInfoRequest={onAutoconnectInfoRequest}
-      >
-        <ThemedHome {...props}></ThemedHome>
-      </CompassConnections>
+      <ThemedHome {...props}></ThemedHome>
     </ConnectionStorageProvider>
   );
 }