Move UnresolvedDiscussions vue component

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

-import statusIcon from '../mr_widget_status_icon.vue';
-
-export default {
-  name: 'MRWidgetUnresolvedDiscussions',
-  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 class="bold">
-          There are unresolved discussions. Please resolve these discussions
-        </span>
-        <a
-          v-if="mr.createIssueToResolveDiscussionsPath"
-          :href="mr.createIssueToResolveDiscussionsPath"
-          class="btn btn-default btn-xs js-create-issue">
-          Create an issue to resolve them later
-        </a>
-      </div>
-    </div>
-  `,
-};

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

+<script>
+import statusIcon from '../mr_widget_status_icon.vue';
+
+export default {
+  name: 'UnresolvedDiscussions',
+  components: {
+    statusIcon,
+  },
+  props: {
+    mr: { type: Object, required: true },
+  },
+};
+</script>
+
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      status="warning"
+      :show-disabled-button="true"
+    />
+    <div class="media-body space-children">
+      <span class="bold">
+        There are unresolved discussions. Please resolve these discussions
+      </span>
+      <a
+        v-if="mr.createIssueToResolveDiscussionsPath"
+        :href="mr.createIssueToResolveDiscussionsPath"
+        class="btn btn-default btn-xs js-create-issue">
+        Create an issue to resolve them later
+      </a>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -29,7 +29,7 @@ export { default as MissingBranchState } from './components/states/mr_widget_mis
 export { default as NotAllowedState } from './components/states/mr_widget_not_allowed.vue';
 export { default as ReadyToMergeState } from './components/states/mr_widget_ready_to_merge';
 export { default as SHAMismatchState } from './components/states/mr_widget_sha_mismatch';
-export { default as UnresolvedDiscussionsState } from './components/states/mr_widget_unresolved_discussions';
+export { default as UnresolvedDiscussionsState } from './components/states/unresolved_discussions.vue';
 export { default as PipelineBlockedState } from './components/states/mr_widget_pipeline_blocked.vue';
 export { default as PipelineFailedState } from './components/states/mr_widget_pipeline_failed';
 export { default as MergeWhenPipelineSucceedsState } from './components/states/mr_widget_merge_when_pipeline_succeeds.vue';

changelogs/unreleased/refactor-move-mr-widget-unresolved-discussions-vue-component.yml

+---
+title: Move UnresolvedDiscussions vue component
+merge_request: 17538
+author: George Tsiolis
+type: performance

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

 import Vue from 'vue';
-import unresolvedDiscussionsComponent from '~/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions';
-describe('MRWidgetUnresolvedDiscussions', () => {
+import UnresolvedDiscussions from '~/vue_merge_request_widget/components/states/unresolved_discussions.vue';
+describe('UnresolvedDiscussions', () => {
   describe('props', () => {
     it('should have props', () => {
-      const { mr } = unresolvedDiscussionsComponent.props;
+      const { mr } = UnresolvedDiscussions.props;
       expect(mr.type instanceof Object).toBeTruthy();
       expect(mr.required).toBeTruthy();
@@ -17,7 +17,7 @@ describe('MRWidgetUnresolvedDiscussions', () => {
     const path = 'foo/bar';
     beforeEach(() => {
-      const Component = Vue.extend(unresolvedDiscussionsComponent);
+      const Component = Vue.extend(UnresolvedDiscussions);
       const mr = {
         createIssueToResolveDiscussionsPath: path,
       };