Moves more mr widget components into vue filesfl-mr-widget-refactor

Adds i18n
Adds better test coverage

7 files changed, 135 insertions, 103 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js
deleted file mode 100644
index 09561694939..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import statusIcon from '../mr_widget_status_icon';
-
-export default {
-  name: 'MRWidgetChecking',
-  components: {
-    statusIcon,
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon status="loading" :show-disabled-button="true" />
-      <div class="media-body space-children">
-        <span class="bold">
-          Checking ability to merge automatically
-        </span>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
new file mode 100644
index 00000000000..04e1766b8c7
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
@@ -0,0 +1,23 @@
+<script>
+  import statusIcon from '../mr_widget_status_icon';
+
+  export default {
+    name: 'MRWidgetChecking',
+    components: {
+      statusIcon,
+    },
+  };
+</script>
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      status="loading"
+      :show-disabled-button="true"
+    />
+    <div class="media-body space-children">
+      <span class="bold">
+        {{ s__("mrWidget|Checking ability to merge automatically") }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
deleted file mode 100644
index dc19b20aa11..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
-import statusIcon from '../mr_widget_status_icon';
-
-export default {
-  name: 'MRWidgetClosed',
-  props: {
-    mr: { type: Object, required: true },
-  },
-  components: {
-    'mr-widget-author-and-time': mrWidgetAuthorTime,
-    statusIcon,
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon status="warning" />
-      <div class="media-body">
-        <mr-widget-author-and-time
-          actionText="Closed by"
-          :author="mr.metrics.closedBy"
-          :dateTitle="mr.metrics.closedAt"
-          :dateReadable="mr.metrics.readableClosedAt"
-        />
-        <section class="mr-info-list">
-          <p>
-            The changes were not merged into
-            <a
-              :href="mr.targetBranchPath"
-              class="label-branch">
-              {{mr.targetBranch}}</a>
-          </p>
-        </section>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
new file mode 100644
index 00000000000..8c0ce43c76c
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
@@ -0,0 +1,48 @@
+<script>
+  import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
+  import statusIcon from '../mr_widget_status_icon';
+
+  export default {
+    name: 'MRWidgetClosed',
+    components: {
+      mrWidgetAuthorTime,
+      statusIcon,
+    },
+    props: {
+      /* TODO: This is providing all store and service down when it
+      only needs metrics and targetBranch */
+      mr: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+    },
+  };
+</script>
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      status="warning"
+    />
+    <div class="media-body">
+      <mr-widget-author-time
+        :action-text="s__('mrWidget|Closed by')"
+        :author="mr.metrics.closedBy"
+        :date-title="mr.metrics.closedAt"
+        :date-readable="mr.metrics.readableClosedAt"
+      />
+
+      <section class="mr-info-list">
+        <p>
+          {{ s__("mrWidget|The changes were not merged into") }}
+          <a
+            :href="mr.targetBranchPath"
+            class="label-branch"
+          >
+            {{ mr.targetBranch }}
+          </a>
+        </p>
+      </section>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
deleted file mode 100644
index 7a887bacfa7..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import statusIcon from '../mr_widget_status_icon';
-
-export default {
-  name: 'MRWidgetConflicts',
-  props: {
-    mr: { type: Object, required: true },
-  },
-  components: {
-    statusIcon,
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon
-        status="warning"
-        :show-disabled-button="true" />
-      <div class="media-body space-children">
-        <span
-          v-if="mr.shouldBeRebased"
-          class="bold">
-          Fast-forward merge is not possible.
-          To merge this request, first rebase locally.
-        </span>
-        <template v-else>
-          <span class="bold">
-            There are merge conflicts<span v-if="!mr.canMerge">.</span>
-            <span v-if="!mr.canMerge">
-              Resolve these conflicts or ask someone with write access to this repository to merge it locally
-            </span>
-          </span>
-          <a
-            v-if="mr.canMerge && mr.conflictResolutionPath"
-            :href="mr.conflictResolutionPath"
-            class="js-resolve-conflicts-button btn btn-default btn-xs">
-            Resolve conflicts
-          </a>
-          <a
-            v-if="mr.canMerge"
-            class="js-merge-locally-button btn btn-default btn-xs"
-            data-toggle="modal"
-            href="#modal_merge_info">
-            Merge locally
-          </a>
-        </template>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
new file mode 100644
index 00000000000..13b07f82330
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -0,0 +1,61 @@
+<script>
+  import statusIcon from '../mr_widget_status_icon';
+
+  export default {
+    name: 'MRWidgetConflicts',
+    components: {
+      statusIcon,
+    },
+    props: {
+      /* TODO: This is providing all store and service down when it
+      only needs a few props */
+      mr: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+    },
+  };
+</script>
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      status="warning"
+      :show-disabled-button="true"
+    />
+
+    <div class="media-body space-children">
+      <span
+        v-if="mr.shouldBeRebased"
+        class="bold"
+      >
+        {{ s__(`mrWidget|Fast-forward merge is not possible.
+To merge this request, first rebase locally.`) }}
+      </span>
+      <template v-else>
+        <span class="bold">
+          {{ s__("mrWidget|There are merge conflicts") }}<span v-if="!mr.canMerge">.</span>
+          <span v-if="!mr.canMerge">
+            {{ s__(`mrWidget|Resolve these conflicts or ask someone
+            with write access to this repository to merge it locally`) }}
+          </span>
+        </span>
+        <a
+          v-if="mr.canMerge && mr.conflictResolutionPath"
+          :href="mr.conflictResolutionPath"
+          class="js-resolve-conflicts-button btn btn-default btn-xs"
+        >
+          {{ s__("mrWidget|Resolve conflicts") }}
+        </a>
+        <button
+          v-if="mr.canMerge"
+          class="js-merge-locally-button btn btn-default btn-xs"
+          data-toggle="modal"
+          data-target="#modal_merge_info"
+        >
+          {{ s__("mrWidget|Merge locally") }}
+        </button>
+      </template>
+    </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 2dd3b2c2f98..5e8e251428a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -18,11 +18,11 @@ export { default as WidgetDeployment } from './components/mr_widget_deployment';
 export { default as WidgetRelatedLinks } from './components/mr_widget_related_links';
 export { default as MergedState } from './components/states/mr_widget_merged';
 export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge';
-export { default as ClosedState } from './components/states/mr_widget_closed';
+export { default as ClosedState } from './components/states/mr_widget_closed.vue';
 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.vue';
-export { default as ConflictsState } from './components/states/mr_widget_conflicts';
+export { default as ConflictsState } from './components/states/mr_widget_conflicts.vue';
 export { default as NothingToMergeState } from './components/states/mr_widget_nothing_to_merge';
 export { default as MissingBranchState } from './components/states/mr_widget_missing_branch';
 export { default as NotAllowedState } from './components/states/mr_widget_not_allowed';
@@ -34,7 +34,7 @@ export { default as PipelineFailedState } from './components/states/mr_widget_pi
 export { default as MergeWhenPipelineSucceedsState } from './components/states/mr_widget_merge_when_pipeline_succeeds';
 export { default as RebaseState } from './components/states/mr_widget_rebase.vue';
 export { default as AutoMergeFailed } from './components/states/mr_widget_auto_merge_failed.vue';
-export { default as CheckingState } from './components/states/mr_widget_checking';
+export { default as CheckingState } from './components/states/mr_widget_checking.vue';
 export { default as MRWidgetStore } from './stores/mr_widget_store';
 export { default as MRWidgetService } from './services/mr_widget_service';
 export { default as eventHub } from './event_hub';