[RHOAIENG-2404] Replace simple deprecated PF selects with SimpleDropd…

…ownSelect
opendatahub-io · Aug 14, 2024 · b6b692d · b6b692d
1 parent 9ffed3c
commit b6b692d
Show file tree

Hide file tree

Showing 54 changed files with 565 additions and 679 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/acceleratorProfile.ts b/frontend/src/__tests__/cypress/cypress/pages/acceleratorProfile.ts
@@ -170,19 +170,19 @@ class TolerationsModal extends Modal {
   }
 
   findOperatorOptionExist() {
-    return this.findTolerationOperatorSelect().findDropdownItem(
+    return this.findTolerationOperatorSelect().findSelectOption(
       'Exists A toleration "matches" a taint if the keys are the same and the effects are the same. No value should be specified.',
     );
   }
 
   findOperatorOptionEqual() {
-    return this.findTolerationOperatorSelect().findDropdownItem(
+    return this.findTolerationOperatorSelect().findSelectOption(
       'Equal A toleration "matches" a taint if the keys are the same, the effects are the same, and the values are equal.',
     );
   }
 
   findEffectOptionNoExecute() {
-    return this.findTolerationEffectSelect().findDropdownItem(
+    return this.findTolerationEffectSelect().findSelectOption(
       'NoExecute Pods will be evicted from the node if they do not tolerate the taint.',
     );
   }

diff --git a/frontend/src/__tests__/cypress/cypress/pages/components/TableToolbar.ts b/frontend/src/__tests__/cypress/cypress/pages/components/TableToolbar.ts
@@ -6,7 +6,7 @@ export class TableToolbar extends Contextual<HTMLElement> {
   }
 
   findFilterMenuOption(id: string, name: string): Cypress.Chainable<JQuery<HTMLElement>> {
-    return this.findToggleButton(id).parents().findByRole('menuitem', { name });
+    return this.findToggleButton(id).parents().findByRole('option', { name });
   }
 
   findSearchInput(): Cypress.Chainable<JQuery<HTMLElement>> {

diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelMetrics.ts b/frontend/src/__tests__/cypress/cypress/pages/modelMetrics.ts
@@ -96,6 +96,10 @@ class ModelMetricsBias extends ModelMetricsGlobal {
     return cy.findByTestId('bias-metric-config-toolbar').find('#bias-metric-config-selector');
   }
 
+  selectMetric(name: string) {
+    cy.findByRole('option', { name }).click();
+  }
+
   shouldNotBeConfigured() {
     cy.findByTestId('bias-metrics-empty-state').should('exist');
   }

diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts b/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts
@@ -92,11 +92,11 @@ class InferenceServiceModal extends Modal {
   }
 
   findServingRuntimeSelect() {
-    return this.find().find('#inference-service-model-selection');
+    return this.find().findByTestId('inference-service-model-selection');
   }
 
   findModelFrameworkSelect() {
-    return this.find().find('#inference-service-framework-selection');
+    return this.find().findByTestId('inference-service-framework-selection');
   }
 
   findExistingDataConnectionOption() {
@@ -198,7 +198,7 @@ class ServingRuntimeModal extends Modal {
   findModelServerSizeSelect() {
     return this.find()
       .findByRole('group', { name: 'Compute resources per replica' })
-      .findByRole('button', { name: 'Options menu' });
+      .findByTestId('model-server-size-selection');
   }
 
   findModelServerReplicasMinusButton() {

diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/artifacts.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/artifacts.ts
@@ -33,7 +33,7 @@ class ArtifactsGlobal {
   }
 
   selectFilterType(type: string) {
-    cy.findByTestId('artifact-type-filter-select').findByTestId(`dropdown-item ${type}`).click();
+    cy.findByTestId('artifact-type-filter-select').findByTestId(type).click();
   }
 }
 

diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/createRunPage.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/createRunPage.ts
@@ -72,11 +72,11 @@ export class CreateRunPage {
   }
 
   findScheduledRunTypeSelectorPeriodic(): Cypress.Chainable<JQuery<HTMLElement>> {
-    return this.find().findByRole('menuitem', { name: 'Periodic' });
+    return this.find().findByRole('option', { name: 'Periodic' });
   }
 
   findScheduledRunTypeSelectorCron(): Cypress.Chainable<JQuery<HTMLElement>> {
-    return this.find().findByRole('menuitem', { name: 'Cron' });
+    return this.find().findByRole('option', { name: 'Cron' });
   }
 
   findScheduledRunRunEvery(): Cypress.Chainable<JQuery<HTMLElement>> {

diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/executions.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/executions.ts
@@ -34,7 +34,7 @@ class ExecutionFilter {
   }
 
   findTypeSearchFilterItem(item: string) {
-    return this.find().findByTestId('filter-toolbar-text-field').findDropdownItem(item);
+    return this.find().findByTestId('filter-toolbar-text-field').findSelectOption(item);
   }
 }
 

diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineFilterBar.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineFilterBar.ts
@@ -52,7 +52,7 @@ class PipelineRunFilterBar extends PipelineFilterBar {
   }
 
   selectStatusByName(name: string) {
-    this.findStatusSelect().findDropdownItem(name).click();
+    this.findStatusSelect().findSelectOption(name).click();
   }
 
   selectPipelineVersionByName(name: string): void {

diff --git a/frontend/src/__tests__/cypress/cypress/pages/servingRuntimes.ts b/frontend/src/__tests__/cypress/cypress/pages/servingRuntimes.ts
@@ -93,23 +93,23 @@ class ServingRuntimes {
 
   shouldDisplayServingRuntimeValues(values: string[]) {
     this.findSelectServingPlatformButton().click();
-    values.forEach((value) => cy.findByRole('menuitem', { name: value }).should('exist'));
+    values.forEach((value) => cy.findByRole('option', { name: value }).should('exist'));
     return this;
   }
 
   shouldDisplayAPIProtocolValues(values: ServingRuntimeAPIProtocol[]) {
     this.findSelectAPIProtocolButton().click();
-    values.forEach((value) => cy.findByRole('menuitem', { name: value }).should('exist'));
+    values.forEach((value) => cy.findByRole('option', { name: value }).should('exist'));
     return this;
   }
 
   selectPlatform(value: string) {
     this.findSelectServingPlatformButton().click();
-    cy.findByRole('menuitem', { name: value }).click();
+    cy.findByRole('option', { name: value }).click();
   }
 
   selectAPIProtocol(value: string) {
-    cy.findByRole('menuitem', { name: value }).click();
+    cy.findByRole('option', { name: value }).click();
   }
 
   uploadYaml(filePath: string) {

diff --git a/frontend/src/__tests__/cypress/cypress/pages/workbench.ts b/frontend/src/__tests__/cypress/cypress/pages/workbench.ts
@@ -237,7 +237,7 @@ class CreateSpawnerPage {
   findNotebookImage(name: string) {
     return cy
       .findByTestId('workbench-image-stream-selection')
-      .findDropdownItemByTestId(`dropdown-item ${name}`)
+      .findDropdownItemByTestId(name)
       .scrollIntoView();
   }
 

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersionDeploy.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersionDeploy.cy.ts
@@ -240,7 +240,7 @@ describe('Deploy model version', () => {
     // Validate model framework section
     kserveModal.findModelFrameworkSelect().should('be.disabled');
     cy.findByText('The source model format is').should('not.exist');
-    kserveModal.findServingRuntimeTemplateDropdown().findDropdownItem('Multi Platform').click();
+    kserveModal.findServingRuntimeTemplateDropdown().findSelectOption('Multi Platform').click();
     kserveModal.findModelFrameworkSelect().should('be.enabled');
     cy.findByText(
       `The source model format is ${modelArtifactMocked.modelFormatName} - ${modelArtifactMocked.modelFormatVersion}`,

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersions.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersions.cy.ts
@@ -153,7 +153,7 @@ describe('Model Versions', () => {
     modelRegistry.findModelVersionsTableSearch().focused().clear();
 
     // filtering by owner
-    modelRegistry.findModelVersionsTableFilter().findDropdownItem('Owner').click();
+    modelRegistry.findModelVersionsTableFilter().findSelectOption('Owner').click();
     modelRegistry.findModelVersionsTableSearch().type('Test author');
     modelRegistry.findModelVersionsTableRows().should('have.length', 1);
     modelRegistry.findModelVersionsTableRows().contains('Test author');

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/modelMetrics.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/modelMetrics.cy.ts
@@ -203,21 +203,11 @@ describe('Model Metrics', () => {
 
     modelMetricsBias.visit('test-project', 'test-inference-service');
 
-    modelMetricsBias
-      .findConfigSelector()
-      .findSelectOption('Loan Acceptance 4')
-      .click()
-      .type('{esc}');
-    modelMetricsBias
-      .findConfigSelector()
-      .findSelectOption('Loan acceptance 2')
-      .click()
-      .type('{esc}');
-    modelMetricsBias
-      .findConfigSelector()
-      .findSelectOption('Loan acceptance 2 STRICT')
-      .click()
-      .type('{esc}');
+    modelMetricsBias.findConfigSelector().click();
+    modelMetricsBias.selectMetric('Loan Acceptance 4');
+    modelMetricsBias.selectMetric('Loan acceptance 2');
+    modelMetricsBias.selectMetric('Loan acceptance 2 STRICT');
+    modelMetricsBias.findConfigSelector().click();
 
     modelMetricsBias
       .getMetricsChart('Statistical parity difference (SPD)', 'Loan acceptance')
@@ -243,21 +233,11 @@ describe('Model Metrics', () => {
 
     modelMetricsBias.visit('test-project', 'test-inference-service');
 
-    modelMetricsBias
-      .findConfigSelector()
-      .findSelectOption('Loan Acceptance 4')
-      .click()
-      .type('{esc}');
-    modelMetricsBias
-      .findConfigSelector()
-      .findSelectOption('Loan acceptance 2')
-      .click()
-      .type('{esc}');
-    modelMetricsBias
-      .findConfigSelector()
-      .findSelectOption('Loan acceptance 2 STRICT')
-      .click()
-      .type('{esc}');
+    modelMetricsBias.findConfigSelector().click();
+    modelMetricsBias.selectMetric('Loan Acceptance 4');
+    modelMetricsBias.selectMetric('Loan acceptance 2');
+    modelMetricsBias.selectMetric('Loan acceptance 2 STRICT');
+    modelMetricsBias.findConfigSelector().click();
 
     modelMetricsBias
       .getMetricsChart('Statistical parity difference (SPD)', 'Loan acceptance')

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/servingRuntimeList.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/servingRuntimeList.cy.ts
@@ -533,7 +533,7 @@ describe('Serving Runtime List', () => {
 
       // test filling in minimum required fields
       kserveModal.findModelNameInput().type('Test Name');
-      kserveModal.findServingRuntimeTemplateDropdown().findDropdownItem('Caikit').click();
+      kserveModal.findServingRuntimeTemplateDropdown().findSelectOption('Caikit').click();
       kserveModal.findModelFrameworkSelect().findSelectOption('onnx - 1').click();
       kserveModal.findSubmitButton().should('be.disabled');
       // check external route, token should be checked and no alert
@@ -613,7 +613,7 @@ describe('Serving Runtime List', () => {
 
       // test filling in minimum required fields
       kserveModal.findModelNameInput().type('Test Name');
-      kserveModal.findServingRuntimeTemplateDropdown().findDropdownItem('Caikit').click();
+      kserveModal.findServingRuntimeTemplateDropdown().findSelectOption('Caikit').click();
       kserveModal.findModelFrameworkSelect().findSelectOption('onnx - 1').click();
       kserveModal.findSubmitButton().should('be.disabled');
       // check external route, token should be checked and no alert
@@ -674,7 +674,7 @@ describe('Serving Runtime List', () => {
 
       // test filling in minimum required fields
       kserveModal.findModelNameInput().type('Test Name');
-      kserveModal.findServingRuntimeTemplateDropdown().findDropdownItem('Caikit').click();
+      kserveModal.findServingRuntimeTemplateDropdown().findSelectOption('Caikit').click();
       kserveModal.findModelFrameworkSelect().findSelectOption('onnx - 1').click();
       kserveModal.findExistingConnectionSelect().findSelectOption('Test Secret').click();
       kserveModal.findNewDataConnectionOption().click();
@@ -898,7 +898,7 @@ describe('Serving Runtime List', () => {
 
       // test filling in minimum required fields
       kserveModal.findModelNameInput().type('Test Name');
-      kserveModal.findServingRuntimeTemplateDropdown().findDropdownItem('Caikit').click();
+      kserveModal.findServingRuntimeTemplateDropdown().findSelectOption('Caikit').click();
       kserveModal.findModelFrameworkSelect().findSelectOption('onnx - 1').click();
       kserveModal.findSubmitButton().should('be.disabled');
       kserveModal.findExistingConnectionSelect().findSelectOption('Test Secret').click();
@@ -994,7 +994,7 @@ describe('Serving Runtime List', () => {
       createServingRuntimeModal.findModelServerNameInput().type('Test Name');
       createServingRuntimeModal
         .findServingRuntimeTemplateDropdown()
-        .findDropdownItem('New OVMS Server')
+        .findSelectOption('New OVMS Server')
         .click();
       createServingRuntimeModal.findSubmitButton().should('be.enabled');
 
@@ -1156,7 +1156,7 @@ describe('Serving Runtime List', () => {
       createServingRuntimeModal.findModelServerNameInput().type('Test Name');
       createServingRuntimeModal
         .findServingRuntimeTemplateDropdown()
-        .findDropdownItem('New OVMS Server')
+        .findSelectOption('New OVMS Server')
         .click();
       createServingRuntimeModal.findSubmitButton().should('be.enabled');
 
@@ -1213,7 +1213,7 @@ describe('Serving Runtime List', () => {
       createServingRuntimeModal.findModelServerNameInput().type('Test Name');
       createServingRuntimeModal
         .findServingRuntimeTemplateDropdown()
-        .findDropdownItem('New OVMS Server')
+        .findSelectOption('New OVMS Server')
         .click();
       createServingRuntimeModal.findSubmitButton().should('be.enabled');
 
@@ -1266,7 +1266,7 @@ describe('Serving Runtime List', () => {
       createServingRuntimeModal.findModelServerNameInput().type('Test Name');
       createServingRuntimeModal
         .findServingRuntimeTemplateDropdown()
-        .findDropdownItem('New OVMS Server')
+        .findSelectOption('New OVMS Server')
         .click();
       createServingRuntimeModal.findSubmitButton().should('be.enabled');
 
@@ -1329,7 +1329,7 @@ describe('Serving Runtime List', () => {
       createServingRuntimeModal.findModelServerNameInput().type('Test Name');
       createServingRuntimeModal
         .findServingRuntimeTemplateDropdown()
-        .findDropdownItem('New OVMS Server')
+        .findSelectOption('New OVMS Server')
         .click();
       createServingRuntimeModal.findSubmitButton().should('be.enabled');
 
@@ -1405,7 +1405,7 @@ describe('Serving Runtime List', () => {
       createServingRuntimeModal.findModelServerNameInput().type('Test Name');
       createServingRuntimeModal
         .findServingRuntimeTemplateDropdown()
-        .findDropdownItem('New OVMS Server')
+        .findSelectOption('New OVMS Server')
         .click();
       createServingRuntimeModal.findSubmitButton().should('be.enabled');
 
@@ -1625,7 +1625,7 @@ describe('Serving Runtime List', () => {
 
       // test filling in minimum required fields
       kserveModal.findModelNameInput().type('Test Name');
-      kserveModal.findServingRuntimeTemplateDropdown().findDropdownItem('Caikit').click();
+      kserveModal.findServingRuntimeTemplateDropdown().findSelectOption('Caikit').click();
       kserveModal.findModelFrameworkSelect().findSelectOption('onnx - 1').click();
       kserveModal.findSubmitButton().should('be.disabled');
       kserveModal.findExistingConnectionSelect().findSelectOption('Test Secret').click();
@@ -1658,7 +1658,7 @@ describe('Serving Runtime List', () => {
 
       // test filling in minimum required fields
       kserveModal.findModelNameInput().type('Test Name');
-      kserveModal.findServingRuntimeTemplateDropdown().findDropdownItem('Caikit').click();
+      kserveModal.findServingRuntimeTemplateDropdown().findSelectOption('Caikit').click();
       kserveModal.findModelFrameworkSelect().findSelectOption('onnx - 1').click();
       kserveModal.findSubmitButton().should('be.disabled');
       kserveModal.findExistingConnectionSelect().findSelectOption('Test Secret').click();
@@ -1692,7 +1692,7 @@ describe('Serving Runtime List', () => {
       kserveModal.shouldBeOpen();
 
       kserveModal.findModelNameInput().type('Test Name');
-      kserveModal.findServingRuntimeTemplateDropdown().findDropdownItem('Caikit').click();
+      kserveModal.findServingRuntimeTemplateDropdown().findSelectOption('Caikit').click();
       kserveModal.findModelFrameworkSelect().findSelectOption('onnx - 1').click();
 
       kserveModal.findNewDataConnectionOption().click();

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelineCreateRuns.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelineCreateRuns.cy.ts
@@ -588,7 +588,7 @@ describe('Pipeline create runs', () => {
     it('creates a schedule with trigger type cron without whitespace', () => {
       // Fill out the form with a schedule and submit
       createScheduleRunCommonTest();
-      createSchedulePage.findScheduledRunTypeSelector().findDropdownItem('Cron').click();
+      createSchedulePage.findScheduledRunTypeSelector().findSelectOption('Cron').click();
       createSchedulePage.findScheduledRunCron().fill('@every 5m');
       createSchedulePage
         .mockCreateRecurringRun(projectName, mockPipelineVersion, createRecurringRunParams)
@@ -623,7 +623,7 @@ describe('Pipeline create runs', () => {
 
     it('creates a schedule with trigger type cron with whitespace', () => {
       createScheduleRunCommonTest();
-      createSchedulePage.findScheduledRunTypeSelector().findDropdownItem('Cron').click();
+      createSchedulePage.findScheduledRunTypeSelector().findSelectOption('Cron').click();
       createSchedulePage.findScheduledRunCron().fill('@every 5m ');
       createSchedulePage
         .mockCreateRecurringRun(projectName, mockPipelineVersion, createRecurringRunParams)

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesTopology.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesTopology.cy.ts
@@ -528,7 +528,9 @@ describe('Pipeline topology', () => {
       pipelineRecurringRunDetails.selectActionDropdownItem('Disable');
 
       pipelineRecurringRunDetails.findActionsDropdown().click();
-      cy.findByRole('menuitem', { name: 'Enable' }).should('be.visible');
+      cy.get('[id="dashboard-page-main"]')
+        .findByRole('menuitem', { name: 'Enable' })
+        .should('be.visible');
     });
 
     it('enables recurring run from action dropdown', () => {
@@ -554,7 +556,9 @@ describe('Pipeline topology', () => {
       pipelineRecurringRunDetails.selectActionDropdownItem('Enable');
 
       pipelineRecurringRunDetails.findActionsDropdown().click();
-      cy.findByRole('menuitem', { name: 'Disable' }).should('be.visible');
+      cy.get('[id="dashboard-page-main"]')
+        .findByRole('menuitem', { name: 'Disable' })
+        .should('be.visible');
     });
   });
 

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/workbench.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/workbench.cy.ts
@@ -542,11 +542,15 @@ describe('Workbench page', () => {
         },
       ],
     });
+    cy.interceptK8sList(
+      PVCModel,
+      mockK8sResourceList([mockPVCK8sResource({ name: 'test-notebook' })]),
+    );
     editSpawnerPage.visit('test-notebook');
     editSpawnerPage.findNameInput().should('have.value', 'Test Notebook');
     editSpawnerPage.shouldHaveNotebookImageSelectInput('Test Image');
     editSpawnerPage.shouldHaveContainerSizeInput('Small');
-    editSpawnerPage.shouldHavePersistentStorage('test-notebook');
+    editSpawnerPage.shouldHavePersistentStorage('Test Storage');
     editSpawnerPage.findSubmitButton().should('be.enabled');
     editSpawnerPage.findNameInput().fill('Updated Notebook');