chore(my-queries): support for multiple connections for my-queries COMPASS-7904, COMPASS-7915 (#5841)

Author: himanshusinghs

package-lock.json

@@ -53,8 +53,11 @@
     "@mongodb-js/compass-connections": "^1.30.1",
     "@mongodb-js/compass-logging": "^1.2.18",
     "@mongodb-js/compass-workspaces": "^0.11.0",
+    "@mongodb-js/connection-form": "^1.28.1",
+    "@mongodb-js/connection-info": "^0.3.1",
     "@mongodb-js/my-queries-storage": "^0.8.1",
     "bson": "^6.7.0",
+    "compass-preferences-model": "^2.20.0",
     "fuse.js": "^6.5.3",
     "hadron-app-registry": "^9.1.11",
     "mongodb-ns": "^2.4.2",
@@ -64,6 +67,7 @@
     "redux-thunk": "^2.4.2"
   },
   "devDependencies": {
+    "@mongodb-js/connection-storage": "^0.12.1",
     "@mongodb-js/eslint-config-compass": "^1.1.1",
     "@mongodb-js/mocha-config-compass": "^1.3.9",
     "@mongodb-js/prettier-config-compass": "^1.0.2",

packages/compass-saved-aggregations-queries/package.json

@@ -9,18 +9,27 @@ import {
 } from '@mongodb-js/compass-components';
 import { fetchItems } from '../stores/aggregations-queries-items';
 import type { Item } from '../stores/aggregations-queries-items';
-import { openSavedItem } from '../stores/open-item';
+import {
+  openSavedItem,
+  openSelectConnectionAndNamespaceModal,
+} from '../stores/open-item';
 import type { RootState } from '../stores';
 import { SavedItemCard, CARD_WIDTH, CARD_HEIGHT } from './saved-item-card';
 import type { Action } from './saved-item-card';
 import { NoSavedItems, NoSearchResults } from './empty-list-items';
-import OpenItemModal from './open-item-modal';
 import EditItemModal from './edit-item-modal';
 import { useGridFilters, useFilteredItems } from '../hooks/use-grid-filters';
 import { editItem } from '../stores/edit-item';
 import { confirmDeleteItem } from '../stores/delete-item';
 import { copyToClipboard } from '../stores/copy-to-clipboard';
 import { useTrackOnChange } from '@mongodb-js/compass-logging/provider';
+import {
+  type ConnectionInfo,
+  useActiveConnections,
+} from '@mongodb-js/compass-connections/provider';
+import SelectConnectionModal from './select-connection-modal';
+import SelectConnectionAndNamespaceModal from './select-connection-and-namespace-modal';
+import NoActiveConnectionsModal from './no-active-connections-modal';
 
 const sortBy: { name: keyof Item; label: string }[] = [
   {
@@ -73,7 +82,11 @@ export type AggregationsQueriesListProps = {
   loading: boolean;
   items: Item[];
   onMount(): void;
-  onOpenItem(id: string): void;
+  onOpenItem(id: string, activeConnections: ConnectionInfo[]): void;
+  onOpenItemForDiffTarget(
+    id: string,
+    activeConnections: ConnectionInfo[]
+  ): void;
   onEditItem(id: string): void;
   onDeleteItem(id: string): void;
   onCopyToClipboard(id: string): void;
@@ -84,6 +97,7 @@ export const AggregationsQueriesList = ({
   items,
   onMount,
   onOpenItem,
+  onOpenItemForDiffTarget,
   onEditItem,
   onDeleteItem,
   onCopyToClipboard,
@@ -92,6 +106,22 @@ export const AggregationsQueriesList = ({
     void onMount();
   }, [onMount]);
 
+  const activeConnections = useActiveConnections();
+
+  const handleOpenItem = useCallback(
+    (id: string) => {
+      onOpenItem(id, activeConnections);
+    },
+    [activeConnections, onOpenItem]
+  );
+
+  const handleOpenItemForDiffTarget = useCallback(
+    (id: string) => {
+      onOpenItemForDiffTarget(id, activeConnections);
+    },
+    [activeConnections, onOpenItemForDiffTarget]
+  );
+
   const {
     controls: filterControls,
     conditions: filters,
@@ -155,7 +185,10 @@ export const AggregationsQueriesList = ({
     (id: string, actionName: Action) => {
       switch (actionName) {
         case 'open':
-          onOpenItem(id);
+          handleOpenItem(id);
+          return;
+        case 'open-in':
+          handleOpenItemForDiffTarget(id);
           return;
         case 'rename':
           onEditItem(id);
@@ -168,7 +201,13 @@ export const AggregationsQueriesList = ({
           return;
       }
     },
-    [onOpenItem, onEditItem, onDeleteItem, onCopyToClipboard]
+    [
+      handleOpenItem,
+      handleOpenItemForDiffTarget,
+      onEditItem,
+      onDeleteItem,
+      onCopyToClipboard,
+    ]
   );
 
   const renderItem: React.ComponentProps<typeof VirtualGrid>['renderItem'] =
@@ -228,7 +267,9 @@ export const AggregationsQueriesList = ({
         classNames={{ row: rowStyles }}
         resetActiveItemOnBlur={false}
       ></VirtualGrid>
-      <OpenItemModal></OpenItemModal>
+      <SelectConnectionModal />
+      <SelectConnectionAndNamespaceModal />
+      <NoActiveConnectionsModal />
       <EditItemModal></EditItemModal>
     </ControlsContext.Provider>
   );
@@ -242,6 +283,7 @@ const mapState = ({ savedItems: { items, loading } }: RootState) => ({
 const mapDispatch = {
   onMount: fetchItems,
   onOpenItem: openSavedItem,
+  onOpenItemForDiffTarget: openSelectConnectionAndNamespaceModal,
   onEditItem: editItem,
   onDeleteItem: confirmDeleteItem,
   onCopyToClipboard: copyToClipboard,

packages/compass-saved-aggregations-queries/src/components/aggregations-queries-list.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {
+  type MapDispatchToProps,
+  type MapStateToProps,
+  connect,
+} from 'react-redux';
+import { type RootState } from '../stores';
+import { closeModal } from '../stores/open-item';
+import { Banner, InfoModal } from '@mongodb-js/compass-components';
+
+type NoActiveConnectionsModalProps = {
+  isOpened: boolean;
+  onClose(): void;
+};
+
+const NoActiveConnectionsModal: React.FunctionComponent<
+  NoActiveConnectionsModalProps
+> = ({ isOpened, onClose }) => {
+  return (
+    <InfoModal
+      title="Connect to a cluster"
+      open={isOpened}
+      onClose={onClose}
+      showCloseButton={false}
+      data-testid="no-active-connection-modal"
+    >
+      <Banner variant="warning">
+        It appears that you are not connected to a cluster. Establish a
+        connection first.
+      </Banner>
+    </InfoModal>
+  );
+};
+
+const mapState: MapStateToProps<
+  Pick<NoActiveConnectionsModalProps, 'isOpened'>,
+  Record<string, never>,
+  RootState
+> = ({ openItem: { openedModal } }) => {
+  return {
+    isOpened: openedModal === 'no-active-connections-modal',
+  };
+};
+
+const mapDispatch: MapDispatchToProps<
+  Pick<NoActiveConnectionsModalProps, 'onClose'>,
+  Record<string, never>
+> = {
+  onClose: closeModal,
+};
+
+export default connect(mapState, mapDispatch)(NoActiveConnectionsModal);