chore(data-modeling): replace select with combobox so that users can search the options; sort connections by status COMPASS-9410

packages/compass-data-modeling/src/components/new-diagram-form.spec.tsx

@@ -11,6 +11,10 @@ import { changeName, createNewDiagram } from '../store/generate-diagram-wizard';
 import { renderWithStore } from '../../test/setup-store';
 import type { DataModelingStore } from '../../test/setup-store';
 
+function getComboboxByTestId(testId: string) {
+  return within(screen.getByTestId(testId)).getByRole('combobox');
+}
+
 describe('NewDiagramForm', function () {
   context('enter-name step', function () {
     let store: DataModelingStore;
@@ -87,7 +91,7 @@ describe('NewDiagramForm', function () {
         );
       }
 
-      userEvent.click(screen.getByTestId('new-diagram-connection-selector'));
+      userEvent.click(getComboboxByTestId('new-diagram-connection-selector'));
       expect(screen.getByText('Conn1')).to.exist;
       expect(screen.getByText('Conn2')).to.exist;
 
@@ -143,7 +147,7 @@ describe('NewDiagramForm', function () {
         );
       }
 
-      userEvent.click(screen.getByTestId('new-diagram-connection-selector'));
+      userEvent.click(getComboboxByTestId('new-diagram-connection-selector'));
       userEvent.click(screen.getByText('Conn2'));
       userEvent.click(
         screen.getByRole('button', {
@@ -176,7 +180,7 @@ describe('NewDiagramForm', function () {
 
       {
         // Navigate to select db
-        userEvent.click(screen.getByTestId('new-diagram-connection-selector'));
+        userEvent.click(getComboboxByTestId('new-diagram-connection-selector'));
         userEvent.click(screen.getByText('Conn2'));
         userEvent.click(
           screen.getByRole('button', {
@@ -190,7 +194,7 @@ describe('NewDiagramForm', function () {
         });
       }
 
-      userEvent.click(screen.getByTestId('new-diagram-database-selector'));
+      userEvent.click(getComboboxByTestId('new-diagram-database-selector'));
       expect(screen.getByText('berlin')).to.exist;
       expect(screen.getByText('sample_airbnb')).to.exist;
 
@@ -253,7 +257,7 @@ describe('NewDiagramForm', function () {
         );
       }
 
-      userEvent.click(screen.getByTestId('new-diagram-connection-selector'));
+      userEvent.click(getComboboxByTestId('new-diagram-connection-selector'));
       userEvent.click(screen.getByText('Conn2'));
       userEvent.click(
         screen.getByRole('button', {
@@ -293,7 +297,7 @@ describe('NewDiagramForm', function () {
 
       {
         // Navigate to select db
-        userEvent.click(screen.getByTestId('new-diagram-connection-selector'));
+        userEvent.click(getComboboxByTestId('new-diagram-connection-selector'));
         userEvent.click(screen.getByText('Conn2'));
         userEvent.click(
           screen.getByRole('button', {
@@ -309,7 +313,7 @@ describe('NewDiagramForm', function () {
 
       {
         // Navigate to select colls
-        userEvent.click(screen.getByTestId('new-diagram-database-selector'));
+        userEvent.click(getComboboxByTestId('new-diagram-database-selector'));
         userEvent.click(screen.getByText('sample_airbnb'));
         userEvent.click(
           screen.getByRole('button', {
@@ -389,7 +393,7 @@ describe('NewDiagramForm', function () {
 
       {
         // Navigate to databases list
-        userEvent.click(screen.getByTestId('new-diagram-connection-selector'));
+        userEvent.click(getComboboxByTestId('new-diagram-connection-selector'));
         userEvent.click(screen.getByText('Conn2'));
         userEvent.click(
           screen.getByRole('button', {
@@ -405,7 +409,7 @@ describe('NewDiagramForm', function () {
 
       {
         // Navigate to collections
-        userEvent.click(screen.getByTestId('new-diagram-database-selector'));
+        userEvent.click(getComboboxByTestId('new-diagram-database-selector'));
         userEvent.click(screen.getByText('sample_airbnb'));
         userEvent.click(
           screen.getByRole('button', {

packages/compass-data-modeling/src/components/new-diagram-form.tsx

@@ -27,14 +27,14 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
-  Option,
-  Select,
   SelectList,
   spacing,
   SpinLoader,
   Body,
   TextInput,
   SearchInput,
+  Combobox,
+  ComboboxOption,
 } from '@mongodb-js/compass-components';
 
 const footerStyles = css({
@@ -238,6 +238,18 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
   onCollectionsSelectionConfirm,
 }) => {
   const connections = useConnectionsList();
+  const [activeConnections, otherConnections] = useMemo(() => {
+    const active = [];
+    const other = [];
+    for (const connection of connections) {
+      if (connection.status === 'connected') {
+        active.push(connection);
+      } else {
+        other.push(connection);
+      }
+    }
+    return [active, other];
+  }, [connections]);
   const {
     title,
     description,
@@ -333,22 +345,40 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
       case 'select-connection':
         return (
           <FormFieldContainer className={formContainerStyles}>
-            <Select
+            <Combobox
               label=""
               aria-label="Select connection"
               value={selectedConnectionId ?? ''}
               data-testid="new-diagram-connection-selector"
-              onChange={onConnectionSelect}
+              onChange={(connectionId) => {
+                if (connectionId) {
+                  onConnectionSelect(connectionId);
+                }
+              }}
+              clearable={false}
+              multiselect={false}
               disabled={connections.length === 0}
             >
-              {connections.map((connection) => {
+              {activeConnections.map((connection) => {
+                return (
+                  <ComboboxOption
+                    key={connection.info.id}
+                    value={connection.info.id}
+                    displayName={connection.title}
+                    description="Active"
+                  ></ComboboxOption>
+                );
+              })}
+              {otherConnections.map((connection) => {
                 return (
-                  <Option key={connection.info.id} value={connection.info.id}>
-                    {connection.title}
-                  </Option>
+                  <ComboboxOption
+                    key={connection.info.id}
+                    value={connection.info.id}
+                    displayName={connection.title}
+                  ></ComboboxOption>
                 );
               })}
-            </Select>
+            </Combobox>
             {connections.length === 0 && (
               <Banner variant="warning">
                 You do not have any connections, create a new connection first
@@ -359,21 +389,23 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
       case 'select-database':
         return (
           <FormFieldContainer>
-            <Select
+            <Combobox
               label=""
               aria-label="Select database"
               value={selectedDatabase ?? ''}
               data-testid="new-diagram-database-selector"
-              onChange={onDatabaseSelect}
+              onChange={(databaseName) => {
+                if (databaseName) {
+                  onDatabaseSelect(databaseName);
+                }
+              }}
+              clearable={false}
+              multiselect={false}
             >
               {databases.map((db) => {
-                return (
-                  <Option key={db} value={db}>
-                    {db}
-                  </Option>
-                );
+                return <ComboboxOption key={db} value={db}></ComboboxOption>;
               })}
-            </Select>
+            </Combobox>
           </FormFieldContainer>
         );
       case 'select-collections':
@@ -386,15 +418,17 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
         );
     }
   }, [
+    activeConnections,
     collections,
-    connections,
+    connections.length,
     currentStep,
     databases,
     diagramName,
     onCollectionsSelect,
     onConnectionSelect,
     onDatabaseSelect,
     onNameChange,
+    otherConnections,
     selectedCollections,
     selectedConnectionId,
     selectedDatabase,

packages/compass-e2e-tests/helpers/commands/select-option.ts

@@ -8,13 +8,19 @@ export async function selectOption(
   optionText: string
 ): Promise<void> {
   // click the field's button
-  const selectButton = browser.$(selector);
+  const selectButton = browser.$(`${selector}`);
   await selectButton.waitForDisplayed();
   await selectButton.click();
 
-  const controlledMenuId: string = await selectButton.getAttribute(
-    'aria-controls'
-  );
+  let controlledMenuId = await selectButton.getAttribute('aria-controls');
+  // In leafygreen combobox we usually not immediately targeting the element
+  // that controls the listbox, so if we haven't find it, try to look in the
+  // element we selected
+  if (!controlledMenuId) {
+    controlledMenuId = await selectButton
+      .$('[aria-controls]')
+      .getAttribute('aria-controls');
+  }
   // wait for the list to pop up
   const selectList = browser.$(`[id="${controlledMenuId}"][role="listbox"]`);
   await selectList.waitForDisplayed();