CHE 5258 Restyle main tab panels

[olexii4]

What does this PR do?

Restyle main tab panels.

What issues does this PR fix or reference?

eclipse-che/che#5257

Changelog

-- Restyle main tab panels.

Release Note

This version introduces a major usability improvement on the dashboard. In the latest versions of Che, we focused on providing a new flow to create workspaces. Now, we are introducing a new way of managing your workspace and configuring it.

We splited the configuration of a workspace into new sections:

• Overview: Define the main workspace information
• Projects: Manage the projects from your workspace
• Machines: Define the runtime used by the workspace
• Agents: Configure the tools that you want to install the workspace
• Servers: Access services that are running in your workspace and expose their ports
• Env Variable: Define the environment variable for the workspace
• Config: Get the json configuration of the workspace
• SSH: Connect to your workspace over SSH
• Share: Share workspace with your team mates

[Insert Machine gif]

You can easily manage the machines of your workspace. You can define multiple machines, by using a recipe (dockerfile or composfile). You can easily define which of the machine must be used as dev-machine which will get the projects mounted in. Also, it is simpler to configure the RAM for each of the machines of your workspace.

[Insert Agent gif]

Configuring the tools that are injected into each of the machine you are using in your workspace is now getting simpler. The dedicated tab, allow you to select a machine and just toggle on/off each of the Agents you want to enable or disable.

[Insert Servers gif]

Easily get information about the services that are running in your workspace (when the workspace is running). You can also expose new services which can be used by external ports.

[Insert Env Variables gif]

In certain situation, you might need to configure certain environment variables for your machine. This can be done as part of the machine's recipe, but we are now making it simpler, by providing the ability to manage that directly from the dashboard.

We are looking forward to hearing your feedback on this important improvements on the way you can manage and configure your workspaces.

[ashumilova]

@slemeur should docs be updated with this PR or when whole flow is ready?

[slemeur]

@ashumilova: The functions and features of the dashboard are not changed by the PR, it's styles that are updated. This PR imply to update the screenshots we have in the docs. I think we should create an issue in docs in order to plan that work and make it needed for this merging PR.

When the flow, workspace details will be changed, we will have to revisit the explanations we have on docs, it will be more important work where you will get help in order to edits those.