Add latest changes from gitlab-org/gitlab@master

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);