app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js

@@ -16,6 +16,7 @@ const stateToComponentMap = {
   mergeWhenPipelineSucceeds: 'mr-widget-merge-when-pipeline-succeeds',
   failedToMerge: 'mr-widget-failed-to-merge',
   autoMergeFailed: 'mr-widget-auto-merge-failed',
+  shaMismatch: 'mr-widget-sha-mismatch',
 };
 const statesToShowHelpWidget = [

app/assets/javascripts/vue_shared/ci_action_icons.js

@@ -3,24 +3,19 @@ import retrySVG from 'icons/_icon_action_retry.svg';
 import playSVG from 'icons/_icon_action_play.svg';
 import stopSVG from 'icons/_icon_action_stop.svg';
+/**
+ * For the provided action returns the respective SVG
+ *
+ * @param  {String} action
+ * @return {SVG|String}
+ */
 export default function getActionIcon(action) {
-  let icon;
-  switch (action) {
-    case 'icon_action_cancel':
-      icon = cancelSVG;
-      break;
-    case 'icon_action_retry':
-      icon = retrySVG;
-      break;
-    case 'icon_action_play':
-      icon = playSVG;
-      break;
-    case 'icon_action_stop':
-      icon = stopSVG;
-      break;
-    default:
-      icon = '';
-  }
-  return icon;
+  const icons = {
+    icon_action_cancel: cancelSVG,
+    icon_action_play: playSVG,
+    icon_action_retry: retrySVG,
+    icon_action_stop: stopSVG,
+  };
+  return icons[action] || '';
 }

app/assets/javascripts/vue_shared/ci_status_icons.js

@@ -41,15 +41,3 @@ export const statusIconEntityMap = {
   icon_status_success: SUCCESS_SVG,
   icon_status_warning: WARNING_SVG,
 };
-
-export const statusCssClasses = {
-  icon_status_canceled: 'canceled',
-  icon_status_created: 'created',
-  icon_status_failed: 'failed',
-  icon_status_manual: 'manual',
-  icon_status_pending: 'pending',
-  icon_status_running: 'running',
-  icon_status_skipped: 'skipped',
-  icon_status_success: 'success',
-  icon_status_warning: 'warning',
-};

app/assets/javascripts/vue_shared/components/ci_badge_link.vue

+<script>
+import ciIcon from './ci_icon.vue';
+/**
+ * Renders CI Badge link with CI icon and status text based on
+ * API response shared between all places where it is used.
+ *
+ * Receives status object containing:
+ * status: {
+ *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+ *   group:"running" // used for CSS class
+ *   icon: "icon_status_running" // used to render the icon
+ *   label:"running" // used for potential tooltip
+ *   text:"running" // text rendered
+ * }
+ *
+ * Used in:
+ * - Pipelines table - first column
+ * - Jobs table - first column
+ * - Pipeline show view - header
+ * - Job show view - header
+ * - MR widget
+ */
+
+export default {
+  props: {
+    status: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  components: {
+    ciIcon,
+  },
+
+  computed: {
+    cssClass() {
+      const className = this.status.group;
+
+      return className ? `ci-status ci-${this.status.group}` : 'ci-status';
+    },
+  },
+};
+</script>
+<template>
+  <a
+    :href="status.details_path"
+    :class="cssClass">
+    <ci-icon :status="status" />
+    {{status.text}}
+  </a>
+</template>

app/assets/javascripts/vue_shared/components/ci_icon.vue

 <script>
-  import { statusIconEntityMap, statusCssClasses } from '../../vue_shared/ci_status_icons';
+  import { statusIconEntityMap } from '../ci_status_icons';
+  /**
+   * Renders CI icon based on API response shared between all places where it is used.
+   *
+   * Receives status object containing:
+   * status: {
+   *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+   *   group:"running" // used for CSS class
+   *   icon: "icon_status_running" // used to render the icon
+   *   label:"running" // used for potential tooltip
+   *   text:"running" // text rendered
+   * }
+   *
+   * Used in:
+   * - Pipelines table Badge
+   * - Pipelines table mini graph
+   * - Pipeline graph
+   * - Pipeline show view badge
+   * - Jobs table
+   * - Jobs show view header
+   * - Jobs show view sidebar
+   */
   export default {
     props: {
       status: {
@@ -15,7 +36,7 @@
       },
       cssClass() {
-        const status = statusCssClasses[this.status.icon];
+        const status = this.status.group;
         return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
       },
     },

app/assets/javascripts/vue_shared/components/commit.js

 import commitIconSvg from 'icons/_icon_commit.svg';
+import userAvatarLink from './user_avatar/user_avatar_link.vue';
 export default {
   props: {
@@ -110,6 +111,9 @@ export default {
     return { commitIconSvg };
   },
+  components: {
+    userAvatarLink,
+  },
   template: `
     <div class="branch-commit">
@@ -119,30 +123,28 @@ export default {
       </div>
       <a v-if="hasCommitRef"
-        class="monospace branch-name"
+        class="ref-name"
         :href="commitRef.ref_url">
         {{commitRef.name}}
       </a>
       <div v-html="commitIconSvg" class="commit-icon js-commit-icon"></div>
-      <a class="commit-id monospace"
+      <a class="commit-sha"
         :href="commitUrl">
         {{shortSha}}
       </a>
       <p class="commit-title">
         <span v-if="title">
-          <a v-if="hasAuthor"
+          <user-avatar-link
+            v-if="hasAuthor"
             class="avatar-image-container"
-            :href="author.web_url">
-            <img
-              class="avatar has-tooltip s20"
-              :src="author.avatar_url"
-              :alt="userImageAltDescription"
-              :title="author.username" />
-          </a>
-
+            :link-href="author.web_url"
+            :img-src="author.avatar_url"
+            :img-alt="userImageAltDescription"
+            :tooltip-text="author.username"
+          />
           <a class="commit-row-message"
             :href="commitUrl">
             {{title}}

app/assets/javascripts/vue_shared/components/pipeline_status_icon.js

-import { statusClassToSvgMap } from '../pipeline_svg_icons';
-
-export default {
-  name: 'PipelineStatusIcon',
-  props: {
-    pipelineStatus: { type: Object, required: true, default: () => ({}) },
-  },
-  computed: {
-    svg() {
-      return statusClassToSvgMap[this.pipelineStatus.icon];
-    },
-    statusClass() {
-      return `ci-status-icon ci-status-icon-${this.pipelineStatus.group}`;
-    },
-  },
-  template: `
-    <div :class="statusClass">
-      <a class="icon-link" :href="pipelineStatus.details_path">
-        <span v-html="svg" aria-hidden="true"></span>
-      </a>
-    </div>
-  `,
-};

app/assets/javascripts/vue_shared/components/pipelines_table_row.js

@@ -2,7 +2,7 @@
 import AsyncButtonComponent from '../../pipelines/components/async_button.vue';
 import PipelinesActionsComponent from '../../pipelines/components/pipelines_actions';
 import PipelinesArtifactsComponent from '../../pipelines/components/pipelines_artifacts';
-import PipelinesStatusComponent from '../../pipelines/components/status';
+import ciBadge from './ci_badge_link.vue';
 import PipelinesStageComponent from '../../pipelines/components/stage.vue';
 import PipelinesUrlComponent from '../../pipelines/components/pipeline_url';
 import PipelinesTimeagoComponent from '../../pipelines/components/time_ago';
@@ -39,7 +39,7 @@ export default {
     'commit-component': CommitComponent,
     'dropdown-stage': PipelinesStageComponent,
     'pipeline-url': PipelinesUrlComponent,
-    'status-scope': PipelinesStatusComponent,
+    ciBadge,
     'time-ago': PipelinesTimeagoComponent,
   },
@@ -196,11 +196,20 @@ export default {
       return '';
     },
+
+    pipelineStatus() {
+      if (this.pipeline.details && this.pipeline.details.status) {
+        return this.pipeline.details.status;
+      }
+      return {};
+    },
   },
   template: `
     <tr class="commit">
-      <status-scope :pipeline="pipeline"/>
+      <td class="commit-link">
+        <ci-badge :status="pipelineStatus"/>
+      </td>
       <pipeline-url :pipeline="pipeline"></pipeline-url>

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue

+<script>
+
+/* This is a re-usable vue component for rendering a user avatar that
+  does not need to link to the user's profile. The image and an optional
+  tooltip can be configured by props passed to this component.
+
+  Sample configuration:
+
+  <user-avatar-image
+    :img-src="userAvatarSrc"
+    :img-alt="tooltipText"
+    :tooltip-text="tooltipText"
+    tooltip-placement="top"
+  />
+
+*/
+
+import defaultAvatarUrl from 'images/no_avatar.png';
+import TooltipMixin from '../../mixins/tooltip';
+
+export default {
+  name: 'UserAvatarImage',
+  mixins: [TooltipMixin],
+  props: {
+    imgSrc: {
+      type: String,
+      required: false,
+      default: defaultAvatarUrl,
+    },
+    cssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgAlt: {
+      type: String,
+      required: false,
+      default: 'user avatar',
+    },
+    size: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+    tooltipText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+  },
+  computed: {
+    tooltipContainer() {
+      return this.tooltipText ? 'body' : null;
+    },
+    avatarSizeClass() {
+      return `s${this.size}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <img
+    class="avatar"
+    :class="[avatarSizeClass, cssClasses]"
+    :src="imgSrc"
+    :width="size"
+    :height="size"
+    :alt="imgAlt"
+    :data-container="tooltipContainer"
+    :data-placement="tooltipPlacement"
+    :title="tooltipText"
+    ref="tooltip"
+  />
+</template>

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue

+<script>
+
+/* This is a re-usable vue component for rendering a user avatar wrapped in
+  a clickable link (likely to the user's profile). The link, image, and
+  tooltip can be configured by props passed to this component.
+
+  Sample configuration:
+
+  <user-avatar-link
+    :link-href="userProfileUrl"
+    :img-src="userAvatarSrc"
+    :img-alt="tooltipText"
+    :img-size="20"
+    :tooltip-text="tooltipText"
+    tooltip-placement="top"
+  />
+
+*/
+
+import userAvatarImage from './user_avatar_image.vue';
+
+export default {
+  name: 'UserAvatarLink',
+  components: {
+    userAvatarImage,
+  },
+  props: {
+    linkHref: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgSrc: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgAlt: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgCssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgSize: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+    tooltipText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+  },
+};
+</script>
+
+<template>
+  <a
+    class="user-avatar-link"
+    :href="linkHref">
+    <user-avatar-image
+      :img-src="imgSrc"
+      :img-alt="imgAlt"
+      :css-classes="imgCssClasses"
+      :size="imgSize"
+      :tooltip-text="tooltipText"
+      :tooltip-placement="tooltipPlacement"
+    />
+  </a>
+</template>

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue

+<script>
+
+/* This is a re-usable vue component for rendering a user avatar svg (typically
+  for a blank state). It will receive styles comparable to the user avatar,
+  but no image is loaded, it isn't wrapped in a link, and tooltips aren't supported.
+  The svg and avatar size can be configured by props passed to this component.
+
+  Sample configuration:
+
+  <user-avatar-svg
+    :svg="potentialApproverSvg"
+    :size="20"
+  />
+
+*/
+
+export default {
+  props: {
+    svg: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+  },
+  computed: {
+    avatarSizeClass() {
+      return `s${this.size}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <svg
+    :class="avatarSizeClass"
+    :height="size"
+    :width="size"
+    v-html="svg">
+  </svg>
+</template>
+

app/assets/javascripts/vue_shared/pipeline_svg_icons.js

-import canceledSvg from 'icons/_icon_status_canceled.svg';
-import createdSvg from 'icons/_icon_status_created.svg';
-import failedSvg from 'icons/_icon_status_failed.svg';
-import manualSvg from 'icons/_icon_status_manual.svg';
-import pendingSvg from 'icons/_icon_status_pending.svg';
-import runningSvg from 'icons/_icon_status_running.svg';
-import skippedSvg from 'icons/_icon_status_skipped.svg';
-import successSvg from 'icons/_icon_status_success.svg';
-import warningSvg from 'icons/_icon_status_warning.svg';
-
-import canceledBorderlessSvg from 'icons/_icon_status_canceled_borderless.svg';
-import createdBorderlessSvg from 'icons/_icon_status_created_borderless.svg';
-import failedBorderlessSvg from 'icons/_icon_status_failed_borderless.svg';
-import manualBorderlessSvg from 'icons/_icon_status_manual_borderless.svg';
-import pendingBorderlessSvg from 'icons/_icon_status_pending_borderless.svg';
-import runningBorderlessSvg from 'icons/_icon_status_running_borderless.svg';
-import skippedBorderlessSvg from 'icons/_icon_status_skipped_borderless.svg';
-import successBorderlessSvg from 'icons/_icon_status_success_borderless.svg';
-import warningBorderlessSvg from 'icons/_icon_status_warning_borderless.svg';
-
-export const statusClassToSvgMap = {
-  icon_status_canceled: canceledSvg,
-  icon_status_created: createdSvg,
-  icon_status_failed: failedSvg,
-  icon_status_manual: manualSvg,
-  icon_status_pending: pendingSvg,
-  icon_status_running: runningSvg,
-  icon_status_skipped: skippedSvg,
-  icon_status_success: successSvg,
-  icon_status_warning: warningSvg,
-};
-
-export const statusClassToBorderlessSvgMap = {
-  icon_status_canceled: canceledBorderlessSvg,
-  icon_status_created: createdBorderlessSvg,
-  icon_status_failed: failedBorderlessSvg,
-  icon_status_manual: manualBorderlessSvg,
-  icon_status_pending: pendingBorderlessSvg,
-  icon_status_running: runningBorderlessSvg,
-  icon_status_skipped: skippedBorderlessSvg,
-  icon_status_success: successBorderlessSvg,
-  icon_status_warning: warningBorderlessSvg,
-};

app/assets/stylesheets/framework/avatar.scss

@@ -10,6 +10,8 @@
   border-radius: $avatar_radius;
   border: 1px solid $avatar-border;
   &.s16 { @include avatar-size(16px, 6px); }
+  &.s18 { @include avatar-size(18px, 6px); }
+  &.s19 { @include avatar-size(19px, 6px); }
   &.s20 { @include avatar-size(20px, 7px); }
   &.s24 { @include avatar-size(24px, 8px); }
   &.s26 { @include avatar-size(26px, 8px); }

app/assets/stylesheets/framework/dropdowns.scss

@@ -97,7 +97,7 @@
   .fa-chevron-down {
     font-size: $dropdown-chevron-size;
     position: relative;
-    top: -3px;
+    top: -2px;
     margin-left: 5px;
   }

app/assets/stylesheets/framework/filters.scss

@@ -283,17 +283,10 @@
 .filtered-search-history-dropdown-toggle-button {
   flex: 1;
   width: auto;
-  padding-right: 10px;
-
   border-radius: 0;
-  border-top: 0;
-  border-left: 0;
-  border-bottom: 0;
+  border: 0;
   border-right: 1px solid $border-color;
-
   color: $gl-text-color-secondary;
-  line-height: 1;
-
   transition: color 0.1s linear;
   &:hover,
@@ -301,6 +294,17 @@
     color: $gl-text-color;
     border-color: $dropdown-input-focus-border;
     outline: none;
+
+    svg {
+      fill: $gl-text-color;
+    }
+  }
+
+  svg {
+    height: 14px;
+    width: 14px;
+    fill: $gl-text-color-secondary;
+    vertical-align: middle;
   }
   .dropdown-toggle-text {
@@ -312,11 +316,6 @@
       color: inherit;
     }
   }
-
-  .fa {
-    position: static;
-  }
-
 }
 .filtered-search-history-dropdown {

app/assets/stylesheets/framework/gfm.scss

@@ -2,7 +2,7 @@
  * Styles that apply to all GFM related forms.
  */
+.gfm-commit,
 .gfm-commit_range {
-  font-family: $monospace_font;
-  font-size: 90%;
+  @extend .commit-sha;
 }

app/assets/stylesheets/framework/header.scss

@@ -24,19 +24,23 @@ header {
   &.navbar-gitlab {
     padding: 0 16px;
-    z-index: 100;
+    z-index: 400;
     margin-bottom: 0;
     min-height: $header-height;
     background-color: $gray-light;
     border: none;
     border-bottom: 1px solid $border-color;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
     @media (max-width: $screen-xs-min) {
       padding: 0 16px;
     }
     &.with-horizontal-nav {
-      border-bottom: none;
+      border-color: transparent;
     }
     .container-fluid {
@@ -110,6 +114,16 @@ header {
     }
   }
+  .navbar-border {
+    height: 1px;
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background-color: $border-color;
+    opacity: 0;
+  }
+
   .global-dropdown {
     position: absolute;
     left: -10px;

app/assets/stylesheets/framework/icons.scss

@@ -65,3 +65,7 @@
     text-decoration: none;
   }
 }
+
+.user-avatar-link {
+  text-decoration: none;
+}

app/assets/stylesheets/framework/layout.scss

@@ -25,6 +25,10 @@ body {
 .content-wrapper {
   padding-bottom: 100px;
+
+  &:not(.page-with-layout-nav) {
+    margin-top: $header-height;
+  }
 }
 .container {

app/assets/stylesheets/framework/mobile.scss

@@ -112,7 +112,7 @@
     }
   }
-  .issue_edited_ago,
+  .issue-edited-ago,
   .note_edited_ago {
     display: none;
   }