1 files changed, 113 insertions, 0 deletions
diff --git a/app/assets/javascripts/merge_requests/components/merge_request_header.vue b/app/assets/javascripts/merge_requests/components/merge_request_header.vue
new file mode 100644
index 00000000000..b2e7245bd88
--- /dev/null
+++ b/app/assets/javascripts/merge_requests/components/merge_request_header.vue
@@ -0,0 +1,113 @@
+<script>
+import Vue from 'vue';
+// eslint-disable-next-line no-restricted-imports
+import { mapGetters } from 'vuex';
+import HiddenBadge from '~/issuable/components/hidden_badge.vue';
+import LockedBadge from '~/issuable/components/locked_badge.vue';
+import StatusBadge from '~/issuable/components/status_badge.vue';
+import { TYPE_ISSUE, TYPE_MERGE_REQUEST, WORKSPACE_PROJECT } from '~/issues/constants';
+import { fetchPolicies } from '~/lib/graphql';
+import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue';
+
+export const badgeState = Vue.observable({
+  state: '',
+  updateStatus: null,
+});
+
+export default {
+  TYPE_ISSUE,
+  TYPE_MERGE_REQUEST,
+  WORKSPACE_PROJECT,
+  components: {
+    ConfidentialityBadge,
+    LockedBadge,
+    HiddenBadge,
+    StatusBadge,
+  },
+  inject: {
+    query: { default: null },
+    projectPath: { default: null },
+    hidden: { default: false },
+    iid: { default: null },
+  },
+  props: {
+    initialState: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    if (!this.iid) {
+      return {
+        state: this.initialState,
+      };
+    }
+
+    if (!badgeState.state && this.initialState) {
+      badgeState.state = this.initialState;
+    }
+
+    return badgeState;
+  },
+  computed: {
+    ...mapGetters(['getNoteableData']),
+    isLocked() {
+      return this.getNoteableData.discussion_locked;
+    },
+    isConfidential() {
+      return this.getNoteableData.confidential;
+    },
+  },
+  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>
+  <span class="gl-display-contents">
+    <status-badge
+      class="gl-align-self-center gl-mr-2"
+      :issuable-type="$options.TYPE_MERGE_REQUEST"
+      :state="state"
+    />
+    <confidentiality-badge
+      v-if="isConfidential"
+      class="gl-align-self-center gl-mr-2"
+      :issuable-type="$options.TYPE_ISSUE"
+      :workspace-type="$options.WORKSPACE_PROJECT"
+    />
+    <locked-badge
+      v-if="isLocked"
+      class="gl-align-self-center gl-mr-2"
+      :issuable-type="$options.TYPE_MERGE_REQUEST"
+    />
+    <hidden-badge
+      v-if="hidden"
+      class="gl-align-self-center gl-mr-2"
+      :issuable-type="$options.TYPE_MERGE_REQUEST"
+    />
+  </span>
+</template>