Add latest changes from gitlab-org/gitlab@master

12 files changed, 247 insertions, 13 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/annotations.js b/app/assets/javascripts/monitoring/components/charts/annotations.js
index de2b0c69a88..947750b3721 100644
--- a/app/assets/javascripts/monitoring/components/charts/annotations.js
+++ b/app/assets/javascripts/monitoring/components/charts/annotations.js
@@ -45,19 +45,16 @@ export const annotationsYAxis = {
  * Fetched list of annotations are parsed into a
  * format the eCharts accepts to draw markLines
  *
- * If Annotation is a single line, the `from` property
- * has a value and the `to` is null. Because annotations
- * only supports lines the from value does not exist yet.
+ * If Annotation is a single line, the `starting_at` property
+ * has a value and the `ending_at` is null. Because annotations
+ * only supports lines the `ending_at` value does not exist yet.
  *
  *
  * @param {Object} annotation object
  * @returns {Object} markLine object
  */
-export const parseAnnotations = ({
-  from: annotationFrom = '',
-  color = colorValues.primaryColor,
-}) => ({
-  xAxis: annotationFrom,
+export const parseAnnotations = ({ starting_at = '', color = colorValues.primaryColor }) => ({
+  xAxis: starting_at,
   lineStyle: {
     color,
   },
@@ -105,7 +102,7 @@ export const generateAnnotationsSeries = ({ deployments = [], annotations = [] }
   const annotationsData = annotations.map(annotation => {
     return {
       name: 'annotations',
-      value: [annotation.from, annotationsYAxisCoords.pos],
+      value: [annotation.starting_at, annotationsYAxisCoords.pos],
       // style options
       symbol: 'none',
       // metadata that are accessible in `formatTooltipText` method
diff --git a/app/assets/javascripts/monitoring/queries/getAnnotations.query.graphql b/app/assets/javascripts/monitoring/queries/getAnnotations.query.graphql
index e2edaa707b2..2fd698eadf9 100644
--- a/app/assets/javascripts/monitoring/queries/getAnnotations.query.graphql
+++ b/app/assets/javascripts/monitoring/queries/getAnnotations.query.graphql
@@ -4,8 +4,8 @@ query getAnnotations($projectPath: ID!) {
       annotations: nodes {
         id
         description
-        from
-        to
+        starting_at
+        ending_at
         panelId
       }
     }
diff --git a/app/assets/javascripts/pages/projects/commits/show/index.js b/app/assets/javascripts/pages/projects/commits/show/index.js
index ad671ce9351..b456baac612 100644
--- a/app/assets/javascripts/pages/projects/commits/show/index.js
+++ b/app/assets/javascripts/pages/projects/commits/show/index.js
@@ -2,8 +2,11 @@ import CommitsList from '~/commits';
 import GpgBadges from '~/gpg_badges';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 
+import mountCommits from '~/projects/commits';
+
 document.addEventListener('DOMContentLoaded', () => {
   new CommitsList(document.querySelector('.js-project-commits-show').dataset.commitsLimit); // eslint-disable-line no-new
   new ShortcutsNavigation(); // eslint-disable-line no-new
   GpgBadges.fetch();
+  mountCommits(document.getElementById('js-author-dropdown'));
 });
diff --git a/app/assets/javascripts/projects/commits/components/author_select.vue b/app/assets/javascripts/projects/commits/components/author_select.vue
new file mode 100644
index 00000000000..78f9389b80c
--- /dev/null
+++ b/app/assets/javascripts/projects/commits/components/author_select.vue
@@ -0,0 +1,141 @@
+<script>
+import { debounce } from 'lodash';
+import { mapState, mapActions } from 'vuex';
+import {
+  GlNewDropdown,
+  GlNewDropdownHeader,
+  GlNewDropdownItem,
+  GlSearchBoxByType,
+  GlNewDropdownDivider,
+  GlTooltipDirective,
+} from '@gitlab/ui';
+import { redirectTo } from '~/lib/utils/url_utility';
+import { urlParamsToObject } from '~/lib/utils/common_utils';
+import { __ } from '~/locale';
+
+const tooltipMessage = __('Searching by both author and message is currently not supported.');
+
+export default {
+  name: 'AuthorSelect',
+  components: {
+    GlNewDropdown,
+    GlNewDropdownHeader,
+    GlNewDropdownItem,
+    GlSearchBoxByType,
+    GlNewDropdownDivider,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    projectCommitsEl: {
+      type: HTMLDivElement,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      hasSearchParam: false,
+      searchTerm: '',
+      authorInput: '',
+      currentAuthor: '',
+    };
+  },
+  computed: {
+    ...mapState(['commitsPath', 'commitsAuthors']),
+    dropdownText() {
+      return this.currentAuthor || __('Author');
+    },
+    tooltipTitle() {
+      return this.hasSearchParam && tooltipMessage;
+    },
+  },
+  mounted() {
+    this.fetchAuthors();
+    const params = urlParamsToObject(window.location.search);
+    const { search: searchParam, author: authorParam } = params;
+    const commitsSearchInput = this.projectCommitsEl.querySelector('#commits-search');
+
+    if (authorParam) {
+      commitsSearchInput.setAttribute('disabled', true);
+      commitsSearchInput.setAttribute('data-toggle', 'tooltip');
+      commitsSearchInput.setAttribute('title', tooltipMessage);
+      this.currentAuthor = authorParam;
+    }
+
+    if (searchParam) {
+      this.hasSearchParam = true;
+    }
+
+    commitsSearchInput.addEventListener(
+      'keyup',
+      debounce(event => this.setSearchParam(event.target.value), 500), // keyup & time is to match effect of "filter by commit message"
+    );
+  },
+  methods: {
+    ...mapActions(['fetchAuthors']),
+    selectAuthor(author) {
+      const { name: user } = author || {};
+
+      // Follow up issue "Remove usage of $.fadeIn from the codebase"
+      // > https://gitlab.com/gitlab-org/gitlab/-/issues/214395
+
+      // Follow up issue "Refactor commit list to a Vue Component"
+      // To resolving mixing Vue + Vanilla JS
+      // > https://gitlab.com/gitlab-org/gitlab/-/issues/214010
+      const commitListElement = this.projectCommitsEl.querySelector('#commits-list');
+
+      // To mimick effect of "filter by commit message"
+      commitListElement.style.opacity = 0.5;
+      commitListElement.style.transition = 'opacity 200ms';
+
+      if (!user) {
+        return redirectTo(this.commitsPath);
+      }
+
+      return redirectTo(`${this.commitsPath}?author=${user}`);
+    },
+    searchAuthors() {
+      this.fetchAuthors(this.authorInput);
+    },
+    setSearchParam(value) {
+      this.hasSearchParam = Boolean(value);
+    },
+  },
+};
+</script>
+
+<template>
+  <div ref="dropdownContainer" v-gl-tooltip :title="tooltipTitle" :disabled="!hasSearchParam">
+    <gl-new-dropdown
+      :text="dropdownText"
+      :disabled="hasSearchParam"
+      class="gl-dropdown w-100 mt-2 mt-sm-0"
+    >
+      <gl-new-dropdown-header>
+        {{ __('Search by author') }}
+      </gl-new-dropdown-header>
+      <gl-new-dropdown-divider />
+      <gl-search-box-by-type
+        v-model.trim="authorInput"
+        class="m-2"
+        :placeholder="__('Search')"
+        @input="searchAuthors"
+      />
+      <gl-new-dropdown-item :is-checked="!currentAuthor" @click="selectAuthor(null)">
+        {{ __('Any Author') }}
+      </gl-new-dropdown-item>
+      <gl-new-dropdown-divider />
+      <gl-new-dropdown-item
+        v-for="author in commitsAuthors"
+        :key="author.id"
+        :is-checked="author.name === currentAuthor"
+        :avatar-url="author.avatar_url"
+        :secondary-text="author.username"
+        @click="selectAuthor(author)"
+      >
+        {{ author.name }}
+      </gl-new-dropdown-item>
+    </gl-new-dropdown>
+  </div>
+</template>
diff --git a/app/assets/javascripts/projects/commits/index.js b/app/assets/javascripts/projects/commits/index.js
new file mode 100644
index 00000000000..6f85432a77e
--- /dev/null
+++ b/app/assets/javascripts/projects/commits/index.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import AuthorSelectApp from './components/author_select.vue';
+import store from './store';
+
+Vue.use(Vuex);
+
+export default el => {
+  if (!el) {
+    return null;
+  }
+
+  store.dispatch('setInitialData', el.dataset);
+
+  return new Vue({
+    el,
+    store,
+    render(h) {
+      return h(AuthorSelectApp, {
+        props: {
+          projectCommitsEl: document.querySelector('.js-project-commits-show'),
+        },
+      });
+    },
+  });
+};
diff --git a/app/assets/javascripts/projects/commits/store/actions.js b/app/assets/javascripts/projects/commits/store/actions.js
new file mode 100644
index 00000000000..daeae071d6a
--- /dev/null
+++ b/app/assets/javascripts/projects/commits/store/actions.js
@@ -0,0 +1,31 @@
+import * as types from './mutation_types';
+import axios from '~/lib/utils/axios_utils';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+
+export default {
+  setInitialData({ commit }, data) {
+    commit(types.SET_INITIAL_DATA, data);
+  },
+  receiveAuthorsSuccess({ commit }, authors) {
+    commit(types.COMMITS_AUTHORS, authors);
+  },
+  receiveAuthorsError() {
+    createFlash(__('An error occurred fetching the project authors.'));
+  },
+  fetchAuthors({ dispatch, state }, author = null) {
+    const { projectId } = state;
+    const path = '/autocomplete/users.json';
+
+    return axios
+      .get(path, {
+        params: {
+          project_id: projectId,
+          active: true,
+          search: author,
+        },
+      })
+      .then(({ data }) => dispatch('receiveAuthorsSuccess', data))
+      .catch(() => dispatch('receiveAuthorsError'));
+  },
+};
diff --git a/app/assets/javascripts/projects/commits/store/index.js b/app/assets/javascripts/projects/commits/store/index.js
new file mode 100644
index 00000000000..e864ef5716e
--- /dev/null
+++ b/app/assets/javascripts/projects/commits/store/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import actions from './actions';
+import mutations from './mutations';
+import state from './state';
+
+Vue.use(Vuex);
+
+export const createStore = () => ({
+  actions,
+  mutations,
+  state: state(),
+});
+
+export default new Vuex.Store(createStore());
diff --git a/app/assets/javascripts/projects/commits/store/mutation_types.js b/app/assets/javascripts/projects/commits/store/mutation_types.js
new file mode 100644
index 00000000000..0a6a5a0b902
--- /dev/null
+++ b/app/assets/javascripts/projects/commits/store/mutation_types.js
@@ -0,0 +1,2 @@
+export const SET_INITIAL_DATA = 'SET_INITIAL_DATA';
+export const COMMITS_AUTHORS = 'COMMITS_AUTHORS';
diff --git a/app/assets/javascripts/projects/commits/store/mutations.js b/app/assets/javascripts/projects/commits/store/mutations.js
new file mode 100644
index 00000000000..11f703c0946
--- /dev/null
+++ b/app/assets/javascripts/projects/commits/store/mutations.js
@@ -0,0 +1,10 @@
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_INITIAL_DATA](state, data) {
+    Object.assign(state, data);
+  },
+  [types.COMMITS_AUTHORS](state, data) {
+    state.commitsAuthors = data;
+  },
+};
diff --git a/app/assets/javascripts/projects/commits/store/state.js b/app/assets/javascripts/projects/commits/store/state.js
new file mode 100644
index 00000000000..f074708ffa2
--- /dev/null
+++ b/app/assets/javascripts/projects/commits/store/state.js
@@ -0,0 +1,5 @@
+export default () => ({
+  commitsPath: null,
+  projectId: null,
+  commitsAuthors: [],
+});
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index b6edadb05a9..f746d7e6f69 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -317,7 +317,10 @@
     }
   }
 
-  .dropdown-item {
+  // Temporary fix to ensure tick is aligned
+  // Follow up Issue to remove after the GlNewDropdownItem component is fixed
+  // > https://gitlab.com/gitlab-org/gitlab/-/issues/213948
+  li:not(.gl-new-dropdown-item) .dropdown-item {
     @include dropdown-link;
   }
 
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 3f1d44a488a..7722a3523a1 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -13,7 +13,8 @@
 
         %ul.breadcrumb.repo-breadcrumb
           = commits_breadcrumbs
-      .tree-controls.d-none.d-sm-none.d-md-block<
+      #js-author-dropdown{ data: { 'commits_path': project_commits_path(@project), 'project_id': @project.id } }
+      .tree-controls.d-none.d-sm-none.d-md-block
         - if @merge_request.present?
           .control
             = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'btn'