From 254ec28f5448f6f353cd98f637985de3d1405854 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Thu, 9 Apr 2020 21:09:19 +0000
Subject: Add latest changes from gitlab-org/gitlab@master

---
 app/assets/javascripts/diffs/components/app.vue    |  13 --
 .../diffs/components/compare_dropdown_layout.vue   |  78 ++++++++++
 .../diffs/components/compare_versions.vue          |  39 ++---
 .../diffs/components/compare_versions_dropdown.vue | 162 ---------------------
 app/assets/javascripts/diffs/constants.js          |   2 +
 app/assets/javascripts/diffs/store/getters.js      |   2 +
 .../diffs/store/getters_versions_dropdowns.js      |  43 ++++++
 .../javascripts/diffs/store/modules/diff_state.js  |   2 +-
 .../javascripts/notes/components/note_header.vue   |  35 +++--
 .../pages/projects/services/edit/index.js          |   9 +-
 .../prometheus_metrics/prometheus_metrics.js       |   4 +
 .../badges/gitlab_team_member_badge.vue            |  27 ++++
 12 files changed, 194 insertions(+), 222 deletions(-)
 create mode 100644 app/assets/javascripts/diffs/components/compare_dropdown_layout.vue
 delete mode 100644 app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
 create mode 100644 app/assets/javascripts/diffs/store/getters_versions_dropdowns.js
 create mode 100644 app/assets/javascripts/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue

