GITLAB_SHELL_VERSION

-9.4.0
+9.4.1

app/assets/javascripts/diffs/components/diff_expansion_cell.vue

@@ -212,12 +212,12 @@ export default {
 </script>
 
 <template>
-  <td :colspan="colspan">
+  <td :colspan="colspan" class="text-center">
     <div class="content js-line-expansion-content">
       <a
         v-if="canExpandUp"
         v-tooltip
-        class="cursor-pointer js-unfold unfold-icon"
+        class="cursor-pointer js-unfold unfold-icon d-inline-block pt-2 pb-2"
         data-placement="top"
         data-container="body"
         :title="__('Expand up')"
@@ -231,7 +231,7 @@ export default {
       <a
         v-if="canExpandDown"
         v-tooltip
-        class="cursor-pointer js-unfold-down has-tooltip unfold-icon"
+        class="cursor-pointer js-unfold-down has-tooltip unfold-icon d-inline-block pt-2 pb-2"
         data-placement="top"
         data-container="body"
         :title="__('Expand down')"

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -130,7 +130,7 @@ export default {
       return `\`${this.diffFile.file_path}\``;
     },
     isFileRenamed() {
-      return this.diffFile.viewer.name === diffViewerModes.renamed;
+      return this.diffFile.renamed_file;
     },
     isModeChanged() {
       return this.diffFile.viewer.name === diffViewerModes.mode_changed;

app/assets/javascripts/monitoring/components/charts/area.vue

@@ -12,6 +12,9 @@ import { graphDataValidatorForValues } from '../../utils';
 
 let debouncedResize;
 
+// TODO: Remove this component in favor of the more general time_series.vue
+// Please port all changes here to time_series.vue as well.
+
 export default {
   components: {
     GlAreaChart,

app/assets/javascripts/monitoring/components/charts/time_series.vue

+<script>
+import { __ } from '~/locale';
+import { mapState } from 'vuex';
+import { GlLink, GlButton } from '@gitlab/ui';
+import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
+import dateFormat from 'dateformat';
+import { debounceByAnimationFrame, roundOffFloat } from '~/lib/utils/common_utils';
+import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
+import Icon from '~/vue_shared/components/icon.vue';
+import { chartHeight, graphTypes, lineTypes, symbolSizes, dateFormats } from '../../constants';
+import { makeDataSeries } from '~/helpers/monitor_helper';
+import { graphDataValidatorForValues } from '../../utils';
+
+let debouncedResize;
+
+export default {
+  components: {
+    GlAreaChart,
+    GlLineChart,
+    GlButton,
+    GlChartSeriesLabel,
+    GlLink,
+    Icon,
+  },
+  inheritAttrs: false,
+  props: {
+    graphData: {
+      type: Object,
+      required: true,
+      validator: graphDataValidatorForValues.bind(null, false),
+    },
+    containerWidth: {
+      type: Number,
+      required: true,
+    },
+    deploymentData: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showBorder: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    thresholds: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      tooltip: {
+        title: '',
+        content: [],
+        commitUrl: '',
+        isDeployment: false,
+        sha: '',
+      },
+      width: 0,
+      height: chartHeight,
+      svgs: {},
+      primaryColor: null,
+    };
+  },
+  computed: {
+    ...mapState('monitoringDashboard', ['exportMetricsToCsvEnabled']),
+    chartData() {
+      // Transforms & supplements query data to render appropriate labels & styles
+      // Input: [{ queryAttributes1 }, { queryAttributes2 }]
+      // Output: [{ seriesAttributes1 }, { seriesAttributes2 }]
+      return this.graphData.queries.reduce((acc, query) => {
+        const { appearance } = query;
+        const lineType =
+          appearance && appearance.line && appearance.line.type
+            ? appearance.line.type
+            : lineTypes.default;
+        const lineWidth =
+          appearance && appearance.line && appearance.line.width
+            ? appearance.line.width
+            : undefined;
+        const areaStyle = {
+          opacity:
+            appearance && appearance.area && typeof appearance.area.opacity === 'number'
+              ? appearance.area.opacity
+              : undefined,
+        };
+
+        const series = makeDataSeries(query.result, {
+          name: this.formatLegendLabel(query),
+          lineStyle: {
+            type: lineType,
+            width: lineWidth,
+          },
+          showSymbol: false,
+          areaStyle: this.graphData.type === 'area-chart' ? areaStyle : undefined,
+        });
+
+        return acc.concat(series);
+      }, []);
+    },
+    chartOptions() {
+      return {
+        xAxis: {
+          name: __('Time'),
+          type: 'time',
+          axisLabel: {
+            formatter: date => dateFormat(date, dateFormats.timeOfDay),
+          },
+          axisPointer: {
+            snap: true,
+          },
+        },
+        yAxis: {
+          name: this.yAxisLabel,
+          axisLabel: {
+            formatter: num => roundOffFloat(num, 3).toString(),
+          },
+        },
+        series: this.scatterSeries,
+        dataZoom: this.dataZoomConfig,
+      };
+    },
+    dataZoomConfig() {
+      const handleIcon = this.svgs['scroll-handle'];
+
+      return handleIcon ? { handleIcon } : {};
+    },
+    earliestDatapoint() {
+      return this.chartData.reduce((acc, series) => {
+        const { data } = series;
+        const { length } = data;
+        if (!length) {
+          return acc;
+        }
+
+        const [first] = data[0];
+        const [last] = data[length - 1];
+        const seriesEarliest = first < last ? first : last;
+
+        return seriesEarliest < acc || acc === null ? seriesEarliest : acc;
+      }, null);
+    },
+    glChartComponent() {
+      const chartTypes = {
+        'area-chart': GlAreaChart,
+        'line-chart': GlLineChart,
+      };
+      return chartTypes[this.graphData.type] || GlAreaChart;
+    },
+    isMultiSeries() {
+      return this.tooltip.content.length > 1;
+    },
+    recentDeployments() {
+      return this.deploymentData.reduce((acc, deployment) => {
+        if (deployment.created_at >= this.earliestDatapoint) {
+          const { id, created_at, sha, ref, tag } = deployment;
+          acc.push({
+            id,
+            createdAt: created_at,
+            sha,
+            commitUrl: `${this.projectPath}/commit/${sha}`,
+            tag,
+            tagUrl: tag ? `${this.tagsPath}/${ref.name}` : null,
+            ref: ref.name,
+            showDeploymentFlag: false,
+          });
+        }
+
+        return acc;
+      }, []);
+    },
+    scatterSeries() {
+      return {
+        type: graphTypes.deploymentData,
+        data: this.recentDeployments.map(deployment => [deployment.createdAt, 0]),
+        symbol: this.svgs.rocket,
+        symbolSize: symbolSizes.default,
+        itemStyle: {
+          color: this.primaryColor,
+        },
+      };
+    },
+    yAxisLabel() {
+      return `${this.graphData.y_label}`;
+    },
+    csvText() {
+      const chartData = this.chartData[0].data;
+      const header = `timestamp,${this.graphData.y_label}\r\n`; // eslint-disable-line @gitlab/i18n/no-non-i18n-strings
+      return chartData.reduce((csv, data) => {
+        const row = data.join(',');
+        return `${csv}${row}\r\n`;
+      }, header);
+    },
+    downloadLink() {
+      const data = new Blob([this.csvText], { type: 'text/plain' });
+      return window.URL.createObjectURL(data);
+    },
+  },
+  watch: {
+    containerWidth: 'onResize',
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', debouncedResize);
+  },
+  created() {
+    debouncedResize = debounceByAnimationFrame(this.onResize);
+    window.addEventListener('resize', debouncedResize);
+    this.setSvg('rocket');
+    this.setSvg('scroll-handle');
+  },
+  methods: {
+    formatLegendLabel(query) {
+      return `${query.label}`;
+    },
+    formatTooltipText(params) {
+      this.tooltip.title = dateFormat(params.value, dateFormats.default);
+      this.tooltip.content = [];
+      params.seriesData.forEach(dataPoint => {
+        const [xVal, yVal] = dataPoint.value;
+        this.tooltip.isDeployment = dataPoint.componentSubType === graphTypes.deploymentData;
+        if (this.tooltip.isDeployment) {
+          const [deploy] = this.recentDeployments.filter(
+            deployment => deployment.createdAt === xVal,
+          );
+          this.tooltip.sha = deploy.sha.substring(0, 8);
+          this.tooltip.commitUrl = deploy.commitUrl;
+        } else {
+          const { seriesName, color } = dataPoint;
+          const value = yVal.toFixed(3);
+          this.tooltip.content.push({
+            name: seriesName,
+            value,
+            color,
+          });
+        }
+      });
+    },
+    setSvg(name) {
+      getSvgIconPathContent(name)
+        .then(path => {
+          if (path) {
+            this.$set(this.svgs, name, `path://${path}`);
+          }
+        })
+        .catch(e => {
+          // eslint-disable-next-line no-console, @gitlab/i18n/no-non-i18n-strings
+          console.error('SVG could not be rendered correctly: ', e);
+        });
+    },
+    onChartUpdated(chart) {
+      [this.primaryColor] = chart.getOption().color;
+    },
+    onResize() {
+      if (!this.$refs.chart) return;
+      const { width } = this.$refs.chart.$el.getBoundingClientRect();
+      this.width = width;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="prometheus-graph col-12 col-lg-6" :class="[showBorder ? 'p-2' : 'p-0']">
+    <div :class="{ 'prometheus-graph-embed w-100 p-3': showBorder }">
+      <div class="prometheus-graph-header">
+        <h5 class="prometheus-graph-title js-graph-title">{{ graphData.title }}</h5>
+        <gl-button
+          v-if="exportMetricsToCsvEnabled"
+          :href="downloadLink"
+          :title="__('Download CSV')"
+          :aria-label="__('Download CSV')"
+          style="margin-left: 200px;"
+          download="chart_metrics.csv"
+        >
+          {{ __('Download CSV') }}
+        </gl-button>
+        <div class="prometheus-graph-widgets js-graph-widgets">
+          <slot></slot>
+        </div>
+      </div>
+
+      <component
+        :is="glChartComponent"
+        ref="chart"
+        v-bind="$attrs"
+        :data="chartData"
+        :option="chartOptions"
+        :format-tooltip-text="formatTooltipText"
+        :thresholds="thresholds"
+        :width="width"
+        :height="height"
+        @updated="onChartUpdated"
+      >
+        <template v-if="tooltip.isDeployment">
+          <template slot="tooltipTitle">
+            {{ __('Deployed') }}
+          </template>
+          <div slot="tooltipContent" class="d-flex align-items-center">
+            <icon name="commit" class="mr-2" />
+            <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
+          </div>
+        </template>
+        <template v-else>
+          <template slot="tooltipTitle">
+            <div class="text-nowrap">
+              {{ tooltip.title }}
+            </div>
+          </template>
+          <template slot="tooltipContent">
+            <div
+              v-for="(content, key) in tooltip.content"
+              :key="key"
+              class="d-flex justify-content-between"
+            >
+              <gl-chart-series-label :color="isMultiSeries ? content.color : ''">
+                {{ content.name }}
+              </gl-chart-series-label>
+              <div class="prepend-left-32">
+                {{ content.value }}
+              </div>
+            </div>
+          </template>
+        </template>
+      </component>
+    </div>
+  </div>
+</template>

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -14,9 +14,9 @@ import { __, s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
-import MonitorAreaChart from './charts/area.vue';
+import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
+import MonitorTimeSeriesChart from './charts/time_series.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
-import PanelType from './panel_type.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
 import { sidebarAnimationDuration, timeWindows } from '../constants';
@@ -26,7 +26,7 @@ let sidebarMutationObserver;
 
 export default {
   components: {
-    MonitorAreaChart,
+    MonitorTimeSeriesChart,
     MonitorSingleStatChart,
     PanelType,
     GraphGroup,
@@ -141,6 +141,16 @@ export default {
       required: false,
       default: false,
     },
+    alertsEndpoint: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    prometheusAlertsAvailable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -449,11 +459,13 @@ export default {
             :clipboard-text="generateLink(groupData.group, graphData.title, graphData.y_label)"
             :graph-data="graphData"
             :dashboard-width="elWidth"
+            :alerts-endpoint="alertsEndpoint"
+            :prometheus-alerts-available="prometheusAlertsAvailable"
             :index="`${index}-${graphIndex}`"
           />
         </template>
         <template v-else>
-          <monitor-area-chart
+          <monitor-time-series-chart
             v-for="(graphData, graphIndex) in chartsWithData(groupData.metrics)"
             :key="graphIndex"
             :graph-data="graphData"
@@ -461,7 +473,7 @@ export default {
             :thresholds="getGraphAlertValues(graphData.queries)"
             :container-width="elWidth"
             :project-path="projectPath"
-            group-id="monitor-area-chart"
+            group-id="monitor-time-series-chart"
           >
             <div class="d-flex align-items-center">
               <alert-widget
@@ -503,7 +515,7 @@ export default {
                 </gl-dropdown-item>
               </gl-dropdown>
             </div>
-          </monitor-area-chart>
+          </monitor-time-series-chart>
         </template>
       </graph-group>
     </div>

app/assets/javascripts/monitoring/constants.js

@@ -8,6 +8,10 @@ export const graphTypes = {
   deploymentData: 'scatter',
 };
 
+export const symbolSizes = {
+  default: 14,
+};
+
 export const lineTypes = {
   default: 'solid',
 };
@@ -21,6 +25,11 @@ export const timeWindows = {
   oneWeek: __('1 week'),
 };
 
+export const dateFormats = {
+  timeOfDay: 'h:MM TT',
+  default: 'dd mmm yyyy, h:MMTT',
+};
+
 export const secondsIn = {
   thirtyMinutes: 60 * 30,
   threeHours: 60 * 60 * 3,

app/assets/javascripts/pages/projects/wikis/wikis.js

 import bp from '../../../breakpoints';
-import { parseQueryStringIntoObject } from '../../../lib/utils/common_utils';
-import { mergeUrlParams, redirectTo } from '../../../lib/utils/url_utility';
+import { s__, sprintf } from '~/locale';
 
 export default class Wikis {
   constructor() {
@@ -12,32 +11,37 @@ export default class Wikis {
       sidebarToggles[i].addEventListener('click', e => this.handleToggleSidebar(e));
     }
 
-    this.newWikiForm = document.querySelector('form.new-wiki-page');
-    if (this.newWikiForm) {
-      this.newWikiForm.addEventListener('submit', e => this.handleNewWikiSubmit(e));
+    this.isNewWikiPage = Boolean(document.querySelector('.js-new-wiki-page'));
+    this.editTitleInput = document.querySelector('form.wiki-form #wiki_title');
+    this.commitMessageInput = document.querySelector('form.wiki-form #wiki_message');
+    this.commitMessageI18n = this.isNewWikiPage
+      ? s__('WikiPageCreate|Create %{pageTitle}')
+      : s__('WikiPageEdit|Update %{pageTitle}');
+
+    if (this.editTitleInput) {
+      // Initialize the commit message on load
+      if (this.editTitleInput.value) this.setWikiCommitMessage(this.editTitleInput.value);
+
+      // Set the commit message as the page title is changed
+      this.editTitleInput.addEventListener('keyup', e => this.handleWikiTitleChange(e));
     }
 
     window.addEventListener('resize', () => this.renderSidebar());
     this.renderSidebar();
   }
 
-  handleNewWikiSubmit(e) {
-    if (!this.newWikiForm) return;
-
-    const slugInput = this.newWikiForm.querySelector('#new_wiki_path');
-
-    const slug = slugInput.value;
+  handleWikiTitleChange(e) {
+    this.setWikiCommitMessage(e.target.value);
+  }
 
-    if (slug.length > 0) {
-      const wikisPath = slugInput.getAttribute('data-wikis-path');
+  setWikiCommitMessage(rawTitle) {
+    let title = rawTitle;
 
-      // If the wiki is empty, we need to merge the current URL params to keep the "create" view.
-      const params = parseQueryStringIntoObject(window.location.search.substr(1));
-      const url = mergeUrlParams(params, `${wikisPath}/${slug}`);
-      redirectTo(url);
+    // Replace hyphens with spaces
+    if (title) title = title.replace(/-+/g, ' ');
 
-      e.preventDefault();
-    }
+    const newCommitMessage = sprintf(this.commitMessageI18n, { pageTitle: title });
+    this.commitMessageInput.value = newCommitMessage;
   }
 
   handleToggleSidebar(e) {

app/assets/javascripts/sidebar/components/assignees/assignee_avatar.vue

+<script>
+import { __, sprintf } from '~/locale';
+
+export default {
+  props: {
+    user: {
+      type: Object,
+      required: true,
+    },
+    imgSize: {
+      type: Number,
+      required: true,
+    },
+    issuableType: {
+      type: String,
+      required: false,
+      default: 'issue',
+    },
+  },
+  computed: {
+    assigneeAlt() {
+      return sprintf(__("%{userName}'s avatar"), { userName: this.user.name });
+    },
+    avatarUrl() {
+      return this.user.avatar || this.user.avatar_url || gon.default_avatar_url;
+    },
+    isMergeRequest() {
+      return this.issuableType === 'merge_request';
+    },
+    hasMergeIcon() {
+      return this.isMergeRequest && !this.user.can_merge;
+    },
+  },
+};
+</script>
+
+<template>
+  <span class="position-relative">
+    <img
+      :alt="assigneeAlt"
+      :src="avatarUrl"
+      :width="imgSize"
+      :class="`s${imgSize}`"
+      class="avatar avatar-inline m-0"
+    />
+    <i v-if="hasMergeIcon" aria-hidden="true" class="fa fa-exclamation-triangle merge-icon"></i>
+  </span>
+</template>

app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue

+<script>
+import { __, sprintf } from '~/locale';
+import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+import { joinPaths } from '~/lib/utils/url_utility';
+import AssigneeAvatar from './assignee_avatar.vue';
+
+export default {
+  components: {
+    AssigneeAvatar,
+    GlLink,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    user: {
+      type: Object,
+      required: true,
+    },
+    rootPath: {
+      type: String,
+      required: true,
+    },
+    tooltipPlacement: {
+      type: String,
+      default: 'bottom',
+      required: false,
+    },
+    tooltipHasName: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    issuableType: {
+      type: String,
+      default: 'issue',
+      required: false,
+    },
+  },
+  computed: {
+    cannotMerge() {
+      return this.issuableType === 'merge_request' && !this.user.can_merge;
+    },
+    tooltipTitle() {
+      if (this.cannotMerge && this.tooltipHasName) {
+        return sprintf(__('%{userName} (cannot merge)'), { userName: this.user.name });
+      } else if (this.cannotMerge) {
+        return __('Cannot merge');
+      } else if (this.tooltipHasName) {
+        return this.user.name;
+      }
+
+      return '';
+    },
+    tooltipOption() {
+      return {
+        container: 'body',
+        placement: this.tooltipPlacement,
+        boundary: 'viewport',
+      };
+    },
+    assigneeUrl() {
+      return joinPaths(`${this.rootPath}`, `${this.user.username}`);
+    },
+  },
+};
+</script>
+
+<template>
+  <!-- must be `d-inline-block` or parent flex-basis causes width issues -->
+  <gl-link
+    v-gl-tooltip="tooltipOption"
+    :href="assigneeUrl"
+    :title="tooltipTitle"
+    class="d-inline-block"
+  >
+    <!-- use d-flex so that slot can be appropriately styled -->
+    <span class="d-flex">
+      <assignee-avatar :user="user" :img-size="32" :issuable-type="issuableType" />
+      <slot :user="user"></slot>
+    </span>
+  </gl-link>
+</template>

app/assets/javascripts/sidebar/components/assignees/assignees.vue

 <script>
-import { __, sprintf } from '~/locale';
-import tooltip from '~/vue_shared/directives/tooltip';
+import CollapsedAssigneeList from '../assignees/collapsed_assignee_list.vue';
+import UncollapsedAssigneeList from '../assignees/uncollapsed_assignee_list.vue';
 
 export default {
   // name: 'Assignees' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26#possible-false-positives
   // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
   name: 'Assignees',
-  directives: {
-    tooltip,
+  components: {
+    CollapsedAssigneeList,
+    UncollapsedAssigneeList,
   },
   props: {
     rootPath: {
@@ -24,171 +25,34 @@ export default {
     },
     issuableType: {
       type: String,
-      require: true,
+      required: false,
       default: 'issue',
     },
   },
-  data() {
-    return {
-      defaultRenderCount: 5,
-      defaultMaxCounter: 99,
-      showLess: true,
-    };
-  },
   computed: {
-    firstUser() {
-      return this.users[0];
-    },
-    hasMoreThanTwoAssignees() {
-      return this.users.length > 2;
-    },
-    hasMoreThanOneAssignee() {
-      return this.users.length > 1;
-    },
-    hasAssignees() {
-      return this.users.length > 0;
-    },
     hasNoUsers() {
       return !this.users.length;
     },
-    hasOneUser() {
-      return this.users.length === 1;
-    },
-    renderShowMoreSection() {
-      return this.users.length > this.defaultRenderCount;
-    },
-    numberOfHiddenAssignees() {
-      return this.users.length - this.defaultRenderCount;
-    },
-    isHiddenAssignees() {
-      return this.numberOfHiddenAssignees > 0;
-    },
-    hiddenAssigneesLabel() {
-      const { numberOfHiddenAssignees } = this;
-      return sprintf(__('+ %{numberOfHiddenAssignees} more'), { numberOfHiddenAssignees });
-    },
-    collapsedTooltipTitle() {
-      const maxRender = Math.min(this.defaultRenderCount, this.users.length);
-      const renderUsers = this.users.slice(0, maxRender);
-      const names = renderUsers.map(u => u.name);
-
-      if (this.users.length > maxRender) {
-        names.push(`+ ${this.users.length - maxRender} more`);
-      }
-
-      if (!this.users.length) {
-        const emptyTooltipLabel = __('Assignee(s)');
-        names.push(emptyTooltipLabel);
-      }
-
-      return names.join(', ');
-    },
-    sidebarAvatarCounter() {
-      let counter = `+${this.users.length - 1}`;
-
-      if (this.users.length > this.defaultMaxCounter) {
-        counter = `${this.defaultMaxCounter}+`;
-      }
+    sortedAssigness() {
+      const canMergeUsers = this.users.filter(user => user.can_merge);
+      const canNotMergeUsers = this.users.filter(user => !user.can_merge);
 
-      return counter;
-    },
-    mergeNotAllowedTooltipMessage() {
-      const assigneesCount = this.users.length;
-
-      if (this.issuableType !== 'merge_request' || assigneesCount === 0) {
-        return null;
-      }
-
-      const cannotMergeCount = this.users.filter(u => u.can_merge === false).length;
-      const canMergeCount = assigneesCount - cannotMergeCount;
-
-      if (canMergeCount === assigneesCount) {
-        // Everyone can merge
-        return null;
-      } else if (cannotMergeCount === assigneesCount && assigneesCount > 1) {
-        return __('No one can merge');
-      } else if (assigneesCount === 1) {
-        return __('Cannot merge');
-      }
-
-      return sprintf(__('%{canMergeCount}/%{assigneesCount} can merge'), {
-        canMergeCount,
-        assigneesCount,
-      });
+      return [...canMergeUsers, ...canNotMergeUsers];
     },
   },
   methods: {
     assignSelf() {
       this.$emit('assign-self');
     },
-    toggleShowLess() {
-      this.showLess = !this.showLess;
-    },
-    renderAssignee(index) {
-      return !this.showLess || (index < this.defaultRenderCount && this.showLess);
-    },
-    avatarUrl(user) {
-      return user.avatar || user.avatar_url || gon.default_avatar_url;
-    },
-    assigneeUrl(user) {
-      return `${this.rootPath}${user.username}`;
-    },
-    assigneeAlt(user) {
-      return sprintf(__("%{userName}'s avatar"), { userName: user.name });
-    },
-    assigneeUsername(user) {
-      return `@${user.username}`;
-    },
-    shouldRenderCollapsedAssignee(index) {
-      const firstTwo = this.users.length <= 2 && index <= 2;
-
-      return index === 0 || firstTwo;
-    },
   },
 };
 </script>
 
 <template>
   <div>
-    <div
-      v-tooltip
-      :class="{ 'multiple-users': hasMoreThanOneAssignee }"
-      :title="collapsedTooltipTitle"
-      class="sidebar-collapsed-icon sidebar-collapsed-user"
-      data-container="body"
-      data-placement="left"
-      data-boundary="viewport"
-    >
-      <i v-if="hasNoUsers" :aria-label="__('None')" class="fa fa-user"> </i>
-      <button
-        v-for="(user, index) in users"
-        v-if="shouldRenderCollapsedAssignee(index)"
-        :key="user.id"
-        type="button"
-        class="btn-link"
-      >
-        <img
-          :alt="assigneeAlt(user)"
-          :src="avatarUrl(user)"
-          width="24"
-          class="avatar avatar-inline s24"
-        />
-        <span class="author"> {{ user.name }} </span>
-      </button>
-      <button v-if="hasMoreThanTwoAssignees" class="btn-link" type="button">
-        <span class="avatar-counter sidebar-avatar-counter"> {{ sidebarAvatarCounter }} </span>
-      </button>
-    </div>
+    <collapsed-assignee-list :users="sortedAssigness" :issuable-type="issuableType" />
+
     <div class="value hide-collapsed">
-      <span
-        v-if="mergeNotAllowedTooltipMessage"
-        v-tooltip
-        :title="mergeNotAllowedTooltipMessage"
-        data-placement="left"
-        class="float-right cannot-be-merged"
-      >
-        <i aria-hidden="true" data-hidden="true" class="fa fa-exclamation-triangle"></i>
-      </span>
       <template v-if="hasNoUsers">
         <span class="assign-yourself no-value qa-assign-yourself">
           {{ __('None') }}
@@ -200,51 +64,13 @@ export default {
           </template>
         </span>
       </template>
-      <template v-else-if="hasOneUser">
-        <a :href="assigneeUrl(firstUser)" class="author-link bold">
-          <img
-            :alt="assigneeAlt(firstUser)"
-            :src="avatarUrl(firstUser)"
-            width="32"
-            class="avatar avatar-inline s32"
-          />
-          <span class="author"> {{ firstUser.name }} </span>
-          <span class="username"> {{ assigneeUsername(firstUser) }} </span>
-        </a>
-      </template>
-      <template v-else>
-        <div class="user-list">
-          <div
-            v-for="(user, index) in users"
-            v-if="renderAssignee(index)"
-            :key="user.id"
-            class="user-item"
-          >
-            <a
-              :href="assigneeUrl(user)"
-              :data-title="user.name"
-              class="user-link has-tooltip"
-              data-container="body"
-              data-placement="bottom"
-            >
-              <img
-                :alt="assigneeAlt(user)"
-                :src="avatarUrl(user)"
-                width="32"
-                class="avatar avatar-inline s32"
-              />
-            </a>
-          </div>
-        </div>
-        <div v-if="renderShowMoreSection" class="user-list-more">
-          <button type="button" class="btn-link" @click="toggleShowLess">
-            <template v-if="showLess">
-              {{ hiddenAssigneesLabel }}
-            </template>
-            <template v-else>{{ __('- show less') }}</template>
-          </button>
-        </div>
-      </template>
+
+      <uncollapsed-assignee-list
+        v-else
+        :users="sortedAssigness"
+        :root-path="rootPath"
+        :issuable-type="issuableType"
+      />
     </div>
   </div>
 </template>

app/assets/javascripts/sidebar/components/assignees/collapsed_assignee.vue

+<script>
+import AssigneeAvatar from './assignee_avatar.vue';
+
+export default {
+  components: {
+    AssigneeAvatar,
+  },
+  props: {
+    user: {
+      type: Object,
+      required: true,
+    },
+    issuableType: {
+      type: String,
+      required: false,
+      default: 'issue',
+    },
+  },
+};
+</script>
+
+<template>
+  <button type="button" class="btn-link">
+    <assignee-avatar :user="user" :img-size="24" :issuable-type="issuableType" />
+    <span class="author"> {{ user.name }} </span>
+  </button>
+</template>

app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue

+<script>
+import { __, sprintf } from '~/locale';
+import { GlTooltipDirective } from '@gitlab/ui';
+import CollapsedAssignee from './collapsed_assignee.vue';
+
+const DEFAULT_MAX_COUNTER = 99;
+const DEFAULT_RENDER_COUNT = 5;
+
+export default {
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: {
+    CollapsedAssignee,
+  },
+  props: {
+    users: {
+      type: Array,
+      required: true,
+    },
+    issuableType: {
+      type: String,
+      required: false,
+      default: 'issue',
+    },
+  },
+  computed: {
+    isMergeRequest() {
+      return this.issuableType === 'merge_request';
+    },
+    hasNoUsers() {
+      return !this.users.length;
+    },
+    hasMoreThanOneAssignee() {
+      return this.users.length > 1;
+    },
+    hasMoreThanTwoAssignees() {
+      return this.users.length > 2;
+    },
+    allAssigneesCanMerge() {
+      return this.users.every(user => user.can_merge);
+    },
+    sidebarAvatarCounter() {
+      if (this.users.length > DEFAULT_MAX_COUNTER) {
+        return `${DEFAULT_MAX_COUNTER}+`;
+      }
+
+      return `+${this.users.length - 1}`;
+    },
+    collapsedUsers() {
+      const collapsedLength = this.hasMoreThanTwoAssignees ? 1 : this.users.length;
+
+      return this.users.slice(0, collapsedLength);
+    },
+    tooltipTitleMergeStatus() {
+      if (!this.isMergeRequest) {
+        return '';
+      }
+
+      const mergeLength = this.users.filter(u => u.can_merge).length;
+
+      if (mergeLength === this.users.length) {
+        return '';
+      } else if (mergeLength > 0) {
+        return sprintf(__('%{mergeLength}/%{usersLength} can merge'), {
+          mergeLength,
+          usersLength: this.users.length,
+        });
+      }
+
+      return this.users.length === 1 ? __('cannot merge') : __('no one can merge');
+    },
+    tooltipTitle() {
+      const maxRender = Math.min(DEFAULT_RENDER_COUNT, this.users.length);
+      const renderUsers = this.users.slice(0, maxRender);
+      const names = renderUsers.map(u => u.name);
+
+      if (!this.users.length) {
+        return __('Assignee(s)');
+      }
+
+      if (this.users.length > names.length) {
+        names.push(sprintf(__('+ %{amount} more'), { amount: this.users.length - names.length }));
+      }
+
+      const text = names.join(', ');
+
+      return this.tooltipTitleMergeStatus ? `${text} (${this.tooltipTitleMergeStatus})` : text;
+    },
+
+    tooltipOptions() {
+      return { container: 'body', placement: 'left', boundary: 'viewport' };
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-gl-tooltip="tooltipOptions"
+    :class="{ 'multiple-users': hasMoreThanOneAssignee }"
+    :title="tooltipTitle"
+    class="sidebar-collapsed-icon sidebar-collapsed-user"
+  >
+    <i v-if="hasNoUsers" :aria-label="__('None')" class="fa fa-user"> </i>
+    <collapsed-assignee
+      v-for="user in collapsedUsers"
+      :key="user.id"
+      :user="user"
+      :issuable-type="issuableType"
+    />
+    <button v-if="hasMoreThanTwoAssignees" class="btn-link" type="button">
+      <span class="avatar-counter sidebar-avatar-counter"> {{ sidebarAvatarCounter }} </span>
+      <i
+        v-if="isMergeRequest && !allAssigneesCanMerge"
+        aria-hidden="true"
+        class="fa fa-exclamation-triangle merge-icon"
+      ></i>
+    </button>
+  </div>
+</template>

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue

@@ -29,7 +29,7 @@ export default {
     },
     issuableType: {
       type: String,
-      require: true,
+      required: false,
       default: 'issue',
     },
   },

app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue

+<script>
+import { __, sprintf } from '~/locale';
+import AssigneeAvatarLink from './assignee_avatar_link.vue';
+
+const DEFAULT_RENDER_COUNT = 5;
+
+export default {
+  components: {
+    AssigneeAvatarLink,
+  },
+  props: {
+    users: {
+      type: Array,
+      required: true,
+    },
+    rootPath: {
+      type: String,
+      required: true,
+    },
+    issuableType: {
+      type: String,
+      required: false,
+      default: 'issue',
+    },
+  },
+  data() {
+    return {
+      showLess: true,
+    };
+  },
+  computed: {
+    firstUser() {
+      return this.users[0];
+    },
+    hasOneUser() {
+      return this.users.length === 1;
+    },
+    hiddenAssigneesLabel() {
+      const { numberOfHiddenAssignees } = this;
+      return sprintf(__('+ %{numberOfHiddenAssignees} more'), { numberOfHiddenAssignees });
+    },
+    renderShowMoreSection() {
+      return this.users.length > DEFAULT_RENDER_COUNT;
+    },
+    numberOfHiddenAssignees() {
+      return this.users.length - DEFAULT_RENDER_COUNT;
+    },
+    uncollapsedUsers() {
+      const uncollapsedLength = this.showLess
+        ? Math.min(this.users.length, DEFAULT_RENDER_COUNT)
+        : this.users.length;
+      return this.showLess ? this.users.slice(0, uncollapsedLength) : this.users;
+    },
+    username() {
+      return `@${this.firstUser.username}`;
+    },
+  },
+  methods: {
+    toggleShowLess() {
+      this.showLess = !this.showLess;
+    },
+  },
+};
+</script>
+
+<template>
+  <assignee-avatar-link
+    v-if="hasOneUser"
+    v-slot="{ user }"
+    tooltip-placement="left"
+    :tooltip-has-name="false"
+    :user="firstUser"
+    :root-path="rootPath"
+    :issuable-type="issuableType"
+  >
+    <div class="ml-2">
+      <span class="author"> {{ user.name }} </span>
+      <span class="username"> {{ username }} </span>
+    </div>
+  </assignee-avatar-link>
+  <div v-else>
+    <div class="user-list">
+      <div v-for="user in uncollapsedUsers" :key="user.id" class="user-item">
+        <assignee-avatar-link :user="user" :root-path="rootPath" :issuable-type="issuableType" />
+      </div>
+    </div>
+    <div v-if="renderShowMoreSection" class="user-list-more">
+      <button type="button" class="btn-link" @click="toggleShowLess">
+        <template v-if="showLess">
+          {{ hiddenAssigneesLabel }}
+        </template>
+        <template v-else>{{ __('- show less') }}</template>
+      </button>
+    </div>
+  </div>
+</template>

app/assets/javascripts/users_select.js

@@ -62,6 +62,8 @@ function UsersSelect(currentUser, els, options = {}) {
         options.showCurrentUser = $dropdown.data('currentUser');
         options.todoFilter = $dropdown.data('todoFilter');
         options.todoStateFilter = $dropdown.data('todoStateFilter');
+        options.iid = $dropdown.data('iid');
+        options.issuableType = $dropdown.data('issuableType');
         showNullUser = $dropdown.data('nullUser');
         defaultNullUser = $dropdown.data('nullUserDefault');
         showMenuAbove = $dropdown.data('showMenuAbove');
@@ -239,7 +241,7 @@ function UsersSelect(currentUser, els, options = {}) {
           '<% if( avatar ) { %> <a class="author-link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>',
         );
         assigneeTemplate = _.template(
-          `<% if (username) { %> <a class="author-link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> 
+          `<% if (username) { %> <a class="author-link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself">
           ${sprintf(s__('UsersSelect|No assignee - %{openingTag} assign yourself %{closingTag}'), {
             openingTag: '<a href="#" class="js-assign-yourself">',
             closingTag: '</a>',
@@ -423,6 +425,8 @@ function UsersSelect(currentUser, els, options = {}) {
             const { $el, e, isMarking } = options;
             const user = options.selectedObj;
 
+            $el.tooltip('dispose');
+
             if ($dropdown.hasClass('js-multiselect')) {
               const isActive = $el.hasClass('is-active');
               const previouslySelected = $dropdown
@@ -570,20 +574,11 @@ function UsersSelect(currentUser, els, options = {}) {
                 user.name,
               )}</a></li>`;
             } else {
-              img = "<img src='" + avatar + "' class='avatar avatar-inline' width='32' />";
+              // 0 margin, because it's now handled by a wrapper
+              img = "<img src='" + avatar + "' class='avatar avatar-inline m-0' width='32' />";
             }
 
-            return `
-            <li data-user-id=${user.id}>
-              <a href='#' class='dropdown-menu-user-link ${selected === true ? 'is-active' : ''}'>
-                ${img}
-                <strong class='dropdown-menu-user-full-name'>
-                  ${_.escape(user.name)}
-                </strong>
-                ${username ? `<span class='dropdown-menu-user-username'>${username}</span>` : ''}
-              </a>
-            </li>
-          `;
+            return _this.renderRow(options.issuableType, user, selected, username, img);
           },
         });
       };
@@ -764,6 +759,11 @@ UsersSelect.prototype.users = function(query, options, callback) {
     author_id: options.authorId || null,
     skip_users: options.skipUsers || null,
   };
+
+  if (options.issuableType === 'merge_request') {
+    params.merge_request_iid = options.iid || null;
+  }
+
   return axios.get(url, { params }).then(({ data }) => {
     callback(data);
   });
@@ -776,4 +776,44 @@ UsersSelect.prototype.buildUrl = function(url) {
   return url;
 };
 
+UsersSelect.prototype.renderRow = function(issuableType, user, selected, username, img) {
+  const tooltip = issuableType === 'merge_request' && !user.can_merge ? __('Cannot merge') : '';
+  const tooltipClass = tooltip ? `has-tooltip` : '';
+  const selectedClass = selected === true ? 'is-active' : '';
+  const linkClasses = `${selectedClass} ${tooltipClass}`;
+  const tooltipAttributes = tooltip
+    ? `data-container="body" data-placement="left" data-title="${tooltip}"`
+    : '';
+
+  return `
+    <li data-user-id=${user.id}>
+      <a href="#" class="dropdown-menu-user-link d-flex align-items-center ${linkClasses}" ${tooltipAttributes}>
+        ${this.renderRowAvatar(issuableType, user, img)}
+        <span class="d-flex flex-column overflow-hidden">
+          <strong class="dropdown-menu-user-full-name">
+            ${_.escape(user.name)}
+          </strong>
+          ${username ? `<span class="dropdown-menu-user-username">${username}</span>` : ''}
+        </span>
+      </a>
+    </li>
+  `;
+};
+
+UsersSelect.prototype.renderRowAvatar = function(issuableType, user, img) {
+  if (user.beforeDivider) {
+    return img;
+  }
+
+  const mergeIcon =
+    issuableType === 'merge_request' && !user.can_merge
+      ? '<i class="fa fa-exclamation-triangle merge-icon"></i>'
+      : '';
+
+  return `<span class="position-relative mr-2">
+    ${img}
+    ${mergeIcon}
+  </span>`;
+};
+
 export default UsersSelect;

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue

@@ -50,6 +50,7 @@ export default {
           startTag: '<span class="label-branch">',
           endTag: '</span>',
         },
+        false,
       );
     },
   },

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

@@ -30,9 +30,16 @@ export default {
   },
 
   mounted() {
+    if (window.recaptchaDialogCallback) {
+      throw new Error('recaptchaDialogCallback is already defined!');
+    }
     window.recaptchaDialogCallback = this.submit.bind(this);
   },
 
+  beforeDestroy() {
+    window.recaptchaDialogCallback = null;
+  },
+
   methods: {
     appendRecaptchaScript() {
       this.removeRecaptchaScript();

app/assets/stylesheets/errors.scss

@@ -96,7 +96,7 @@ a {
 }
 
 .error-nav {
-  padding: 0;
+  padding: $gl-padding 0 0;
   text-align: center;
 
   li {

app/assets/stylesheets/framework/header.scss

@@ -131,7 +131,6 @@
       > li:not(.d-none) a {
         @include media-breakpoint-down(xs) {
           margin-left: 0;
-          min-width: 100%;
         }
       }
     }
@@ -233,7 +232,6 @@
       .impersonation-btn,
       .impersonation-btn:hover {
         background-color: $white-light;
-        margin-left: 0;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;