From 0b798a8557b60b739a54e46c1006a403b646c81e Mon Sep 17 00:00:00 2001 From: manaswinidas Date: Wed, 10 Apr 2024 19:10:15 +0530 Subject: [PATCH] Fixes Image selection dropdown scroll issue --- .../cypress/cypress/pages/modelServing.ts | 2 +- .../cypress/support/commands/application.ts | 2 +- .../src/components/SimpleDropdownSelect.tsx | 57 +++++++++++-------- .../dashboard/DashboardSearchField.tsx | 2 +- .../compareRuns/CompareRunTableToolbar.tsx | 2 +- .../contentSections/TriggerTypeField.tsx | 2 +- .../pipelineRun/runLogs/LogsTab.tsx | 2 +- .../pipelineRun/PipelineRunTableToolbar.tsx | 2 +- .../manage/tolerations/TolerationFields.tsx | 4 +- ...ustomServingRuntimeAPIProtocolSelector.tsx | 2 +- .../CustomServingRuntimePlatformsSelector.tsx | 2 +- .../ServingRuntimeTemplateSection.tsx | 1 + .../imageSelector/ImageStreamSelector.tsx | 3 +- 13 files changed, 47 insertions(+), 36 deletions(-) diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts b/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts index b1ed5d6079..44f0d9a024 100644 --- 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 index 2d9b3b5bd4..923b57c541 100644 --- 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 index ccb06b8280..567335bfe5 100644 --- 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, 'isOpen' | 'toggle' | 'dropdownItems' | 'onChange'>; const SimpleDropdownSelect: React.FC = ({ @@ -29,6 +29,7 @@ const SimpleDropdownSelect: React.FC = ({ value, isFullWidth, icon, + dataTestId, ...props }) => { const [open, setOpen] = React.useState(false); @@ -39,32 +40,40 @@ const SimpleDropdownSelect: React.FC = ({ setOpen(false)} + onOpenChange={(isOpen: boolean) => setOpen(isOpen)} + toggle={(toggleRef) => ( + setOpen(!open)} icon={icon} + isFullWidth={isFullWidth} + onClick={() => setOpen(!open)} + isExpanded={open} > - - } - dropdownItems={[...options] - .sort((a, b) => (a.isPlaceholder === b.isPlaceholder ? 0 : a.isPlaceholder ? -1 : 1)) - .map(({ key, dropdownLabel, label, description, isPlaceholder }) => ( - { - onChange(key, !!isPlaceholder); - setOpen(false); - }} - > - {dropdownLabel ?? label} - - ))} - /> + + )} + shouldFocusToggleOnSelect + > + + {[...options] + .sort((a, b) => (a.isPlaceholder === b.isPlaceholder ? 0 : a.isPlaceholder ? -1 : 1)) + .map(({ key, dropdownLabel, label, description, isPlaceholder }) => ( + { + onChange(key, !!isPlaceholder); + setOpen(false); + }} + > + {dropdownLabel ?? label} + + ))} + + ); }; diff --git a/frontend/src/concepts/dashboard/DashboardSearchField.tsx b/frontend/src/concepts/dashboard/DashboardSearchField.tsx index 70e200c223..18d45e1da6 100644 --- a/frontend/src/concepts/dashboard/DashboardSearchField.tsx +++ b/frontend/src/concepts/dashboard/DashboardSearchField.tsx @@ -41,7 +41,7 @@ const DashboardSearchField: React.FC = ({ ({ key, label: key, diff --git a/frontend/src/concepts/pipelines/content/compareRuns/CompareRunTableToolbar.tsx b/frontend/src/concepts/pipelines/content/compareRuns/CompareRunTableToolbar.tsx index e6869c129a..fa617c215a 100644 --- 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 = ({ ...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 index 39e91838bb..4078328a03 100644 --- 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 = ({ data, onChange }) = = ( {!showSearchbar && ( ({ 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 index bb2f56f7fe..6d70fd9152 100644 --- 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 = ({ 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 index 35b302a734..47b0012a07 100644 --- 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 = ({ toleration, onUpdat options={operatorDropdownOptions} value={toleration.operator || ''} onChange={(key) => handleFieldUpdate('operator', key)} - data-testid="toleration-operator-select" + dataTestId="toleration-operator-select" /> @@ -51,7 +51,7 @@ const TolerationFields: React.FC = ({ toleration, onUpdat options={effectDropdownOptions} value={toleration.effect || ''} onChange={(key) => handleFieldUpdate('effect', key)} - data-testid="toleration-effect-select" + dataTestId="toleration-effect-select" /> diff --git a/frontend/src/pages/modelServing/customServingRuntimes/CustomServingRuntimeAPIProtocolSelector.tsx b/frontend/src/pages/modelServing/customServingRuntimes/CustomServingRuntimeAPIProtocolSelector.tsx index 447a192f64..2b9d485279 100644 --- a/frontend/src/pages/modelServing/customServingRuntimes/CustomServingRuntimeAPIProtocolSelector.tsx +++ b/frontend/src/pages/modelServing/customServingRuntimes/CustomServingRuntimeAPIProtocolSelector.tsx @@ -44,7 +44,7 @@ const CustomServingRuntimeAPIProtocolSelector: React.FC< isRequired > = ({ return (