broken

Author: lerouxb

packages/compass-connections/src/components/connection-modal.tsx

@@ -1,5 +1,6 @@
+import React from 'react';
 import { connect as reduxConnect } from '../stores/store-context';
-import ConnectionFormModal from '@mongodb-js/connection-form';
+import { ConnectionFormModal } from '@mongodb-js/connection-form';
 import type { ConnectionInfo } from '@mongodb-js/connection-storage/provider';
 import {
   connect,
@@ -14,6 +15,26 @@ import type {
   ConnectionState,
 } from '../stores/connections-store-redux';
 
+type ConnectionModalProps = Omit<
+  React.ComponentProps<typeof ConnectionFormModal>,
+  'initialConnectionInfo'
+> & { initialConnectionInfo?: ConnectionInfo };
+
+const ConnectionModal: React.FunctionComponent<ConnectionModalProps> = ({
+  initialConnectionInfo,
+  ...props
+}: ConnectionModalProps) => {
+  if (!initialConnectionInfo) {
+    return null;
+  }
+  return (
+    <ConnectionFormModal
+      initialConnectionInfo={initialConnectionInfo}
+      {...props}
+    />
+  );
+};
+
 function shouldDisableConnectionEditing(connection: ConnectionState): boolean {
   return connection.status === 'connected';
 }
@@ -26,16 +47,19 @@ function mapState({
 }: {
   isEditingNewConnection: boolean;
   isEditingConnectionInfoModalOpen: boolean;
-  editingConnectionInfoId: ConnectionId;
+  editingConnectionInfoId?: ConnectionId;
   connections: {
     byId: Record<ConnectionId, ConnectionState>;
   };
 }) {
-  const editingConnection = connections.byId[editingConnectionInfoId];
-  const editingConnectionInfo = editingConnection.info;
+  const editingConnection = editingConnectionInfoId
+    ? connections.byId[editingConnectionInfoId]
+    : undefined;
+  const editingConnectionInfo = editingConnection?.info;
 
-  const disableEditingConnectedConnection =
-    shouldDisableConnectionEditing(editingConnection);
+  const disableEditingConnectedConnection = editingConnection
+    ? shouldDisableConnectionEditing(editingConnection)
+    : false;
 
   return {
     isOpen: isEditingConnectionInfoModalOpen,
@@ -65,7 +89,7 @@ function mergeProps(
     saveEditedConnectionInfo: (connectionInfo: ConnectionInfo) => any;
     saveAndConnect: (connectionInfo: ConnectionInfo) => any;
   }
-) {
+): ConnectionModalProps {
   const {
     isOpen,
     initialConnectionInfo,
@@ -89,18 +113,20 @@ function mergeProps(
     connectionErrorMessage,
     disableEditingConnectedConnection,
 
-    onDisconnectClicked: () => disconnect(editingConnectionInfoId),
+    onDisconnectClicked: () =>
+      editingConnectionInfoId && disconnect(editingConnectionInfoId),
     setOpen: (newOpen: boolean) => {
       // This is how leafygreen propagates `X` button click
       if (newOpen === false) {
-        cancelEditConnection(editingConnectionInfoId);
+        editingConnectionInfoId &&
+          cancelEditConnection(editingConnectionInfoId);
       }
     },
     openSettingsModal: () => {
       // TODO: this has to emit on the global app registry somehow
     },
     onCancel: () => {
-      cancelEditConnection(editingConnectionInfoId);
+      editingConnectionInfoId && cancelEditConnection(editingConnectionInfoId);
     },
     onSaveClicked: (connectionInfo: ConnectionInfo) => {
       return saveEditedConnectionInfo(connectionInfo);
@@ -119,8 +145,4 @@ function mergeProps(
   };
 }
 
-export default reduxConnect(
-  mapState,
-  mapDispatch,
-  mergeProps
-)(ConnectionFormModal);
+export default reduxConnect(mapState, mapDispatch, mergeProps)(ConnectionModal);

packages/compass-connections/src/index.tsx

@@ -1,27 +1,55 @@
+import { preferencesLocator } from 'compass-preferences-model/provider';
 import { registerHadronPlugin } from 'hadron-app-registry';
-import {
-  autoconnectCheck,
-  configureStore,
-  loadConnections,
-} from './stores/connections-store-redux';
+import type { connect as devtoolsConnect } from 'mongodb-data-service';
 import React, { useContext, useRef } from 'react';
 import { createLoggerLocator } from '@mongodb-js/compass-logging/provider';
-import { telemetryLocator } from '@mongodb-js/compass-telemetry/provider';
-import { preferencesLocator } from 'compass-preferences-model/provider';
 import { connectionStorageLocator } from '@mongodb-js/connection-storage/provider';
-import { ConnectionsStoreContext } from './stores/store-context';
+import type {
+  ConnectionInfo,
+  ConnectionStorage,
+} from '@mongodb-js/connection-storage/provider';
+import { telemetryLocator } from '@mongodb-js/compass-telemetry/provider';
+import type { ExtraConnectionData as ExtraConnectionDataForTelemetry } from '@mongodb-js/compass-telemetry';
+import ConnectionModal from './components/connection-modal';
 export { default as SingleConnectionForm } from './components/legacy-connections';
 export { LegacyConnectionsModal } from './components/legacy-connections-modal';
-export { useConnectionFormPreferences } from './hooks/use-connection-form-preferences';
-import type { connect as devtoolsConnect } from 'mongodb-data-service';
+import { useConnectionFormPreferences } from './hooks/use-connection-form-preferences';
+import {
+  autoconnectCheck,
+  configureStore,
+  loadConnections,
+} from './stores/connections-store-redux';
+import {
+  ConnectionsStoreContext,
+  ConnectionActionsProvider,
+} from './stores/store-context';
 export type { ConnectionFeature } from './utils/connection-supports';
 export { connectionSupports } from './utils/connection-supports';
-import ConnectionsPlugin from './plugin';
+
+const ConnectionsComponent: React.FunctionComponent<{
+  appName: string;
+  onExtraConnectionDataRequest: (
+    connectionInfo: ConnectionInfo
+  ) => Promise<[ExtraConnectionDataForTelemetry, string | null]>;
+  onAutoconnectInfoRequest?: (
+    connectionStorage: ConnectionStorage
+  ) => Promise<ConnectionInfo | undefined>;
+  connectFn?: typeof devtoolsConnect | undefined;
+  preloadStorageConnectionInfos?: ConnectionInfo[];
+}> = ({ children }) => {
+  const formPreferences = useConnectionFormPreferences();
+  return (
+    <ConnectionActionsProvider>
+      {children}
+      <ConnectionModal {...formPreferences} />
+    </ConnectionActionsProvider>
+  );
+};
 
 const CompassConnectionsPlugin = registerHadronPlugin(
   {
     name: 'CompassConnections',
-    component: ConnectionsPlugin,
+    component: ConnectionsComponent,
     activate(
       initialProps,
       { logger, preferences, connectionStorage, track },

packages/compass-connections/src/plugin.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { type MapStateToProps, connect } from 'react-redux';
 import {
   ConnectionStatus,
-  useConnections,
+  useConnectionActions,
   useConnectionsWithStatus,
 } from '@mongodb-js/compass-connections/provider';
 import { type ConnectionInfo } from '@mongodb-js/connection-info';
@@ -113,9 +113,9 @@ export function MultipleConnectionSidebar({
     editConnection,
     removeConnection,
     duplicateConnection,
-    toggleConnectionFavoritedStatus,
+    toggleFavoritedConnectionStatus,
     showNonGenuineMongoDBWarningModal,
-  } = useConnections();
+  } = useConnectionActions();
 
   const findActiveConnection = (id: string) => {
     return connectionsWithStatus.find(
@@ -194,7 +194,7 @@ export function MultipleConnectionSidebar({
           }}
           onCopyConnectionString={onCopyConnectionString}
           onToggleFavoriteConnectionInfo={(connectionInfo) => {
-            void toggleConnectionFavoritedStatus(connectionInfo.id);
+            void toggleFavoritedConnectionStatus(connectionInfo.id);
           }}
           onOpenConnectionInfo={onOpenConnectionInfo}
           onDisconnect={(id) => {

packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx

@@ -16,7 +16,7 @@ import {
   Icon,
 } from '@mongodb-js/compass-components';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
-import { useConnections } from '@mongodb-js/compass-connections/provider';
+import { useConnectionActions } from '@mongodb-js/compass-connections/provider';
 import { usePreference } from 'compass-preferences-model/provider';
 
 const sectionContainerStyles = css({
@@ -218,7 +218,7 @@ function WelcomeImage() {
 }
 
 export default function WelcomeTab() {
-  const { createNewConnection } = useConnections();
+  const { createNewConnection } = useConnectionActions();
   const enableCreatingNewConnections = usePreference(
     'enableCreatingNewConnections'
   );

packages/compass-welcome/src/components/welcome-tab.tsx

@@ -4,6 +4,15 @@ import type { Dispatch, SetStateAction } from 'react';
 import type { ConnectionFormProps } from './connection-form';
 import ConnectionForm from './connection-form';
 
+type ConnectionFormModalProps = {
+  isOpen: boolean;
+  setOpen: (open: boolean) => void | Dispatch<SetStateAction<boolean>>;
+  onCancel: () => void; // when using
+} & Omit<
+  ConnectionFormProps,
+  'showFooterBorder' | 'showHelperCardsInForm' | 'onAdvancedOptionsToggle'
+>;
+
 const modalStyles = css({
   '& > div': {
     height: '100%',
@@ -33,14 +42,7 @@ export default function ConnectionFormModal({
   isOpen,
   setOpen,
   ...rest
-}: {
-  isOpen: boolean;
-  setOpen: (open: boolean) => void | Dispatch<SetStateAction<boolean>>;
-  onCancel: () => void; // when using
-} & Omit<
-  ConnectionFormProps,
-  'showFooterBorder' | 'showHelperCardsInForm' | 'onAdvancedOptionsToggle'
->): React.ReactElement {
+}: ConnectionFormModalProps): React.ReactElement {
   const [advancedOpen, setAdvancedOpen] = useState(false);
 
   return (