chore(e2e): port shell e2e usage to multiple connections COMPASS-8004 (#6005)

Author: lerouxb

packages/compass-components/src/components/workspace-tabs/tab.tsx

@@ -184,6 +184,8 @@ const selectedCloseButtonStyles = css({
 type IconGlyph = Extract<keyof typeof glyphs, string>;
 
 type TabProps = {
+  connectionName?: string;
+  type: string;
   title: string;
   isSelected: boolean;
   isDragging: boolean;
@@ -196,6 +198,8 @@ type TabProps = {
 };
 
 function Tab({
+  connectionName,
+  type,
   title,
   isSelected,
   isDragging,
@@ -254,6 +258,8 @@ function Tab({
       tabIndex={isSelected ? 0 : -1}
       aria-controls={tabContentId}
       data-testid="workspace-tab-button"
+      data-connectionName={connectionName}
+      data-type={type}
       title={subtitle ? subtitle : title}
       {...tabProps}
     >

packages/compass-components/src/components/workspace-tabs/workspace-tabs.tsx

@@ -170,6 +170,7 @@ type WorkspaceTabsProps = {
 
 export type TabProps = {
   id: string;
+  type: string;
   title: string;
   subtitle?: string;
   connectionId?: string;

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

@@ -572,7 +572,10 @@ describe('ConnectionsNavigationTree', function () {
         userEvent.click(otherActions);
 
         expect(screen.getByText('Open MongoDB shell')).to.be.visible;
-        if (name !== 'when connection is datalake') {
+        if (
+          name !== 'when connection is datalake' &&
+          name !== 'when connection is not writable'
+        ) {
           expect(
             screen.getByTestId(
               'sidebar-navigation-item-actions-open-shell-action'

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

@@ -170,7 +170,7 @@ const connectedConnectionToItems = ({
   const colorCode = connectionInfo.favorite?.color;
   const hasWriteActionsDisabled =
     preferencesReadOnly || isDataLake || !isWritable;
-  const isShellEnabled = !preferencesReadOnly && isWritable;
+  const isShellEnabled = !preferencesReadOnly;
   const connectionTI: ConnectedConnectionTreeItem = {
     id: connectionInfo.id,
     level: 1,

packages/compass-e2e-tests/helpers/commands/close-shell.ts

@@ -0,0 +1,23 @@
+import { TEST_MULTIPLE_CONNECTIONS } from '../compass';
+import type { CompassBrowser } from '../compass-browser';
+import retryWithBackoff from '../retry-with-backoff';
+import * as Selectors from '../selectors';
+
+export async function closeShell(
+  browser: CompassBrowser,
+  connectionName: string
+): Promise<void> {
+  if (TEST_MULTIPLE_CONNECTIONS) {
+    await browser.closeWorkspaceTab({
+      connectionName,
+      type: 'Shell',
+    });
+  } else {
+    await retryWithBackoff(async function () {
+      const shellContentElement = await browser.$(Selectors.ShellContent);
+      if (await shellContentElement.isDisplayed()) {
+        await browser.clickVisible(Selectors.ShellExpandButton);
+      }
+    });
+  }
+}

packages/compass-e2e-tests/helpers/commands/close-workspace-tabs.ts

@@ -113,7 +113,7 @@ export async function waitUntilActiveCollectionSubTab(
 
 export async function getActiveTabNamespace(browser: CompassBrowser) {
   const activeWorkspaceNamespace = await browser
-    .$(Selectors.workspaceTab(null, true))
+    .$(Selectors.workspaceTab({ active: true }))
     .getAttribute('data-namespace');
   return activeWorkspaceNamespace || null;
 }

packages/compass-e2e-tests/helpers/commands/collection-workspaces.ts

@@ -71,7 +71,7 @@ export async function connectWithConnectionString(
 
     // some connection should be expanded (ie. connected) by now
     await browser
-      .$(`${Selectors.SidebarTreeItems} [aria-expanded=true]`)
-      .waitForExist({ reverse: true });
+      .$(`${Selectors.SidebarTreeItems}[aria-expanded=true]`)
+      .waitForExist();
   }
 }

packages/compass-e2e-tests/helpers/commands/connect-with-connection-string.ts

@@ -44,7 +44,7 @@ export async function disconnect(browser: CompassBrowser): Promise<void> {
     // no active connections left. Use a different command if you expect to
     // disconnect just one connection and still keep others around.
     await browser
-      .$(`${Selectors.SidebarTreeItems} [aria-expanded=true]`)
+      .$(`${Selectors.SidebarTreeItems}[aria-expanded=true]`)
       .waitForExist({ reverse: true });
 
     // The potential problem here is that the list is virtual, so it is possible