feat(compass-sidebar): unified sidebar experience for multiple connections - COMPASS-8016 (#5877)

Author: himanshusinghs

package-lock.json

@@ -0,0 +1,28 @@
+import React from 'react';
+import { createGlyphComponent, palette, useDarkMode } from '..';
+
+export const ChevronCollapse = createGlyphComponent(
+  'ChevronCollapse',
+  (props) => {
+    const isDarkMode = useDarkMode();
+    const strokeColor = isDarkMode ? palette.gray.light1 : palette.gray.dark1;
+    return (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M4.25 3.25L8 6.5L11.75 3.25M4.25 12.75L8 9.5L11.75 12.75"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+);

packages/compass-components/src/components/chevron-collapse-icon.tsx

@@ -124,5 +124,29 @@ describe('item action controls components', function () {
       expect(within(menuActions).queryByTestId('test-actions-delete-action')).to
         .exist;
     });
+
+    it('renders action icons disabled when collapseAfter is provided with disabled prop', function () {
+      render(
+        <ItemActionControls
+          actions={[
+            {
+              action: 'connect',
+              label: 'Connection',
+              icon: 'Plus',
+              isDisabled: true,
+            },
+            { action: 'edit', label: 'Edit', icon: 'Edit' },
+            { action: 'delete', label: 'Delete', icon: 'Trash' },
+          ]}
+          onAction={() => {}}
+          data-testid="test-actions"
+          collapseAfter={1}
+        ></ItemActionControls>
+      );
+
+      const actionButton = screen.getByTestId('test-actions-connect-action');
+      expect(actionButton).to.exist;
+      expect(actionButton).to.have.attribute('aria-disabled', 'true');
+    });
   });
 });

packages/compass-components/src/components/item-action-controls.spec.tsx

@@ -27,6 +27,7 @@ export type ItemAction<Action extends string> = {
   variant?: 'default' | 'destructive';
   isDisabled?: boolean;
   disabledDescription?: string;
+  tooltip?: string;
 };
 
 export type ItemSeparator = { separator: true };
