[TASK] Render structured workspace status in frontend
- Dominant language
- No language data
- Stars
- 84
- Forks
- 149
- Avg merge
- 5d 15h
- Merged PRs (30d)
- 29
Description
### Certification
- [x] I certify I am an Epic Owner for Kubeflow Notebooks 2.0 and expected to create planning-related issues.
### Description
🛑 **Depends on:** #1194
Updates the frontend to surface sub-state detail alongside the existing summary state rendering.
The summary `state` continues to be the primary rendering signal (colored label), but users gain
access to richer status information.
#### Current Rendering
The frontend renders state as a single colored ``:
```tsx
{workspace.state}
```
Color mapping in `WorkspaceUtils.ts`:
- Running → green, Pending → orange, Terminating → yellow
- Error → red, Paused → purple, Unknown → grey
#### What Changes
With structured sub-states available, the frontend can:
- Continue using the summary state for the primary label color and text
- Show sub-state detail on hover (tooltip), in an expandable section, or on the workspace detail
page
- Surface specific actionable information: "Error: ImagePullBackOff" is more useful than "Error"
- Show compound states: "Running" with a warning indicator if a restart is pending
The specific UX treatment is up to the implementer — the requirement is that sub-state information
is accessible to users who want more detail, without cluttering the default list view.
#### Related Frontend Item
The default state in the Workspace table should be "Unknown" even when a Workspace
was just created, rather than rendering an empty/broken "pill". This task should ensure the initial
state renders cleanly.
#### Goals
- Regenerate OpenAPI client: update `swagger.version`, run `npm run generate:api`
- Workspace list table: enhanced state label or tooltip showing sub-state detail
- Workspace detail view: structured display of all sub-states
- Handle the initial/empty state gracefully ("Unknown" with clean rendering)
- Graceful degradation if sub-state fields are absent (older controller version)
- Unit tests for new components
- Cypress tests for sub-state display with mock data
### Acceptance Criteria
- [ ] OpenAPI client regenerated with sub-state types from updated swagger spec
- [ ] Summary state continues to render as a colored label (primary indicator)
- [ ] Sub-state detail is accessible in the UI (tooltip, detail view, or expandable section)
- [ ] Error sub-states show specific reason information (e.g., "ImagePullBackOff" rather than
just "Error")
- [ ] Compound states are surfaced (e.g., "Running" with pending restart indicator)
- [ ] Initial/new workspace renders "Unknown" cleanly rather than an empty circle
- [ ] Graceful degradation when sub-state fields are absent in the API response
- [ ] Unit tests cover sub-state rendering with various state combinations
- [ ] Cypress tests verify sub-state display with mock data
Contributor guide
Research direction
Start with the dependency on #1194, regenerate the client with the swagger.version update using npm run generate:api, and read WorkspaceUtils.ts plus the existing workspace table and detail views. Implement accessible sub-state display while preserving the summary label and cleanly handling absent or empty fields. Add unit tests for state combinations and Cypress tests using mock data.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cypress, openapi, typescript
- Domain
- api, frontend, testing-qa
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100