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

---
 .../add_context_commits_modal_trigger.vue          |  2 +-
 .../password/components/password_input.vue         | 10 +--
 .../settings/components/access_dropdown.vue        | 31 ++++++++
 app/assets/javascripts/search/index.js             |  2 +-
 .../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 ++++++++++
 app/assets/javascripts/search/store/index.js       |  4 +-
 app/assets/javascripts/search/store/state.js       |  4 +-
 11 files changed, 180 insertions(+), 146 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')

diff --git a/app/assets/javascripts/add_context_commits_modal/components/add_context_commits_modal_trigger.vue b/app/assets/javascripts/add_context_commits_modal/components/add_context_commits_modal_trigger.vue
index a58b6e62254..eb5d1d39142 100644
--- a/app/assets/javascripts/add_context_commits_modal/components/add_context_commits_modal_trigger.vue
+++ b/app/assets/javascripts/add_context_commits_modal/components/add_context_commits_modal_trigger.vue
@@ -38,7 +38,7 @@ export default {
     :class="[
       {
         'gl-ml-5': !contextCommitsEmpty,
-        'gl-mt-5': !commitsEmpty && contextCommitsEmpty,
+        'gl-mt-1': !commitsEmpty && contextCommitsEmpty,
       },
     ]"
     :variant="commitsEmpty ? 'confirm' : 'default'"
diff --git a/app/assets/javascripts/authentication/password/components/password_input.vue b/app/assets/javascripts/authentication/password/components/password_input.vue
index fa9a7782b74..6e3af96cf33 100644
--- a/app/assets/javascripts/authentication/password/components/password_input.vue
+++ b/app/assets/javascripts/authentication/password/components/password_input.vue
@@ -15,27 +15,27 @@ export default {
     title: {
       type: String,
       required: false,
-      default: '',
+      default: null,
     },
     id: {
       type: String,
       required: false,
-      default: '',
+      default: null,
     },
     minimumPasswordLength: {
       type: String,
       required: false,
-      default: '',
+      default: null,
     },
     qaSelector: {
       type: String,
       required: false,
-      default: '',
+      default: null,
     },
     testid: {
       type: String,
       required: false,
-      default: '',
+      default: null,
     },
     autocomplete: {
       type: String,
diff --git a/app/assets/javascripts/projects/settings/components/access_dropdown.vue b/app/assets/javascripts/projects/settings/components/access_dropdown.vue
index 08a1c586f69..a2e4827cbfa 100644
--- a/app/assets/javascripts/projects/settings/components/access_dropdown.vue
+++ b/app/assets/javascripts/projects/settings/components/access_dropdown.vue
@@ -63,6 +63,11 @@ export default {
       required: false,
       default: () => [],
     },
+    items: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -143,11 +148,37 @@ export default {
     query: debounce(function debouncedSearch() {
       return this.getData();
     }, 500),
+    items(items) {
+      this.setDataForSave(items);
+    },
   },
   created() {
     this.getData({ initial: true });
   },
   methods: {
+    setDataForSave(items) {
+      this.selected = items.reduce(
+        (selected, item) => {
+          if (item.group_id) {
+            selected[LEVEL_TYPES.GROUP].push({ id: item.group_id, ...item });
+          } else if (item.user_id) {
+            selected[LEVEL_TYPES.USER].push({ id: item.user_id, ...item });
+          } else if (item.access_level) {
+            const level = this.accessLevelsData.find(({ id }) => item.access_level === id);
+            selected[LEVEL_TYPES.ROLE].push(level);
+          } else if (item.deploy_key_id) {
+            selected[LEVEL_TYPES.DEPLOY_KEY].push({ id: item.deploy_key_id, ...item });
+          }
+          return selected;
+        },
+        {
+          [LEVEL_TYPES.GROUP]: [],
+          [LEVEL_TYPES.USER]: [],
+          [LEVEL_TYPES.ROLE]: [],
+          [LEVEL_TYPES.DEPLOY_KEY]: [],
+        },
+      );
+    },
     focusInput() {
       this.$refs.search.focusInput();
     },
diff --git a/app/assets/javascripts/search/index.js b/app/assets/javascripts/search/index.js
index 1e4b1e36514..f5684cebbf9 100644
--- a/app/assets/javascripts/search/index.js
+++ b/app/assets/javascripts/search/index.js
@@ -15,7 +15,7 @@ export const initSearchApp = () => {
   const store = createStore({
     query,
     navigation,
-    useNewNavigation: gon.use_new_navigation,
+    useSidebarNavigation: gon.use_new_navigation,
   });
 
   initTopbar(store);
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>
diff --git a/app/assets/javascripts/search/store/index.js b/app/assets/javascripts/search/store/index.js
index 634f8f7a7fa..2478518c157 100644
--- a/app/assets/javascripts/search/store/index.js
+++ b/app/assets/javascripts/search/store/index.js
@@ -7,11 +7,11 @@ import createState from './state';
 
 Vue.use(Vuex);
 
-export const getStoreConfig = ({ query, navigation, useNewNavigation }) => ({
+export const getStoreConfig = (storeInitValues) => ({
   actions,
   getters,
   mutations,
-  state: createState({ query, navigation, useNewNavigation }),
+  state: createState(storeInitValues),
 });
 
 const createStore = (config) => new Vuex.Store(getStoreConfig(config));
diff --git a/app/assets/javascripts/search/store/state.js b/app/assets/javascripts/search/store/state.js
index a62b6728819..c897d4108a8 100644
--- a/app/assets/javascripts/search/store/state.js
+++ b/app/assets/javascripts/search/store/state.js
@@ -1,7 +1,7 @@
 import { cloneDeep } from 'lodash';
 import { GROUPS_LOCAL_STORAGE_KEY, PROJECTS_LOCAL_STORAGE_KEY } from './constants';
 
-const createState = ({ query, navigation, useNewNavigation }) => ({
+const createState = ({ query, navigation, useSidebarNavigation }) => ({
   urlQuery: cloneDeep(query),
   query,
   groups: [],
@@ -14,7 +14,7 @@ const createState = ({ query, navigation, useNewNavigation }) => ({
   },
   sidebarDirty: false,
   navigation,
-  useNewNavigation,
+  useSidebarNavigation,
   aggregations: {
     error: false,
     fetching: false,
-- 
cgit v1.2.3