1 files changed, 51 insertions, 51 deletions
diff --git a/app/assets/javascripts/clusters_list/components/clusters_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
index ccb973f1eb8..8fd759bd3e9 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_actions.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
@@ -1,13 +1,5 @@
 <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,51 @@ 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"
+      data-qa-selector="clusters_actions_button"
       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>