Merge request widget redesign

app/assets/javascripts/diff_notes/components/resolve_btn.js

@@ -88,6 +88,7 @@ const ResolveBtn = Vue.extend({
           CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolved_by);
           this.discussion.updateHeadline(data);
+          gl.mrWidget.checkStatus();
         } else {
           new Flash(errorFlashMsg);
         }

app/assets/javascripts/diff_notes/services/resolve.js

@@ -49,6 +49,7 @@ class ResolveServiceClass {
           discussion.resolveAllNotes(resolved_by);
         }
+        gl.mrWidget.checkStatus();
         discussion.updateHeadline(data);
       } else {
         throw new Error('An error occurred when trying to resolve discussion.');

app/assets/javascripts/dispatcher.js

@@ -10,7 +10,6 @@
 /* global IssuableForm */
 /* global LabelsSelect */
 /* global MilestoneSelect */
-/* global MergedButtons */
 /* global Commit */
 /* global NotificationsForm */
 /* global TreeView */
@@ -216,15 +215,10 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new gl.Diff();
           shortcut_handler = new ShortcutsIssuable(true);
           new ZenMode();
-          new MergedButtons();
-          break;
-        case 'projects:merge_requests:commits':
-          new MergedButtons();
           break;
         case "projects:merge_requests:diffs":
           new gl.Diff();
           new ZenMode();
-          new MergedButtons();
           break;
         case 'dashboard:activity':
           new gl.Activities();

app/assets/javascripts/lib/utils/simple_poll.js

+export default (fn, interval = 2000, timeout = 60000) => {
+  const startTime = Date.now();
+
+  return new Promise((resolve, reject) => {
+    const stop = arg => ((arg instanceof Error) ? reject(arg) : resolve(arg));
+    const next = () => {
+      if (Date.now() - startTime < timeout) {
+        setTimeout(fn.bind(null, next, stop), interval);
+      } else {
+        reject(new Error('SIMPLE_POLL_TIMEOUT'));
+      }
+    };
+    fn(next, stop);
+  });
+};

app/assets/javascripts/main.js

@@ -123,8 +123,6 @@ import './member_expiration_date';
 import './members';
 import './merge_request';
 import './merge_request_tabs';
-import './merge_request_widget';
-import './merged_buttons';
 import './milestone';
 import './milestone_select';
 import './mini_pipeline_graph_dropdown';

app/assets/javascripts/merge_request.js

@@ -106,6 +106,21 @@ require('./merge_request_tabs');
       });
     };
+    MergeRequest.prototype.updateStatusText = function(classToRemove, classToAdd, newStatusText) {
+      $('.detail-page-header .status-box')
+        .removeClass(classToRemove)
+        .addClass(classToAdd)
+        .find('span')
+        .text(newStatusText);
+    };
+
+    MergeRequest.prototype.decreaseCounter = function(by = 1) {
+      const $el = $('.nav-links .js-merge-counter');
+      const count = Math.max((parseInt($el.text().replace(/[^\d]/, ''), 10) - by), 0);
+
+      $el.text(gl.text.addDelimiter(count));
+    };
+
     return MergeRequest;
   })();
 }).call(window);

app/assets/javascripts/merge_request_widget/ci_bundle.js

