diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-07-31 12:10:26 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-07-31 12:10:26 +0300 |
commit | 26d2324ac136c7a28235789ff9a0b2974b5f7c7b (patch) | |
tree | f6a8cb8c0edf9225c3182ba115916f861bcc6357 /app/assets/javascripts/search | |
parent | 4603adb20ba7c5b84700fb0bf41b43f7b1a49f8c (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/search')
8 files changed, 141 insertions, 5 deletions
diff --git a/app/assets/javascripts/search/sidebar/components/app.vue b/app/assets/javascripts/search/sidebar/components/app.vue index cd0976a9fd6..c22290a2375 100644 --- a/app/assets/javascripts/search/sidebar/components/app.vue +++ b/app/assets/javascripts/search/sidebar/components/app.vue @@ -3,10 +3,12 @@ import { mapState, mapGetters } from 'vuex'; import ScopeLegacyNavigation from '~/search/sidebar/components/scope_legacy_navigation.vue'; import ScopeSidebarNavigation from '~/search/sidebar/components/scope_sidebar_navigation.vue'; import SidebarPortal from '~/super_sidebar/components/sidebar_portal.vue'; -import { SCOPE_ISSUES, SCOPE_MERGE_REQUESTS, SCOPE_BLOB } from '../constants'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { SCOPE_ISSUES, SCOPE_MERGE_REQUESTS, SCOPE_BLOB, SCOPE_PROJECTS } from '../constants'; import IssuesFilters from './issues_filters.vue'; import MergeRequestsFilters from './merge_requests_filters.vue'; import BlobsFilters from './blobs_filters.vue'; +import ProjectsFilters from './projects_filters.vue'; export default { name: 'GlobalSearchSidebar', @@ -17,7 +19,9 @@ export default { SidebarPortal, MergeRequestsFilters, BlobsFilters, + ProjectsFilters, }, + mixins: [glFeatureFlagsMixin()], computed: { // useSidebarNavigation refers to whether the new left sidebar navigation is enabled ...mapState(['useSidebarNavigation']), @@ -31,6 +35,10 @@ export default { showBlobFilters() { return this.currentScope === SCOPE_BLOB; }, + showProjectsFilters() { + // for now the feature flag is here. Since we have only one filter in projects scope + return this.currentScope === SCOPE_PROJECTS && this.glFeatures.searchProjectsHideArchived; + }, showScopeNavigation() { // showScopeNavigation refers to whether the scope navigation should be shown // while the legacy navigation is being used and there are no search results @@ -48,6 +56,7 @@ export default { <issues-filters v-if="showIssuesFilters" /> <merge-requests-filters v-if="showMergeRequestFilters" /> <blobs-filters v-if="showBlobFilters" /> + <projects-filters v-if="showProjectsFilters" /> </sidebar-portal> </section> <section @@ -58,5 +67,6 @@ export default { <issues-filters v-if="showIssuesFilters" /> <merge-requests-filters v-if="showMergeRequestFilters" /> <blobs-filters v-if="showBlobFilters" /> + <projects-filters v-if="showProjectsFilters" /> </section> </template> diff --git a/app/assets/javascripts/search/sidebar/components/archived_filter/data.js b/app/assets/javascripts/search/sidebar/components/archived_filter/data.js new file mode 100644 index 00000000000..77efbdd9e60 --- /dev/null +++ b/app/assets/javascripts/search/sidebar/components/archived_filter/data.js @@ -0,0 +1,19 @@ +import { s__ } from '~/locale'; + +const headerLabel = s__('GlobalSearch|Archived'); +const checkboxLabel = s__('GlobalSearch|Include archived'); +export const TRACKING_NAMESPACE = 'search:archived:select'; +export const TRACKING_LABEL_CHECKBOX = 'checkbox'; + +const scopes = { + PROJECTS: 'projects', +}; + +const filterParam = 'include_archived'; + +export const archivedFilterData = { + headerLabel, + checkboxLabel, + scopes, + filterParam, +}; diff --git a/app/assets/javascripts/search/sidebar/components/archived_filter/index.vue b/app/assets/javascripts/search/sidebar/components/archived_filter/index.vue new file mode 100644 index 00000000000..dc92d7bfd58 --- /dev/null +++ b/app/assets/javascripts/search/sidebar/components/archived_filter/index.vue @@ -0,0 +1,52 @@ +<script> +import { GlFormCheckboxGroup, GlFormCheckbox } from '@gitlab/ui'; +import { mapState, mapActions } from 'vuex'; +import Tracking from '~/tracking'; + +import { archivedFilterData, TRACKING_NAMESPACE, TRACKING_LABEL_CHECKBOX } from './data'; + +export default { + name: 'ArchivedFilter', + components: { + GlFormCheckboxGroup, + GlFormCheckbox, + }, + computed: { + ...mapState(['urlQuery']), + selectedFilter: { + get() { + return [Boolean(this.urlQuery?.include_archived)]; + }, + set([value = '']) { + this.setQuery({ key: archivedFilterData.filterParam, value: `${value}` }); + this.trackSelectCheckbox(value); + }, + }, + }, + methods: { + ...mapActions(['setQuery']), + trackSelectCheckbox(value) { + Tracking.event(TRACKING_NAMESPACE, TRACKING_LABEL_CHECKBOX, { + label: archivedFilterData.checkboxLabel, + property: value, + }); + }, + }, + archivedFilterData, +}; +</script> + +<template> + <gl-form-checkbox-group v-model="selectedFilter"> + <h5>{{ $options.archivedFilterData.headerLabel }}</h5> + <gl-form-checkbox + class="gl-flex-grow-1 gl-display-inline-flex gl-justify-content-space-between gl-w-full" + :class="$options.LABEL_DEFAULT_CLASSES" + :value="true" + > + <span data-testid="label"> + {{ $options.archivedFilterData.checkboxLabel }} + </span> + </gl-form-checkbox> + </gl-form-checkbox-group> +</template> diff --git a/app/assets/javascripts/search/sidebar/components/archived_filter/tracking.js b/app/assets/javascripts/search/sidebar/components/archived_filter/tracking.js new file mode 100644 index 00000000000..d9d139bf572 --- /dev/null +++ b/app/assets/javascripts/search/sidebar/components/archived_filter/tracking.js @@ -0,0 +1,38 @@ +import Tracking from '~/tracking'; + +export const TRACKING_CATEGORY = 'Language filters'; +export const TRACKING_LABEL_FILTERS = 'Filters'; + +export const TRACKING_LABEL_MAX = 'Max Shown'; +export const TRACKING_LABEL_SHOW_MORE = 'Show More'; +export const TRACKING_LABEL_APPLY = 'Apply Filters'; +export const TRACKING_LABEL_RESET = 'Reset Filters'; +export const TRACKING_LABEL_ALL = 'All Filters'; +export const TRACKING_PROPERTY_MAX = `More than filters to show`; + +export const TRACKING_ACTION_CLICK = 'search:agreggations:language:click'; +export const TRACKING_ACTION_SHOW = 'search:agreggations:language:show'; + +// select is imported and used in checkbox_filter.vue +export const TRACKING_ACTION_SELECT = 'search:agreggations:language:select'; + +export const trackShowMore = () => + Tracking.event(TRACKING_ACTION_CLICK, TRACKING_LABEL_SHOW_MORE, { + label: TRACKING_LABEL_ALL, + }); + +export const trackShowHasOverMax = () => + Tracking.event(TRACKING_ACTION_SHOW, TRACKING_LABEL_FILTERS, { + label: TRACKING_LABEL_MAX, + property: TRACKING_PROPERTY_MAX, + }); + +export const trackSubmitQuery = () => + Tracking.event(TRACKING_ACTION_CLICK, TRACKING_LABEL_APPLY, { + label: TRACKING_CATEGORY, + }); + +export const trackResetQuery = () => + Tracking.event(TRACKING_ACTION_CLICK, TRACKING_LABEL_RESET, { + label: TRACKING_CATEGORY, + }); diff --git a/app/assets/javascripts/search/sidebar/components/projects_filters.vue b/app/assets/javascripts/search/sidebar/components/projects_filters.vue new file mode 100644 index 00000000000..093bfd2297f --- /dev/null +++ b/app/assets/javascripts/search/sidebar/components/projects_filters.vue @@ -0,0 +1,18 @@ +<script> +import ArchivedFilter from './archived_filter/index.vue'; +import FiltersTemplate from './filters_template.vue'; + +export default { + name: 'ProjectsFilters', + components: { + ArchivedFilter, + FiltersTemplate, + }, +}; +</script> + +<template> + <filters-template> + <archived-filter class="gl-mb-5" /> + </filters-template> +</template> diff --git a/app/assets/javascripts/search/sidebar/constants/index.js b/app/assets/javascripts/search/sidebar/constants/index.js index 99d8821db61..01d0aad206c 100644 --- a/app/assets/javascripts/search/sidebar/constants/index.js +++ b/app/assets/javascripts/search/sidebar/constants/index.js @@ -1,6 +1,7 @@ export const SCOPE_ISSUES = 'issues'; export const SCOPE_MERGE_REQUESTS = 'merge_requests'; export const SCOPE_BLOB = 'blobs'; +export const SCOPE_PROJECTS = 'projects'; export const LABEL_DEFAULT_CLASSES = [ 'gl-display-flex', 'gl-flex-direction-row', @@ -18,4 +19,3 @@ export const ONLY_SHOW_MD = ['gl-display-none', 'gl-md-display-block']; export const TRACKING_ACTION_CLICK = 'search:filters:click'; export const TRACKING_LABEL_APPLY = 'Apply Filters'; export const TRACKING_LABEL_RESET = 'Reset Filters'; -export const TRACKING_CATEGORY = 'Issue filters'; diff --git a/app/assets/javascripts/search/store/constants.js b/app/assets/javascripts/search/store/constants.js index 311aa599e68..f3b4a09b45b 100644 --- a/app/assets/javascripts/search/store/constants.js +++ b/app/assets/javascripts/search/store/constants.js @@ -2,6 +2,7 @@ import { statusFilterData } from '~/search/sidebar/components/status_filter/data import { confidentialFilterData } from '~/search/sidebar/components/confidentiality_filter/data'; import { languageFilterData } from '~/search/sidebar/components/language_filter/data'; import { labelFilterData } from '~/search/sidebar/components/label_filter/data'; +import { archivedFilterData } from '~/search/sidebar/components/archived_filter/data'; export const MAX_FREQUENT_ITEMS = 5; @@ -16,6 +17,7 @@ export const SIDEBAR_PARAMS = [ confidentialFilterData.filterParam, languageFilterData.filterParam, labelFilterData.filterParam, + archivedFilterData.filterParam, ]; export const NUMBER_FORMATING_OPTIONS = { notation: 'compact', compactDisplay: 'short' }; diff --git a/app/assets/javascripts/search/store/getters.js b/app/assets/javascripts/search/store/getters.js index 6c9834d0d6c..d01fd884bad 100644 --- a/app/assets/javascripts/search/store/getters.js +++ b/app/assets/javascripts/search/store/getters.js @@ -47,9 +47,6 @@ export const appliedSelectedLabels = (state) => { ); }; -export const filteredUnappliedSelectedLabels = (state) => - filteredLabels(state)?.filter((label) => state?.query?.labels?.includes(label.key)); - export const filteredUnselectedLabels = (state) => { if (!state?.urlQuery?.labels) { return filteredLabels(state); |