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 | 102 |
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> |