diff options
Diffstat (limited to 'app/assets/javascripts/clusters_list/components/clusters_view_all.vue')
-rw-r--r-- | app/assets/javascripts/clusters_list/components/clusters_view_all.vue | 60 |
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> |