1 files changed, 28 insertions, 6 deletions
diff --git a/app/assets/javascripts/clusters_list/components/clusters_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
index 25f67462223..5b8dc74b84f 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_actions.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
@@ -1,5 +1,13 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlModalDirective } from '@gitlab/ui';
+import {
+  GlDropdown,
+  GlDropdownItem,
+  GlModalDirective,
+  GlTooltipDirective,
+  GlDropdownDivider,
+  GlDropdownSectionHeader,
+} from '@gitlab/ui';
+
 import { INSTALL_AGENT_MODAL_ID, CLUSTERS_ACTIONS } from '../constants';
 
 export default {
@@ -8,11 +16,20 @@ export default {
   components: {
     GlDropdown,
     GlDropdownItem,
+    GlDropdownDivider,
+    GlDropdownSectionHeader,
   },
   directives: {
     GlModalDirective,
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: ['newClusterPath', 'addClusterPath', 'canAddCluster'],
+  computed: {
+    tooltip() {
+      const { connectWithAgent, dropdownDisabledHint } = this.$options.i18n;
+      return this.canAddCluster ? connectWithAgent : dropdownDisabledHint;
+    },
   },
-  inject: ['newClusterPath', 'addClusterPath'],
 };
 </script>
 
@@ -20,22 +37,27 @@ export default {
   <div class="nav-controls gl-ml-auto">
     <gl-dropdown
       ref="dropdown"
-      v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
+      v-gl-modal-directive="canAddCluster && $options.INSTALL_AGENT_MODAL_ID"
+      v-gl-tooltip="tooltip"
       category="primary"
       variant="confirm"
       :text="$options.i18n.actionsButton"
+      :disabled="!canAddCluster"
       split
       right
     >
-      <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link" @click.stop>
-        {{ $options.i18n.createNewCluster }}
-      </gl-dropdown-item>
+      <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>
+      <gl-dropdown-divider />
+      <gl-dropdown-section-header>{{ $options.i18n.certificate }}</gl-dropdown-section-header>
+      <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>