(limited to 'app/assets')

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 3ea2a2fbaee..072bcaaad97 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -112,7 +112,6 @@ export default {
       mergeRequestDiffs: state => state.diffs.mergeRequestDiffs,
       mergeRequestDiff: state => state.diffs.mergeRequestDiff,
       commit: state => state.diffs.commit,
-      targetBranchName: state => state.diffs.targetBranchName,
       renderOverflowWarning: state => state.diffs.renderOverflowWarning,
       numTotalFiles: state => state.diffs.realSize,
       numVisibleFiles: state => state.diffs.size,
@@ -123,19 +122,9 @@ export default {
     ...mapState('diffs', ['showTreeList', 'isLoading', 'startVersion']),
     ...mapGetters('diffs', ['isParallelView', 'currentDiffIndex']),
     ...mapGetters(['isNotesFetched', 'getNoteableData']),
-    targetBranch() {
-      return {
-        branchName: this.targetBranchName,
-        versionIndex: -1,
-        path: '',
-      };
-    },
     canCurrentUserFork() {
       return this.currentUser.can_fork === true && this.currentUser.can_create_merge_request;
     },
-    showCompareVersions() {
-      return this.mergeRequestDiffs && this.mergeRequestDiff;
-    },
     renderDiffFiles() {
       return (
         this.diffFiles.length > 0 ||
@@ -369,8 +358,6 @@ export default {
     <div v-else id="diffs" :class="{ active: shouldShow }" class="diffs tab-pane">
       <compare-versions
         :merge-request-diffs="mergeRequestDiffs"
-        :merge-request-diff="mergeRequestDiff"
-        :target-branch="targetBranch"
         :is-limited-container="isLimitedContainer"
         :diff-files-length="diffFilesLength"
       />
diff --git a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue
new file mode 100644
index 00000000000..ed4edabd81c
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue
@@ -0,0 +1,78 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  components: {
+    Icon,
+    TimeAgo,
+  },
+  props: {
+    versions: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    selectedVersionName() {
+      return this.versions.find(x => x.selected)?.versionName || '';
+    },
+  },
+};
+</script>
+
+<template>
+  <span class="dropdown inline">
+    <a
+      class="dropdown-menu-toggle btn btn-default w-100"
+      data-toggle="dropdown"
+      aria-expanded="false"
+    >
+      <span> {{ selectedVersionName }} </span>
+      <icon :size="12" name="angle-down" class="position-absolute" />
+    </a>
+    <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
+      <div class="dropdown-content">
+        <ul>
+          <li v-for="version in versions" :key="version.id">
+            <a :class="{ 'is-active': version.selected }" :href="version.href">
+              <div>
+                <strong>
+                  {{ version.versionName }}
+                  <template v-if="version.isHead">{{
+                    s__('DiffsCompareBaseBranch|(HEAD)')
+                  }}</template>
+                  <template v-else-if="version.isBase">{{
+                    s__('DiffsCompareBaseBranch|(base)')
+                  }}</template>
+                </strong>
+              </div>
+              <div>
+                <small class="commit-sha"> {{ version.short_commit_sha }} </small>
+              </div>
+              <div>
+                <small>
+                  <template v-if="version.commitsText">
+                    {{ version.commitsText }}
+                  </template>
+                  <time-ago
+                    v-if="version.created_at"
+                    :time="version.created_at"
+                    class="js-timeago"
+                  />
+                </small>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </span>
+</template>
+
+<style>
+.dropdown {
+  min-width: 0;
+  max-height: 170px;
+}
+</style>
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index 34716c214c6..c680c3f4600 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -4,14 +4,14 @@ import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlSprintf } from '@gitl
 import { __ } from '~/locale';
 import { polyfillSticky } from '~/lib/utils/sticky';
 import Icon from '~/vue_shared/components/icon.vue';
-import CompareVersionsDropdown from './compare_versions_dropdown.vue';
+import CompareDropdownLayout from './compare_dropdown_layout.vue';
 import SettingsDropdown from './settings_dropdown.vue';
 import DiffStats from './diff_stats.vue';
 import { CENTERED_LIMITED_CONTAINER_CLASSES } from '../constants';
 
 export default {
   components: {
-    CompareVersionsDropdown,
+    CompareDropdownLayout,
     Icon,
     GlLink,
     GlDeprecatedButton,
@@ -27,16 +27,6 @@ export default {
       type: Array,
       required: true,
     },
-    mergeRequestDiff: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    targetBranch: {
-      type: Object,
-      required: false,
-      default: null,
-    },
     isLimitedContainer: {
       type: Boolean,
       required: false,
@@ -48,7 +38,11 @@ export default {
     },
   },
   computed: {
-    ...mapGetters('diffs', ['hasCollapsedFile']),
+    ...mapGetters('diffs', [
+      'hasCollapsedFile',
+      'diffCompareDropdownTargetVersions',
+      'diffCompareDropdownSourceVersions',
+    ]),
     ...mapState('diffs', [
       'commit',
       'showTreeList',
@@ -57,18 +51,12 @@ export default {
       'addedLines',
       'removedLines',
     ]),
-    comparableDiffs() {
-      return this.mergeRequestDiffs.slice(1);
-    },
     showDropdowns() {
       return !this.commit && this.mergeRequestDiffs.length;
     },
     toggleFileBrowserTitle() {
       return this.showTreeList ? __('Hide file browser') : __('Show file browser');
     },
-    baseVersionPath() {
-      return this.mergeRequestDiff.base_version_path;
-    },
   },
   created() {
     this.CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES;
@@ -113,19 +101,14 @@ export default {
         :message="s__('MergeRequest|Compare %{source} and %{target}')"
       >
         <template #source>
-          <compare-versions-dropdown
-            :other-versions="mergeRequestDiffs"
-            :merge-request-version="mergeRequestDiff"
-            :show-commit-count="true"
+          <compare-dropdown-layout
+            :versions="diffCompareDropdownSourceVersions"
             class="mr-version-dropdown"
           />
         </template>
         <template #target>
-          <compare-versions-dropdown
-            :other-versions="comparableDiffs"
-            :base-version-path="baseVersionPath"
-            :start-version="startVersion"
-            :target-branch="targetBranch"
+          <compare-dropdown-layout
+            :versions="diffCompareDropdownTargetVersions"
             class="mr-version-compare-dropdown"
           />
         </template>
diff --git a/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue b/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
deleted file mode 100644
index cc4b2dacab3..00000000000
--- a/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<script>
-import Icon from '~/vue_shared/components/icon.vue';
-import { n__, __, sprintf } from '~/locale';
-import { getParameterByName, parseBoolean } from '~/lib/utils/common_utils';
-import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
-
-export default {
-  components: {
-    Icon,
-    TimeAgo,
-  },
-  props: {
-    otherVersions: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    mergeRequestVersion: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-    startVersion: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-    targetBranch: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-    showCommitCount: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    baseVersionPath: {
-      type: String,
-      required: false,
-      default: null,
-    },
-  },
-  computed: {
-    targetVersions() {
-      if (this.mergeRequestVersion) {
-        return this.otherVersions;
-      }
-      return [...this.otherVersions, this.targetBranch];
-    },
-    selectedVersionName() {
-      const selectedVersion = this.startVersion || this.targetBranch || this.mergeRequestVersion;
-      return this.versionName(selectedVersion);
-    },
-  },
-  methods: {
-    commitsText(version) {
-      return n__(`%d commit,`, `%d commits,`, version.commits_count);
-    },
-    href(version) {
-      if (this.isBase(version)) {
-        return this.baseVersionPath;
-      }
-      if (this.showCommitCount) {
-        return version.version_path;
-      }
-      return version.compare_path;
-    },
-    versionName(version) {
-      if (this.isLatest(version)) {
-        return __('latest version');
-      }
-      if (this.targetBranch && (this.isBase(version) || !version)) {
-        return this.targetBranch.branchName;
-      }
-      return sprintf(__(`version %{versionIndex}`), { versionIndex: version.version_index });
-    },
-    isActive(version) {
-      if (!version) {
-        return false;
-      }
-
-      if (this.targetBranch) {
-        return (
-          (this.isBase(version) && !this.startVersion) ||
-          (this.startVersion && this.startVersion.version_index === version.version_index)
-        );
-      }
-
-      return version.version_index === this.mergeRequestVersion.version_index;
-    },
-    isBase(version) {
-      if (!version || !this.targetBranch) {
-        return false;
-      }
-      return version.versionIndex === -1;
-    },
-    isHead() {
-      return parseBoolean(getParameterByName('diff_head'));
-    },
-    isLatest(version) {
-      return (
-        this.mergeRequestVersion && version.version_index === this.targetVersions[0].version_index
-      );
-    },
-  },
-};
-</script>
-
-<template>
-  <span class="dropdown inline">
-    <a
-      class="dropdown-menu-toggle btn btn-default w-100"
-      data-toggle="dropdown"
-      aria-expanded="false"
-    >
-      <span> {{ selectedVersionName }} </span>
-      <icon :size="12" name="angle-down" class="position-absolute" />
-    </a>
-    <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
-      <div class="dropdown-content">
-        <ul>
-          <li v-for="version in targetVersions" :key="version.id">
-            <a :class="{ 'is-active': isActive(version) }" :href="href(version)">
-              <div>
-                <strong>
-                  {{ versionName(version) }}
-                  <template v-if="isHead()">{{ s__('DiffsCompareBaseBranch|(HEAD)') }}</template>
-                  <template v-else-if="isBase(version)">{{
-                    s__('DiffsCompareBaseBranch|(base)')
-                  }}</template>
-                </strong>
-              </div>
-              <div>
-                <small class="commit-sha"> {{ version.short_commit_sha }} </small>
-              </div>
-              <div>
-                <small>
-                  <template v-if="showCommitCount">
-                    {{ commitsText(version) }}
-                  </template>
-                  <time-ago
-                    v-if="version.created_at"
-                    :time="version.created_at"
-                    class="js-timeago"
-                  />
-                </small>
-              </div>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </span>
-</template>
-
-<style>
-.dropdown {
-  min-width: 0;
-  max-height: 170px;
-}
-</style>
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
index 7521f3c950a..b07dfe5f33d 100644
--- a/app/assets/javascripts/diffs/constants.js
+++ b/app/assets/javascripts/diffs/constants.js
@@ -58,3 +58,5 @@ export const START_RENDERING_INDEX = 200;
 export const INLINE_DIFF_LINES_KEY = 'highlighted_diff_lines';
 export const PARALLEL_DIFF_LINES_KEY = 'parallel_diff_lines';
 export const DIFFS_PER_PAGE = 20;
+
+export const DIFF_COMPARE_BASE_VERSION_INDEX = -1;
diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js
index 3898974638f..047caed1e63 100644
--- a/app/assets/javascripts/diffs/store/getters.js
+++ b/app/assets/javascripts/diffs/store/getters.js
@@ -1,6 +1,8 @@
 import { __, n__ } from '~/locale';
 import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '../constants';
 
+export * from './getters_versions_dropdowns';
+
 export const isParallelView = state => state.diffViewType === PARALLEL_DIFF_VIEW_TYPE;
 
 export const isInlineView = state => state.diffViewType === INLINE_DIFF_VIEW_TYPE;
diff --git a/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js b/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js
new file mode 100644
index 00000000000..14c51602f28
--- /dev/null
+++ b/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js
@@ -0,0 +1,43 @@
+import { __, n__, sprintf } from '~/locale';
+import { DIFF_COMPARE_BASE_VERSION_INDEX } from '../constants';
+
+export const selectedTargetIndex = state =>
+  state.startVersion?.version_index || DIFF_COMPARE_BASE_VERSION_INDEX;
+
+export const selectedSourceIndex = state => state.mergeRequestDiff.version_index;
+
+export const diffCompareDropdownTargetVersions = (state, getters) => {
+  // startVersion only exists if the user has selected a version other
+  // than "base" so if startVersion is null then base must be selected
+  const baseVersion = {
+    versionName: state.targetBranchName,
+    version_index: DIFF_COMPARE_BASE_VERSION_INDEX,
+    href: state.mergeRequestDiff.base_version_path,
+    isBase: true,
+    selected: !state.startVersion,
+  };
+  // Appended properties here are to make the compare_dropdown_layout easier to reason about
+  const formatVersion = v => {
+    return {
+      href: v.compare_path,
+      versionName: sprintf(__(`version %{versionIndex}`), { versionIndex: v.version_index }),
+      selected: v.version_index === getters.selectedTargetIndex,
+      ...v,
+    };
+  };
+  return [...state.mergeRequestDiffs.slice(1).map(formatVersion), baseVersion];
+};
+
+export const diffCompareDropdownSourceVersions = (state, getters) => {
+  // Appended properties here are to make the compare_dropdown_layout easier to reason about
+  return state.mergeRequestDiffs.map((v, i) => ({
+    ...v,
+    href: v.version_path,
+    commitsText: n__(`%d commit,`, `%d commits,`, v.commits_count),
+    versionName:
+      i === 0
+        ? __('latest version')
+        : sprintf(__(`version %{versionIndex}`), { versionIndex: v.version_index }),
+    selected: v.version_index === getters.selectedSourceIndex,
+  }));
+};
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index 81f1506260c..87938ababed 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -15,7 +15,7 @@ export default () => ({
   endpoint: '',
   basePath: '',
   commit: null,
-  startVersion: null,
+  startVersion: null, // Null unless a target diff is selected for comparison that is not the "base" diff
   diffFiles: [],
   coverageFiles: {},
   mergeRequestDiffs: [],
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index 16351baedb7..9cb592ceedb 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -1,10 +1,12 @@
 <script>
 import { mapActions } from 'vuex';
-import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
+import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import GitlabTeamMemberBadge from '~/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue';
 
 export default {
   components: {
     timeAgoTooltip,
+    GitlabTeamMemberBadge,
   },
   props: {
     author: {
@@ -48,6 +50,9 @@ export default {
     hasAuthor() {
       return this.author && Object.keys(this.author).length;
     },
+    showGitlabTeamMemberBadge() {
+      return this.author?.is_gitlab_employee;
+    },
   },
   methods: {
     ...mapActions(['setTargetNoteHash']),
@@ -73,19 +78,21 @@ export default {
         {{ __('Toggle thread') }}
       </button>
     </div>
-    <a
-      v-if="hasAuthor"
-      v-once
-      :href="author.path"
-      class="js-user-link"
-      :data-user-id="author.id"
-      :data-username="author.username"
-    >
-      <slot name="note-header-info"></slot>
-      <span class="note-header-author-name bold">{{ author.name }}</span>
-      <span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
-      <span class="note-headline-light">@{{ author.username }}</span>
-    </a>
+    <template v-if="hasAuthor">
+      <a
+        v-once
+        :href="author.path"
+        class="js-user-link"
+        :data-user-id="author.id"
+        :data-username="author.username"
+      >
+        <slot name="note-header-info"></slot>
+        <span class="note-header-author-name bold">{{ author.name }}</span>
+        <span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
+        <span class="note-headline-light">@{{ author.username }}</span>
+      </a>
+      <gitlab-team-member-badge v-if="showGitlabTeamMemberBadge" />
+    </template>
     <span v-else>{{ __('A deleted user') }}</span>
     <span class="note-headline-light note-headline-meta">
       <span class="system-note-message"> <slot></slot> </span>
diff --git a/app/assets/javascripts/pages/projects/services/edit/index.js b/app/assets/javascripts/pages/projects/services/edit/index.js
index 56016cb980c..49862b64c27 100644
--- a/app/assets/javascripts/pages/projects/services/edit/index.js
+++ b/app/assets/javascripts/pages/projects/services/edit/index.js
@@ -1,16 +1,17 @@
 import IntegrationSettingsForm from '~/integrations/integration_settings_form';
-import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
+import PrometheusMetrics from 'ee_else_ce/prometheus_metrics/prometheus_metrics';
 import PrometheusAlerts from '~/prometheus_alerts';
 import initAlertsSettings from '~/alerts_service_settings';
 
 document.addEventListener('DOMContentLoaded', () => {
-  const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring');
   const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
   integrationSettingsForm.init();
 
+  const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring';
+  const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector);
   if (prometheusSettingsWrapper) {
-    const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
-    prometheusMetrics.loadActiveMetrics();
+    const prometheusMetrics = new PrometheusMetrics(prometheusSettingsSelector);
+    prometheusMetrics.init();
   }
 
   PrometheusAlerts();
diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
index 8d779e04673..59d47ae4155 100644
--- a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
+++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
@@ -28,6 +28,10 @@ export default class PrometheusMetrics {
     this.$panelToggle.on('click', e => this.handlePanelToggle(e));
   }
 
+  init() {
+    this.loadActiveMetrics();
+  }
+
   /* eslint-disable class-methods-use-this */
   handlePanelToggle(e) {
     const $toggleBtn = $(e.currentTarget);
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue b/app/assets/javascripts/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue
new file mode 100644
index 00000000000..527cbd458e2
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue
@@ -0,0 +1,27 @@
+<script>
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+const GITLAB_TEAM_MEMBER_LABEL = __('GitLab Team Member');
+
+export default {
+  name: 'GitlabTeamMemberBadge',
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: { GlIcon },
+  gitlabTeamMemberLabel: GITLAB_TEAM_MEMBER_LABEL,
+};
+</script>
+
+<template>
+  <span
+    v-gl-tooltip.hover
+    :title="$options.gitlabTeamMemberLabel"
+    role="img"
+    :aria-label="$options.gitlabTeamMemberLabel"
+    class="d-inline-block align-middle"
+  >
+    <gl-icon name="tanuki-verified" class="gl-text-purple d-block" />
+  </span>
+</template>
-- 
cgit v1.2.1