From e9885f7a36065b9b45a35feb6c427c7742a906a4 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Wed, 31 May 2023 18:10:31 +0000
Subject: Add latest changes from gitlab-org/gitlab@master

---
 .../javascripts/search/sidebar/components/app.vue  | 23 +++---
 .../sidebar/components/scope_legacy_navigation.vue | 85 ++++++++++++++++++++++
 .../search/sidebar/components/scope_navigation.vue | 85 ----------------------
 .../sidebar/components/scope_new_navigation.vue    | 40 ----------
 .../components/scope_sidebar_navigation.vue        | 40 ++++++++++
 5 files changed, 138 insertions(+), 135 deletions(-)
 create mode 100644 app/assets/javascripts/search/sidebar/components/scope_legacy_navigation.vue
 delete mode 100644 app/assets/javascripts/search/sidebar/components/scope_navigation.vue
 delete mode 100644 app/assets/javascripts/search/sidebar/components/scope_new_navigation.vue
 create mode 100644 app/assets/javascripts/search/sidebar/components/scope_sidebar_navigation.vue

(limited to 'app/assets/javascripts/search/sidebar')

diff --git a/app/assets/javascripts/search/sidebar/components/app.vue b/app/assets/javascripts/search/sidebar/components/app.vue
index 317145d4cd1..7046a57058d 100644
--- a/app/assets/javascripts/search/sidebar/components/app.vue
+++ b/app/assets/javascripts/search/sidebar/components/app.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapState, mapGetters } from 'vuex';
-import ScopeNavigation from '~/search/sidebar/components/scope_navigation.vue';
-import ScopeNewNavigation from '~/search/sidebar/components/scope_new_navigation.vue';
+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 ResultsFilters from './results_filters.vue';
@@ -11,13 +11,14 @@ export default {
   name: 'GlobalSearchSidebar',
   components: {
     ResultsFilters,
-    ScopeNavigation,
-    ScopeNewNavigation,
+    ScopeLegacyNavigation,
+    ScopeSidebarNavigation,
     LanguageFilter,
     SidebarPortal,
   },
   computed: {
-    ...mapState(['urlQuery', 'useNewNavigation']),
+    // useSidebarNavigation refers to whether the new left sidebar navigation is enabled
+    ...mapState(['useSidebarNavigation']),
     ...mapGetters(['currentScope']),
     showIssueAndMergeFilters() {
       return this.currentScope === SCOPE_ISSUES || this.currentScope === SCOPE_MERGE_REQUESTS;
@@ -25,7 +26,9 @@ export default {
     showBlobFilter() {
       return this.currentScope === SCOPE_BLOB;
     },
-    showOldNavigation() {
+    showScopeNavigation() {
+      // showLegacyNavigation refers to whether the scope navigation should be shown
+      // while the legacy navigation is being used and there are no search results the scope navigation has to be hidden
       return Boolean(this.currentScope);
     },
   },
@@ -33,18 +36,18 @@ export default {
 </script>
 
 <template>
-  <section v-if="useNewNavigation">
+  <section v-if="useSidebarNavigation">
     <sidebar-portal>
-      <scope-new-navigation />
+      <scope-sidebar-navigation />
       <results-filters v-if="showIssueAndMergeFilters" />
       <language-filter v-if="showBlobFilter" />
     </sidebar-portal>
   </section>
   <section
-    v-else
+    v-else-if="showScopeNavigation"
     class="search-sidebar gl-display-flex gl-flex-direction-column gl-md-mr-5 gl-mb-6 gl-mt-5"
   >
-    <scope-navigation />
+    <scope-legacy-navigation />
     <results-filters v-if="showIssueAndMergeFilters" />
     <language-filter v-if="showBlobFilter" />
   </section>
diff --git a/app/assets/javascripts/search/sidebar/components/scope_legacy_navigation.vue b/app/assets/javascripts/search/sidebar/components/scope_legacy_navigation.vue
new file mode 100644
index 00000000000..e682369d60b
--- /dev/null
+++ b/app/assets/javascripts/search/sidebar/components/scope_legacy_navigation.vue
@@ -0,0 +1,85 @@
+<script>
+import { GlNav, GlNavItem, GlIcon } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
+import { s__ } from '~/locale';
+import Tracking from '~/tracking';
+import { formatSearchResultCount, addCountOverLimit } from '~/search/store/utils';
+import { NAV_LINK_DEFAULT_CLASSES, NAV_LINK_COUNT_DEFAULT_CLASSES } from '../constants';
+import { slugifyWithUnderscore } from '../../../lib/utils/text_utility';
+
+export default {
+  name: 'ScopeLegacyNavigation',
+  i18n: {
+    countOverLimitLabel: s__('GlobalSearch|Result count is over limit.'),
+  },
+  components: {
+    GlNav,
+    GlNavItem,
+    GlIcon,
+  },
+  mixins: [Tracking.mixin()],
+  computed: {
+    ...mapState(['navigation', 'urlQuery']),
+  },
+  created() {
+    if (this.urlQuery?.search) {
+      this.fetchSidebarCount();
+    }
+  },
+  methods: {
+    ...mapActions(['fetchSidebarCount']),
+    showFormatedCount(countString) {
+      return formatSearchResultCount(countString);
+    },
+    isCountOverLimit(countString) {
+      return Boolean(addCountOverLimit(countString));
+    },
+    handleClick(scope) {
+      this.track('click_menu_item', { label: `vertical_navigation_${scope}` });
+    },
+    linkClasses(isHighlighted) {
+      return [...this.$options.NAV_LINK_DEFAULT_CLASSES, { 'gl-font-weight-bold': isHighlighted }];
+    },
+    countClasses(isHighlighted) {
+      return [
+        ...this.$options.NAV_LINK_COUNT_DEFAULT_CLASSES,
+        isHighlighted ? 'gl-text-gray-900' : 'gl-text-gray-500',
+      ];
+    },
+    qaSelectorValue(item) {
+      return `${slugifyWithUnderscore(item.label)}_tab`;
+    },
+  },
+  NAV_LINK_DEFAULT_CLASSES,
+  NAV_LINK_COUNT_DEFAULT_CLASSES,
+};
+</script>
+
+<template>
+  <nav data-testid="search-filter">
+    <gl-nav vertical pills>
+      <gl-nav-item
+        v-for="(item, scope) in navigation"
+        :key="scope"
+        :link-classes="linkClasses(item.active)"
+        class="gl-mb-1"
+        :href="item.link"
+        :active="item.active"
+        :data-qa-selector="qaSelectorValue(item)"
+        :data-testid="qaSelectorValue(item)"
+        @click="handleClick(scope)"
+        ><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)"
+            name="plus"
+            :aria-label="$options.i18n.countOverLimitLabel"
+            :size="8"
+          />
+        </span>
+      </gl-nav-item>
+    </gl-nav>
+    <hr class="gl-mt-5 gl-mx-5 gl-mb-0 gl-border-gray-100 gl-md-display-none" />
+  </nav>
+</template>
diff --git a/app/assets/javascripts/search/sidebar/components/scope_navigation.vue b/app/assets/javascripts/search/sidebar/components/scope_navigation.vue
deleted file mode 100644
index fc41baee831..00000000000
--- a/app/assets/javascripts/search/sidebar/components/scope_navigation.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script>
-import { GlNav, GlNavItem, GlIcon } from '@gitlab/ui';
-import { mapActions, mapState } from 'vuex';
-import { s__ } from '~/locale';
-import Tracking from '~/tracking';
-import { formatSearchResultCount, addCountOverLimit } from '~/search/store/utils';
-import { NAV_LINK_DEFAULT_CLASSES, NAV_LINK_COUNT_DEFAULT_CLASSES } from '../constants';
-import { slugifyWithUnderscore } from '../../../lib/utils/text_utility';
-
-export default {
-  name: 'ScopeNavigation',
-  i18n: {
-    countOverLimitLabel: s__('GlobalSearch|Result count is over limit.'),
-  },
-  components: {
-    GlNav,
-    GlNavItem,
-    GlIcon,
-  },
-  mixins: [Tracking.mixin()],
-  computed: {
-    ...mapState(['navigation', 'urlQuery']),
-  },
-  created() {
-    if (this.urlQuery?.search) {
-      this.fetchSidebarCount();
-    }
-  },
-  methods: {
-    ...mapActions(['fetchSidebarCount']),
-    showFormatedCount(countString) {
-      return formatSearchResultCount(countString);
-    },
-    isCountOverLimit(countString) {
-      return Boolean(addCountOverLimit(countString));
-    },
-    handleClick(scope) {
-      this.track('click_menu_item', { label: `vertical_navigation_${scope}` });
-    },
-    linkClasses(isHighlighted) {
-      return [...this.$options.NAV_LINK_DEFAULT_CLASSES, { 'gl-font-weight-bold': isHighlighted }];
-    },
-    countClasses(isHighlighted) {
-      return [
-        ...this.$options.NAV_LINK_COUNT_DEFAULT_CLASSES,
-        isHighlighted ? 'gl-text-gray-900' : 'gl-text-gray-500',
-      ];
-    },
-    qaSelectorValue(item) {
-      return `${slugifyWithUnderscore(item.label)}_tab`;
-    },
-  },
-  NAV_LINK_DEFAULT_CLASSES,
-  NAV_LINK_COUNT_DEFAULT_CLASSES,
-};
-</script>
-
-<template>
-  <nav data-testid="search-filter">
-    <gl-nav vertical pills>
-      <gl-nav-item
-        v-for="(item, scope) in navigation"
-        :key="scope"
-        :link-classes="linkClasses(item.active)"
-        class="gl-mb-1"
-        :href="item.link"
-        :active="item.active"
-        :data-qa-selector="qaSelectorValue(item)"
-        :data-testid="qaSelectorValue(item)"
-        @click="handleClick(scope)"
-        ><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)"
-            name="plus"
-            :aria-label="$options.i18n.countOverLimitLabel"
-            :size="8"
-          />
-        </span>
-      </gl-nav-item>
-    </gl-nav>
-    <hr class="gl-mt-5 gl-mx-5 gl-mb-0 gl-border-gray-100 gl-md-display-none" />
-  </nav>
-</template>
diff --git a/app/assets/javascripts/search/sidebar/components/scope_new_navigation.vue b/app/assets/javascripts/search/sidebar/components/scope_new_navigation.vue
deleted file mode 100644
index 86b7cc577a6..00000000000
--- a/app/assets/javascripts/search/sidebar/components/scope_new_navigation.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-import { mapActions, mapState, mapGetters } from 'vuex';
-import { s__ } from '~/locale';
-import Tracking from '~/tracking';
-import NavItem from '~/super_sidebar/components/nav_item.vue';
-import { NAV_LINK_DEFAULT_CLASSES, NAV_LINK_COUNT_DEFAULT_CLASSES } from '../constants';
-
-export default {
-  name: 'ScopeNewNavigation',
-  i18n: {
-    countOverLimitLabel: s__('GlobalSearch|Result count is over limit.'),
-  },
-  components: {
-    NavItem,
-  },
-  mixins: [Tracking.mixin()],
-  computed: {
-    ...mapState(['navigation', 'urlQuery']),
-    ...mapGetters(['navigationItems']),
-  },
-  created() {
-    if (this.urlQuery?.search) {
-      this.fetchSidebarCount();
-    }
-  },
-  methods: {
-    ...mapActions(['fetchSidebarCount']),
-  },
-  NAV_LINK_DEFAULT_CLASSES,
-  NAV_LINK_COUNT_DEFAULT_CLASSES,
-};
-</script>
-
-<template>
-  <nav data-testid="search-filter" class="gl-py-2 gl-relative">
-    <ul class="gl-px-2 gl-list-style-none">
-      <nav-item v-for="item in navigationItems" :key="`menu-${item.title}`" :item="item" />
-    </ul>
-  </nav>
-</template>
diff --git a/app/assets/javascripts/search/sidebar/components/scope_sidebar_navigation.vue b/app/assets/javascripts/search/sidebar/components/scope_sidebar_navigation.vue
new file mode 100644
index 00000000000..3707e152e47
--- /dev/null
+++ b/app/assets/javascripts/search/sidebar/components/scope_sidebar_navigation.vue
@@ -0,0 +1,40 @@
+<script>
+import { mapActions, mapState, mapGetters } from 'vuex';
+import { s__ } from '~/locale';
+import Tracking from '~/tracking';
+import NavItem from '~/super_sidebar/components/nav_item.vue';
+import { NAV_LINK_DEFAULT_CLASSES, NAV_LINK_COUNT_DEFAULT_CLASSES } from '../constants';
+
+export default {
+  name: 'ScopeSidebarNavigation',
+  i18n: {
+    countOverLimitLabel: s__('GlobalSearch|Result count is over limit.'),
+  },
+  components: {
+    NavItem,
+  },
+  mixins: [Tracking.mixin()],
+  computed: {
+    ...mapState(['navigation', 'urlQuery']),
+    ...mapGetters(['navigationItems']),
+  },
+  created() {
+    if (this.urlQuery?.search) {
+      this.fetchSidebarCount();
+    }
+  },
+  methods: {
+    ...mapActions(['fetchSidebarCount']),
+  },
+  NAV_LINK_DEFAULT_CLASSES,
+  NAV_LINK_COUNT_DEFAULT_CLASSES,
+};
+</script>
+
+<template>
+  <nav data-testid="search-filter" class="gl-py-2 gl-relative">
+    <ul class="gl-px-2 gl-list-style-none">
+      <nav-item v-for="item in navigationItems" :key="`menu-${item.title}`" :item="item" />
+    </ul>
+  </nav>
+</template>
-- 
cgit v1.2.3