Moves mr widget to a vue component

Prevents maintainer edit to render a blank div
Properly names sha mismatch component

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_maintainer_edit.vue

-<script>
-  export default {
-    name: 'MRWidgetMaintainerEdit',
-    props: {
-      maintainerEditAllowed: {
-        type: Boolean,
-        default: false,
-        required: false,
-      },
-    },
-  };
-</script>
-
-<template>
-  <section class="mr-info-list mr-links">
-    <p v-if="maintainerEditAllowed">
-      {{ s__("mrWidget|Allows edits from maintainers") }}
-    </p>
-  </section>
-</template>

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -15,7 +15,6 @@ export { default as WidgetHeader } from './components/mr_widget_header.vue';
 export { default as WidgetMergeHelp } from './components/mr_widget_merge_help.vue';
 export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue';
 export { default as Deployment } from './components/deployment.vue';
-export { default as WidgetMaintainerEdit } from './components/mr_widget_maintainer_edit.vue';
 export { default as WidgetRelatedLinks } from './components/mr_widget_related_links.vue';
 export { default as MergedState } from './components/states/mr_widget_merged.vue';
 export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge.vue';
@@ -45,4 +44,4 @@ export { default as SquashBeforeMerge } from './components/states/mr_widget_squa
 export { default as notify } from '../lib/utils/notify';
 export { default as SourceBranchRemovalStatus } from './components/source_branch_removal_status.vue';
 
-export { default as mrWidgetOptions } from './mr_widget_options';
+export { default as mrWidgetOptions } from './mr_widget_options.vue';

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js → app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

+<script>
+
 import Project from '~/pages/projects/project';
 import SmartInterval from '~/smart_interval';
-import Flash from '../flash';
+import createFlash from '../flash';
 import {
   WidgetHeader,
   WidgetMergeHelp,
   WidgetPipeline,
   Deployment,
-  WidgetMaintainerEdit,
   WidgetRelatedLinks,
   MergedState,
   ClosedState,
@@ -99,7 +100,7 @@ export default {
             cb.call(null, data);
           }
         })
-        .catch(() => new Flash('Something went wrong. Please try again.'));
+        .catch(() => createFlash('Something went wrong. Please try again.'));
     },
     initPolling() {
       this.pollingInterval = new SmartInterval({
@@ -134,7 +135,7 @@ export default {
           }
         })
         .catch(() => {
-          new Flash('Something went wrong while fetching the environments for this merge request. Please try again.'); // eslint-disable-line
+          createFlash('Something went wrong while fetching the environments for this merge request. Please try again.'); // eslint-disable-line
         });
     },
     fetchActionsContent() {
@@ -147,7 +148,7 @@ export default {
             Project.initRefSwitcher();
           }
         })
-        .catch(() => new Flash('Something went wrong. Please try again.'));
+        .catch(() => createFlash('Something went wrong. Please try again.'));
     },
     handleNotification(data) {
       if (data.ci_status === this.mr.ciStatus) return;
@@ -214,7 +215,6 @@ export default {
     'mr-widget-merge-help': WidgetMergeHelp,
     'mr-widget-pipeline': WidgetPipeline,
     Deployment,
-    'mr-widget-maintainer-edit': WidgetMaintainerEdit,
     'mr-widget-related-links': WidgetRelatedLinks,
     'mr-widget-merged': MergedState,
     'mr-widget-closed': ClosedState,
@@ -227,7 +227,7 @@ export default {
     'mr-widget-not-allowed': NotAllowedState,
     'mr-widget-missing-branch': MissingBranchState,
     'mr-widget-ready-to-merge': ReadyToMergeState,
-    'mr-widget-sha-mismatch': ShaMismatchState,
+    'sha-mismatch': ShaMismatchState,
     'mr-widget-squash-before-merge': SquashBeforeMerge,
     'mr-widget-checking': CheckingState,
     'mr-widget-unresolved-discussions': UnresolvedDiscussionsState,
@@ -238,9 +238,13 @@ export default {
     'mr-widget-rebase': RebaseState,
     SourceBranchRemovalStatus,
   },
-  template: `
+};
+</script>
+<template>
   <div class="mr-state-widget prepend-top-default">
-      <mr-widget-header :mr="mr" />
+    <mr-widget-header
+      :mr="mr"
+    />
     <mr-widget-pipeline
       v-if="shouldRenderPipelines"
       :pipeline="mr.pipeline"
@@ -256,22 +260,31 @@ export default {
       <component
         :is="componentName"
         :mr="mr"
-          :service="service" />
-        <mr-widget-maintainer-edit
-          :maintainerEditAllowed="mr.maintainerEditAllowed" />
+        :service="service"
+      />
+
+      <section
+        v-if="mr.maintainerEditAllowed"
+        class="mr-info-list mr-links"
+      >
+        {{ s__("mrWidget|Allows edits from maintainers") }}
+      </section>
+
       <mr-widget-related-links
         v-if="shouldRenderRelatedLinks"
         :state="mr.state"
-          :related-links="mr.relatedLinks" />
+        :related-links="mr.relatedLinks"
+      />
+
       <source-branch-removal-status
         v-if="shouldRenderSourceBranchRemovalStatus"
       />
     </div>
     <div
       class="mr-widget-footer"
-        v-if="shouldRenderMergeHelp">
+      v-if="shouldRenderMergeHelp"
+    >
       <mr-widget-merge-help />
     </div>
   </div>
-  `,
-};
+</template>
\ No newline at end of file

spec/javascripts/vue_mr_widget/components/mr_widget_maintainer_edit_spec.js

-import Vue from 'vue';
-import maintainerEditComponent from '~/vue_merge_request_widget/components/mr_widget_maintainer_edit.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-describe('RWidgetMaintainerEdit', () => {
-  let Component;
-  let vm;
-
-  beforeEach(() => {
-    Component = Vue.extend(maintainerEditComponent);
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('when a maintainer is allowed to edit', () => {
-    beforeEach(() => {
-      vm = mountComponent(Component, {
-        maintainerEditAllowed: true,
-      });
-    });
-
-    it('it renders the message', () => {
-      expect(vm.$el.textContent.trim()).toEqual('Allows edits from maintainers');
-    });
-  });
-
-  describe('when a maintainer is not allowed to edit', () => {
-    beforeEach(() => {
-      vm = mountComponent(Component, {
-        maintainerEditAllowed: false,
-      });
-    });
-
-    it('hides the message', () => {
-      expect(vm.$el.textContent.trim()).toEqual('');
-    });
-  });
-});

spec/javascripts/vue_mr_widget/mr_widget_options_spec.js

 import Vue from 'vue';
-import mrWidgetOptions from '~/vue_merge_request_widget/mr_widget_options';
+import mrWidgetOptions from '~/vue_merge_request_widget/mr_widget_options.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 import notify from '~/lib/utils/notify';
 import { stateKey } from '~/vue_merge_request_widget/stores/state_maps';