Removed data.js files from filters as part of the code maintenance

Changelog: changed

app/assets/javascripts/search/sidebar/components/archived_filter/data.js

-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',
-  'issues',
-  'merge_requests',
-  'notes',
-  'blobs',
-  'commits',
-  'milestones',
-  'wiki_blobs',
-];
-
-const filterParam = 'include_archived';
-
-export const archivedFilterData = {
-  headerLabel,
-  checkboxLabel,
-  scopes,
-  filterParam,
-};

app/assets/javascripts/search/sidebar/components/archived_filter/index.vue

@@ -5,8 +5,14 @@ import { mapState, mapActions } from 'vuex';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import { archivedFilterData, TRACKING_NAMESPACE, TRACKING_LABEL_CHECKBOX } from './data';
+import {
+  ARCHIVED_TRACKING_NAMESPACE,
+  ARCHIVED_TRACKING_LABEL_CHECKBOX,
+  ARCHIVED_TRACKING_LABEL_CHECKBOX_LABEL,
+  LABEL_DEFAULT_CLASSES,
+} from '../../constants';
+export const INCLUDE_ARCHIVED_FILTER_PARAM = 'include_archived';
 export default {
   name: 'ArchivedFilter',
@@ -19,6 +25,8 @@ export default {
   },
   i18n: {
     tooltip: s__('GlobalSearch|Include search results from archived projects'),
+    headerLabel: s__('GlobalSearch|Archived'),
+    checkboxLabel: s__('GlobalSearch|Include archived'),
   },
   computed: {
     ...mapState(['urlQuery']),
@@ -28,7 +36,10 @@ export default {
       },
       set(value) {
         const includeArchived = [...value].pop() ?? false;
-        this.setQuery({ key: archivedFilterData.filterParam, value: includeArchived?.toString() });
+        this.setQuery({
+          key: INCLUDE_ARCHIVED_FILTER_PARAM,
+          value: includeArchived?.toString(),
+        });
         this.trackSelectCheckbox(includeArchived);
       },
     },
@@ -36,20 +47,20 @@ export default {
   methods: {
     ...mapActions(['setQuery']),
     trackSelectCheckbox(value) {
-      Tracking.event(TRACKING_NAMESPACE, TRACKING_LABEL_CHECKBOX, {
-        label: archivedFilterData.checkboxLabel,
+      Tracking.event(ARCHIVED_TRACKING_NAMESPACE, ARCHIVED_TRACKING_LABEL_CHECKBOX, {
+        label: ARCHIVED_TRACKING_LABEL_CHECKBOX_LABEL,
         property: value,
       });
     },
   },
-  archivedFilterData,
+  LABEL_DEFAULT_CLASSES,
 };
 </script>
 <template>
   <gl-form-checkbox-group v-model="selectedFilter">
     <div class="gl-mb-2 gl-text-sm gl-font-bold" data-testid="archived-filter-title">
-      {{ $options.archivedFilterData.headerLabel }}
+      {{ $options.i18n.headerLabel }}
     </div>
     <gl-form-checkbox
       class="gl-inline-flex gl-w-full gl-grow gl-justify-between"
@@ -57,7 +68,7 @@ export default {
       :value="true"
     >
       <span v-gl-tooltip="$options.i18n.tooltip" data-testid="label">
-        {{ $options.archivedFilterData.checkboxLabel }}
+        {{ $options.i18n.checkboxLabel }}
       </span>
     </gl-form-checkbox>
   </gl-form-checkbox-group>

app/assets/javascripts/search/sidebar/components/archived_filter/tracking.js

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

app/assets/javascripts/search/sidebar/components/confidentiality_filter/data.js

-import { __ } from '~/locale';
-
-const header = __('Confidentiality');
-
-const filters = {
-  ANY: {
-    label: __('Any'),
-    value: null,
-  },
-  CONFIDENTIAL: {
-    label: __('Confidential'),
-    value: 'yes',
-  },
-  NOT_CONFIDENTIAL: {
-    label: __('Not confidential'),
-    value: 'no',
-  },
-};
-
-const scopes = {
-  ISSUES: 'issues',
-};
-
-const filterByScope = {
-  [scopes.ISSUES]: [filters.ANY, filters.CONFIDENTIAL, filters.NOT_CONFIDENTIAL],
-};
-
-const filterParam = 'confidential';
-
-export const confidentialFilterData = {
-  header,
-  filters,
-  scopes,
-  filterByScope,
-  filterParam,
-};

app/assets/javascripts/search/sidebar/components/confidentiality_filter/index.vue

 <script>
+import { __ } from '~/locale';
+import { SCOPE_ISSUES } from '~/search/sidebar/constants';
 import RadioFilter from '../shared/radio_filter.vue';
-import { confidentialFilterData } from './data';
+
+export const FILTER_PARAM = 'confidential';
+export const FILTERS = {
+  ANY: {
+    label: __('Any'),
+    value: null,
+  },
+  CONFIDENTIAL: {
+    label: __('Confidential'),
+    value: 'yes',
+  },
+  NOT_CONFIDENTIAL: {
+    label: __('Not confidential'),
+    value: 'no',
+  },
+};
 export default {
   name: 'ConfidentialityFilter',
   components: {
     RadioFilter,
   },
-  confidentialFilterData,
+  i18n: {
+    header: __('Confidentiality'),
+  },
+  computed: {
+    filtersArray() {
+      return { [SCOPE_ISSUES]: [FILTERS.ANY, FILTERS.CONFIDENTIAL, FILTERS.NOT_CONFIDENTIAL] };
+    },
+  },
+  FILTER_PARAM,
 };
 </script>
 <template>
   <div>
-    <radio-filter :filter-data="$options.confidentialFilterData" />
+    <radio-filter
+      :filters-array="filtersArray"
+      :header="$options.i18n.header"
+      :filter-param="$options.FILTER_PARAM"
+    />
   </div>
 </template>

app/assets/javascripts/search/sidebar/components/label_filter/data.js

-import { __ } from '~/locale';
-
-export const FIRST_DROPDOWN_INDEX = 0;
-
-export const SEARCH_BOX_INDEX = 0;
-
-export const SEARCH_INPUT_DESCRIPTION = 'label-search-input-description';
-
-export const SEARCH_RESULTS_DESCRIPTION = 'label-search-results-description';
-
-export const LABEL_FILTER_HEADER = __('Labels');
-
-export const LABEL_FILTER_PARAM = 'label_name';
-
-export const LABEL_AGREGATION_NAME = 'labels';

app/assets/javascripts/search/sidebar/components/label_filter/index.vue

@@ -14,6 +14,7 @@ import {
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { difference, uniq } from 'lodash';
 import { rgbFromHex } from '@gitlab/ui/dist/utils/utils';
+import { __ } from '~/locale';
 import { slugify } from '~/lib/utils/text_utility';
 import DropdownKeyboardNavigation from '~/vue_shared/components/dropdown_keyboard_navigation.vue';
@@ -21,17 +22,16 @@ import DropdownKeyboardNavigation from '~/vue_shared/components/dropdown_keyboar
 import { I18N } from '~/vue_shared/global_search/constants';
 import LabelDropdownItems from './label_dropdown_items.vue';
-import {
-  FIRST_DROPDOWN_INDEX,
-  SEARCH_BOX_INDEX,
-  SEARCH_RESULTS_DESCRIPTION,
-  SEARCH_INPUT_DESCRIPTION,
-  LABEL_FILTER_PARAM,
-  LABEL_FILTER_HEADER,
-} from './data';
-
 import { trackSelectCheckbox, trackOpenDropdown } from './tracking';
+export const FIRST_DROPDOWN_INDEX = 0;
+export const SEARCH_BOX_INDEX = 0;
+export const SEARCH_INPUT_DESCRIPTION = 'label-search-input-description';
+export const SEARCH_RESULTS_DESCRIPTION = 'label-search-results-description';
+export const LABEL_FILTER_HEADER = __('Labels');
+export const LABEL_FILTER_PARAM = 'label_name';
+export const LABEL_AGREGATION_NAME = 'labels';
+
 export default {
   name: 'LabelFilter',
   directives: { Outside },

app/assets/javascripts/search/sidebar/components/language_filter/checkbox_filter.vue

@@ -7,9 +7,7 @@ import { intersection } from 'lodash';
 import Tracking from '~/tracking';
 import { NAV_LINK_COUNT_DEFAULT_CLASSES, LABEL_DEFAULT_CLASSES } from '../../constants';
 import { formatSearchResultCount } from '../../../store/utils';
-
-export const TRACKING_LABEL_SET = 'set';
-export const TRACKING_LABEL_CHECKBOX = 'checkbox';
+import { TRACKING_LABEL_SET, TRACKING_LABEL_CHECKBOX } from './tracking';
 export default {
   name: 'CheckboxFilter',
@@ -26,6 +24,10 @@ export default {
       type: String,
       required: true,
     },
+    queryParam: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     ...mapGetters(['queryLanguageFilters']),
@@ -40,7 +42,7 @@ export default {
         return intersection(this.flatDataFilterValues, this.queryLanguageFilters);
       },
       async set(value) {
-        this.setQuery({ key: this.filtersData?.filterParam, value });
+        this.setQuery({ key: this.queryParam, value });
         await Vue.nextTick();
         this.trackSelectCheckbox();

app/assets/javascripts/search/sidebar/components/language_filter/data.js

-import { s__ } from '~/locale';
-
-export const DEFAULT_ITEM_LENGTH = 10;
-export const MAX_ITEM_LENGTH = 100;
-
-const header = s__('GlobalSearch|Language');
-
-const scopes = {
-  BLOBS: 'blobs',
-};
-
-const filterParam = 'language';
-
-export const languageFilterData = {
-  header,
-  scopes,
-  filterParam,
-};

app/assets/javascripts/search/sidebar/components/language_filter/index.vue

@@ -4,10 +4,11 @@ import { GlButton, GlAlert } from '@gitlab/ui';
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { s__, sprintf } from '~/locale';
 import { convertFiltersData } from '../../utils';
+import { LANGUGAGE_DEFAULT_ITEM_LENGTH, LANGUGAGE_MAX_ITEM_LENGTH } from '../../constants';
 import CheckboxFilter from './checkbox_filter.vue';
 import { trackShowMore, trackShowHasOverMax, TRACKING_ACTION_SELECT } from './tracking';
-import { DEFAULT_ITEM_LENGTH, MAX_ITEM_LENGTH, languageFilterData } from './data';
+export const LANGUAGE_FILTER_PARAM = 'language';
 export default {
   name: 'LanguageFilter',
@@ -23,8 +24,11 @@ export default {
   },
   i18n: {
     showMore: s__('GlobalSearch|Show more'),
-    showingMax: sprintf(s__('GlobalSearch|Showing top %{maxItems}'), { maxItems: MAX_ITEM_LENGTH }),
+    showingMax: sprintf(s__('GlobalSearch|Showing top %{maxItems}'), {
+      maxItems: LANGUGAGE_MAX_ITEM_LENGTH,
+    }),
     loadError: s__('GlobalSearch|Aggregations load error.'),
+    headerLabel: s__('GlobalSearch|Language'),
   },
   computed: {
     ...mapState(['aggregations']),
@@ -40,15 +44,15 @@ export default {
         return this.languageAggregationBuckets;
       }
       if (this.showAll) {
-        return this.trimBuckets(MAX_ITEM_LENGTH);
+        return this.trimBuckets(LANGUGAGE_MAX_ITEM_LENGTH);
       }
-      return this.trimBuckets(DEFAULT_ITEM_LENGTH);
+      return this.trimBuckets(LANGUGAGE_DEFAULT_ITEM_LENGTH);
     },
     hasShowMore() {
-      return this.languageAggregationBuckets.length > DEFAULT_ITEM_LENGTH;
+      return this.languageAggregationBuckets.length > LANGUGAGE_DEFAULT_ITEM_LENGTH;
     },
     hasOverMax() {
-      return this.languageAggregationBuckets.length > MAX_ITEM_LENGTH;
+      return this.languageAggregationBuckets.length > LANGUGAGE_MAX_ITEM_LENGTH;
     },
   },
   async created() {
@@ -68,15 +72,15 @@ export default {
       return this.languageAggregationBuckets.slice(0, length);
     },
   },
+  LANGUAGE_FILTER_PARAM,
   TRACKING_ACTION_SELECT,
-  languageFilterData,
 };
 </script>
 <template>
   <div v-if="hasBuckets" class="language-filter-checkbox">
     <div class="gl-mb-2 gl-text-sm gl-font-bold">
-      {{ $options.languageFilterData.header }}
+      {{ $options.i18n.headerLabel }}
     </div>
     <div
       v-if="!aggregations.error"
@@ -86,6 +90,7 @@ export default {
       <checkbox-filter
         :filters-data="filtersData"
         :tracking-namespace="$options.TRACKING_ACTION_SELECT"
+        :query-param="$options.LANGUAGE_FILTER_PARAM"
       />
       <span v-if="showAll && hasOverMax" data-testid="has-over-max-text">{{
         $options.i18n.showingMax

app/assets/javascripts/search/sidebar/components/language_filter/tracking.js

 import Tracking from '~/tracking';
-import { MAX_ITEM_LENGTH } from './data';
+import { LANGUGAGE_DEFAULT_ITEM_LENGTH } from '../../constants';
 export const TRACKING_CATEGORY = 'Language filters';
 export const TRACKING_LABEL_FILTERS = 'Filters';
@@ -9,7 +9,7 @@ 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 ${MAX_ITEM_LENGTH} filters to show`;
+export const TRACKING_PROPERTY_MAX = `More than ${LANGUGAGE_DEFAULT_ITEM_LENGTH} filters to show`;
 export const TRACKING_ACTION_CLICK = 'search:agreggations:language:click';
 export const TRACKING_ACTION_SHOW = 'search:agreggations:language:show';
@@ -27,3 +27,6 @@ export const trackShowHasOverMax = () =>
     label: TRACKING_LABEL_MAX,
     property: TRACKING_PROPERTY_MAX,
   });
+
+export const TRACKING_LABEL_SET = 'set';
+export const TRACKING_LABEL_CHECKBOX = 'checkbox';

app/assets/javascripts/search/sidebar/components/project_filter.vue

@@ -5,8 +5,8 @@ import { mapState, mapActions, mapGetters } from 'vuex';
 import { s__ } from '~/locale';
 import { visitUrl, setUrlParams } from '~/lib/utils/url_utility';
 import { ANY_OPTION, GROUP_DATA, PROJECT_DATA } from '~/search/sidebar/constants';
+import { INCLUDE_ARCHIVED_FILTER_PARAM } from '~/search/sidebar/components/archived_filter/index.vue';
 import SearchableDropdown from './shared/searchable_dropdown.vue';
-import { archivedFilterData } from './archived_filter/data';
 export default {
   name: 'ProjectFilter',
@@ -64,7 +64,7 @@ export default {
         [PROJECT_DATA.queryParam]: project.id,
         nav_source: null,
         scope: this.currentScope,
-        [archivedFilterData.filterParam]: null,
+        [INCLUDE_ARCHIVED_FILTER_PARAM]: null,
       };
       visitUrl(setUrlParams(queryParams));

app/assets/javascripts/search/sidebar/components/shared/radio_filter.vue

@@ -11,36 +11,44 @@ export default {
     GlFormRadio,
   },
   props: {
-    filterData: {
+    filtersArray: {
       type: Object,
       required: true,
     },
+    header: {
+      type: String,
+      required: true,
+    },
+    filterParam: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     ...mapState(['query']),
     ...mapGetters(['currentScope']),
     ANY() {
-      return this.filterData.filters.ANY;
+      const AnyIndex = this.filtersArray[this.currentScope].findIndex(
+        (item) => item.value === null,
+      );
+      return this.filtersArray[this.currentScope][AnyIndex];
     },
     initialFilter() {
-      return this.query[this.filterData.filterParam];
+      return this.query[this.filterParam];
     },
     filter() {
       return this.initialFilter || this.ANY.value;
     },
-    filtersArray() {
-      return this.filterData.filterByScope[this.currentScope];
-    },
     selectedFilter: {
       get() {
-        if (this.filtersArray.some(({ value }) => value === this.filter)) {
+        if (this.filtersArray[this.currentScope].some(({ value }) => value === this.filter)) {
           return this.filter;
         }
         return this.ANY.value;
       },
       set(value) {
-        this.setQuery({ key: this.filterData.filterParam, value });
+        this.setQuery({ key: this.filterParam, value });
       },
     },
   },
@@ -48,7 +56,7 @@ export default {
     ...mapActions(['setQuery']),
     radioLabel(filter) {
       return filter.value === this.ANY.value
-        ? sprintf(__('Any %{header}'), { header: this.filterData.header.toLowerCase() })
+        ? sprintf(__('Any %{header}'), { header: this.header.toLowerCase() })
         : filter.label;
     },
   },
@@ -58,10 +66,10 @@ export default {
 <template>
   <div>
     <div class="gl-mb-2 gl-text-sm gl-font-bold">
-      {{ filterData.header }}
+      {{ header }}
     </div>
     <gl-form-radio-group v-model="selectedFilter">
-      <gl-form-radio v-for="f in filtersArray" :key="f.value" :value="f.value">
+      <gl-form-radio v-for="f in filtersArray[currentScope]" :key="f.value" :value="f.value">
         {{ radioLabel(f) }}
       </gl-form-radio>
     </gl-form-radio-group>

app/assets/javascripts/search/sidebar/components/status_filter/index.vue

 <script>
+import { __ } from '~/locale';
+import { SCOPE_ISSUES, SCOPE_MERGE_REQUESTS } from '~/search/sidebar/constants';
 import RadioFilter from '../shared/radio_filter.vue';
-import { statusFilterData } from './data';
+
+export const FILTER_PARAM = 'state';
+export const FILTERS = {
+  ANY: {
+    label: __('Any'),
+    value: null,
+  },
+  OPEN: {
+    label: __('Open'),
+    value: 'opened',
+  },
+  CLOSED: {
+    label: __('Closed'),
+    value: 'closed',
+  },
+  MERGED: {
+    label: __('Merged'),
+    value: 'merged',
+  },
+};
 export default {
   name: 'StatusFilter',
   components: {
     RadioFilter,
   },
-  statusFilterData,
+  i18n: {
+    header: __('Status'),
+  },
+  computed: {
+    filtersArray() {
+      return {
+        [SCOPE_ISSUES]: [FILTERS.ANY, FILTERS.OPEN, FILTERS.CLOSED],
+        [SCOPE_MERGE_REQUESTS]: [FILTERS.ANY, FILTERS.OPEN, FILTERS.MERGED, FILTERS.CLOSED],
+      };
+    },
+  },
+  FILTER_PARAM,
 };
 </script>
 <template>
-  <radio-filter :filter-data="$options.statusFilterData" />
+  <radio-filter
+    :filters-array="filtersArray"
+    :header="$options.i18n.header"
+    :filter-param="$options.FILTER_PARAM"
+  />
 </template>

app/assets/javascripts/search/sidebar/constants/index.js

@@ -24,6 +24,10 @@ export const TRACKING_ACTION_CLICK = 'search:filters:click';
 export const TRACKING_LABEL_APPLY = 'Apply Filters';
 export const TRACKING_LABEL_RESET = 'Reset Filters';
+export const ARCHIVED_TRACKING_NAMESPACE = 'search:archived:select';
+export const ARCHIVED_TRACKING_LABEL_CHECKBOX = 'checkbox';
+export const ARCHIVED_TRACKING_LABEL_CHECKBOX_LABEL = 'Include archived';
+
 export const SEARCH_TYPE_BASIC = 'basic';
 export const SEARCH_TYPE_ADVANCED = 'advanced';
 export const SEARCH_TYPE_ZOEKT = 'zoekt';
@@ -57,3 +61,6 @@ export const EVENT_SELECT_SOURCE_BRANCH_FILTER = 'select_source_branch_filter';
 export const EVENT_SELECT_SOURCE_BRANCH_FILTER_ON_MERGE_REQUEST_PAGE =
   'select_source_branch_filter_on_merge_request_page';
+
+export const LANGUGAGE_DEFAULT_ITEM_LENGTH = 10;
+export const LANGUGAGE_MAX_ITEM_LENGTH = 100;

app/assets/javascripts/search/sidebar/utils.js

-import { languageFilterData } from '~/search/sidebar/components/language_filter/data';
-
 export const convertFiltersData = (rawBuckets) =>
   rawBuckets.reduce(
     (acc, bucket) => ({
@@ -13,5 +11,5 @@ export const convertFiltersData = (rawBuckets) =>
         },
       },
     }),
-    { ...languageFilterData, filters: {} },
+    { filters: {} },
   );

app/assets/javascripts/search/store/actions.js

@@ -5,7 +5,7 @@ import axios from '~/lib/utils/axios_utils';
 import { visitUrl, setUrlParams, getNormalizedURL, updateHistory } from '~/lib/utils/url_utility';
 import { logError } from '~/lib/logger';
 import { __ } from '~/locale';
-import { LABEL_FILTER_PARAM } from '~/search/sidebar/components/label_filter/data';
+import { LABEL_FILTER_PARAM } from '~/search/sidebar/components/label_filter/index.vue';
 import { SCOPE_BLOB, SEARCH_TYPE_ZOEKT } from '~/search/sidebar/constants';
 import {
   GROUPS_LOCAL_STORAGE_KEY,

app/assets/javascripts/search/store/constants.js

 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 { LABEL_FILTER_PARAM } from '~/search/sidebar/components/label_filter/data';
-import { archivedFilterData } from '~/search/sidebar/components/archived_filter/data';
+import { CONFIDENTAL_FILTER_PARAM } from '~/search/sidebar/components/confidentiality_filter/index.vue';
+import { LANGUAGE_FILTER_PARAM } from '~/search/sidebar/components/language_filter/index.vue';
+import { LABEL_FILTER_PARAM } from '~/search/sidebar/components/label_filter/index.vue';
+import { INCLUDE_ARCHIVED_FILTER_PARAM } from '~/search/sidebar/components/archived_filter/index.vue';
 import { INCLUDE_FORKED_FILTER_PARAM } from '~/search/sidebar/components/forks_filter/index.vue';
 import { s__ } from '~/locale';
 import {
@@ -20,10 +20,10 @@ export const PROJECTS_LOCAL_STORAGE_KEY = 'global-search-frequent-projects';
 export const SIDEBAR_PARAMS = [
   statusFilterData.filterParam,
-  confidentialFilterData.filterParam,
-  languageFilterData.filterParam,
+  CONFIDENTAL_FILTER_PARAM,
+  LANGUAGE_FILTER_PARAM,
   LABEL_FILTER_PARAM,
-  archivedFilterData.filterParam,
+  INCLUDE_ARCHIVED_FILTER_PARAM,
   INCLUDE_FORKED_FILTER_PARAM,
   SOURCE_BRANCH_PARAM,
   NOT_SOURCE_BRANCH_PARAM,

app/assets/javascripts/search/store/getters.js

 import { findKey, intersection, difference } from 'lodash';
-import { languageFilterData } from '~/search/sidebar/components/language_filter/data';
+import { LANGUAGE_FILTER_PARAM } from '~/search/sidebar/components/language_filter/index.vue';
+
 import {
   LABEL_FILTER_PARAM,
   LABEL_AGREGATION_NAME,
-} from '~/search/sidebar/components/label_filter/data';
+} from '~/search/sidebar/components/label_filter/index.vue';
+
 import {
   formatSearchResultCount,
   addCountOverLimit,
@@ -28,7 +30,7 @@ const unappliedNewLabelKeys = (state) => {
   );
 };
-export const queryLanguageFilters = (state) => state.query[languageFilterData.filterParam] || [];
+export const queryLanguageFilters = (state) => state.query[LANGUAGE_FILTER_PARAM] || [];
 export const frequentGroups = (state) => {
   return state.frequentItems[GROUPS_LOCAL_STORAGE_KEY];
@@ -40,9 +42,8 @@ export const frequentProjects = (state) => {
 export const languageAggregationBuckets = (state) => {
   return (
-    state.aggregations.data.find(
-      (aggregation) => aggregation.name === languageFilterData.filterParam,
-    )?.buckets || []
+    state.aggregations.data.find((aggregation) => aggregation.name === LANGUAGE_FILTER_PARAM)
+      ?.buckets || []
   );
 };

app/assets/javascripts/search/store/utils.js

@@ -2,8 +2,8 @@ import { isEqual, orderBy, isEmpty } from 'lodash';
 import AccessorUtilities from '~/lib/utils/accessor';
 import { formatNumber } from '~/locale';
 import { joinPaths, queryToObject, objectToQuery, getBaseURL } from '~/lib/utils/url_utility';
-import { languageFilterData } from '~/search/sidebar/components/language_filter/data';
-import { LABEL_AGREGATION_NAME } from '~/search/sidebar/components/label_filter/data';
+import { LANGUAGE_FILTER_PARAM } from '~/search/sidebar/components/language_filter/index.vue';
+import { LABEL_AGREGATION_NAME } from '~/search/sidebar/components/label_filter/index.vue';
 import {
   MAX_FREQUENT_ITEMS,
   MAX_FREQUENCY,
@@ -13,8 +13,6 @@ import {
   LS_REGEX_HANDLE,
 } from './constants';
-const LANGUAGE_AGGREGATION_NAME = languageFilterData.filterParam;
-
 function extractKeys(object, keyList) {
   return Object.fromEntries(keyList.map((key) => [key, object[key]]));
 }
@@ -141,7 +139,7 @@ export const getAggregationsUrl = () => {
 };
 const sortLanguages = (state, entries) => {
-  const queriedLanguages = state.query?.[LANGUAGE_AGGREGATION_NAME] || [];
+  const queriedLanguages = state.query?.[LANGUAGE_FILTER_PARAM] || [];
   if (!Array.isArray(queriedLanguages) || !queriedLanguages.length) {
     return entries;
@@ -160,7 +158,7 @@ const getUniqueNamesOnly = (items) => {
 export const prepareSearchAggregations = (state, aggregationData) =>
   aggregationData.map((item) => {
-    if (item?.name === LANGUAGE_AGGREGATION_NAME) {
+    if (item?.name === LANGUAGE_FILTER_PARAM) {
       return {
         ...item,
         buckets: sortLanguages(state, item.buckets),