fix: finish readOnly logic COMPASS-7972 (#5905)

Author: paula-stacho

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

@@ -50,9 +50,27 @@ const connections: ConnectedConnection[] = [
         collectionsStatus: 'ready',
         collectionsLength: 3,
         collections: [
-          { _id: 'db_ready.meow', name: 'meow', type: 'collection' },
-          { _id: 'db_ready.woof', name: 'woof', type: 'timeseries' },
-          { _id: 'db_ready.bwok', name: 'bwok', type: 'view' },
+          {
+            _id: 'db_ready.meow',
+            name: 'meow',
+            type: 'collection',
+            sourceName: '',
+            pipeline: [],
+          },
+          {
+            _id: 'db_ready.woof',
+            name: 'woof',
+            type: 'timeseries',
+            sourceName: '',
+            pipeline: [],
+          },
+          {
+            _id: 'db_ready.bwok',
+            name: 'bwok',
+            type: 'view',
+            sourceName: '',
+            pipeline: [],
+          },
         ],
       },
     ],
@@ -235,6 +253,31 @@ describe('ConnectionsNavigationTree', function () {
   });
 
   describe('when connection is writable', function () {
+    it('should show all connection actions', async function () {
+      await renderConnectionsNavigationTree();
+
+      userEvent.hover(screen.getByText('turtles'));
+
+      const connection = screen.getByTestId('connection_ready');
+
+      expect(within(connection).getByTitle('Create database')).to.be.visible;
+
+      const otherActions = within(connection).getByTitle('Show actions');
+      expect(otherActions).to.exist;
+
+      userEvent.click(otherActions);
+
+      expect(screen.getByText('Open MongoDB shell')).to.be.visible;
+      expect(
+        screen.getByTestId('sidebar-navigation-item-actions-open-shell-action')
+      ).not.to.have.attribute('disabled');
+      expect(screen.getByText('View performance metrics')).to.be.visible;
+      expect(screen.getByText('Show connection info')).to.be.visible;
+      expect(screen.getByText('Copy connection string')).to.be.visible;
+      expect(screen.getByText('Unfavorite')).to.be.visible;
+      expect(screen.getByText('Disconnect')).to.be.visible;
+    });
+
     it('should show all database actions on hover', async function () {
       await renderConnectionsNavigationTree({
         expanded: { connection_ready: {} },
@@ -379,6 +422,41 @@ describe('ConnectionsNavigationTree', function () {
     },
   ].forEach(function ({ name, renderReadonlyComponent }) {
     describe(name, function () {
+      it('should show reduced connection actions', async function () {
+        await renderReadonlyComponent();
+
+        userEvent.hover(screen.getByText('turtles'));
+
+        const connection = screen.getByTestId('connection_ready');
+
+        expect(within(connection).queryByTitle('Create database')).not.to.exist;
+
+        const otherActions = within(connection).getByTitle('Show actions');
+        expect(otherActions).to.exist;
+
+        userEvent.click(otherActions);
+
+        expect(screen.getByText('Open MongoDB shell')).to.be.visible;
+        if (name !== 'when connection is datalake') {
+          expect(
+            screen.getByTestId(
+              'sidebar-navigation-item-actions-open-shell-action'
+            )
+          ).to.have.attribute('disabled');
+        } else {
+          expect(
+            screen.getByTestId(
+              'sidebar-navigation-item-actions-open-shell-action'
+            )
+          ).not.to.have.attribute('disabled');
+        }
+        expect(screen.getByText('View performance metrics')).to.be.visible;
+        expect(screen.getByText('Show connection info')).to.be.visible;
+        expect(screen.getByText('Copy connection string')).to.be.visible;
+        expect(screen.getByText('Unfavorite')).to.be.visible;
+        expect(screen.getByText('Disconnect')).to.be.visible;
+      });
+
       it('should not show database actions', async function () {
         await renderReadonlyComponent({
           expanded: {

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

@@ -66,8 +66,13 @@ const ConnectionsNavigationTree: React.FunctionComponent<
   const id = useId();
 
   const treeData = useMemo(() => {
-    return getVirtualTreeItems(connections, isSingleConnection, expanded);
-  }, [connections, isSingleConnection, expanded]);
+    return getVirtualTreeItems({
+      connections,
+      isSingleConnection,
+      expandedItems: expanded,
+      preferencesReadOnly,
+    });
+  }, [connections, isSingleConnection, expanded, preferencesReadOnly]);
 
   const onDefaultAction: OnDefaultAction<SidebarActionableItem> = useCallback(
     (item, evt) => {
@@ -112,7 +117,8 @@ const ConnectionsNavigationTree: React.FunctionComponent<
             item.connectionInfo?.savedConnectionType === 'favorite';
           if (item.connectionStatus === ConnectionStatus.Connected) {
             return connectedConnectionItemActions({
-              isReadOnly: preferencesReadOnly || item.isConnectionReadOnly,
+              hasWriteActionsEnabled: item.hasWriteActionsEnabled,
+              isShellEnabled: item.isShellEnabled,
               isFavorite,
               isPerformanceTabSupported: item.isPerformanceTabSupported,
             });
@@ -124,17 +130,17 @@ const ConnectionsNavigationTree: React.FunctionComponent<
         }
         case 'database':
           return databaseItemActions({
-            isReadOnly: preferencesReadOnly || item.isConnectionReadOnly,
+            hasWriteActionsEnabled: item.hasWriteActionsEnabled,
           });
         default:
           return collectionItemActions({
-            isReadOnly: preferencesReadOnly || item.isConnectionReadOnly,
+            hasWriteActionsEnabled: item.hasWriteActionsEnabled,
             type: item.type,
             isRenameCollectionEnabled,
           });
       }
     },
-    [preferencesReadOnly, isRenameCollectionEnabled]
+    [isRenameCollectionEnabled]
   );
 
   const isTestEnv = process.env.NODE_ENV === 'test';

packages/compass-connections-navigation/src/item-actions.ts

@@ -50,16 +50,18 @@ export const notConnectedConnectionItemActions = ({
 };
 
 export const connectedConnectionItemActions = ({
-  isReadOnly,
+  hasWriteActionsEnabled,
   isFavorite,
   isPerformanceTabSupported,
+  isShellEnabled,
 }: {
-  isReadOnly: boolean;
+  hasWriteActionsEnabled: boolean;
   isFavorite: boolean;
   isPerformanceTabSupported: boolean;
+  isShellEnabled: boolean;
 }): NavigationItemActions => {
   const actions: NavigationItemActions = [];
-  if (!isReadOnly) {
+  if (!hasWriteActionsEnabled) {
     actions.push({
       action: 'create-database',
       icon: 'Plus',
@@ -71,6 +73,8 @@ export const connectedConnectionItemActions = ({
       action: 'open-shell',
       icon: 'Shell',
       label: 'Open MongoDB shell',
+      isDisabled: !isShellEnabled,
+      disabledDescription: 'Not available',
     },
     {
       action: 'connection-performance-metrics',
@@ -105,11 +109,11 @@ export const connectedConnectionItemActions = ({
 };
 
 export const databaseItemActions = ({
-  isReadOnly,
+  hasWriteActionsEnabled,
 }: {
-  isReadOnly: boolean;
+  hasWriteActionsEnabled: boolean;
 }): NavigationItemActions => {
-  if (isReadOnly) {
+  if (hasWriteActionsEnabled) {
     return [];
   }
   return [
@@ -127,11 +131,11 @@ export const databaseItemActions = ({
 };
 
 export const collectionItemActions = ({
-  isReadOnly,
+  hasWriteActionsEnabled,
   type,
   isRenameCollectionEnabled,
 }: {
-  isReadOnly: boolean;
+  hasWriteActionsEnabled: boolean;
   type: 'collection' | 'view' | 'timeseries';
   isRenameCollectionEnabled: boolean;
 }): NavigationItemActions => {
@@ -143,7 +147,7 @@ export const collectionItemActions = ({
     },
   ];
 
-  if (isReadOnly) {
+  if (hasWriteActionsEnabled) {
     return actions;
   }
 

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

@@ -69,13 +69,12 @@ export function NavigationItem({
       if (item.type === 'connection') {
         if (
           item.connectionStatus !== ConnectionStatus.Connected ||
-          !item.isConnectionReadOnly
+          !item.hasWriteActionsEnabled
         ) {
           return 1;
         }
-        // when connection is not readonly we have create-database as first
-        // action which is why we would like to collapse entire actions when the
-        // connection is readonly to avoid showing any other items from the menu
+        // when connected connection is readonly we don't show the create-database action
+        // so the whole action menu is collapsed
         return 0;
       }
     })();

packages/compass-connections-navigation/src/tree-data.ts

@@ -80,7 +80,8 @@ export type ConnectedConnectionTreeItem = VirtualTreeItem & {
   connectionInfo: ConnectionInfo;
   connectionStatus: ConnectionStatus.Connected;
   isPerformanceTabSupported: boolean;
-  isConnectionReadOnly: boolean;
+  hasWriteActionsEnabled: boolean;
+  isShellEnabled: boolean;
 };
 
 export type DatabaseTreeItem = VirtualTreeItem & {
@@ -90,7 +91,7 @@ export type DatabaseTreeItem = VirtualTreeItem & {
   isExpanded: boolean;
   connectionId: string;
   dbName: string;
-  isConnectionReadOnly: boolean;
+  hasWriteActionsEnabled: boolean;
 };
 
 export type CollectionTreeItem = VirtualTreeItem & {
@@ -100,7 +101,7 @@ export type CollectionTreeItem = VirtualTreeItem & {
   colorCode?: string;
   connectionId: string;
   namespace: string;
-  isConnectionReadOnly: boolean;
+  hasWriteActionsEnabled: boolean;
 };
 
 export type SidebarActionableItem =
@@ -150,15 +151,19 @@ const connectedConnectionToItems = ({
   connectionIndex,
   connectionsLength,
   expandedItems = {},
+  preferencesReadOnly,
 }: {
   connection: ConnectedConnection;
   connectionIndex: number;
   connectionsLength: number;
   expandedItems: Record<string, false | Record<string, boolean>>;
+  preferencesReadOnly: boolean;
 }): SidebarTreeItem[] => {
   const isExpanded = !!expandedItems[connectionInfo.id];
   const colorCode = connectionInfo.favorite?.color;
-  const isConnectionReadOnly = isDataLake || !isWritable;
+  const hasWriteActionsEnabled =
+    preferencesReadOnly || isDataLake || !isWritable;
+  const isShellEnabled = !preferencesReadOnly && isWritable;
   const connectionTI: ConnectedConnectionTreeItem = {
     id: connectionInfo.id,
     level: 1,
@@ -172,7 +177,8 @@ const connectedConnectionToItems = ({
     connectionInfo,
     connectionStatus,
     isPerformanceTabSupported,
-    isConnectionReadOnly,
+    hasWriteActionsEnabled,
+    isShellEnabled,
   };
 
   const sidebarData: SidebarTreeItem[] = [connectionTI];
@@ -210,7 +216,7 @@ const connectedConnectionToItems = ({
         colorCode,
         databasesLength,
         databaseIndex,
-        isConnectionReadOnly,
+        hasWriteActionsEnabled,
       });
     })
   );
@@ -230,7 +236,7 @@ const databaseToItems = ({
   colorCode,
   databaseIndex,
   databasesLength,
-  isConnectionReadOnly,
+  hasWriteActionsEnabled,
 }: {
   database: Database;
   connectionId: string;
@@ -239,7 +245,7 @@ const databaseToItems = ({
   colorCode?: string;
   databaseIndex: number;
   databasesLength: number;
-  isConnectionReadOnly: boolean;
+  hasWriteActionsEnabled: boolean;
 }): SidebarTreeItem[] => {
   const isExpanded = !!expandedItems[id];
   const databaseTI: DatabaseTreeItem = {
@@ -254,7 +260,7 @@ const databaseToItems = ({
     connectionId,
     dbName: id,
     isExpandable: true,
-    isConnectionReadOnly,
+    hasWriteActionsEnabled,
   };
 
   const sidebarData: SidebarTreeItem[] = [databaseTI];
@@ -292,7 +298,7 @@ const databaseToItems = ({
       colorCode,
       connectionId,
       namespace: id,
-      isConnectionReadOnly,
+      hasWriteActionsEnabled,
       isExpandable: false,
     }))
   );
@@ -311,11 +317,17 @@ const databaseToItems = ({
  * @param isSingleConnection - Whether the connections are a single connection.
  * @param expandedItems - The expanded items.
  */
-export function getVirtualTreeItems(
-  connections: (NotConnectedConnection | ConnectedConnection)[],
-  isSingleConnection: boolean,
-  expandedItems: Record<string, false | Record<string, boolean>> = {}
-): SidebarTreeItem[] {
+export function getVirtualTreeItems({
+  connections,
+  isSingleConnection,
+  expandedItems = {},
+  preferencesReadOnly,
+}: {
+  connections: (NotConnectedConnection | ConnectedConnection)[];
+  isSingleConnection: boolean;
+  expandedItems: Record<string, false | Record<string, boolean>>;
+  preferencesReadOnly: boolean;
+}): SidebarTreeItem[] {
   if (!isSingleConnection) {
     return connections.flatMap((connection, connectionIndex) => {
       if (connection.connectionStatus === ConnectionStatus.Connected) {
@@ -324,6 +336,7 @@ export function getVirtualTreeItems(
           expandedItems,
           connectionIndex,
           connectionsLength: connections.length,
+          preferencesReadOnly,
         });
       } else {
         return notConnectedConnectionToItems({
@@ -342,7 +355,8 @@ export function getVirtualTreeItems(
   }
 
   const dbExpandedItems = expandedItems[connection.connectionInfo.id] || {};
-  const isConnectionReadOnly = connection.isDataLake || !connection.isWritable;
+  const hasWriteActionsEnabled =
+    preferencesReadOnly || connection.isDataLake || !connection.isWritable;
   return connection.databases.flatMap((database, databaseIndex) => {
     return databaseToItems({
       connectionId: connection.connectionInfo.id,
@@ -351,7 +365,7 @@ export function getVirtualTreeItems(
       level: 1,
       databasesLength: connection.databasesLength,
       databaseIndex,
-      isConnectionReadOnly,
+      hasWriteActionsEnabled,
     });
   });
 }