diff --git a/libs/ui-lib-tests/cypress/fixtures/infra-envs/openshift-versions.ts b/libs/ui-lib-tests/cypress/fixtures/infra-envs/openshift-versions.ts index d80746ef7d..85bbc026e6 100644 --- a/libs/ui-lib-tests/cypress/fixtures/infra-envs/openshift-versions.ts +++ b/libs/ui-lib-tests/cypress/fixtures/infra-envs/openshift-versions.ts @@ -9,6 +9,7 @@ export const x86 = 'x86_64'; export const arm64 = 'arm64'; export const s390x = 's390x'; export const ppc64le = 'ppc64le'; +export const arm64Text = 'Arm64'; const versions: Record = { '4.9': { diff --git a/libs/ui-lib-tests/cypress/integration/create-sno/0-create-cluster.cy.ts b/libs/ui-lib-tests/cypress/integration/create-sno/0-create-cluster.cy.ts index 35ccd9b0d3..52157ec4e7 100644 --- a/libs/ui-lib-tests/cypress/integration/create-sno/0-create-cluster.cy.ts +++ b/libs/ui-lib-tests/cypress/integration/create-sno/0-create-cluster.cy.ts @@ -33,7 +33,6 @@ describe(`Assisted Installer SNO Cluster Installation`, () => { clusterDetailsPage.inputBaseDnsDomain(); clusterDetailsPage.inputOpenshiftVersion('4.18'); - clusterDetailsPage.openControlPlaneNodesDropdown(); clusterDetailsPage.selectControlPlaneNodeOption('1'); clusterDetailsPage.inputPullSecret(); diff --git a/libs/ui-lib-tests/cypress/integration/day-2/2-adding-hosts.cy.ts b/libs/ui-lib-tests/cypress/integration/day-2/2-adding-hosts.cy.ts index 0c61430762..71579957ec 100644 --- a/libs/ui-lib-tests/cypress/integration/day-2/2-adding-hosts.cy.ts +++ b/libs/ui-lib-tests/cypress/integration/day-2/2-adding-hosts.cy.ts @@ -44,8 +44,7 @@ describe(`Assisted Installer Day2 flow`, () => { it('Can select a different CPU architecture and move next', () => { cy.findByRole('button', { name: 'Add hosts' }).click(); - clusterDetailsPage.openCpuArchitectureDropdown(); - clusterDetailsPage.selectCpuArchitecture('arm64'); + clusterDetailsPage.selectCpuArchitecture('Arm64'); commonActions.toNextDay2StepAfter('Cluster details'); diff --git a/libs/ui-lib-tests/cypress/integration/ui-behaviour/cluster-creation.cy.ts b/libs/ui-lib-tests/cypress/integration/ui-behaviour/cluster-creation.cy.ts index 379dd6fd49..523d09d4eb 100644 --- a/libs/ui-lib-tests/cypress/integration/ui-behaviour/cluster-creation.cy.ts +++ b/libs/ui-lib-tests/cypress/integration/ui-behaviour/cluster-creation.cy.ts @@ -31,7 +31,7 @@ describe('Assisted Installer UI behaviour - cluster creation', () => { .each((versionItem, index) => { //TODO: test adaptations for new feature about custom OCP releases if (index < 7) { - expect(versionItem.parent()).to.have.id(expectedVersionIds[index]); + expect(versionItem).to.have.id(expectedVersionIds[index]); } }); }); @@ -52,13 +52,15 @@ describe('Assisted Installer UI behaviour - cluster creation', () => { clusterDetailsPage.openCpuArchitectureDropdown(); clusterDetailsPage.CpuArchitectureNotExists(versionsFixtures.arm64); clusterDetailsPage.CpuArchitectureExists(versionsFixtures.x86); + clusterDetailsPage.openCpuArchitectureDropdown(); clusterDetailsPage.selectCpuArchitecture(versionsFixtures.x86); clusterDetailsPage.inputOpenshiftVersion(versionsFixtures.getVersionWithArmSupport()); clusterDetailsPage.openCpuArchitectureDropdown(); - clusterDetailsPage.CpuArchitectureExists(versionsFixtures.arm64); + clusterDetailsPage.CpuArchitectureExists(versionsFixtures.arm64Text); clusterDetailsPage.CpuArchitectureExists(versionsFixtures.x86); - clusterDetailsPage.selectCpuArchitecture(versionsFixtures.arm64); + clusterDetailsPage.openCpuArchitectureDropdown(); + clusterDetailsPage.selectCpuArchitecture(versionsFixtures.arm64Text); }); }); }); diff --git a/libs/ui-lib-tests/cypress/integration/use-cases/create-cluster/with-external-partner-integrations.cy.ts b/libs/ui-lib-tests/cypress/integration/use-cases/create-cluster/with-external-partner-integrations.cy.ts index 17994876e8..c5f2b0af82 100644 --- a/libs/ui-lib-tests/cypress/integration/use-cases/create-cluster/with-external-partner-integrations.cy.ts +++ b/libs/ui-lib-tests/cypress/integration/use-cases/create-cluster/with-external-partner-integrations.cy.ts @@ -25,7 +25,7 @@ describe('Create a new cluster with external partner integrations', () => { cy.wait(1000); ClusterDetailsForm.externalPartnerIntegrationsField.findDropdownItems().each((item) => { // Get the expected values from the externalPlatformTypes object - const platformType = item.parent().attr('id'); + const platformType = item.attr('id'); const { label, href } = externalPlatformTypes[platformType]; // Assert the label @@ -88,7 +88,7 @@ describe('Create a new cluster with external partner integrations', () => { ClusterDetailsForm.openshiftVersionField.selectVersion('4.14'); ClusterDetailsForm.cpuArchitectureField.selectCpuArchitecture('s390x'); ClusterDetailsForm.externalPartnerIntegrationsField - .findDropdownToggle() + .findExternalPartnerIntegrationsField() .should('be.disabled'); }); @@ -96,7 +96,7 @@ describe('Create a new cluster with external partner integrations', () => { ClusterDetailsForm.openshiftVersionField.selectVersion('4.10'); ClusterDetailsForm.externalPartnerIntegrationsField .findDropdownItem('Nutanix') - .should('have.class', 'pf-m-aria-disabled'); + .should('have.attr', 'aria-disabled', 'true'); }); it('Validate that Nutanix option is disabled when we choose SNO option', () => { @@ -104,24 +104,28 @@ describe('Create a new cluster with external partner integrations', () => { ClusterDetailsForm.controlPlaneNodesField.selectControlPlaneNode(1); ClusterDetailsForm.externalPartnerIntegrationsField .findDropdownItem('Nutanix') - .should('have.class', 'pf-m-aria-disabled'); + .should('have.attr', 'aria-disabled', 'true'); }); it('Validate that all dropdown is disabled in case we choose IBM/Z(s390x) architecture + SNO', () => { ClusterDetailsForm.openshiftVersionField.selectVersion('4.18'); ClusterDetailsForm.controlPlaneNodesField.selectControlPlaneNode(1); ClusterDetailsForm.cpuArchitectureField.selectCpuArchitecture('s390x'); ClusterDetailsForm.externalPartnerIntegrationsField - .findDropdownToggle() + .findExternalPartnerIntegrationsField() .should('be.disabled'); }); it('Validate that for OCP version 4.15 we show Technology Preview badge in OCI option', () => { ClusterDetailsForm.openshiftVersionField.selectVersion('4.15'); - ClusterDetailsForm.externalPartnerIntegrationsField.findDropdown().click(); + ClusterDetailsForm.externalPartnerIntegrationsField + .findExternalPartnerIntegrationsField() + .click(); ClusterDetailsForm.externalPartnerIntegrationsField.checkPlatformTechSupportLevel(); }); it('Validate that for OCP version 4.14 we show Developer Preview badge in OCI option', () => { ClusterDetailsForm.openshiftVersionField.selectVersion('4.14'); - ClusterDetailsForm.externalPartnerIntegrationsField.findDropdown().click(); + ClusterDetailsForm.externalPartnerIntegrationsField + .findExternalPartnerIntegrationsField() + .click(); ClusterDetailsForm.externalPartnerIntegrationsField.checkPlatformDevSupportLevel(); }); }); diff --git a/libs/ui-lib-tests/cypress/views/bareMetalDiscovery.ts b/libs/ui-lib-tests/cypress/views/bareMetalDiscovery.ts index 26f2a0cc00..39cb6f9266 100644 --- a/libs/ui-lib-tests/cypress/views/bareMetalDiscovery.ts +++ b/libs/ui-lib-tests/cypress/views/bareMetalDiscovery.ts @@ -70,10 +70,11 @@ export const bareMetalDiscoveryPage = { cy.get('li[role][id^=button-delete-host]').should('not.exist'); }, massRenameHosts: (prefix) => { - cy.get('.table-toolbar .pf-v5-c-toolbar__item:first').click(); - cy.get('.table-toolbar .pf-v5-c-toolbar__item:last').click(); - cy.get('ul[role="menu"]').within(() => { - cy.get('[role="menuitem"]') + cy.get('.table-toolbar .pf-v5-c-menu-toggle__controls:first').click(); + cy.get('#select-all').click(); + cy.get('.table-toolbar .pf-v5-c-menu-toggle__controls:last').click(); + cy.get('.pf-v5-c-menu__content:last').within(() => { + cy.get('.pf-v5-c-menu__item-text') .contains(Cypress.env('hostRowKebabMenuChangeHostnameText')) .click(); }); diff --git a/libs/ui-lib-tests/cypress/views/bareMetalDiscoveryIsoModal.ts b/libs/ui-lib-tests/cypress/views/bareMetalDiscoveryIsoModal.ts index 83355f57d2..43577912f0 100644 --- a/libs/ui-lib-tests/cypress/views/bareMetalDiscoveryIsoModal.ts +++ b/libs/ui-lib-tests/cypress/views/bareMetalDiscoveryIsoModal.ts @@ -92,13 +92,13 @@ export const bareMetalDiscoveryIsoModal = { return cy.get(Cypress.env('imageTypeFieldId')); }, openImageTypeDropdown: () => { - bareMetalDiscoveryIsoModal.getImageTypeField().find('button.pf-v5-c-dropdown__toggle').click(); + bareMetalDiscoveryIsoModal.getImageTypeField().click(); }, getImageTypeDropdown: () => { - return bareMetalDiscoveryIsoModal.getImageTypeField().find('.pf-v5-c-dropdown__menu'); + return cy.get(`${Cypress.env('imageTypeFieldId')}-dropdown`); }, getSelectedImageType: () => { - return bareMetalDiscoveryIsoModal.getImageTypeField().find('.pf-v5-c-dropdown__toggle-text'); + return bareMetalDiscoveryIsoModal.getImageTypeField().find('.pf-v5-c-menu-toggle__text'); }, selectImageType: (typeLabel: string) => { bareMetalDiscoveryIsoModal.openImageTypeDropdown(); diff --git a/libs/ui-lib-tests/cypress/views/clusterDetails.ts b/libs/ui-lib-tests/cypress/views/clusterDetails.ts index b00c436b5e..428141d933 100644 --- a/libs/ui-lib-tests/cypress/views/clusterDetails.ts +++ b/libs/ui-lib-tests/cypress/views/clusterDetails.ts @@ -11,13 +11,13 @@ export const clusterDetailsPage = { return cy.get(Cypress.env('openshiftVersionFieldId')); }, openOpenshiftVersionDropdown: () => { - clusterDetailsPage.getOpenshiftVersionField().find('button.pf-v5-c-dropdown__toggle').click(); + clusterDetailsPage.getOpenshiftVersionField().click(); }, getOpenshiftVersionDropdown: () => { - return clusterDetailsPage.getOpenshiftVersionField().find('.pf-v5-c-dropdown__menu'); + return cy.get(`${Cypress.env('openshiftVersionFieldId')}-dropdown`); }, getSelectedOpenShiftVersion: () => { - return clusterDetailsPage.getOpenshiftVersionField().find('.pf-v5-c-dropdown__toggle-text'); + return clusterDetailsPage.getOpenshiftVersionField().find('.pf-v5-c-menu-toggle__text'); }, inputOpenshiftVersion: (version = Cypress.env('OPENSHIFT_VERSION')) => { clusterDetailsPage.openOpenshiftVersionDropdown(); @@ -61,20 +61,37 @@ export const clusterDetailsPage = { getStaticIpNetworkConfig: () => { return cy.get(Cypress.env('staticIpNetworkConfigFieldId')); }, + getCpuArchitectureField: () => { + return cy.get(Cypress.env('cpuArchitectureFieldId')); + }, openCpuArchitectureDropdown: () => { - cy.get(`${Cypress.env('cpuArchitectureFieldId')} > button.pf-v5-c-dropdown__toggle`).click(); + clusterDetailsPage.getCpuArchitectureField().click(); + }, + getCpuArchitectureDropdown: () => { + return cy.get(`${Cypress.env('cpuArchitectureFieldId')}-dropdown`); + }, + getSelectedCpuArchitecture: () => { + return clusterDetailsPage.getCpuArchitectureField().find('.pf-v5-c-menu-toggle__text'); }, selectCpuArchitecture: (cpuArchitecture) => { - cy.get(`ul.pf-v5-c-dropdown__menu li[id=${cpuArchitecture}] a`).click(); - cy.get(`${Cypress.env('cpuArchitectureFieldId')} .pf-v5-c-dropdown__toggle-text`) + clusterDetailsPage.openCpuArchitectureDropdown(); + clusterDetailsPage.getCpuArchitectureDropdown().within(() => { + cy.get('li').contains(cpuArchitecture).click(); + }); + clusterDetailsPage + .getSelectedCpuArchitecture() .invoke('text') .should('match', new RegExp(cpuArchitecture, 'i')); }, CpuArchitectureExists: (cpuArchitecture) => { - cy.get(`ul.pf-v5-c-dropdown__menu li[id=${cpuArchitecture}] a`).should('exist'); + clusterDetailsPage.getCpuArchitectureDropdown().within(() => { + cy.get('li').contains(cpuArchitecture).should('exist'); + }); }, CpuArchitectureNotExists: (cpuArchitecture) => { - cy.get(`ul.pf-v5-c-dropdown__menu li[id=${cpuArchitecture}] a`).should('not.exist'); + clusterDetailsPage.getCpuArchitectureDropdown().within(() => { + cy.get('li').contains(cpuArchitecture).should('not.exist'); + }); }, getSnoDisclaimer: () => { return cy.get(Cypress.env('checkboxSNODisclaimerFieldId')); @@ -136,12 +153,25 @@ export const clusterDetailsPage = { validateInputPullSecretFieldHelper: (msg) => { cy.get(Cypress.env('pullSecretFieldHelperErrorId')).should('contain', msg); }, + getControlPlaneNodesField: () => { + return cy.get(Cypress.env('controlPlaneNodesFieldId')); + }, openControlPlaneNodesDropdown: () => { - cy.get(`${Cypress.env('controlPlaneNodesFieldId')} > button.pf-v5-c-dropdown__toggle`).click(); + clusterDetailsPage.getControlPlaneNodesField().click(); + }, + getControlPlaneNodeDropdown: () => { + return cy.get(`${Cypress.env('controlPlaneNodesFieldId')}-dropdown`); + }, + getSelectedControlPlaneNode: () => { + return clusterDetailsPage.getControlPlaneNodesField().find('.pf-v5-c-menu-toggle__text'); }, selectControlPlaneNodeOption: (controlPlaneCount) => { - cy.get(`ul.pf-v5-c-dropdown__menu li[id=${controlPlaneCount}] a`).click(); - cy.get(`${Cypress.env('controlPlaneNodesFieldId')} .pf-v5-c-dropdown__toggle-text`) + clusterDetailsPage.openControlPlaneNodesDropdown(); + clusterDetailsPage.getControlPlaneNodeDropdown().within(() => { + cy.get('li').contains(controlPlaneCount).click(); + }); + clusterDetailsPage + .getSelectedControlPlaneNode() .invoke('text') .should('match', new RegExp(controlPlaneCount, 'i')); }, diff --git a/libs/ui-lib-tests/cypress/views/common.ts b/libs/ui-lib-tests/cypress/views/common.ts index de53603858..d77bb8bcef 100644 --- a/libs/ui-lib-tests/cypress/views/common.ts +++ b/libs/ui-lib-tests/cypress/views/common.ts @@ -75,7 +75,7 @@ export const commonActions = { }); }, verifyIsAtStep: (stepTitle: string) => { - cy.get('h2', { timeout: 2000 }).should('contain.text', stepTitle); + cy.get('h2', { timeout: 3000 }).should('contain.text', stepTitle); }, verifyIsAtSubStep: (subStepTitle: string) => { cy.get('h3', { timeout: 2000 }).should('contain.text', subStepTitle); diff --git a/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/ControlPlaneNodesField.ts b/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/ControlPlaneNodesField.ts index ba2eb8d8da..05f8b00790 100644 --- a/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/ControlPlaneNodesField.ts +++ b/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/ControlPlaneNodesField.ts @@ -14,12 +14,16 @@ export class ControlPlaneNodesField { return cy.get(ControlPlaneNodesField.alias).findByText(/number of control plane nodes/i); } + static findControlPlaneNodeField() { + return cy.get('#form-input-controlPlaneCount-field'); + } + static findDropdown() { - return cy.get(ControlPlaneNodesField.alias).find('#form-input-controlPlaneCount-field'); + return cy.get('#form-input-controlPlaneCount-field-dropdown'); } static selectControlPlaneNode(controlPlaneCount: number) { - ControlPlaneNodesField.findDropdown().click(); + ControlPlaneNodesField.findControlPlaneNodeField().click(); ControlPlaneNodesField.findDropdown().within(() => { cy.findByRole('menuitem', { name: new RegExp(`${controlPlaneCount}`, 'i') }).click(); }); diff --git a/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/CpuArchitectureField.ts b/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/CpuArchitectureField.ts index 54343fa611..1273cc2316 100644 --- a/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/CpuArchitectureField.ts +++ b/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/CpuArchitectureField.ts @@ -12,12 +12,16 @@ export class CpuArchitectureField { return cy.get(CpuArchitectureField.alias).findByText(/cpu architecture/i); } - static findDropdown() { + static findCpuArchitectureField() { return cy.get(CpuArchitectureField.alias).find('#form-input-cpuArchitecture-field'); } + static findDropdown() { + return cy.get(CpuArchitectureField.alias).find('#form-input-cpuArchitecture-field-dropdown'); + } + static selectCpuArchitecture(cpuArch: string) { - CpuArchitectureField.findDropdown().click(); + CpuArchitectureField.findCpuArchitectureField().click(); CpuArchitectureField.findDropdown().within(() => { cy.findByRole('menuitem', { name: new RegExp(`${cpuArch}`, 'i') }).click(); }); diff --git a/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/ExternalPartnerIntegrationsField.ts b/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/ExternalPartnerIntegrationsField.ts index 2bf94b8e02..b3f631eab6 100644 --- a/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/ExternalPartnerIntegrationsField.ts +++ b/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/ExternalPartnerIntegrationsField.ts @@ -15,34 +15,30 @@ export class ExternalPartnerIntegrationsField { .findByText(/integrate with external partner platforms/i); } - static findDropdown() { - return cy.get(ExternalPartnerIntegrationsField.alias).find('#form-input-platform-field'); + static findExternalPartnerIntegrationsField() { + return cy.get('#form-input-platform-field'); } - static findDropdownToggle() { - return ExternalPartnerIntegrationsField.findDropdown().find( - '[data-ouia-component-type="PF5/DropdownToggle"]', - ); + static findDropdown() { + return cy.get('#form-input-platform-field-dropdown'); } static findDropdownItemSelected(item: string) { - return ExternalPartnerIntegrationsField.findDropdown().findByText(item); + return ExternalPartnerIntegrationsField.findExternalPartnerIntegrationsField().findByText(item); } static findDropdownItems() { - ExternalPartnerIntegrationsField.findDropdown().click(); - return ExternalPartnerIntegrationsField.findDropdown().find( - '.pf-v5-c-dropdown__menu [role="menuitem"]', - ); + ExternalPartnerIntegrationsField.findExternalPartnerIntegrationsField().click(); + return ExternalPartnerIntegrationsField.findDropdown().find('.pf-v5-c-menu__item'); } static findDropdownItem(platform: string) { - ExternalPartnerIntegrationsField.findDropdown().click(); - return cy.findByRole('menuitem', { name: new RegExp(`${platform}`, 'i') }); + ExternalPartnerIntegrationsField.findExternalPartnerIntegrationsField().click(); + return ExternalPartnerIntegrationsField.findDropdown().find(`#${platform.toLowerCase()}`); } static selectPlatform(platform: string) { - ExternalPartnerIntegrationsField.findDropdown().click(); + ExternalPartnerIntegrationsField.findExternalPartnerIntegrationsField().click(); ExternalPartnerIntegrationsField.findDropdown().within(() => { cy.findByRole('menuitem', { name: new RegExp(`${platform}`, 'i') }).click(); }); diff --git a/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/OpenShiftVersionField.ts b/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/OpenShiftVersionField.ts index 9a8e4c4e4f..8f5e77df4d 100644 --- a/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/OpenShiftVersionField.ts +++ b/libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/OpenShiftVersionField.ts @@ -14,12 +14,16 @@ export class OpenShiftVersionField { return cy.get(OpenShiftVersionField.alias).findByText(/openshift version/i); } + static findOpenshiftVersionField() { + return cy.get('#form-input-openshiftVersion-field'); + } + static findDropdown() { - return cy.get(OpenShiftVersionField.alias).find('#form-input-openshiftVersion-field'); + return cy.get('#form-input-openshiftVersion-field-dropdown'); } static selectVersion(version: string) { - OpenShiftVersionField.findDropdown().click(); + OpenShiftVersionField.findOpenshiftVersionField().click(); OpenShiftVersionField.findDropdown().within(() => { cy.findByRole('menuitem', { name: new RegExp(`openshift ${version}`, 'i') }).click(); }); diff --git a/libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDeploymentHostsDiscovery.tsx b/libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDeploymentHostsDiscovery.tsx index c6f8a783d9..e1557fade4 100644 --- a/libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDeploymentHostsDiscovery.tsx +++ b/libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDeploymentHostsDiscovery.tsx @@ -82,12 +82,14 @@ const ClusterDeploymentHostsDiscovery: React.FC - + + + {t('ai:Information and warnings')} diff --git a/libs/ui-lib/lib/cim/components/ClusterDeployment/LabelsSelector.tsx b/libs/ui-lib/lib/cim/components/ClusterDeployment/LabelsSelector.tsx index 7ffc621e8a..5a3b3bf862 100644 --- a/libs/ui-lib/lib/cim/components/ClusterDeployment/LabelsSelector.tsx +++ b/libs/ui-lib/lib/cim/components/ClusterDeployment/LabelsSelector.tsx @@ -1,7 +1,16 @@ import React from 'react'; import flatten from 'lodash-es/flatten.js'; -import { Label, LabelGroup, Split, SplitItem } from '@patternfly/react-core'; -import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated'; +import { + Label, + LabelGroup, + Split, + SplitItem, + Dropdown, + DropdownItem, + MenuToggle, + MenuToggleElement, + DropdownList, +} from '@patternfly/react-core'; import { useField } from 'formik'; import { MultiSelectField } from '../../../common'; @@ -122,23 +131,27 @@ export const LabelSelectorGroup: React.FC = ({ setAddLabelOpen(false)} - toggle={ - setAddLabelOpen(val)} - style={{ padding: 0 }} + onOpenChange={() => setAddLabelOpen(!addLabelOpen)} + toggle={(toggleRef: React.Ref) => ( + setAddLabelOpen(!addLabelOpen)} + isExpanded={addLabelOpen} > - - } - isOpen={addLabelOpen} - isPlain - dropdownItems={children} - menuAppendTo={() => document.body} - /> + + )} + shouldFocusToggleOnSelect + > + {children} + ); diff --git a/libs/ui-lib/lib/cim/components/InfraEnv/AddHostDropdown.tsx b/libs/ui-lib/lib/cim/components/InfraEnv/AddHostDropdown.tsx index 5eb812fad5..da693a88d3 100644 --- a/libs/ui-lib/lib/cim/components/InfraEnv/AddHostDropdown.tsx +++ b/libs/ui-lib/lib/cim/components/InfraEnv/AddHostDropdown.tsx @@ -1,20 +1,25 @@ -import { Split, SplitItem, Spinner } from '@patternfly/react-core'; import { + Split, + SplitItem, + Spinner, Dropdown, - DropdownGroup, DropdownItem, DropdownItemProps, - DropdownSeparator, - DropdownToggle, -} from '@patternfly/react-core/deprecated'; + MenuToggle, + MenuToggleElement, + Divider, + DropdownList, + Popover, + Flex, +} from '@patternfly/react-core'; import * as React from 'react'; import { useTranslation } from '../../../common/hooks/use-translation-wrapper'; import { AddBmcHostModal, AddBmcHostYamlModal, AddHostModal } from '../modals'; import { AddHostDropdownProps } from './types'; import './AddHostDropdown.css'; -import { PopoverIcon } from '../../../common'; import { Trans } from 'react-i18next'; import { Link } from 'react-router-dom-v5-compat'; +import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon'; type ModalType = 'iso' | 'bmc' | 'yaml' | 'ipxe' | undefined; @@ -50,21 +55,28 @@ const AddHostDropdown = ({ const [provisioningConfig, provisioningConfigLoaded, provisioningConfigError] = provisioningConfigResult; const { t } = useTranslation(); + return ( <> setIsKebabOpen(false)} + onOpenChange={() => setIsKebabOpen(!isKebabOpen)} + toggle={(toggleRef: React.Ref) => ( + setIsKebabOpen(value)} - toggleVariant="primary" + variant="primary" + ref={toggleRef} + onClick={() => setIsKebabOpen(!isKebabOpen)} + isExpanded={isKebabOpen} > {t('ai:Add hosts')} - - } - isOpen={isKebabOpen} - dropdownItems={[ + + )} + shouldFocusToggleOnSelect + > + {[ { @@ -85,36 +97,37 @@ const AddHostDropdown = ({ > {t('ai:With iPXE')} , - , - - {t('ai:Baseboard Management Controller (BMC)')} - - {!provisioningConfig && ( - <> - {' '} - - ai:To enable the host's baseboard management controller (BMC) on the hub - cluster, you must first{' '} - - create a provisioning configuration. - - - } - /> - - )} - - - } - > + , + + {!provisioningConfig && ( + + + {t('ai:Baseboard Management Controller (BMC)')} + + ai:To enable the host's baseboard management controller (BMC) on the hub + cluster, you must first{' '} + + create a provisioning configuration. + + + } + > + + + + + )} { @@ -139,10 +152,9 @@ const AddHostDropdown = ({ isLoading={!provisioningConfigLoaded} isDisabled={!provisioningConfig && !provisioningConfigError} /> - , + , ]} - position={'right'} - /> + {addModalType === 'iso' && ( ) => { - const val = e?.currentTarget.id || ''; - setValue(val); + const onOsImageSelect = ( + event?: React.MouseEvent, + val?: string | number, + ) => { + setValue(val ? String(val) : ''); setOsImageOpen(false); }; @@ -40,30 +49,33 @@ const InfraEnvOpenShiftVersionDropdown = ({ osImages }: { osImages: OsImage[] }) hidden={!!filteredImages.length} > setOsImageOpen(!osImageOpen)} - className="pf-u-w-100" + toggle={(toggleRef: React.Ref) => ( + setOsImageOpen(!osImageOpen)} + isExpanded={osImageOpen} isDisabled={!filteredImages.length} > {value ? `OpenShift ${value}` : t('ai:No version selected')} - - } - name="osImageVersion" + + )} isOpen={osImageOpen} onSelect={onOsImageSelect} - dropdownItems={[ - - {t('ai:No version selected')} - , - ...filteredImages.map((image) => ( - + onOpenChange={() => setOsImageOpen(!osImageOpen)} + > + + {filteredImages.map((image) => ( + {`OpenShift ${image.openshiftVersion}`} - )), - ]} - className="pf-u-w-100" - /> + ))} + + ); diff --git a/libs/ui-lib/lib/cim/components/common/CpuArchitectureDropdown.tsx b/libs/ui-lib/lib/cim/components/common/CpuArchitectureDropdown.tsx index 3f5ca415bb..9ea3f30695 100644 --- a/libs/ui-lib/lib/cim/components/common/CpuArchitectureDropdown.tsx +++ b/libs/ui-lib/lib/cim/components/common/CpuArchitectureDropdown.tsx @@ -74,23 +74,26 @@ const CpuArchitectureDropdown = ({ return !isDisabled ? ( ( setCpuArchOpen(!cpuArchOpen)} - className="pf-u-w-100" + className="pf-v5-u-w-100" > {value ? architectureData[value].label : t('ai:CPU architecture')} )} isOpen={cpuArchOpen} onSelect={onCpuArchSelect} + onOpenChange={() => setCpuArchOpen(!cpuArchOpen)} > {dropdownItems} diff --git a/libs/ui-lib/lib/cim/components/modals/MassApproveAction.tsx b/libs/ui-lib/lib/cim/components/modals/MassApproveAction.tsx index c540791a9b..cf9bdbe7fd 100644 --- a/libs/ui-lib/lib/cim/components/modals/MassApproveAction.tsx +++ b/libs/ui-lib/lib/cim/components/modals/MassApproveAction.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DropdownItem } from '@patternfly/react-core/deprecated'; +import { DropdownItem } from '@patternfly/react-core'; import { AgentK8sResource } from '../../types'; import { useTranslation } from '../../../common/hooks/use-translation-wrapper'; diff --git a/libs/ui-lib/lib/common/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx b/libs/ui-lib/lib/common/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx index 24b1d99a68..6bbb9eea29 100644 --- a/libs/ui-lib/lib/common/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx +++ b/libs/ui-lib/lib/common/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx @@ -1,6 +1,13 @@ import * as React from 'react'; -import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated'; -import { FormGroup, Tooltip } from '@patternfly/react-core'; +import { + FormGroup, + Tooltip, + Dropdown, + DropdownItem, + MenuToggle, + MenuToggleElement, + DropdownList, +} from '@patternfly/react-core'; import { useTranslation } from '../../hooks/use-translation-wrapper'; import { getFieldId, StaticField } from '../..'; import { useField } from 'formik'; @@ -55,29 +62,35 @@ const ControlPlaneNodesDropdown = ({ ); }); - const onControlPlaneSelect = (e?: React.SyntheticEvent) => { - const val = e?.currentTarget.id as string; - setValue(toNumber(val)); + const onControlPlaneSelect = ( + e?: React.MouseEvent, + value?: string | number, + ) => { + setValue(toNumber(value)); setControlPlanelOpen(false); }; return !isDisabled ? ( setControlPlanelOpen(!controlPlanelOpen)} - className="pf-u-w-100" - > - {selectedValue ? selectedValue : '3'} - - } - name="controlPlaneCount" isOpen={controlPlanelOpen} onSelect={onControlPlaneSelect} - dropdownItems={dropdownItems} - className="pf-u-w-100" - /> + onOpenChange={() => setControlPlanelOpen(!controlPlanelOpen)} + toggle={(toggleRef: React.Ref) => ( + setControlPlanelOpen(!controlPlanelOpen)} + isExpanded={controlPlanelOpen} + > + {selectedValue ? selectedValue : '3'} + + )} + shouldFocusToggleOnSelect + > + {dropdownItems} + ) : ( = ({ ]; const onSelect = React.useCallback( - (event?: React.SyntheticEvent) => { + (event?: React.MouseEvent) => { const asyncFunc = async () => { if (event?.currentTarget.id) { setDisabled(true); @@ -98,28 +103,29 @@ const DiskRoleDropdown: React.FC = ({ ); const currentRoleLabel = getCurrentDiskRoleLabel(disk, installationDiskId, t); - const toggle = React.useMemo( - () => ( - setOpen(val)} - toggleIndicator={CaretDownIcon} - isDisabled={isDisabled} - className="pf-v5-c-button pf-m-link pf-m-inline" - > - {currentRoleLabel} - - ), - [setOpen, currentRoleLabel, isDisabled], + const toggle = (toggleRef: React.Ref) => ( + setOpen(!isOpen)} + isExpanded={isOpen} + isDisabled={isDisabled} + > + {currentRoleLabel} + ); return ( setOpen(!isOpen)} onSelect={onSelect} - dropdownItems={dropdownItems} toggle={toggle} isOpen={isOpen} isPlain - /> + > + {dropdownItems} + ); }; diff --git a/libs/ui-lib/lib/common/components/hosts/HostToolbarActions.tsx b/libs/ui-lib/lib/common/components/hosts/HostToolbarActions.tsx index 1133bfe47c..2378dcf5f3 100644 --- a/libs/ui-lib/lib/common/components/hosts/HostToolbarActions.tsx +++ b/libs/ui-lib/lib/common/components/hosts/HostToolbarActions.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DropdownItem } from '@patternfly/react-core/deprecated'; +import { DropdownItem } from '@patternfly/react-core'; import { useTranslation } from '../../hooks/use-translation-wrapper'; type ChangeHostnameActionProps = { diff --git a/libs/ui-lib/lib/common/components/hosts/TableToolbar.tsx b/libs/ui-lib/lib/common/components/hosts/TableToolbar.tsx index 16e30e69d6..1a4340bb34 100644 --- a/libs/ui-lib/lib/common/components/hosts/TableToolbar.tsx +++ b/libs/ui-lib/lib/common/components/hosts/TableToolbar.tsx @@ -11,14 +11,13 @@ import { ToolbarItem, ToolbarProps, Tooltip, -} from '@patternfly/react-core'; -import { Dropdown, DropdownItem, - DropdownToggle, - DropdownToggleCheckbox, -} from '@patternfly/react-core/deprecated'; -import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon'; + MenuToggle, + MenuToggleElement, + DropdownList, + MenuToggleCheckbox, +} from '@patternfly/react-core'; import { useTranslation } from '../../hooks/use-translation-wrapper'; import './TableToolbar.css'; @@ -52,6 +51,8 @@ const TableToolbar: React.FC = ({ const [selectOpen, setSelectOpen] = React.useState(false); const onSelectToggle = React.useCallback(() => setSelectOpen(!selectOpen), [selectOpen]); const onActionsToggle = React.useCallback(() => setActionsOpen(!actionsOpen), [actionsOpen]); + const onSelectAll = () => setSelectedIDs(itemIDs); + const onSelectNone = () => setSelectedIDs([]); React.useEffect(() => { if (!selectedIDs.every((id) => itemIDs.includes(id))) { @@ -72,57 +73,62 @@ const TableToolbar: React.FC = ({ const actionsDropdown = ( + onOpenChange={onActionsToggle} + toggle={(toggleRef: React.Ref) => ( + {t('ai:Actions')} - - } + + )} isOpen={actionsOpen} - dropdownItems={actions} - /> + > + {actions} + + ); + + const SelectDropdown = ( + ) => ( + (checked ? onSelectAll() : onSelectNone())} + isChecked={isChecked} + > + {selectedIDs.length} {t('ai:selected')} + , + ], + }} + /> + )} + isOpen={selectOpen} + > + + + {t('ai:Select all')} + + + {t('ai:Select none')} + + + ); - const onSelectAll = () => setSelectedIDs(itemIDs); - const onSelectNone = () => setSelectedIDs([]); return ( - - (checked ? onSelectAll() : onSelectNone())} - isChecked={isChecked} - > - {selectedIDs.length} {t('ai:selected')} - , - ]} - onToggle={onSelectToggle} - /> - } - isOpen={selectOpen} - dropdownItems={[ - - {t('ai:Select all')} - , - - {t('ai:Select none')} - , - ]} - /> - + {SelectDropdown} {children} {isDisabled ? ( diff --git a/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.css b/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.css deleted file mode 100644 index 23f1a24e5b..0000000000 --- a/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.css +++ /dev/null @@ -1,9 +0,0 @@ -#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu { - max-height: 22vh; - overflow: auto; -} - -#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu ul { - list-style: none; - padding-left: 0; -} diff --git a/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx b/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx index 948463f1d3..89545741c3 100644 --- a/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx +++ b/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx @@ -5,15 +5,13 @@ import { FormHelperText, HelperTextItem, Button, -} from '@patternfly/react-core'; -import { DropdownItem, - DropdownToggle, + MenuToggle, + MenuToggleElement, Dropdown, DropdownGroup, - DropdownSeparator, -} from '@patternfly/react-core/deprecated'; -import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon'; + Divider, +} from '@patternfly/react-core'; import { OpenshiftVersionOptionType } from '../../types'; import { useTranslation } from '../../hooks/use-translation-wrapper'; @@ -22,7 +20,6 @@ import { getFieldId } from './formik'; import ExternalLink from './ExternalLink'; import { OCP_RELEASES_PAGE } from '../../config'; import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard'; -import './OpenShiftVersionDropdown.css'; export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null; @@ -77,13 +74,13 @@ export const OpenShiftVersionDropdown = ({ let lastY: string | undefined = ''; const dropdownItems = parsedVersionsForItems.parsedVersions.map(({ y, versions }) => { const items = versions.map(({ value, label }) => ( - + {label} )); if (lastY !== null && y !== lastY) { - items.push(); + items.push(); } lastY = y; return items; @@ -93,28 +90,24 @@ export const OpenShiftVersionDropdown = ({ let lastCustomY: string | undefined = ''; const customDropdownItems = parsedVersionsForCustomItems.parsedVersions.map(({ y, versions }) => { const customItems = versions.map(({ value, label }) => ( - + {label} )); - if (lastCustomY !== null && y !== lastCustomY) { - customItems.push(); + customItems.push(); } lastCustomY = y; - return customItems; }); const dropdownGroup = [ - - {dropdownItems} - , - {field.value === 1 && ( ) => { + (event?: React.MouseEvent): void => { const selectedCpuArch = event?.currentTarget.id as SupportedCpuArchitecture; setValue(selectedCpuArch); setOpen(false); @@ -146,31 +153,30 @@ const CpuArchitectureDropdown = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [cpuArchitectures, openshiftVersion, selectedCpuArchitecture]); - const toggle = React.useMemo( - () => ( - setOpen(val)} - toggleIndicator={CaretDownIcon} - isText - className="pf-v5-u-w-100" - > - {currentCpuArch} - - ), - [setOpen, currentCpuArch], + const toggle = (toggleRef: React.Ref) => ( + setOpen(!isOpen)} + isExpanded={isOpen} + className="pf-v5-u-w-100" + > + {currentCpuArch} + ); return ( + onOpenChange={() => setOpen(!isOpen)} + > + {enabledItems} + ); }; diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/DiscoveryImageTypeDropdown.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/DiscoveryImageTypeDropdown.tsx index 63c4deba3a..fe5ed6de99 100644 --- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/DiscoveryImageTypeDropdown.tsx +++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/DiscoveryImageTypeDropdown.tsx @@ -1,12 +1,13 @@ import React from 'react'; -import { FormGroup } from '@patternfly/react-core'; +import { FormGroup, Tooltip } from '@patternfly/react-core'; import { DropdownItem, - DropdownToggle, + Divider, Dropdown, - DropdownSeparator, -} from '@patternfly/react-core/deprecated'; -import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon'; + MenuToggle, + MenuToggleElement, + DropdownList, +} from '@patternfly/react-core'; import { useField } from 'formik'; import { CpuArchitecture, @@ -47,74 +48,74 @@ export const DiscoveryImageTypeDropdown = ({ key="full-iso" id="full-iso" description={'Use when configuring custom networking for easier debugging'} + value={discoveryImageTypes['full-iso']} > {discoveryImageTypes['full-iso']} , - , - , + {'This provisioning type is not supported when using s390x architecture'}

) : undefined } - isAriaDisabled={!!isMinimalISODisabled} > - {discoveryImageTypes['minimal-iso']} - , - , + + {discoveryImageTypes['minimal-iso']} + + , + , {discoveryImageTypes['discovery-image-ipxe']} , ]; - const onSelect = React.useCallback( - (event?: React.SyntheticEvent) => { - const imageTypeSelection = event?.currentTarget.id as DiscoveryImageType; - const currentValue = imageTypeSelection - ? discoveryImageTypes[imageTypeSelection] - : defaultValue; - setCurrent(currentValue ? currentValue : ''); - setValue(imageTypeSelection); - setOpen(false); - onChange(imageTypeSelection === 'discovery-image-ipxe'); - }, - [setCurrent, setOpen, defaultValue, setValue, onChange], - ); + const onSelect = (event?: React.MouseEvent, value?: string | number) => { + const imageTypeSelection = value as string; + setCurrent(imageTypeSelection ? imageTypeSelection : ''); + setValue(event?.currentTarget.id as DiscoveryImageType); + setOpen(false); + onChange(imageTypeSelection === 'discovery-image-ipxe'); + }; - const toggle = React.useMemo( - () => ( - setOpen(val)} - toggleIndicator={CaretDownIcon} - isText - className="pf-v5-u-w-100" - isDisabled={isDisabled} - > - {current || value} - - ), - [setOpen, current, value, isDisabled], + const toggle = (toggleRef: React.Ref) => ( + setOpen(!isOpen)} + isExpanded={isOpen} + isDisabled={isDisabled} + > + {current || value} + ); return ( + onOpenChange={() => setOpen(!isOpen)} + > + {dropdownItems} + ); }; diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmBaseDomainField.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmBaseDomainField.tsx index 986361addb..167afe7579 100644 --- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmBaseDomainField.tsx +++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmBaseDomainField.tsx @@ -5,11 +5,13 @@ import { HelperText, HelperTextItem, Tooltip, + Dropdown, + DropdownItem, + MenuToggle, + MenuToggleElement, } from '@patternfly/react-core'; -import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated'; import { useField, useFormikContext } from 'formik'; import { ClusterDetailsValues, getFieldId } from '../../../common'; -import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon'; import { OcmCheckboxField, OcmInputField } from '../ui/OcmFormFields'; import { ManagedDomain } from '@openshift-assisted/types/assisted-installer-service'; import { clusterExistsReason } from '../featureSupportLevels/featureStateUtils'; @@ -62,25 +64,25 @@ export const OcmBaseDomainField = ({ )); }, [managedDomains]); - const dropdownToggle = React.useMemo(() => { + const dropdownToggle = (toggleRef: React.Ref) => { const selectedDomain = managedDomains.find((d) => d.domain === value); return ( - setOpen(val)} - toggleIndicator={CaretDownIcon} - isText + setOpen(!isOpen)} + isExpanded={isOpen} className="pf-v5-u-w-100" > {selectedDomain ? getManagedDomainLabel(selectedDomain) : 'Base domain'} - + ); - }, [managedDomains, value]); + }; const toggleRedHatDnsService = (checked: boolean) => setValue((checked && managedDomains.map((d) => d.domain)[0]) || ''); const onSelect = React.useCallback( - (event?: React.SyntheticEvent) => { + (event?: React.MouseEvent): void => { const selectedDomain = event?.currentTarget.id || ''; setValue(selectedDomain); setOpen(false); @@ -111,11 +113,12 @@ export const OcmBaseDomainField = ({ {useRedHatDnsService ? ( + onOpenChange={() => setOpen(!isOpen)} + > + {dropdownItems} + ) : ( { const [isOpen, setOpen] = React.useState(false); const fieldId = getFieldId(name, 'input'); - const onSelect = React.useCallback( - (event?: React.SyntheticEvent) => { - setValue(event?.currentTarget.id as string); - setOpen(false); - }, - [setOpen, setValue], - ); + const onSelect = (event?: React.MouseEvent): void => { + setValue(event?.currentTarget.id as string); + setOpen(false); + }; - const toggle = React.useMemo( - () => ( - setOpen(val)} - toggleIndicator={CaretDownIcon} - isText - className="pf-v5-u-w-100" - > - {value || 'manifests'} - - ), - [setOpen, value], + const toggle = (toggleRef: React.Ref) => ( + setOpen(!isOpen)} + isExpanded={isOpen} + className="pf-v5-u-w-100" + > + {value || 'manifests'} + ); return ( } isRequired> setOpen(!isOpen)} onSelect={onSelect} - dropdownItems={dropdownItems} toggle={toggle} isOpen={isOpen} - className="pf-v5-u-w-100" - /> + > + {dropdownItems} + {'Manifests can be placed in "manifests" or "openshift" directories.'} diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx index ce66eeec21..307827cef4 100644 --- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx +++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { DropdownItem, DropdownToggle, Dropdown } from '@patternfly/react-core/deprecated'; -import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon'; +import { Dropdown, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; import { useField } from 'formik'; import { getFieldId, HostSubnet, NO_SUBNET_SET } from '../../../../common'; @@ -64,46 +63,42 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro }, []); const dropdownItems = itemsSubnets.map(({ value, label, isDisabled }) => ( - + {label} )); - const onSelect = React.useCallback( - (event?: React.SyntheticEvent) => { - const currentValue = event?.currentTarget.innerText ?? currentDisplayValue; - setCurrentDisplayValue(currentValue); - setValue(event?.currentTarget.id); - setOpen(false); - }, - [currentDisplayValue, setValue], - ); + const onSelect = ( + event?: React.MouseEvent, + value?: string | number, + ): void => { + setCurrentDisplayValue(value as string); + setValue(event?.currentTarget.id); + setOpen(false); + }; - const toggle = React.useMemo( - () => ( - setOpen(!isDisabled && val)} - toggleIndicator={CaretDownIcon} - isDisabled={isDisabled} - isText - className="pf-v5-u-w-100" - > - {currentDisplayValue} - - ), - [setOpen, currentDisplayValue, isDisabled], + const toggle = (toggleRef: React.Ref) => ( + setOpen(!isOpen)} + isExpanded={isOpen} + isDisabled={isDisabled} + className="pf-v5-u-w-100" + > + {currentDisplayValue} + ); return ( setOpen(!isOpen)} onSelect={onSelect} - dropdownItems={dropdownItems} toggle={toggle} isOpen={isOpen} - className="pf-v5-u-w-100" - /> + > + {dropdownItems} + ); }; diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx index 709557b059..7412e3aea0 100644 --- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx +++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx @@ -6,9 +6,12 @@ import { Split, SplitItem, Tooltip, + Dropdown, + DropdownItem, + MenuToggle, + MenuToggleElement, + DropdownList, } from '@patternfly/react-core'; -import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated'; -import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon'; import { useField } from 'formik'; import { CpuArchitecture, @@ -199,7 +202,12 @@ export const ExternalPlatformDropdown = ({ ] as ExternalPlatformInfo; return ( - + );