Merge branch 'master' into bootstrap4

16 files changed, 311 insertions, 306 deletions

diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index c2a35341eb2..fae580c091b 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -179,7 +179,7 @@
       role="row"
     >
       <div
-        class="alert alert-danger alert-block append-bottom-0 table-section section-100"
+        class="alert alert-danger alert-block append-bottom-0"
         role="gridcell"
       >
         <div>
diff --git a/app/assets/javascripts/notes/components/note_edited_text.vue b/app/assets/javascripts/notes/components/note_edited_text.vue
index 4ddca918495..2dc39d1a186 100644
--- a/app/assets/javascripts/notes/components/note_edited_text.vue
+++ b/app/assets/javascripts/notes/components/note_edited_text.vue
@@ -32,17 +32,17 @@ export default {
 <template>
   <div :class="className">
     {{ actionText }}
-    <time-ago-tooltip
-      :time="editedAt"
-      tooltip-placement="bottom"
-    />
     <template v-if="editedBy">
-      by
+      {{ s__('ByAuthor|by') }}
       <a
         :href="editedBy.path"
         class="js-vue-author author_link">
         {{ editedBy.name }}
       </a>
     </template>
+    <time-ago-tooltip
+      :time="editedAt"
+      tooltip-placement="bottom"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index c3d1ef1fcc6..7183d0b50b2 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -62,6 +62,21 @@ export default {
 
 <template>
   <div class="note-header-info">
+    <div
+      v-if="includeToggle"
+      class="discussion-actions">
+      <button
+        @click="handleToggle"
+        class="note-action-button discussion-toggle-button js-vue-toggle-button"
+        type="button">
+        <i
+          :class="toggleChevronClass"
+          class="fa"
+          aria-hidden="true">
+        </i>
+        {{ __('Toggle discussion') }}
+      </button>
+    </div>
     <a :href="author.path">
       <span class="note-header-author-name">{{ author.name }}</span>
       <span class="note-headline-light">
@@ -95,20 +110,5 @@ export default {
         </i>
       </span>
     </span>
-    <div
-      v-if="includeToggle"
-      class="discussion-actions">
-      <button
-        @click="handleToggle"
-        class="note-action-button discussion-toggle-button js-vue-toggle-button"
-        type="button">
-        <i
-          :class="toggleChevronClass"
-          class="fa"
-          aria-hidden="true">
-        </i>
-        Toggle discussion
-      </button>
-    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
new file mode 100644
index 00000000000..df21e2f8771
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
@@ -0,0 +1,77 @@
+<script>
+import _ from 'underscore';
+import GlModal from '~/vue_shared/components/gl_modal.vue';
+import { s__, sprintf } from '~/locale';
+
+export default {
+  components: {
+    GlModal,
+  },
+  props: {
+    deleteWikiUrl: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    pageTitle: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    csrfToken: {
+      type: String,
+      required: true,
+      default: '',
+    },
+  },
+  computed: {
+    message() {
+      return s__('WikiPageConfirmDelete|Are you sure you want to delete this page?');
+    },
+    title() {
+      return sprintf(
+        s__('WikiPageConfirmDelete|Delete page %{pageTitle}?'),
+        {
+          pageTitle: _.escape(this.pageTitle),
+        },
+        false,
+      );
+    },
+  },
+  methods: {
+    onSubmit() {
+      this.$refs.form.submit();
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    id="delete-wiki-modal"
+    :header-title-text="title"
+    footer-primary-button-variant="danger"
+    :footer-primary-button-text="s__('WikiPageConfirmDelete|Delete page')"
+    @submit="onSubmit"
+  >
+    {{ message }}
+    <form
+      ref="form"
+      :action="deleteWikiUrl"
+      method="post"
+      class="form-horizontal js-requires-input"
+    >
+      <input
+        ref="method"
+        type="hidden"
+        name="_method"
+        value="delete"
+      />
+      <input
+        type="hidden"
+        name="authenticity_token"
+        :value="csrfToken"
+      />
+    </form>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/pages/projects/wikis/index.js b/app/assets/javascripts/pages/projects/wikis/index.js
index ec01c66ffda..0295653cb29 100644
--- a/app/assets/javascripts/pages/projects/wikis/index.js
+++ b/app/assets/javascripts/pages/projects/wikis/index.js
@@ -1,12 +1,40 @@
 import $ from 'jquery';
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import csrf from '~/lib/utils/csrf';
 import Wikis from './wikis';
 import ShortcutsWiki from '../../../shortcuts_wiki';
 import ZenMode from '../../../zen_mode';
 import GLForm from '../../../gl_form';
+import deleteWikiModal from './components/delete_wiki_modal.vue';
 
 document.addEventListener('DOMContentLoaded', () => {
   new Wikis(); // eslint-disable-line no-new
   new ShortcutsWiki(); // eslint-disable-line no-new
   new ZenMode(); // eslint-disable-line no-new
   new GLForm($('.wiki-form'), true); // eslint-disable-line no-new
+
+  const deleteWikiButton = document.getElementById('delete-wiki-button');
+
+  if (deleteWikiButton) {
+    Vue.use(Translate);
+
+    const { deleteWikiUrl, pageTitle } = deleteWikiButton.dataset;
+    const deleteWikiModalEl = document.getElementById('delete-wiki-modal');
+    const deleteModal = new Vue({ // eslint-disable-line
+      el: deleteWikiModalEl,
+      data: {
+        deleteWikiUrl: '',
+      },
+      render(createElement) {
+        return createElement(deleteWikiModal, {
+          props: {
+            pageTitle,
+            deleteWikiUrl,
+            csrfToken: csrf.token,
+          },
+        });
+      },
+    });
+  }
 });
diff --git a/app/assets/javascripts/pipelines/components/async_button.vue b/app/assets/javascripts/pipelines/components/async_button.vue
deleted file mode 100644
index 0cdffbde05b..00000000000
--- a/app/assets/javascripts/pipelines/components/async_button.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<script>
-  /* eslint-disable no-alert */
-
-  import eventHub from '../event_hub';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import icon from '../../vue_shared/components/icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
-
-  export default {
-    directives: {
-      tooltip,
-    },
-    components: {
-      loadingIcon,
-      icon,
-    },
-    props: {
-      endpoint: {
-        type: String,
-        required: true,
-      },
-      title: {
-        type: String,
-        required: true,
-      },
-      icon: {
-        type: String,
-        required: true,
-      },
-      cssClass: {
-        type: String,
-        required: true,
-      },
-      pipelineId: {
-        type: Number,
-        required: true,
-      },
-      type: {
-        type: String,
-        required: true,
-      },
-    },
-    data() {
-      return {
-        isLoading: false,
-      };
-    },
-    computed: {
-      buttonClass() {
-        return `btn ${this.cssClass}`;
-      },
-    },
-    created() {
-      // We're using eventHub to listen to the modal here instead of
-      // using props because it would would make the parent components
-      // much more complex to keep track of the loading state of each button
-      eventHub.$on('postAction', this.setLoading);
-    },
-    beforeDestroy() {
-      eventHub.$off('postAction', this.setLoading);
-    },
-    methods: {
-      onClick() {
-        eventHub.$emit('openConfirmationModal', {
-          pipelineId: this.pipelineId,
-          endpoint: this.endpoint,
-          type: this.type,
-        });
-      },
-      setLoading(endpoint) {
-        if (endpoint === this.endpoint) {
-          this.isLoading = true;
-        }
-      },
-    },
-  };
-</script>
-
-<template>
-  <button
-    v-tooltip
-    type="button"
-    @click="onClick"
-    :class="buttonClass"
-    :title="title"
-    :aria-label="title"
-    data-container="body"
-    data-placement="top"
-    :disabled="isLoading">
-    <icon
-      :name="icon"
-    />
-    <loading-icon v-if="isLoading" />
-  </button>
-</template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index 714aed1333e..41986b827cd 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -1,7 +1,7 @@
 <script>
-  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
+  import Modal from '~/vue_shared/components/gl_modal.vue';
   import { s__, sprintf } from '~/locale';
-  import pipelinesTableRowComponent from './pipelines_table_row.vue';
+  import PipelinesTableRowComponent from './pipelines_table_row.vue';
   import eventHub from '../event_hub';
 
   /**
@@ -11,8 +11,8 @@
    */
   export default {
     components: {
-      pipelinesTableRowComponent,
-      DeprecatedModal,
+      PipelinesTableRowComponent,
+      Modal,
     },
     props: {
       pipelines: {
@@ -37,30 +37,18 @@
       return {
         pipelineId: '',
         endpoint: '',
-        type: '',
       };
     },
     computed: {
       modalTitle() {
-        return this.type === 'stop' ?
-          sprintf(s__('Pipeline|Stop pipeline #%{pipelineId}?'), {
-            pipelineId: `'${this.pipelineId}'`,
-          }, false) :
-          sprintf(s__('Pipeline|Retry pipeline #%{pipelineId}?'), {
-            pipelineId: `'${this.pipelineId}'`,
-          }, false);
+        return sprintf(s__('Pipeline|Stop pipeline #%{pipelineId}?'), {
+          pipelineId: `${this.pipelineId}`,
+        }, false);
       },
       modalText() {
-        return this.type === 'stop' ?
-          sprintf(s__('Pipeline|You’re about to stop pipeline %{pipelineId}.'), {
-            pipelineId: `<strong>#${this.pipelineId}</strong>`,
-          }, false) :
-          sprintf(s__('Pipeline|You’re about to retry pipeline %{pipelineId}.'), {
-            pipelineId: `<strong>#${this.pipelineId}</strong>`,
-          }, false);
-      },
-      primaryButtonLabel() {
-        return this.type === 'stop' ? s__('Pipeline|Stop pipeline') : s__('Pipeline|Retry pipeline');
+        return sprintf(s__('Pipeline|You’re about to stop pipeline %{pipelineId}.'), {
+          pipelineId: `<strong>#${this.pipelineId}</strong>`,
+        }, false);
       },
     },
     created() {
@@ -73,7 +61,6 @@
       setModalData(data) {
         this.pipelineId = data.pipelineId;
         this.endpoint = data.endpoint;
-        this.type = data.type;
       },
       onSubmit() {
         eventHub.$emit('postAction', this.endpoint);
@@ -120,20 +107,16 @@
       :auto-devops-help-path="autoDevopsHelpPath"
       :view-type="viewType"
     />
-    <deprecated-modal
+
+    <modal
       id="confirmation-modal"
-      :title="modalTitle"
-      :text="modalText"
-      kind="danger"
-      :primary-button-label="primaryButtonLabel"
+      :header-title-text="modalTitle"
+      footer-primary-button-variant="danger"
+      :footer-primary-button-text="s__('Pipeline|Stop pipeline')"
       @submit="onSubmit"
     >
-      <template
-        slot="body"
-        slot-scope="props"
-      >
-        <p v-html="props.text"></p>
-      </template>
-    </deprecated-modal>
+      <span v-html="modalText"></span>
+    </modal>
+
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index 0dcda8a2234..eaff0b25354 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -1,13 +1,14 @@
 <script>
-  /* eslint-disable no-param-reassign */
-  import asyncButtonComponent from './async_button.vue';
-  import pipelinesActionsComponent from './pipelines_actions.vue';
-  import pipelinesArtifactsComponent from './pipelines_artifacts.vue';
-  import ciBadge from '../../vue_shared/components/ci_badge_link.vue';
-  import pipelineStage from './stage.vue';
-  import pipelineUrl from './pipeline_url.vue';
-  import pipelinesTimeago from './time_ago.vue';
-  import commitComponent from '../../vue_shared/components/commit.vue';
+  import eventHub from '../event_hub';
+  import PipelinesActionsComponent from './pipelines_actions.vue';
+  import PipelinesArtifactsComponent from './pipelines_artifacts.vue';
+  import CiBadge from '../../vue_shared/components/ci_badge_link.vue';
+  import PipelineStage from './stage.vue';
+  import PipelineUrl from './pipeline_url.vue';
+  import PipelinesTimeago from './time_ago.vue';
+  import CommitComponent from '../../vue_shared/components/commit.vue';
+  import LoadingButton from '../../vue_shared/components/loading_button.vue';
+  import Icon from '../../vue_shared/components/icon.vue';
 
   /**
    * Pipeline table row.
@@ -16,14 +17,15 @@
    */
   export default {
     components: {
-      asyncButtonComponent,
-      pipelinesActionsComponent,
-      pipelinesArtifactsComponent,
-      commitComponent,
-      pipelineStage,
-      pipelineUrl,
-      ciBadge,
-      pipelinesTimeago,
+      PipelinesActionsComponent,
+      PipelinesArtifactsComponent,
+      CommitComponent,
+      PipelineStage,
+      PipelineUrl,
+      CiBadge,
+      PipelinesTimeago,
+      LoadingButton,
+      Icon,
     },
     props: {
       pipeline: {
@@ -44,6 +46,12 @@
         required: true,
       },
     },
+    data() {
+      return {
+        isRetrying: false,
+        isCancelling: false,
+      };
+    },
     computed: {
       /**
        * If provided, returns the commit tag.
@@ -119,8 +127,10 @@
         if (this.pipeline.ref) {
           return Object.keys(this.pipeline.ref).reduce((accumulator, prop) => {
             if (prop === 'path') {
+              // eslint-disable-next-line no-param-reassign
               accumulator.ref_url = this.pipeline.ref[prop];
             } else {
+              // eslint-disable-next-line no-param-reassign
               accumulator[prop] = this.pipeline.ref[prop];
             }
             return accumulator;
@@ -216,6 +226,21 @@
         return this.viewType === 'child';
       },
     },
+
+    methods: {
+      handleCancelClick() {
+        this.isCancelling = true;
+
+        eventHub.$emit('openConfirmationModal', {
+          pipelineId: this.pipeline.id,
+          endpoint: this.pipeline.cancel_path,
+        });
+      },
+      handleRetryClick() {
+        this.isRetrying = true;
+        eventHub.$emit('retryPipeline', this.pipeline.retry_path);
+      },
+    },
   };
 </script>
 <template>
@@ -287,7 +312,8 @@
 
     <div
       v-if="displayPipelineActions"
-      class="table-section section-20 table-button-footer pipeline-actions">
+      class="table-section section-20 table-button-footer pipeline-actions"
+    >
       <div class="btn-group table-action-buttons">
         <pipelines-actions-component
           v-if="pipeline.details.manual_actions.length"
@@ -300,29 +326,27 @@
           :artifacts="pipeline.details.artifacts"
         />
 
-        <async-button-component
+        <loading-button
           v-if="pipeline.flags.retryable"
-          :endpoint="pipeline.retry_path"
-          css-class="js-pipelines-retry-button btn-default btn-retry"
-          title="Retry"
-          icon="repeat"
-          :pipeline-id="pipeline.id"
-          data-toggle="modal"
-          data-target="#confirmation-modal"
-          type="retry"
-        />
+          @click="handleRetryClick"
+          container-class="js-pipelines-retry-button btn btn-default btn-retry"
+          :loading="isRetrying"
+          :disabled="isRetrying"
+        >
+          <icon name="repeat" />
+        </loading-button>
 
-        <async-button-component
+        <loading-button
           v-if="pipeline.flags.cancelable"
-          :endpoint="pipeline.cancel_path"
-          css-class="js-pipelines-cancel-button btn-remove"
-          title="Stop"
-          icon="close"
-          :pipeline-id="pipeline.id"
+          @click="handleCancelClick"
           data-toggle="modal"
           data-target="#confirmation-modal"
-          type="stop"
-        />
+          container-class="js-pipelines-cancel-button btn btn-remove"
+          :loading="isCancelling"
+          :disabled="isCancelling"
+        >
+          <icon name="close" />
+        </loading-button>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index 6d87f75ae8e..de0faf181e5 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines.js
@@ -53,10 +53,12 @@ export default {
     });
 
     eventHub.$on('postAction', this.postAction);
+    eventHub.$on('retryPipeline', this.postAction);
     eventHub.$on('clickedDropdown', this.updateTable);
   },
   beforeDestroy() {
     eventHub.$off('postAction', this.postAction);
+    eventHub.$off('retryPipeline', this.postAction);
     eventHub.$off('clickedDropdown', this.updateTable);
   },
   destroyed() {
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue
index fc65f1a714e..2fc3778820b 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/app/assets/javascripts/registry/components/collapsible_container.vue
@@ -28,11 +28,6 @@
         isOpen: false,
       };
     },
-    computed: {
-      clipboardText() {
-        return `docker pull ${this.repo.location}`;
-      },
-    },
     methods: {
       ...mapActions([
         'fetchRepos',
@@ -84,7 +79,7 @@
 
       <clipboard-button
         v-if="repo.location"
-        :text="clipboardText"
+        :text="repo.location"
         :title="repo.location"
         css-class="btn-default btn-transparent btn-clipboard"
       />
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
index 36215a6f845..e4a4b3bb129 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/app/assets/javascripts/registry/components/table_registry.vue
@@ -56,10 +56,6 @@
           .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY));
       },
 
-      clipboardText(text) {
-        return `docker pull ${text}`;
-      },
-
       showError(message) {
         Flash(errorMessages[message]);
       },
@@ -89,7 +85,7 @@
             <clipboard-button
               v-if="item.location"
               :title="item.location"
-              :text="clipboardText(item.location)"
+              :text="item.location"
               css-class="btn-default btn-transparent btn-clipboard"
             />
           </td>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_maintainer_edit.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_maintainer_edit.vue
deleted file mode 100644
index f0298f732ea..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_maintainer_edit.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<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>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
index bf8628d18a6..926a3172412 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
@@ -10,6 +10,6 @@ In EE, the configuration extends this object to add a functioning squash-before-
 button.
 */
 
-export default {
-  template: '',
-};
+<script>
+  export default {};
+</script>
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index 7f5f28091da..15097fa2a3f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/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';
@@ -41,8 +40,8 @@ export { default as MRWidgetService } from './services/mr_widget_service';
 export { default as eventHub } from './event_hub';
 export { default as getStateKey } from './stores/get_state_key';
 export { default as stateMaps } from './stores/state_maps';
-export { default as SquashBeforeMerge } from './components/states/mr_widget_squash_before_merge';
+export { default as SquashBeforeMerge } from './components/states/mr_widget_squash_before_merge.vue';
 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';
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 345f9ac1b4b..f69fe03fcb3 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -1,12 +1,13 @@
+<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>
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index e832d94d32f..88c13a1f340 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_button.vue
@@ -70,12 +70,14 @@
       />
     </transition>
     <transition name="fade">
-      <span
-        v-if="label"
-        class="js-loading-button-label"
-      >
-        {{ label }}
-      </span>
+      <slot>
+        <span
+          v-if="label"
+          class="js-loading-button-label"
+        >
+          {{ label }}
+        </span>
+      </slot>
     </transition>
   </button>
 </template>