fix(ws): Updates to Table Columns, Expandable Rows, and Theming (#432)

Signed-off-by: Jenny <[email protected]>

add icon to workspaceKindsColumns interface

fix(ws): Update table with expandable variant and fix styles

fix secondary border in menu toggle

fix menu toggle expanded text color and update icon to use status prop

remove unused files

add cluster storage description list group

Signed-off-by: Jenny <[email protected]>

Add title and packages

revert form label styling, revert homeVol column

fix linting

fix lint

Signed-off-by: Jenny <[email protected]>

Add PR code suggestions, remove unused interfaces

Signed-off-by: Jenny <[email protected]>

remove unused import

Signed-off-by: Jenny <[email protected]>

fix filterWorkspacesTest

Signed-off-by: Jenny <[email protected]>

fix(ws): apply feedback to fix Cypress tests

Signed-off-by: Jenny <[email protected]>

Update tests, add width to defineDataFields, remove duplicate WorkspaceTableColumnKeys type

Signed-off-by: Jenny <[email protected]>

fix wrapping behavior

Signed-off-by: Jenny <[email protected]>

Replace Th values with mapped instance

Signed-off-by: Jenny <[email protected]>

revert column order

Signed-off-by: Jenny <[email protected]>

remove hardcoded package label instances

Signed-off-by: Jenny <[email protected]>

delete cursor rule

Author: jenny-s51

workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaces/WorkspaceDetailsActivity.cy.ts

@@ -11,7 +11,12 @@ describe('WorkspaceDetailsActivity Component', () => {
 
   // This tests depends on the mocked workspaces data at home page, needs revisit once workspace data fetched from BE
   it('open workspace details, open activity tab, check all fields match', () => {
-    cy.findAllByTestId('table-body').first().findByTestId('action-column').click();
+    cy.findAllByTestId('table-body')
+      .first()
+      .findByTestId('action-column')
+      .find('button')
+      .should('be.visible')
+      .click();
     // Extract first workspace from mock data
     cy.wait('@getWorkspaces').then((interception) => {
       if (!interception.response || !interception.response.body) {

workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaces/Workspaces.cy.ts

@@ -119,7 +119,12 @@ describe('Workspaces Component', () => {
   });
 
   function openDeleteModal() {
-    cy.findAllByTestId('table-body').first().findByTestId('action-column').click();
+    cy.findAllByTestId('table-body')
+      .first()
+      .findByTestId('action-column')
+      .find('button')
+      .should('be.visible')
+      .click();
     cy.findByTestId('action-delete').click();
     cy.findByTestId('delete-modal-input').should('have.value', '');
   }

workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaces/filterWorkspacesTest.cy.ts

@@ -31,34 +31,57 @@ describe('Application', () => {
 
   it('filter rows with multiple filters', () => {
     home.visit();
+    // First filter by name
     useFilter('name', 'Name', 'My');
-    useFilter('podConfig', 'Pod Config', 'Tiny');
-    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 1);
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
+    cy.get("[id$='workspaces-table-row-1']").contains('My First Jupyter Notebook');
+
+    // Add second filter by image
+    useFilter('image', 'Image', 'jupyter');
+    cy.get("[class$='pf-v6-c-toolbar__group']").contains('Name');
+    cy.get("[class$='pf-v6-c-toolbar__group']").contains('Image');
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
     cy.get("[id$='workspaces-table-row-1']").contains('My First Jupyter Notebook');
   });
 
   it('filter rows with multiple filters and remove one', () => {
     home.visit();
+    // Add name filter
     useFilter('name', 'Name', 'My');
-    useFilter('podConfig', 'Pod Config', 'Tiny');
-    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 1);
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
     cy.get("[id$='workspaces-table-row-1']").contains('My First 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');
+
+    // Add image filter
+    useFilter('image', 'Image', 'jupyter');
+    cy.get("[class$='pf-v6-c-toolbar__group']").contains('Name');
+    cy.get("[class$='pf-v6-c-toolbar__group']").contains('Image');
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
+
+    // Remove one filter (the first one)
+    cy.get("[class$='pf-v6-c-label-group__close']").first().click();
+    cy.get("[class$='pf-v6-c-toolbar__group']").should('not.contain', 'Name');
+    cy.get("[class$='pf-v6-c-toolbar__group']").contains('Image');
     cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
     cy.get("[id$='workspaces-table-row-1']").contains('My First Jupyter Notebook');
     cy.get("[id$='workspaces-table-row-2']").contains('My Second Jupyter Notebook');
   });
 
   it('filter rows with multiple filters and remove all', () => {
     home.visit();
+    // Add name filter
     useFilter('name', 'Name', 'My');
-    useFilter('podConfig', 'Pod Config', 'Tiny');
-    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 1);
+    cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
     cy.get("[id$='workspaces-table-row-1']").contains('My First Jupyter Notebook');
+
+    // Add image filter
+    useFilter('image', 'Image', 'jupyter');
+    cy.get("[class$='pf-v6-c-toolbar__group']").contains('Name');
+    cy.get("[class$='pf-v6-c-toolbar__group']").contains('Image');
+
+    // Clear all filters
     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("[class$='pf-v6-c-toolbar__group']").should('not.contain', 'Image');
     cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
   });
 });