[releases/v2.15-cim] MGMT-20404: Refactor dropdown component import package

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<string, Version> = {
   '4.9': {

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();
 

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');
 

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);
     });
   });
 });

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,40 +88,44 @@ 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');
     });
 
     it('Validate that Nutanix option is disabled in case we choose OCP version 4.10', () => {
       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', () => {
       ClusterDetailsForm.openshiftVersionField.selectVersion('4.18');
       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();
     });
   });

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();
     });

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();

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'));
   },

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);

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();
     });

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();
     });

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();
     });

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();
     });

libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDeploymentHostsDiscovery.tsx

@@ -82,12 +82,14 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
           <DiscoveryInstructions />
         </TextContent>
       </GridItem>
-      <AddHostDropdown
-        infraEnv={infraEnv}
-        agentClusterInstall={agentClusterInstall}
-        usedHostnames={usedHostnames}
-        {...rest}
-      />
+      <GridItem span={5}>
+        <AddHostDropdown
+          infraEnv={infraEnv}
+          agentClusterInstall={agentClusterInstall}
+          usedHostnames={usedHostnames}
+          {...rest}
+        />
+      </GridItem>
       <GridItem>
         <TextContent>
           <Text component="h3">{t('ai:Information and warnings')}</Text>