Skip to content

[TASK] WorkspaceForm Summary Improvements #978

@thaorell

Description

@thaorell

Certification

  • I certify I am an Epic Owner for Kubeflow Notebooks 2.0 and expected to create planning-related issues.

Description

The workspace create/edit form renders a Summary as a right-side Drawer panel (WorkspaceFormSummaryPanel inside DrawerPanelContent in WorkspaceForm.tsx). This panel shows a stacked set of cards summarizing the user's selections across all four steps (Workspace Kind, Image, Pod Config, Properties).

As the number of selections grows — labels, descriptions, redirect popovers, volume/secret lists in Properties — the narrow drawer becomes cramped and requires scrolling to review everything before submitting. Moving the summary to its own full-width wizard step gives it more real estate and sets the stage for future enhancements (e.g., a YAML preview).

Additionally, in edit mode, SummaryDiffSection stacks "NEW" above "CURRENT" vertically with a Divider. A side-by-side Split layout would make it easier to compare original vs. changed values at a glance.

Proposal:

  1. Add a "Summary" step to the WorkspaceForm wizard (at least for Create; optionally for Edit). The step appears after "Properties" and renders the summary content at full page width instead of in the drawer. The existing WorkspaceFormSummaryPanel component can be reused as the step body — the main work is wiring it into WorkspaceForm.tsx as a step.
  2. Keep summary cards clickable. The cards already have isClickable and onClick={() => onNavigateToStep(step)}. Verify this works correctly when Summary is its own step (clicking a card should navigate backward in the wizard).
  3. Use Split/SplitItem in SummaryDiffSection to place "CURRENT" and "NEW" side by side instead of stacked vertically, making comparisons easier to read.

Acceptance Criteria

  • Summary step in the wizard. The progress stepper shows a "Summary" step after "Properties". The summary content renders at full page width.
  • Clickable cards navigate back. Clicking any summary card navigates the user back to that wizard step.
  • Side-by-side diff in edit mode. SummaryDiffSection uses Split/SplitItem to render "CURRENT" on the left and "NEW" on the right, instead of stacking vertically.
  • Drawer updated. The right-side drawer is hidden or removed on the Summary step. Decide whether to keep it as a live preview on non-summary steps or remove it entirely.
  • Submit button on Summary step. "Create" / "Save" replaces "Next" on the Summary step. "Previous" goes back to "Properties".
  • Existing tests pass. Cypress and unit tests for the workspace form continue to pass, with step index updates as needed.
  • New tests. Cypress test verifying the Summary step renders, cards navigate to the correct step, and the diff layout is side-by-side in edit mode.

Metadata

Metadata

Assignees

Labels

area/frontendarea - related to frontend componentsarea/v2area - version - kubeflow notebooks v2kind/plan-taskkind - planning - task

Type

No type

Projects

Status

Needs Triage

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions