Move the options "Create new cluster" and "Connect existing cluster" to the listing page

Problem to solve

After the agent was released the experience of selecting Create new cluster and Add existing cluster (under the tab Cluster integrated with certificate) includes onboarding information about Kubernetes that is not relevant any more as this will be the second step of the new flow. Also the user flow is not intuitive any more and involves too many tabs where the information hierarchy is not clear not represented in the UI. In addition there is no way to go back (besides the browser back button).

The problem in a nutshell:

When the users click the button “Connect cluster with certificate” they navigate to this page:

Screenshot_2020-09-23_at_19.28.05 Screen 2 - Old landing page for cluster integration

The UX problems with this:

  • The tabs GitLab Agent managed clusters and Clusters connected with Certificate are not visible in this flow (screen 2).
  • If the user changes his/her mind there is no obvious way in the UI to navigate back (besides the browser back button).
  • The hierarchy is not visible. The top level: clusters integrated with certificate is missing from this view.
  • This page looks like a Kubernetes intro page because of the text on the left in screen 2.
  • The look and feel of tabs is different creating a sense of inconsistency.

Video recording from the current navigation

Kubernetes_nav_experience

Proposal

This is part of the work that needs to be done for #254998 (closed).

This UI is outdated and does not serve the same navigation purposes it did before we introduced the Agent tab. To improve the navigation and usability of the page I propose to make the following changes.

  1. Add the two actions Create new cluster and Connect existing cluster in the tab Clusters connected with a certificate (designs for the empty state and the listing page are provided below).
  2. Remove the tabs Create new cluster and Connect existing cluster from the page that the navigation Operations -> Kubernetes -> Integrate with a cluster certificate/Connect cluster with certificate leads to.
  3. Redesign the initial pages Create new cluster and Connect existing cluster. Remove the help text on the left and make the buttons full width. (designs are provided below).

1. Add the two actions Create new cluster and Connect existing cluster in the tab Clusters connected with a certificate

001__Kubernetes_clusters_-_Actions__1__copy

002__Kubernetes_clusters_-_Actions__2__copy_2

000__Kubernetes_clusters-Empty_state

2&3. Remove the tabs Create new cluster and Connect existing cluster and redesign the page under "Connect cluster with certificate"

Connect existing cluster

003__Kubernetes_clusters_-connect_existing_cluster__1

004__Kubernetes_clusters_-connect_existing_cluster__2

Create new cluster

005__Kubernetes_clusters_-create_new_cluster__1

006__Kubernetes_clusters_-create_new_cluster__2

007__Kubernetes_clusters_-create_new_cluster__3

010__Kubernetes_clusters_-create_new_cluster__4 Connect existing cluster

003__Kubernetes_clusters_-connect_existing_cluster__1

004__Kubernetes_clusters_-connect_existing_cluster__2

Intended users

Next steps (issue #254998 (closed)):

  • Improve the language to reflect the users' mental model around the GitLab Kubernetes management.
  • Introduce an All tab where cluster for both integration types will be shown.
  • Update the breadcrumb to reflect all the hierarchies of the navigation.
Edited by Maria Vrachni