Skip to content

Draft: Separate terminated workspaces into a new tabbed list view

Cindy Halim requested to merge 409531-terminated-workspaces-tab into master

Issue: Separate terminated workspaces into a new tabbe... (#409531)

What does this MR do and why?

This MR separates terminated workspaces into a new tabbed list view. Due to this new change, a couple of new components were introduced and used in /workspaces/list.vue:

  • base-workspaces-list: a shared component that contains the header, loading state, error alert, and an empty state. This is mostly extracted from workspaces-list with a bit of refactor.
  • workspace-tab: this contains the tab component as well as the workspaces table and pagination. This component also performs userWorkspacesListQuery with includeActualStates as its variables to filter for non-terminated and terminated workspaces. This is done at the tab component level for better pagination UX.

Additionally, a toast is displayed when a workspace is successfully terminated.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

✅ Workspaces are separated into active and terminated tabs, each with their own paginations.

✅ Toast not displayed when navigating between paginations.

tabs_demo.mov

✅ Toast(s) is/are shown when a workspace is successfully terminated.

terminated_demo.mov

How to set up and validate locally

Prerequisites:

  • Need to have remote workspaces set up locally: setup doc.

Steps:

Edited by Cindy Halim

Merge request reports