chore(e2e): Port My Queries tests, fix Refresh Databases COMPASS-8006 (#6017)

* Port My Queries tests, fix Refresh Databases

* remove commented code

* attempt at a better test for refresh button in sidebar

* broken My Queries test

* only refresh databases for the one connection

* don't need those screenshots

Author: lerouxb

packages/compass-app-stores/src/stores/instance-store.ts

@@ -111,7 +111,15 @@ export function createInstancesStore(
       // Event emitted when the Databases grid needs to be refreshed. We
       // additionally refresh the list of collections as well since there is the
       // side navigation which could be in expanded mode
-      async function refreshDatabases() {
+      async function refreshDatabases({
+        connectionId,
+      }: {
+        connectionId: string;
+      }) {
+        if (instanceConnectionId !== connectionId) {
+          return;
+        }
+
         try {
           await instance.fetchDatabases({ dataService, force: true });
           await Promise.allSettled(

packages/compass-e2e-tests/tests/instance-sidebar.test.ts

@@ -208,6 +208,15 @@ describe('Instance sidebar', function () {
     const db = 'test';
     const coll = `coll_${Date.now()}`;
 
+    // expand the database entry in the sidebar
+    await browser.clickVisible(Selectors.sidebarDatabase(db));
+
+    // wait until the collections finish loading
+    const numbersCollectionElement = await browser.$(
+      Selectors.sidebarCollection(db, 'numbers')
+    );
+    await numbersCollectionElement.waitForDisplayed();
+
     const mongoClient = new MongoClient(DEFAULT_CONNECTION_STRING);
     await mongoClient.connect();
     try {
@@ -225,10 +234,11 @@ describe('Instance sidebar', function () {
     } else {
       await browser.clickVisible(Selectors.Single.RefreshDatabasesButton);
     }
-    await browser.clickVisible(Selectors.sidebarDatabase(db));
-    const collectionElement = await browser.$(
+
+    // wait for the new collection we added via the driver to appear.
+    const newCollectionElement = await browser.$(
       Selectors.sidebarCollection(db, coll)
     );
-    await collectionElement.waitForDisplayed();
+    await newCollectionElement.waitForDisplayed();
   });
 });

…ts/tests/instance-my-queries-tab.test.ts …s-e2e-tests/tests/my-queries-tab.test.tspackages/compass-e2e-tests/tests/instance-my-queries-tab.test.ts renamed to packages/compass-e2e-tests/tests/my-queries-tab.test.ts packages/compass-e2e-tests/tests/instance-my-queries-tab.test.ts renamed to packages/compass-e2e-tests/tests/my-queries-tab.test.ts

@@ -41,19 +41,14 @@ async function openMenuForQueryItem(
   await browser.$(Selectors.SavedItemMenu).waitForDisplayed();
 }
 
-describe('Instance my queries tab', function () {
+describe('My Queries tab', function () {
   let compass: Compass;
   let browser: CompassBrowser;
   const connectionName = connectionNameFromString(DEFAULT_CONNECTION_STRING);
 
   before(async function () {
     skipForWeb(this, 'saved queries not yet available in compass-web');
 
-    // TODO(COMPASS-8006): best to only skip this until the My Queries tab is ported
-    if (TEST_MULTIPLE_CONNECTIONS) {
-      this.skip();
-    }
-
     compass = await init(this.test?.fullTitle());
     browser = compass.browser;
   });
@@ -66,10 +61,6 @@ describe('Instance my queries tab', function () {
       return;
     }
 
-    if (TEST_MULTIPLE_CONNECTIONS) {
-      return;
-    }
-
     await cleanup(compass);
   });
   afterEach(async function () {
@@ -162,7 +153,17 @@ describe('Instance my queries tab', function () {
       connectionName,
       'db.numbers.renameCollection("numbers-renamed")'
     );
-    await browser.clickVisible(Selectors.Single.RefreshDatabasesButton);
+    if (TEST_MULTIPLE_CONNECTIONS) {
+      await browser.selectConnectionMenuItem(
+        connectionName,
+        Selectors.Multiple.RefreshDatabasesItem
+      );
+
+      // go to My Queries because for multiple connections it is not the default tab
+      await browser.navigateToMyQueries();
+    } else {
+      await browser.clickVisible(Selectors.Single.RefreshDatabasesButton);
+    }
 
     // browse to the query
     await browser.clickVisible(Selectors.myQueriesItem(newFavoriteQueryName));
@@ -274,8 +275,9 @@ describe('Instance my queries tab', function () {
       const favoriteQueryName = 'list of numbers greater than 10 - query';
       const newCollectionName = 'numbers-renamed';
 
-      /** saves a query and renames the collection associated with the query, so that the query must be opened with the "select namespace" modal */
-      async function setup() {
+      it('users can permanently associate a new namespace for an aggregation/query', async function () {
+        // save a query and rename the collection associated with the query, so that the query must be opened with the "select namespace" modal
+
         // Run a query
         await browser.navigateToCollectionTab('test', 'numbers', 'Documents');
         await browser.runFindOperation('Documents', `{i: {$gt: 10}}`, {
@@ -339,11 +341,16 @@ describe('Instance my queries tab', function () {
           connectionName,
           `db.numbers.renameCollection('${newCollectionName}')`
         );
-        await browser.clickVisible(Selectors.Single.RefreshDatabasesButton);
-      }
-      beforeEach(setup);
 
-      it('users can permanently associate a new namespace for an aggregation/query', async function () {
+        if (TEST_MULTIPLE_CONNECTIONS) {
+          await browser.selectConnectionMenuItem(
+            connectionName,
+            Selectors.Multiple.RefreshDatabasesItem
+          );
+        } else {
+          await browser.clickVisible(Selectors.Single.RefreshDatabasesButton);
+        }
+
         await browser.navigateToMyQueries();
         // browse to the query
         await browser.clickVisible(Selectors.myQueriesItem(favoriteQueryName));

packages/compass-sidebar/src/components/legacy/sidebar.tsx

@@ -150,6 +150,13 @@ export function Sidebar({
         return;
       }
 
+      if (action === 'refresh-databases') {
+        onSidebarAction(action, ...rest, {
+          connectionId: initialConnectionInfo.id,
+        });
+        return;
+      }
+
       onSidebarAction(action, ...rest);
     },
     [

packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx

@@ -131,6 +131,7 @@ type MapStateProps = {
 type MapDispatchProps = {
   fetchAllCollections(): void;
   onDatabaseExpand(connectionId: string, dbId: string): void;
+  onRefreshDatabases(connectionId: string): void;
   onNamespaceAction(
     connectionId: string,
     namespace: string,
@@ -164,6 +165,7 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
   onDisconnect,
   onDatabaseExpand,
   fetchAllCollections,
+  onRefreshDatabases: _onRefreshDatabases,
   onNamespaceAction: _onNamespaceAction,
 }) => {
   const {
@@ -281,6 +283,9 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
         case 'select-connection':
           openDatabasesWorkspace(item.connectionInfo.id);
           return;
+        case 'refresh-databases':
+          _onRefreshDatabases(item.connectionInfo.id);
+          return;
         case 'create-database':
           _onNamespaceAction(item.connectionInfo.id, '', action);
           return;
@@ -326,6 +331,7 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
       }
     },
     [
+      _onRefreshDatabases,
       _onNamespaceAction,
       openShellWorkspace,
       openDatabasesWorkspace,
@@ -497,6 +503,12 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
   );
 };
 
+const onRefreshDatabases = (connectionId: string): SidebarThunkAction<void> => {
+  return (_dispatch, getState, { globalAppRegistry }) => {
+    globalAppRegistry.emit('refresh-databases', { connectionId });
+  };
+};
+
 const onNamespaceAction = (
   connectionId: string,
   namespace: string,
@@ -567,6 +579,7 @@ const mapDispatchToProps: MapDispatchToProps<
   MapDispatchProps,
   ConnectionsNavigationComponentProps
 > = {
+  onRefreshDatabases,
   onNamespaceAction,
   onDatabaseExpand,
   fetchAllCollections,

packages/databases-collections/src/components/databases.tsx

@@ -75,7 +75,7 @@ type DatabasesProps = {
   isDataLake: boolean;
   onDeleteDatabaseClick(connectionId: string, ns: string): void;
   onCreateDatabaseClick(connectionId: string): void;
-  onRefreshClick(): void;
+  onRefreshClick(connectionId: string): void;
 };
 
 const Databases: React.FunctionComponent<DatabasesProps> = ({
@@ -87,7 +87,7 @@ const Databases: React.FunctionComponent<DatabasesProps> = ({
   isGenuineMongoDB,
   onDeleteDatabaseClick: _onDeleteDatabaseClick,
   onCreateDatabaseClick: _onCreateDatabaseClick,
-  onRefreshClick,
+  onRefreshClick: _onRefreshClick,
 }) => {
   const connectionInfo = useConnectionInfo();
   const { id: connectionId, atlasMetadata } = connectionInfo;
@@ -112,6 +112,10 @@ const Databases: React.FunctionComponent<DatabasesProps> = ({
     _onCreateDatabaseClick(connectionId);
   }, [connectionId, _onCreateDatabaseClick]);
 
+  const onRefreshClick = useCallback(() => {
+    _onRefreshClick(connectionId);
+  }, [connectionId, _onRefreshClick]);
+
   useTrackOnChange(
     (track: TrackFunction) => {
       track('Screen', { name: 'databases' }, connectionInfo);

packages/databases-collections/src/modules/databases.ts

@@ -85,9 +85,11 @@ export const databasesChanged = (instance: MongoDBInstance) => ({
   databases: instance.databases.toJSON(),
 });
 
-export const refreshDatabases = (): DatabasesThunkAction<void> => {
+export const refreshDatabases = (
+  connectionId: string
+): DatabasesThunkAction<void> => {
   return (_dispatch, _getState, { globalAppRegistry }) => {
-    globalAppRegistry.emit('refresh-databases');
+    globalAppRegistry.emit('refresh-databases', { connectionId });
   };
 };