Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42

12 files changed, 139 insertions, 65 deletions

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 20ac8f5a467..428641a1109 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
@@ -2,14 +2,15 @@
 import { GlLoadingIcon, GlSkeletonLoader } 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 { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { __ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { deprecatedCreateFlash as Flash } from '../../../flash';
-import statusIcon from '../mr_widget_status_icon.vue';
-import MrWidgetAuthor from '../mr_widget_author.vue';
-import eventHub from '../../event_hub';
 import { AUTO_MERGE_STRATEGIES } from '../../constants';
-import { __ } from '~/locale';
+import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
+import MrWidgetAuthor from '../mr_widget_author.vue';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetAutoMergeEnabled',
@@ -53,7 +54,11 @@ export default {
   },
   computed: {
     loading() {
-      return this.glFeatures.mergeRequestWidgetGraphql && this.$apollo.queries.state.loading;
+      return (
+        this.glFeatures.mergeRequestWidgetGraphql &&
+        this.$apollo.queries.state.loading &&
+        Object.keys(this.state).length === 0
+      );
     },
     mergeUser() {
       if (this.glFeatures.mergeRequestWidgetGraphql) {
@@ -78,7 +83,7 @@ export default {
     canRemoveSourceBranch() {
       const { currentUserId } = this.mr;
       const mergeUserId = this.glFeatures.mergeRequestWidgetGraphql
-        ? this.state.mergeUser?.id
+        ? getIdFromGraphQLId(this.state.mergeUser?.id)
         : this.mr.mergeUserId;
       const canRemoveSourceBranch = this.glFeatures.mergeRequestWidgetGraphql
         ? this.state.userPermissions.removeSourceBranch
@@ -96,7 +101,11 @@ export default {
         .cancelAutomaticMerge()
         .then((res) => res.data)
         .then((data) => {
-          eventHub.$emit('UpdateWidgetData', data);
+          if (this.glFeatures.mergeRequestWidgetGraphql) {
+            eventHub.$emit('MRWidgetUpdateRequested');
+          } else {
+            eventHub.$emit('UpdateWidgetData', data);
+          }
         })
         .catch(() => {
           this.isCancellingAutoMerge = false;
@@ -119,6 +128,11 @@ export default {
             eventHub.$emit('MRWidgetUpdateRequested');
           }
         })
+        .then(() => {
+          if (this.glFeatures.mergeRequestWidgetGraphql) {
+            this.$apollo.queries.state.refetch();
+          }
+        })
         .catch(() => {
           this.isRemovingSourceBranch = false;
           Flash(__('Something went wrong. Please try again.'));
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 a2771bc4bfb..5f8630bf7b3 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
@@ -2,9 +2,9 @@
 import { GlLoadingIcon, GlButton } from '@gitlab/ui';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import eventHub from '../../event_hub';
-import statusIcon from '../mr_widget_status_icon.vue';
-import autoMergeFailedQuery from '../../queries/states/auto_merge_failed.query.graphql';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
+import autoMergeFailedQuery from '../../queries/states/auto_merge_failed.query.graphql';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetAutoMergeFailed',
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 3d5daa4979b..2335e2984e4 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,14 +1,14 @@
 <script>
+import { GlButton, GlModalDirective, GlSkeletonLoader } from '@gitlab/ui';
 import $ from 'jquery';
 import { escape } from 'lodash';
-import { GlButton, GlModalDirective, GlSkeletonLoader } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
-import StatusIcon from '../mr_widget_status_icon.vue';
 import userPermissionsQuery from '../../queries/permissions.query.graphql';
 import conflictsStateQuery from '../../queries/states/conflicts.query.graphql';
+import StatusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetConflicts',
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
index a5ec095b8ec..e973a2350a3 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
@@ -1,9 +1,9 @@
 <script>
 import { GlButton } from '@gitlab/ui';
-import { n__ } from '~/locale';
 import { stripHtml } from '~/lib/utils/text_utility';
-import statusIcon from '../mr_widget_status_icon.vue';
+import { sprintf, s__, n__ } from '~/locale';
 import eventHub from '../../event_hub';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetFailedToMerge',
@@ -31,7 +31,15 @@ export default {
 
   computed: {
     mergeError() {
-      return this.mr.mergeError ? stripHtml(this.mr.mergeError, ' ').trim() : '';
+      const mergeError = this.mr.mergeError ? stripHtml(this.mr.mergeError, ' ').trim() : '';
+
+      return sprintf(
+        s__('mrWidget|%{mergeError}.'),
+        {
+          mergeError,
+        },
+        false,
+      );
     },
     timerText() {
       return n__(
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index 9d646dbfb3e..043d14e32a2 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -3,10 +3,12 @@
 import { GlLoadingIcon, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import { s__, __ } from '~/locale';
+import { OPEN_REVERT_MODAL, OPEN_CHERRY_PICK_MODAL } from '~/projects/commit/constants';
+import modalEventHub from '~/projects/commit/event_hub';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import eventHub from '../../event_hub';
 import MrWidgetAuthorTime from '../mr_widget_author_time.vue';
 import statusIcon from '../mr_widget_status_icon.vue';
-import eventHub from '../../event_hub';
 
 export default {
   name: 'MRWidgetMerged',
@@ -77,6 +79,9 @@ export default {
       return s__('mrWidget|Cherry-pick');
     },
   },
+  mounted() {
+    document.dispatchEvent(new CustomEvent('merged:UpdateActions'));
+  },
   methods: {
     removeSourceBranch() {
       this.isMakingRequest = true;
@@ -98,6 +103,12 @@ export default {
           Flash(__('Something went wrong. Please try again.'));
         });
     },
+    openRevertModal() {
+      modalEventHub.$emit(OPEN_REVERT_MODAL);
+    },
+    openCherryPickModal() {
+      modalEventHub.$emit(OPEN_CHERRY_PICK_MODAL);
+    },
   },
 };
 </script>
@@ -119,9 +130,7 @@ export default {
           size="small"
           category="secondary"
           variant="warning"
-          href="#modal-revert-commit"
-          data-toggle="modal"
-          data-container="body"
+          @click="openRevertModal"
         >
           {{ revertLabel }}
         </gl-button>
@@ -142,9 +151,7 @@ export default {
           v-gl-tooltip.hover
           :title="cherryPickTitle"
           size="small"
-          href="#modal-cherry-pick-commit"
-          data-toggle="modal"
-          data-container="body"
+          @click="openCherryPickModal"
         >
           {{ cherryPickLabel }}
         </gl-button>
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 3f68979bc0e..f91350d4a82 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,10 +1,10 @@
 <script>
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
-import statusIcon from '../mr_widget_status_icon.vue';
 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 statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetMissingBranch',
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 bf86e0d8b07..d15794c71b1 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
@@ -4,12 +4,12 @@ import { GlButton, GlSkeletonLoader } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { __, sprintf } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { deprecatedCreateFlash as Flash } from '../../../flash';
 import simplePoll from '../../../lib/utils/simple_poll';
 import eventHub from '../../event_hub';
-import statusIcon from '../mr_widget_status_icon.vue';
-import rebaseQuery from '../../queries/states/ready_to_merge.query.graphql';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
-import { deprecatedCreateFlash as Flash } from '../../../flash';
+import rebaseQuery from '../../queries/states/rebase.query.graphql';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetRebase',
@@ -159,7 +159,7 @@ export default {
       <div class="rebase-state-find-class-convention media media-body space-children">
         <span
           v-if="rebaseInProgress || isMakingRequest"
-          class="gl-font-weight-bold gl-ml-0!"
+          class="gl-font-weight-bold"
           data-testid="rebase-message"
           >{{ __('Rebase in progress') }}</span
         >
@@ -181,17 +181,12 @@ export default {
           >
             {{ __('Rebase') }}
           </gl-button>
-          <span
-            v-if="!rebasingError"
-            class="gl-font-weight-bold gl-ml-0!"
-            data-testid="rebase-message"
-            >{{
-              __(
-                'Fast-forward merge is not possible. Rebase the source branch onto the target branch.',
-              )
-            }}</span
-          >
-          <span v-else class="gl-font-weight-bold danger gl-ml-0!" data-testid="rebase-message">{{
+          <span v-if="!rebasingError" class="gl-font-weight-bold" data-testid="rebase-message">{{
+            __(
+              'Fast-forward merge is not possible. Rebase the source branch onto the target branch.',
+            )
+          }}</span>
+          <span v-else class="gl-font-weight-bold danger" data-testid="rebase-message">{{
             rebasingError
           }}</span>
         </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
index 14a29483d3c..f0259a975db 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
@@ -1,9 +1,13 @@
 <script>
 /* eslint-disable vue/no-v-html */
+import { GlButton } from '@gitlab/ui';
 import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
 
 export default {
   name: 'MRWidgetNothingToMerge',
+  components: {
+    GlButton,
+  },
   props: {
     mr: {
       type: Object,
@@ -25,11 +29,13 @@ export default {
         <span v-html="emptyStateSVG"></span>
       </div>
       <div class="text col-md-7 order-md-first col-12">
-        <span>{{
-          s__(
-            'mrWidgetNothingToMerge|Merge requests are a place to propose changes you have made to a project and discuss those changes with others.',
-          )
-        }}</span>
+        <p class="highlight">
+          {{
+            s__(
+              'mrWidgetNothingToMerge|Merge requests are a place to propose changes you have made to a project and discuss those changes with others.',
+            )
+          }}
+        </p>
         <p>
           {{
             s__(
@@ -45,9 +51,14 @@ export default {
           }}
         </p>
         <div>
-          <a v-if="mr.newBlobPath" :href="mr.newBlobPath" class="btn btn-inverted btn-success">{{
-            __('Create file')
-          }}</a>
+          <gl-button
+            v-if="mr.newBlobPath"
+            :href="mr.newBlobPath"
+            category="secondary"
+            variant="success"
+          >
+            {{ __('Create file') }}
+          </gl-button>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
index 5f56157cb89..b5d2f91c637 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
@@ -1,11 +1,26 @@
 <script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { s__ } from '~/locale';
 import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'PipelineFailed',
   components: {
+    GlLink,
+    GlSprintf,
     statusIcon,
   },
+  computed: {
+    troubleshootingDocsPath() {
+      return helpPagePath('ci/troubleshooting', { anchor: 'merge-request-status-messages' });
+    },
+  },
+  i18n: {
+    failedMessage: s__(
+      `mrWidget|The pipeline for this merge request did not complete. Push a new commit to fix the failure, or check the %{linkStart}troubleshooting documentation%{linkEnd} to see other possible actions.`,
+    ),
+  },
 };
 </script>
 
@@ -14,10 +29,13 @@ export default {
     <status-icon :show-disabled-button="true" status="warning" />
     <div class="media-body space-children">
       <span class="bold">
-        {{
-          s__(`mrWidget|The pipeline for this merge request failed.
-Please retry the job or push a new commit to fix the failure`)
-        }}
+        <gl-sprintf :message="$options.i18n.failedMessage">
+          <template #link="{ content }">
+            <gl-link :href="troubleshootingDocsPath" target="_blank">
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
       </span>
     </div>
   </div>
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 a890b176df0..690b6e9c462 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,5 +1,4 @@
 <script>
-import { isEmpty } from 'lodash';
 import {
   GlIcon,
   GlButton,
@@ -11,23 +10,24 @@ import {
   GlTooltipDirective,
   GlSkeletonLoader,
 } from '@gitlab/ui';
+import { isEmpty } from 'lodash';
 import readyToMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/ready_to_merge';
 import readyToMergeQuery from 'ee_else_ce/vue_merge_request_widget/queries/states/ready_to_merge.query.graphql';
+import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
 import simplePoll from '~/lib/utils/simple_poll';
 import { __ } from '~/locale';
-import MergeRequest from '../../../merge_request';
-import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import { deprecatedCreateFlash as Flash } from '../../../flash';
+import MergeRequest from '../../../merge_request';
+import { AUTO_MERGE_STRATEGIES, DANGER, INFO, WARNING } from '../../constants';
+import eventHub from '../../event_hub';
+import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import MergeRequestStore from '../../stores/mr_widget_store';
 import statusIcon from '../mr_widget_status_icon.vue';
-import eventHub from '../../event_hub';
-import SquashBeforeMerge from './squash_before_merge.vue';
-import CommitsHeader from './commits_header.vue';
 import CommitEdit from './commit_edit.vue';
 import CommitMessageDropdown from './commit_message_dropdown.vue';
-import { AUTO_MERGE_STRATEGIES, DANGER, INFO, WARNING } from '../../constants';
+import CommitsHeader from './commits_header.vue';
+import SquashBeforeMerge from './squash_before_merge.vue';
 
 const PIPELINE_RUNNING_STATE = 'running';
 const PIPELINE_FAILED_STATE = 'failed';
@@ -53,10 +53,13 @@ export default {
       result({ data }) {
         this.state = {
           ...data.project.mergeRequest,
-          mergeRequestsFfOnlyEnabled: data.mergeRequestsFfOnlyEnabled,
-          onlyAllowMergeIfPipelineSucceeds: data.onlyAllowMergeIfPipelineSucceeds,
+          mergeRequestsFfOnlyEnabled: data.project.mergeRequestsFfOnlyEnabled,
+          onlyAllowMergeIfPipelineSucceeds: data.project.onlyAllowMergeIfPipelineSucceeds,
         };
-        this.removeSourceBranch = data.project.mergeRequest.shouldRemoveSourceBranch;
+        this.removeSourceBranch =
+          data.project.mergeRequest.shouldRemoveSourceBranch ||
+          data.project.mergeRequest.forceRemoveSourceBranch ||
+          false;
         this.commitMessage = data.project.mergeRequest.defaultMergeCommitMessage;
         this.squashBeforeMerge = data.project.mergeRequest.squashOnMerge;
         this.isSquashReadOnly = data.project.squashReadOnly;
@@ -277,7 +280,20 @@ export default {
       return this.mr.mergeRequestDiffsPath;
     },
   },
+  mounted() {
+    if (this.glFeatures.mergeRequestWidgetGraphql) {
+      eventHub.$on('ApprovalUpdated', this.updateGraphqlState);
+    }
+  },
+  beforeDestroy() {
+    if (this.glFeatures.mergeRequestWidgetGraphql) {
+      eventHub.$off('ApprovalUpdated', this.updateGraphqlState);
+    }
+  },
   methods: {
+    updateGraphqlState() {
+      return this.$apollo.queries.state.refetch();
+    },
     updateMergeCommitMessage(includeDescription) {
       const commitMessage = this.glFeatures.mergeRequestWidgetGraphql
         ? this.state.defaultMergeCommitMessage
@@ -326,6 +342,10 @@ export default {
           } else if (hasError) {
             eventHub.$emit('FailedToMerge', data.merge_error);
           }
+
+          if (this.glFeatures.mergeRequestWidgetGraphql) {
+            this.updateGraphqlState();
+          }
         })
         .catch(() => {
           this.isMakingRequest = false;
@@ -442,6 +462,7 @@ export default {
                 :variant="mergeButtonVariant"
                 :disabled="isMergeButtonDisabled"
                 :loading="isMakingRequest"
+                data-qa-selector="merge_button"
                 @click="handleMergeButtonClick(isAutoMergeAvailable)"
                 >{{ mergeButtonText }}</gl-button
               >
@@ -532,7 +553,7 @@ export default {
       </div>
       <merge-train-helper-text
         v-if="shouldRenderMergeTrainHelperText"
-        :pipeline-id="pipeline.id"
+        :pipeline-id="pipelineId"
         :pipeline-link="pipeline.path"
         :merge-train-length="stateData.mergeTrainsCount"
         :merge-train-when-pipeline-succeeds-docs-path="mr.mergeTrainWhenPipelineSucceedsDocsPath"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
index 78e69b9ff9b..329964d009a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlButton } from '@gitlab/ui';
-import statusIcon from '../mr_widget_status_icon.vue';
 import notesEventHub from '~/notes/event_hub';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'UnresolvedDiscussions',
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 3f1db815f95..af305815381 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
@@ -1,17 +1,17 @@
 <script>
-import $ from 'jquery';
 import { GlButton } from '@gitlab/ui';
 import { produce } from 'immer';
-import { __ } from '~/locale';
+import $ from 'jquery';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
+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 workInProgressQuery from '../../queries/states/work_in_progress.query.graphql';
 import removeWipMutation from '../../queries/toggle_wip.mutation.graphql';
 import StatusIcon from '../mr_widget_status_icon.vue';
-import eventHub from '../../event_hub';
 
 export default {
   name: 'WorkInProgress',