feat(ws) add filter to workspaces table

Signed-off-by: Elay Aharoni (EXT-Nokia) <elay.aharoni.ext@nokia.com>
kubeflow · Jan 9, 2025 · 6b6f562 · 6b6f562
1 parent a0db43c
commit 6b6f562
Show file tree

Hide file tree

Showing 9 changed files with 513 additions and 497 deletions.
diff --git a/workspaces/frontend/package-lock.json b/workspaces/frontend/package-lock.json
diff --git a/workspaces/frontend/package.json b/workspaces/frontend/package.json
@@ -51,7 +51,7 @@
     "core-js": "^3.39.0",
     "css-loader": "^6.11.0",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "cypress": "^13.15.0",
+    "cypress": "^13.16.1",
     "cypress-axe": "^1.5.0",
     "cypress-high-resolution": "^1.0.0",
     "cypress-mochawesome-reporter": "^3.8.2",

diff --git a/workspaces/frontend/src/__tests__/cypress/cypress.config.ts b/workspaces/frontend/src/__tests__/cypress/cypress.config.ts
@@ -48,7 +48,7 @@ export default defineConfig({
   },
   defaultCommandTimeout: 10000,
   e2e: {
-    baseUrl: BASE_URL,
+    baseUrl: env.CY_MOCK ? BASE_URL : 'http://localhost:9000',
     specPattern: env.CY_MOCK ? `cypress/tests/mocked/**/*.cy.ts` : `cypress/tests/e2e/**/*.cy.ts`,
     experimentalInteractiveRunEvents: true,
     setupNodeEvents(on, config) {

diff --git a/...es/frontend/src/__tests__/cypress/cypress/tests/e2e/workspaces/filterWorkspacesTest.cy.ts b/...es/frontend/src/__tests__/cypress/cypress/tests/e2e/workspaces/filterWorkspacesTest.cy.ts
@@ -0,0 +1,52 @@
+import { home } from '~/__tests__/cypress/cypress/pages/home';
+
+const useFilter = (filterName: string, searchValue: string) => {
+  cy.get("[id$='filter-workspaces-dropdown']").click();
+  cy.get(`[id$='filter-workspaces-dropdown-${filterName}']`).click();
+  cy.get("[id$='filter-workspaces-search-input']").type(searchValue);
+  cy.get("[class$='pf-v6-c-toolbar__group']").contains(filterName);
+  cy.get("[class$='pf-v6-c-toolbar__group']").contains(searchValue);
+};
+
+describe('Application', () => {
+  it('filter rows with single filter', () => {
+    home.visit();
+    useFilter('Name', 'My');
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
+    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
+    cy.get("[id$='workspaces-table-row-2']").contains('My Other Jupyter Notebook');
+  });
+
+  it('filter rows with multiple filters', () => {
+    home.visit();
+    useFilter('Name', 'My');
+    useFilter('Pod Config', 'Small');
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 1);
+    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
+  });
+
+  it('filter rows with multiple filters and remove one', () => {
+    home.visit();
+    useFilter('Name', 'My');
+    useFilter('Pod Config', 'Small');
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 1);
+    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
+    cy.get("[class$='pf-v6-c-label-group__close']").eq(1).click();
+    cy.get("[class$='pf-v6-c-toolbar__group']").should('not.contain', 'Pod Config');
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
+    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
+    cy.get("[id$='workspaces-table-row-2']").contains('My Other Jupyter Notebook');
+  });
+
+  it('filter rows with multiple filters and remove all', () => {
+    home.visit();
+    useFilter('Name', 'My');
+    useFilter('Pod Config', 'Small');
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 1);
+    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
+    cy.get('*').contains('Clear all filters').click();
+    cy.get("[class$='pf-v6-c-toolbar__group']").should('not.contain', 'Pod Config');
+    cy.get("[class$='pf-v6-c-toolbar__group']").should('not.contain', 'Name');
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
+  });
+});
diff --git a/...frontend/src/__tests__/cypress/cypress/tests/mocked/workspaces/filterWorkspacesTest.cy.ts b/...frontend/src/__tests__/cypress/cypress/tests/mocked/workspaces/filterWorkspacesTest.cy.ts
@@ -0,0 +1,52 @@
+import { home } from '~/__tests__/cypress/cypress/pages/home';
+
+const useFilter = (filterName: string, searchValue: string) => {
+  cy.get("[id$='filter-workspaces-dropdown']").click();
+  cy.get(`[id$='filter-workspaces-dropdown-${filterName}']`).click();
+  cy.get("[id$='filter-workspaces-search-input']").type(searchValue);
+  cy.get("[class$='pf-v6-c-toolbar__group']").contains(filterName);
+  cy.get("[class$='pf-v6-c-toolbar__group']").contains(searchValue);
+};
+
+describe('Application', () => {
+  it('filter rows with single filter', () => {
+    home.visit();
+    useFilter('Name', 'My');
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
+    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
+    cy.get("[id$='workspaces-table-row-2']").contains('My Other Jupyter Notebook');
+  });
+
+  it('filter rows with multiple filters', () => {
+    home.visit();
+    useFilter('Name', 'My');
+    useFilter('Pod Config', 'Small');
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 1);
+    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
+  });
+
+  it('filter rows with multiple filters and remove one', () => {
+    home.visit();
+    useFilter('Name', 'My');
+    useFilter('Pod Config', 'Small');
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 1);
+    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
+    cy.get("[class$='pf-v6-c-label-group__close']").eq(1).click();
+    cy.get("[class$='pf-v6-c-toolbar__group']").should('not.contain', 'Pod Config');
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
+    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
+    cy.get("[id$='workspaces-table-row-2']").contains('My Other Jupyter Notebook');
+  });
+
+  it('filter rows with multiple filters and remove all', () => {
+    home.visit();
+    useFilter('Name', 'My');
+    useFilter('Pod Config', 'Small');
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 1);
+    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
+    cy.get('*').contains('Clear all filters').click();
+    cy.get("[class$='pf-v6-c-toolbar__group']").should('not.contain', 'Pod Config');
+    cy.get("[class$='pf-v6-c-toolbar__group']").should('not.contain', 'Name');
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
+  });
+});
diff --git a/workspaces/frontend/src/app/Generic components/Filter.tsx b/workspaces/frontend/src/app/Generic components/Filter.tsx