Merge branch '33095-mr-widget-ui-ee' into 'master'

33095 mr widget ui ee

See merge request !2389

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

@@ -8,8 +8,8 @@ export default {
   template: `
     <a
       :href="author.webUrl || author.web_url"
-      class="author-link"
-      :class="{ 'has-tooltip': showAuthorTooltip }"
+      class="author-link inline"
+      :v-tooltip="showAuthorTooltip"
       :title="author.name">
       <img
         :src="author.avatarUrl || author.avatar_url"

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

 /* global Flash */
 
 import '~/lib/utils/datetime_utility';
-import { statusIconEntityMap } from '../../vue_shared/ci_status_icons';
 import MemoryUsage from './mr_widget_memory_usage';
+import StatusIcon from './mr_widget_status_icon';
 import MRWidgetService from '../services/mr_widget_service';
 
 export default {
@@ -13,11 +13,7 @@ export default {
   },
   components: {
     'mr-widget-memory-usage': MemoryUsage,
-  },
-  computed: {
-    svg() {
-      return statusIconEntityMap.icon_status_success;
-    },
+    'status-icon': StatusIcon,
   },
   methods: {
     formatDate(date) {
@@ -51,51 +47,51 @@ export default {
     },
   },
   template: `
-    <div class="mr-widget-heading">
+    <div class="mr-widget-heading deploy-heading">
       <div v-for="deployment in mr.deployments">
-        <div class="ci-widget">
+        <div class="ci-widget media">
           <div class="ci-status-icon ci-status-icon-success">
             <span class="js-icon-link icon-link">
-              <span class="ci-status-icon"
-                v-html="svg"
-                aria-hidden="true"></span>
+              <status-icon status="success" />
             </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)}}
