Skip to content

Improve layout of workspace items

Marcel van Remmerdenrequested to merge
simulate-workspace-items into master

What does this MR do and why?

  • It redesigns the User Workspaces UI to simplify how we communicate a Workspace's state and other important information.
  • It creates a calculateDisplayState function that implements business logic to calculate a Workspace's display state. This business logic is composed of a series of rules that determine how to visualize a Workspace's state in the UI. As a result, the implementation of Vue components that depend on the "display state" is significantly simpler. The workspace's displayState is calculated based on the Workspace's actualState and desiredState properties.
  • It creates an Storybook story that visualizes a Workspace's displayState for every combination of a Workspace's actualState and desiredState values.

How to review this Merge Request?

  • Start by looking at the changes in ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue. It contains the layout changes for the Workspaces Table.
  • Then take a look at ee/app/assets/javascripts/workspaces/dropdown_group/components/workspace_dropdown_item.vue. It contains the layout changes of the Workspaces Dropdown component.
  • ee/app/assets/javascripts/workspaces/common/services/calculate_display_state.js contains the core presentation logic to determine how to visualize a Workspace's state.
  • After that, all the other components contain straightforward implementations that rely on the Workspace's display state to display a label or a series of actions.

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

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
image.png workspace running screenshot.png
workspace starting screenshot.png
mobile.png
tablet.png
workspaces_dropdown_group_before.png image.png

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

I recommend using the Workspaces table's storybook page to check how this component display a Workspace based on any combination of "actual state" and "desired state":

  1. Run yarn storybook:start
  2. Open the following Story http://localhost:9002/?path=/story/ee-workspaces-workspaces-table--default

The story visualizes how the UI displays a Workspace for every combination of actualState and desiredState.

You can also test the frontend-backend integration by setting up Workspaces in your local environment. After you complete the setup instructions, create and terminate a Workspace.

Edited by Enrique Alcántara

Merge request reports