Implement header for workspace details page with workspace name and status badge
MR: Pending
Description
To improve the workspace failure visibility & troubleshooting, we need to implement a basic header for the workspace details page so that users can immediately identify the workspace name and its current status when viewing the details page.
This component will be later improved to include other workspace details in Improve the header section on Workspace details... (#565421)
Visual Changes
Acceptance criteria
-
Display workspace name prominently in the header -
Show workspace status in a colored badge (e.g., "Failed", "Running", "Stopped") -
Status badge uses appropriate color coding matching existing workspace list patterns -
Header layout is responsive and works across different screen sizes
Implementation plan
- Add header component to workspace details page layout
- Display the workspace name prominently in the header
- Add workspace status badge component reusing logic from workspaces-table vue component
- Test header display with different workspace states and names
- Ensure responsive design works on mobile and tablet viewports
Edited by Sahil Sharma