1 files changed, 59 insertions, 3 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index 01e8303f513..bb0fb410d3e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -3,11 +3,13 @@ import { GlButton, GlSkeletonLoader } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import ActionsButton from '~/vue_shared/components/actions_button.vue';
 import simplePoll from '../../../lib/utils/simple_poll';
 import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import rebaseQuery from '../../queries/states/rebase.query.graphql';
 import statusIcon from '../mr_widget_status_icon.vue';
+import { REBASE_BUTTON_KEY, REBASE_WITHOUT_CI_BUTTON_KEY } from '../../constants';
 
 export default {
   name: 'MRWidgetRebase',
@@ -25,8 +27,9 @@ export default {
   },
   components: {
     statusIcon,
-    GlButton,
     GlSkeletonLoader,
+    ActionsButton,
+    GlButton,
   },
   mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
   props: {
@@ -44,12 +47,16 @@ export default {
       state: {},
       isMakingRequest: false,
       rebasingError: null,
+      selectedRebaseAction: REBASE_BUTTON_KEY,
     };
   },
   computed: {
     isLoading() {
       return this.glFeatures.mergeRequestWidgetGraphql && this.$apollo.queries.state.loading;
     },
+    showRebaseWithoutCi() {
+      return this.glFeatures?.rebaseWithoutCiUi;
+    },
     rebaseInProgress() {
       if (this.glFeatures.mergeRequestWidgetGraphql) {
         return this.state.rebaseInProgress;
@@ -86,14 +93,36 @@ export default {
     fastForwardMergeText() {
       return __('Merge blocked: the source branch must be rebased onto the target branch.');
     },
+    actions() {
+      return [this.rebaseAction, this.rebaseWithoutCiAction].filter((action) => action);
+    },
+    rebaseAction() {
+      return {
+        key: REBASE_BUTTON_KEY,
+        text: __('Rebase'),
+        secondaryText: __('Rebases and triggers a pipeline'),
+        attrs: {
+          'data-qa-selector': 'mr_rebase_button',
+        },
+        handle: () => this.rebase(),
+      };
+    },
+    rebaseWithoutCiAction() {
+      return {
+        key: REBASE_WITHOUT_CI_BUTTON_KEY,
+        text: __('Rebase without CI'),
+        secondaryText: __('Performs a rebase but skips triggering a new pipeline'),
+        handle: () => this.rebase({ skipCi: true }),
+      };
+    },
   },
   methods: {
-    rebase() {
+    rebase({ skipCi = false } = {}) {
       this.isMakingRequest = true;
       this.rebasingError = null;
 
       this.service
-        .rebase()
+        .rebase({ skipCi })
         .then(() => {
           simplePoll(this.checkRebaseStatus);
         })
@@ -109,6 +138,9 @@ export default {
           }
         });
     },
+    selectRebaseAction(key) {
+      this.selectedRebaseAction = key;
+    },
     checkRebaseStatus(continuePolling, stopPolling) {
       this.service
         .poll()
@@ -152,12 +184,14 @@ export default {
       <div class="rebase-state-find-class-convention media media-body space-children">
         <span
           v-if="rebaseInProgress || isMakingRequest"
+          :class="{ 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget }"
           class="gl-font-weight-bold"
           data-testid="rebase-message"
           >{{ __('Rebase in progress') }}</span
         >
         <span
           v-if="!rebaseInProgress && !canPushToSourceBranch"
+          :class="{ 'gl-text-body!': glFeatures.restructuredMrWidget }"
           class="gl-font-weight-bold gl-ml-0!"
           data-testid="rebase-message"
           >{{ fastForwardMergeText }}</span
@@ -167,15 +201,26 @@ export default {
           class="accept-merge-holder clearfix js-toggle-container accept-action media space-children"
         >
           <gl-button
+            v-if="!glFeatures.restructuredMrWidget && !showRebaseWithoutCi"
             :loading="isMakingRequest"
             variant="confirm"
             data-qa-selector="mr_rebase_button"
+            data-testid="standard-rebase-button"
             @click="rebase"
           >
             {{ __('Rebase') }}
           </gl-button>
+          <actions-button
+            v-if="!glFeatures.restructuredMrWidget && showRebaseWithoutCi"
+            :actions="actions"
+            :selected-key="selectedRebaseAction"
+            variant="confirm"
+            category="primary"
+            @select="selectRebaseAction"
+          />
           <span
             v-if="!rebasingError"
+            :class="{ 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget }"
             class="gl-font-weight-bold"
             data-testid="rebase-message"
             data-qa-selector="no_fast_forward_message_content"
@@ -186,6 +231,17 @@ export default {
           <span v-else class="gl-font-weight-bold danger" data-testid="rebase-message">{{
             rebasingError
           }}</span>
+          <gl-button
+            v-if="glFeatures.restructuredMrWidget"
+            :loading="isMakingRequest"
+            variant="confirm"
+            size="small"
+            data-qa-selector="mr_rebase_button"
+            class="gl-ml-3!"
+            @click="rebase"
+          >
+            {{ __('Rebase') }}
+          </gl-button>
         </div>
       </div>
     </template>