Add latest changes from gitlab-org/gitlab@master

5 files changed, 25 insertions, 26 deletions

diff --git a/app/assets/javascripts/search/sidebar/components/app.vue b/app/assets/javascripts/search/sidebar/components/app.vue
index 7c9e30a2d97..928cd46c9eb 100644
--- a/app/assets/javascripts/search/sidebar/components/app.vue
+++ b/app/assets/javascripts/search/sidebar/components/app.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 import ScopeNavigation from '~/search/sidebar/components/scope_navigation.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { SCOPE_ISSUES, SCOPE_MERGE_REQUESTS, SCOPE_BLOB } from '../constants';
@@ -16,11 +16,12 @@ export default {
   mixins: [glFeatureFlagsMixin()],
   computed: {
     ...mapState(['urlQuery']),
+    ...mapGetters(['currentScope']),
     showIssueAndMergeFilters() {
-      return this.urlQuery.scope === SCOPE_ISSUES || this.urlQuery.scope === SCOPE_MERGE_REQUESTS;
+      return this.currentScope === SCOPE_ISSUES || this.currentScope === SCOPE_MERGE_REQUESTS;
     },
     showBlobFilter() {
-      return this.urlQuery.scope === SCOPE_BLOB && this.glFeatures.searchBlobsLanguageAggregation;
+      return this.currentScope === SCOPE_BLOB && this.glFeatures.searchBlobsLanguageAggregation;
     },
   },
 };