+          <div class="media-body space-children">
+            <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 inline">
+                {{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 inline">
+                <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>
             </span>
             <button
               type="button"
@@ -104,13 +100,13 @@ export default {
               class="btn btn-default btn-xs">
               Stop environment
             </button>
-          </span>
+            <mr-widget-memory-usage
+              v-if="deployment.metrics_url"
+              :metrics-url="deployment.metrics_url"
+              :metrics-monitoring-url="deployment.metrics_monitoring_url"
+            />
+          </div>
         </div>
-        <mr-widget-memory-usage
-          v-if="deployment.metrics_url"
-          :metrics-url="deployment.metrics_url"
-          :metrics-monitoring-url="deployment.metrics_monitoring_url"
-        />
       </div>
     </div>
   `,

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

@@ -35,12 +35,12 @@ export default {
         <a
           href="#modal_merge_info"
           data-toggle="modal"
-          class="btn inline btn-grouped btn-sm">
+          class="btn inline btn-grouped">
           Check out branch
         </a>
-        <span class="dropdown inline prepend-left-5">
+        <span class="dropdown inline prepend-left-10">
           <a
-            class="btn btn-sm dropdown-toggle"
+            class="btn dropdown-toggle"
             data-toggle="dropdown"
             aria-label="Download as"
             role="button">

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

@@ -120,13 +120,12 @@ export default {
   },
   template: `
     <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage">
-      <div class="legend"></div>
       <p
         v-if="shouldShowLoading"
         class="usage-info js-usage-info usage-info-loading">
         <i
           class="fa fa-spinner fa-spin usage-info-load-spinner"
-          aria-hidden="true" />Loading deployment statistics.
+          aria-hidden="true" />Loading deployment statistics
       </p>
       <p
         v-if="shouldShowMemoryGraph"
@@ -136,12 +135,12 @@ export default {
       <p
         v-if="shouldShowLoadFailure"
         class="usage-info js-usage-info usage-info-failed">
-        Failed to load deployment statistics.
+        Failed to load deployment statistics
       </p>
       <p
         v-if="shouldShowMetricsUnavailable"
         class="usage-info js-usage-info usage-info-unavailable">
-        Deployment statistics are not available currently.
+        Deployment statistics are not available currently
       </p>
       <mr-memory-graph
         v-if="shouldShowMemoryGraph"

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

@@ -16,7 +16,7 @@ export default {
       <a
         data-toggle="modal"
         href="#modal_merge_info">
-        command line.
+        command line
       </a>
     </section>
   `,

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

@@ -44,71 +44,68 @@ export default {
   },
   template: `
     <div class="mr-widget-heading">
-      <div class="ci-widget">
+      <div class="ci-widget media">
         <template v-if="hasCIError">
-          <div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error">
-            <span class="js-icon-link icon-link">
-              <span
-                v-html="svg"
-                aria-hidden="true"></span>
-            </span>
+          <div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-10">
+            <span
+              v-html="svg"
+              aria-hidden="true"></span>
+          </div>
+          <div class="media-body">
+            Could not connect to the CI server. Please check your settings and try again
           </div>
-          <span>Could not connect to the CI server. Please check your settings and try again.</span>
         </template>
         <template v-else>
-          <div>
+          <div class="ci-status-icon append-right-10">
             <a
               class="icon-link"
               :href="this.status.details_path">
               <ci-icon :status="status" />
             </a>
           </div>
-          <span>
-            Pipeline
-            <a
-              :href="mr.pipeline.path"
-              class="pipeline-id">#{{mr.pipeline.id}}</a>
-            {{mr.pipeline.details.status.label}}
-          </span>
-          <span
-            v-if="mr.pipeline.details.stages.length > 0">
-            with {{stageText}}
-          </span>
-          <div class="mr-widget-pipeline-graph">
-            <div class="stage-cell">
-              <linked-pipelines-mini-list
-                v-if="triggeredBy.length"
-                :triggered-by="triggeredBy"
-                />
+          <div class="media-body">
+            <span>
+              Pipeline
+              <a
+                :href="mr.pipeline.path"
+                class="pipeline-id">#{{mr.pipeline.id}}</a>
+            </span>
+            <span class="mr-widget-pipeline-graph">
+              <span class="stage-cell">
+                <linked-pipelines-mini-list
+                  v-if="triggeredBy.length"
+                  :triggered-by="triggeredBy"
+                  />
 
-              <div
-                v-if="mr.pipeline.details.stages.length > 0"
-                v-for="(stage, index) in mr.pipeline.details.stages"
-                class="stage-container dropdown js-mini-pipeline-graph"
-                :class="{
-                  'has-downstream': index === mr.pipeline.details.stages.length - 1 && triggered.length
-                }">
-                <pipeline-stage :stage="stage" />
-              </div>
+                <div
+                  v-if="mr.pipeline.details.stages.length > 0"
+                  v-for="(stage, index) in mr.pipeline.details.stages"
+                  class="stage-container dropdown js-mini-pipeline-graph"
+                  :class="{
+                    'has-downstream': index === mr.pipeline.details.stages.length - 1 && triggered.length
+                  }">
+                  <pipeline-stage :stage="stage" />
+                </div>
 
-              <linked-pipelines-mini-list
-                v-if="triggered.length"
-                :triggered="triggered"
-                />
-            </div>
+                <linked-pipelines-mini-list
+                  v-if="triggered.length"
+                  :triggered="triggered"
+                  />
+              </span>
+            </span>
+            <span>
+              {{mr.pipeline.details.status.label}} for
+              <a
+                :href="mr.pipeline.commit.commit_path"
+                class="commit-sha 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>
           </div>
-          <span>
-            for
-            <a
-              :href="mr.pipeline.commit.commit_path"
-              class="commit-sha 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

@@ -2,6 +2,7 @@ export default {
   name: 'MRWidgetRelatedLinks',
   props: {
     relatedLinks: { type: Object, required: true },
+    state: { type: String },
   },
   computed: {
     hasLinks() {
@@ -10,29 +11,25 @@ export default {
     },
   },
   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';
+    closesText(state) {
+      if (state === 'merged') {
+        return 'Closed';
+      }
+      if (state === 'closed') {
+        return 'Did not close';
+      }
+      return 'Closes';
     },
   },
   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>.
+        {{closesText(state)}} <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.
+        Mentions <span v-html="relatedLinks.mentioned"></span>
       </p>
       <p v-if="relatedLinks.assignToMe">
         <span v-html="relatedLinks.assignToMe"></span>

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

+import ciIcon from '../../vue_shared/components/ci_icon.vue';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+
+export default {
+  props: {
+    status: { type: String, required: true },
+    showDisabledButton: { type: Boolean, required: false },
+  },
+  components: {
+    ciIcon,
+    loadingIcon,
+  },
+  computed: {
+    statusObj() {
+      return {
+        group: this.status,
+        icon: `icon_status_${this.status}`,
+      };
+    },
+  },
+  template: `
+    <div class="space-children flex-container-block append-right-10">
+      <div v-if="status === 'loading'" class="mr-widget-icon">
+        <loading-icon />
+      </div>
+      <ci-icon v-else :status="statusObj" />
+      <button
+        v-if="showDisabledButton"
+        type="button"
+        class="btn btn-success btn-small"
+        disabled="true">
+        Merge
+      </button>
+    </div>
+  `,
+};

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

+import statusIcon from '../mr_widget_status_icon';
+
 export default {
   name: 'MRWidgetArchived',
+  components: {
+    statusIcon,
+  },
   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 class="mr-widget-body media">
+      <div class="space-children">
+        <status-icon status="failed" />
+        <button
+          type="button"
+          class="btn btn-success btn-small"
+          disabled="true">
+          Merge
+        </button>
+      </div>
+      <div class="media-body">
+        <span class="bold">
+          This project is archived, write access has been disabled
+        </span>
+      </div>
     </div>
   `,
 };

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

 import eventHub from '../../event_hub';
+import statusIcon from '../mr_widget_status_icon';
 
 export default {
   name: 'MRWidgetAutoMergeFailed',
@@ -10,6 +11,9 @@ export default {
       isRefreshing: false,
     };
   },
+  components: {
+    statusIcon,
+  },
   methods: {
     refreshWidget() {
       this.isRefreshing = true;
@@ -19,18 +23,16 @@ export default {
     },
   },
   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.
+    <div class="mr-widget-body media">
+      <status-icon status="failed" />
+      <div class="media-body space-children">
+        <span class="bold">
+          <template v-if="mr.mergeError">{{mr.mergeError}}.</template>
+          This merge request failed to be merged automatically
+        </span>
         <button
           @click="refreshWidget"
-          :class="{ disabled: isRefreshing }"
+          :disabled="isRefreshing"
           type="button"
           class="btn btn-xs btn-default">
           <i
@@ -39,9 +41,6 @@ export default {
             aria-hidden="true" />
           Refresh
         </button>
-      </span>
-      <div class="merge-error-text danger bold">
-        {{mr.mergeError}}
       </div>
     </div>
   `,

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

+import statusIcon from '../mr_widget_status_icon';
+
 export default {
   name: 'MRWidgetChecking',
+  components: {
+    statusIcon,
+  },
   template: `
-    <div class="mr-widget-body">
-      <button
-        type="button"
-        class="btn btn-success btn-small"
-        disabled="true">
-        Merge
-      </button>
-      <span class="bold">
-        Checking ability to merge automatically.
-        <i
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true" />
-      </span>
+    <div class="mr-widget-body media">
+      <status-icon status="loading" showDisabledButton />
+      <div class="media-body space-children">
+        <span class="bold">
+          Checking ability to merge automatically
+        </span>
+      </div>
     </div>
   `,
 };

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

 import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
+import statusIcon from '../mr_widget_status_icon';
 
 export default {
   name: 'MRWidgetClosed',
@@ -7,24 +8,28 @@ export default {
   },
   components: {
     'mr-widget-author-and-time': mrWidgetAuthorTime,
+    statusIcon,
   },
   template: `
-    <div class="mr-widget-body">
-      <mr-widget-author-and-time
-        actionText="Closed by"
-        :author="mr.closedBy"
-        :dateTitle="mr.updatedAt"
-        :dateReadable="mr.closedAt"
-      />
-      <section>
-        <p>
-          The changes were not merged into
-          <a
-            :href="mr.targetBranchPath"
-            class="label-branch">
-            {{mr.targetBranch}}</a>.
-        </p>
-      </section>
+    <div class="mr-widget-body media">
+      <status-icon status="failed" />
+      <div class="media-body">
+        <mr-widget-author-and-time
+          actionText="Closed by"
+          :author="mr.closedBy"
+          :dateTitle="mr.updatedAt"
+          :dateReadable="mr.closedAt"
+        />
+        <section class="mr-info-list">
+          <p>
+            The changes were not merged into
+            <a
+              :href="mr.targetBranchPath"
+              class="label-branch">
+              {{mr.targetBranch}}</a>
+          </p>
+        </section>
+      </div>
     </div>
   `,
 };

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

+import statusIcon from '../mr_widget_status_icon';
+
 export default {
   name: 'MRWidgetConflicts',
   props: {
     mr: { type: Object, required: true },
   },
+  components: {
+    statusIcon,
+  },
   template: `
-    <div class="mr-widget-body">
-      <button
-        type="button"
-        class="btn btn-success btn-small"
-        disabled="true">
-        Merge
-      </button>
-      <span class="bold">
-        There are merge conflicts.
-        <span v-if="!mr.canMerge">
-          Resolve these conflicts or ask someone with write access to this repository to merge it locally.
+    <div class="mr-widget-body media">
+      <status-icon status="failed" showDisabledButton />
+      <div class="media-body space-children">
+        <span class="bold">
+          There are merge conflicts<span v-if="!mr.canMerge">.</span>
+          <span v-if="!mr.canMerge">
+            Resolve these conflicts or ask someone with write access to this repository to merge it locally.
+          </span>
         </span>
-      </span>
-      <div
-        v-if="mr.canMerge"
-        class="btn-group">
         <a
-          v-if="mr.conflictResolutionPath"
+          v-if="mr.canMerge && mr.conflictResolutionPath"
           :href="mr.conflictResolutionPath"
           class="btn btn-default btn-xs js-resolve-conflicts-button">
           Resolve conflicts

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

+import statusIcon from '../mr_widget_status_icon';
 import eventHub from '../../event_hub';
 
 export default {
@@ -38,39 +39,40 @@ export default {
       }
     },
   },
+  components: {
+    statusIcon,
+  },
   template: `
-    <div class="mr-widget-body">
-      <button
-        class="btn btn-success btn-small"
-        disabled="true"
-        type="button">
-        Merge
-      </button>
-      <span
-        v-if="!isRefreshing"
-        class="bold danger">
-        <span
-          class="has-error-message"
-          v-if="mr.mergeError">
-          {{mr.mergeError}}
-        </span>
-        <span v-else>Merge failed.</span>
-        <span
-          :class="{ 'has-custom-error': mr.mergeError }">
-          Refreshing in {{timerText}} to show the updated status...
+    <div class="mr-widget-body media">
+      <template v-if="isRefreshing">
+        <status-icon status="loading" />
+        <span class="media-body bold js-refresh-label">
+          Refreshing now
         </span>
-        <button
-          @click="refresh"
-          class="btn btn-default btn-xs js-refresh-button"
-          type="button">
-          Refresh now
-        </button>
-      </span>
-      <span
-        v-if="isRefreshing"
-        class="bold js-refresh-label">
-        Refreshing now...
-      </span>
+      </template>
+      <template v-else>
+        <status-icon status="failed" showDisabledButton />
+        <div class="media-body space-children">
+          <span class="bold">
+            <span
+              class="has-error-message"
+              v-if="mr.mergeError">
+              {{mr.mergeError}}.
+            </span>
+            <span v-else>Merge failed.</span>
+            <span
+              :class="{ 'has-custom-error': mr.mergeError }">
+              Refreshing in {{timerText}} to show the updated status...
+            </span>
+          </span>
+          <button
+            @click="refresh"
+            class="btn btn-default btn-xs js-refresh-button"
+            type="button">
+            Refresh now
+          </button>
+        </div>
+      </template>
     </div>
   `,
 };

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

+import statusIcon from '../mr_widget_status_icon';
+
 export default {
   name: 'MRWidgetLocked',
   props: {
     mr: { type: Object, required: true },
   },
+  components: {
+    statusIcon,
+  },
   template: `
-    <div class="mr-widget-body mr-state-locked">
-      <span class="state-label">Locked</span>
-      This merge request is in the process of being merged, during which time it is locked and cannot be closed.
-      <i
-        class="fa fa-spinner fa-spin"
-        aria-hidden="true" />
-      <section class="mr-info-list mr-links">
-        <div class="legend"></div>
-        <p>
-          The changes will be merged into
-          <span class="label-branch">
-            <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
-          </span>.
-        </p>
-      </section>
+    <div class="mr-widget-body mr-state-locked media">
+      <status-icon status="loading" />
+      <div class="media-body">
+        <h4>
+          This merge request is in the process of being merged, during which time it is locked and cannot be closed
+        </h4>
+        <section class="mr-info-list">
+          <p>
+            The changes will be merged into
+            <span class="label-branch">
+              <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
+            </span>
+          </p>
+        </section>
+      </div>
     </div>
   `,
 };

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

 /* global Flash */
-
+import statusIcon from '../mr_widget_status_icon';
 import MRWidgetAuthor from '../../components/mr_widget_author';
 import eventHub from '../../event_hub';
 
@@ -11,6 +11,7 @@ export default {
   },
   components: {
     'mr-widget-author': MRWidgetAuthor,
+    statusIcon,
   },
   data() {
     return {
@@ -61,56 +62,56 @@ export default {
     },
   },
   template: `
-    <div class="mr-widget-body">
-      <h4>
-        Set by
-        <mr-widget-author :author="mr.setToMWPSBy" />
-        to be merged automatically when the pipeline succeeds.
-        <a
-          v-if="mr.canCancelAutomaticMerge"
-          @click.prevent="cancelAutomaticMerge"
-          :disabled="isCancellingAutoMerge"
-          role="button"
-          href="#"
-          class="btn btn-xs btn-default js-cancel-auto-merge">
-          <i
-            v-if="isCancellingAutoMerge"
-            class="fa fa-spinner fa-spin"
-            aria-hidden="true" />
-            Cancel automatic merge
-        </a>
-      </h4>
-      <section class="mr-info-list">
-        <div class="legend"></div>
-        <p>The changes will be merged into
-          <a
-            :href="mr.targetBranchPath"
-            class="label-branch">
-            {{mr.targetBranch}}
-          </a>.
-        </p>
-        <p v-if="mr.shouldRemoveSourceBranch">
-          The source branch will be removed.
-        </p>
-        <p
-          v-else
-          class="with-button">
-          The source branch will not be removed.
+    <div class="mr-widget-body media">
+      <status-icon status="success" />
+      <div class="media-body">
+        <h4>
+          Set by
+          <mr-widget-author :author="mr.setToMWPSBy" />
+          to be merged automatically when the pipeline succeeds
           <a
-            v-if="canRemoveSourceBranch"
-            :disabled="isRemovingSourceBranch"
-            @click.prevent="removeSourceBranch"
+            v-if="mr.canCancelAutomaticMerge"
+            @click.prevent="cancelAutomaticMerge"
+            :disabled="isCancellingAutoMerge"
             role="button"
-            class="btn btn-xs btn-default js-remove-source-branch"
-            href="#">
+            href="#"
+            class="btn btn-xs btn-default js-cancel-auto-merge">
             <i
-            v-if="isRemovingSourceBranch"
-            class="fa fa-spinner fa-spin"
-            aria-hidden="true" />
-            Remove source branch
+              v-if="isCancellingAutoMerge"
+              class="fa fa-spinner fa-spin"
+              aria-hidden="true" />
+              Cancel automatic merge
           </a>
-        </p>
-      </section>
+        </h4>
+        <section class="mr-info-list">
+          <p>The changes will be merged into
+            <a
+              :href="mr.targetBranchPath"
+              class="label-branch">
+              {{mr.targetBranch}}
+            </a>
+          </p>
+          <p v-if="mr.shouldRemoveSourceBranch">
+            The source branch will be removed
+          </p>
+          <p v-else>
+            The source branch will not be removed
+            <a
+              v-if="canRemoveSourceBranch"
+              :disabled="isRemovingSourceBranch"
+              @click.prevent="removeSourceBranch"
+              role="button"
+              class="btn btn-xs btn-default js-remove-source-branch"
+              href="#">
+              <i
+              v-if="isRemovingSourceBranch"
+              class="fa fa-spinner fa-spin"
+              aria-hidden="true" />
+              Remove source branch
+            </a>
+          </p>
+        </section>
+      </div>
     </div>
   `,
 };

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

 /* global Flash */
 
 import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
+import statusIcon from '../mr_widget_status_icon';
 import eventHub from '../../event_hub';
 
 export default {
@@ -11,6 +12,7 @@ export default {
   },
   components: {
     'mr-widget-author-and-time': mrWidgetAuthorTime,
+    statusIcon,
   },
   data() {
     return {
@@ -55,75 +57,73 @@ export default {
     },
   },
   template: `
-    <div class="mr-widget-body">
-      <mr-widget-author-and-time
-        actionText="Merged by"
-        :author="mr.mergedBy"
-        :dateTitle="mr.updatedAt"
-        :dateReadable="mr.mergedAt" />
-      <section class="mr-info-list">
-        <div class="legend"></div>
-        <p>
-          The changes were merged into
-          <span class="label-branch">
-            <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
-          </span>
-        </p>
-        <p v-if="mr.sourceBranchRemoved">The source branch has been removed.</p>
-        <p v-if="shouldShowRemoveSourceBranch">
-          You can remove source branch now.
-          <button
-            @click="removeSourceBranch"
-            :class="{ disabled: isMakingRequest }"
-            type="button"
-            class="btn btn-xs btn-default js-remove-branch-button">
-            Remove Source Branch
-          </button>
-        </p>
-        <p v-if="shouldShowSourceBranchRemoving">
-          <i
-            class="fa fa-spinner fa-spin"
-            aria-hidden="true" />
-          The source branch is being removed.
-        </p>
-      </section>
-      <div
-        v-if="shouldShowMergedButtons"
-        class="merged-buttons clearfix">
-        <a
-          v-if="mr.canRevertInCurrentMR"
-          class="btn btn-close btn-sm has-tooltip"
-          href="#modal-revert-commit"
-          data-toggle="modal"
-          data-container="body"
-          title="Revert this merge request in a new merge request">
-          Revert
-        </a>
-        <a
-          v-else-if="mr.revertInForkPath"
-          class="btn btn-close btn-sm has-tooltip"
-          data-method="post"
-          :href="mr.revertInForkPath"
-          title="Revert this merge request in a new merge request">
-          Revert
-        </a>
-        <a
-          v-if="mr.canCherryPickInCurrentMR"
-          class="btn btn-default btn-sm has-tooltip"
-          href="#modal-cherry-pick-commit"
-          data-toggle="modal"
-          data-container="body"
-          title="Cherry-pick this merge request in a new merge request">
-          Cherry-pick
-        </a>
-        <a
-          v-else-if="mr.cherryPickInForkPath"
-          class="btn btn-default btn-sm has-tooltip"
-          data-method="post"
-          :href="mr.cherryPickInForkPath"
-          title="Cherry-pick this merge request in a new merge request">
-          Cherry-pick
-        </a>
+    <div class="mr-widget-body media">
+      <status-icon status="success" />
+      <div class="media-body">
+        <div class="space-children">
+          <mr-widget-author-and-time
+            actionText="Merged by"
+            :author="mr.mergedBy"
+            :dateTitle="mr.updatedAt"
+            :dateReadable="mr.mergedAt" />
+          <a
+            v-if="mr.canRevertInCurrentMR"
+            class="btn btn-close btn-xs has-tooltip"
+            href="#modal-revert-commit"
+            data-toggle="modal"
+            data-container="body"
+            title="Revert this merge request in a new merge request">
+            Revert
+          </a>
+          <a
+            v-else-if="mr.revertInForkPath"
+            class="btn btn-close btn-xs has-tooltip"
+            data-method="post"
+            :href="mr.revertInForkPath"
+            title="Revert this merge request in a new merge request">
+            Revert
+          </a>
+          <a
+            v-if="mr.canCherryPickInCurrentMR"
+            class="btn btn-default btn-xs has-tooltip"
+            href="#modal-cherry-pick-commit"
+            data-toggle="modal"
+            data-container="body"
+            title="Cherry-pick this merge request in a new merge request">
+            Cherry-pick
+          </a>
+          <a
+            v-else-if="mr.cherryPickInForkPath"
+            class="btn btn-default btn-xs has-tooltip"
+            data-method="post"
+            :href="mr.cherryPickInForkPath"
+            title="Cherry-pick this merge request in a new merge request">
+            Cherry-pick
+          </a>
+        </div>
+        <section class="mr-info-list">
+          <p>
+            The changes were merged into
+            <span class="label-branch">
+              <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
+            </span>
+          </p>
+          <p v-if="mr.sourceBranchRemoved">The source branch has been removed</p>
+          <p v-if="shouldShowRemoveSourceBranch" class="space-children">
+            <span>You can remove source branch now</span>
+            <button
+              @click="removeSourceBranch"
+              :class="{ disabled: isMakingRequest }"
+              type="button"
+              class="btn btn-xs btn-default js-remove-branch-button">
+              Remove Source Branch
+            </button>
+          </p>
+          <p v-if="shouldShowSourceBranchRemoving">
+            <status-icon status="loading" />
+            <span>The source branch is being removed</span>
+          </p>
+        </section>
       </div>
     </div>
   `,

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

+import statusIcon from '../mr_widget_status_icon';
 import mrWidgetMergeHelp from '../../components/mr_widget_merge_help';
 
 export default {
@@ -7,28 +8,30 @@ export default {
   },
   components: {
     'mr-widget-merge-help': mrWidgetMergeHelp,
+    statusIcon,
   },
   computed: {
     missingBranchName() {
       return this.mr.sourceBranchRemoved ? 'source' : 'target';
     },
+    message() {
+      return `If the ${this.missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line`;
+    },
   },
   template: `
-    <div class="mr-widget-body">
-      <button
-        type="button"
-        class="btn btn-success btn-small"
-        disabled="true">
-        Merge
-      </button>
-      <span class="bold js-branch-text">
-        <span class="capitalize">
-          {{missingBranchName}}
-        </span> branch does not exist.
-        Please restore the {{missingBranchName}} branch or use a different {{missingBranchName}} branch.
-      </span>
-      <mr-widget-merge-help
-        :missing-branch="missingBranchName" />
+    <div class="mr-widget-body media">
+      <status-icon status="failed" showDisabledButton />
+      <div class="media-body space-children">
+        <span class="bold js-branch-text">
+          <span class="capitalize">
+            {{missingBranchName}}
+          </span> branch does not exist.
+          Please restore it or use a different {{missingBranchName}} branch
+          <i
+            class="fa fa-question-circle has-tooltip"
+            :title="message" />
+        </span>
+      </div>
     </div>
   `,
 };

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

+import statusIcon from '../mr_widget_status_icon';
+
 export default {
   name: 'MRWidgetNotAllowed',
+  components: {
+    statusIcon,
+  },
   template: `
-    <div class="mr-widget-body">
-      <button
-        type="button"
-        class="btn btn-success btn-small"
-        disabled="true">
-        Merge
-      </button>
-      <span class="bold">
-        Ready to be merged automatically.
-        Ask someone with write access to this repository to merge this request.
-      </span>
+    <div class="mr-widget-body media">
+      <status-icon status="success" showDisabledButton />
+      <div class="media-body space-children">
+        <span class="bold">
+          Ready to be merged automatically.
+          Ask someone with write access to this repository to merge this request
+        </span>
+      </div>
     </div>
   `,
 };

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

@@ -12,7 +12,7 @@ export default {
     return { emptyStateSVG };
   },
   template: `
-    <div class="mr-widget-body empty-state">
+    <div class="mr-widget-body mr-widget-empty-state">
       <div class="row">
         <div class="artwork col-sm-5 col-sm-push-7 col-xs-12 text-center">
           <span v-html="emptyStateSVG"></span>
@@ -29,12 +29,14 @@ export default {
             Currently there are no changes in this merge request's source branch.
             Please push new commits or use a different branch.
           </p>
-          <a
-            v-if="mr.newBlobPath"
-            :href="mr.newBlobPath"
-            class="btn btn-inverted btn-save">
-            Create file
-          </a>
+          <div>
+            <a
+              v-if="mr.newBlobPath"
+              :href="mr.newBlobPath"
+              class="btn btn-inverted btn-save">
+              Create file
+            </a>
+          </div>
         </div>
       </div>
     </div>

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

+import statusIcon from '../mr_widget_status_icon';
+
 export default {
   name: 'MRWidgetPipelineBlocked',
+  components: {
+    statusIcon,
+  },
   template: `
-    <div class="mr-widget-body">
-      <button
-        type="button"
-        class="btn btn-success btn-small"
-        disabled="true">
-        Merge
-      </button>
-      <span class="bold">
-        Pipeline blocked. The pipeline for this merge request requires a manual action to proceed.
-      </span>
+    <div class="mr-widget-body media">
+      <status-icon status="failed" showDisabledButton />
+      <div class="media-body space-children">
+        <span class="bold">
+          Pipeline blocked. The pipeline for this merge request requires a manual action to proceed
+        </span>
+      </div>
     </div>
   `,
 };

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

+import statusIcon from '../mr_widget_status_icon';
+
 export default {
   name: 'MRWidgetPipelineBlocked',
+  components: {
+    statusIcon,
+  },
   template: `
-    <div class="mr-widget-body">
-      <button
-        class="btn btn-success btn-small"
-        disabled="true"
-        type="button">
-        Merge
-      </button>
-      <span class="bold">
-        The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure.
-      </span>
+    <div class="mr-widget-body media">
+      <status-icon status="failed" showDisabledButton />
+      <div class="media-body space-children">
+        <span class="bold">
+          The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure
+        </span>
+      </div>
     </div>
   `,
 };

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

 /* global Flash */
-
 import successSvg from 'icons/_icon_status_success.svg';
 import warningSvg from 'icons/_icon_status_warning.svg';
 import simplePoll from '~/lib/utils/simple_poll';
+import statusIcon from '../mr_widget_status_icon';
 import eventHub from '../../event_hub';
 
 export default {
@@ -25,6 +25,9 @@ export default {
       warningSvg,
     };
   },
+  components: {
+    statusIcon,
+  },
   computed: {
     commitMessageLinkTitle() {
       const withDesc = 'Include description in commit message';
@@ -200,90 +203,103 @@ export default {
     },
   },
   template: `
-    <div class="mr-widget-body">
-      <span class="btn-group">
-        <button
-          @click="handleMergeButtonClick()"
-          :disabled="isMergeButtonDisabled"
-          :class="mergeButtonClass"
-          type="button">
-          <i
-            v-if="isMakingRequest"
-            class="fa fa-spinner fa-spin"
-            aria-hidden="true" />
-          {{mergeButtonText}}
-        </button>
-        <button
-          v-if="shouldShowMergeOptionsDropdown"
-          :disabled="isMergeButtonDisabled"
-          type="button"
-          class="btn btn-small btn-info dropdown-toggle"
-          data-toggle="dropdown">
-          <i
-            class="fa fa-caret-down"
-            aria-hidden="true" />
-          <span class="sr-only">
-            Select merge moment
+    <div class="mr-widget-body media">
+      <status-icon status="success" />
+      <div class="media-body">
+        <div class="media space-children">
+          <span class="btn-group">
+            <button
+              @click="handleMergeButtonClick()"
+              :disabled="isMergeButtonDisabled"
+              :class="mergeButtonClass"
+              type="button">
+              <i
+                v-if="isMakingRequest"
+                class="fa fa-spinner fa-spin"
+                aria-hidden="true" />
+              {{mergeButtonText}}
+            </button>
+            <button
+              v-if="shouldShowMergeOptionsDropdown"
+              :disabled="isMergeButtonDisabled"
+              type="button"
+              class="btn btn-small btn-info dropdown-toggle js-merge-moment"
+              data-toggle="dropdown"
+              aria-label="Select merge moment">
+              <i
+                class="fa fa-chevron-down"
+                aria-hidden="true" />
+            </button>
+            <ul
+              v-if="shouldShowMergeOptionsDropdown"
+              class="dropdown-menu dropdown-menu-right"
+              role="menu">
+              <li>
+                <a
+                  @click.prevent="handleMergeButtonClick(true)"
+                  class="merge_when_pipeline_succeeds"
+                  href="#">
+                  <span class="media">
+                    <span
+                      v-html="successSvg"
+                      class="merge-opt-icon"
+                      aria-hidden="true"></span>
+                    <span class="media-body merge-opt-title">Merge when pipeline succeeds</span>
+                  </span>
+                </a>
+              </li>
+              <li>
+                <a
+                  @click.prevent="handleMergeButtonClick(false, true)"
+                  class="accept-merge-request"
+                  href="#">
+                  <span class="media">
+                    <span
+                      v-html="warningSvg"
+                      class="merge-opt-icon"
+                      aria-hidden="true"></span>
+                    <span class="media-body merge-opt-title">Merge immediately</span>
+                  </span>
+                </a>
+              </li>
+            </ul>
           </span>
-        </button>
-        <ul
-          v-if="shouldShowMergeOptionsDropdown"
-          class="dropdown-menu dropdown-menu-right"
-          role="menu">
-          <li>
-            <a
-              @click.prevent="handleMergeButtonClick(true)"
-              class="merge_when_pipeline_succeeds"
-              href="#">
-              <span
-                v-html="successSvg"
-                class="merge-opt-icon"
-                aria-hidden="true"></span>
-              <span class="merge-opt-title">Merge when pipeline succeeds</span>
-            </a>
-          </li>
-          <li>
-            <a
-              @click.prevent="handleMergeButtonClick(false, true)"
-              class="accept-merge-request"
-              href="#">
-              <span
-                v-html="warningSvg"
-                class="merge-opt-icon"
-                aria-hidden="true"></span>
-              <span class="merge-opt-title">Merge immediately</span>
-            </a>
-          </li>
-        </ul>
-      </span>
-      <template v-if="isMergeAllowed()">
-        <label class="spacing">
-          <input
-            id="remove-source-branch-input"
-            v-model="removeSourceBranch"
-            :disabled="isRemoveSourceBranchButtonDisabled"
-            type="checkbox"/> Remove source branch
-        </label>
+          <div class="media-body space-children">
+            <template v-if="isMergeAllowed()">
+              <label>
+                <input
+                  id="remove-source-branch-input"
+                  v-model="removeSourceBranch"
+                  :disabled="isRemoveSourceBranchButtonDisabled"
+                  type="checkbox"/> Remove source branch
+              </label>
 
-        <!-- Placeholder for EE extension of this component -->
-        <squash-before-merge
-          v-if="shouldShowSquashBeforeMerge"
-          :mr="mr"
-          :is-merge-button-disabled="isMergeButtonDisabled" />
-
-        <span v-if="mr.ffOnlyEnabled">
-          Fast-forward merge without a merge commit
-        </span>
-        <span v-else>
-          <button
-            @click="toggleCommitMessageEditor"
-            :disabled="isMergeButtonDisabled"
-            class="btn btn-default btn-xs"
-            type="button">
-            Modify commit message
-          </button>
-        </span>
+              <!-- Placeholder for EE extension of this component -->
+              <squash-before-merge
+                v-if="shouldShowSquashBeforeMerge"
+                :mr="mr"
+                :is-merge-button-disabled="isMergeButtonDisabled" />
 
+              <span v-if="mr.ffOnlyEnabled">
+                Fast-forward merge without a merge commit
+              </span>
+              <span v-else>
+                <button
+                  @click="toggleCommitMessageEditor"
+                  :disabled="isMergeButtonDisabled"
+                  class="btn btn-default btn-xs"
+                  type="button">
+                  Modify commit message
+                </button>
+              </span>
+            </template>
+            <template v-else>
+              <span class="bold">
+                The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure
+              </span>
+            </template>
+          </div>
+        </div>
         <div
           v-if="showCommitMessageEditor"
           class="prepend-top-default commit-message-editor">
@@ -303,7 +319,7 @@ export default {
                   rows="14"
                   name="Commit message"></textarea>
               </div>
-              <p class="hint">Try to keep the first line under 52 characters and the others under 72.</p>
+              <p class="hint">Try to keep the first line under 52 characters and the others under 72</p>
               <div class="hint">
                 <a
                   @click.prevent="updateCommitMessage"
@@ -312,12 +328,7 @@ export default {
             </div>
           </div>
         </div>
-      </template>
-      <template v-else>
-        <span class="bold">
-          The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure.
-        </span>
-      </template>
+      </div>
     </div>
   `,
 };

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

+import statusIcon from '../mr_widget_status_icon';
+
 export default {
   name: 'MRWidgetSHAMismatch',
+  components: {
+    statusIcon,
+  },
   template: `
-    <div class="mr-widget-body">
-      <button
-        type="button"
-        class="btn btn-success btn-small"
-        disabled="true">
-        Merge
-      </button>
-      <span class="bold">
-        The source branch HEAD has recently changed. Please reload the page and review the changes before merging.
-      </span>
+    <div class="mr-widget-body media">
+      <status-icon status="failed" showDisabledButton />
+      <div class="media-body space-children">
+        <span class="bold">
+          The source branch HEAD has recently changed. Please reload the page and review the changes before merging
+        </span>
+      </div>
     </div>
   `,
 };

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

+import statusIcon from '../mr_widget_status_icon';
+
 export default {
   name: 'MRWidgetUnresolvedDiscussions',
   props: {
     mr: { type: Object, required: true },
   },
+  components: {
+    statusIcon,
+  },
   template: `
-    <div class="mr-widget-body">
-      <button
-        type="button"
-        class="btn btn-success btn-small"
-        disabled="true">
-        Merge
-      </button>
-      <span class="bold">
-        There are unresolved discussions. Please resolve these discussions
-        <span v-if="mr.canCreateIssue">or</span>
-        <span v-else>.</span>
-      </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 class="mr-widget-body media">
+      <status-icon status="failed" showDisabledButton />
+      <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/mr_widget_wip.js

 /* global Flash */
+import statusIcon from '../mr_widget_status_icon';
 import eventHub from '../../event_hub';
 
 export default {
@@ -28,21 +29,21 @@ export default {
         });
     },
   },
+  components: {
+    statusIcon,
+  },
   template: `
-    <div class="mr-widget-body">
-      <button
-        type="button"
-        class="btn btn-success btn-small"
-        disabled="true">
-        Merge</button>
-      <span class="bold">
-        This merge request is currently Work In Progress and therefore unable to merge
-      </span>
-      <template v-if="mr.removeWIPPath">
-        <i
-          class="fa fa-question-circle has-tooltip"
-          title="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged." />
+    <div class="mr-widget-body media">
+      <status-icon status="failed" :showDisabledButton="Boolean(mr.removeWIPPath)" />
+      <div class="media-body space-children">
+        <span class="bold">
+          This is a Work in Progress
+          <i
+            class="fa fa-question-circle has-tooltip"
+            title="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged." />
+        </span>
         <button
+          v-if="mr.removeWIPPath"
           @click="removeWIP"
           :disabled="isMakingRequest"
           type="button"
@@ -53,7 +54,7 @@ export default {
             aria-hidden="true" />
             Resolve WIP status
         </button>
-      </template>
+      </div>
     </div>
   `,
 };

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -35,8 +35,13 @@ import {
 export default {
   el: '#js-vue-mr-widget',
   name: 'MRWidget',
+  props: {
+    mrData: {
+      type: Object,
+    },
+  },
   data() {
-    const store = new MRWidgetStore(gl.mrWidgetData);
+    const store = new MRWidgetStore(this.mrData || window.gl.mrWidgetData);
     const service = this.createService(store);
     return {
       mr: store,
@@ -232,14 +237,19 @@ export default {
         v-if="shouldRenderDeployments"
         :mr="mr"
         :service="service" />
-      <component
-        :is="componentName"
-        :mr="mr"
-        :service="service" />
-      <mr-widget-related-links
-        v-if="shouldRenderRelatedLinks"
-        :related-links="mr.relatedLinks" />
-      <mr-widget-merge-help v-if="shouldRenderMergeHelp" />
+      <div class="mr-widget-section">
+        <component
+          :is="componentName"
+          :mr="mr"
+          :service="service" />
+        <mr-widget-related-links
+          v-if="shouldRenderRelatedLinks"
+          :state="mr.state"
+          :related-links="mr.relatedLinks" />
+      </div>
+      <div class="mr-widget-footer" v-if="shouldRenderMergeHelp">
+        <mr-widget-merge-help />
+      </div>
     </div>
   `,
 };

app/assets/stylesheets/framework.scss

@@ -3,7 +3,6 @@
 @import 'framework/tw_bootstrap_variables';
 @import 'framework/tw_bootstrap';
 @import "framework/layout";
-
 @import "framework/animations";
 @import "framework/avatar";
 @import "framework/asciidoctor";
@@ -26,8 +25,10 @@
 @import "framework/lists";
 @import "framework/logo";
 @import "framework/markdown_area";
+@import "framework/media_object";
 @import "framework/mobile";
 @import "framework/modal";
+@import "framework/media_object";
 @import "framework/nav";
 @import "framework/pagination";
 @import "framework/panels";

app/assets/stylesheets/framework/media_object.scss

+.media {
+  display: flex;
+  align-items: flex-start;
+}
+
+.media-body {
+  flex: 1;
+}

app/assets/stylesheets/pages/pipelines.scss

@@ -247,7 +247,11 @@
     position: relative;
     vertical-align: middle;
     height: 22px;
-    margin: 3px 6px 3px 0;
+    margin: 3px 0;
+
+    + .stage-container {
+      margin-left: 6px;
+    }
 
     // Hack to show a button tooltip inline
     button.has-tooltip + .tooltip {

changelogs/unreleased-ee/33095-mr-widget-ui-ee.yml

+---
+title: clean up merge request widget UI
+merge_request:
+author:

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_body.js

@@ -70,7 +70,7 @@ export default {
     },
   },
   template: `
-    <div class="approvals-body">
+    <div class="approvals-body space-children">
       <span v-if="showApproveButton" class="approvals-approve-button-wrap">
         <button
           :disabled="approving"

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.js

@@ -65,8 +65,7 @@ export default {
   },
   template: `
     <div v-if="approvedBy.length" class="approved-by-users approvals-footer clearfix mr-info-list">
-      <div class="legend"></div>
-      <div class="approvers-prefix">
+      <div class="approvers-prefix space-children">
         <p>Approved by</p>
         <div class="approvers-list">
           <span v-for="approver in approvedBy">
@@ -89,7 +88,7 @@ export default {
           <button
             :disabled="unapproving"
             @click="unapproveMergeRequest"
-            class="btn btn-sm">
+            class="btn btn-xs">
             <i
               v-if="unapproving"
               class="fa fa-spinner fa-spin"

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/mr_widget_approvals.js

 /* global Flash */
 
+import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon';
 import ApprovalsBody from './approvals_body';
 import ApprovalsFooter from './approvals_footer';
 
@@ -23,6 +24,15 @@ export default {
   components: {
     'approvals-body': ApprovalsBody,
     'approvals-footer': ApprovalsFooter,
+    statusIcon,
+  },
+  computed: {
+    status() {
+      if (this.mr.approvals.approvals_left > 0) {
+        return 'failed';
+      }
+      return 'success';
+    },
   },
   created() {
     const flashErrorMessage = 'An error occured while retrieving approval data for this merge request.';
@@ -37,18 +47,23 @@ export default {
   template: `
     <div
       v-if="mr.approvalsRequired"
-      class="mr-widget-approvals-container mr-widget-body">
+      class="mr-widget-approvals-container mr-widget-body mr-widget-section media">
+      <div
+        v-if="fetchingApprovals"
+        class="mr-widget-icon">
+        <i class="fa fa-spinner fa-spin" />
+      </div>
+      <status-icon v-else :status="status" />
       <div
         v-show="fetchingApprovals"
-        class="mr-approvals-loading-state">
-        <span class="approvals-loading-text bold">
-          Checking approval status for this merge request.
+        class="mr-approvals-loading-state media-body">
+        <span class="approvals-loading-text">
+          Checking approval status
         </span>
-        <i class="fa fa-spinner fa-spin" />
       </div>
       <div
         v-if="!fetchingApprovals"
-        class="approvals-components">
+        class="approvals-components media-body">
         <approvals-body
           :mr="mr"
           :service="service"

ee/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_code_quality.vue

 <script>
-import successIcon from 'icons/_icon_status_success.svg';
-import errorIcon from 'icons/_icon_status_failed.svg';
+import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon';
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import '~/lib/utils/text_utility';
 import issuesBlock from './mr_widget_code_quality_issues.vue';
@@ -22,6 +21,7 @@ export default {
   components: {
     issuesBlock,
     loadingIcon,
+    statusIcon,
   },
 
   data() {
@@ -34,8 +34,11 @@ export default {
   },
 
   computed: {
-    stateIcon() {
-      return this.mr.codeclimateMetrics.newIssues.length ? errorIcon : successIcon;
+    status() {
+      if (this.loadingFailed || this.mr.codeclimateMetrics.newIssues.length) {
+        return 'failed';
+      }
+      return 'success';
     },
 
     hasNoneIssues() {
@@ -55,7 +58,7 @@ export default {
       let text = [];
 
       if (this.hasNoneIssues) {
-        text.push('No changes to code quality.');
+        text.push('No changes to code quality');
       } else if (this.hasIssues) {
         if (newIssues.length) {
           newIssuesText = ` degraded on ${newIssues.length} ${this.pointsText(newIssues)}`;
@@ -79,8 +82,6 @@ export default {
         if (newIssuesText) {
           text.push(newIssuesText);
         }
-
-        text.push('.');
       }
 
       return text.join('');
@@ -128,61 +129,66 @@ export default {
 };
 </script>
 <template>
-  <section class="mr-widget-code-quality">
+  <section class="mr-widget-code-quality mr-widget-section">
+
     <div
       v-if="isLoading"
-      class="padding-left">
-      <i
-        class="fa fa-spinner fa-spin"
-        aria-hidden="true">
-      </i>
-      Loading codeclimate report.
+      class="media">
+      <div class="mr-widget-icon">
+        <i
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true">
+        </i>
+      </div>
+      <div class="media-body">
+        Loading codeclimate report
+      </div>
     </div>
 
-    <div v-else-if="!isLoading && !loadingFailed">
-      <span
-        class="padding-left ci-status-icon"
-        :class="{
-          'ci-status-icon-failed': mr.codeclimateMetrics.newIssues.length,
-          'ci-status-icon-passed': mr.codeclimateMetrics.newIssues.length === 0
-        }"
-        v-html="stateIcon">
-      </span>
-      <span>
-        {{codeText}}
-      </span>
-
-      <button
-        type="button"
-        class="btn-link btn-blank"
-        v-if="hasIssues"
-        @click="toggleCollapsed">
-        {{collapseText}}
-      </button>
-
-      <div
-        class="code-quality-container"
-        v-if="hasIssues"
-        v-show="!isCollapsed">
-        <issues-block
-          class="js-mr-code-resolved-issues"
-          v-if="mr.codeclimateMetrics.resolvedIssues.length"
-          type="success"
-          :issues="mr.codeclimateMetrics.resolvedIssues"
-          />
-
-        <issues-block
-          class="js-mr-code-new-issues"
-          v-if="mr.codeclimateMetrics.newIssues.length"
-          type="failed"
-          :issues="mr.codeclimateMetrics.newIssues"
-          />
+    <div
+      v-else-if="!isLoading && !loadingFailed"
+      class="media">
+      <status-icon :status="status" />
+      <div class="media-body space-children">
+        <span class="js-code-text">
+          {{codeText}}
+        </span>
+
+        <button
+          type="button"
+          class="btn-link btn-blank"
+          v-if="hasIssues"
+          @click="toggleCollapsed">
+          {{collapseText}}
+        </button>
       </div>
-    </div>
+      </div>
+
+        <div
+          class="code-quality-container"
+          v-if="hasIssues"
+          v-show="!isCollapsed">
+          <issues-block
+            class="js-mr-code-resolved-issues"
+            v-if="mr.codeclimateMetrics.resolvedIssues.length"
+            type="success"
+            :issues="mr.codeclimateMetrics.resolvedIssues"
+            />
+
+          <issues-block
+            class="js-mr-code-new-issues"
+            v-if="mr.codeclimateMetrics.newIssues.length"
+            type="failed"
+            :issues="mr.codeclimateMetrics.newIssues"
+            />
+        </div>
     <div
       v-else-if="loadingFailed"
-      class="padding-left">
-      Failed to load codeclimate report.
+      class="media">
+      <status-icon status="failed" />
+      <div class="media-body">
+        Failed to load codeclimate report
+      </div>
     </div>
   </section>
 </template>

ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.js

@@ -2,6 +2,7 @@
 
 import simplePoll from '~/lib/utils/simple_poll';
 import eventHub from '~/vue_merge_request_widget/event_hub';
+import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon';
 
 export default {
   props: {
@@ -14,11 +15,28 @@ export default {
       required: true,
     },
   },
+  components: {
+    statusIcon,
+  },
   data() {
     return {
       isMakingRequest: false,
     };
   },
+  computed: {
+    status() {
+      if (this.mr.rebaseInProgress || this.isMakingRequest) {
+        return 'loading';
+      }
+      if (!this.mr.canPushToSourceBranch && !this.mr.rebaseInProgress) {
+        return 'failed';
+      }
+      return 'success';
+    },
+    showDisabledButton() {
+      return ['failed', 'loading'].includes(this.status);
+    },
+  },
   methods: {
     rebase() {
       this.isMakingRequest = true;
@@ -48,38 +66,24 @@ export default {
     },
   },
   template: `
-    <div class="mr-widget-body">
-      <div class="rebase-state-find-class-convention">
+    <div class="mr-widget-body media">
+      <status-icon :status="status" :showDisabledButton="showDisabledButton" />
+      <div class="rebase-state-find-class-convention media media-body space-children">
         <template v-if="mr.rebaseInProgress || isMakingRequest">
-          <button
-            type="button"
-            class="btn btn-success btn-small"
-            disabled="true">
-            Merge
-          </button>
           <span class="bold">
-            <i
-              class="fa fa-spinner fa-spin"
-              aria-hidden="true" />
-            Rebase in progress. This merge request is in the process of being rebased.
+            Rebase in progress
           </span>
         </template>
         <template v-if="!mr.rebaseInProgress && !mr.canPushToSourceBranch">
-          <button
-            type="button"
-            class="btn btn-success btn-small"
-            disabled="true">
-            Merge
-          </button>
           <span class="bold">
             Fast-forward merge is not possible.
             Rebase the source branch onto
             <span class="label-branch">{{mr.targetBranch}}</span>
-            to allow this merge request to be merged.
+            to allow this merge request to be merged
           </span>
         </template>
         <template v-if="!mr.rebaseInProgress && mr.canPushToSourceBranch && !isMakingRequest">
-          <div class="accept-merge-holder clearfix js-toggle-container accept-action">
+          <div class="accept-merge-holder clearfix js-toggle-container accept-action media space-children">
             <button
               class="btn btn-small btn-reopen btn-success"
               :disabled="isMakingRequest"
@@ -93,7 +97,7 @@ export default {
             <span class="bold">
               Fast-forward merge is not possible.
               Rebase the source branch onto the target branch or merge target
-              branch into source branch to allow this merge request to be merged.
+              branch into source branch to allow this merge request to be merged
             </span>
           </div>
         </template>

ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_secondary_geo_node.js

+import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon';
+
 export default {
   props: {
     mr: {
@@ -5,22 +7,27 @@ export default {
       required: true,
     },
   },
+  components: {
+    statusIcon,
+  },
   template: `
-    <div>
-      <button type="button" class="btn btn-success btn-small" disabled="true">Merge</button>
-      <span class="bold">
-        Merge requests are read-only in a secondary Geo node.
-      </span>
-      <a
-        :href="mr.geoSecondaryHelpPath"
-        data-title="About this feature"
-        data-toggle="tooltip"
-        data-placement="bottom"
-        target="_blank"
-        rel="noopener noreferrer nofollow"
-        data-container="body">
-        <i class="fa fa-question-circle"></i>
-      </a>
+    <div class="media">
+      <status-icon status="failed" showDisabledButton />
+      <div class="media-body">
+        <span class="bold">
+          Merge requests are read-only in a secondary Geo node
+        </span>
+        <a
+          :href="mr.geoSecondaryHelpPath"
+          data-title="About this feature"
+          data-toggle="tooltip"
+          data-placement="bottom"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+          data-container="body">
+          <i class="fa fa-question-circle"></i>
+        </a>
+      </div>
     </div>
   `,
 };

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -40,14 +40,18 @@ export default {
         :mr="mr"
         :service="service"
         />
-      <component
-        :is="componentName"
-        :mr="mr"
-        :service="service" />
-      <mr-widget-related-links
-        v-if="shouldRenderRelatedLinks"
-        :related-links="mr.relatedLinks" />
-      <mr-widget-merge-help v-if="shouldRenderMergeHelp" />
+      <div class="mr-widget-section">
+        <component
+          :is="componentName"
+          :mr="mr"
+          :service="service" />
+        <mr-widget-related-links
+          v-if="shouldRenderRelatedLinks"
+          :related-links="mr.relatedLinks" />
+      </div>
+      <div class="mr-widget-footer" v-if="shouldRenderMergeHelp">
+        <mr-widget-merge-help />
+      </div>
     </div>
   `,
 };

spec/features/merge_requests/closes_issues_spec.rb

@@ -26,17 +26,11 @@ feature 'Merge Request closing issues message', js: true do
     wait_for_requests
   end
 
-  context 'not closing or mentioning any issue' do
-    it 'does not display closing issue message' do
-      expect(page).not_to have_css('.mr-widget-footer')
-    end
-  end
-
   context 'closing issues but not mentioning any other issue' do
     let(:merge_request_description) { "Description\n\nclosing #{issue_1.to_reference}, #{issue_2.to_reference}" }
 
     it 'does not display closing issue message' do
-      expect(page).to have_content("Closes issues #{issue_1.to_reference} and #{issue_2.to_reference}")
+      expect(page).to have_content("Closes #{issue_1.to_reference} and #{issue_2.to_reference}")
     end
   end
 
@@ -44,7 +38,7 @@ feature 'Merge Request closing issues message', js: true do
     let(:merge_request_description) { "Description\n\nRefers to #{issue_1.to_reference} and #{issue_2.to_reference}" }
 
     it 'does not display closing issue message' do
-      expect(page).to have_content("Issues #{issue_1.to_reference} and #{issue_2.to_reference} are mentioned but will not be closed.")
+      expect(page).to have_content("Mentions #{issue_1.to_reference} and #{issue_2.to_reference}")
     end
   end
 
@@ -52,8 +46,8 @@ feature 'Merge Request closing issues message', js: true do
     let(:merge_request_title) { "closes #{issue_1.to_reference}\n\n refers to #{issue_2.to_reference}" }
 
     it 'does not display closing issue message' do
-      expect(page).to have_content("Closes issue #{issue_1.to_reference}.")
-      expect(page).to have_content("Issue #{issue_2.to_reference} is mentioned but will not be closed.")
+      expect(page).to have_content("Closes #{issue_1.to_reference}")
+      expect(page).to have_content("Mentions #{issue_2.to_reference}")
     end
   end
 
@@ -61,7 +55,7 @@ feature 'Merge Request closing issues message', js: true do
     let(:merge_request_title) { "closing #{issue_1.to_reference}, #{issue_2.to_reference}" }
 
     it 'does not display closing issue message' do
-      expect(page).to have_content("Closes issues #{issue_1.to_reference} and #{issue_2.to_reference}")
+      expect(page).to have_content("Closes #{issue_1.to_reference} and #{issue_2.to_reference}")
     end
   end
 
@@ -69,7 +63,7 @@ feature 'Merge Request closing issues message', js: true do
     let(:merge_request_title) { "Refers to #{issue_1.to_reference} and #{issue_2.to_reference}" }
 
     it 'does not display closing issue message' do
-      expect(page).to have_content("Issues #{issue_1.to_reference} and #{issue_2.to_reference} are mentioned but will not be closed.")
+      expect(page).to have_content("Mentions #{issue_1.to_reference} and #{issue_2.to_reference}")
     end
   end
 
@@ -77,8 +71,8 @@ feature 'Merge Request closing issues message', js: true do
     let(:merge_request_title) { "closes #{issue_1.to_reference}\n\n refers to #{issue_2.to_reference}" }
 
     it 'does not display closing issue message' do
-      expect(page).to have_content("Closes issue #{issue_1.to_reference}. Issue #{issue_2.to_reference} is mentioned but will not be closed.")
-      expect(page).to have_content("Issue #{issue_2.to_reference} is mentioned but will not be closed.")
+      expect(page).to have_content("Closes #{issue_1.to_reference}")
+      expect(page).to have_content("Mentions #{issue_2.to_reference}")
     end
   end
 
@@ -92,7 +86,7 @@ feature 'Merge Request closing issues message', js: true do
 
     it 'displays closing issue message exactly one time' do
       wait_for_requests
-      expect(page).to have_content("Closes issues #{issue_1.to_reference} and #{issue_2.to_reference}", count: 1)
+      expect(page).to have_content("Closes #{issue_1.to_reference} and #{issue_2.to_reference}", count: 1)
     end
   end
 end

spec/features/merge_requests/merge_when_pipeline_succeeds_spec.rb

@@ -41,8 +41,8 @@ feature 'Merge When Pipeline Succeeds', :js do
         it 'activates the Merge when pipeline succeeds feature' do
           click_button "Merge when pipeline succeeds"
 
-          expect(page).to have_content "Set by #{user.name} to be merged automatically when the pipeline succeeds."
-          expect(page).to have_content "The source branch will not be removed."
+          expect(page).to have_content "Set by #{user.name} to be merged automatically when the pipeline succeeds"
+          expect(page).to have_content "The source branch will not be removed"
           expect(page).to have_selector ".js-cancel-auto-merge"
           visit_merge_request(merge_request) # Needed to refresh the page
           expect(page).to have_content /enabled an automatic merge when the pipeline for \h{8} succeeds/i
@@ -97,11 +97,11 @@ feature 'Merge When Pipeline Succeeds', :js do
 
     describe 'enabling Merge when pipeline succeeds via dropdown' do
       it 'activates the Merge when pipeline succeeds feature' do
-        click_button 'Select merge moment'
+        find('.js-merge-moment').click
         click_link 'Merge when pipeline succeeds'
 
-        expect(page).to have_content "Set by #{user.name} to be merged automatically when the pipeline succeeds."
-        expect(page).to have_content "The source branch will not be removed."
+        expect(page).to have_content "Set by #{user.name} to be merged automatically when the pipeline succeeds"
+        expect(page).to have_content "The source branch will not be removed"
         expect(page).to have_link "Cancel automatic merge"
       end
     end

spec/features/merge_requests/only_allow_merge_if_build_succeeds_spec.rb

@@ -43,7 +43,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t
           wait_for_requests
 
           expect(page).to have_button 'Merge when pipeline succeeds'
-          expect(page).not_to have_button 'Select merge moment'
+          expect(page).not_to have_button '.js-merge-moment'
         end
       end
 
@@ -56,7 +56,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t
           wait_for_requests
 
           expect(page).to have_css('button[disabled="disabled"]', text: 'Merge')
-          expect(page).to have_content('Please retry the job or push a new commit to fix the failure.')
+          expect(page).to have_content('Please retry the job or push a new commit to fix the failure')
         end
       end
 
@@ -69,7 +69,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t
           wait_for_requests
 
           expect(page).not_to have_button 'Merge'
-          expect(page).to have_content('Please retry the job or push a new commit to fix the failure.')
+          expect(page).to have_content('Please retry the job or push a new commit to fix the failure')
         end
       end
 
@@ -113,7 +113,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t
 
           expect(page).to have_button 'Merge when pipeline succeeds'
 
-          click_button 'Select merge moment'
+          page.find('.js-merge-moment').click
           expect(page).to have_content 'Merge immediately'
         end
       end

spec/javascripts/vue_mr_widget/components/mr_widget_code_quality_spec.js

@@ -31,11 +31,11 @@ describe('Merge Request Code Quality', () => {
     });
 
     it('should render loading indicator', () => {
-      expect(vm.$el.textContent.trim()).toEqual('Loading codeclimate report.');
+      expect(vm.$el.textContent.trim()).toEqual('Loading codeclimate report');
     });
   });
 
-  describe('with successfull request', () => {
+  describe('with successful request', () => {
     const interceptor = (request, next) => {
       if (request.url === 'head.json') {
         next(request.respondWith(JSON.stringify(headIssues), {
@@ -66,8 +66,8 @@ describe('Merge Request Code Quality', () => {
     it('should render provided data', (done) => {
       setTimeout(() => {
         expect(
-          vm.$el.querySelector('span:nth-child(2)').textContent.trim(),
-        ).toEqual('Code quality improved on 1 point and degraded on 1 point.');
+          vm.$el.querySelector('.js-code-text').textContent.trim(),
+        ).toEqual('Code quality improved on 1 point and degraded on 1 point');
         done();
       }, 0);
     });
@@ -79,8 +79,8 @@ describe('Merge Request Code Quality', () => {
 
           Vue.nextTick(() => {
             expect(
-              vm.$el.querySelector('span:nth-child(2)').textContent.trim(),
-            ).toEqual('Code quality improved on 1 point.');
+              vm.$el.querySelector('.js-code-text').textContent.trim(),
+            ).toEqual('Code quality improved on 1 point');
             done();
           });
         }, 0);
@@ -89,11 +89,10 @@ describe('Merge Request Code Quality', () => {
       it('should only render information about added issues', (done) => {
         setTimeout(() => {
           vm.mr.codeclimateMetrics.resolvedIssues = [];
-
           Vue.nextTick(() => {
             expect(
-              vm.$el.querySelector('span:nth-child(2)').textContent.trim(),
-            ).toEqual('Code quality degraded on 1 point.');
+              vm.$el.querySelector('.js-code-text').textContent.trim(),
+            ).toEqual('Code quality degraded on 1 point');
             done();
           });
         }, 0);
@@ -130,7 +129,7 @@ describe('Merge Request Code Quality', () => {
     });
   });
 
-  describe('with empty successfull request', () => {
+  describe('with empty successful request', () => {
     const emptyInterceptor = (request, next) => {
       if (request.url === 'head.json') {
         next(request.respondWith(JSON.stringify([]), {
@@ -161,8 +160,8 @@ describe('Merge Request Code Quality', () => {
     it('should render provided data', (done) => {
       setTimeout(() => {
         expect(
-          vm.$el.querySelector('span:nth-child(2)').textContent.trim(),
-        ).toEqual('No changes to code quality.');
+          vm.$el.querySelector('.js-code-text').textContent.trim(),
+        ).toEqual('No changes to code quality');
         done();
       }, 0);
     });
@@ -198,7 +197,7 @@ describe('Merge Request Code Quality', () => {
 
     it('should render error indicator', (done) => {
       setTimeout(() => {
-        expect(vm.$el.textContent.trim()).toEqual('Failed to load codeclimate report.');
+        expect(vm.$el.textContent.trim()).toEqual('Failed to load codeclimate report');
         done();
       }, 0);
     });

spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js

 import Vue from 'vue';
 import deploymentComponent from '~/vue_merge_request_widget/components/mr_widget_deployment';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
-import { statusIconEntityMap } from '~/vue_shared/ci_status_icons';
 
 const deploymentMockData = [
   {
@@ -43,15 +42,6 @@ describe('MRWidgetDeployment', () => {
     });
   });
 
-  describe('computed', () => {
-    describe('svg', () => {
-      it('should have the proper SVG icon', () => {
-        const vm = createComponent(deploymentMockData);
-        expect(vm.svg).toEqual(statusIconEntityMap.icon_status_success);
-      });
-    });
-  });
-
   describe('methods', () => {
     let vm = createComponent();
     const deployment = deploymentMockData[0];

spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js

@@ -52,10 +52,10 @@ const createComponent = () => {
 };
 
 const messages = {
-  loadingMetrics: 'Loading deployment statistics.',
+  loadingMetrics: 'Loading deployment statistics',
   hasMetrics: 'Memory usage unchanged from 0MB to 0MB',
-  loadFailed: 'Failed to load deployment statistics.',
-  metricsUnavailable: 'Deployment statistics are not available currently.',
+  loadFailed: 'Failed to load deployment statistics',
+  metricsUnavailable: 'Deployment statistics are not available currently',
 };
 
 describe('MemoryUsage', () => {

spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js

@@ -83,13 +83,12 @@ describe('MRWidgetPipeline', () => {
       expect(el.querySelectorAll('.ci-status-icon.ci-status-icon-success').length).toEqual(1);
       expect(el.querySelector('.pipeline-id').textContent).toContain(`#${pipeline.id}`);
       expect(el.innerText).toContain('passed');
-      expect(el.innerText).toContain('with stages');
       expect(el.querySelector('.pipeline-id').getAttribute('href')).toEqual(pipeline.path);
       expect(el.querySelectorAll('.stage-container').length).toEqual(2);
       expect(el.querySelector('.js-ci-error')).toEqual(null);
       expect(el.querySelector('.js-commit-link').getAttribute('href')).toEqual(pipeline.commit.commit_path);
       expect(el.querySelector('.js-commit-link').textContent).toContain(pipeline.commit.short_id);
-      expect(el.querySelector('.js-mr-coverage').textContent).toContain(`Coverage ${pipeline.coverage}%.`);
+      expect(el.querySelector('.js-mr-coverage').textContent).toContain(`Coverage ${pipeline.coverage}%`);
     });
 
     it('should list single stage', (done) => {
@@ -97,7 +96,6 @@ describe('MRWidgetPipeline', () => {
 
       Vue.nextTick(() => {
         expect(el.querySelectorAll('.stage-container button').length).toEqual(1);
-        expect(el.innerText).toContain('with stage');
         done();
       });
     });

spec/javascripts/vue_mr_widget/components/mr_widget_related_links_spec.js

@@ -55,33 +55,17 @@ describe('MRWidgetRelatedLinks', () => {
     };
     const vm = createComponent(data);
 
-    describe('hasMultipleIssues', () => {
-      it('should return true if the given text has multiple issues', () => {
-        expect(vm.hasMultipleIssues(data.relatedLinks.closing)).toBeTruthy();
+    describe('closesText', () => {
+      it('returns correct text for open merge request', () => {
+        expect(vm.closesText('open')).toEqual('Closes');
       });
 
-      it('should return false if the given text has one issue', () => {
-        expect(vm.hasMultipleIssues(data.relatedLinks.mentioned)).toBeFalsy();
-      });
-    });
-
-    describe('issueLabel', () => {
-      it('should return true if the given text has multiple issues', () => {
-        expect(vm.issueLabel('closing')).toEqual('issues');
-      });
-
-      it('should return false if the given text has one issue', () => {
-        expect(vm.issueLabel('mentioned')).toEqual('issue');
-      });
-    });
-
-    describe('verbLabel', () => {
-      it('should return true if the given text has multiple issues', () => {
-        expect(vm.verbLabel('closing')).toEqual('are');
+      it('returns correct text for closed merge request', () => {
+        expect(vm.closesText('closed')).toEqual('Did not close');
       });
 
-      it('should return false if the given text has one issue', () => {
-        expect(vm.verbLabel('mentioned')).toEqual('is');
+      it('returns correct tense for merged request', () => {
+        expect(vm.closesText('merged')).toEqual('Closed');
       });
     });
   });
@@ -95,8 +79,8 @@ describe('MRWidgetRelatedLinks', () => {
       });
       const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim();
 
-      expect(content).toContain('Closes issues #23 and #42');
-      expect(content).not.toContain('mentioned');
+      expect(content).toContain('Closes #23 and #42');
+      expect(content).not.toContain('Mentions');
     });
 
     it('should have only have mentioned issues text', () => {
@@ -106,8 +90,7 @@ describe('MRWidgetRelatedLinks', () => {
         },
       });
 
-      expect(vm.$el.innerText).toContain('issue #7');
-      expect(vm.$el.innerText).toContain('is mentioned but will not be closed.');
+      expect(vm.$el.innerText).toContain('Mentions #7');
       expect(vm.$el.innerText).not.toContain('Closes');
     });
 
@@ -120,9 +103,8 @@ describe('MRWidgetRelatedLinks', () => {
       });
       const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim();
 
-      expect(content).toContain('Closes issue #7.');
-      expect(content).toContain('issues #23 and #42');
-      expect(content).toContain('are mentioned but will not be closed.');
+      expect(content).toContain('Closes #7');
+      expect(content).toContain('Mentions #23 and #42');
     });
 
     it('should have assing issues link', () => {

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

@@ -12,7 +12,7 @@ describe('MRWidgetArchived', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(el.querySelector('button').classList.contains('btn-success')).toBeTruthy();
       expect(el.querySelector('button').disabled).toBeTruthy();
-      expect(el.innerText).toContain('This project is archived, write access has been disabled.');
+      expect(el.innerText).toContain('This project is archived, write access has been disabled');
     });
   });
 });

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

@@ -24,8 +24,8 @@ describe('MRWidgetAutoMergeFailed', () => {
 
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('This merge request failed to be merged automatically.');
+      expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeFalsy();
+      expect(vm.$el.innerText).toContain('This merge request failed to be merged automatically');
       expect(vm.$el.innerText).toContain(mergeError);
     });
   });

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

@@ -12,7 +12,7 @@ describe('MRWidgetChecking', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(el.querySelector('button').classList.contains('btn-success')).toBeTruthy();
       expect(el.querySelector('button').disabled).toBeTruthy();
-      expect(el.innerText).toContain('Checking ability to merge automatically.');
+      expect(el.innerText).toContain('Checking ability to merge automatically');
       expect(el.querySelector('i')).toBeDefined();
     });
   });

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

@@ -29,15 +29,16 @@ describe('MRWidgetConflicts', () => {
   describe('template', () => {
     it('should have correct elements', () => {
       const el = createComponent().$el;
-      const resolveButton = el.querySelectorAll('.btn-group .btn')[0];
-      const mergeLocallyButton = el.querySelectorAll('.btn-group .btn')[1];
+      const resolveButton = el.querySelector('.js-resolve-conflicts-button');
+      const mergeButton = el.querySelector('.mr-widget-body .btn');
+      const mergeLocallyButton = el.querySelector('.js-merge-locally-button');
 
-      expect(el.textContent).toContain('There are merge conflicts.');
+      expect(el.textContent).toContain('There are merge conflicts');
       expect(el.textContent).not.toContain('ask someone with write access');
       expect(el.querySelector('.btn-success').disabled).toBeTruthy();
-      expect(el.querySelectorAll('.btn-group .btn').length).toBe(2);
       expect(resolveButton.textContent).toContain('Resolve conflicts');
       expect(resolveButton.getAttribute('href')).toEqual(path);
+      expect(mergeButton.textContent).toContain('Merge');
       expect(mergeLocallyButton.textContent).toContain('Merge locally');
     });
 
@@ -59,8 +60,8 @@ describe('MRWidgetConflicts', () => {
       it('should not have action buttons', (done) => {
         Vue.nextTick(() => {
           expect(vm.$el.querySelectorAll('.btn').length).toBe(1);
-          expect(vm.$el.querySelector('a.js-resolve-conflicts-button')).toEqual(null);
-          expect(vm.$el.querySelector('a.js-merge-locally-button')).toEqual(null);
+          expect(vm.$el.querySelector('.js-resolve-conflicts-button')).toEqual(null);
+          expect(vm.$el.querySelector('.js-merge-locally-button')).toEqual(null);
           done();
         });
       });

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

@@ -94,7 +94,7 @@ describe('MRWidgetFailedToMerge', () => {
       expect(el.querySelector('button').innerText).toContain('Merge');
       expect(el.querySelector('.js-refresh-button').innerText).toContain('Refresh now');
       expect(el.querySelector('.js-refresh-label')).toEqual(null);
-      expect(el.innerText).not.toContain('Refreshing now...');
+      expect(el.innerText).not.toContain('Refreshing now');
       setTimeout(() => {
         expect(el.innerText).toContain('Refreshing in 9 seconds');
         done();
@@ -115,7 +115,7 @@ describe('MRWidgetFailedToMerge', () => {
       vm.refresh();
       Vue.nextTick(() => {
         expect(el.innerText).not.toContain('Merge failed. Refreshing');
-        expect(el.innerText).toContain('Refreshing now...');
+        expect(el.innerText).toContain('Refreshing now');
       });
     });
   });

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

@@ -162,10 +162,10 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
 
     it('should have correct elements', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.innerText).toContain('to be merged automatically when the pipeline succeeds.');
+      expect(el.innerText).toContain('to be merged automatically when the pipeline succeeds');
       expect(el.innerText).toContain('The changes will be merged into');
       expect(el.innerText).toContain(targetBranch);
-      expect(el.innerText).toContain('The source branch will not be removed.');
+      expect(el.innerText).toContain('The source branch will not be removed');
       expect(el.querySelector('.js-cancel-auto-merge').innerText).toContain('Cancel automatic merge');
       expect(el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeFalsy();
       expect(el.querySelector('.js-remove-source-branch').innerText).toContain('Remove source branch');
@@ -186,8 +186,8 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
 
       Vue.nextTick(() => {
         const normalizedText = el.innerText.replace(/\s+/g, ' ');
-        expect(normalizedText).toContain('The source branch will be removed.');
-        expect(normalizedText).not.toContain('The source branch will not be removed.');
+        expect(normalizedText).toContain('The source branch will be removed');
+        expect(normalizedText).not.toContain('The source branch will not be removed');
         done();
       });
     });

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

@@ -142,19 +142,19 @@ describe('MRWidgetMerged', () => {
       expect(el.querySelector('.js-mr-widget-author')).toBeDefined();
       expect(el.innerText).toContain('The changes were merged into');
       expect(el.innerText).toContain(targetBranch);
-      expect(el.innerText).toContain('The source branch has been removed.');
+      expect(el.innerText).toContain('The source branch has been removed');
       expect(el.innerText).toContain('Revert');
       expect(el.innerText).toContain('Cherry-pick');
-      expect(el.innerText).not.toContain('You can remove source branch now.');
-      expect(el.innerText).not.toContain('The source branch is being removed.');
+      expect(el.innerText).not.toContain('You can remove source branch now');
+      expect(el.innerText).not.toContain('The source branch is being removed');
     });
 
     it('should not show source branch removed text', (done) => {
       vm.mr.sourceBranchRemoved = false;
 
       Vue.nextTick(() => {
-        expect(el.innerText).toContain('You can remove source branch now.');
-        expect(el.innerText).not.toContain('The source branch has been removed.');
+        expect(el.innerText).toContain('You can remove source branch now');
+        expect(el.innerText).not.toContain('The source branch has been removed');
         done();
       });
     });
@@ -164,9 +164,9 @@ describe('MRWidgetMerged', () => {
       vm.mr.sourceBranchRemoved = false;
 
       Vue.nextTick(() => {
-        expect(el.innerText).toContain('The source branch is being removed.');
-        expect(el.innerText).not.toContain('You can remove source branch now.');
-        expect(el.innerText).not.toContain('The source branch has been removed.');
+        expect(el.innerText).toContain('The source branch is being removed');
+        expect(el.innerText).not.toContain('You can remove source branch now');
+        expect(el.innerText).not.toContain('The source branch has been removed');
         done();
       });
     });

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

@@ -49,7 +49,7 @@ describe('MRWidgetMissingBranch', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy();
       expect(content).toContain('source branch does not exist.');
-      expect(content).toContain('Please restore the source branch or use a different source branch.');
+      expect(content).toContain('Please restore it or use a different source branch');
     });
   });
 });

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

@@ -11,7 +11,7 @@ describe('MRWidgetNotAllowed', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
       expect(vm.$el.innerText).toContain('Ready to be merged automatically.');
-      expect(vm.$el.innerText).toContain('Ask someone with write access to this repository to merge this request.');
+      expect(vm.$el.innerText).toContain('Ask someone with write access to this repository to merge this request');
     });
   });
 });

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

@@ -10,7 +10,7 @@ describe('MRWidgetPipelineBlocked', () => {
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('Pipeline blocked. The pipeline for this merge request requires a manual action to proceed.');
+      expect(vm.$el.innerText).toContain('Pipeline blocked. The pipeline for this merge request requires a manual action to proceed');
     });
   });
 });

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

@@ -10,7 +10,7 @@ describe('MRWidgetPipelineFailed', () => {
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure.');
+      expect(vm.$el.innerText).toContain('The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure');
     });
   });
 });

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

