Move archived component to vue file

4 files changed, 35 insertions, 27 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js
deleted file mode 100644
index b4e4a6aa161..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import statusIcon from '../mr_widget_status_icon';
-
-export default {
-  name: 'MRWidgetArchived',
-  components: {
-    statusIcon,
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <div class="space-children">
-        <status-icon status="failed" />
-        <button
-          type="button"
-          class="btn btn-success btn-sm"
-          disabled="true">
-          Merge
-        </button>
-      </div>
-      <div class="media-body">
-        <span class="bold">
-          This project is archived, write access has been disabled
-        </span>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
new file mode 100644
index 00000000000..552b3e6726d
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
@@ -0,0 +1,31 @@
+<script>
+  import statusIcon from '../mr_widget_status_icon';
+
+  export default {
+    name: 'MRWidgetArchived',
+    components: {
+      statusIcon,
+    },
+  };
+</script>
+<template>
+  <div class="mr-widget-body media">
+    <div class="space-children">
+      <status-icon
+        status="failed"
+      />
+      <button
+        type="button"
+        class="btn btn-success btn-sm"
+        disabled="true"
+      >
+        {{ s__("mrWidget|Merge") }}
+      </button>
+    </div>
+    <div class="media-body">
+      <span class="bold">
+        {{ s__("mrWidget|This project is archived, write access has been disabled") }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index 940f3d9b2d0..12610501868 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -21,7 +21,7 @@ export { default as FailedToMerge } from './components/states/mr_widget_failed_t
 export { default as ClosedState } from './components/states/mr_widget_closed';
 export { default as MergingState } from './components/states/mr_widget_merging';
 export { default as WipState } from './components/states/mr_widget_wip';
-export { default as ArchivedState } from './components/states/mr_widget_archived';
+export { default as ArchivedState } from './components/states/mr_widget_archived.vue';
 export { default as ConflictsState } from './components/states/mr_widget_conflicts';
 export { default as NothingToMergeState } from './components/states/mr_widget_nothing_to_merge';
 export { default as MissingBranchState } from './components/states/mr_widget_missing_branch';
diff --git a/app/assets/javascripts/vue_merge_request_widget/index.js b/app/assets/javascripts/vue_merge_request_widget/index.js
index 43ef468c303..6b9918b65b0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/index.js
@@ -2,6 +2,9 @@ import {
   Vue,
   mrWidgetOptions,
 } from './dependencies';
+import Translate from '../vue_shared/translate';
+
+Vue.use(Translate);
 
 document.addEventListener('DOMContentLoaded', () => {
   gl.mrWidgetData.gitlabLogo = gon.gitlab_logo;