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