diff --git a/app/assets/javascripts/search/sidebar/components/checkbox_filter.vue b/app/assets/javascripts/search/sidebar/components/checkbox_filter.vue
index 36cbe9ce693..3784f08adcc 100644
--- a/app/assets/javascripts/search/sidebar/components/checkbox_filter.vue
+++ b/app/assets/javascripts/search/sidebar/components/checkbox_filter.vue
@@ -19,7 +19,7 @@ export default {
   },
   computed: {
     ...mapState(['query']),
-    ...mapGetters(['queryLangugageFilters']),
+    ...mapGetters(['queryLanguageFilters']),
     scope() {
       return this.query.scope;
     },
@@ -31,7 +31,7 @@ export default {
     },
     selectedFilter: {
       get() {
-        return intersection(this.flatDataFilterValues, this.queryLangugageFilters);
+        return intersection(this.flatDataFilterValues, this.queryLanguageFilters);
       },
       set(value) {
         this.setQuery({ key: this.filtersData?.filterParam, value });
diff --git a/app/assets/javascripts/search/sidebar/components/language_filter.vue b/app/assets/javascripts/search/sidebar/components/language_filter.vue
index e5306cd7b79..b2f8d3e1f5f 100644
--- a/app/assets/javascripts/search/sidebar/components/language_filter.vue
+++ b/app/assets/javascripts/search/sidebar/components/language_filter.vue
@@ -32,19 +32,19 @@ export default {
   computed: {
     ...mapState(['aggregations', 'sidebarDirty']),
     ...mapGetters([
-      'langugageAggregationBuckets',
+      'languageAggregationBuckets',
       'currentUrlQueryHasLanguageFilters',
-      'queryLangugageFilters',
+      'queryLanguageFilters',
     ]),
     hasBuckets() {
-      return this.langugageAggregationBuckets.length > 0;
+      return this.languageAggregationBuckets.length > 0;
     },
     filtersData() {
       return convertFiltersData(this.shortenedLanguageFilters);
     },
     shortenedLanguageFilters() {
       if (!this.hasShowMore) {
-        return this.langugageAggregationBuckets;
+        return this.languageAggregationBuckets;
       }
       if (this.showAll) {
         return this.trimBuckets(MAX_ITEM_LENGTH);
@@ -52,16 +52,16 @@ export default {
       return this.trimBuckets(DEFAULT_ITEM_LENGTH);
     },
     hasShowMore() {
-      return this.langugageAggregationBuckets.length > DEFAULT_ITEM_LENGTH;
+      return this.languageAggregationBuckets.length > DEFAULT_ITEM_LENGTH;
     },
     hasOverMax() {
-      return this.langugageAggregationBuckets.length > MAX_ITEM_LENGTH;
+      return this.languageAggregationBuckets.length > MAX_ITEM_LENGTH;
     },
     dividerClasses() {
       return [...HR_DEFAULT_CLASSES, ...ONLY_SHOW_MD];
     },
     hasQueryFilters() {
-      return this.queryLangugageFilters.length > 0;
+      return this.queryLanguageFilters.length > 0;
     },
   },
   async created() {
@@ -78,7 +78,7 @@ export default {
       this.showAll = true;
     },
     trimBuckets(length) {
-      return this.langugageAggregationBuckets.slice(0, length);
+      return this.languageAggregationBuckets.slice(0, length);
     },
     cleanResetFilters() {
       if (this.currentUrlQueryHasLanguageFilters) {
diff --git a/app/assets/javascripts/search/sidebar/components/scope_navigation.vue b/app/assets/javascripts/search/sidebar/components/scope_navigation.vue
index 5863381e2ef..02a3870f499 100644
--- a/app/assets/javascripts/search/sidebar/components/scope_navigation.vue
+++ b/app/assets/javascripts/search/sidebar/components/scope_navigation.vue
@@ -44,9 +44,6 @@ export default {
         isHighlighted ? 'gl-text-gray-900' : 'gl-text-gray-500',
       ];
     },
-    isActive(scope, index) {
-      return this.urlQuery.scope ? this.urlQuery.scope === scope : index === 0;
-    },
     qaSelectorValue(item) {
       return `${slugifyWithUnderscore(item.label)}_tab`;
     },
@@ -60,16 +57,17 @@ export default {
   <nav data-testid="search-filter">
     <gl-nav vertical pills>
       <gl-nav-item
-        v-for="(item, scope, index) in navigation"
+        v-for="(item, scope) in navigation"
         :key="scope"
-        :link-classes="linkClasses(isActive(scope, index))"
+        :link-classes="linkClasses(item.active)"
         class="gl-mb-1"
         :href="item.link"
-        :active="isActive(scope, index)"
+        :active="item.active"
         :data-qa-selector="qaSelectorValue(item)"
+        :data-testid="qaSelectorValue(item)"
         @click="handleClick(scope)"
-        ><span>{{ item.label }}</span
-        ><span v-if="item.count" :class="countClasses(isActive(scope, index))">
+        ><span data-testid="label">{{ item.label }}</span
+        ><span v-if="item.count" data-testid="count" :class="countClasses(item.active)">
           {{ showFormatedCount(item.count)
           }}<gl-icon
             v-if="isCountOverLimit(item.count)"
diff --git a/app/assets/javascripts/search/store/getters.js b/app/assets/javascripts/search/store/getters.js
index 853c83b07ee..36d98233e28 100644
--- a/app/assets/javascripts/search/store/getters.js
+++ b/app/assets/javascripts/search/store/getters.js
@@ -1,4 +1,4 @@
-import { has } from 'lodash';
+import { findKey, has } from 'lodash';
 import { languageFilterData } from '~/search/sidebar/constants/language_filter_data';
 
 import { GROUPS_LOCAL_STORAGE_KEY, PROJECTS_LOCAL_STORAGE_KEY } from './constants';
@@ -11,7 +11,7 @@ export const frequentProjects = (state) => {
   return state.frequentItems[PROJECTS_LOCAL_STORAGE_KEY];
 };
 
-export const langugageAggregationBuckets = (state) => {
+export const languageAggregationBuckets = (state) => {
   return (
     state.aggregations.data.find(
       (aggregation) => aggregation.name === languageFilterData.filterParam,
@@ -19,9 +19,9 @@ export const langugageAggregationBuckets = (state) => {
   );
 };
 
-export const queryLangugageFilters = (state) => {
-  return state.query[languageFilterData.filterParam] || [];
-};
+export const currentScope = (state) => findKey(state.navigation, { active: true });
+
+export const queryLanguageFilters = (state) => state.query[languageFilterData.filterParam] || [];
 
 export const currentUrlQueryHasLanguageFilters = (state) =>
   has(state.urlQuery, languageFilterData.filterParam) &&