Merge branch '352721-add-feature-flag-for-the-cluster-creation-page' into 'master'

Add new page for the cluster creation

See merge request gitlab-org/gitlab!83041

app/assets/javascripts/clusters_list/components/clusters_actions.vue

 <script>
-import {
-  GlButton,
-  GlDropdown,
-  GlDropdownItem,
-  GlModalDirective,
-  GlTooltipDirective,
-  GlDropdownDivider,
-  GlDropdownSectionHeader,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlModalDirective, GlTooltip } from '@gitlab/ui';
 
 import { INSTALL_AGENT_MODAL_ID, CLUSTERS_ACTIONS } from '../constants';
 
@@ -15,37 +7,40 @@ export default {
   i18n: CLUSTERS_ACTIONS,
   INSTALL_AGENT_MODAL_ID,
   components: {
-    GlButton,
     GlDropdown,
     GlDropdownItem,
-    GlDropdownDivider,
-    GlDropdownSectionHeader,
+    GlTooltip,
   },
   directives: {
     GlModalDirective,
-    GlTooltip: GlTooltipDirective,
   },
   inject: [
     'newClusterPath',
     'addClusterPath',
+    'newClusterDocsPath',
     'canAddCluster',
     'displayClusterAgents',
     'certificateBasedClustersEnabled',
   ],
   computed: {
-    tooltip() {
-      const { connectWithAgent, connectExistingCluster, dropdownDisabledHint } = this.$options.i18n;
+    shouldTriggerModal() {
+      return this.canAddCluster && this.displayClusterAgents;
+    },
+    defaultActionText() {
+      const { connectCluster, connectWithAgent, connectClusterDeprecated } = this.$options.i18n;
 
-      if (!this.canAddCluster) {
-        return dropdownDisabledHint;
-      } else if (this.displayClusterAgents) {
-        return connectWithAgent;
+      if (!this.displayClusterAgents) {
+        return connectClusterDeprecated;
+      } else if (!this.certificateBasedClustersEnabled) {
+        return connectCluster;
       }
-
-      return connectExistingCluster;
+      return connectWithAgent;
     },
-    shouldTriggerModal() {
-      return this.canAddCluster && this.displayClusterAgents;
+    defaultActionUrl() {
+      if (this.displayClusterAgents) {
+        return null;
+      }
+      return this.addClusterPath;
     },
   },
 };
@@ -53,46 +48,50 @@ export default {
 
 <template>
   <div class="nav-controls gl-ml-auto">
+    <gl-tooltip
+      v-if="!canAddCluster"
+      :target="() => $refs.dropdown.$el"
+      :title="$options.i18n.dropdownDisabledHint"
+    />
+
     <gl-dropdown
-      v-if="certificateBasedClustersEnabled"
       ref="dropdown"
       v-gl-modal-directive="shouldTriggerModal && $options.INSTALL_AGENT_MODAL_ID"
-      v-gl-tooltip="tooltip"
       category="primary"
       variant="confirm"
-      :text="$options.i18n.actionsButton"
+      :text="defaultActionText"
       :disabled="!canAddCluster"
-      :split="displayClusterAgents"
+      :split-href="defaultActionUrl"
+      split
       right
     >
-      <template v-if="displayClusterAgents">
-        <gl-dropdown-section-header>{{ $options.i18n.agent }}</gl-dropdown-section-header>
-        <gl-dropdown-item
-          v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
-          data-testid="connect-new-agent-link"
-        >
-          {{ $options.i18n.connectWithAgent }}
+      <gl-dropdown-item
+        v-if="displayClusterAgents"
+        :href="newClusterDocsPath"
+        data-testid="create-cluster-link"
+        @click.stop
+      >
+        {{ $options.i18n.createCluster }}
+      </gl-dropdown-item>
+
+      <template v-if="displayClusterAgents && certificateBasedClustersEnabled">
+        <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link" @click.stop>
+          {{ $options.i18n.createClusterCertificate }}
+        </gl-dropdown-item>
+
+        <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link" @click.stop>
+          {{ $options.i18n.connectClusterCertificate }}
         </gl-dropdown-item>
-        <gl-dropdown-divider />
-        <gl-dropdown-section-header>{{ $options.i18n.certificate }}</gl-dropdown-section-header>
       </template>
 
-      <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link" @click.stop>
-        {{ $options.i18n.createNewCluster }}
-      </gl-dropdown-item>
-      <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link" @click.stop>
-        {{ $options.i18n.connectExistingCluster }}
+      <gl-dropdown-item
+        v-if="certificateBasedClustersEnabled && !displayClusterAgents"
+        :href="newClusterPath"
+        data-testid="new-cluster-link"
+        @click.stop
+      >
+        {{ $options.i18n.createClusterDeprecated }}
       </gl-dropdown-item>
     </gl-dropdown>
-    <gl-button
-      v-else
-      v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
-      v-gl-tooltip="tooltip"
-      :disabled="!canAddCluster"
-      category="primary"
-      variant="confirm"
-    >
-      {{ $options.i18n.connectWithAgent }}
-    </gl-button>
   </div>
 </template>

app/assets/javascripts/clusters_list/constants.js

@@ -252,12 +252,13 @@ export const CERTIFICATE_TAB = {
 export const CLUSTERS_TABS = [ALL_TAB, AGENT_TAB, CERTIFICATE_TAB];
 
 export const CLUSTERS_ACTIONS = {
-  actionsButton: s__('ClusterAgents|Actions'),
-  createNewCluster: s__('ClusterAgents|Create a new cluster'),
-  connectWithAgent: s__('ClusterAgents|Connect with an agent'),
-  connectExistingCluster: s__('ClusterAgents|Connect with a certificate'),
-  agent: s__('ClusterAgents|Agent'),
-  certificate: s__('ClusterAgents|Certificate'),
+  connectCluster: s__('ClusterAgents|Connect a cluster'),
+  connectWithAgent: s__('ClusterAgents|Connect a cluster (agent)'),
+  connectClusterDeprecated: s__('ClusterAgents|Connect a cluster (deprecated)'),
+  createClusterDeprecated: s__('ClusterAgents|Create a cluster (deprecated)'),
+  createCluster: s__('ClusterAgents|Create a cluster'),
+  createClusterCertificate: s__('ClusterAgents|Create a cluster (certificate - deprecated)'),
+  connectClusterCertificate: s__('ClusterAgents|Connect a cluster (certificate - deprecated)'),
   dropdownDisabledHint: s__(
     'ClusterAgents|Requires a Maintainer or greater role to perform these actions',
   ),

app/assets/javascripts/clusters_list/index.js

@@ -25,6 +25,7 @@ export default () => {
     kasAddress,
     newClusterPath,
     addClusterPath,
+    newClusterDocsPath,
     emptyStateHelpText,
     clustersEmptyStateImage,
     canAddCluster,
@@ -43,6 +44,7 @@ export default () => {
       kasAddress,
       newClusterPath,
       addClusterPath,
+      newClusterDocsPath,
       emptyStateHelpText,
       clustersEmptyStateImage,
       canAddCluster: parseBoolean(canAddCluster),

app/controllers/clusters/clusters_controller.rb

@@ -14,7 +14,7 @@ class Clusters::ClustersController < Clusters::BaseController
   before_action :authorize_create_cluster!, only: [:new, :connect, :authorize_aws_role]
   before_action :authorize_update_cluster!, only: [:update]
   before_action :update_applications_status, only: [:cluster_status]
-  before_action :ensure_feature_enabled!, except: :index
+  before_action :ensure_feature_enabled!, except: [:index, :new_cluster_docs]
 
   helper_method :token_in_session
 

app/helpers/clusters_helper.rb

@@ -19,6 +19,7 @@ module ClustersHelper
       empty_state_help_text: clusterable.empty_state_help_text,
       new_cluster_path: clusterable.new_path,
       add_cluster_path: clusterable.connect_path,
+      new_cluster_docs_path: clusterable.new_cluster_docs_path,
       can_add_cluster: clusterable.can_add_cluster?.to_s,
       can_admin_cluster: clusterable.can_admin_cluster?.to_s,
       display_cluster_agents: display_cluster_agents?(clusterable).to_s,

app/presenters/clusterable_presenter.rb

@@ -36,6 +36,10 @@ class ClusterablePresenter < Gitlab::View::Presenter::Delegated
     polymorphic_path([clusterable, :clusters], action: :connect)
   end
 
+  def new_cluster_docs_path
+    polymorphic_path([clusterable, :clusters], action: :new_cluster_docs)
+  end
+
   def authorize_aws_role_path
     polymorphic_path([clusterable, :clusters], action: :authorize_aws_role)
   end

app/presenters/instance_clusterable_presenter.rb

@@ -43,6 +43,11 @@ class InstanceClusterablePresenter < ClusterablePresenter
     connect_admin_clusters_path
   end
 
+  override :new_cluster_docs_path
+  def new_cluster_docs_path
+    nil
+  end
+
   override :create_user_clusters_path
   def create_user_clusters_path
     create_user_admin_clusters_path

app/views/clusters/clusters/_sidebar.html.haml

+- is_connect_page = local_assigns.fetch(:is_connect_page, false)
+- docs_mode = local_assigns.fetch(:docs_mode, false)
+- title = is_connect_page ? s_('ClusterIntegration|Connect a Kubernetes cluster') : s_('ClusterIntegration|Create a Kubernetes cluster')
+
 %h3
-  = s_('ClusterIntegration|Connect a Kubernetes cluster')
+  = title
 %p
   = clusterable.sidebar_text
-%p
-  = clusterable.learn_more_link
 
-= render 'clusters/clusters/multiple_clusters_message'
+- if !docs_mode
+  %p
+    = clusterable.learn_more_link
+
+  = render 'clusters/clusters/multiple_clusters_message'

app/views/clusters/clusters/cloud_providers/_cloud_provider_button.html.haml

 - provider = local_assigns.fetch(:provider)
 - is_current_provider = provider == params[:provider]
 - logo_path = local_assigns.fetch(:logo_path)
+- help_path = local_assigns.fetch(:help_path)
 - label = local_assigns.fetch(:label)
 - last = local_assigns.fetch(:last, false)
-- classes = ["btn btn-confirm gl-button btn-confirm-secondary gl-flex-direction-column gl-w-half js-create-#{provider}-cluster-button"]
-- conditional_classes = [('gl-mr-5' unless last), ('active' if is_current_provider)]
+- docs_mode = local_assigns.fetch(:docs_mode, false)
+- classes = ["btn btn-confirm gl-button btn-confirm-secondary gl-flex-direction-column gl-w-half"]
+- conditional_classes = [("gl-mr-5" unless last), ("active" if is_current_provider && !docs_mode), ("js-create-#{provider}-cluster-button" if !docs_mode)]
+- link = docs_mode ? help_path : clusterable.new_path(provider: provider)
 
-= link_to clusterable.new_path(provider: provider), class: classes + conditional_classes do
-  .svg-content.gl-p-3= image_tag logo_path, alt: label, class: 'gl-w-64 gl-h-64'
+= link_to link, class: classes + conditional_classes do
+  .svg-content.gl-p-3= image_tag logo_path, alt: label, class: "gl-w-64 gl-h-64"
   %span
     = label

app/views/clusters/clusters/cloud_providers/_cloud_provider_selector.html.haml

 - gke_label = s_('ClusterIntegration|Google GKE')
 - eks_label = s_('ClusterIntegration|Amazon EKS')
 - create_cluster_label = s_('ClusterIntegration|Where do you want to create a cluster?')
+- eks_help_path = help_page_path('user/infrastructure/clusters/connect/new_eks_cluster')
+- gke_help_path = help_page_path('user/infrastructure/clusters/connect/new_gke_cluster')
+- docs_mode = local_assigns.fetch(:docs_mode, false)
+
 .gl-p-5
   %h4.gl-mb-5
     = create_cluster_label
   .gl-display-flex
     = render partial: 'clusters/clusters/cloud_providers/cloud_provider_button',
-      locals: { provider: 'aws', label: eks_label, logo_path: 'illustrations/logos/amazon_eks.svg' }
+      locals: { provider: 'aws', label: eks_label, logo_path: 'illustrations/logos/amazon_eks.svg', help_path: eks_help_path, docs_mode: docs_mode }
     = render partial: 'clusters/clusters/cloud_providers/cloud_provider_button',
-      locals: { provider: 'gcp', label: gke_label, logo_path: 'illustrations/logos/google_gke.svg', last: true }
+      locals: { provider: 'gcp', label: gke_label, logo_path: 'illustrations/logos/google_gke.svg', help_path: gke_help_path, docs_mode: docs_mode, last: true }

app/views/clusters/clusters/connect.html.haml

@@ -3,9 +3,9 @@
 - breadcrumb_title _('Connect a cluster')
 - page_title _('Connect a Kubernetes Cluster')
 
-.row.gl-mt-3
-  .col-md-3
-    = render 'sidebar'
-  .col-md-9
+.gl-md-display-flex.gl-mt-3
+  .gl-w-quarter.gl-xs-w-full.gl-flex-shrink-0.gl-md-mr-5
+    = render 'sidebar', is_connect_page: true
+  .gl-w-full
     #js-cluster-new{ data: js_cluster_new }
     = render 'clusters/clusters/user/form'

app/views/clusters/clusters/new.html.haml

@@ -6,10 +6,10 @@
 
 = render_gcp_signup_offer
 
-.row.gl-mt-3
-  .col-md-3
-    = render 'sidebar'
-  .col-md-9
+.gl-md-display-flex.gl-mt-3
+  .gl-w-quarter.gl-xs-w-full.gl-flex-shrink-0.gl-md-mr-5
+    = render 'sidebar', is_connect_page: false
+  .gl-w-full
     = render 'clusters/clusters/cloud_providers/cloud_provider_selector'
 
     - if ['aws', 'gcp'].include?(provider)

app/views/clusters/clusters/new_cluster_docs.html.haml

+- @content_class = 'limit-container-width' unless fluid_layout
+- add_to_breadcrumbs _('Kubernetes Clusters'), clusterable.index_path
+- breadcrumb_title _('Create a cluster')
+- page_title _('Create a Kubernetes cluster')
+- docs_mode = true
+
+= render_gcp_signup_offer
+
+.gl-md-display-flex.gl-mt-3
+  .gl-w-quarter.gl-xs-w-full.gl-flex-shrink-0.gl-md-mr-5
+    = render 'sidebar', docs_mode: docs_mode, is_connect_page: false
+  .gl-w-full
+    = render 'clusters/clusters/cloud_providers/cloud_provider_selector', docs_mode: docs_mode

config/routes.rb

@@ -237,6 +237,7 @@ Rails.application.routes.draw do
     resources :clusters, only: [:index, :new, :show, :update, :destroy] do
       collection do
         get  :connect
+        get  :new_cluster_docs
         post :create_user
         post :create_gcp
         post :create_aws

locale/gitlab.pot

@@ -7822,9 +7822,6 @@ msgstr ""
 msgid "ClusterAgents|Access tokens"
 msgstr ""
 
-msgid "ClusterAgents|Actions"
-msgstr ""
-
 msgid "ClusterAgents|Add an agent configuration file to %{linkStart}this repository%{linkEnd} and select it, or create a new one to register with GitLab:"
 msgstr ""
 
@@ -7879,16 +7876,22 @@ msgstr ""
 msgid "ClusterAgents|Configuration"
 msgstr ""
 
-msgid "ClusterAgents|Connect a cluster through an agent"
+msgid "ClusterAgents|Connect a cluster"
 msgstr ""
 
-msgid "ClusterAgents|Connect existing cluster"
+msgid "ClusterAgents|Connect a cluster (agent)"
+msgstr ""
+
+msgid "ClusterAgents|Connect a cluster (certificate - deprecated)"
+msgstr ""
+
+msgid "ClusterAgents|Connect a cluster (deprecated)"
 msgstr ""
 
-msgid "ClusterAgents|Connect with a certificate"
+msgid "ClusterAgents|Connect a cluster through an agent"
 msgstr ""
 
-msgid "ClusterAgents|Connect with an agent"
+msgid "ClusterAgents|Connect existing cluster"
 msgstr ""
 
 msgid "ClusterAgents|Connect with the GitLab Agent"
@@ -7906,7 +7909,13 @@ msgstr ""
 msgid "ClusterAgents|Copy token"
 msgstr ""
 
-msgid "ClusterAgents|Create a new cluster"
+msgid "ClusterAgents|Create a cluster"
+msgstr ""
+
+msgid "ClusterAgents|Create a cluster (certificate - deprecated)"
+msgstr ""
+
+msgid "ClusterAgents|Create a cluster (deprecated)"
 msgstr ""
 
 msgid "ClusterAgents|Create agent access token"
@@ -8289,6 +8298,9 @@ msgstr ""
 msgid "ClusterIntegration|Create Kubernetes cluster"
 msgstr ""
 
+msgid "ClusterIntegration|Create a Kubernetes cluster"
+msgstr ""
+
 msgid "ClusterIntegration|Creating Kubernetes cluster"
 msgstr ""
 

spec/features/admin/clusters/eks_spec.rb

@@ -15,8 +15,8 @@ RSpec.describe 'Instance-level AWS EKS Cluster', :js do
     before do
       visit admin_clusters_path
 
-      click_button 'Actions'
-      click_link 'Create a new cluster'
+      click_button(class: 'dropdown-toggle-split')
+      click_link 'Create a cluster (deprecated)'
     end
 
     context 'when user creates a cluster on AWS EKS' do

spec/features/clusters/create_agent_spec.rb

@@ -25,7 +25,7 @@ RSpec.describe 'Cluster agent registration', :js do
   end
 
   it 'allows the user to select an agent to install, and displays the resulting agent token' do
-    click_button('Actions')
+    click_button('Connect a cluster')
     expect(page).to have_content('Register')
 
     click_button('Select an agent')

spec/features/groups/clusters/eks_spec.rb

@@ -20,8 +20,8 @@ RSpec.describe 'Group AWS EKS Cluster', :js do
     before do
       visit group_clusters_path(group)
 
-      click_button 'Actions'
-      click_link 'Create a new cluster'
+      click_button(class: 'dropdown-toggle-split')
+      click_link 'Create a cluster (deprecated)'
     end
 
     context 'when user creates a cluster on AWS EKS' do

spec/features/projects/clusters/eks_spec.rb

@@ -20,7 +20,7 @@ RSpec.describe 'AWS EKS Cluster', :js do
       visit project_clusters_path(project)
 
       click_button(class: 'dropdown-toggle-split')
-      click_link 'Create a new cluster'
+      click_link 'Create a cluster (certificate - deprecated)'
     end
 
     context 'when user creates a cluster on AWS EKS' do

spec/features/projects/clusters/gcp_spec.rb

@@ -135,7 +135,7 @@ RSpec.describe 'Gcp Cluster', :js do
           visit project_clusters_path(project)
 
           click_button(class: 'dropdown-toggle-split')
-          click_link 'Connect with a certificate'
+          click_link 'Connect a cluster (certificate - deprecated)'
         end
 
         it 'user sees the "Environment scope" field' do
@@ -220,6 +220,6 @@ RSpec.describe 'Gcp Cluster', :js do
 
   def visit_create_cluster_page
     click_button(class: 'dropdown-toggle-split')
-    click_link 'Create a new cluster'
+    click_link 'Create a cluster (certificate - deprecated)'
   end
 end

spec/features/projects/clusters_spec.rb

@@ -222,11 +222,11 @@ RSpec.describe 'Clusters', :js do
     visit project_clusters_path(project)
 
     click_button(class: 'dropdown-toggle-split')
-    click_link 'Create a new cluster'
+    click_link 'Create a cluster (certificate - deprecated)'
   end
 
   def visit_connect_cluster_page
     click_button(class: 'dropdown-toggle-split')
-    click_link 'Connect with a certificate'
+    click_link 'Connect a cluster (certificate - deprecated)'
   end
 end

spec/frontend/clusters_list/components/clusters_actions_spec.js

-import { GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlTooltip } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ClustersActions from '~/clusters_list/components/clusters_actions.vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
@@ -7,12 +7,14 @@ import { INSTALL_AGENT_MODAL_ID, CLUSTERS_ACTIONS } from '~/clusters_list/consta
 describe('ClustersActionsComponent', () => {
   let wrapper;
 
-  const newClusterPath = 'path/to/create/cluster';
+  const newClusterPath = 'path/to/add/cluster';
   const addClusterPath = 'path/to/connect/existing/cluster';
+  const newClusterDocsPath = 'path/to/create/new/cluster';
 
   const defaultProvide = {
     newClusterPath,
     addClusterPath,
+    newClusterDocsPath,
     canAddCluster: true,
     displayClusterAgents: true,
     certificateBasedClustersEnabled: true,
@@ -20,12 +22,13 @@ describe('ClustersActionsComponent', () => {
 
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findTooltip = () => wrapper.findComponent(GlTooltip);
   const findDropdownItemIds = () =>
     findDropdownItems().wrappers.map((x) => x.attributes('data-testid'));
+  const findDropdownItemTexts = () => findDropdownItems().wrappers.map((x) => x.text());
   const findNewClusterLink = () => wrapper.findByTestId('new-cluster-link');
+  const findNewClusterDocsLink = () => wrapper.findByTestId('create-cluster-link');
   const findConnectClusterLink = () => wrapper.findByTestId('connect-cluster-link');
-  const findConnectNewAgentLink = () => wrapper.findByTestId('connect-new-agent-link');
-  const findConnectWithAgentButton = () => wrapper.findComponent(GlButton);
 
   const createWrapper = (provideData = {}) => {
     wrapper = shallowMountExtended(ClustersActions, {
@@ -35,7 +38,6 @@ describe('ClustersActionsComponent', () => {
       },
       directives: {
         GlModalDirective: createMockDirective(),
-        GlTooltip: createMockDirective(),
       },
     });
   };
@@ -49,12 +51,15 @@ describe('ClustersActionsComponent', () => {
   });
   describe('when the certificate based clusters are enabled', () => {
     it('renders actions menu', () => {
-      expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.actionsButton);
+      expect(findDropdown().exists()).toBe(true);
     });
 
-    it('renders correct href attributes for the links', () => {
-      expect(findNewClusterLink().attributes('href')).toBe(newClusterPath);
-      expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath);
+    it('shows split button in dropdown', () => {
+      expect(findDropdown().props('split')).toBe(true);
+    });
+
+    it("doesn't show the tooltip", () => {
+      expect(findTooltip().exists()).toBe(false);
     });
 
     describe('when user cannot add clusters', () => {
@@ -67,8 +72,7 @@ describe('ClustersActionsComponent', () => {
       });
 
       it('shows tooltip explaining why dropdown is disabled', () => {
-        const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
-        expect(tooltip.value).toBe(CLUSTERS_ACTIONS.dropdownDisabledHint);
+        expect(findTooltip().attributes('title')).toBe(CLUSTERS_ACTIONS.dropdownDisabledHint);
       });
 
       it('does not bind split dropdown button', () => {
@@ -79,33 +83,36 @@ describe('ClustersActionsComponent', () => {
     });
 
     describe('when on project level', () => {
-      it('renders a dropdown with 3 actions items', () => {
-        expect(findDropdownItemIds()).toEqual([
-          'connect-new-agent-link',
-          'new-cluster-link',
-          'connect-cluster-link',
-        ]);
+      it(`displays default action as ${CLUSTERS_ACTIONS.connectWithAgent}`, () => {
+        expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.connectWithAgent);
       });
 
-      it('renders correct modal id for the agent link', () => {
-        const binding = getBinding(findConnectNewAgentLink().element, 'gl-modal-directive');
+      it('renders correct modal id for the default action', () => {
+        const binding = getBinding(findDropdown().element, 'gl-modal-directive');
 
         expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
       });
 
-      it('shows tooltip', () => {
-        const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
-        expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectWithAgent);
+      it('renders a dropdown with 3 actions items', () => {
+        expect(findDropdownItemIds()).toEqual([
+          'create-cluster-link',
+          'new-cluster-link',
+          'connect-cluster-link',
+        ]);
       });
 
-      it('shows split button in dropdown', () => {
-        expect(findDropdown().props('split')).toBe(true);
+      it('renders correct texts for the dropdown items', () => {
+        expect(findDropdownItemTexts()).toEqual([
+          CLUSTERS_ACTIONS.createCluster,
+          CLUSTERS_ACTIONS.createClusterCertificate,
+          CLUSTERS_ACTIONS.connectClusterCertificate,
+        ]);
       });
 
-      it('binds split button with modal id', () => {
-        const binding = getBinding(findDropdown().element, 'gl-modal-directive');
-
-        expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+      it('renders correct href attributes for the links', () => {
+        expect(findNewClusterDocsLink().attributes('href')).toBe(newClusterDocsPath);
+        expect(findNewClusterLink().attributes('href')).toBe(newClusterPath);
+        expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath);
       });
     });
 
@@ -114,17 +121,20 @@ describe('ClustersActionsComponent', () => {
         createWrapper({ displayClusterAgents: false });
       });
 
-      it('renders a dropdown with 2 actions items', () => {
-        expect(findDropdownItemIds()).toEqual(['new-cluster-link', 'connect-cluster-link']);
+      it(`displays default action as ${CLUSTERS_ACTIONS.connectClusterDeprecated}`, () => {
+        expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.connectClusterDeprecated);
       });
 
-      it('shows tooltip', () => {
-        const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
-        expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectExistingCluster);
+      it('renders a dropdown with 1 action item', () => {
+        expect(findDropdownItemIds()).toEqual(['new-cluster-link']);
       });
 
-      it('does not show split button in dropdown', () => {
-        expect(findDropdown().props('split')).toBe(false);
+      it('renders correct text for the dropdown item', () => {
+        expect(findDropdownItemTexts()).toEqual([CLUSTERS_ACTIONS.createClusterDeprecated]);
+      });
+
+      it('renders correct href attributes for the links', () => {
+        expect(findNewClusterLink().attributes('href')).toBe(newClusterPath);
       });
 
       it('does not bind dropdown button to modal', () => {
@@ -140,17 +150,26 @@ describe('ClustersActionsComponent', () => {
       createWrapper({ certificateBasedClustersEnabled: false });
     });
 
-    it('it does not show the the dropdown', () => {
-      expect(findDropdown().exists()).toBe(false);
+    it(`displays default action as ${CLUSTERS_ACTIONS.connectCluster}`, () => {
+      expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.connectCluster);
     });
 
-    it('shows the connect with agent button', () => {
-      expect(findConnectWithAgentButton().props()).toMatchObject({
-        disabled: !defaultProvide.canAddCluster,
-        category: 'primary',
-        variant: 'confirm',
-      });
-      expect(findConnectWithAgentButton().text()).toBe(CLUSTERS_ACTIONS.connectWithAgent);
+    it('renders correct modal id for the default action', () => {
+      const binding = getBinding(findDropdown().element, 'gl-modal-directive');
+
+      expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+    });
+
+    it('renders a dropdown with 1 action item', () => {
+      expect(findDropdownItemIds()).toEqual(['create-cluster-link']);
+    });
+
+    it('renders correct text for the dropdown item', () => {
+      expect(findDropdownItemTexts()).toEqual([CLUSTERS_ACTIONS.createCluster]);
+    });
+
+    it('renders correct href attributes for the links', () => {
+      expect(findNewClusterDocsLink().attributes('href')).toBe(newClusterDocsPath);
     });
   });
 });

spec/helpers/clusters_helper_spec.rb

@@ -74,6 +74,10 @@ RSpec.describe ClustersHelper do
       expect(subject[:add_cluster_path]).to eq("#{project_path(project)}/-/clusters/connect")
     end
 
+    it 'displays create cluster path' do
+      expect(subject[:new_cluster_docs_path]).to eq("#{project_path(project)}/-/clusters/new_cluster_docs")
+    end
+
     it 'displays project default branch' do
       expect(subject[:default_branch_name]).to eq(project.default_branch)
     end

spec/presenters/project_clusterable_presenter_spec.rb

@@ -49,6 +49,12 @@ RSpec.describe ProjectClusterablePresenter do
     it { is_expected.to eq(connect_project_clusters_path(project)) }
   end
 
+  describe '#new_cluster_docs_path' do
+    subject { presenter.new_cluster_docs_path }
+
+    it { is_expected.to eq(new_cluster_docs_project_clusters_path(project)) }
+  end
+
   describe '#authorize_aws_role_path' do
     subject { presenter.authorize_aws_role_path }