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

jenny-s51 · 2025-06-18T19:15:24Z

Closes #372

Overview

Improved workspaces table column organization and expandable content.
Fixed several visual and theming issues.

Table Updates

Primary columns: Now show Name, Image (with redirect status icon), Kind, State, and Last Activity.
Expandable rows: Now display Home Volume, Pod Config, CPU, and Memory. Uses PatternFly Description List for best practices.

Theming & Visual Fixes (MUI-theme.scss)

Buttons: Added --mui-button--BorderWidth: 1px and improved split button border color, style, and consistency.
Table: Fixed cell spacing and improved column width handling for better layout stability.

Before:

After:

caponetto

Thanks for the PR @jenny-s51!

caponetto · 2025-06-27T17:09:59Z

workspaces/frontend/src/app/types.ts

@@ -7,6 +7,20 @@ import {
  Workspace,
 } from '~/shared/api/backendApiTypes';

+export interface WorkspacesColumnNames {


This interface is not being used anymore. Could you please remove it?

Yes, nice catch here @caponetto

caponetto · 2025-06-27T17:24:14Z

workspaces/frontend/src/app/pages/Workspaces/WorkspacePackageDetails.tsx

+  const jupyterLabVersion = imageConfig.labels.find(
+    (label) => label.key === 'jupyterlabVersion',
+  )?.value;
+  const pythonVersion = imageConfig.labels.find((label) => label.key === 'pythonVersion')?.value;


I think we can define a map of label keys and their corresponding text that we want to extract, and then create a generic code to extract and render them down there.

Something like:

const PACKAGE_LABELS: Record<string, string> = { jupyterlabVersion: 'JupyterLab', pythonVersion: 'Python', // Add more mappings here as needed later }; ... const { labels } = workspace.podTemplate.options.imageConfig.current; const renderedItems = Object.entries(PACKAGE_LABELS).flatMap(([key, label]) => { const value = labels.find((l) => l.key === key)?.value; return value ? <ListItem key={key}>{`${label} v${value}`}</ListItem> : []; }); ... <List isPlain>{renderedItems}</List>

We'd probably also want to show something else if no matching labels are found, i.e., renderedItems.length === 0

Thank you @caponetto, great idea - this is much cleaner and more maintainable!

caponetto · 2025-06-27T17:27:43Z

workspaces/frontend/src/app/components/WorkspaceTable.tsx

@@ -38,7 +40,6 @@ import {
  FilterableDataFieldKey,
  SortableDataFieldKey,
 } from '~/app/filterableDataHelper';
-import { ExpandedWorkspaceRow } from '~/app/pages/Workspaces/ExpandedWorkspaceRow';


As ExpandedWorkspaceRow is not being used anymore, can we delete its file?

caponetto · 2025-06-27T17:39:05Z

workspaces/frontend/src/app/components/WorkspaceTable.tsx

  name: { label: 'Name', isFilterable: true, isSortable: true },
  kind: { label: 'Kind', isFilterable: true, isSortable: true },
  namespace: { label: 'Namespace', isFilterable: true, isSortable: true },
  image: { label: 'Image', isFilterable: true, isSortable: true },
-  podConfig: { label: 'Pod Config', isFilterable: true, isSortable: true },
  state: { label: 'State', isFilterable: true, isSortable: true },
  homeVol: { label: 'Home Vol', isFilterable: true, isSortable: true },


I think we should remove homeVol from here as well, right?

caponetto · 2025-06-27T17:51:27Z

workspaces/frontend/src/app/components/WorkspaceTable.tsx

+                  <Tr isExpanded>
+                    <Td />
+                    <Td dataLabel="Storage">
+                      <ExpandableRowContent>
+                        <WorkspaceStorage workspace={workspace} />
+                      </ExpandableRowContent>
+                    </Td>
+                    <Td>
+                      <ExpandableRowContent>
+                        <WorkspacePackageDetails workspace={workspace} />
+                      </ExpandableRowContent>
+                    </Td>
+                    <Td>
+                      <ExpandableRowContent>
+                        <WorkspaceConfigDetails workspace={workspace} />
+                      </ExpandableRowContent>
+                    </Td>
+                    <Td />
+                    <Td />
+                    <Td />
+                    <Td />
+                  </Tr>


Can we extract this piece of code to a dedicated component like it was being done with ExpandedWorkspaceRow?
Also, we are assuming here 8 <Td> but we should account for the scenario where we could have less columns (dictated by visibleColumnKeys) due to the hiddenColumns prop. All this logic could be calculated inside its own component. Saying this because the layout would break if we keep this code and show less columns.

caponetto · 2025-06-30T16:29:22Z

workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx

+// Import the type from WorkspaceTable
+export type WorkspaceTableColumnKeys =
+  | 'name'
+  | 'kind'
+  | 'namespace'
+  | 'image'
+  | 'state'
+  | 'gpu'
+  | 'idleGpu'
+  | 'lastActivity'
+  | 'connect'
+  | 'actions';


This type is not necessary, is it? We can keep using the WorkspaceTableColumnKeys from '~/app/components/WorkspaceTable'

Nice catch - fixed to import and apply the type from WorkspaceTable.

caponetto · 2025-06-30T16:42:37Z

workspaces/frontend/src/app/components/WorkspaceTable.tsx

-              {visibleColumnKeys.map((columnKey) => (
+              {canExpandRows && <Th width={10} screenReaderText="expand-action" />}
+              {visibleColumnKeys.includes('name') && (
+                <Th


I think we can include the width information in the structure that defineDataFields composes to avoid code duplication but that's an improvement we can do later in a future opportunity.

Yes, great idea - I've added width to DataFieldDefinition so the widths are no longer hardcoded here. Is this what you had in mind @caponetto ?

Exactly! And also replace all the repeated <Th ... definitions with

{visibleColumnKeys.map((columnKey) => ( <Th width={wsTableColumns[columnKey].width} key={`workspace-table-column-${columnKey}`} sort={getSortParams(columnKey)} aria-label={columnKey} modifier="wrap" screenReaderText={columnKey} > {wsTableColumns[columnKey].label} </Th> ))}

WDYT?

caponetto · 2025-06-30T16:50:44Z

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

@@ -32,18 +32,16 @@ describe('Application', () => {
  it('filter rows with multiple filters', () => {


I see these tests were meant to test multiple filters but now they only add one single filter, which doesn't actually test the target scenarios. Since PodConfig filter no longer exists, can we use another one? State or image for instance.

paulovmr · 2025-07-02T13:59:26Z

/ok-to-test

paulovmr

Hi @jenny-s51 , thanks for the changes, it looks much better!

One thing I believe we could consider is making the width used by the Home volume and Cluster storage information a little bigger. Perhaps we could force the "lock" and "copy" icons to stay at the same line as the volume name and mount path even when the screen is smaller, wdyt?

caponetto · 2025-07-03T11:08:46Z

/assign

jenny-s51

Thank you for your review @paulovmr , and nice catch - I've updated the layout and column width to prevent the icons from wrapping. Glad to handle any more changes in a follow-up PR so we can handle it outside of this scope - let me know if this is what you had in mind.

paulovmr

Thanks @jenny-s51 !
/lgtm

paulovmr

@jenny-s51 Just one thing, I think we are only missing the change about the repeated <Th ... that @caponetto commented to be able to merge this PR.

jenny-s51

Thank you @paulovmr , updated.

paulovmr

/lgtm

paulovmr

.

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

paulovmr

/lgtm

ederign

/approve
/lgtm

google-oss-prow · 2025-07-07T19:09:43Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ederign

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~workspaces/frontend/OWNERS~~ [ederign]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

…flow#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

github-project-automation bot added this to Kubeflow Notebooks Jun 18, 2025

github-project-automation bot moved this to Needs Triage in Kubeflow Notebooks Jun 18, 2025

google-oss-prow bot requested review from ederign and kimwnasptd June 18, 2025 19:15

google-oss-prow bot added the size/XL label Jun 18, 2025

jenny-s51 mentioned this pull request Jun 18, 2025

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

Closed

jenny-s51 changed the title ~~fix(ws): updates to table columns~~ fix(ws): Updates to Table Columns, Expandable Rows, and Theming Jun 18, 2025

jenny-s51 changed the title ~~fix(ws): Updates to Table Columns, Expandable Rows, and Theming~~ fix(ws): Updates to Table Columns, Expandable Rows, and Theming Jun 18, 2025

caponetto reviewed Jun 27, 2025

View reviewed changes

google-oss-prow bot added area/frontend area - related to frontend components area/v2 area - version - kubeflow notebooks v2 labels Jun 27, 2025

jenny-s51 force-pushed the update-table-columns branch 5 times, most recently from 55cb797 to d654a5f Compare June 30, 2025 15:59

jenny-s51 requested a review from caponetto June 30, 2025 16:10

caponetto reviewed Jun 30, 2025

View reviewed changes

jenny-s51 force-pushed the update-table-columns branch from 2ff746a to 9409445 Compare July 2, 2025 13:58

google-oss-prow bot added the ok-to-test label Jul 2, 2025

jenny-s51 requested a review from caponetto July 2, 2025 14:12

paulovmr suggested changes Jul 2, 2025

View reviewed changes

google-oss-prow bot assigned paulovmr Jul 2, 2025

google-oss-prow bot assigned caponetto Jul 3, 2025

jenny-s51 force-pushed the update-table-columns branch from a8f0094 to 3dc1efc Compare July 3, 2025 15:55

jenny-s51 commented Jul 3, 2025

View reviewed changes

jenny-s51 requested a review from paulovmr July 3, 2025 15:58

paulovmr approved these changes Jul 4, 2025

View reviewed changes

google-oss-prow bot added the lgtm label Jul 4, 2025

paulovmr suggested changes Jul 4, 2025

View reviewed changes

google-oss-prow bot removed the lgtm label Jul 4, 2025

jenny-s51 force-pushed the update-table-columns branch 2 times, most recently from 46ab64c to ad51745 Compare July 7, 2025 13:00

jenny-s51 commented Jul 7, 2025

View reviewed changes

jenny-s51 requested a review from paulovmr July 7, 2025 16:48

paulovmr approved these changes Jul 7, 2025

View reviewed changes

google-oss-prow bot added the lgtm label Jul 7, 2025

paulovmr suggested changes Jul 7, 2025

View reviewed changes

google-oss-prow bot removed the lgtm label Jul 7, 2025

jenny-s51 force-pushed the update-table-columns branch from ce736b1 to 684b48b Compare July 7, 2025 18:29

jenny-s51 force-pushed the update-table-columns branch from 20973a2 to 7fa255c Compare July 7, 2025 18:45

paulovmr approved these changes Jul 7, 2025

View reviewed changes

google-oss-prow bot added the lgtm label Jul 7, 2025

ederign approved these changes Jul 7, 2025

View reviewed changes

google-oss-prow bot assigned ederign Jul 7, 2025

google-oss-prow bot added the approved label Jul 7, 2025

google-oss-prow bot merged commit 526ef9d into kubeflow:notebooks-v2 Jul 7, 2025
7 checks passed

github-project-automation bot moved this from Needs Triage to Done in Kubeflow Notebooks Jul 7, 2025

		@@ -32,18 +32,16 @@ describe('Application', () => {
		it('filter rows with multiple filters', () => {

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

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

Uh oh!

Conversation

jenny-s51 commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Table Updates

Theming & Visual Fixes (MUI-theme.scss)

Uh oh!

caponetto left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

caponetto Jul 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

paulovmr commented Jul 2, 2025

Uh oh!

paulovmr left a comment

Choose a reason for hiding this comment

Uh oh!

caponetto commented Jul 3, 2025

Uh oh!

jenny-s51 left a comment

Choose a reason for hiding this comment

Uh oh!

paulovmr left a comment

Choose a reason for hiding this comment

Uh oh!

paulovmr left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jenny-s51 left a comment

Choose a reason for hiding this comment

Uh oh!

paulovmr left a comment

Choose a reason for hiding this comment

Uh oh!

paulovmr left a comment

Choose a reason for hiding this comment

Uh oh!

paulovmr left a comment

Choose a reason for hiding this comment

Uh oh!

ederign left a comment

Choose a reason for hiding this comment

Uh oh!

google-oss-prow bot commented Jul 7, 2025

Uh oh!

Uh oh!

Uh oh!

jenny-s51 commented Jun 18, 2025 •

edited

Loading

caponetto Jul 2, 2025 •

edited

Loading

paulovmr left a comment •

edited

Loading