1 files changed, 40 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 835f7b9e9a9..2c1f2285dda 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,15 @@
 <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 +45,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 +55,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 +298,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 +309,33 @@ 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"
               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 js-merge-moment"
             >
-              <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"
+                button-class="accept-merge-request js-merge-immediately-button"
+                data-qa-selector="merge_immediately_option"
+                @click="handleMergeImmediatelyButtonClick"
+              >
+                {{ __('Merge immediately') }}
+              </gl-dropdown-item>
+              <merge-immediately-confirmation-dialog
+                ref="confirmationDialog"
+                :docs-url="mr.mergeImmediatelyDocsPath"
+                @mergeImmediately="onMergeImmediatelyConfirmation"
+              />
+            </gl-dropdown>
+          </gl-button-group>
           <div class="media-body-wrap space-children">
             <template v-if="shouldShowMergeControls">
               <label v-if="mr.canRemoveSourceBranch">