chore(e2e): fix E2E test for adding a collection with a custom collat…

…ion COMPASS-7569 (#5323)

* make sure we scroll the add namespace error banner into view

* wait after each collation field before going to the next one

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

@@ -79,6 +79,9 @@ export async function addCollection(
       const span = await menu.$(`span=${value.toString()}`);
       await span.waitForDisplayed();
       await span.click();
+
+      // make sure the menu disappears before moving on to the next thing
+      await menu.waitForDisplayed({ reverse: true });
     }
 
     // scroll to the locale one so the screenshot will include it.

packages/databases-collections/src/components/create-namespace-modal.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, createRef } from 'react';
 import { connect } from 'react-redux';
 import {
   FormModal,
@@ -51,6 +51,8 @@ class CreateDatabaseModal extends PureComponent<
     data: {} as Partial<CreateNamespaceOptions>,
   };
 
+  errorBannerRef = createRef<HTMLDivElement>();
+
   /**
    * Called when the error message close icon is clicked.
    */
@@ -76,9 +78,11 @@ class CreateDatabaseModal extends PureComponent<
     }
 
     return (
-      <Banner variant="danger" dismissible onClose={this.props.clearError}>
-        {this.props.error.message}
-      </Banner>
+      <div ref={this.errorBannerRef}>
+        <Banner variant="danger" dismissible onClose={this.props.clearError}>
+          {this.props.error.message}
+        </Banner>
+      </div>
     );
   }
 
@@ -137,6 +141,10 @@ class CreateDatabaseModal extends PureComponent<
       </FormModal>
     );
   }
+
+  componentDidUpdate() {
+    this.errorBannerRef.current?.scrollIntoView();
+  }
 }
 
 /**