Merge branch '45462-sha-object' into 'master'

Resolve "`sha-mismatch` vue component is rendering an empty block"

Closes #45462

See merge request gitlab-org/gitlab-ce!18884

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,
@@ -40,10 +41,39 @@ import { setFavicon } from '../lib/utils/common_utils';
 export default {
   el: '#js-vue-mr-widget',
   name: 'MRWidget',
+  components: {
+    'mr-widget-header': WidgetHeader,
+    'mr-widget-merge-help': WidgetMergeHelp,
+    'mr-widget-pipeline': WidgetPipeline,
+    Deployment,
+    'mr-widget-related-links': WidgetRelatedLinks,
+    'mr-widget-merged': MergedState,
+    'mr-widget-closed': ClosedState,
+    'mr-widget-merging': MergingState,
+    'mr-widget-failed-to-merge': FailedToMerge,
+    'mr-widget-wip': WorkInProgressState,
+    'mr-widget-archived': ArchivedState,
+    'mr-widget-conflicts': ConflictsState,
+    'mr-widget-nothing-to-merge': NothingToMergeState,
+    'mr-widget-not-allowed': NotAllowedState,
+    'mr-widget-missing-branch': MissingBranchState,
+    'mr-widget-ready-to-merge': ReadyToMergeState,
+    'sha-mismatch': ShaMismatchState,
+    'mr-widget-squash-before-merge': SquashBeforeMerge,
+    'mr-widget-checking': CheckingState,
+    'mr-widget-unresolved-discussions': UnresolvedDiscussionsState,
+    'mr-widget-pipeline-blocked': PipelineBlockedState,
+    'mr-widget-pipeline-failed': PipelineFailedState,
+    'mr-widget-merge-when-pipeline-succeeds': MergeWhenPipelineSucceedsState,
+    'mr-widget-auto-merge-failed': AutoMergeFailed,
+    'mr-widget-rebase': RebaseState,
+    SourceBranchRemovalStatus,
+  },
   props: {
     mrData: {
       type: Object,
       required: false,
+      default: null,
     },
   },
   data() {
@@ -72,6 +102,13 @@ export default {
         (!this.mr.isNothingToMergeState && !this.mr.isMergedState);
     },
   },
+  created() {
+    this.initPolling();
+    this.bindEventHubListeners();
+  },
+  mounted() {
+    this.handleMounted();
+  },
   methods: {
     createService(store) {
       const endpoints = {
@@ -99,7 +136,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 +171,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 +184,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;
@@ -202,76 +239,53 @@ export default {
       this.initDeploymentsPolling();
     },
   },
-  created() {
-    this.initPolling();
-    this.bindEventHubListeners();
-  },
-  mounted() {
-    this.handleMounted();
-  },
-  components: {
-    'mr-widget-header': WidgetHeader,
-    '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,
-    'mr-widget-merging': MergingState,
-    'mr-widget-failed-to-merge': FailedToMerge,
-    'mr-widget-wip': WorkInProgressState,
-    'mr-widget-archived': ArchivedState,
-    'mr-widget-conflicts': ConflictsState,
-    'mr-widget-nothing-to-merge': NothingToMergeState,
-    'mr-widget-not-allowed': NotAllowedState,
-    'mr-widget-missing-branch': MissingBranchState,
-    'mr-widget-ready-to-merge': ReadyToMergeState,
-    'mr-widget-sha-mismatch': ShaMismatchState,
-    'mr-widget-squash-before-merge': SquashBeforeMerge,
-    'mr-widget-checking': CheckingState,
-    'mr-widget-unresolved-discussions': UnresolvedDiscussionsState,
-    'mr-widget-pipeline-blocked': PipelineBlockedState,
-    'mr-widget-pipeline-failed': PipelineFailedState,
-    'mr-widget-merge-when-pipeline-succeeds': MergeWhenPipelineSucceedsState,
-    'mr-widget-auto-merge-failed': AutoMergeFailed,
-    'mr-widget-rebase': RebaseState,
-    SourceBranchRemovalStatus,
-  },
-  template: `
-    <div class="mr-state-widget prepend-top-default">
-      <mr-widget-header :mr="mr" />
-      <mr-widget-pipeline
-        v-if="shouldRenderPipelines"
-        :pipeline="mr.pipeline"
-        :ci-status="mr.ciStatus"
-        :has-ci="mr.hasCI"
-        />
-      <deployment
-        v-for="deployment in mr.deployments"
-        :key="deployment.id"
-        :deployment="deployment"
+};
+</script>
+<template>
+  <div class="mr-state-widget prepend-top-default">
+    <mr-widget-header
+      :mr="mr"
+    />
+    <mr-widget-pipeline
+      v-if="shouldRenderPipelines"
+      :pipeline="mr.pipeline"
+      :ci-status="mr.ciStatus"
+      :has-ci="mr.hasCI"
+    />
+    <deployment
+      v-for="deployment in mr.deployments"
+      :key="deployment.id"
+      :deployment="deployment"
+    />
+    <div class="mr-widget-section">
+      <component
+        :is="componentName"
+        :mr="mr"
+        :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"
+      />
+
+      <source-branch-removal-status
+        v-if="shouldRenderSourceBranchRemovalStatus"
       />
-      <div class="mr-widget-section">
-        <component
-          :is="componentName"
-          :mr="mr"
-          :service="service" />
-        <mr-widget-maintainer-edit
-          :maintainerEditAllowed="mr.maintainerEditAllowed" />
-        <mr-widget-related-links
-          v-if="shouldRenderRelatedLinks"
-          :state="mr.state"
-          :related-links="mr.relatedLinks" />
-        <source-branch-removal-status
-          v-if="shouldRenderSourceBranchRemovalStatus"
-        />
-      </div>
-      <div
-        class="mr-widget-footer"
-        v-if="shouldRenderMergeHelp">
-        <mr-widget-merge-help />
-      </div>
     </div>
-  `,
-};
+    <div
+      class="mr-widget-footer"
+      v-if="shouldRenderMergeHelp"
+    >
+      <mr-widget-merge-help />
+    </div>
+  </div>
+</template>

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