1 files changed, 69 insertions, 0 deletions
diff --git a/app/assets/javascripts/merge_request/components/status_box.vue b/app/assets/javascripts/merge_request/components/status_box.vue
new file mode 100644
index 00000000000..fd99802caff
--- /dev/null
+++ b/app/assets/javascripts/merge_request/components/status_box.vue
@@ -0,0 +1,69 @@
+<script>
+import { GlIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
+import mrEventHub from '../eventhub';
+
+const CLASSES = {
+  opened: 'status-box-open',
+  closed: 'status-box-mr-closed',
+  merged: 'status-box-mr-merged',
+};
+
+const STATUS = {
+  opened: [__('Open'), 'issue-open-m'],
+  closed: [__('Closed'), 'close'],
+  merged: [__('Merged'), 'git-merge'],
+};
+
+export default {
+  components: {
+    GlIcon,
+  },
+  props: {
+    initialState: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      state: this.initialState,
+    };
+  },
+  computed: {
+    statusBoxClass() {
+      return CLASSES[this.state];
+    },
+    statusHumanName() {
+      return STATUS[this.state][0];
+    },
+    statusIconName() {
+      return STATUS[this.state][1];
+    },
+  },
+  created() {
+    mrEventHub.$on('mr.state.updated', this.updateState);
+  },
+  beforeDestroy() {
+    mrEventHub.$off('mr.state.updated', this.updateState);
+  },
+  methods: {
+    updateState({ state }) {
+      this.state = state;
+    },
+  },
+};
+</script>
+
+<template>
+  <div :class="statusBoxClass" class="issuable-status-box status-box">
+    <gl-icon
+      :name="statusIconName"
+      class="gl-display-block gl-display-sm-none!"
+      data-testid="status-icon"
+    />
+    <span class="gl-display-none gl-display-sm-block">
+      {{ statusHumanName }}
+    </span>
+  </div>
+</template>