Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--app/assets/javascripts/analytics/shared/components/daterange.vue121
-rw-r--r--app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue217
-rw-r--r--app/assets/javascripts/analytics/shared/constants.js3
-rw-r--r--app/assets/javascripts/analytics/shared/graphql/projects.query.graphql22
-rw-r--r--app/assets/javascripts/analytics/shared/utils.js4
-rw-r--r--app/assets/javascripts/cycle_analytics/components/filter_bar.vue142
-rw-r--r--app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue93
-rw-r--r--app/assets/javascripts/cycle_analytics/constants.js1
-rw-r--r--app/assets/javascripts/cycle_analytics/store/actions.js2
-rw-r--r--app/assets/javascripts/cycle_analytics/store/index.js2
-rw-r--r--doc/development/features_inside_dot_gitlab.md2
-rw-r--r--doc/user/group/value_stream_analytics/index.md31
-rw-r--r--doc/user/project/code_owners.md91
-rw-r--r--package.json4
-rw-r--r--spec/frontend/analytics/shared/components/daterange_spec.js120
-rw-r--r--spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js261
-rw-r--r--spec/frontend/analytics/shared/utils_spec.js24
-rw-r--r--spec/frontend/cycle_analytics/filter_bar_spec.js224
-rw-r--r--spec/frontend/cycle_analytics/mock_data.js32
-rw-r--r--spec/frontend/cycle_analytics/value_stream_filters_spec.js91
-rw-r--r--yarn.lock38
21 files changed, 1442 insertions, 83 deletions
diff --git a/app/assets/javascripts/analytics/shared/components/daterange.vue b/app/assets/javascripts/analytics/shared/components/daterange.vue
new file mode 100644
index 00000000000..d6250e0efad
--- /dev/null
+++ b/app/assets/javascripts/analytics/shared/components/daterange.vue
@@ -0,0 +1,121 @@
+<script>
+import { GlDaterangePicker, GlSprintf, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { getDayDifference } from '~/lib/utils/datetime_utility';
+import { __, sprintf } from '~/locale';
+import { OFFSET_DATE_BY_ONE } from '../constants';
+
+export default {
+ components: {
+ GlDaterangePicker,
+ GlSprintf,
+ GlIcon,
+ },
+ directives: {
+ GlTooltip: GlTooltipDirective,
+ },
+ props: {
+ show: {
+ type: Boolean,
+ required: false,
+ default: true,
+ },
+ startDate: {
+ type: Date,
+ required: false,
+ default: null,
+ },
+ endDate: {
+ type: Date,
+ required: false,
+ default: null,
+ },
+ minDate: {
+ type: Date,
+ required: false,
+ default: null,
+ },
+ maxDate: {
+ type: Date,
+ required: false,
+ default() {
+ return new Date();
+ },
+ },
+ maxDateRange: {
+ type: Number,
+ required: false,
+ default: 0,
+ },
+ includeSelectedDate: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
+ },
+ data() {
+ return {
+ maxDateRangeTooltip: sprintf(
+ __(
+ 'Showing data for workflow items created in this date range. Date range cannot exceed %{maxDateRange} days.',
+ ),
+ {
+ maxDateRange: this.maxDateRange,
+ },
+ ),
+ };
+ },
+ computed: {
+ dateRange: {
+ get() {
+ return { startDate: this.startDate, endDate: this.endDate };
+ },
+ set({ startDate, endDate }) {
+ this.$emit('change', { startDate, endDate });
+ },
+ },
+ numberOfDays() {
+ const dayDifference = getDayDifference(this.startDate, this.endDate);
+ return this.includeSelectedDate ? dayDifference + OFFSET_DATE_BY_ONE : dayDifference;
+ },
+ },
+};
+</script>
+<template>
+ <div
+ v-if="show"
+ class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row align-items-lg-center justify-content-lg-end"
+ >
+ <gl-daterange-picker
+ v-model="dateRange"
+ class="d-flex flex-column flex-lg-row"
+ :default-start-date="startDate"
+ :default-end-date="endDate"
+ :default-min-date="minDate"
+ :max-date-range="maxDateRange"
+ :default-max-date="maxDate"
+ :same-day-selection="includeSelectedDate"
+ theme="animate-picker"
+ start-picker-class="js-daterange-picker-from gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-lg-align-items-center gl-lg-mr-3 gl-mb-2 gl-lg-mb-0"
+ end-picker-class="js-daterange-picker-to d-flex flex-column flex-lg-row align-items-lg-center"
+ label-class="gl-mb-2 gl-lg-mb-0"
+ />
+ <div
+ v-if="maxDateRange"
+ class="daterange-indicator d-flex flex-row flex-lg-row align-items-flex-start align-items-lg-center"
+ >
+ <span class="number-of-days pl-2 pr-1">
+ <gl-sprintf :message="n__('1 day', '%d days', numberOfDays)">
+ <template #numberOfDays>{{ numberOfDays }}</template>
+ </gl-sprintf>
+ </span>
+ <gl-icon
+ v-gl-tooltip
+ data-testid="helper-icon"
+ :title="maxDateRangeTooltip"
+ name="question"
+ :size="14"
+ class="text-secondary"
+ />
+ </div>
+ </div>
+</template>
diff --git a/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue b/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue
new file mode 100644
index 00000000000..d58033b36c7
--- /dev/null
+++ b/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue
@@ -0,0 +1,217 @@
+<script>
+import {
+ GlIcon,
+ GlLoadingIcon,
+ GlAvatar,
+ GlDropdown,
+ GlDropdownSectionHeader,
+ GlDropdownItem,
+ GlSearchBoxByType,
+} from '@gitlab/ui';
+import { debounce } from 'lodash';
+import { filterBySearchTerm } from '~/analytics/shared/utils';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+import { n__, s__, __ } from '~/locale';
+import getProjects from '../graphql/projects.query.graphql';
+
+export default {
+ name: 'ProjectsDropdownFilter',
+ components: {
+ GlIcon,
+ GlLoadingIcon,
+ GlAvatar,
+ GlDropdown,
+ GlDropdownSectionHeader,
+ GlDropdownItem,
+ GlSearchBoxByType,
+ },
+ props: {
+ groupId: {
+ type: Number,
+ required: true,
+ },
+ groupNamespace: {
+ type: String,
+ required: true,
+ },
+ multiSelect: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
+ label: {
+ type: String,
+ required: false,
+ default: s__('CycleAnalytics|project dropdown filter'),
+ },
+ queryParams: {
+ type: Object,
+ required: false,
+ default: () => ({}),
+ },
+ defaultProjects: {
+ type: Array,
+ required: false,
+ default: () => [],
+ },
+ },
+ data() {
+ return {
+ loading: true,
+ projects: [],
+ selectedProjects: this.defaultProjects || [],
+ searchTerm: '',
+ };
+ },
+ computed: {
+ selectedProjectsLabel() {
+ if (this.selectedProjects.length === 1) {
+ return this.selectedProjects[0].name;
+ } else if (this.selectedProjects.length > 1) {
+ return n__(
+ 'CycleAnalytics|Project selected',
+ 'CycleAnalytics|%d projects selected',
+ this.selectedProjects.length,
+ );
+ }
+
+ return this.selectedProjectsPlaceholder;
+ },
+ selectedProjectsPlaceholder() {
+ return this.multiSelect ? __('Select projects') : __('Select a project');
+ },
+ isOnlyOneProjectSelected() {
+ return this.selectedProjects.length === 1;
+ },
+ selectedProjectIds() {
+ return this.selectedProjects.map((p) => p.id);
+ },
+ availableProjects() {
+ return filterBySearchTerm(this.projects, this.searchTerm);
+ },
+ noResultsAvailable() {
+ const { loading, availableProjects } = this;
+ return !loading && !availableProjects.length;
+ },
+ },
+ watch: {
+ searchTerm() {
+ this.search();
+ },
+ },
+ mounted() {
+ this.search();
+ },
+ methods: {
+ search: debounce(function debouncedSearch() {
+ this.fetchData();
+ }, DEFAULT_DEBOUNCE_AND_THROTTLE_MS),
+ getSelectedProjects(selectedProject, isMarking) {
+ return isMarking
+ ? this.selectedProjects.concat([selectedProject])
+ : this.selectedProjects.filter((project) => project.id !== selectedProject.id);
+ },
+ singleSelectedProject(selectedObj, isMarking) {
+ return isMarking ? [selectedObj] : [];
+ },
+ setSelectedProjects(selectedObj, isMarking) {
+ this.selectedProjects = this.multiSelect
+ ? this.getSelectedProjects(selectedObj, isMarking)
+ : this.singleSelectedProject(selectedObj, isMarking);
+ },
+ onClick({ project, isSelected }) {
+ this.setSelectedProjects(project, !isSelected);
+ this.$emit('selected', this.selectedProjects);
+ },
+ fetchData() {
+ this.loading = true;
+
+ return this.$apollo
+ .query({
+ query: getProjects,
+ variables: {
+ groupFullPath: this.groupNamespace,
+ search: this.searchTerm,
+ ...this.queryParams,
+ },
+ })
+ .then((response) => {
+ const {
+ data: {
+ group: {
+ projects: { nodes },
+ },
+ },
+ } = response;
+
+ this.loading = false;
+ this.projects = nodes;
+ });
+ },
+ isProjectSelected(id) {
+ return this.selectedProjects ? this.selectedProjectIds.includes(id) : false;
+ },
+ getEntityId(project) {
+ return getIdFromGraphQLId(project.id);
+ },
+ },
+};
+</script>
+
+<template>
+ <gl-dropdown
+ ref="projectsDropdown"
+ class="dropdown dropdown-projects"
+ toggle-class="gl-shadow-none"
+ >
+ <template #button-content>
+ <div class="gl-display-flex gl-flex-grow-1">
+ <gl-avatar
+ v-if="isOnlyOneProjectSelected"
+ :src="selectedProjects[0].avatarUrl"
+ :entity-id="getEntityId(selectedProjects[0])"
+ :entity-name="selectedProjects[0].name"
+ :size="16"
+ shape="rect"
+ :alt="selectedProjects[0].name"
+ class="gl-display-inline-flex gl-vertical-align-middle gl-mr-2"
+ />
+ {{ selectedProjectsLabel }}
+ </div>
+ <gl-icon class="gl-ml-2" name="chevron-down" />
+ </template>
+ <gl-dropdown-section-header>{{ __('Projects') }}</gl-dropdown-section-header>
+ <gl-search-box-by-type v-model.trim="searchTerm" />
+
+ <gl-dropdown-item
+ v-for="project in availableProjects"
+ :key="project.id"
+ :is-check-item="true"
+ :is-checked="isProjectSelected(project.id)"
+ @click.prevent="onClick({ project, isSelected: isProjectSelected(project.id) })"
+ >
+ <div class="gl-display-flex">
+ <gl-avatar
+ class="gl-mr-2 vertical-align-middle"
+ :alt="project.name"
+ :size="16"
+ :entity-id="getEntityId(project)"
+ :entity-name="project.name"
+ :src="project.avatarUrl"
+ shape="rect"
+ />
+ <div>
+ <div data-testid="project-name">{{ project.name }}</div>
+ <div class="gl-text-gray-500" data-testid="project-full-path">{{ project.fullPath }}</div>
+ </div>
+ </div>
+ </gl-dropdown-item>
+ <gl-dropdown-item v-show="noResultsAvailable" class="gl-pointer-events-none text-secondary">{{
+ __('No matching results')
+ }}</gl-dropdown-item>
+ <gl-dropdown-item v-if="loading">
+ <gl-loading-icon size="lg" />
+ </gl-dropdown-item>
+ </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/analytics/shared/constants.js b/app/assets/javascripts/analytics/shared/constants.js
new file mode 100644
index 00000000000..4eba7a29e2c
--- /dev/null
+++ b/app/assets/javascripts/analytics/shared/constants.js
@@ -0,0 +1,3 @@
+export const DATE_RANGE_LIMIT = 180;
+export const OFFSET_DATE_BY_ONE = 1;
+export const PROJECTS_PER_PAGE = 50;
diff --git a/app/assets/javascripts/analytics/shared/graphql/projects.query.graphql b/app/assets/javascripts/analytics/shared/graphql/projects.query.graphql
new file mode 100644
index 00000000000..63e95d6804c
--- /dev/null
+++ b/app/assets/javascripts/analytics/shared/graphql/projects.query.graphql
@@ -0,0 +1,22 @@
+query getGroupProjects(
+ $groupFullPath: ID!
+ $search: String!
+ $first: Int!
+ $includeSubgroups: Boolean = false
+) {
+ group(fullPath: $groupFullPath) {
+ projects(
+ search: $search
+ first: $first
+ includeSubgroups: $includeSubgroups
+ sort: SIMILARITY
+ ) {
+ nodes {
+ id
+ name
+ avatarUrl
+ fullPath
+ }
+ }
+ }
+}
diff --git a/app/assets/javascripts/analytics/shared/utils.js b/app/assets/javascripts/analytics/shared/utils.js
new file mode 100644
index 00000000000..84189b675f2
--- /dev/null
+++ b/app/assets/javascripts/analytics/shared/utils.js
@@ -0,0 +1,4 @@
+export const filterBySearchTerm = (data = [], searchTerm = '', filterByKey = 'name') => {
+ if (!searchTerm?.length) return data;
+ return data.filter((item) => item[filterByKey].toLowerCase().includes(searchTerm.toLowerCase()));
+};
diff --git a/app/assets/javascripts/cycle_analytics/components/filter_bar.vue b/app/assets/javascripts/cycle_analytics/components/filter_bar.vue
new file mode 100644
index 00000000000..5140b05e189
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/filter_bar.vue
@@ -0,0 +1,142 @@
+<script>
+import { mapActions, mapState } from 'vuex';
+import { __ } from '~/locale';
+import {
+ OPERATOR_IS_ONLY,
+ DEFAULT_NONE_ANY,
+} from '~/vue_shared/components/filtered_search_bar/constants';
+import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
+import {
+ prepareTokens,
+ processFilters,
+ filterToQueryObject,
+} from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
+import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
+import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue';
+import MilestoneToken from '~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue';
+import UrlSync from '~/vue_shared/components/url_sync.vue';
+
+export default {
+ name: 'FilterBar',
+ components: {
+ FilteredSearchBar,
+ UrlSync,
+ },
+ props: {
+ groupPath: {
+ type: String,
+ required: true,
+ },
+ },
+ computed: {
+ ...mapState('filters', {
+ selectedMilestone: (state) => state.milestones.selected,
+ selectedAuthor: (state) => state.authors.selected,
+ selectedLabelList: (state) => state.labels.selectedList,
+ selectedAssigneeList: (state) => state.assignees.selectedList,
+ milestonesData: (state) => state.milestones.data,
+ labelsData: (state) => state.labels.data,
+ authorsData: (state) => state.authors.data,
+ assigneesData: (state) => state.assignees.data,
+ }),
+ tokens() {
+ return [
+ {
+ icon: 'clock',
+ title: __('Milestone'),
+ type: 'milestone',
+ token: MilestoneToken,
+ initialMilestones: this.milestonesData,
+ unique: true,
+ symbol: '%',
+ operators: OPERATOR_IS_ONLY,
+ fetchMilestones: this.fetchMilestones,
+ },
+ {
+ icon: 'labels',
+ title: __('Label'),
+ type: 'labels',
+ token: LabelToken,
+ defaultLabels: DEFAULT_NONE_ANY,
+ initialLabels: this.labelsData,
+ unique: false,
+ symbol: '~',
+ operators: OPERATOR_IS_ONLY,
+ fetchLabels: this.fetchLabels,
+ },
+ {
+ icon: 'pencil',
+ title: __('Author'),
+ type: 'author',
+ token: AuthorToken,
+ initialAuthors: this.authorsData,
+ unique: true,
+ operators: OPERATOR_IS_ONLY,
+ fetchAuthors: this.fetchAuthors,
+ },
+ {
+ icon: 'user',
+ title: __('Assignees'),
+ type: 'assignees',
+ token: AuthorToken,
+ defaultAuthors: [],
+ initialAuthors: this.assigneesData,
+ unique: false,
+ operators: OPERATOR_IS_ONLY,
+ fetchAuthors: this.fetchAssignees,
+ },
+ ];
+ },
+ query() {
+ return filterToQueryObject({
+ milestone_title: this.selectedMilestone,
+ author_username: this.selectedAuthor,
+ label_name: this.selectedLabelList,
+ assignee_username: this.selectedAssigneeList,
+ });
+ },
+ },
+ methods: {
+ ...mapActions('filters', [
+ 'setFilters',
+ 'fetchMilestones',
+ 'fetchLabels',
+ 'fetchAuthors',
+ 'fetchAssignees',
+ ]),
+ initialFilterValue() {
+ return prepareTokens({
+ milestone: this.selectedMilestone,
+ author: this.selectedAuthor,
+ assignees: this.selectedAssigneeList,
+ labels: this.selectedLabelList,
+ });
+ },
+ handleFilter(filters) {
+ const { labels, milestone, author, assignees } = processFilters(filters);
+
+ this.setFilters({
+ selectedAuthor: author ? author[0] : null,
+ selectedMilestone: milestone ? milestone[0] : null,
+ selectedAssigneeList: assignees || [],
+ selectedLabelList: labels || [],
+ });
+ },
+ },
+};
+</script>
+
+<template>
+ <div>
+ <filtered-search-bar
+ class="gl-flex-grow-1"
+ :namespace="groupPath"
+ recent-searches-storage-key="value-stream-analytics"
+ :search-input-placeholder="__('Filter results')"
+ :tokens="tokens"
+ :initial-filter-value="initialFilterValue()"
+ @onFilter="handleFilter"
+ />
+ <url-sync :query="query" />
+ </div>
+</template>
diff --git a/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue b/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue
new file mode 100644
index 00000000000..6b1e537dc77
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue
@@ -0,0 +1,93 @@
+<script>
+import DateRange from '~/analytics/shared/components/daterange.vue';
+import ProjectsDropdownFilter from '~/analytics/shared/components/projects_dropdown_filter.vue';
+import { DATE_RANGE_LIMIT, PROJECTS_PER_PAGE } from '~/analytics/shared/constants';
+import FilterBar from './filter_bar.vue';
+
+export default {
+ name: 'ValueStreamFilters',
+ components: {
+ DateRange,
+ ProjectsDropdownFilter,
+ FilterBar,
+ },
+ props: {
+ selectedProjects: {
+ type: Array,
+ required: false,
+ default: () => [],
+ },
+ hasProjectFilter: {
+ type: Boolean,
+ required: false,
+ default: true,
+ },
+ hasDateRangeFilter: {
+ type: Boolean,
+ required: false,
+ default: true,
+ },
+ groupId: {
+ type: Number,
+ required: true,
+ },
+ groupPath: {
+ type: String,
+ required: true,
+ },
+ startDate: {
+ type: Date,
+ required: false,
+ default: null,
+ },
+ endDate: {
+ type: Date,
+ required: false,
+ default: null,
+ },
+ },
+ computed: {
+ projectsQueryParams() {
+ return {
+ first: PROJECTS_PER_PAGE,
+ includeSubgroups: true,
+ };
+ },
+ },
+ multiProjectSelect: true,
+ maxDateRange: DATE_RANGE_LIMIT,
+};
+</script>
+<template>
+ <div class="gl-mt-3 gl-py-2 gl-px-3 bg-gray-light border-top border-bottom">
+ <filter-bar
+ class="js-filter-bar filtered-search-box gl-display-flex gl-mb-2 gl-mr-3 gl-border-none"
+ :group-path="groupPath"
+ />
+ <div
+ v-if="hasDateRangeFilter || hasProjectFilter"
+ class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-justify-content-space-between"
+ >
+ <projects-dropdown-filter
+ v-if="hasProjectFilter"
+ :key="groupId"
+ class="js-projects-dropdown-filter project-select gl-mb-2 gl-lg-mb-0"
+ :group-id="groupId"
+ :group-namespace="groupPath"
+ :query-params="projectsQueryParams"
+ :multi-select="$options.multiProjectSelect"
+ :default-projects="selectedProjects"
+ @selected="$emit('selectProject', $event)"
+ />
+ <date-range
+ v-if="hasDateRangeFilter"
+ :start-date="startDate"
+ :end-date="endDate"
+ :max-date-range="$options.maxDateRange"
+ :include-selected-date="true"
+ class="js-daterange-picker"
+ @change="$emit('setDateRange', $event)"
+ />
+ </div>
+ </div>
+</template>
diff --git a/app/assets/javascripts/cycle_analytics/constants.js b/app/assets/javascripts/cycle_analytics/constants.js
index 96c89049e90..97f502326e5 100644
--- a/app/assets/javascripts/cycle_analytics/constants.js
+++ b/app/assets/javascripts/cycle_analytics/constants.js
@@ -1,3 +1,4 @@
+export const DEFAULT_DAYS_IN_PAST = 30;
export const DEFAULT_DAYS_TO_DISPLAY = 30;
export const OVERVIEW_STAGE_ID = 'overview';
diff --git a/app/assets/javascripts/cycle_analytics/store/actions.js b/app/assets/javascripts/cycle_analytics/store/actions.js
index faf1c37d86a..ab852cbbb2d 100644
--- a/app/assets/javascripts/cycle_analytics/store/actions.js
+++ b/app/assets/javascripts/cycle_analytics/store/actions.js
@@ -92,6 +92,8 @@ const refetchData = (dispatch, commit) => {
.finally(() => commit(types.SET_LOADING, false));
};
+export const setFilters = ({ dispatch, commit }) => refetchData(dispatch, commit);
+
export const setDateRange = ({ dispatch, commit }, { startDate = DEFAULT_DAYS_TO_DISPLAY }) => {
commit(types.SET_DATE_RANGE, { startDate });
return refetchData(dispatch, commit);
diff --git a/app/assets/javascripts/cycle_analytics/store/index.js b/app/assets/javascripts/cycle_analytics/store/index.js
index c6ca88ea492..76e3e835016 100644
--- a/app/assets/javascripts/cycle_analytics/store/index.js
+++ b/app/assets/javascripts/cycle_analytics/store/index.js
@@ -7,6 +7,7 @@
import Vue from 'vue';
import Vuex from 'vuex';
+import filters from '~/vue_shared/components/filtered_search_bar/store/modules/filters';
import * as actions from './actions';
import * as getters from './getters';
import mutations from './mutations';
@@ -20,4 +21,5 @@ export default () =>
getters,
mutations,
state,
+ modules: { filters },
});
diff --git a/doc/development/features_inside_dot_gitlab.md b/doc/development/features_inside_dot_gitlab.md
index 36b9064bbc4..4631ab3a471 100644
--- a/doc/development/features_inside_dot_gitlab.md
+++ b/doc/development/features_inside_dot_gitlab.md
@@ -13,7 +13,7 @@ When implementing new features, please refer to these existing features to avoid
- [Issue Templates](../user/project/description_templates.md#create-an-issue-template): `.gitlab/issue_templates/`.
- [Merge Request Templates](../user/project/description_templates.md#create-a-merge-request-template): `.gitlab/merge_request_templates/`.
- [GitLab Kubernetes Agents](https://gitlab.com/gitlab-org/cluster-integration/gitlab-agent/-/blob/master/doc/configuration_repository.md#layout): `.gitlab/agents/`.
-- [CODEOWNERS](../user/project/code_owners.md#how-to-set-up-code-owners): `.gitlab/CODEOWNERS`.
+- [CODEOWNERS](../user/project/code_owners.md#set-up-code-owners): `.gitlab/CODEOWNERS`.
- [Route Maps](../ci/review_apps/#route-maps): `.gitlab/route-map.yml`.
- [Customize Auto DevOps Helm Values](../topics/autodevops/customize.md#customize-values-for-helm-chart): `.gitlab/auto-deploy-values.yaml`.
- [GitLab managed apps CI/CD](../user/clusters/applications.md#usage): `.gitlab/managed-apps/config.yaml`.
diff --git a/doc/user/group/value_stream_analytics/index.md b/doc/user/group/value_stream_analytics/index.md
index 737a068b5e7..773d41947e2 100644
--- a/doc/user/group/value_stream_analytics/index.md
+++ b/doc/user/group/value_stream_analytics/index.md
@@ -65,7 +65,8 @@ To filter results:
> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/13216) in GitLab 12.4.
-GitLab provides the ability to filter analytics based on a date range. Data is shown for workflow items created during the selected date range. To filter results:
+GitLab provides the ability to filter analytics based on a date range.
+Data is shown for workflow items created during the selected date range. To filter results:
1. Select a group.
1. Optionally select a project.
@@ -82,13 +83,16 @@ The "Time" metrics near the top of the page are measured as follows:
The "Recent Activity" metrics near the top of the page are measured as follows:
- **New Issues:** the number of issues created in the date range.
-- **Deploys:** the number of deployments to production (1) in the date range.
-- **Deployment Frequency:** the average number of deployments to production (1) per day in the date range.
+- **Deploys:** the number of deployments <sup>1</sup> to production <sup>2</sup> in the date range.
+- **Deployment Frequency:** the average number of deployments <sup>1</sup> to production <sup>2</sup>
+ per day in the date range.
-(1) To give a more accurate representation of deployments that actually completed successfully,
-the calculation for these two metrics changed in GitLab 13.9 from using the time a deployment was
-created to the time a deployment finished. If you were referencing this metric prior to 13.9, please
-keep this slight change in mind.
+1. To give a more accurate representation of deployments that actually completed successfully,
+ the calculation for these two metrics changed in GitLab 13.9 from using the time a deployment was
+ created to the time a deployment finished. If you were referencing this metric prior to 13.9, please
+ keep this slight change in mind.
+1. To see deployment metrics, you must have a
+ [production environment configured](../../../ci/environments/index.md#deployment-tier-of-environments).
You can learn more about these metrics in our [analytics definitions](../../analytics/index.md).
@@ -105,7 +109,7 @@ Each stage of Value Stream Analytics is further described in the table below.
| **Stage** | **Description** |
| --------- | --------------- |
| Issue | Measures the median time between creating an issue and taking action to solve it, by either labeling it or adding it to a milestone, whatever comes first. The label is tracked only if it already has an [Issue Board list](../../project/issue_board.md) created for it. |
-| Plan | Measures the median time between the action you took for the previous stage, and pushing the first commit to the branch. The very first commit of the branch is the one that triggers the separation between **Plan** and **Code**, and at least one of the commits in the branch needs to contain the related issue number (e.g., `#42`). If none of the commits in the branch mention the related issue number, it is not considered to the measurement time of the stage. |
+| Plan | Measures the median time between the action you took for the previous stage, and pushing the first commit to the branch. The very first commit of the branch is the one that triggers the separation between **Plan** and **Code**, and at least one of the commits in the branch needs to contain the related issue number (for example, `#42`). If none of the commits in the branch mention the related issue number, it is not considered to the measurement time of the stage. |
| Code | Measures the median time between pushing a first commit (previous stage) and creating a merge request (MR) related to that commit. The key to keep the process tracked is to include the [issue closing pattern](../../project/issues/managing_issues.md#closing-issues-automatically) to the description of the merge request (for example, `Closes #xxx`, where `xxx` is the number of the issue related to this merge request). If the closing pattern is not present, then the calculation takes the creation time of the first commit in the merge request as the start time. |
| Test | Measures the median time to run the entire pipeline for that project. It's related to the time GitLab CI/CD takes to run every job for the commits pushed to that merge request defined in the previous stage. It is basically the start->finish time for all pipelines. |
| Review | Measures the median time taken to review the merge request that has a closing issue pattern, between its creation and until it's merged. |
@@ -121,7 +125,7 @@ How this works, behind the scenes:
by the UI - default is 90 days). So it prohibits these pairs from being considered.
1. For the remaining `<issue, merge request>` pairs, we check the information that
we need for the stages, like issue creation date, merge request merge time,
- etc.
+ and so on.
To sum up, anything that doesn't follow [GitLab flow](../../../topics/gitlab_flow.md) is not tracked and the
Value Stream Analytics dashboard does not present any data for:
@@ -144,7 +148,7 @@ You can change the name of a project environment in your GitLab CI/CD configurat
## Example workflow
-Below is a simple fictional workflow of a single cycle that happens in a
+Below is an example workflow of a single cycle that happens in a
single day through all noted stages. Note that if a stage does not include a start
and a stop time, its data is not included in the median time. It is assumed that
milestones are created and a CI for testing and setting environments is configured.
@@ -159,7 +163,8 @@ environments is configured.
12:00.
1. Make a second commit to the branch which mentions the issue number at 12.30
(stop of **Plan** stage / start of **Code** stage).
-1. Push branch and create a merge request that contains the [issue closing pattern](../../project/issues/managing_issues.md#closing-issues-automatically)
+1. Push branch and create a merge request that contains the
+ [issue closing pattern](../../project/issues/managing_issues.md#closing-issues-automatically)
in its description at 14:00 (stop of **Code** stage / start of **Test** and
**Review** stages).
1. The CI starts running your scripts defined in [`.gitlab-ci.yml`](../../../ci/yaml/index.md) and
@@ -185,7 +190,7 @@ A few notes:
commit doesn't mention the issue number, you can do this later in any commit
of the branch you are working on.
- You can see that the **Test** stage is not calculated to the overall time of
- the cycle since it is included in the **Review** process (every MR should be
+ the cycle, because it is included in the **Review** process (every MR should be
tested).
- The example above was just **one cycle** of the seven stages. Add multiple
cycles, calculate their median time and the result is what the dashboard of
@@ -381,7 +386,7 @@ This chart visually depicts the average number of days it takes for cycles to be
This chart uses the global page filters for displaying data based on the selected
group, projects, and time frame. In addition, specific stages can be selected
-from within the chart itself.
+from the chart itself.
The chart data is limited to the last 500 items.
diff --git a/doc/user/project/code_owners.md b/doc/user/project/code_owners.md
index 790836ddbd9..2a60c06814b 100644
--- a/doc/user/project/code_owners.md
+++ b/doc/user/project/code_owners.md
@@ -11,56 +11,56 @@ type: reference
> - Code Owners for Merge Request approvals was [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/4418) in GitLab Premium 11.9.
> - Moved to GitLab Premium in 13.9.
-## Introduction
+Code Owners define who owns specific files or paths in a repository.
+You can require that Code Owners approve a merge request before it's merged.
-When contributing to a project, it can often be difficult
-to find out who should review or approve merge requests.
-Additionally, if you have a question over a specific file or
-code block, it may be difficult to know who to find the answer from.
+Code Owners help you determine who should review or approve merge requests.
+If you have a question about a file or feature, Code Owners
+can help you find someone who knows the answer.
-The GitLab Code Owners feature defines who owns specific
-files or paths in a repository, allowing other users to understand
-who is responsible for each file or path.
+If you don't want to use Code Owners for approvals, you can
+[configure rules](merge_requests/approvals/rules.md) instead.
-As an alternative to using Code Owners for approvals, you can instead
-[configure rules](merge_requests/approvals/rules.md).
+## Set up Code Owners
-## Why is this useful?
+You can specify users or [shared groups](members/share_project_with_groups.md)
+that are responsible for specific files and directories in a repository.
-Code Owners allows for a version controlled, single source of
-truth file outlining the exact GitLab users or groups that
-own certain files or paths in a repository. In larger organizations
-or popular open source projects, Code Owners can help you understand
-who to contact if you have a question about a specific portion of
-the codebase. Code Owners can also streamline the merge request approval
-process, identifying the most relevant reviewers and approvers for a
-given change.
+To set up Code Owners:
-## How to set up Code Owners
+1. Choose the location where you want to specify Code Owners:
+ - In the root directory of the repository
+ - In the `.gitlab/` directory
+ - In the `docs/` directory
-You can use a `CODEOWNERS` file to specify users or
-[shared groups](members/share_project_with_groups.md)
-that are responsible for specific files and directories in a repository.
+1. In that location, create a file named `CODEOWNERS`.
+
+1. In the file, enter text that follows one of these patterns:
+
+ ```plaintext
+ # A member as Code Owner of a file
+ filename @username
+
+ # A member as Code Owner of a directory
+ directory @username
-You can choose to add the `CODEOWNERS` file in three places:
+ # All group members as Code Owners of a file
+ filename @groupname
-- To the root directory of the repository
-- Inside the `.gitlab/` directory
-- Inside the `docs/` directory
+ # All group members as Code Owners of a directory
+ directory @groupname
+ ```
-The `CODEOWNERS` file is valid for the branch where it lives. For example, if you change the code owners
-in a feature branch, the changes aren't valid in the main branch until the feature branch is merged.
+The Code Owners are displayed in the UI by the files or directory they apply to.
+These owners apply to this branch only. When you add new files to the repository,
+you should update the `CODEOWNERS` file.
-If you introduce new files to your repository and you want to identify the code owners for that file,
-you must update `CODEOWNERS` accordingly. If you update the code owners when you are adding the files (in the same
-branch), GitLab counts the owners as soon as the branch is merged. If
-you don't, you can do that later, but your new files don't belong to anyone until you update your
-`CODEOWNERS` file in the TARGET branch.
+## When a file matches multiple `CODEOWNERS` entries
When a file matches multiple entries in the `CODEOWNERS` file,
-the users from last pattern matching the file are displayed on the
-blob page of the given file. For example, you have the following
-`CODEOWNERS` file:
+the users from last pattern matching the file are used.
+
+For example, in the following `CODEOWNERS` file:
```plaintext
README.md @user1
@@ -94,7 +94,7 @@ without using [Approval Rules](merge_requests/approvals/rules.md):
1. Create the file in one of the three locations specified above.
1. Set the code owners as required approvers for
[protected branches](protected_branches.md#require-code-owner-approval-on-a-protected-branch).
-1. Use [the syntax of Code Owners files](code_owners.md#the-syntax-of-code-owners-files)
+1. Use [the syntax of Code Owners files](code_owners.md)
to specify the actual owners and granular permissions.
Using Code Owners in conjunction with [protected branches](protected_branches.md#require-code-owner-approval-on-a-protected-branch)
@@ -107,20 +107,7 @@ Code Owners is required.
[Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/35097) in [GitLab Premium](https://about.gitlab.com/pricing/) 13.5, users and groups who are allowed to push to protected branches do not require a merge request to merge their feature branches. Thus, they can skip merge request approval rules, Code Owners included.
-## The syntax of Code Owners files
-
-Files can be specified using the same kind of patterns you would use
-in the `.gitignore` file followed by one or more of:
-
-- A user's `@username`.
-- A user's email address.
-- The `@name` of one or more groups that should be owners of the file.
-- Lines starting with `#` are ignored.
-
-The path definition order is significant: the last pattern
-matching a given path is used to find the code owners.
-
-### Groups as Code Owners
+## Groups as Code Owners
> - [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/53182) in GitLab 12.1.
> - Group and subgroup hierarchy support was [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/32432) in GitLab 13.0.
diff --git a/package.json b/package.json
index a3b26bbe027..72338e8d712 100644
--- a/package.json
+++ b/package.json
@@ -195,7 +195,7 @@
},
"devDependencies": {
"@babel/plugin-transform-modules-commonjs": "^7.10.1",
- "@gitlab/eslint-plugin": "9.0.0",
+ "@gitlab/eslint-plugin": "9.0.2",
"@gitlab/stylelint-config": "2.3.0",
"@testing-library/dom": "^7.16.2",
"@vue/test-utils": "1.2.0",
@@ -209,7 +209,7 @@
"commander": "^2.18.0",
"custom-jquery-matchers": "^2.1.0",
"docdash": "^1.0.2",
- "eslint": "7.29.0",
+ "eslint": "7.30.0",
"eslint-import-resolver-jest": "3.0.0",
"eslint-import-resolver-webpack": "0.13.1",
"eslint-plugin-jasmine": "4.1.2",
diff --git a/spec/frontend/analytics/shared/components/daterange_spec.js b/spec/frontend/analytics/shared/components/daterange_spec.js
new file mode 100644
index 00000000000..3b7574c1947
--- /dev/null
+++ b/spec/frontend/analytics/shared/components/daterange_spec.js
@@ -0,0 +1,120 @@
+import { GlDaterangePicker } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import { useFakeDate } from 'helpers/fake_date';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import Daterange from '~/analytics/shared/components/daterange.vue';
+
+const defaultProps = {
+ startDate: new Date(2019, 8, 1),
+ endDate: new Date(2019, 8, 11),
+};
+
+describe('Daterange component', () => {
+ useFakeDate(2019, 8, 25);
+
+ let wrapper;
+
+ const factory = (props = defaultProps) => {
+ wrapper = mount(Daterange, {
+ propsData: {
+ ...defaultProps,
+ ...props,
+ },
+ directives: { GlTooltip: createMockDirective() },
+ });
+ };
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ const findDaterangePicker = () => wrapper.find(GlDaterangePicker);
+
+ const findDateRangeIndicator = () => wrapper.find('.daterange-indicator');
+
+ describe('template', () => {
+ describe('when show is false', () => {
+ it('does not render the daterange picker', () => {
+ factory({ show: false });
+ expect(findDaterangePicker().exists()).toBe(false);
+ });
+ });
+
+ describe('when show is true', () => {
+ it('renders the daterange picker', () => {
+ factory({ show: true });
+ expect(findDaterangePicker().exists()).toBe(true);
+ });
+ });
+
+ describe('with a minDate being set', () => {
+ it('emits the change event with the minDate when the user enters a start date before the minDate', () => {
+ const startDate = new Date('2019-09-01');
+ const endDate = new Date('2019-09-30');
+ const minDate = new Date('2019-06-01');
+
+ factory({ show: true, startDate, endDate, minDate });
+
+ const input = findDaterangePicker().find('input');
+
+ input.setValue('2019-01-01');
+ input.trigger('change');
+
+ return wrapper.vm.$nextTick().then(() => {
+ expect(wrapper.emitted().change).toEqual([[{ startDate: minDate, endDate }]]);
+ });
+ });
+ });
+
+ describe('with a maxDateRange being set', () => {
+ beforeEach(() => {
+ factory({ maxDateRange: 30 });
+ });
+
+ it('displays the max date range indicator', () => {
+ expect(findDateRangeIndicator().exists()).toBe(true);
+ });
+
+ it('displays the correct number of selected days in the indicator', () => {
+ expect(findDateRangeIndicator().find('span').text()).toBe('10 days');
+ });
+
+ it('displays a tooltip', () => {
+ const icon = wrapper.find('[data-testid="helper-icon"]');
+ const tooltip = getBinding(icon.element, 'gl-tooltip');
+
+ expect(tooltip).toBeDefined();
+ expect(icon.attributes('title')).toBe(
+ 'Showing data for workflow items created in this date range. Date range cannot exceed 30 days.',
+ );
+ });
+ });
+ });
+
+ describe('computed', () => {
+ describe('dateRange', () => {
+ beforeEach(() => {
+ factory({ show: true });
+ });
+
+ describe('set', () => {
+ it('emits the change event with an object containing startDate and endDate', () => {
+ const startDate = new Date('2019-10-01');
+ const endDate = new Date('2019-10-05');
+ wrapper.vm.dateRange = { startDate, endDate };
+
+ expect(wrapper.emitted().change).toEqual([[{ startDate, endDate }]]);
+ });
+ });
+
+ describe('get', () => {
+ it("returns value of dateRange from state's startDate and endDate", () => {
+ expect(wrapper.vm.dateRange).toEqual({
+ startDate: defaultProps.startDate,
+ endDate: defaultProps.endDate,
+ });
+ });
+ });
+ });
+ });
+});
diff --git a/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js b/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
new file mode 100644
index 00000000000..4bb244df8ac
--- /dev/null
+++ b/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
@@ -0,0 +1,261 @@
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import { TEST_HOST } from 'helpers/test_constants';
+import ProjectsDropdownFilter from '~/analytics/shared/components/projects_dropdown_filter.vue';
+import getProjects from '~/analytics/shared/graphql/projects.query.graphql';
+
+const projects = [
+ {
+ id: 'gid://gitlab/Project/1',
+ name: 'Gitlab Test',
+ fullPath: 'gitlab-org/gitlab-test',
+ avatarUrl: `${TEST_HOST}/images/home/nasa.svg`,
+ },
+ {
+ id: 'gid://gitlab/Project/2',
+ name: 'Gitlab Shell',
+ fullPath: 'gitlab-org/gitlab-shell',
+ avatarUrl: null,
+ },
+ {
+ id: 'gid://gitlab/Project/3',
+ name: 'Foo',
+ fullPath: 'gitlab-org/foo',
+ avatarUrl: null,
+ },
+];
+
+const defaultMocks = {
+ $apollo: {
+ query: jest.fn().mockResolvedValue({
+ data: { group: { projects: { nodes: projects } } },
+ }),
+ },
+};
+
+let spyQuery;
+
+describe('ProjectsDropdownFilter component', () => {
+ let wrapper;
+
+ const createComponent = (props = {}) => {
+ spyQuery = defaultMocks.$apollo.query;
+ wrapper = mount(ProjectsDropdownFilter, {
+ mocks: { ...defaultMocks },
+ propsData: {
+ groupId: 1,
+ groupNamespace: 'gitlab-org',
+ ...props,
+ },
+ });
+ };
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ const findDropdown = () => wrapper.find(GlDropdown);
+
+ const findDropdownItems = () =>
+ findDropdown()
+ .findAll(GlDropdownItem)
+ .filter((w) => w.text() !== 'No matching results');
+
+ const findDropdownAtIndex = (index) => findDropdownItems().at(index);
+
+ const findDropdownButton = () => findDropdown().find('.dropdown-toggle');
+ const findDropdownButtonAvatar = () => findDropdown().find('.gl-avatar');
+ const findDropdownButtonAvatarAtIndex = (index) =>
+ findDropdownAtIndex(index).find('img.gl-avatar');
+ const findDropdownButtonIdentIconAtIndex = (index) =>
+ findDropdownAtIndex(index).find('div.gl-avatar-identicon');
+
+ const findDropdownNameAtIndex = (index) =>
+ findDropdownAtIndex(index).find('[data-testid="project-name"');
+ const findDropdownFullPathAtIndex = (index) =>
+ findDropdownAtIndex(index).find('[data-testid="project-full-path"]');
+
+ const selectDropdownItemAtIndex = (index) =>
+ findDropdownAtIndex(index).find('button').trigger('click');
+
+ describe('queryParams are applied when fetching data', () => {
+ beforeEach(() => {
+ createComponent({
+ queryParams: {
+ first: 50,
+ includeSubgroups: true,
+ },
+ });
+ });
+
+ it('applies the correct queryParams when making an api call', async () => {
+ wrapper.setData({ searchTerm: 'gitlab' });
+
+ expect(spyQuery).toHaveBeenCalledTimes(1);
+
+ await wrapper.vm.$nextTick(() => {
+ expect(spyQuery).toHaveBeenCalledWith({
+ query: getProjects,
+ variables: {
+ search: 'gitlab',
+ groupFullPath: wrapper.vm.groupNamespace,
+ first: 50,
+ includeSubgroups: true,
+ },
+ });
+ });
+ });
+ });
+
+ describe('when passed a an array of defaultProject as prop', () => {
+ beforeEach(() => {
+ createComponent({
+ defaultProjects: [projects[0]],
+ });
+ });
+
+ it("displays the defaultProject's name", () => {
+ expect(findDropdownButton().text()).toContain(projects[0].name);
+ });
+
+ it("renders the defaultProject's avatar", () => {
+ expect(findDropdownButtonAvatar().exists()).toBe(true);
+ });
+
+ it('marks the defaultProject as selected', () => {
+ expect(findDropdownAtIndex(0).props('isChecked')).toBe(true);
+ });
+ });
+
+ describe('when multiSelect is false', () => {
+ beforeEach(() => {
+ createComponent({ multiSelect: false });
+ });
+
+ describe('displays the correct information', () => {
+ it('contains 3 items', () => {
+ expect(findDropdownItems()).toHaveLength(3);
+ });
+
+ it('renders an avatar when the project has an avatarUrl', () => {
+ expect(findDropdownButtonAvatarAtIndex(0).exists()).toBe(true);
+ expect(findDropdownButtonIdentIconAtIndex(0).exists()).toBe(false);
+ });
+
+ it("renders an identicon when the project doesn't have an avatarUrl", () => {
+ expect(findDropdownButtonAvatarAtIndex(1).exists()).toBe(false);
+ expect(findDropdownButtonIdentIconAtIndex(1).exists()).toBe(true);
+ });
+
+ it('renders the project name', () => {
+ projects.forEach((project, index) => {
+ expect(findDropdownNameAtIndex(index).text()).toBe(project.name);
+ });
+ });
+
+ it('renders the project fullPath', () => {
+ projects.forEach((project, index) => {
+ expect(findDropdownFullPathAtIndex(index).text()).toBe(project.fullPath);
+ });
+ });
+ });
+
+ describe('on project click', () => {
+ it('should emit the "selected" event with the selected project', () => {
+ selectDropdownItemAtIndex(0);
+
+ expect(wrapper.emitted().selected).toEqual([[[projects[0]]]]);
+ });
+
+ it('should change selection when new project is clicked', () => {
+ selectDropdownItemAtIndex(1);
+
+ expect(wrapper.emitted().selected).toEqual([[[projects[1]]]]);
+ });
+
+ it('selection should be emptied when a project is deselected', () => {
+ selectDropdownItemAtIndex(0); // Select the item
+ selectDropdownItemAtIndex(0); // deselect it
+
+ expect(wrapper.emitted().selected).toEqual([[[projects[0]]], [[]]]);
+ });
+
+ it('renders an avatar in the dropdown button when the project has an avatarUrl', async () => {
+ selectDropdownItemAtIndex(0);
+
+ await wrapper.vm.$nextTick().then(() => {
+ expect(findDropdownButtonAvatarAtIndex(0).exists()).toBe(true);
+ expect(findDropdownButtonIdentIconAtIndex(0).exists()).toBe(false);
+ });
+ });
+
+ it("renders an identicon in the dropdown button when the project doesn't have an avatarUrl", async () => {
+ selectDropdownItemAtIndex(1);
+
+ await wrapper.vm.$nextTick().then(() => {
+ expect(findDropdownButtonAvatarAtIndex(1).exists()).toBe(false);
+ expect(findDropdownButtonIdentIconAtIndex(1).exists()).toBe(true);
+ });
+ });
+ });
+ });
+
+ describe('when multiSelect is true', () => {
+ beforeEach(() => {
+ createComponent({ multiSelect: true });
+ });
+
+ describe('displays the correct information', () => {
+ it('contains 3 items', () => {
+ expect(findDropdownItems()).toHaveLength(3);
+ });
+
+ it('renders an avatar when the project has an avatarUrl', () => {
+ expect(findDropdownButtonAvatarAtIndex(0).exists()).toBe(true);
+ expect(findDropdownButtonIdentIconAtIndex(0).exists()).toBe(false);
+ });
+
+ it("renders an identicon when the project doesn't have an avatarUrl", () => {
+ expect(findDropdownButtonAvatarAtIndex(1).exists()).toBe(false);
+ expect(findDropdownButtonIdentIconAtIndex(1).exists()).toBe(true);
+ });
+
+ it('renders the project name', () => {
+ projects.forEach((project, index) => {
+ expect(findDropdownNameAtIndex(index).text()).toBe(project.name);
+ });
+ });
+
+ it('renders the project fullPath', () => {
+ projects.forEach((project, index) => {
+ expect(findDropdownFullPathAtIndex(index).text()).toBe(project.fullPath);
+ });
+ });
+ });
+
+ describe('on project click', () => {
+ it('should add to selection when new project is clicked', () => {
+ selectDropdownItemAtIndex(0);
+ selectDropdownItemAtIndex(1);
+
+ expect(wrapper.emitted().selected).toEqual([[[projects[0]]], [[projects[0], projects[1]]]]);
+ });
+
+ it('should remove from selection when clicked again', () => {
+ selectDropdownItemAtIndex(0);
+ selectDropdownItemAtIndex(0);
+
+ expect(wrapper.emitted().selected).toEqual([[[projects[0]]], [[]]]);
+ });
+
+ it('renders the correct placeholder text when multiple projects are selected', async () => {
+ selectDropdownItemAtIndex(0);
+ selectDropdownItemAtIndex(1);
+
+ await wrapper.vm.$nextTick().then(() => {
+ expect(findDropdownButton().text()).toBe('2 projects selected');
+ });
+ });
+ });
+ });
+});
diff --git a/spec/frontend/analytics/shared/utils_spec.js b/spec/frontend/analytics/shared/utils_spec.js
new file mode 100644
index 00000000000..e3293f2d8bd
--- /dev/null
+++ b/spec/frontend/analytics/shared/utils_spec.js
@@ -0,0 +1,24 @@
+import { filterBySearchTerm } from '~/analytics/shared/utils';
+
+describe('filterBySearchTerm', () => {
+ const data = [
+ { name: 'eins', title: 'one' },
+ { name: 'zwei', title: 'two' },
+ { name: 'drei', title: 'three' },
+ ];
+ const searchTerm = 'rei';
+
+ it('filters data by `name` for the provided search term', () => {
+ expect(filterBySearchTerm(data, searchTerm)).toEqual([data[2]]);
+ });
+
+ it('with no search term returns the data', () => {
+ ['', null].forEach((search) => {
+ expect(filterBySearchTerm(data, search)).toEqual(data);
+ });
+ });
+
+ it('with a key, filters by the provided key', () => {
+ expect(filterBySearchTerm(data, 'ne', 'title')).toEqual([data[0]]);
+ });
+});
diff --git a/spec/frontend/cycle_analytics/filter_bar_spec.js b/spec/frontend/cycle_analytics/filter_bar_spec.js
new file mode 100644
index 00000000000..407f21bd956
--- /dev/null
+++ b/spec/frontend/cycle_analytics/filter_bar_spec.js
@@ -0,0 +1,224 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import Vuex from 'vuex';
+import {
+ filterMilestones,
+ filterLabels,
+} from 'jest/vue_shared/components/filtered_search_bar/store/modules/filters/mock_data';
+import FilterBar from '~/cycle_analytics/components/filter_bar.vue';
+import storeConfig from '~/cycle_analytics/store';
+import * as commonUtils from '~/lib/utils/common_utils';
+import * as urlUtils from '~/lib/utils/url_utility';
+import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
+import * as utils from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
+import initialFiltersState from '~/vue_shared/components/filtered_search_bar/store/modules/filters/state';
+import UrlSync from '~/vue_shared/components/url_sync.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const milestoneTokenType = 'milestone';
+const labelsTokenType = 'labels';
+const authorTokenType = 'author';
+const assigneesTokenType = 'assignees';
+
+const initialFilterBarState = {
+ selectedMilestone: null,
+ selectedAuthor: null,
+ selectedAssigneeList: null,
+ selectedLabelList: null,
+};
+
+const defaultParams = {
+ milestone_title: null,
+ 'not[milestone_title]': null,
+ author_username: null,
+ 'not[author_username]': null,
+ assignee_username: null,
+ 'not[assignee_username]': null,
+ label_name: null,
+ 'not[label_name]': null,
+};
+
+async function shouldMergeUrlParams(wrapper, result) {
+ await wrapper.vm.$nextTick();
+ expect(urlUtils.mergeUrlParams).toHaveBeenCalledWith(result, window.location.href, {
+ spreadArrays: true,
+ });
+ expect(commonUtils.historyPushState).toHaveBeenCalled();
+}
+
+describe('Filter bar', () => {
+ let wrapper;
+ let store;
+ let mock;
+
+ let setFiltersMock;
+
+ const createStore = (initialState = {}) => {
+ setFiltersMock = jest.fn();
+
+ return new Vuex.Store({
+ modules: {
+ filters: {
+ namespaced: true,
+ state: {
+ ...initialFiltersState(),
+ ...initialState,
+ },
+ actions: {
+ setFilters: setFiltersMock,
+ },
+ },
+ },
+ });
+ };
+
+ const createComponent = (initialStore) => {
+ return shallowMount(FilterBar, {
+ localVue,
+ store: initialStore,
+ propsData: {
+ groupPath: 'foo',
+ },
+ stubs: {
+ UrlSync,
+ },
+ });
+ };
+
+ beforeEach(() => {
+ mock = new MockAdapter(axios);
+ });
+
+ afterEach(() => {
+ wrapper.destroy();
+ mock.restore();
+ });
+
+ const selectedMilestone = [filterMilestones[0]];
+ const selectedLabelList = [filterLabels[0]];
+
+ const findFilteredSearch = () => wrapper.findComponent(FilteredSearchBar);
+ const getSearchToken = (type) =>
+ findFilteredSearch()
+ .props('tokens')
+ .find((token) => token.type === type);
+
+ describe('default', () => {
+ beforeEach(() => {
+ store = createStore();
+ wrapper = createComponent(store);
+ });
+
+ it('renders FilteredSearchBar component', () => {
+ expect(findFilteredSearch().exists()).toBe(true);
+ });
+ });
+
+ describe('when the state has data', () => {
+ beforeEach(() => {
+ store = createStore({
+ milestones: { data: selectedMilestone },
+ labels: { data: selectedLabelList },
+ authors: { data: [] },
+ assignees: { data: [] },
+ });
+ wrapper = createComponent(store);
+ });
+
+ it('displays the milestone and label token', () => {
+ const tokens = findFilteredSearch().props('tokens');
+
+ expect(tokens).toHaveLength(4);
+ expect(tokens[0].type).toBe(milestoneTokenType);
+ expect(tokens[1].type).toBe(labelsTokenType);
+ expect(tokens[2].type).toBe(authorTokenType);
+ expect(tokens[3].type).toBe(assigneesTokenType);
+ });
+
+ it('provides the initial milestone token', () => {
+ const { initialMilestones: milestoneToken } = getSearchToken(milestoneTokenType);
+
+ expect(milestoneToken).toHaveLength(selectedMilestone.length);
+ });
+
+ it('provides the initial label token', () => {
+ const { initialLabels: labelToken } = getSearchToken(labelsTokenType);
+
+ expect(labelToken).toHaveLength(selectedLabelList.length);
+ });
+ });
+
+ describe('when the user interacts', () => {
+ beforeEach(() => {
+ store = createStore({
+ milestones: { data: filterMilestones },
+ labels: { data: filterLabels },
+ });
+ wrapper = createComponent(store);
+ jest.spyOn(utils, 'processFilters');
+ });
+
+ it('clicks on the search button, setFilters is dispatched', () => {
+ const filters = [
+ { type: 'milestone', value: { data: selectedMilestone[0].title, operator: '=' } },
+ { type: 'labels', value: { data: selectedLabelList[0].title, operator: '=' } },
+ ];
+
+ findFilteredSearch().vm.$emit('onFilter', filters);
+
+ expect(utils.processFilters).toHaveBeenCalledWith(filters);
+
+ expect(setFiltersMock).toHaveBeenCalledWith(expect.anything(), {
+ selectedLabelList: [{ value: selectedLabelList[0].title, operator: '=' }],
+ selectedMilestone: { value: selectedMilestone[0].title, operator: '=' },
+ selectedAssigneeList: [],
+ selectedAuthor: null,
+ });
+ });
+ });
+
+ describe.each([
+ ['selectedMilestone', 'milestone_title', { value: '12.0', operator: '=' }, '12.0'],
+ ['selectedAuthor', 'author_username', { value: 'rootUser', operator: '=' }, 'rootUser'],
+ [
+ 'selectedLabelList',
+ 'label_name',
+ [
+ { value: 'Afternix', operator: '=' },
+ { value: 'Brouceforge', operator: '=' },
+ ],
+ ['Afternix', 'Brouceforge'],
+ ],
+ [
+ 'selectedAssigneeList',
+ 'assignee_username',
+ [
+ { value: 'rootUser', operator: '=' },
+ { value: 'secondaryUser', operator: '=' },
+ ],
+ ['rootUser', 'secondaryUser'],
+ ],
+ ])('with a %s updates the %s url parameter', (stateKey, paramKey, payload, result) => {
+ beforeEach(() => {
+ commonUtils.historyPushState = jest.fn();
+ urlUtils.mergeUrlParams = jest.fn();
+
+ mock = new MockAdapter(axios);
+ wrapper = createComponent(storeConfig);
+
+ wrapper.vm.$store.dispatch('filters/setFilters', {
+ ...initialFilterBarState,
+ [stateKey]: payload,
+ });
+ });
+ it(`sets the ${paramKey} url parameter`, () => {
+ return shouldMergeUrlParams(wrapper, {
+ ...defaultParams,
+ [paramKey]: result,
+ });
+ });
+ });
+});
diff --git a/spec/frontend/cycle_analytics/mock_data.js b/spec/frontend/cycle_analytics/mock_data.js
index 242ea1932fb..9b6385dc523 100644
--- a/spec/frontend/cycle_analytics/mock_data.js
+++ b/spec/frontend/cycle_analytics/mock_data.js
@@ -1,5 +1,10 @@
-import { DEFAULT_VALUE_STREAM } from '~/cycle_analytics/constants';
+import { TEST_HOST } from 'helpers/test_constants';
+import { DEFAULT_VALUE_STREAM, DEFAULT_DAYS_IN_PAST } from '~/cycle_analytics/constants';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { getDateInPast } from '~/lib/utils/datetime_utility';
+
+export const createdBefore = new Date(2019, 0, 14);
+export const createdAfter = getDateInPast(createdBefore, DEFAULT_DAYS_IN_PAST);
export const getStageByTitle = (stages, title) =>
stages.find((stage) => stage.title && stage.title.toLowerCase().trim() === title) || {};
@@ -212,6 +217,31 @@ export const transformedProjectStagePathData = [
export const selectedValueStream = DEFAULT_VALUE_STREAM;
+export const group = {
+ id: 1,
+ name: 'foo',
+ path: 'foo',
+ full_path: 'foo',
+ avatar_url: `${TEST_HOST}/images/home/nasa.svg`,
+};
+
+export const currentGroup = convertObjectPropsToCamelCase(group, { deep: true });
+
+export const selectedProjects = [
+ {
+ id: 'gid://gitlab/Project/1',
+ name: 'cool project',
+ pathWithNamespace: 'group/cool-project',
+ avatarUrl: null,
+ },
+ {
+ id: 'gid://gitlab/Project/2',
+ name: 'another cool project',
+ pathWithNamespace: 'group/another-cool-project',
+ avatarUrl: null,
+ },
+];
+
export const rawValueStreamStages = [
{
title: 'Issue',
diff --git a/spec/frontend/cycle_analytics/value_stream_filters_spec.js b/spec/frontend/cycle_analytics/value_stream_filters_spec.js
new file mode 100644
index 00000000000..6e96a6d756a
--- /dev/null
+++ b/spec/frontend/cycle_analytics/value_stream_filters_spec.js
@@ -0,0 +1,91 @@
+import { shallowMount } from '@vue/test-utils';
+import Daterange from '~/analytics/shared/components/daterange.vue';
+import ProjectsDropdownFilter from '~/analytics/shared/components/projects_dropdown_filter.vue';
+import FilterBar from '~/cycle_analytics/components/filter_bar.vue';
+import ValueStreamFilters from '~/cycle_analytics/components/value_stream_filters.vue';
+import {
+ createdAfter as startDate,
+ createdBefore as endDate,
+ currentGroup,
+ selectedProjects,
+} from './mock_data';
+
+function createComponent(props = {}) {
+ return shallowMount(ValueStreamFilters, {
+ propsData: {
+ selectedProjects,
+ groupId: currentGroup.id,
+ groupPath: currentGroup.fullPath,
+ startDate,
+ endDate,
+ ...props,
+ },
+ });
+}
+
+describe('ValueStreamFilters', () => {
+ let wrapper;
+
+ const findProjectsDropdown = () => wrapper.findComponent(ProjectsDropdownFilter);
+ const findDateRangePicker = () => wrapper.findComponent(Daterange);
+ const findFilterBar = () => wrapper.findComponent(FilterBar);
+
+ beforeEach(() => {
+ wrapper = createComponent();
+ });
+
+ afterEach(() => {
+ wrapper.destroy();
+ wrapper = null;
+ });
+
+ it('will render the filter bar', () => {
+ expect(findFilterBar().exists()).toBe(true);
+ });
+
+ it('will render the projects dropdown', () => {
+ expect(findProjectsDropdown().exists()).toBe(true);
+ expect(wrapper.findComponent(ProjectsDropdownFilter).props()).toEqual(
+ expect.objectContaining({
+ queryParams: wrapper.vm.projectsQueryParams,
+ multiSelect: wrapper.vm.$options.multiProjectSelect,
+ }),
+ );
+ });
+
+ it('will render the date range picker', () => {
+ expect(findDateRangePicker().exists()).toBe(true);
+ });
+
+ it('will emit `selectProject` when a project is selected', () => {
+ findProjectsDropdown().vm.$emit('selected');
+
+ expect(wrapper.emitted('selectProject')).not.toBeUndefined();
+ });
+
+ it('will emit `setDateRange` when the date range changes', () => {
+ findDateRangePicker().vm.$emit('change');
+
+ expect(wrapper.emitted('setDateRange')).not.toBeUndefined();
+ });
+
+ describe('hasDateRangeFilter = false', () => {
+ beforeEach(() => {
+ wrapper = createComponent({ hasDateRangeFilter: false });
+ });
+
+ it('will not render the date range picker', () => {
+ expect(findDateRangePicker().exists()).toBe(false);
+ });
+ });
+
+ describe('hasProjectFilter = false', () => {
+ beforeEach(() => {
+ wrapper = createComponent({ hasProjectFilter: false });
+ });
+
+ it('will not render the project dropdown', () => {
+ expect(findProjectsDropdown().exists()).toBe(false);
+ });
+ });
+});
diff --git a/yarn.lock b/yarn.lock
index b747fac3566..04a00f24d95 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -867,10 +867,10 @@
resolved "https://registry.yarnpkg.com/@gitlab/at.js/-/at.js-1.5.7.tgz#1ee6f838cc4410a1d797770934df91d90df8179e"
integrity sha512-c6ySRK/Ma7lxwpIVbSAF3P+xiTLrNTGTLRx4/pHK111AdFxwgUwrYF6aVZFXvmG65jHOJHoa0eQQ21RW6rm0Rg==
-"@gitlab/eslint-plugin@9.0.0":
- version "9.0.0"
- resolved "https://registry.yarnpkg.com/@gitlab/eslint-plugin/-/eslint-plugin-9.0.0.tgz#0c872428e3237e0dbd2cbbe74317fc3786cefdf9"
- integrity sha512-TaKLzaAFQbsJJIbetLTARkJNapIWuis8RyOp/arbVS5Fl8IjBK8m3hPmqIc5CwOz9qK8o5eSW1MA9clU/dLY3w==
+"@gitlab/eslint-plugin@9.0.2":
+ version "9.0.2"
+ resolved "https://registry.yarnpkg.com/@gitlab/eslint-plugin/-/eslint-plugin-9.0.2.tgz#c7e0c8744001227d88624eb533047f3d5dd8d419"
+ integrity sha512-ZnjXo3jrZJ3sYf/2CwXzFk8Jfh02kO5ntk0h1pothzCswb96x02eTxhcCoM/dQPMTqDa0R+N4n2n2SEDtnBTbw==
dependencies:
babel-eslint "^10.0.3"
eslint-config-airbnb-base "^14.2.1"
@@ -881,7 +881,7 @@
eslint-plugin-jest "^23.8.2"
eslint-plugin-promise "^4.2.1"
eslint-plugin-vue "^7.5.0"
- lodash "4.17.20"
+ lodash "^4.17.21"
vue-eslint-parser "^7.0.0"
"@gitlab/favicon-overlay@2.0.0":
@@ -931,6 +931,20 @@
resolved "https://registry.yarnpkg.com/@gitlab/visual-review-tools/-/visual-review-tools-1.6.1.tgz#0d8f3ff9f51b05f7c80b9a107727703d48997e4e"
integrity sha512-vY8K1igwZFoEOmU0h4E7XTLlilsQ4ylPr27O01UsSe6ZTKi6oEMREsRAEpNIUgRlxUARCsf+Opp4pgSFzFkFcw==
+"@humanwhocodes/config-array@^0.5.0":
+ version "0.5.0"
+ resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
+ integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
+ dependencies:
+ "@humanwhocodes/object-schema" "^1.2.0"
+ debug "^4.1.1"
+ minimatch "^3.0.4"
+
+"@humanwhocodes/object-schema@^1.2.0":
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
+ integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
+
"@istanbuljs/load-nyc-config@^1.0.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -5011,13 +5025,14 @@ eslint-visitor-keys@^2.0.0:
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
-eslint@7.29.0:
- version "7.29.0"
- resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.29.0.tgz#ee2a7648f2e729485e4d0bd6383ec1deabc8b3c0"
- integrity sha512-82G/JToB9qIy/ArBzIWG9xvvwL3R86AlCjtGw+A29OMZDqhTybz/MByORSukGxeI+YPCR4coYyITKk8BFH9nDA==
+eslint@7.30.0:
+ version "7.30.0"
+ resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.30.0.tgz#6d34ab51aaa56112fd97166226c9a97f505474f8"
+ integrity sha512-VLqz80i3as3NdloY44BQSJpFw534L9Oh+6zJOUaViV4JPd+DaHwutqP7tcpkW3YiXbK6s05RZl7yl7cQn+lijg==
dependencies:
"@babel/code-frame" "7.12.11"
"@eslint/eslintrc" "^0.4.2"
+ "@humanwhocodes/config-array" "^0.5.0"
ajv "^6.10.0"
chalk "^4.0.0"
cross-spawn "^7.0.2"
@@ -7947,11 +7962,6 @@ lodash.values@^4.3.0:
resolved "https://registry.yarnpkg.com/lodash.values/-/lodash.values-4.3.0.tgz#a3a6c2b0ebecc5c2cba1c17e6e620fe81b53d347"
integrity sha1-o6bCsOvsxcLLocF+bmIP6BtT00c=
-lodash@4.17.20:
- version "4.17.20"
- resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
- integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
-
lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"