Draft: Implementation: Revisit the Kubernetes section UX

What does this MR do and why?

This MR changes the Kubernetes section UX.

Current MR summaries changes to the Kubernetes section UX will be delivered in the following steps:

1. Move clusters_empty_state component to Vue --> !73064 (merged)
2. Change the navigation for the clusters base page --> !73163 (merged)
3. Change the copy and empty state illustrations in the existing components --> !73586 (merged)
4. 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 --> !73637 (merged)
5. Add the 'All' tab --> !74135 (merged)
6. Add an empty state variant for the Install new Agent modal --> !73636 (merged)

As we want to encourage our customers to use GitLab Agent, we are highlighting this option on the Kubernetes view.

Visual changes include:

1. Adding 3 tabs navigation to the Kubernetes view (All, Agent, Certificate based) with the static permalinks (ex: /clusters?tab=agent)
2. Adding the actions button with the set of actions in the dropdown that is permanent on each tab. Update: the default action is connect the Agent.
3. Adding a new view to show both Agent and Certificate based integrations as cards in the first tab. It shows up to 6 integrations in each card or the empty state.
   • Agent tab should have the Recommended badge showing the tooltip on hover with some info and link to the docs.
   • In case there are no connected agents it should show the Install new Agent button that opens the popup for the Agent creation UI
   • Otherwise, there should appear a link to the agents' tab saying View all %{number} Agent based integrations. The number of the integrations should be shown here only if it's more than 6.
   • In case there are no clusters connected via certificate it should show the button Connect existing cluster that navigates to the /clusters/new?tab=add view
   • Otherwise, there should appear a link to the clusters' tab saying View all %{number} Certificate based integrations with the same logic as for the agents' card
4. Two other tabs remain unchanged except:
   • Copy changes
   • Removing the action buttons as there are already present on the top of the page
   • Update: the action button on the bottom of the empty state will remain on the Agent and Certificate based tabs.

---

There were some implementation changes required to make the above changes work:

1. The empty state for the clusters' view was moved to the Vue component
2. Tabs on the /clusters/new/ page were changed to have individual links (using tab query param). More work on this page is planned, it will split into two different pages soon.
3. The Agents and Clusters Vue components were changed to be served as child components. For now, we still have the case where the Clusters component is used as the root (ex. on the group level clusters view). This MR is planned to be deployed after we move Agent to the Core, so there won't be a need for the Clusters Vue component served as the root on project level Kubernetes section.
4. The Agent creation modal was moved to the new root component so that it can be used both on the Agents' card and in the Actions dropdown.
5. The limit parameter was added to both Agents and Clusters components as we now need to show only up to 6 on the All tab.

---

There is some work remaining:

1. Adding badges with clusters numbers to the tabs navigation
2. Changing empty state illustration for the Agent card

Screenshots or screen recordings

All tab view:

• With both empty states

• With one empty state

• With less than 6 integrations

• With more than 6 integratinos

Actions dropdown:

• Create new cluster leads to /clusters/new?tab=create
• Connect with agent opens the Agent creation modal (note: @jmandell, @nagyv-gitlab, I capitalised the Agent here)
• Connect with certificate leads to /clusters/new?tab=add

Recommended badge:

note: @jmandell, @nagyv-gitlab, I moved the tooltip to appear below the button so that it doesn't overlay the actions dropdown

Agent tab:

1. Empty state
2. With content

Certificate based clusters tab:

1. Empty state
2. With content

Admin and group clusters view (no visual changes):

Screen recording for data present

In this screen recording I am doing the following steps:

1. Open Clusters view --> you can see the loading animation
2. Navigate to the Agents tab via the link in the card footer --> you can see that it shows 6 of 7 agents for the All tab and all of them for the Agent tab - the limit for the Agent view is 25 before the pagination appears; you can also see the new loading animation when switching the tabs as I set it to lazy load so that we don't load all tabs at once.
3. View the Actions dropdown
4. View the Certificate based clusters tab --> it loads very fast so we can't see the loading animation here; my clusters are deleted from GKE, that's why it can't fetch their statuses

Screen_Recording_1

Screen recording for Actions dropdown

In this screen recording I am doing the following steps:

1. Open the All tab and go to the Actions dropdown --> you can see how I usually get confused here when I want to open the dropdown but accidently hover over the recommended label
2. Navigate to the new cluster creation page via the Actions dropdown
3. Navigate to the connecting existing cluster via the Actions dropdown --> you can see that it opens the proper tab
4. Open Install new Agent modal via the Actions dropdown and connect a new agent --> you can see how the list is updated after the creation

Screen_Recording_2

Screen recording of empty states

In this screen recording I am doing the following steps:

1. Open Clusters view with no Agents and no clusters connected
2. Go through all the tabs
3. Open Instal new Agent modal via the button in the card footer
4. Navigate to the connecting existing cluster view via the button in the card footer

Screen_Recording_3

How to set up and validate locally

1. Visit the Infrastructure -> Kubernetes clusters section
2. To add content to the view follow these guides:
   • for Agents
   • for Certificate based integrations

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #340759 (closed)