Add latest changes from gitlab-org/gitlab@16-8-stable-eev16.8.0-rc42

7 files changed, 48 insertions, 18 deletions

diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index 3440bd87e6b..4ede8fda01d 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -22,6 +22,7 @@ export default {
     GlLoadingIcon,
     GlEmptyState,
   },
+  inject: ['emptySearchIllustration'],
   props: {
     action: {
       type: String,
@@ -245,6 +246,7 @@ export default {
       <groups-component v-if="hasGroups" :groups="groups" :page-info="pageInfo" :action="action" />
       <gl-empty-state
         v-else-if="fromSearch"
+        :svg-path="emptySearchIllustration"
         :title="$options.i18n.searchEmptyState.title"
         :description="$options.i18n.searchEmptyState.description"
         data-testid="search-empty-state"
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 3a08e3e546f..6e347a3c95b 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -20,6 +20,7 @@ import {
   VISIBILITY_LEVELS_STRING_TO_INTEGER,
   VISIBILITY_TYPE_ICON,
   GROUP_VISIBILITY_TYPE,
+  PROJECT_VISIBILITY_TYPE,
 } from '~/visibility_level/constants';
 import { ITEM_TYPE, ACTIVE_TAB_SHARED } from '../constants';
 
@@ -105,7 +106,8 @@ export default {
       return VISIBILITY_TYPE_ICON[this.group.visibility];
     },
     visibilityTooltip() {
-      return GROUP_VISIBILITY_TYPE[this.group.visibility];
+      if (this.isGroup) return GROUP_VISIBILITY_TYPE[this.group.visibility];
+      return PROJECT_VISIBILITY_TYPE[this.group.visibility];
     },
     microdata() {
       return this.group.microdata || {};
diff --git a/app/assets/javascripts/groups/components/group_name_and_path.vue b/app/assets/javascripts/groups/components/group_name_and_path.vue
index 853fdd7c55e..83953feedbf 100644
--- a/app/assets/javascripts/groups/components/group_name_and_path.vue
+++ b/app/assets/javascripts/groups/components/group_name_and_path.vue
@@ -39,6 +39,9 @@ export default {
           'Groups|Must start with letter, digit, emoji, or underscore. Can also contain periods, dashes, spaces, and parentheses.',
         ),
         invalidFeedback: s__('Groups|Enter a descriptive name for your group.'),
+        warningForUsingDotInName: s__(
+          'Groups|Your group name must not contain a period if you intend to use SCIM integration, as it can lead to errors.',
+        ),
       },
       path: {
         placeholder: __('my-awesome-group'),
@@ -299,6 +302,14 @@ export default {
         @invalid="handleInvalidName"
       />
     </gl-form-group>
+    <gl-alert
+      class="gl-mb-5"
+      :dismissible="false"
+      variant="warning"
+      data-testid="dot-in-path-alert"
+    >
+      {{ $options.i18n.inputs.name.warningForUsingDotInName }}
+    </gl-alert>
 
     <div :class="newSubgroup && 'row gl-mb-3'">
       <gl-form-group v-if="newSubgroup" class="col-sm-6 gl-pr-0" :label="inputLabels.subgroupPath">
@@ -386,7 +397,12 @@ export default {
     </div>
 
     <template v-if="isEditingGroup">
-      <gl-alert class="gl-mb-5" :dismissible="false" variant="warning">
+      <gl-alert
+        class="gl-mb-5"
+        :dismissible="false"
+        variant="warning"
+        data-testid="changing-url-alert"
+      >
         {{ $options.i18n.changingUrlWarningMessage }}
         <gl-link :href="$options.changingGroupPathHelpPagePath"
           >{{ $options.i18n.learnMore }}
diff --git a/app/assets/javascripts/groups/components/overview_tabs.vue b/app/assets/javascripts/groups/components/overview_tabs.vue
index 8781f03a412..82bd4765986 100644
--- a/app/assets/javascripts/groups/components/overview_tabs.vue
+++ b/app/assets/javascripts/groups/components/overview_tabs.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTabs, GlTab, GlSearchBoxByType, GlSorting, GlSortingItem } from '@gitlab/ui';
+import { GlTabs, GlTab, GlSearchBoxByType, GlSorting } from '@gitlab/ui';
 import { isString, debounce } from 'lodash';
 import { __ } from '~/locale';
 import { DEBOUNCE_DELAY } from '~/vue_shared/components/filtered_search_bar/constants';
@@ -30,7 +30,6 @@ export default {
     GroupsApp,
     GlSearchBoxByType,
     GlSorting,
-    GlSortingItem,
     SubgroupsAndProjectsEmptyState,
     SharedProjectsEmptyState,
     ArchivedProjectsEmptyState,
@@ -84,6 +83,9 @@ export default {
     sortQueryStringValue() {
       return this.isAscending ? this.sort.asc : this.sort.desc;
     },
+    activeTabSortOptions() {
+      return this.activeTab.sortingItems.map(({ label }) => ({ value: label, text: label }));
+    },
   },
   mounted() {
     this.search = this.$route.query?.filter || '';
@@ -178,12 +180,14 @@ export default {
 
       this.handleSearchOrSortChange();
     },
-    handleSortingItemClick(sortingItem) {
-      if (sortingItem === this.sort) {
+    handleSortingItemClick(value) {
+      const selectedSortingItem = this.activeTab.sortingItems.find((item) => item.label === value);
+
+      if (selectedSortingItem === this.sort) {
         return;
       }
 
-      this.sort = sortingItem;
+      this.sort = selectedSortingItem;
 
       this.handleSearchOrSortChange();
     },
@@ -239,16 +243,11 @@ export default {
               data-testid="group_sort_by_dropdown"
               :text="sort.label"
               :is-ascending="isAscending"
+              :sort-options="activeTabSortOptions"
+              :sort-by="sort.label"
+              @sortByChange="handleSortingItemClick"
               @sortDirectionChange="handleSortDirectionChange"
-            >
-              <gl-sorting-item
-                v-for="sortingItem in activeTab.sortingItems"
-                :key="sortingItem.label"
-                :active="sortingItem === sort"
-                @click="handleSortingItemClick(sortingItem)"
-                >{{ sortingItem.label }}</gl-sorting-item
-              >
-            </gl-sorting>
+            />
           </div>
         </div>
       </li>
diff --git a/app/assets/javascripts/groups/init_overview_tabs.js b/app/assets/javascripts/groups/init_overview_tabs.js
index 80dd1d36734..2f03705b453 100644
--- a/app/assets/javascripts/groups/init_overview_tabs.js
+++ b/app/assets/javascripts/groups/init_overview_tabs.js
@@ -47,6 +47,7 @@ export const initGroupOverviewTabs = () => {
     newProjectIllustration,
     emptyProjectsIllustration,
     emptySubgroupIllustration,
+    emptySearchIllustration,
     canCreateSubgroups,
     canCreateProjects,
     currentGroupVisibility,
@@ -67,6 +68,7 @@ export const initGroupOverviewTabs = () => {
       newProjectIllustration,
       emptyProjectsIllustration,
       emptySubgroupIllustration,
+      emptySearchIllustration,
       canCreateSubgroups: parseBoolean(canCreateSubgroups),
       canCreateProjects: parseBoolean(canCreateProjects),
       currentGroupVisibility,
diff --git a/app/assets/javascripts/groups/settings/api/access_dropdown_api.js b/app/assets/javascripts/groups/settings/api/access_dropdown_api.js
index 5560d10d179..37f95a7ab30 100644
--- a/app/assets/javascripts/groups/settings/api/access_dropdown_api.js
+++ b/app/assets/javascripts/groups/settings/api/access_dropdown_api.js
@@ -7,10 +7,15 @@ const buildUrl = (urlRoot, url) => {
   return joinPaths(urlRoot, url);
 };
 
-export const getSubGroups = () => {
+const defaultOptions = { includeParentDescendants: false };
+
+export const getSubGroups = (options = defaultOptions) => {
+  const { includeParentDescendants } = options;
+
   return axios.get(buildUrl(gon.relative_url_root || '', GROUP_SUBGROUPS_PATH), {
     params: {
       group_id: gon.current_group_id,
+      include_parent_descendants: includeParentDescendants,
     },
   });
 };
diff --git a/app/assets/javascripts/groups/settings/components/access_dropdown.vue b/app/assets/javascripts/groups/settings/components/access_dropdown.vue
index 457a2db174c..fee1383c8e2 100644
--- a/app/assets/javascripts/groups/settings/components/access_dropdown.vue
+++ b/app/assets/javascripts/groups/settings/components/access_dropdown.vue
@@ -93,7 +93,11 @@ export default {
       this.loading = true;
 
       if (this.hasLicense) {
-        Promise.all([this.groups.length ? Promise.resolve({ data: this.groups }) : getSubGroups()])
+        Promise.all([
+          this.groups.length
+            ? Promise.resolve({ data: this.groups })
+            : getSubGroups({ includeParentDescendants: true }),
+        ])
           .then(([groupsResponse]) => {
             this.consolidateData(groupsResponse.data);
             this.setSelected({ initial });