1 files changed, 44 insertions, 16 deletions

diff --git a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
index 0e312d21e4e..b730c0adfa2 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -8,6 +8,7 @@ import {
   GlBadge,
   GlLoadingIcon,
   GlModalDirective,
+  GlTooltipDirective,
 } from '@gitlab/ui';
 import { mapState } from 'vuex';
 import {
@@ -33,6 +34,7 @@ export default {
   },
   directives: {
     GlModalDirective,
+    GlTooltip: GlTooltipDirective,
   },
   MAX_CLUSTERS_LIST,
   INSTALL_AGENT_MODAL_ID,
@@ -40,7 +42,7 @@ export default {
     agent: AGENT_CARD_INFO,
     certificate: CERTIFICATE_BASED_CARD_INFO,
   },
-  inject: ['addClusterPath'],
+  inject: ['addClusterPath', 'canAddCluster'],
   props: {
     defaultBranchName: {
       default: '.noBranch',
@@ -91,6 +93,14 @@ export default {
 
       return cardTitle;
     },
+    installAgentTooltip() {
+      return this.canAddCluster ? '' : this.$options.i18n.agent.installAgentDisabledHint;
+    },
+    connectExistingClusterTooltip() {
+      return this.canAddCluster
+        ? ''
+        : this.$options.i18n.certificate.connectExistingClusterDisabledHint;
+    },
   },
   methods: {
     cardFooterNumber(number) {
@@ -113,7 +123,7 @@ export default {
     <div v-show="!isLoading" data-testid="clusters-cards-container">
       <gl-card
         header-class="gl-bg-white gl-display-flex gl-align-items-center gl-justify-content-space-between gl-py-4"
-        body-class="gl-pb-0"
+        body-class="gl-pb-0 cluster-card-item"
         footer-class="gl-text-right"
       >
         <template #header>
@@ -166,20 +176,29 @@ export default {
             ><gl-sprintf :message="$options.i18n.agent.footerText"
               ><template #number>{{ cardFooterNumber(totalAgents) }}</template></gl-sprintf
             ></gl-link
-          ><gl-button
-            v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
-            class="gl-ml-4"
-            category="secondary"
-            variant="confirm"
-            >{{ $options.i18n.agent.actionText }}</gl-button
           >
+          <div
+            v-gl-tooltip="installAgentTooltip"
+            class="gl-display-inline-block"
+            tabindex="-1"
+            data-testid="install-agent-button-tooltip"
+          >
+            <gl-button
+              v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
+              class="gl-ml-4"
+              category="secondary"
+              variant="confirm"
+              :disabled="!canAddCluster"
+              >{{ $options.i18n.agent.actionText }}</gl-button
+            >
+          </div>
         </template>
       </gl-card>
 
       <gl-card
         class="gl-mt-6"
         header-class="gl-bg-white gl-display-flex gl-align-items-center gl-justify-content-space-between"
-        body-class="gl-pb-0"
+        body-class="gl-pb-0 cluster-card-item"
         footer-class="gl-text-right"
       >
         <template #header>
@@ -206,14 +225,23 @@ export default {
             ><gl-sprintf :message="$options.i18n.certificate.footerText"
               ><template #number>{{ cardFooterNumber(totalClusters) }}</template></gl-sprintf
             ></gl-link
-          ><gl-button
-            category="secondary"
-            data-qa-selector="connect_existing_cluster_button"
-            variant="confirm"
-            class="gl-ml-4"
-            :href="addClusterPath"
-            >{{ $options.i18n.certificate.actionText }}</gl-button
           >
+          <div
+            v-gl-tooltip="connectExistingClusterTooltip"
+            class="gl-display-inline-block"
+            tabindex="-1"
+            data-testid="connect-existing-cluster-button-tooltip"
+          >
+            <gl-button
+              category="secondary"
+              data-qa-selector="connect_existing_cluster_button"
+              variant="confirm"
+              class="gl-ml-4"
+              :href="addClusterPath"
+              :disabled="!canAddCluster"
+              >{{ $options.i18n.certificate.actionText }}</gl-button
+            >
+          </div>
         </template>
       </gl-card>
     </div>