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

…#6005)

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/collection-workspaces.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/connect-with-connection-string.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/disconnect.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

packages/compass-e2e-tests/helpers/commands/index.ts

@@ -15,7 +15,7 @@ export * from './collection-workspaces';
 export * from './run-find-operation';
 export * from './focus-stage-operator';
 export * from './select-stage-operator';
-export * from './close-workspace-tabs';
+export * from './workspace-tabs';
 export * from './set-validation';
 export * from './wait-for-animations';
 export * from './wait-for-aria-disabled';
@@ -47,8 +47,8 @@ export * from './select-connections-menu-item';
 export * from './open-settings-modal';
 export * from './wait-for-connection-result';
 export * from './screenshot';
-export * from './show-shell';
-export * from './hide-shell';
+export * from './open-shell';
+export * from './close-shell';
 export * from './select-option';
 export * from './select-stage-menu-option';
 export * from './select-text-pipeline-output-option';

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

@@ -0,0 +1,42 @@
+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 openShell(
+  browser: CompassBrowser,
+  connectionName: string
+): Promise<void> {
+  if (TEST_MULTIPLE_CONNECTIONS) {
+    await browser.selectConnectionMenuItem(
+      connectionName,
+      Selectors.Multiple.OpenShellItem
+    );
+
+    // try and make sure the shell tab is active and ready
+    await browser.waitUntil(async () => {
+      const currentActiveTab = await browser.$(
+        Selectors.workspaceTab({ active: true })
+      );
+      const activeType = await currentActiveTab.getAttribute('data-type');
+      const activeConnectionName = await currentActiveTab.getAttribute(
+        'data-connectionName'
+      );
+      return activeType === 'Shell' && activeConnectionName === connectionName;
+    });
+
+    await browser.clickVisible(Selectors.ShellInputEditor);
+  } else {
+    // Expand the shell
+    await retryWithBackoff(async function () {
+      const shellContentElement = await browser.$(Selectors.ShellContent);
+      if (!(await shellContentElement.isDisplayed())) {
+        // The toasts may be covering the shell, so we need to close them.
+        await browser.hideAllVisibleToasts();
+        await browser.clickVisible(Selectors.ShellExpandButton);
+      }
+
+      await browser.clickVisible(Selectors.ShellInputEditor);
+    });
+  }
+}

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

@@ -9,10 +9,13 @@ async function getOutputText(browser: CompassBrowser): Promise<string[]> {
 
 export async function shellEval(
   browser: CompassBrowser,
+  connectionName: string,
   str: string,
   parse = false
 ): Promise<string> {
-  await browser.showShell();
+  // Keep in mind that for multiple connections this will open a new tab and
+  // focus it.
+  await browser.openShell(connectionName);
 
   const numLines = (await getOutputText(browser)).length;
 
@@ -52,7 +55,11 @@ export async function shellEval(
     }
   }
 
-  await browser.hideShell();
+  // For multiple connections we're currently making the assumption that closing
+  // the shell will put the user back on the tab they were on before
+  // opening the shell tab. This might not stay true as we start testing more
+  // complicated user flows.
+  await browser.closeShell(connectionName);
 
   return result as string;
 }

packages/compass-e2e-tests/helpers/commands/wait-for-connection-result.ts

@@ -21,7 +21,7 @@ export async function waitForConnectionResult(
     selector = TEST_COMPASS_WEB
       ? '[data-testid="workspace-tab-button"][title=Databases]'
       : TEST_MULTIPLE_CONNECTIONS
-      ? Selectors.SidebarTreeItems
+      ? `${Selectors.SidebarTreeItems}[aria-expanded=true]`
       : Selectors.MyQueriesList;
   } else {
     // TODO(COMPASS-7600): this doesn't support compass-web yet, but also isn't
@@ -40,5 +40,10 @@ export async function waitForConnectionResult(
     await browser
       .$(Selectors.ConnectionModal)
       .waitForDisplayed({ reverse: true });
+
+    // make sure the placeholders for databases & collections that are loading are all gone
+    await browser
+      .$(Selectors.DatabaseCollectionPlaceholder)
+      .waitForDisplayed({ reverse: true });
   }
 }

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

@@ -0,0 +1,83 @@
+import type { CompassBrowser } from '../compass-browser';
+import * as Selectors from '../selectors';
+import type { WorkspaceTabSelectorOptions } from '../selectors';
+
+export async function navigateToMyQueries(browser: CompassBrowser) {
+  await browser.clickVisible(Selectors.SidebarMyQueriesTab);
+  await browser
+    .$(Selectors.workspaceTab({ title: 'My Queries', active: true }))
+    .waitForDisplayed();
+}
+
+async function closeTab(
+  browser: CompassBrowser,
+  selectorOptions: WorkspaceTabSelectorOptions,
+  autoConfirmTabClose: boolean
+): Promise<void> {
+  await browser
+    .$(Selectors.workspaceTab(selectorOptions))
+    .$(Selectors.CloseWorkspaceTab)
+    .click();
+
+  // wait until the tab goes away and if the confirmation modal opens, maybe confirm
+  await browser.waitUntil(async () => {
+    if (autoConfirmTabClose) {
+      // Tabs in "dirty" state can't be closed without confirmation
+      if (await browser.$(Selectors.ConfirmTabCloseModal).isExisting()) {
+        await browser.clickVisible(
+          browser.$(Selectors.ConfirmTabCloseModal).$('button=Close tab')
+        );
+        await browser
+          .$(Selectors.ConfirmTabCloseModal)
+          .waitForDisplayed({ reverse: true });
+      }
+    }
+    return (
+      (await browser
+        .$(Selectors.workspaceTab(selectorOptions))
+        .isExisting()) === false
+    );
+  });
+}
+
+export async function closeWorkspaceTabs(
+  browser: CompassBrowser,
+  autoConfirmTabClose = true
+): Promise<void> {
+  const countTabs = async () => {
+    return (await browser.$$(Selectors.workspaceTab())).length;
+  };
+
+  while ((await countTabs()) > 0) {
+    const currentActiveTab = await browser.$(
+      Selectors.workspaceTab({ active: true })
+    );
+    await currentActiveTab.click();
+    // Close this exact active tab rather than "the active one" because if there
+    // are multiple tabs then another tab will immediately become active and
+    // trip up the logic that checks that the tab you closed went away.
+    const id = await currentActiveTab.getAttribute('id');
+    await closeTab(browser, { id }, autoConfirmTabClose);
+  }
+}
+
+export async function closeWorkspaceTab(
+  browser: CompassBrowser,
+  selectorOptions: WorkspaceTabSelectorOptions
+): Promise<void> {
+  const currentTabId = await browser
+    .$(Selectors.workspaceTab({ active: true }))
+    .getAttribute('id');
+  const targetTabId = await browser
+    .$(Selectors.workspaceTab(selectorOptions))
+    .getAttribute('id');
+
+  if (currentTabId !== targetTabId) {
+    // The tab we want to close isn't the active one so the close button isn't
+    // visible. We can either focus it which would have the side-effect of
+    // changing the tab focus or we can try and hover over it.
+    await browser.hover(Selectors.workspaceTab(selectorOptions));
+  }
+
+  await closeTab(browser, selectorOptions, true);
+}