Merge branch '40286-hide-full-namespace-groups-tree' into 'master'

Show only group name by default and put full namespace in tooltip in Groups tree

Closes #40286

See merge request gitlab-org/gitlab-ce!15650

app/assets/javascripts/groups/components/group_item.vue

 <script>
+import tooltip from '../../vue_shared/directives/tooltip';
 import identicon from '../../vue_shared/components/identicon.vue';
 import eventHub from '../event_hub';
 
@@ -8,6 +9,9 @@ import itemStats from './item_stats.vue';
 import itemActions from './item_actions.vue';
 
 export default {
+  directives: {
+    tooltip,
+  },
   components: {
     identicon,
     itemCaret,
@@ -112,10 +116,16 @@ export default {
         </a>
       </div>
       <div
-        class="title">
+        class="title namespace-title">
         <a
+          v-tooltip
           :href="group.relativePath"
-          class="no-expand">{{group.fullName}}</a>
+          :title="group.fullName"
+          class="no-expand"
+          data-placement="top"
+        >
+          {{group.name}}
+        </a>
         <span
           v-if="group.permission"
           class="access-type"

app/assets/stylesheets/framework/lists.scss

@@ -449,6 +449,12 @@ ul.indent-list {
   }
 }
 
+.namespace-title {
+  .tooltip-inner {
+    max-width: 350px;
+  }
+}
+
 ul.group-list-tree {
   li.group-row {
     &.has-description {

changelogs/unreleased/40286-hide-full-namespace-groups-tree.yml

+---
+title: Show only group name by default and put full namespace in tooltip in Groups
+  tree
+merge_request: 15650
+author:
+type: changed