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

Merge Request widget Improvements

Closes #33095

See merge request !12601

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

+import tooltip from '../../vue_shared/directives/tooltip';
+
 export default {
   name: 'MRWidgetAuthor',
   props: {
@@ -5,11 +7,14 @@ export default {
     showAuthorName: { type: Boolean, required: false, default: true },
     showAuthorTooltip: { type: Boolean, required: false, default: false },
   },
+  directives: {
+    tooltip,
+  },
   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

+import tooltip from '../../vue_shared/directives/tooltip';
 import '../../lib/utils/text_utility';
 export default {
@@ -5,6 +6,9 @@ export default {
   props: {
     mr: { type: Object, required: true },
   },
+  directives: {
+    tooltip,
+  },
   computed: {
     shouldShowCommitsBehindText() {
       return this.mr.divergedCommitsCount > 0;
@@ -29,18 +33,51 @@ export default {
   },
   template: `
     <div class="mr-source-target">
-      <div
-        v-if="mr.isOpen"
-        class="pull-right">
+      <div class="normal">
+        <strong>
+          Request to merge
+          <span
+            class="label-branch"
+            :class="{'label-truncated': isBranchTitleLong(mr.sourceBranch)}"
+            :title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
+            data-placement="bottom"
+            :v-tooltip="isBranchTitleLong(mr.sourceBranch)"
+            v-html="mr.sourceBranchLink"></span>
+          <button
+            v-tooltip
+            class="btn btn-transparent btn-clipboard"
+            data-title="Copy branch name to clipboard"
+            :data-clipboard-text="branchNameClipboardData">
+            <i
+              aria-hidden="true"
+              class="fa fa-clipboard"></i>
+          </button>
+          into
+          <span
+            class="label-branch"
+            :v-tooltip="isBranchTitleLong(mr.sourceBranch)"
+            :class="{'label-truncatedtooltip': isBranchTitleLong(mr.targetBranch)}"
+            :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
+            data-placement="bottom">
+            <a :href="mr.targetBranchTreePath">{{mr.targetBranch}}</a>
+          </span>
+        </strong>
+        <span
+          v-if="shouldShowCommitsBehindText"
+          class="diverged-commits-count">
+          (<a :href="mr.targetBranchPath">{{mr.divergedCommitsCount}} {{commitsText}} behind</a>)
+        </span>
+      </div>
+      <div v-if="mr.isOpen">
         <a
           href="#modal_merge_info"
           data-toggle="modal"
-          class="btn inline btn-grouped btn-sm">
+          class="btn btn-small inline">
           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 btn-xs dropdown-toggle"
             data-toggle="dropdown"
             aria-label="Download as"
             role="button">
@@ -69,38 +106,6 @@ export default {
           </ul>
         </span>
       </div>
-      <div class="normal">
-        <strong>
-          Request to merge
-          <span
-            class="label-branch"
-            :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.sourceBranch)}"
-            :title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
-            data-placement="bottom"
-            v-html="mr.sourceBranchLink"></span>
-          <button
-            class="btn btn-transparent btn-clipboard has-tooltip"
-            data-title="Copy branch name to clipboard"
-            :data-clipboard-text="branchNameClipboardData">
-            <i
-              aria-hidden="true"
-              class="fa fa-clipboard"></i>
-          </button>
-          into
-          <span
-            class="label-branch"
-            :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.targetBranch)}"
-            :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
-            data-placement="bottom">
-            <a :href="mr.targetBranchTreePath">{{mr.targetBranch}}</a>
-          </span>
-        </strong>
-        <span
-          v-if="shouldShowCommitsBehindText"
-          class="diverged-commits-count">
-          (<a :href="mr.targetBranchPath">{{mr.divergedCommitsCount}} {{commitsText}} behind</a>)
-        </span>
-      </div>
     </div>
   `,
 };

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

@@ -29,58 +29,55 @@ 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">
-              <div
-                v-if="mr.pipeline.details.stages.length > 0"
-                v-for="stage in mr.pipeline.details.stages"
-                class="stage-container dropdown js-mini-pipeline-graph">
-                <pipeline-stage :stage="stage" />
-              </div>
-            </div>
+          <div 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">
+                <div
+                  v-if="mr.pipeline.details.stages.length > 0"
+                  v-for="stage in mr.pipeline.details.stages"
+                  class="stage-container dropdown js-mini-pipeline-graph">
+                  <pipeline-stage :stage="stage" />
+                </div>
+              </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,37 +2,32 @@ export default {
   name: 'MRWidgetRelatedLinks',
   props: {
     relatedLinks: { type: Object, required: true },
+    state: { type: String, required: false },
   },
   computed: {
     hasLinks() {
       const { closing, mentioned, assignToMe } = this.relatedLinks;
       return closing || mentioned || assignToMe;
     },
-  },
-  methods: {
-    hasMultipleIssues(text) {
-      return !text ? false : text.match(/<\/a> and <a/);
-    },
-    issueLabel(field) {
-      return this.hasMultipleIssues(this.relatedLinks[field]) ? 'issues' : 'issue';
-    },
-    verbLabel(field) {
-      return this.hasMultipleIssues(this.relatedLinks[field]) ? 'are' : 'is';
+    closesText() {
+      if (this.state === 'merged') {
+        return 'Closed';
+      }
+      if (this.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}} <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 tooltip from '../../../vue_shared/directives/tooltip';
+import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import statusIcon from '../mr_widget_status_icon';
 import eventHub from '../../event_hub';
 export default {
@@ -9,14 +12,19 @@ export default {
     mr: { type: Object, required: true },
     service: { type: Object, required: true },
   },
-  components: {
-    'mr-widget-author-and-time': mrWidgetAuthorTime,
-  },
   data() {
     return {
       isMakingRequest: false,
     };
   },
+  directives: {
+    tooltip,
+  },
+  components: {
+    'mr-widget-author-and-time': mrWidgetAuthorTime,
+    loadingIcon,
+    statusIcon,
+  },
   computed: {
     shouldShowRemoveSourceBranch() {
       const { sourceBranchRemoved, isRemovingSourceBranch, canRemoveSourceBranch } = this.mr;
@@ -55,75 +63,77 @@ 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"
+            v-tooltip
+            class="btn btn-close btn-xs"
+            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"
+            v-tooltip
+            class="btn btn-close btn-xs"
+            data-method="post"
+            :href="mr.revertInForkPath"
+            title="Revert this merge request in a new merge request">
+            Revert
+          </a>
+          <a
+            v-if="mr.canCherryPickInCurrentMR"
+            v-tooltip
+            class="btn btn-default btn-xs"
+            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"
+            v-tooltip
+            class="btn btn-default btn-xs"
+            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"
+              :disabled="isMakingRequest"
+              type="button"
+              class="btn btn-xs btn-default js-remove-branch-button">
+              Remove Source Branch
+            </button>
+          </p>
+          <p v-if="shouldShowSourceBranchRemoving">
+            <loading-icon inline />
+            <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 tooltip from '../../../vue_shared/directives/tooltip';
 import mrWidgetMergeHelp from '../../components/mr_widget_merge_help';
 export default {
@@ -5,30 +7,37 @@ export default {
   props: {
     mr: { type: Object, required: true },
   },
+  directives: {
+    tooltip,
+  },
   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
+            v-tooltip
+            class="fa fa-question-circle"
+            :title="message"
+            :aria-label="message"></i>
+        </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>