-/* global merge_request_widget */
-
-(() => {
-  $(() => {
-    /* TODO: This needs a better home, or should be refactored. It was previously contained
-     * in a script tag in app/views/projects/merge_requests/widget/open/_accept.html.haml,
-     * but Vue chokes on script tags and prevents their execution. So it was moved here
-     * temporarily.
-     * */
-
-    $(document)
-    .off('ajax:send', '.accept-mr-form')
-    .on('ajax:send', '.accept-mr-form', () => {
-      $('.accept-mr-form :input').disable();
-    });
-
-    $(document)
-    .off('click', '.accept-merge-request')
-    .on('click', '.accept-merge-request', () => {
-      $('.js-merge-button, .js-merge-when-pipeline-succeeds-button').html('<i class="fa fa-spinner fa-spin"></i> Merge in progress');
-    });
-
-    $(document)
-    .off('click', '.merge-when-pipeline-succeeds')
-    .on('click', '.merge-when-pipeline-succeeds', () => {
-      $('#merge_when_pipeline_succeeds').val('1');
-    });
-
-    $(document)
-    .off('click', '.js-merge-dropdown a')
-    .on('click', '.js-merge-dropdown a', (e) => {
-      e.preventDefault();
-      $(e.target).closest('form').submit();
-    });
-    if ($('.rebase-in-progress').length) {
-      merge_request_widget.rebaseInProgress();
-    } else if ($('.rebase-mr-form').length) {
-      $(document)
-      .off('ajax:send', '.rebase-mr-form')
-      .on('ajax:send', '.rebase-mr-form', () => {
-        $('.rebase-mr-form :input').disable();
-      });
-
-      $(document)
-      .off('click', '.js-rebase-button')
-      .on('click', '.js-rebase-button', () => {
-        $('.js-rebase-button').html("<i class='fa fa-spinner fa-spin'></i> Rebase in progress");
-      });
-    } else {
-      setTimeout(() => merge_request_widget.getMergeStatus(), 200);
-    }
-  });
-})();

app/assets/javascripts/merged_buttons.js

-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, max-len */
-
-import '~/lib/utils/url_utility';
-
-(function() {
-  this.MergedButtons = (function() {
-    function MergedButtons() {
-      this.removeSourceBranch = this.removeSourceBranch.bind(this);
-      this.removeBranchSuccess = this.removeBranchSuccess.bind(this);
-      this.removeBranchError = this.removeBranchError.bind(this);
-      this.$removeBranchWidget = $('.remove_source_branch_widget');
-      this.$removeBranchProgress = $('.remove_source_branch_in_progress');
-      this.$removeBranchFailed = $('.remove_source_branch_widget.failed');
-      this.cleanEventListeners();
-      this.initEventListeners();
-    }
-
-    MergedButtons.prototype.cleanEventListeners = function() {
-      $(document).off('click', '.remove_source_branch');
-      $(document).off('ajax:success', '.remove_source_branch');
-      return $(document).off('ajax:error', '.remove_source_branch');
-    };
-
-    MergedButtons.prototype.initEventListeners = function() {
-      $(document).on('click', '.remove_source_branch', this.removeSourceBranch);
-      $(document).on('ajax:success', '.remove_source_branch', this.removeBranchSuccess);
-      $(document).on('ajax:error', '.remove_source_branch', this.removeBranchError);
-    };
-
-    MergedButtons.prototype.removeSourceBranch = function() {
-      this.$removeBranchWidget.hide();
-      return this.$removeBranchProgress.show();
-    };
-
-    MergedButtons.prototype.removeBranchSuccess = function() {
-      gl.utils.refreshCurrentPage();
-    };
-
-    MergedButtons.prototype.removeBranchError = function() {
-      this.$removeBranchWidget.hide();
-      this.$removeBranchProgress.hide();
-      return this.$removeBranchFailed.show();
-    };
-
-    return MergedButtons;
-  })();
-}).call(window);

app/assets/javascripts/notes.js

@@ -276,7 +276,7 @@ const normalizeNewlines = function(str) {
       var votesBlock;
       if (noteEntity.commands_changes) {
         if ('merge' in noteEntity.commands_changes) {
-          $.get(mrRefreshWidgetUrl);
+          Notes.checkMergeRequestStatus();
         }
         if ('emoji_award' in noteEntity.commands_changes) {
@@ -424,6 +424,7 @@ const normalizeNewlines = function(str) {
       }
       gl.utils.localTimeAgo($('.js-timeago'), false);
+      Notes.checkMergeRequestStatus();
       return this.updateNotesCount(1);
     };
@@ -769,7 +770,8 @@ const normalizeNewlines = function(str) {
           }
         };
       })(this));
