Fixes Image selection dropdown scroll issue

opendatahub-io · Apr 12, 2024 · 0b798a8 · 0b798a8
1 parent 4fbe0f6
commit 0b798a8
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 36 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts b/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts
@@ -146,7 +146,7 @@ class ServingRuntimeModal extends Modal {
   }
 
   findServingRuntimeTemplateDropdown() {
-    return this.find().find('#serving-runtime-template-selection');
+    return this.find().findByTestId('serving-runtime-template-selection');
   }
 
   findModelRouteCheckbox() {

diff --git a/frontend/src/__tests__/cypress/cypress/support/commands/application.ts b/frontend/src/__tests__/cypress/cypress/support/commands/application.ts
@@ -115,7 +115,7 @@ Cypress.Commands.add('findDropdownItem', { prevSubject: 'element' }, (subject, n
     if ($el.find('[aria-expanded=false]').addBack().length) {
       cy.wrap($el).click();
     }
-    return cy.wrap($el).findByRole('menuitem', { name });
+    return cy.wrap($el).parent().findByRole('menuitem', { name });
   });
 });
 

diff --git a/frontend/src/components/SimpleDropdownSelect.tsx b/frontend/src/components/SimpleDropdownSelect.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Truncate } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
+import { Truncate, Dropdown, MenuToggle, DropdownList, DropdownItem } from '@patternfly/react-core';
 import './SimpleDropdownSelect.scss';
 
 export type SimpleDropdownOption = {
@@ -19,6 +18,7 @@ type SimpleDropdownProps = {
   isFullWidth?: boolean;
   isDisabled?: boolean;
   icon?: React.ReactNode;
+  dataTestId?: string;
 } & Omit<React.ComponentProps<typeof Dropdown>, 'isOpen' | 'toggle' | 'dropdownItems' | 'onChange'>;
 
 const SimpleDropdownSelect: React.FC<SimpleDropdownProps> = ({
@@ -29,6 +29,7 @@ const SimpleDropdownSelect: React.FC<SimpleDropdownProps> = ({
   value,
   isFullWidth,
   icon,
+  dataTestId,
   ...props
 }) => {
   const [open, setOpen] = React.useState(false);
@@ -39,32 +40,40 @@ const SimpleDropdownSelect: React.FC<SimpleDropdownProps> = ({
     <Dropdown
       {...props}
       isOpen={open}
-      className={isFullWidth ? 'full-width' : undefined}
-      toggle={
-        <DropdownToggle
+      onSelect={() => setOpen(false)}
+      onOpenChange={(isOpen: boolean) => setOpen(isOpen)}
+      toggle={(toggleRef) => (
+        <MenuToggle
+          data-testid={dataTestId}
+          ref={toggleRef}
           isDisabled={isDisabled}
-          className={isFullWidth ? 'full-width' : undefined}
-          onToggle={() => setOpen(!open)}
           icon={icon}
+          isFullWidth={isFullWidth}
+          onClick={() => setOpen(!open)}
+          isExpanded={open}
         >
           <Truncate content={selectedLabel} className="truncate-no-min-width" />
-        </DropdownToggle>
-      }
-      dropdownItems={[...options]
-        .sort((a, b) => (a.isPlaceholder === b.isPlaceholder ? 0 : a.isPlaceholder ? -1 : 1))
-        .map(({ key, dropdownLabel, label, description, isPlaceholder }) => (
-          <DropdownItem
-            key={key}
-            description={description}
-            onClick={() => {
-              onChange(key, !!isPlaceholder);
-              setOpen(false);
-            }}
-          >
-            {dropdownLabel ?? label}
-          </DropdownItem>
-        ))}
-    />
+        </MenuToggle>
+      )}
+      shouldFocusToggleOnSelect
+    >
+      <DropdownList>
+        {[...options]
+          .sort((a, b) => (a.isPlaceholder === b.isPlaceholder ? 0 : a.isPlaceholder ? -1 : 1))
+          .map(({ key, dropdownLabel, label, description, isPlaceholder }) => (
+            <DropdownItem
+              key={key}
+              description={description}
+              onClick={() => {
+                onChange(key, !!isPlaceholder);
+                setOpen(false);
+              }}
+            >
+              {dropdownLabel ?? label}
+            </DropdownItem>
+          ))}
+      </DropdownList>
+    </Dropdown>
   );
 };
 

diff --git a/frontend/src/concepts/dashboard/DashboardSearchField.tsx b/frontend/src/concepts/dashboard/DashboardSearchField.tsx
@@ -41,7 +41,7 @@ const DashboardSearchField: React.FC<DashboardSearchFieldProps> = ({
     <InputGroupItem>
       <SimpleDropdownSelect
         aria-label="Filter type"
-        data-testid="filter-dropdown-select"
+        dataTestId="filter-dropdown-select"
         options={types.map((key) => ({
           key,
           label: key,

diff --git a/frontend/src/concepts/pipelines/content/compareRuns/CompareRunTableToolbar.tsx b/frontend/src/concepts/pipelines/content/compareRuns/CompareRunTableToolbar.tsx
@@ -91,7 +91,7 @@ const CompareRunTableToolbar: React.FC<FilterProps> = ({ ...toolbarProps }) => {
               label: v,
             }))}
             onChange={(v) => onChange(v)}
-            data-testid="runtime-status-dropdown"
+            dataTestId="runtime-status-dropdown"
           />
         ),
       }}

diff --git a/frontend/src/concepts/pipelines/content/createRun/contentSections/TriggerTypeField.tsx b/frontend/src/concepts/pipelines/content/createRun/contentSections/TriggerTypeField.tsx
@@ -89,7 +89,7 @@ const TriggerTypeField: React.FC<TriggerTypeFieldProps> = ({ data, onChange }) =
       <StackItem>
         <FormGroup label="Trigger type">
           <SimpleDropdownSelect
-            data-testid="triggerTypeSelector"
+            dataTestId="triggerTypeSelector"
             isFullWidth
             options={[
               { key: ScheduledType.PERIODIC, label: 'Periodic' },

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx
@@ -243,7 +243,7 @@ const LogsTabForPodName: React.FC<{ podName: string; isFailedPod: boolean }> = (
                       {!showSearchbar && (
                         <ToolbarItem spacer={{ default: 'spacerSm' }} style={{ maxWidth: '200px' }}>
                           <SimpleDropdownSelect
-                            data-testid="logs-step-select"
+                            dataTestId="logs-step-select"
                             isDisabled={podStepStates.length <= 1}
                             options={podStepStates.map((podStepState) => ({
                               key: podStepState.stepName,

diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbar.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbar.tsx
@@ -95,7 +95,7 @@ const PipelineRunTableToolbar: React.FC<PipelineRunTableToolbarProps> = ({
               label: v,
             }))}
             onChange={(v) => onChange(v)}
-            data-testid="runtime-status-dropdown"
+            dataTestId="runtime-status-dropdown"
           />
         ),
       }}

diff --git a/frontend/src/pages/acceleratorProfiles/screens/manage/tolerations/TolerationFields.tsx b/frontend/src/pages/acceleratorProfiles/screens/manage/tolerations/TolerationFields.tsx
@@ -41,7 +41,7 @@ const TolerationFields: React.FC<TolerationFieldsProps> = ({ toleration, onUpdat
           options={operatorDropdownOptions}
           value={toleration.operator || ''}
           onChange={(key) => handleFieldUpdate('operator', key)}
-          data-testid="toleration-operator-select"
+          dataTestId="toleration-operator-select"
         />
       </FormGroup>
 
@@ -51,7 +51,7 @@ const TolerationFields: React.FC<TolerationFieldsProps> = ({ toleration, onUpdat
           options={effectDropdownOptions}
           value={toleration.effect || ''}
           onChange={(key) => handleFieldUpdate('effect', key)}
-          data-testid="toleration-effect-select"
+          dataTestId="toleration-effect-select"
         />
       </FormGroup>
 

diff --git a/.../src/pages/modelServing/customServingRuntimes/CustomServingRuntimeAPIProtocolSelector.tsx b/.../src/pages/modelServing/customServingRuntimes/CustomServingRuntimeAPIProtocolSelector.tsx
@@ -44,7 +44,7 @@ const CustomServingRuntimeAPIProtocolSelector: React.FC<
       isRequired
     >
       <SimpleDropdownSelect
-        data-testid="custom-serving-api-protocol-selection"
+        dataTestId="custom-serving-api-protocol-selection"
         aria-label="Select a model serving api protocol"
         placeholder="Select a value"
         isDisabled={isOnlyModelMesh}

diff --git a/...nd/src/pages/modelServing/customServingRuntimes/CustomServingRuntimePlatformsSelector.tsx b/...nd/src/pages/modelServing/customServingRuntimes/CustomServingRuntimePlatformsSelector.tsx
@@ -44,7 +44,7 @@ const CustomServingRuntimePlatformsSelector: React.FC<
       isRequired
     >
       <SimpleDropdownSelect
-        data-testid="custom-serving-runtime-selection"
+        dataTestId="custom-serving-runtime-selection"
         aria-label="Select a model serving runtime platform"
         placeholder="Select a value"
         options={options}

diff --git a/...pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTemplateSection.tsx b/...pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTemplateSection.tsx
@@ -64,6 +64,7 @@ const ServingRuntimeTemplateSection: React.FC<ServingRuntimeTemplateSectionProps
         isFullWidth
         isDisabled={isEditing || filteredTemplates.length === 0}
         id="serving-runtime-template-selection"
+        dataTestId="serving-runtime-template-selection"
         aria-label="Select a template"
         options={options}
         placeholder={

diff --git a/frontend/src/pages/projects/screens/spawner/imageSelector/ImageStreamSelector.tsx b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageStreamSelector.tsx
@@ -52,9 +52,10 @@ const ImageStreamSelector: React.FC<ImageStreamSelectorProps> = ({
   return (
     <FormGroup isRequired label="Image selection" fieldId="workbench-image-stream-selection">
       <SimpleDropdownSelect
+        isScrollable
         isFullWidth
         id="workbench-image-stream-selection"
-        data-testid="workbench-image-stream-selection"
+        dataTestId="workbench-image-stream-selection"
         aria-label="Select an image"
         options={options}
         placeholder="Select one"