diff options
Diffstat (limited to 'app/assets/javascripts/clusters_list')
-rw-r--r-- | app/assets/javascripts/clusters_list/components/clusters_actions.vue | 81 |
1 files changed, 43 insertions, 38 deletions
diff --git a/app/assets/javascripts/clusters_list/components/clusters_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue index 2675d46dd16..7b97a5af373 100644 --- a/app/assets/javascripts/clusters_list/components/clusters_actions.vue +++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue @@ -1,5 +1,11 @@ <script> -import { GlButton, GlDropdown, GlDropdownItem, GlModalDirective, GlTooltip } from '@gitlab/ui'; +import { + GlButton, + GlButtonGroup, + GlModalDirective, + GlTooltip, + GlDisclosureDropdown, +} from '@gitlab/ui'; import { INSTALL_AGENT_MODAL_ID, CLUSTERS_ACTIONS } from '../constants'; @@ -8,8 +14,8 @@ export default { INSTALL_AGENT_MODAL_ID, components: { GlButton, - GlDropdown, - GlDropdownItem, + GlButtonGroup, + GlDisclosureDropdown, GlTooltip, }, directives: { @@ -45,13 +51,17 @@ export default { actionItems() { const createCluster = { href: this.newClusterDocsPath, - title: this.$options.i18n.createCluster, - testid: 'create-cluster-link', + text: this.$options.i18n.createCluster, + extraAttrs: { + 'data-testid': 'create-cluster-link', + }, }; const connectCluster = { href: this.addClusterPath, - title: this.$options.i18n.connectClusterCertificate, - testid: 'connect-cluster-link', + text: this.$options.i18n.connectClusterCertificate, + extraAttrs: { + 'data-testid': 'connect-cluster-link', + }, }; const actions = []; @@ -61,7 +71,6 @@ export default { if (this.displayClusterAgents && this.certificateBasedClustersEnabled) { actions.push(connectCluster); } - return actions; }, }, @@ -81,39 +90,35 @@ export default { :title="$options.i18n.actionsDisabledHint" /> - <gl-button - v-if="!actionItems.length" - data-qa-selector="clusters_actions_button" - category="primary" - variant="confirm" - :disabled="!canAddCluster" - :href="defaultActionUrl" - > - {{ defaultActionText }} - </gl-button> - - <gl-dropdown - v-else + <!--TODO: Replace button-group workaround once `split` option for new dropdowns is implemented.--> + <!-- See issue at https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2263--> + <gl-button-group ref="actions" - v-gl-modal-directive="shouldTriggerModal && $options.INSTALL_AGENT_MODAL_ID" data-qa-selector="clusters_actions_button" - category="primary" - variant="confirm" - :text="defaultActionText" - :disabled="!canAddCluster" - :split-href="defaultActionUrl" - split - right + class="gl-w-full gl-mb-3 gl-md-w-auto gl-md-mb-0" > - <gl-dropdown-item - v-for="action in actionItems" - :key="action.title" - :href="action.href" - :data-testid="action.testid" - @click.stop + <gl-button + v-gl-modal-directive="shouldTriggerModal && $options.INSTALL_AGENT_MODAL_ID" + :href="defaultActionUrl" + :disabled="!canAddCluster" + data-testid="clusters-default-action-button" + category="primary" + variant="confirm" > - {{ action.title }} - </gl-dropdown-item> - </gl-dropdown> + {{ defaultActionText }} + </gl-button> + <gl-disclosure-dropdown + v-if="actionItems.length" + class="split" + toggle-class="gl-rounded-top-left-none! gl-rounded-bottom-left-none! gl-pl-1!" + category="primary" + variant="confirm" + placement="right" + :toggle-text="defaultActionText" + :items="actionItems" + :disabled="!canAddCluster" + text-sr-only + /> + </gl-button-group> </div> </template> |