[RHOAIENG-1107] Storage Class Filter (opendatahub-io#3235)

* [RHOAIENG-1107] Storage Class Filter * use correct description & name for OpenShift class name cell popover list
DaoDaoNoCode · Sep 23, 2024 · a509cf4 · a509cf4
1 parent 84628b2
commit a509cf4
Show file tree

Hide file tree

Showing 13 changed files with 238 additions and 104 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/storageClasses.ts b/frontend/src/__tests__/cypress/cypress/pages/storageClasses.ts
@@ -3,6 +3,7 @@ import { mockStorageClassList } from '~/__mocks__';
 import { appChrome } from '~/__tests__/cypress/cypress/pages/appChrome';
 import { TableRow } from '~/__tests__/cypress/cypress/pages/components/table';
 import { Modal } from './components/Modal';
+import { TableToolbar } from './components/TableToolbar';
 
 class StorageClassesPage {
   visit() {
@@ -22,9 +23,36 @@ class StorageClassesPage {
   findEmptyState() {
     return cy.findByTestId('storage-classes-empty-state');
   }
+
+  mockGetStorageClasses(storageClasses?: MockStorageClass[], times?: number) {
+    return cy.interceptOdh(
+      'GET /api/k8s/apis/storage.k8s.io/v1/storageclasses',
+      { times },
+      mockStorageClassList(storageClasses),
+    );
+  }
+}
+
+class StorageClassesToolbar extends TableToolbar {
+  findFilterMenu() {
+    return this.find().findByTestId('filter-toolbar-dropdown');
+  }
+
+  findFilterMenuItem(name: string) {
+    this.findFilterMenu().click();
+    return this.findFilterMenu().get('button').contains(name);
+  }
+
+  fillSearchInput(value: string) {
+    this.findSearchInput().clear().fill(value);
+  }
 }
 
 class StorageClassesTableRow extends TableRow {
+  private findByDataLabel(label: string) {
+    return this.find().find(`[data-label="${label}"]`);
+  }
+
   findOpenshiftDefaultLabel() {
     return this.find().findByTestId('openshift-sc-default-label');
   }
@@ -38,19 +66,19 @@ class StorageClassesTableRow extends TableRow {
   }
 
   findDisplayNameValue() {
-    return this.find().find(`[data-label="Display name"]`);
+    return this.findByDataLabel('Display name');
   }
 
   findEnableValue() {
-    return this.find().find(`[data-label="Enable"]`);
+    return this.findByDataLabel('Enable');
   }
 
   findDefaultValue() {
-    return this.find().find(`[data-label="Default"]`);
+    return this.findByDataLabel('Default');
   }
 
   findLastModifiedValue() {
-    return this.find().find(`[data-label="Last modified"]`);
+    return this.findByDataLabel('Last modified');
   }
 
   findCorruptedMetadataAlert() {
@@ -59,41 +87,51 @@ class StorageClassesTableRow extends TableRow {
 }
 
 class StorageClassesTable {
+  private findByDataLabel(label: string) {
+    return this.find().find(`[data-label="${label}"]`);
+  }
+
   find() {
     return cy.findByTestId('storage-classes-table');
   }
 
-  getRowByName(name: string) {
+  getRowByName(name: string, label = 'OpenShift storage class') {
     return new StorageClassesTableRow(() =>
-      this.find().find(`[data-label="Openshift storage class"]`).contains(name).parents('tr'),
+      this.findByDataLabel(label).contains(name).parents('tr'),
     );
   }
 
   getRowByConfigName(name: string) {
-    return new StorageClassesTableRow(() =>
-      this.find().find(`[data-label="Display name"]`).contains(name).parents('tr'),
-    );
+    return this.getRowByName(name, 'Display name');
+  }
+
+  getTableToolbar() {
+    return new StorageClassesToolbar(() => cy.findByTestId('sc-table-toolbar'));
   }
 
   findRowByName(name: string) {
     return this.getRowByConfigName(name).find();
   }
 
+  findRows() {
+    return this.findByDataLabel('Display name').parents('tr');
+  }
+
+  findEmptyState() {
+    return cy.findByTestId('dashboard-empty-table-state');
+  }
+
+  findClearFiltersButton() {
+    return this.findEmptyState().findByTestId('clear-filters-button');
+  }
+
   mockUpdateStorageClass(storageClassName: string, times?: number) {
     return cy.interceptOdh(
       `PUT /api/storage-class/:name/config`,
       { path: { name: storageClassName }, times },
       { success: true, error: '' },
     );
   }
-
-  mockGetStorageClasses(storageClasses: MockStorageClass[], times?: number) {
-    return cy.interceptOdh(
-      'GET /api/k8s/apis/storage.k8s.io/v1/storageclasses',
-      { times },
-      mockStorageClassList(storageClasses),
-    );
-  }
 }
 
 class StorageClassEditModal extends Modal {

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/clusterStorage.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/clusterStorage.cy.ts
@@ -26,7 +26,7 @@ import {
 } from '~/__tests__/cypress/cypress/utils/models';
 import { mock200Status } from '~/__mocks__/mockK8sStatus';
 import { mockPrometheusQueryResponse } from '~/__mocks__/mockPrometheusQueryResponse';
-import { storageClassesTable } from '~/__tests__/cypress/cypress/pages/storageClasses';
+import { storageClassesPage } from '~/__tests__/cypress/cypress/pages/storageClasses';
 
 type HandlersProps = {
   isEmpty?: boolean;
@@ -106,7 +106,7 @@ describe('ClusterStorage', () => {
 
   it('Add cluster storage', () => {
     initInterceptors({ isEmpty: true });
-    storageClassesTable.mockGetStorageClasses([
+    storageClassesPage.mockGetStorageClasses([
       openshiftDefaultStorageClass,
       buildMockStorageClass(otherStorageClass, { isEnabled: true }),
     ]);