Move archived component to vue file

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js

-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>
-  `,
-};

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue

+<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>

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';

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;

spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js

 import Vue from 'vue';
-import archivedComponent from '~/vue_merge_request_widget/components/states/mr_widget_archived';
+import archivedComponent from '~/vue_merge_request_widget/components/states/mr_widget_archived.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
 
 describe('MRWidgetArchived', () => {
-  describe('template', () => {
-    it('should have correct elements', () => {
-      const Component = Vue.extend(archivedComponent);
-      const el = new Component({
-        el: document.createElement('div'),
-      }).$el;
+  let vm;
 
-      expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.querySelector('button').classList.contains('btn-success')).toBeTruthy();
-      expect(el.querySelector('button').disabled).toBeTruthy();
-      expect(el.innerText).toContain('This project is archived, write access has been disabled');
-    });
+  beforeEach(() => {
+    const Component = Vue.extend(archivedComponent);
+    vm = mountComponent(Component);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders a ci status failed icon', () => {
+    expect(vm.$el.querySelector('.ci-status-icon')).not.toBeNull();
+  });
+
+  it('renders a disabled button', () => {
+    expect(vm.$el.querySelector('button').getAttribute('disabled')).toEqual('disabled');
+    expect(vm.$el.querySelector('button').textContent.trim()).toEqual('Merge');
+  });
+
+  it('renders information', () => {
+    expect(
+      vm.$el.querySelector('.bold').textContent.trim(),
+    ).toEqual('This project is archived, write access has been disabled');
   });
 });