Connection modal typeahead enhancements

opendatahub-io · Sep 26, 2024 · 5959ccd · 5959ccd
1 parent 264152e
commit 5959ccd
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 27 deletions.
diff --git a/frontend/src/concepts/connectionTypes/ConnectionTypeForm.tsx b/frontend/src/concepts/connectionTypes/ConnectionTypeForm.tsx
@@ -1,11 +1,21 @@
 import * as React from 'react';
-import { Form, FormGroup, FormSection, MenuToggleStatus, Title } from '@patternfly/react-core';
+import {
+  Flex,
+  FlexItem,
+  Form,
+  FormGroup,
+  FormSection,
+  MenuToggleStatus,
+  Title,
+  Truncate,
+} from '@patternfly/react-core';
 import ConnectionTypeFormFields from '~/concepts/connectionTypes/fields/ConnectionTypeFormFields';
 import {
   ConnectionTypeConfigMapObj,
   ConnectionTypeValueType,
 } from '~/concepts/connectionTypes/types';
 import {
+  getDescriptionFromK8sResource,
   getDisplayNameFromK8sResource,
   getResourceNameFromK8sResource,
 } from '~/concepts/k8s/utils';
@@ -17,6 +27,48 @@ import {
 } from '~/concepts/k8s/K8sNameDescriptionField/types';
 import { ConnectionTypeDetailsHelperText } from './ConnectionTypeDetailsHelperText';
 
+const getConnectionTypeSelectOptions = (
+  isPreview: boolean,
+  selectedConnectionType?: ConnectionTypeConfigMapObj,
+  connectionTypes?: ConnectionTypeConfigMapObj[],
+): TypeaheadSelectOption[] => {
+  if (isPreview && selectedConnectionType?.metadata.annotations?.['openshift.io/display-name']) {
+    return [
+      {
+        value: '',
+        content: selectedConnectionType.metadata.annotations['openshift.io/display-name'],
+        isSelected: true,
+      },
+    ];
+  }
+  if (!isPreview && connectionTypes) {
+    return connectionTypes.map((t) => ({
+      value: getResourceNameFromK8sResource(t),
+      content: getDisplayNameFromK8sResource(t),
+      description: (
+        <Flex direction={{ default: 'column' }} rowGap={{ default: 'rowGapNone' }}>
+          {getDescriptionFromK8sResource(t) && (
+            <FlexItem>
+              <Truncate content={getDescriptionFromK8sResource(t)} />
+            </FlexItem>
+          )}
+          {t.data?.category?.length && (
+            <FlexItem>
+              <Truncate content={`Category: ${t.data.category.join(', ')}`} />
+            </FlexItem>
+          )}
+        </Flex>
+      ),
+      data: `${getDescriptionFromK8sResource(t)} ${t.data?.category?.join(' ')}`,
+      isSelected:
+        !!selectedConnectionType &&
+        getResourceNameFromK8sResource(t) ===
+          getResourceNameFromK8sResource(selectedConnectionType),
+    }));
+  }
+  return [];
+};
+
 type Props = Pick<
   React.ComponentProps<typeof ConnectionTypeFormFields>,
   'onChange' | 'onValidate'
@@ -45,25 +97,10 @@ const ConnectionTypeForm: React.FC<Props> = ({
   onValidate,
   disableTypeSelection,
 }) => {
-  const options: TypeaheadSelectOption[] = React.useMemo(() => {
-    if (isPreview && connectionType?.metadata.annotations?.['openshift.io/display-name']) {
-      return [
-        {
-          value: '',
-          content: connectionType.metadata.annotations['openshift.io/display-name'],
-          isSelected: true,
-        },
-      ];
-    }
-    if (!isPreview && connectionTypes) {
-      return connectionTypes.map((t) => ({
-        value: getResourceNameFromK8sResource(t),
-        content: getDisplayNameFromK8sResource(t),
-        isSelected: t.metadata.name === connectionType?.metadata.name,
-      }));
-    }
-    return [];
-  }, [isPreview, connectionType?.metadata, connectionTypes]);
+  const options: TypeaheadSelectOption[] = React.useMemo(
+    () => getConnectionTypeSelectOptions(isPreview, connectionType, connectionTypes),
+    [isPreview, connectionType, connectionTypes],
+  );
 
   return (
     <Form>
@@ -86,6 +123,15 @@ const ConnectionTypeForm: React.FC<Props> = ({
               ? { status: MenuToggleStatus.danger }
               : undefined
           }
+          isScrollable
+          popperProps={{ maxWidth: 'trigger' }}
+          filterFunction={(filterValue: string, filterOptions: TypeaheadSelectOption[]) =>
+            filterOptions.filter(
+              (o) =>
+                String(o.content).toLowerCase().includes(filterValue.toLowerCase()) ||
+                String(o.data).toLowerCase().includes(filterValue.toLowerCase()),
+            )
+          }
         />
         {connectionType && (
           <ConnectionTypeDetailsHelperText connectionType={connectionType} isPreview={isPreview} />

diff --git a/...d/src/pages/projects/screens/detail/connections/__tests__/ManageConnectionsModal.spec.tsx b/...d/src/pages/projects/screens/detail/connections/__tests__/ManageConnectionsModal.spec.tsx
@@ -87,12 +87,12 @@ describe('Add connection modal', () => {
     await act(async () => {
       screen.getByRole('button', { name: 'Typeahead menu toggle' }).click();
     });
-    expect(screen.getByRole('option', { name: 'type one' })).toBeTruthy();
-    expect(screen.getByRole('option', { name: 'type two' })).toBeTruthy();
-    expect(screen.queryByRole('option', { name: 'type three disabled' })).toBeFalsy();
+    expect(screen.getByRole('option', { name: /type one/ })).toBeTruthy();
+    expect(screen.getByRole('option', { name: /type two/ })).toBeTruthy();
+    expect(screen.queryByRole('option', { name: /type three disabled/ })).toBeFalsy();
 
     await act(async () => {
-      screen.getByRole('option', { name: 'type one' }).click();
+      screen.getByRole('option', { name: /type one/ }).click();
     });
     expect(screen.getByRole('combobox')).toHaveValue('type one');
     expect(screen.getByRole('textbox', { name: 'Connection name' })).toBeVisible();
@@ -294,7 +294,7 @@ describe('Add connection modal', () => {
       screen.getByRole('button', { name: 'Typeahead menu toggle' }).click();
     });
     await act(async () => {
-      screen.getByRole('option', { name: 'type one' }).click();
+      screen.getByRole('option', { name: /type one/ }).click();
     });
     await act(async () => {
       fireEvent.change(screen.getByRole('textbox', { name: 'Connection name' }), {
@@ -319,7 +319,7 @@ describe('Add connection modal', () => {
       screen.getByRole('button', { name: 'Typeahead menu toggle' }).click();
     });
     await act(async () => {
-      screen.getByRole('option', { name: 'type two' }).click();
+      screen.getByRole('option', { name: /type two/ }).click();
     });
     expect(screen.getByRole('textbox', { name: 'Connection name' })).toHaveValue(
       'connection one name',
@@ -333,7 +333,7 @@ describe('Add connection modal', () => {
       screen.getByRole('button', { name: 'Typeahead menu toggle' }).click();
     });
     await act(async () => {
-      screen.getByRole('option', { name: 'type one' }).click();
+      screen.getByRole('option', { name: /type one/ }).click();
     });
     expect(screen.getByRole('textbox', { name: 'Connection name' })).toHaveValue(
       'connection one name',