-      // Decrement the "Discussions" counter only once
+
+      Notes.checkMergeRequestStatus();
       return this.updateNotesCount(-1);
     };
@@ -1115,6 +1117,12 @@ const normalizeNewlines = function(str) {
       return $form;
     };
+    Notes.checkMergeRequestStatus = function() {
+      if (gl.utils.getPagePath(1) === 'merge_requests') {
+        gl.mrWidget.checkStatus();
+      }
+    };
+
     Notes.animateAppendNote = function(noteHtml, $notesList) {
       const $note = $(noteHtml);

app/assets/javascripts/pipelines/components/stage.js

+/* global Flash */
+import { borderlessStatusIconEntityMap } from '../../vue_shared/ci_status_icons';
+
+export default {
+  data() {
+    return {
+      builds: '',
+      spinner: '<span class="fa fa-spinner fa-spin"></span>',
+    };
+  },
+
+  props: {
+    stage: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  updated() {
+    if (this.builds) {
+      this.stopDropdownClickPropagation();
+    }
+  },
+
+  methods: {
+    fetchBuilds(e) {
+      const ariaExpanded = e.currentTarget.attributes['aria-expanded'];
+
+      if (ariaExpanded && (ariaExpanded.textContent === 'true')) return null;
+
+      return this.$http.get(this.stage.dropdown_path)
+        .then((response) => {
+          this.builds = JSON.parse(response.body).html;
+        }, () => {
+          const flash = new Flash('Something went wrong on our end.');
+          return flash;
+        });
+    },
+
+    /**
+     * When the user right clicks or cmd/ctrl + click in the job name
+     * the dropdown should not be closed and the link should open in another tab,
+     * so we stop propagation of the click event inside the dropdown.
+     *
+     * Since this component is rendered multiple times per page we need to guarantee we only
+     * target the click event of this component.
+     */
+    stopDropdownClickPropagation() {
+      $(this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item')).on('click', (e) => {
+        e.stopPropagation();
+      });
+    },
+  },
+  computed: {
+    buildsOrSpinner() {
+      return this.builds ? this.builds : this.spinner;
+    },
+    dropdownClass() {
+      if (this.builds) return 'js-builds-dropdown-container';
+      return 'js-builds-dropdown-loading builds-dropdown-loading';
+    },
+    buildStatus() {
+      return `Build: ${this.stage.status.label}`;
+    },
+    tooltip() {
+      return `has-tooltip ci-status-icon ci-status-icon-${this.stage.status.group}`;
+    },
+    triggerButtonClass() {
+      return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
+    },
+    svgHTML() {
+      return borderlessStatusIconEntityMap[this.stage.status.icon];
+    },
+  },
+  watch: {
+    'stage.title': function stageTitle() {
+      $(this.$refs.button).tooltip('destroy').tooltip();
+    },
+  },
+  template: `
+    <div>
+      <button
+        @click="fetchBuilds($event)"
+        :class="triggerButtonClass"
+        :title="stage.title"
+        data-placement="top"
+        data-toggle="dropdown"
+        type="button"
+        ref="button"
+        :aria-label="stage.title">
+        <span v-html="svgHTML" aria-hidden="true"></span>
+        <i class="fa fa-caret-down" aria-hidden="true"></i>
+      </button>
+      <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
+        <div class="arrow-up" aria-hidden="true"></div>
+        <div
+          :class="dropdownClass"
+          class="js-builds-dropdown-list scrollable-menu"
+          v-html="buildsOrSpinner">
+        </div>
+      </ul>
+    </div>
+  `,
+};

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.js

+export default {
+  name: 'MRWidgetAuthor',
+  props: {
+    author: { type: Object, required: true },
+    showAuthorName: { type: Boolean, required: false, default: true },
+    showAuthorTooltip: { type: Boolean, required: false, default: false },
+  },
+  template: `
+    <a
+      :href="author.webUrl || author.web_url"
+      class="author-link"
+      :class="{ 'has-tooltip': showAuthorTooltip }"
+      :title="author.name">
+      <img
+        :src="author.avatarUrl || author.avatar_url"
+        class="avatar avatar-inline s16" />
+      <span
+        v-if="showAuthorName"
+        class="author">{{author.name}}
+      </span>
+    </a>
+  `,
+};

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.js

+import MRWidgetAuthor from './mr_widget_author';
+
+export default {
+  name: 'MRWidgetAuthorTime',
+  props: {
+    actionText: { type: String, required: true },
+    author: { type: Object, required: true },
+    dateTitle: { type: String, required: true },
+    dateReadable: { type: String, required: true },
+  },
+  components: {
+    'mr-widget-author': MRWidgetAuthor,
+  },
+  template: `
+    <h4 class="js-mr-widget-author">
+      {{actionText}}
+      <mr-widget-author :author="author" />
+      <time
+        :title="dateTitle"
+        data-toggle="tooltip"
+        data-placement="top"
+        data-container="body">
+        {{dateReadable}}
+      </time>
+    </h4>
+  `,
+};

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js

+/* global Flash */
+
+import '~/lib/utils/datetime_utility';
+import { statusClassToSvgMap } from '../../vue_shared/pipeline_svg_icons';
+import MemoryUsage from './mr_widget_memory_usage';
+import MRWidgetService from '../services/mr_widget_service';
+
+export default {
+  name: 'MRWidgetDeployment',
+  props: {
+    mr: { type: Object, required: true },
+    service: { type: Object, required: true },
+  },
+  components: {
+    'mr-widget-memory-usage': MemoryUsage,
+  },
+  computed: {
+    svg() {
+      return statusClassToSvgMap.icon_status_success;
+    },
+  },
+  methods: {
+    formatDate(date) {
+      return gl.utils.getTimeago().format(date);
+    },
+    hasExternalUrls(deployment = {}) {
+      return deployment.external_url && deployment.external_url_formatted;
+    },
+    hasDeploymentTime(deployment = {}) {
+      return deployment.deployed_at && deployment.deployed_at_formatted;
+    },
+    hasDeploymentMeta(deployment = {}) {
+      return deployment.url && deployment.name;
+    },
+    stopEnvironment(deployment) {
+      const msg = 'Are you sure you want to stop this environment?';
+      const isConfirmed = confirm(msg); // eslint-disable-line
+
+      if (isConfirmed) {
+        MRWidgetService.stopEnvironment(deployment.stop_url)
+          .then(res => res.json())
+          .then((res) => {
+            if (res.redirect_url) {
+              gl.utils.visitUrl(res.redirect_url);
+            }
+          })
+          .catch(() => {
+            new Flash('Something went wrong while stopping this environment. Please try again.'); // eslint-disable-line
+          });
+      }
+    },
+  },
+  template: `
+    <div class="mr-widget-heading">
+      <div v-for="deployment in mr.deployments">
+        <div class="ci-widget">
+          <div class="ci-status-icon ci-status-icon-success">
+            <span class="js-icon-link icon-link">
+              <span
+                v-html="svg"
+                aria-hidden="true"></span>
+            </span>
+          </div>
+          <span>
+            <span
+              v-if="hasDeploymentMeta(deployment)">
+              Deployed to
+            </span>
+            <a
+              v-if="hasDeploymentMeta(deployment)"
+              :href="deployment.url"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              class="js-deploy-meta">
+              {{deployment.name}}
+            </a>
+            <span
+              v-if="hasExternalUrls(deployment)">
+              on
+            </span>
+            <a
+              v-if="hasExternalUrls(deployment)"
+              :href="deployment.external_url"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              class="js-deploy-url">
+              <i
+                class="fa fa-external-link"
+                aria-hidden="true" />
+              {{deployment.external_url_formatted}}
+            </a>
+            <span
+              v-if="hasDeploymentTime(deployment)"
+              :data-title="deployment.deployed_at_formatted"
+              class="js-deploy-time"
+              data-toggle="tooltip"
+              data-placement="top">
+              {{formatDate(deployment.deployed_at)}}
+            </span>
+            <button
+              type="button"
+              v-if="deployment.stop_url"
+              @click="stopEnvironment(deployment)"
+              class="btn btn-default btn-xs">
+              Stop environment
+            </button>
+          </span>
+        </div>
+        <mr-widget-memory-usage
+          v-if="deployment.metrics_url"
+          :mr="mr"
+          :service="service"
+          :metricsUrl="deployment.metrics_url"
+        />
+      </div>
+    </div>
+  `,
+};

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js

+require('../../lib/utils/text_utility');
+
+export default {
+  name: 'MRWidgetHeader',
+  props: {
+    mr: { type: Object, required: true },
+  },
+  computed: {
+    shouldShowCommitsBehindText() {
+      return this.mr.divergedCommitsCount > 0;
+    },
+    commitsText() {
+      return gl.text.pluralize('commit', this.mr.divergedCommitsCount);
+    },
+  },
+  methods: {
+    isBranchTitleLong(branchTitle) {
+      return branchTitle.length > 32;
+    },
+  },
+  template: `
+    <div class="mr-source-target">
+      <div
+        v-if="mr.isOpen"
+        class="pull-right">
+        <a
+          href="#modal_merge_info"
+          data-toggle="modal"
+          class="btn inline btn-grouped btn-sm">
+          Check out branch
+        </a>
+        <span class="dropdown inline prepend-left-5">
+          <a
+            class="btn btn-sm dropdown-toggle"
+            data-toggle="dropdown"
+            aria-label="Download as"
+            role="button">
+            <i
+              class="fa fa-download"
+              aria-hidden="true" />
+            <i
+              class="fa fa-caret-down"
+              aria-hidden="true" />
+          </a>
+          <ul class="dropdown-menu dropdown-menu-align-right">
+            <li>
+              <a
+                :href="mr.emailPatchesPath"
+                download>
+                Email patches
+              </a>
+            </li>
+            <li>
+              <a
+                :href="mr.plainDiffPath"
+                download>
+                Plain diff
+              </a>
+            </li>
+          </ul>
+        </span>
+      </div>
+      <div class="normal">
+        <b>Request to merge</b>
+        <span
+          class="label-branch"
+          :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.sourceBranch)}"
+          :title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
+          data-placement="bottom"
+          v-html="mr.sourceBranchLink"></span>
+        <button
+          class="btn btn-transparent btn-clipboard has-tooltip"
+          data-title="Copy branch name to clipboard"
+          :data-clipboard-text="mr.sourceBranch">
+          <i
+            aria-hidden="true"
+            class="fa fa-clipboard"></i>
+        </button>
+        <b>into</b>
+        <span
+          class="label-branch"
+          :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.targetBranch)}"
+          :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
+          data-placement="bottom">
+          <a
+            :href="mr.targetBranchCommitsPath">
+            {{mr.targetBranch}}
+          </a>
+        </span>
+        <span
+          v-if="shouldShowCommitsBehindText"
+          class="diverged-commits-count">
+          ({{mr.divergedCommitsCount}} {{commitsText}} behind)
+        </span>
+      </div>
+    </div>
+  `,
+};

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js

+import statusCodes from '~/lib/utils/http_status';
+import MemoryGraph from '../../vue_shared/components/memory_graph';
+import MRWidgetService from '../services/mr_widget_service';
+
+export default {
+  name: 'MemoryUsage',
+  props: {
+    mr: { type: Object, required: true },
+    service: { type: Object, required: true },
+    metricsUrl: { type: String, required: true },
+  },
+  data() {
+    return {
+      // memoryFrom: 0,
+      // memoryTo: 0,
+      memoryMetrics: [],
+      hasMetrics: false,
+      loadFailed: false,
+      loadingMetrics: true,
+      backOffRequestCounter: 0,
+    };
+  },
+  components: {
+    'mr-memory-graph': MemoryGraph,
+  },
+  methods: {
+    computeGraphData(metrics) {
+      this.loadingMetrics = false;
+      const { memory_values } = metrics;
+      // if (memory_previous.length > 0) {
+      //   this.memoryFrom = Number(memory_previous[0].value[1]).toFixed(2);
+      // }
+      //
+      // if (memory_current.length > 0) {
+      //   this.memoryTo = Number(memory_current[0].value[1]).toFixed(2);
+      // }
+
+      if (memory_values.length > 0) {
+        this.hasMetrics = true;
+        this.memoryMetrics = memory_values[0].values;
+      }
+    },
+  },
+  mounted() {
+    this.$props.loadingMetrics = true;
+    gl.utils.backOff((next, stop) => {
+      MRWidgetService.fetchMetrics(this.$props.metricsUrl)
+        .then((res) => {
+          if (res.status === statusCodes.NO_CONTENT) {
+            this.backOffRequestCounter = this.backOffRequestCounter += 1;
+            if (this.backOffRequestCounter < 3) {
+              next();
+            } else {
+              stop(res);
+            }
+          } else {
+            stop(res);
+          }
+        })
+        .catch(stop);
+    })
+    .then((res) => {
+      if (res.status === statusCodes.NO_CONTENT) {
+        return res;
+      }
+
+      return res.json();
+    })
+    .then((res) => {
+      this.computeGraphData(res.metrics);
+      return res;
+    })
+    .catch(() => {
+      this.$props.loadFailed = true;
+    });
+  },
+  template: `
+    <div class="mr-info-list mr-memory-usage">
+      <div class="legend"></div>
+      <p
+        v-if="loadingMetrics"
+        class="usage-info usage-info-loading">
+        <i
+          class="fa fa-spinner fa-spin usage-info-load-spinner"
+          aria-hidden="true" />Loading deployment statistics.
+      </p>
+      <p
+        v-if="!hasMetrics && !loadingMetrics"
+        class="usage-info usage-info-loading">
+        Deployment statistics are not available currently.
+      </p>
+      <p
+        v-if="hasMetrics"
+        class="usage-info">
+        Deployment memory usage:
+      </p>
+      <p
+        v-if="loadFailed"
+        class="usage-info">
+        Failed to load deployment statistics.
+      </p>
+      <mr-memory-graph
+        v-if="hasMetrics"
+        :metrics="memoryMetrics"
+        height="25"
+        width="100" />
+    </div>
+  `,
+};

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js

+export default {
+  name: 'MRWidgetMergeHelp',
+  props: {
+    missingBranch: { type: String, required: false, default: '' },
+  },
+  template: `
+    <section class="mr-widget-help">
+      <template
+        v-if="missingBranch">
+        If the {{missingBranch}} branch exists in your local repository, you
+      </template>
+      <template v-else>
+        You
+      </template>
+      can merge this merge request manually using the
+      <a
+        data-toggle="modal"
+        href="#modal_merge_info">
+        command line.
+      </a>
+    </section>
+  `,
+};

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js

+import PipelineStage from '../../pipelines/components/stage';
+import pipelineStatusIcon from '../../vue_shared/components/pipeline_status_icon';
+import { statusClassToSvgMap } from '../../vue_shared/pipeline_svg_icons';
+
+export default {
+  name: 'MRWidgetPipeline',
+  props: {
+    mr: { type: Object, required: true },
+  },
+  components: {
+    'pipeline-stage': PipelineStage,
+    'pipeline-status-icon': pipelineStatusIcon,
+  },
+  computed: {
+    hasCIError() {
+      const { hasCI, ciStatus } = this.mr;
+
+      return hasCI && !ciStatus;
+    },
+    svg() {
+      return statusClassToSvgMap.icon_status_failed;
+    },
+    stageText() {
+      return this.mr.pipeline.details.stages.length > 1 ? 'stages' : 'stage';
+    },
+  },
+  template: `
+    <div class="mr-widget-heading">
+      <div class="ci-widget">
+        <template v-if="hasCIError">
+          <div class="ci-status-icon ci-status-icon-failed js-ci-error">
+            <span class="js-icon-link icon-link">
+              <span
+                v-html="svg"
+                aria-hidden="true"></span>
+            </span>
+          </div>
+          <span>Could not connect to the CI server. Please check your settings and try again.</span>
+        </template>
+        <template v-else>
+          <pipeline-status-icon :pipelineStatus="mr.pipelineDetailedStatus" />
+          <span>
+            Pipeline
+            <a
+              :href="mr.pipeline.path"
+              class="pipeline-id">#{{mr.pipeline.id}}</a>
+            {{mr.pipeline.details.status.label}}
+            with {{stageText}}
+          </span>
+          <div class="mr-widget-pipeline-graph">
+            <div class="stage-cell">
+              <div
+                v-if="mr.pipeline.details.stages.length > 0"
+                v-for="stage in mr.pipeline.details.stages"
+                class="stage-container dropdown js-mini-pipeline-graph">
+                <pipeline-stage :stage="stage" />
+              </div>
+            </div>
+          </div>
+          <span>
+            for
+            <a
+              :href="mr.pipeline.commit.commit_path"
+              class="monospace js-commit-link">
+              {{mr.pipeline.commit.short_id}}</a>.
+          </span>
+          <span
+            v-if="mr.pipeline.coverage"
+            class="js-mr-coverage">
+            Coverage {{mr.pipeline.coverage}}%.
+          </span>
+        </template>
+      </div>
+    </div>
+  `,
+};

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js

+export default {
+  name: 'MRWidgetRelatedLinks',
+  props: {
+    relatedLinks: { type: Object, required: true },
+  },
+  computed: {
+    hasLinks() {
+      const { closing, mentioned, assignToMe } = this.relatedLinks;
+      return closing || mentioned || assignToMe;
+    },
+  },
+  methods: {
+    hasMultipleIssues(text) {
+      return !text ? false : text.match(/<\/a> and <a/);
+    },
+    issueLabel(field) {
+      return this.hasMultipleIssues(this.relatedLinks[field]) ? 'issues' : 'issue';
+    },
+    verbLabel(field) {
+      return this.hasMultipleIssues(this.relatedLinks[field]) ? 'are' : 'is';
+    },
+  },
+  template: `
+    <section
+      v-if="hasLinks"
+      class="mr-info-list mr-links">
+      <div class="legend"></div>
+      <p v-if="relatedLinks.closing">
+        Closes {{issueLabel('closing')}}
+        <span v-html="relatedLinks.closing"></span>.
+      </p>
+      <p v-if="relatedLinks.mentioned">
+        <span class="capitalize">{{issueLabel('mentioned')}}</span>
+        <span v-html="relatedLinks.mentioned"></span>
+        {{verbLabel('mentioned')}} mentioned but will not be closed.
+      </p>
+      <p v-if="relatedLinks.assignToMe">
+        <span v-html="relatedLinks.assignToMe"></span>
+      </p>
+    </section>
+  `,
+};

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

+export default {
+  name: 'MRWidgetArchived',
+  template: `
+    <div class="mr-widget-body">
+      <button
+        type="button"
+        class="btn btn-success btn-small"
+        disabled="true">
+        Merge
+      </button>
+      <span class="bold">
+        This project is archived, write access has been disabled.
+      </span>
+    </div>
+  `,
+};

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

+export default {
+  name: 'MRWidgetAutoMergeFailed',
+  props: {
+    mr: { type: Object, required: true },
+  },
+  template: `
+    <div class="mr-widget-body">
+      <button
+        class="btn btn-success btn-small"
+        disabled="true"
+        type="button">
+        Merge
+      </button>
+      <span class="bold danger">
+        This merge request failed to be merged automatically.
+      </span>
+      <div class="merge-error-text">
+        {{mr.mergeError}}
+      </div>
+    </div>
+  `,
+};