Add latest changes from gitlab-org/gitlab@master

11 files changed, 95 insertions, 277 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
index a05e8747a43..010c172c710 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
@@ -80,13 +80,7 @@ export default {
       );
     },
     preferredAutoMergeStrategy() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return MergeRequestStore.getPreferredAutoMergeStrategy(
-          this.mr.availableAutoMergeStrategies,
-        );
-      }
-
-      return this.mr.preferredAutoMergeStrategy;
+      return MergeRequestStore.getPreferredAutoMergeStrategy(this.mr.availableAutoMergeStrategies);
     },
     ciStatus() {
       return this.isPostMerge ? this.mr?.mergePipeline?.details?.status?.text : this.mr.ciStatus;
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
index 92a7fa39cdc..38f7d3d2c96 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
@@ -3,8 +3,8 @@ import { GlSkeletonLoader, GlSprintf } from '@gitlab/ui';
 import autoMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/auto_merge';
 import autoMergeEnabledQuery from 'ee_else_ce/vue_merge_request_widget/queries/states/auto_merge_enabled.query.graphql';
 import { createAlert } from '~/flash';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __ } from '~/locale';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { AUTO_MERGE_STRATEGIES } from '../../constants';
 import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
@@ -16,9 +16,6 @@ export default {
   apollo: {
     state: {
       query: autoMergeEnabledQuery,
-      skip() {
-        return !this.glFeatures.mergeRequestWidgetGraphql;
-      },
       variables() {
         return this.mergeRequestQueryVariables;
       },
@@ -31,7 +28,7 @@ export default {
     GlSprintf,
     StateContainer,
   },
-  mixins: [autoMergeMixin, glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
+  mixins: [autoMergeMixin, mergeRequestQueryVariablesMixin],
   props: {
     mr: {
       type: Object,
@@ -51,31 +48,21 @@ export default {
   },
   computed: {
     loading() {
-      return (
-        this.glFeatures.mergeRequestWidgetGraphql &&
-        this.$apollo.queries.state.loading &&
-        Object.keys(this.state).length === 0
-      );
-    },
-    mergeUser() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.state.mergeUser;
-      }
-
-      return this.mr.setToAutoMergeBy;
+      return this.$apollo.queries.state.loading && Object.keys(this.state).length === 0;
     },
-    targetBranch() {
-      return (this.glFeatures.mergeRequestWidgetGraphql ? this.state : this.mr).targetBranch;
-    },
-    shouldRemoveSourceBranch() {
-      if (!this.glFeatures.mergeRequestWidgetGraphql) return this.mr.shouldRemoveSourceBranch;
-
+    stateRemoveSourceBranch() {
       if (!this.state.shouldRemoveSourceBranch) return false;
 
       return this.state.shouldRemoveSourceBranch || this.state.forceRemoveSourceBranch;
     },
-    autoMergeStrategy() {
-      return (this.glFeatures.mergeRequestWidgetGraphql ? this.state : this.mr).autoMergeStrategy;
+    canRemoveSourceBranch() {
+      const { currentUserId } = this.mr;
+      const mergeUserId = getIdFromGraphQLId(this.state.mergeUser?.id);
+      const canRemoveSourceBranch = this.state.userPermissions.removeSourceBranch;
+
+      return (
+        !this.stateRemoveSourceBranch && canRemoveSourceBranch && mergeUserId === currentUserId
+      );
     },
     actions() {
       const actions = [];
@@ -104,12 +91,8 @@ export default {
       this.service
         .cancelAutomaticMerge()
         .then((res) => res.data)
-        .then((data) => {
-          if (this.glFeatures.mergeRequestWidgetGraphql) {
-            eventHub.$emit('MRWidgetUpdateRequested');
-          } else {
-            eventHub.$emit('UpdateWidgetData', data);
-          }
+        .then(() => {
+          eventHub.$emit('MRWidgetUpdateRequested');
         })
         .catch(() => {
           this.isCancellingAutoMerge = false;
@@ -121,7 +104,7 @@ export default {
     removeSourceBranch() {
       const options = {
         sha: this.mr.sha,
-        auto_merge_strategy: this.autoMergeStrategy,
+        auto_merge_strategy: this.state.autoMergeStrategy,
         should_remove_source_branch: true,
       };
 
@@ -135,9 +118,7 @@ export default {
           }
         })
         .then(() => {
-          if (this.glFeatures.mergeRequestWidgetGraphql) {
-            this.$apollo.queries.state.refetch();
-          }
+          this.$apollo.queries.state.refetch();
         })
         .catch(() => {
           this.isRemovingSourceBranch = false;
@@ -162,7 +143,7 @@ export default {
       <h4 class="gl-mr-3" data-testid="statusText">
         <gl-sprintf :message="statusText" data-testid="statusText">
           <template #merge_author>
-            <mr-widget-author :author="mergeUser" />
+            <mr-widget-author v-if="state.mergeUser" :author="state.mergeUser" />
           </template>
         </gl-sprintf>
       </h4>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
index 39c56cbb93d..448805cf8b9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
@@ -1,6 +1,5 @@
 <script>
 import { s__ } from '~/locale';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import autoMergeFailedQuery from '../../queries/states/auto_merge_failed.query.graphql';
@@ -11,13 +10,10 @@ export default {
   components: {
     StateContainer,
   },
-  mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
+  mixins: [mergeRequestQueryVariablesMixin],
   apollo: {
     mergeError: {
       query: autoMergeFailedQuery,
-      skip() {
-        return !this.glFeatures.mergeRequestWidgetGraphql;
-      },
       variables() {
         return this.mergeRequestQueryVariables;
       },
@@ -32,7 +28,7 @@ export default {
   },
   data() {
     return {
-      mergeError: this.glFeatures.mergeRequestWidgetGraphql ? null : this.mr.mergeError,
+      mergeError: null,
       isRefreshing: false,
     };
   },
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
index d60d3cfc9ea..8e1b18c63a4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlButton, GlSkeletonLoader } from '@gitlab/ui';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import userPermissionsQuery from '../../queries/permissions.query.graphql';
 import conflictsStateQuery from '../../queries/states/conflicts.query.graphql';
@@ -13,23 +12,17 @@ export default {
     GlButton,
     StateContainer,
   },
-  mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
+  mixins: [mergeRequestQueryVariablesMixin],
   apollo: {
     userPermissions: {
       query: userPermissionsQuery,
-      skip() {
-        return !this.glFeatures.mergeRequestWidgetGraphql;
-      },
       variables() {
         return this.mergeRequestQueryVariables;
       },
       update: (data) => data.project.mergeRequest.userPermissions,
     },
-    stateData: {
+    state: {
       query: conflictsStateQuery,
-      skip() {
-        return !this.glFeatures.mergeRequestWidgetGraphql;
-      },
       variables() {
         return this.mergeRequestQueryVariables;
       },
@@ -47,40 +40,19 @@ export default {
   data() {
     return {
       userPermissions: {},
-      stateData: {},
+      state: {},
     };
   },
   computed: {
     isLoading() {
-      return (
-        this.glFeatures.mergeRequestWidgetGraphql &&
-        this.$apollo.queries.userPermissions.loading &&
-        this.$apollo.queries.stateData.loading
-      );
-    },
-    canPushToSourceBranch() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.userPermissions.pushToSourceBranch;
-      }
-
-      return this.mr.canPushToSourceBranch;
-    },
-    canMerge() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.userPermissions.canMerge;
-      }
-
-      return this.mr.canMerge;
-    },
-    shouldBeRebased() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.stateData.shouldBeRebased;
-      }
-
-      return this.mr.shouldBeRebased;
+      return this.$apollo.queries.userPermissions.loading && this.$apollo.queries.state.loading;
     },
     showResolveButton() {
-      return this.mr.conflictResolutionPath && this.canPushToSourceBranch;
+      return (
+        this.mr.conflictResolutionPath &&
+        this.userPermissions.pushToSourceBranch &&
+        !this.state.sourceBranchProtected
+      );
     },
   },
 };
@@ -95,7 +67,7 @@ export default {
       </gl-skeleton-loader>
     </template>
     <template v-if="!isLoading">
-      <span v-if="shouldBeRebased" class="bold gl-ml-0! gl-text-body!">
+      <span v-if="state.shouldBeRebased" class="bold gl-ml-0! gl-text-body!">
         {{
           s__(`mrWidget|Merge blocked: fast-forward merge is not possible.
   To merge this request, first rebase locally.`)
@@ -104,7 +76,7 @@ export default {
       <template v-else>
         <span class="bold gl-ml-0! gl-text-body! gl-flex-grow-1 gl-w-full gl-md-w-auto gl-mr-2">
           {{ s__('mrWidget|Merge blocked: merge conflicts must be resolved.') }}
-          <span v-if="!canMerge">
+          <span v-if="!userPermissions.canMerge">
             {{
               s__(
                 `mrWidget|Users who can write to the source or target branches can resolve the conflicts.`,
@@ -114,9 +86,9 @@ export default {
         </span>
       </template>
     </template>
-    <template v-if="!isLoading && !shouldBeRebased" #actions>
+    <template v-if="!isLoading && !state.shouldBeRebased" #actions>
       <gl-button
-        v-if="canMerge"
+        v-if="userPermissions.canMerge"
         size="small"
         variant="confirm"
         category="secondary"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
index 214d1b49732..5e073bf7c04 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
@@ -1,7 +1,6 @@
 <script>
 import { GlIcon, GlTooltipDirective, GlSprintf } from '@gitlab/ui';
 import { sprintf } from '~/locale';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import missingBranchQuery from '../../queries/states/missing_branch.query.graphql';
 import {
@@ -21,13 +20,10 @@ export default {
     GlSprintf,
     StatusIcon,
   },
-  mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
+  mixins: [mergeRequestQueryVariablesMixin],
   apollo: {
     state: {
       query: missingBranchQuery,
-      skip() {
-        return !this.glFeatures.mergeRequestWidgetGraphql;
-      },
       variables() {
         return this.mergeRequestQueryVariables;
       },
@@ -44,15 +40,8 @@ export default {
     return { state: {} };
   },
   computed: {
-    sourceBranchRemoved() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return !this.state.sourceBranchExists;
-      }
-
-      return this.mr.sourceBranchRemoved;
-    },
     type() {
-      return this.sourceBranchRemoved ? 'source' : 'target';
+      return this.mr.sourceBranchRemoved ? 'source' : 'target';
     },
     name() {
       return this.type === 'source' ? this.mr.sourceBranch : this.mr.targetBranch;
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 f6843c1f3d3..4ae4edf02c3 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
@@ -2,7 +2,6 @@
 import { GlButton, GlSkeletonLoader } from '@gitlab/ui';
 import { createAlert } from '~/flash';
 import { __ } from '~/locale';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import toast from '~/vue_shared/plugins/global_toast';
 import simplePoll from '~/lib/utils/simple_poll';
 import eventHub from '../../event_hub';
@@ -15,9 +14,6 @@ export default {
   apollo: {
     state: {
       query: rebaseQuery,
-      skip() {
-        return !this.glFeatures.mergeRequestWidgetGraphql;
-      },
       variables() {
         return this.mergeRequestQueryVariables;
       },
@@ -29,7 +25,7 @@ export default {
     GlButton,
     StateContainer,
   },
-  mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
+  mixins: [mergeRequestQueryVariablesMixin],
   props: {
     mr: {
       type: Object,
@@ -49,28 +45,16 @@ export default {
   },
   computed: {
     isLoading() {
-      return this.glFeatures.mergeRequestWidgetGraphql && this.$apollo.queries.state.loading;
+      return this.$apollo.queries.state.loading;
     },
     rebaseInProgress() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.state.rebaseInProgress;
-      }
-
-      return this.mr.rebaseInProgress;
+      return this.state.rebaseInProgress;
     },
     canPushToSourceBranch() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.state.userPermissions.pushToSourceBranch;
-      }
-
-      return this.mr.canPushToSourceBranch;
+      return this.state.userPermissions.pushToSourceBranch;
     },
     targetBranch() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.state.targetBranch;
-      }
-
-      return this.mr.targetBranch;
+      return this.state.targetBranch;
     },
     status() {
       if (this.isLoading) {
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 f7b8f0e2c1c..c54672cd0f8 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
@@ -19,7 +19,6 @@ import { secondsToMilliseconds } from '~/lib/utils/datetime_utility';
 import simplePoll from '~/lib/utils/simple_poll';
 import { __, s__, n__ } from '~/locale';
 import SmartInterval from '~/smart_interval';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import {
   AUTO_MERGE_STRATEGIES,
@@ -54,9 +53,6 @@ export default {
   apollo: {
     state: {
       query: readyToMergeQuery,
-      skip() {
-        return !this.glFeatures.mergeRequestWidgetGraphql;
-      },
       variables() {
         return this.mergeRequestQueryVariables;
       },
@@ -123,14 +119,14 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [readyToMergeMixin, glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
+  mixins: [readyToMergeMixin, mergeRequestQueryVariablesMixin],
   props: {
     mr: { type: Object, required: true },
     service: { type: Object, required: true },
   },
   data() {
     return {
-      loading: this.glFeatures.mergeRequestWidgetGraphql,
+      loading: true,
       state: {},
       removeSourceBranch: this.mr.shouldRemoveSourceBranch,
       isMakingRequest: false,
@@ -148,7 +144,7 @@ export default {
   },
   computed: {
     stateData() {
-      return this.glFeatures.mergeRequestWidgetGraphql ? this.state : this.mr;
+      return this.state;
     },
     hasCI() {
       return this.stateData.hasCI || this.stateData.hasCi;
@@ -157,35 +153,19 @@ export default {
       return !isEmpty(this.stateData.availableAutoMergeStrategies);
     },
     pipeline() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.state.headPipeline;
-      }
-
-      return this.mr.pipeline;
+      return this.state.headPipeline;
     },
     isPipelineFailed() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return ['FAILED', 'CANCELED'].indexOf(this.pipeline?.status) !== -1;
-      }
-
-      return this.mr.isPipelineFailed;
+      return ['FAILED', 'CANCELED'].indexOf(this.pipeline?.status) !== -1;
     },
     showMergeFailedPipelineConfirmationDialog() {
       return this.status === PIPELINE_FAILED_STATE && this.isPipelineFailed;
     },
     isMergeAllowed() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.state.mergeable;
-      }
-
-      return this.mr.isMergeAllowed;
+      return this.state.mergeable || false;
     },
     canRemoveSourceBranch() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.state.userPermissions.removeSourceBranch;
-      }
-
-      return this.mr.canRemoveSourceBranch;
+      return this.state.userPermissions.removeSourceBranch;
     },
     commitTemplateHelpPage() {
       return helpPagePath('user/project/merge_requests/commit_templates.md');
@@ -200,46 +180,24 @@ export default {
       return this.$options.i18n.mergeCommitTemplateHintText;
     },
     commits() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.state.commitsWithoutMergeCommits.nodes;
-      }
-
-      return this.mr.commits;
+      return this.state.commitsWithoutMergeCommits?.nodes;
     },
     commitsCount() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.state.commitCount || 0;
-      }
-
-      return this.mr.commitsCount;
+      return this.state.commitCount || 0;
     },
     preferredAutoMergeStrategy() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return MergeRequestStore.getPreferredAutoMergeStrategy(
-          this.state.availableAutoMergeStrategies,
-        );
-      }
-
-      return this.mr.preferredAutoMergeStrategy;
+      return MergeRequestStore.getPreferredAutoMergeStrategy(
+        this.state.availableAutoMergeStrategies,
+      );
     },
     squashIsSelected() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.isSquashReadOnly ? this.state.squashOnMerge : this.state.squash;
-      }
-
-      return this.mr.squashIsSelected;
+      return this.isSquashReadOnly ? this.state.squashOnMerge : this.state.squash;
     },
     isPipelineActive() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.pipeline?.active || false;
-      }
-
-      return this.mr.isPipelineActive;
+      return this.pipeline?.active || false;
     },
     status() {
-      const ciStatus = this.glFeatures.mergeRequestWidgetGraphql
-        ? this.pipeline?.status.toLowerCase()
-        : this.mr.ciStatus;
+      const ciStatus = this.pipeline?.status?.toLowerCase();
 
       if ((this.hasCI && !ciStatus) || this.hasPipelineMustSucceedConflict) {
         return PIPELINE_FAILED_STATE;
@@ -304,11 +262,7 @@ export default {
       return this.squashBeforeMerge && this.shouldShowSquashBeforeMerge;
     },
     shouldShowMergeEdit() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return !this.state.mergeRequestsFfOnlyEnabled;
-      }
-
-      return !this.mr.ffOnlyEnabled;
+      return !this.state.mergeRequestsFfOnlyEnabled;
     },
     shaMismatchLink() {
       return this.mr.mergeRequestDiffsPath;
@@ -345,18 +299,15 @@ export default {
     },
   },
   mounted() {
-    if (this.glFeatures.mergeRequestWidgetGraphql) {
-      eventHub.$on('ApprovalUpdated', this.updateGraphqlState);
-      eventHub.$on('MRWidgetUpdateRequested', this.updateGraphqlState);
-      eventHub.$on('mr.discussion.updated', this.updateGraphqlState);
-    }
+    eventHub.$on('ApprovalUpdated', this.updateGraphqlState);
+    eventHub.$on('MRWidgetUpdateRequested', this.updateGraphqlState);
+    eventHub.$on('mr.discussion.updated', this.updateGraphqlState);
   },
   beforeDestroy() {
-    if (this.glFeatures.mergeRequestWidgetGraphql) {
-      eventHub.$off('ApprovalUpdated', this.updateGraphqlState);
-      eventHub.$off('MRWidgetUpdateRequested', this.updateGraphqlState);
-      eventHub.$off('mr.discussion.updated', this.updateGraphqlState);
-    }
+    eventHub.$off('ApprovalUpdated', this.updateGraphqlState);
+    eventHub.$off('MRWidgetUpdateRequested', this.updateGraphqlState);
+    eventHub.$off('mr.discussion.updated', this.updateGraphqlState);
+    eventHub.$off('ApprovalUpdated', this.updateGraphqlState);
 
     if (this.pollingInterval) {
       this.pollingInterval.destroy();
@@ -391,9 +342,7 @@ export default {
       if (mergeImmediately) {
         this.isMergingImmediately = true;
       }
-      const latestSha = this.glFeatures.mergeRequestWidgetGraphql
-        ? this.state.diffHeadSha
-        : this.mr.latestSHA;
+      const latestSha = this.state.diffHeadSha;
 
       const options = {
         sha: latestSha || this.mr.sha,
@@ -435,9 +384,7 @@ export default {
             this.mr.transitionStateMachine({ transition: MERGE_FAILURE });
           }
 
-          if (this.glFeatures.mergeRequestWidgetGraphql) {
-            this.updateGraphqlState();
-          }
+          this.updateGraphqlState();
 
           this.isMakingRequest = false;
         })
@@ -613,7 +560,7 @@ export default {
                   :is-squash-enabled="squashBeforeMerge"
                   :is-fast-forward-enabled="!shouldShowMergeEdit"
                   :commits-count="commitsCount"
-                  :target-branch="stateData.targetBranch"
+                  :target-branch="state.targetBranch"
                 />
                 <template v-if="mr.relatedLinks">
                   &middot;
@@ -704,7 +651,7 @@ export default {
                     :is-squash-enabled="squashBeforeMerge"
                     :is-fast-forward-enabled="!shouldShowMergeEdit"
                     :commits-count="commitsCount"
-                    :target-branch="stateData.targetBranch"
+                    :target-branch="state.targetBranch"
                     :merge-commit-path="mr.mergeCommitPath"
                   />
                 </li>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
index dee27a5d5b5..ef5be0fbfcd 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
@@ -5,14 +5,12 @@ import $ from 'jquery';
 import { createAlert } from '~/flash';
 import toast from '~/vue_shared/plugins/global_toast';
 import { __ } from '~/locale';
-import MergeRequest from '~/merge_request';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import getStateQuery from '../../queries/get_state.query.graphql';
 import draftQuery from '../../queries/states/draft.query.graphql';
 import removeDraftMutation from '../../queries/toggle_draft.mutation.graphql';
 import StateContainer from '../state_container.vue';
+import eventHub from '../../event_hub';
 
 export default {
   name: 'WorkInProgress',
@@ -20,13 +18,10 @@ export default {
     GlButton,
     StateContainer,
   },
-  mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
+  mixins: [mergeRequestQueryVariablesMixin],
   apollo: {
     userPermissions: {
       query: draftQuery,
-      skip() {
-        return !this.glFeatures.mergeRequestWidgetGraphql;
-      },
       variables() {
         return this.mergeRequestQueryVariables;
       },
@@ -35,7 +30,6 @@ export default {
   },
   props: {
     mr: { type: Object, required: true },
-    service: { type: Object, required: true },
   },
   data() {
     return {
@@ -43,17 +37,8 @@ export default {
       isMakingRequest: false,
     };
   },
-  computed: {
-    canUpdate() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.userPermissions.updateMergeRequest;
-      }
-
-      return Boolean(this.mr.removeWIPPath);
-    },
-  },
   methods: {
-    removeDraftMutation() {
+    handleRemoveDraft() {
       const { mergeRequestQueryVariables } = this;
 
       this.isMakingRequest = true;
@@ -138,26 +123,6 @@ export default {
           this.isMakingRequest = false;
         });
     },
-    handleRemoveDraft() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        this.removeDraftMutation();
-      } else {
-        this.isMakingRequest = true;
-        this.service
-          .removeWIP()
-          .then((res) => res.data)
-          .then((data) => {
-            eventHub.$emit('UpdateWidgetData', data);
-            MergeRequest.toggleDraftStatus(this.mr.title, true);
-          })
-          .catch(() => {
-            this.isMakingRequest = false;
-            createAlert({
-              message: __('Something went wrong. Please try again.'),
-            });
-          });
-      }
-    },
   },
 };
 </script>
@@ -169,12 +134,13 @@ export default {
     </span>
     <template #actions>
       <gl-button
-        v-if="canUpdate"
+        v-if="userPermissions.updateMergeRequest"
         size="small"
         :disabled="isMakingRequest"
         :loading="isMakingRequest"
         variant="confirm"
         class="js-remove-draft gl-md-ml-3 gl-align-self-start"
+        data-testid="removeWipButton"
         @click="handleRemoveDraft"
       >
         {{ s__('mrWidget|Mark as ready') }}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue
index b0d7e8dc006..1fd1e325863 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue
@@ -2,6 +2,7 @@
 import { GlSafeHtmlDirective, GlLink } from '@gitlab/ui';
 import { __ } from '~/locale';
 import HelpPopover from '~/vue_shared/components/help_popover.vue';
+import ActionButtons from '../action_buttons.vue';
 import { EXTENSION_ICONS } from '../../constants';
 import { generateText } from '../extensions/utils';
 import StatusIcon from './status_icon.vue';
@@ -11,6 +12,7 @@ export default {
     StatusIcon,
     HelpPopover,
     GlLink,
+    ActionButtons,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -49,6 +51,11 @@ export default {
       required: false,
       default: null,
     },
+    actionButtons: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
     generatedHeader() {
@@ -58,7 +65,7 @@ export default {
       return Array.isArray(this.header) && this.header[1] ? generateText(this.header[1]) : '';
     },
     shouldShowHeaderActions() {
-      return Boolean(this.helpPopover);
+      return Boolean(this.helpPopover) || this.actionButtons?.length > 0;
     },
   },
   i18n: {
@@ -84,8 +91,11 @@ export default {
             ></span>
           </div>
         </slot>
-        <div v-if="shouldShowHeaderActions" class="gl-ml-auto">
-          <help-popover :options="helpPopover.options">
+        <div
+          v-if="shouldShowHeaderActions"
+          class="gl-ml-auto gl-display-flex gl-align-items-baseline"
+        >
+          <help-popover v-if="helpPopover" :options="helpPopover.options">
             <template v-if="helpPopover.content">
               <p
                 v-if="helpPopover.content.text"
@@ -101,6 +111,12 @@ export default {
               >
             </template>
           </help-popover>
+          <action-buttons
+            v-if="actionButtons.length > 0"
+            :widget="widgetName"
+            :tertiary-buttons="actionButtons"
+            :class="{ 'gl-ml-2': helpPopover }"
+          />
         </div>
       </div>
       <div class="gl-display-flex gl-align-items-baseline gl-w-full">
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 5ce2b8dbbe9..b96bdcb3833 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -97,7 +97,7 @@ export default {
       query: getStateQuery,
       manual: true,
       skip() {
-        return !this.mr || !window.gon?.features?.mergeRequestWidgetGraphql;
+        return !this.mr;
       },
       variables() {
         return this.mergeRequestQueryVariables;
@@ -131,13 +131,6 @@ export default {
     };
   },
   computed: {
-    isLoaded() {
-      if (window.gon?.features?.mergeRequestWidgetGraphql) {
-        return !this.loading;
-      }
-
-      return this.mr;
-    },
     shouldRenderApprovals() {
       return this.mr.state !== 'nothingToMerge';
     },
@@ -341,9 +334,7 @@ export default {
       return new MRWidgetService(this.getServiceEndpoints(store));
     },
     checkStatus(cb, isRebased) {
-      if (window.gon?.features?.mergeRequestWidgetGraphql) {
-        this.$apollo.queries.state.refetch();
-      }
+      this.$apollo.queries.state.refetch();
 
       return this.service
         .checkStatus()
@@ -530,7 +521,7 @@ export default {
 };
 </script>
 <template>
-  <div v-if="isLoaded" class="mr-state-widget gl-mt-3">
+  <div v-if="!loading" class="mr-state-widget gl-mt-3">
     <header
       v-if="shouldRenderCollaborationStatus"
       class="gl-rounded-base gl-border-solid gl-border-1 gl-border-gray-100 gl-overflow-hidden mr-widget-workflow gl-mt-0!"
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 9221b87014b..86ce032ea3d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -29,6 +29,7 @@ export default class MergeRequestStore {
     this.stateMachine = machine(STATE_MACHINE.definition);
     this.machineValue = this.stateMachine.value;
     this.mergeDetailsCollapsed = window.innerWidth < 768;
+    this.mergeError = data.mergeError;
 
     this.setPaths(data);
 
@@ -157,25 +158,6 @@ export default class MergeRequestStore {
     this.mergeCommitPath = data.merged_commit_path;
     this.canPushToSourceBranch = data.can_push_to_source_branch;
 
-    if (!window.gon?.features?.mergeRequestWidgetGraphql) {
-      this.autoMergeEnabled = Boolean(data.auto_merge_enabled);
-      this.canBeMerged = data.can_be_merged || false;
-      this.canMerge = Boolean(data.merge_path);
-      this.commitsCount = data.commits_count;
-      this.branchMissing = data.branch_missing;
-      this.hasConflicts = data.has_conflicts;
-      this.hasMergeableDiscussionsState = data.mergeable_discussions_state === false;
-      this.isPipelineFailed = this.ciStatus === 'failed' || this.ciStatus === 'canceled';
-      this.mergeError = data.merge_error;
-      this.mergeStatus = data.merge_status;
-      this.onlyAllowMergeIfPipelineSucceeds = data.only_allow_merge_if_pipeline_succeeds || false;
-      this.allowMergeOnSkippedPipeline = data.allow_merge_on_skipped_pipeline || false;
-      this.projectArchived = data.project_archived;
-      this.isSHAMismatch = this.sha !== data.diff_head_sha;
-      this.shouldBeRebased = Boolean(data.should_be_rebased);
-      this.draft = data.draft;
-    }
-
     const currentUser = data.current_user;
 
     this.cherryPickInForkPath = currentUser.cherry_pick_in_fork_path;