feat(collections): redirect to the new collection after creating it COMPASS-6019 (#3971)

* redirect to the new collection after creating it

* adding a collection also affects adding a database

* get back to the collection list for hte fle tests after creating collections

Author: lerouxb

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

@@ -259,8 +259,10 @@ store.onActivated = (appRegistry) => {
     store.refreshNamespaceStats(ns);
   });
 
-  appRegistry.on('collection-created', (ns) => {
-    store.refreshNamespace(ns);
+  appRegistry.on('collection-created', async({ ns, database }) => {
+    store.refreshNamespace({ ns, database });
+    const metadata = await store.fetchCollectionMetadata(ns);
+    appRegistry.emit('select-namespace', metadata);
   });
 
   appRegistry.on('collections-list-select-collection', async({ ns }) => {

packages/compass-e2e-tests/tests/database-collections-tab.test.ts

@@ -97,6 +97,8 @@ describe('Database collections tab', function () {
       'add-collection-modal-basic.png'
     );
 
+    await browser.navigateToDatabaseTab('test', 'Collections');
+
     const selector = Selectors.collectionCard('test', collectionName);
     await browser.scrollToVirtualItem(
       Selectors.CollectionsGrid,
@@ -146,6 +148,8 @@ describe('Database collections tab', function () {
       'add-collection-modal-capped.png'
     );
 
+    await browser.navigateToDatabaseTab('test', 'Collections');
+
     const selector = Selectors.collectionCard('test', collectionName);
     await browser.scrollToVirtualItem(
       Selectors.CollectionsGrid,
@@ -182,6 +186,8 @@ describe('Database collections tab', function () {
       'add-collection-modal-custom-collation.png'
     );
 
+    await browser.navigateToDatabaseTab('test', 'Collections');
+
     const selector = Selectors.collectionCard('test', collectionName);
     await browser.scrollToVirtualItem(
       Selectors.CollectionsGrid,
@@ -219,6 +225,8 @@ describe('Database collections tab', function () {
       'add-collection-modal-timeseries.png'
     );
 
+    await browser.navigateToDatabaseTab('test', 'Collections');
+
     const selector = Selectors.collectionCard('test', collectionName);
     await browser.scrollToVirtualItem(
       Selectors.CollectionsGrid,
@@ -255,6 +263,8 @@ describe('Database collections tab', function () {
       'add-collection-modal-clustered.png'
     );
 
+    await browser.navigateToDatabaseTab('test', 'Collections');
+
     const selector = Selectors.collectionCard('test', collectionName);
     await browser.scrollToVirtualItem(
       Selectors.CollectionsGrid,

packages/compass-e2e-tests/tests/in-use-encryption.test.ts

@@ -199,6 +199,8 @@ describe('FLE2', function () {
           'add-collection-modal-encryptedfields.png'
         );
 
+        await browser.navigateToDatabaseTab(databaseName, 'Collections');
+
         const collectionListFLE2BadgeElement = await browser.$(
           Selectors.CollectionListFLE2Badge
         );
@@ -297,6 +299,8 @@ describe('FLE2', function () {
         await browser.clickVisible(Selectors.DatabaseCreateCollectionButton);
         await browser.addCollection(collectionName);
 
+        await browser.navigateToDatabaseTab(databaseName, 'Collections');
+
         const selector = Selectors.collectionCard(databaseName, collectionName);
         await browser.scrollToVirtualItem(
           Selectors.CollectionsGrid,

packages/compass-e2e-tests/tests/instance-databases-tab.test.ts

@@ -95,6 +95,8 @@ describe('Instance databases tab', function () {
       'add-database-modal-basic.png'
     );
 
+    await browser.navigateToInstanceTab('Databases');
+
     const selector = Selectors.databaseCard(dbName);
     await browser.scrollToVirtualItem(
       Selectors.DatabasesTable,

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

@@ -121,6 +121,16 @@ describe('Instance sidebar', function () {
     await browser.clickVisible(Selectors.SidebarCreateDatabaseButton);
 
     await browser.addDatabase(dbName, collectionName);
+
+    // the app should land on the collection's documents tab
+    const headerSelector = Selectors.collectionHeaderTitle(
+      dbName,
+      collectionName
+    );
+    await browser.$(headerSelector).waitForDisplayed();
+    const tabSelectedSelector = Selectors.collectionTab('Documents', true);
+    await browser.$(tabSelectedSelector).waitForDisplayed();
+
     await browser.clickVisible(Selectors.sidebarDatabase(dbName));
 
     // wait for it to appear
@@ -160,6 +170,15 @@ describe('Instance sidebar', function () {
 
     await browser.addCollection(collectionName);
 
+    // the app should land on the collection's documents tab
+    const headerSelector = Selectors.collectionHeaderTitle(
+      dbName,
+      collectionName
+    );
+    await browser.$(headerSelector).waitForDisplayed();
+    const tabSelectedSelector = Selectors.collectionTab('Documents', true);
+    await browser.$(tabSelectedSelector).waitForDisplayed();
+
     const collectionSelector = Selectors.sidebarCollection(
       dbName,
       collectionName