@@ -326,7 +327,8 @@ export function ItemActionGroup<Action extends string>({
           return <MenuSeparator key={`separator-${idx}`} />;
         }
 
-        const { action, icon, label, tooltip, tooltipProps } = menuItem;
+        const { action, icon, label, isDisabled, tooltip, tooltipProps } =
+          menuItem;
         const button = (
           <ItemActionButton
             key={action}
@@ -339,6 +341,7 @@ export function ItemActionGroup<Action extends string>({
             onClick={onClick}
             className={cx(actionGroupButtonStyle, iconClassName)}
             style={iconStyle}
+            disabled={isDisabled}
           />
         );
 

packages/compass-components/src/components/item-action-controls.tsx

@@ -46,6 +46,7 @@ import type {
   ItemAction,
   GroupedItemAction,
   MenuAction,
+  ItemSeparator,
 } from './components/item-action-controls';
 import {
   ItemActionControls,
@@ -94,6 +95,7 @@ export type {
   ItemAction,
   GroupedItemAction,
   MenuAction,
+  ItemSeparator,
   ElectronFileDialogOptions,
   ElectronShowFileDialogProvider,
 };
@@ -196,3 +198,4 @@ export {
   RequiredURLSearchParamsProvider,
   useRequiredURLSearchParams,
 } from './components/links/link';
+export { ChevronCollapse } from './components/chevron-collapse-icon';

packages/compass-components/src/index.ts

@@ -50,6 +50,11 @@ const baseItemLabelStyles = css({
   marginLeft: spacing[200],
 });
 
+const menuStyles = css({
+  width: '240px',
+  maxHeight: 'unset',
+});
+
 export const NavigationBaseItem = ({
   isActive,
   actionProps,
@@ -65,6 +70,7 @@ export const NavigationBaseItem = ({
   const [hoverProps, isHovered] = useHoverState();
   return (
     <ItemContainer
+      data-testid="base-navigation-item"
       isActive={isActive}
       className={baseItemContainerStyles}
       {...hoverProps}
@@ -90,6 +96,7 @@ export const NavigationBaseItem = ({
           </ItemLabel>
         </ItemButtonWrapper>
         <ItemActionControls<Actions>
+          menuClassName={menuStyles}
           isVisible={isActive || isHovered || isFocused}
           data-testid="sidebar-navigation-item-actions"
           iconSize="small"

packages/compass-connections-navigation/src/base-navigation-item.tsx

@@ -11,7 +11,7 @@ import userEvent from '@testing-library/user-event';
 import { expect } from 'chai';
 import Sinon from 'sinon';
 import { ConnectionsNavigationTree } from './connections-navigation-tree';
-import type { ConnectedConnection } from './tree-data';
+import type { ConnectedConnection, Connection } from './tree-data';
 import type {
   AllPreferences,
   PreferencesAccess,
@@ -21,7 +21,7 @@ import { PreferencesProvider } from 'compass-preferences-model/provider';
 import { type WorkspaceTab } from '@mongodb-js/compass-workspaces';
 import { ConnectionStatus } from '@mongodb-js/compass-connections/provider';
 
-const connections: ConnectedConnection[] = [
+const connections: Connection[] = [
   {
     connectionInfo: {
       id: 'connection_ready',
@@ -101,6 +101,17 @@ const connections: ConnectedConnection[] = [
     isPerformanceTabSupported: false,
     connectionStatus: ConnectionStatus.Connected,
   },
+  {
+    connectionInfo: {
+      id: 'connection_disconnected',
+      connectionOptions: {
+        connectionString: 'mongodb://connection-disconnected',
+      },
+      savedConnectionType: 'recent',
+    },
+    name: 'connection_disconnected',
+    connectionStatus: ConnectionStatus.Disconnected,
+  },
 ];
 
 const props: React.ComponentProps<typeof ConnectionsNavigationTree> = {
@@ -399,11 +410,11 @@ describe('ConnectionsNavigationTree', function () {
       ) {
         const readonlyConnections: ConnectedConnection[] = [
           {
-            ...connections[0],
+            ...(connections[0] as ConnectedConnection),
             isWritable: false,
           },
           {
-            ...connections[1],
+            ...(connections[1] as ConnectedConnection),
           },
         ];
         await renderConnectionsNavigationTree({
@@ -421,11 +432,11 @@ describe('ConnectionsNavigationTree', function () {
       ) {
         const readonlyConnections: ConnectedConnection[] = [
           {
-            ...connections[0],
+            ...(connections[0] as ConnectedConnection),
             isDataLake: true,
           },
           {
-            ...connections[1],
+            ...(connections[1] as ConnectedConnection),
           },
         ];
         await renderConnectionsNavigationTree({
@@ -441,7 +452,10 @@ describe('ConnectionsNavigationTree', function () {
           React.ComponentProps<typeof ConnectionsNavigationTree>
         > = {}
       ) {
-        const readonlyConnections: ConnectedConnection[] = [...connections];
+        const readonlyConnections: ConnectedConnection[] = [
+          connections[0] as ConnectedConnection,
+          connections[1] as ConnectedConnection,
+        ];
         await renderConnectionsNavigationTree(
           {
             ...props,
@@ -607,6 +621,60 @@ describe('ConnectionsNavigationTree', function () {
         expect(action).to.equal('create-database');
       });
 
+      it('should render the connect action for a disconnected connection', async function () {
+        const spy = Sinon.spy();
+        await renderConnectionsNavigationTree({
+          expanded: { connection_ready: { db_ready: true } },
+          onItemAction: spy,
+        });
+
+        userEvent.hover(screen.getByText('connection_disconnected'));
+
+        const connectButton = screen.getByTestId('connection_disconnected');
+        expect(within(connectButton).getByLabelText('Connect')).to.exist;
+
+        userEvent.click(connectButton);
+
+        expect(spy).to.be.calledOnce;
+        const [[item, action]] = spy.args;
+        expect(item.type).to.equal('connection');
+        expect(item.connectionInfo.id).to.equal('connection_disconnected');
+        expect(action).to.equal('connection-connect');
+      });
+
+      context(
+        'when number of active connections are equal to max allowed active connections',
+        function () {
+          it('should render the connect action disabled', async function () {
+            const spy = Sinon.spy();
+            await renderConnectionsNavigationTree(
+              {
+                expanded: { connection_ready: { db_ready: true } },
+                onItemAction: spy,
+              },
+              {
+                maximumNumberOfActiveConnections: 2,
+              }
+            );
+
+            userEvent.hover(screen.getByText('connection_disconnected'));
+
+            const disconnectConnectionNavItem = screen.getByTestId(
+              'connection_disconnected'
+            );
+            const connectBtn = within(
+              disconnectConnectionNavItem
+            ).getByLabelText('Connect');
+            expect(connectBtn).to.exist;
+            expect(connectBtn).to.have.attribute('aria-disabled', 'true');
+
+            userEvent.click(connectBtn);
+
+            expect(spy).to.not.be.called;
+          });
+        }
+      );
+
       context('when performance tab is supported', function () {
         it('should show performance action for connection item and activate callback with `connection-performance-metrics` when clicked', async function () {
           const spy = Sinon.spy();
@@ -632,7 +700,10 @@ describe('ConnectionsNavigationTree', function () {
           await renderConnectionsNavigationTree({
             onItemAction: spy,
             connections: [
-              { ...connections[0], isPerformanceTabSupported: false },
+              {
+                ...(connections[0] as ConnectedConnection),
+                isPerformanceTabSupported: false,
+              },
               { ...connections[1] },
             ],
           });

packages/compass-connections-navigation/src/connections-navigation-tree.spec.tsx

@@ -63,6 +63,22 @@ const ConnectionsNavigationTree: React.FunctionComponent<
   const isRenameCollectionEnabled = usePreference(
     'enableRenameCollectionModal'
   );
+  const maxAllowedActiveConnections = usePreference(
+    'maximumNumberOfActiveConnections'
+  ) as number;
+  const { isConnectDisabled, connectDisabledDescription } = useMemo(() => {
+    const numberOfActiveConnections = connections.filter(
+      (connection) => connection.connectionStatus === ConnectionStatus.Connected
+    ).length;
+    return {
+      isConnectDisabled:
+        numberOfActiveConnections >= maxAllowedActiveConnections,
+      connectDisabledDescription: `Only ${maxAllowedActiveConnections} connection${
+        numberOfActiveConnections > 1 ? 's' : ''
+      } can be open at the same time. First disconnect from another cluster.`,
+    };
+  }, [maxAllowedActiveConnections, connections]);
+
   const id = useId();
 
   const treeData = useMemo(() => {
@@ -77,7 +93,15 @@ const ConnectionsNavigationTree: React.FunctionComponent<
   const onDefaultAction: OnDefaultAction<SidebarActionableItem> = useCallback(
     (item, evt) => {
       if (item.type === 'connection') {
-        onItemAction(item, 'select-connection');
+        if (item.connectionStatus === ConnectionStatus.Connected) {
+          onItemAction(item, 'select-connection');
+        } else if (
+          (item.connectionStatus === ConnectionStatus.Disconnected ||
+            item.connectionStatus === ConnectionStatus.Failed) &&
+          !isConnectDisabled
+        ) {
+          onItemAction(item, 'connection-connect');
+        }
       } else if (item.type === 'database') {
         onItemAction(item, 'select-database');
       } else {
@@ -88,7 +112,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
         }
       }
     },
-    [onItemAction]
+    [onItemAction, isConnectDisabled]
   );
 
   const activeItemId = useMemo(() => {
@@ -113,34 +137,34 @@ const ConnectionsNavigationTree: React.FunctionComponent<
         case 'placeholder':
           return [];
         case 'connection': {
-          const isFavorite =
-            item.connectionInfo?.savedConnectionType === 'favorite';
           if (item.connectionStatus === ConnectionStatus.Connected) {
             return connectedConnectionItemActions({
-              hasWriteActionsEnabled: item.hasWriteActionsEnabled,
+              hasWriteActionsDisabled: item.hasWriteActionsDisabled,
               isShellEnabled: item.isShellEnabled,
-              isFavorite,
+              connectionInfo: item.connectionInfo,
               isPerformanceTabSupported: item.isPerformanceTabSupported,
             });
           } else {
             return notConnectedConnectionItemActions({
               connectionInfo: item.connectionInfo,
+              isConnectDisabled,
+              connectDisabledTooltip: connectDisabledDescription,
             });
           }
         }
         case 'database':
           return databaseItemActions({
-            hasWriteActionsEnabled: item.hasWriteActionsEnabled,
+            hasWriteActionsDisabled: item.hasWriteActionsDisabled,
           });
         default:
           return collectionItemActions({
-            hasWriteActionsEnabled: item.hasWriteActionsEnabled,
+            hasWriteActionsDisabled: item.hasWriteActionsDisabled,
             type: item.type,
             isRenameCollectionEnabled,
           });
       }
     },
-    [isRenameCollectionEnabled]
+    [isRenameCollectionEnabled, isConnectDisabled, connectDisabledDescription]
   );
 
   const isTestEnv = process.env.NODE_ENV === 'test';

packages/compass-connections-navigation/src/connections-navigation-tree.tsx

@@ -5,7 +5,8 @@ import { spacing } from '@mongodb-js/compass-components';
 export const MAX_COLLECTION_PLACEHOLDER_ITEMS = Infinity;
 export const MAX_DATABASE_PLACEHOLDER_ITEMS = Infinity;
 export const MIN_DATABASE_PLACEHOLDER_ITEMS = 5;
-export const ROW_HEIGHT = spacing[5];
+export const ROW_HEIGHT = spacing[800];
+export const SIDEBAR_COLLAPSE_ICON_WIDTH = 26;
 // export const COLLETIONS_MARGIN_BOTTOM = spacing[1];
 
 export type Actions =