@@ -72,7 +72,7 @@ describe('MRWidgetReadyToMerge', () => {
       const withDesc = 'Include description in commit message';
       const withoutDesc = "Don't include description in commit message";
 
-      it('should return message wit description', () => {
+      it('should return message with description', () => {
         expect(vm.commitMessageLinkTitle).toEqual(withDesc);
       });
 

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

@@ -10,7 +10,7 @@ describe('MRWidgetSHAMismatch', () => {
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('The source branch HEAD has recently changed. Please reload the page and review the changes before merging.');
+      expect(vm.$el.innerText).toContain('The source branch HEAD has recently changed. Please reload the page and review the changes before merging');
     });
   });
 });

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

@@ -78,7 +78,7 @@ describe('MRWidgetWIP', () => {
 
     it('should have correct elements', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.innerText).toContain('This merge request is currently Work In Progress and therefore unable to merge');
+      expect(el.innerText).toContain('This is a Work in Progress');
       expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy();
       expect(el.querySelector('button').innerText).toContain('Merge');
       expect(el.querySelector('.js-remove-wip').innerText).toContain('Resolve WIP status');

spec/javascripts/vue_mr_widget/mock_data.js

@@ -30,6 +30,7 @@ export default {
   "merge_user_id": null,
   "merge_when_pipeline_succeeds": false,
   "source_branch": "daaaa",
+  "source_branch_link": "daaaa",
   "source_project_id": 19,
   "target_branch": "master",
   "target_project_id": 19,