Add latest changes from gitlab-org/gitlab@master

2 files changed, 83 insertions, 3 deletions

diff --git a/app/assets/javascripts/merge_requests/components/merge_request_status_badge.vue b/app/assets/javascripts/merge_requests/components/merge_request_status_badge.vue
new file mode 100644
index 00000000000..3d5478757a8
--- /dev/null
+++ b/app/assets/javascripts/merge_requests/components/merge_request_status_badge.vue
@@ -0,0 +1,74 @@
+<script>
+import Vue from 'vue';
+import { fetchPolicies } from '~/lib/graphql';
+import StatusBadge from '~/issuable/components/status_badge.vue';
+
+export const badgeState = Vue.observable({
+  state: '',
+  updateStatus: null,
+});
+
+export default {
+  components: {
+    StatusBadge,
+  },
+  inject: {
+    query: { default: null },
+    projectPath: { default: null },
+    iid: { default: null },
+  },
+  props: {
+    initialState: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    issuableType: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    if (!this.iid) {
+      return {
+        state: this.initialState,
+      };
+    }
+
+    if (!badgeState.state && this.initialState) {
+      badgeState.state = this.initialState;
+    }
+
+    return badgeState;
+  },
+  created() {
+    if (!badgeState.updateStatus) {
+      badgeState.updateStatus = this.fetchState;
+    }
+  },
+  beforeDestroy() {
+    if (badgeState.updateStatus && this.query) {
+      badgeState.updateStatus = null;
+    }
+  },
+  methods: {
+    async fetchState() {
+      const { data } = await this.$apollo.query({
+        query: this.query,
+        variables: {
+          projectPath: this.projectPath,
+          iid: this.iid,
+        },
+        fetchPolicy: fetchPolicies.NO_CACHE,
+      });
+
+      badgeState.state = data?.workspace?.issuable?.state;
+    },
+  },
+};
+</script>
+
+<template>
+  <status-badge class="gl-align-self-center gl-mr-3" :issuable-type="issuableType" :state="state" />
+</template>
diff --git a/app/assets/javascripts/merge_requests/components/sticky_header.vue b/app/assets/javascripts/merge_requests/components/sticky_header.vue
index 3c3bee9b108..c1e88a901c4 100644
--- a/app/assets/javascripts/merge_requests/components/sticky_header.vue
+++ b/app/assets/javascripts/merge_requests/components/sticky_header.vue
@@ -7,13 +7,15 @@ import { TYPENAME_MERGE_REQUEST } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { isLoggedIn } from '~/lib/utils/common_utils';
-import StatusBox from '~/issuable/components/status_box.vue';
+import StatusBadge from '~/issuable/components/status_badge.vue';
+import { TYPE_MERGE_REQUEST } from '~/issues/constants';
 import DiscussionCounter from '~/notes/components/discussion_counter.vue';
 import TodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import titleSubscription from '../queries/title.subscription.graphql';
 
 export default {
+  TYPE_MERGE_REQUEST,
   apollo: {
     $subscribe: {
       title: {
@@ -41,8 +43,8 @@ export default {
     GlLink,
     GlSprintf,
     GlBadge,
-    StatusBox,
     DiscussionCounter,
+    StatusBadge,
     TodoWidget,
     ClipboardButton,
   },
@@ -115,7 +117,11 @@ export default {
         :class="{ 'gl-max-w-container-xl': !isFluidLayout }"
       >
         <div class="gl-w-full gl-display-flex gl-align-items-baseline">
-          <status-box :initial-state="getNoteableData.state" issuable-type="merge_request" />
+          <status-badge
+            class="gl-align-self-center gl-mr-3"
+            :issuable-type="$options.TYPE_MERGE_REQUEST"
+            :state="getNoteableData.state"
+          />
           <a
             v-safe-html:[$options.safeHtmlConfig]="titleHtml"
             href="#top"