diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-15 09:09:49 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-15 09:09:49 +0300 |
commit | 00a8c64ffd18e74df4b1cdeda7776b5221fddafe (patch) | |
tree | 3a5262df3df89455384809bbd45dfb696c48ecde /app/assets/javascripts | |
parent | b71a496c7a3e109f7c85ad7ac453e6f7bf7cda45 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts')
10 files changed, 241 insertions, 11 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: [], +}); |