From 2901d7c8b1f65baf79f172841d0e41ad5570013a Mon Sep 17 00:00:00 2001
From: Pedro Moreira da Silva <hi@pedroms.com>
Date: Mon, 21 Sep 2020 14:07:12 +0100
Subject: [PATCH] Migrate merge moment dropdown to GitLab UI
---
.../components/states/ready_to_merge.vue | 78 ++++++++-----------
1 file changed, 32 insertions(+), 46 deletions(-)
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index 835f7b9e9a96e..9e9fe38204abd 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -1,6 +1,6 @@
<script>
import { isEmpty } from 'lodash';
-import { GlIcon, GlButton, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlIcon, GlButton, GlButtonGroup, GlDropdown, GlDropdownItem, GlSprintf, GlLink, GlTooltipDirective } from '@gitlab/ui';
import readyToMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/ready_to_merge';
import simplePoll from '~/lib/utils/simple_poll';
import { __ } from '~/locale';
@@ -36,6 +36,9 @@ export default {
GlSprintf,
GlLink,
GlButton,
+ GlButtonGroup,
+ GlDropdown,
+ GlDropdownItem,
MergeTrainHelperText: () =>
import('ee_component/vue_merge_request_widget/components/merge_train_helper_text.vue'),
MergeImmediatelyConfirmationDialog: () =>
@@ -43,6 +46,9 @@ export default {
'ee_component/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue'
),
},
+ directives: {
+ GlTooltip: GlTooltipDirective,
+ },
mixins: [readyToMergeMixin],
props: {
mr: { type: Object, required: true },
@@ -283,7 +289,7 @@ export default {
<status-icon :status="iconClass" />
<div class="media-body">
<div class="mr-widget-body-controls media space-children">
- <span class="btn-group">
+ <gl-button-group>
<gl-button
size="medium"
category="primary"
@@ -294,54 +300,34 @@ export default {
@click="handleMergeButtonClick(isAutoMergeAvailable)"
>{{ mergeButtonText }}</gl-button
>
- <button
+ <gl-dropdown
v-if="shouldShowMergeImmediatelyDropdown"
+ v-gl-tooltip.hover.focus="__('Select merge moment')"
:disabled="isMergeButtonDisabled"
- type="button"
- class="btn btn-sm btn-info dropdown-toggle js-merge-moment"
- data-toggle="dropdown"
+ variant="info"
+ class="js-merge-moment"
data-qa-selector="merge_moment_dropdown"
- :aria-label="__('Select merge moment')"
- >
- <i class="fa fa-chevron-down" aria-hidden="true"></i>
- </button>
- <ul
- v-if="shouldShowMergeImmediatelyDropdown"
- class="dropdown-menu dropdown-menu-right"
- role="menu"
+ toggle-class="btn-icon"
>
- <li>
- <a
- class="auto_merge_enabled qa-merge-when-pipeline-succeeds-option"
- href="#"
- @click.prevent="handleMergeButtonClick(true)"
- >
- <span class="media">
- <gl-icon name="status_success" class="merge-opt-icon" aria-hidden="true" />
- <span class="media-body merge-opt-title">{{ autoMergeText }}</span>
- </span>
- </a>
- </li>
- <li>
- <merge-immediately-confirmation-dialog
- ref="confirmationDialog"
- :docs-url="mr.mergeImmediatelyDocsPath"
- @mergeImmediately="onMergeImmediatelyConfirmation"
- />
- <a
- class="accept-merge-request js-merge-immediately-button"
- data-qa-selector="merge_immediately_option"
- href="#"
- @click.prevent="handleMergeImmediatelyButtonClick"
- >
- <span class="media">
- <gl-icon name="status_warning" class="merge-opt-icon" aria-hidden="true" />
- <span class="media-body merge-opt-title">{{ __('Merge immediately') }}</span>
- </span>
- </a>
- </li>
- </ul>
- </span>
+ <template #button-content>
+ <gl-icon name="chevron-down" class="mr-0" />
+ <span class="sr-only">{{ __('Select merge moment') }}</span>
+ </template>
+ <gl-dropdown-item
+ icon-name="warning"
+ class="accept-merge-request js-merge-immediately-button"
+ data-qa-selector="merge_immediately_option"
+ @click="handleMergeImmediatelyButtonClick"
+ >
+ {{ __('Merge immediately') }}
+ </gl-dropdown-item>
+ </gl-dropdown>
+ </gl-button-group>
+ <merge-immediately-confirmation-dialog
+ ref="confirmationDialog"
+ :docs-url="mr.mergeImmediatelyDocsPath"
+ @mergeImmediately="onMergeImmediatelyConfirmation"
+ />
<div class="media-body-wrap space-children">
<template v-if="shouldShowMergeControls">
<label v-if="mr.canRemoveSourceBranch">
--
GitLab