# Release notes https://docs.gitlab.com/ee/user/clusters/agent/#management-interfaces Having an overview of available clusters from a GitLab project is the first step in setting up new deployments or for troubleshooting. With the introduction of [the GitLab Kubernetes Agent](https://docs.gitlab.com/ee/user/clusters/agent/), the related pages were hard to navigate and features were sometimes hard to find or understand. To support our users, we redesigned the Kubernetes management pages, and we are rolling out this design at the project level pages in this release. The new design provides first-class support for Agent and certificate based cluster connections alike. # Problem to solve When a user lands on the Kubernetes section it is not clear what options they have for integrating their Kubernetes infrastructure with GitLab. The language we use on the UI is confusing and the documentation is not helpful either to help them understand what options they have, what use cases each solution can be used for, what benefits and drawbacks there are in each option. The Agent and cluster listings are confusing as the terminology is not consistent and we use our internal understanding to describe GitLab's Kubernetes offering. Finally, we make a distinction between Agents and clusters connected with certificate even though we don't know what the mental model of the users is. Do they consider these two ways to connect their clusters to GitLab or do they also consider them to be separate Kubernetes solutions? # Intended users * [Sasha (Software Developer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sasha-software-developer) * [Devon (DevOps Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#devon-devops-engineer) * [Sidney (Systems Administrator)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sidney-systems-administrator) * [Priyanka (Platform Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#priyanka-platform-engineer) # User experience goal Make all the Kubernetes integrations options clear for the user so that they can choose the option that helps them achieve their goals. # Proposal [The design issue and discussion can be found here](https://gitlab.com/gitlab-org/gitlab/-/issues/254998) - **Redesign the Kubernetes landing page** so that all the integrations and integration options are present. Clear and concise information should give an overview of what options the user has for integrating their Kubernetes infrastructure with GitLab. All possible integrations should be available from the landing page. - **Fix the breadcrumb** so that it reflects the hierarchy and navigation. - **Change the way we speak** about the GitLab Kubernetes management offerings. Use a language that is clear and understandable even to users who know nothing about the Agent or the certificate-based integrations. Modify all the copy in the UI with the updated language. - Make the **language consistent** on all the UI components. ## Empty state [<img src="/uploads/d5375e2adf651f2483e4fac5e796bcc0/image.png" width=50%>](https://gitlab.com/gitlab-org/gitlab/-/issues/254998/designs/000__Kubernetes_integrations_-_All_tabs_Stacked_Cards.png) ## State with content Long-term design vision [<img src="/uploads/ed6c5448b9efe9c0ede28d1b382b2022/image.png" width=50%>](https://gitlab.com/gitlab-org/gitlab/-/issues/254998/designs/003__Kubernetes_integrations_-_All_tabs_Stacked_Cards.png) ## Iteration 1: new overall UI - Empty state design - Content design should implements - 3 tabs at the top - "All" tab should show the currently existing listings one under the other - The other 2 tabs should show the currently existing listings - Actions button is constant across tabs: * Create new cluster * Connect with agent * Connect with certificate ## Iteration 2: fix the links - Each tab should have a "permalink" - reloading the page should show the current tab - The "Add Kubernetes cluster" think on the main project page ([example here](https://gitlab.com/gitlab-examples/ops/configure-product-walkthrough/)) should point to the "Connect with agent" page # Related issues - Redesign the flow and UI under `Connect with certificate`: https://gitlab.com/gitlab-org/gitlab/-/issues/325319 - Solution validation for this issue: https://gitlab.com/gitlab-org/gitlab/-/issues/325716 # Documentation Created an issue to improve the documentation as well as the navigation for Kubernetes: https://gitlab.com/gitlab-org/gitlab/-/issues/324030 # Links / references Figma (design) file: https://www.figma.com/file/J1BRYrcK8fZ6YK9lcMhcYp/Revisit-the-Kubernetes-cluster-UX-after-the-Agent-is-released-project-254998?node-id=2%3A50 # Implementation plan We are going to deliver this issue in the following steps with separate MRs: - [x] Move clusters empty state to Vue --> gitlab-org/gitlab!73064 - [x] Change the navigation for the clusters based page --> gitlab-org/gitlab!73163 - [x] Change the copy and empty state illustrations in the existing components --> gitlab-org/gitlab!73586 - [x] Change the navigation on the clusters page to Vue and actions button on the top of the page (introducing the `clusters_main_view` and `clusters_actions` components --> gitlab-org/gitlab!73637 - [x] Add the 'All' tab --> gitlab-org/gitlab!74135 - [x] Add an empty state variant for the **Install new Agent** modal --> gitlab-org/gitlab!73636 - will be implemented in the follow-up gitlab-org/gitlab#345893