Add latest changes from gitlab-org/gitlab@13-1-stable-ee

3 files changed, 19 insertions, 12 deletions

diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 1b8c75202fb..6b9748bb725 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -12,6 +12,8 @@ import itemStats from './item_stats.vue';
 import itemStatsValue from './item_stats_value.vue';
 import itemActions from './item_actions.vue';
 
+import { showLearnGitLabGroupItemPopover } from '~/onboarding_issues';
+
 export default {
   directives: {
     tooltip,
@@ -73,6 +75,11 @@ export default {
       return GROUP_VISIBILITY_TYPE[this.group.visibility];
     },
   },
+  mounted() {
+    if (this.group.name === 'Learn GitLab') {
+      showLearnGitLabGroupItemPopover(this.group.id);
+    }
+  },
   methods: {
     onClickRowGroup(e) {
       const NO_EXPAND_CLS = 'no-expand';
@@ -104,7 +111,7 @@ export default {
       <gl-loading-icon
         v-if="group.isChildrenLoading"
         size="lg"
-        class="d-none d-sm-inline-flex flex-shrink-0 append-right-8"
+        class="d-none d-sm-inline-flex flex-shrink-0 gl-mr-3"
       />
       <div
         :class="{ 'd-sm-flex': !group.isChildrenLoading }"
@@ -117,12 +124,12 @@ export default {
       </div>
       <div class="group-text-container d-flex flex-fill align-items-center">
         <div class="group-text flex-grow-1 flex-shrink-1">
-          <div class="d-flex align-items-center flex-wrap title namespace-title append-right-8">
+          <div class="d-flex align-items-center flex-wrap title namespace-title gl-mr-3">
             <a
               v-tooltip
               :href="group.relativePath"
               :title="group.fullName"
-              class="no-expand prepend-top-8 append-right-8"
+              class="no-expand gl-mt-3 gl-mr-3 gl-text-gray-900!"
               data-placement="bottom"
               >{{
                 // ending bracket must be by closing tag to prevent
@@ -133,9 +140,9 @@ export default {
             <item-stats-value
               :icon-name="visibilityIcon"
               :title="visibilityTooltip"
-              css-class="item-visibility d-inline-flex align-items-center prepend-top-8 append-right-4 text-secondary"
+              css-class="item-visibility d-inline-flex align-items-center gl-mt-3 append-right-4 text-secondary"
             />
-            <span v-if="group.permission" class="user-access-role prepend-top-8">
+            <span v-if="group.permission" class="user-access-role gl-mt-3">
               {{ group.permission }}
             </span>
           </div>
@@ -150,7 +157,7 @@ export default {
           class="metadata align-items-md-center d-flex flex-grow-1 flex-shrink-0 flex-wrap justify-content-md-between"
         >
           <item-actions v-if="isGroup" :group="group" :parent-group="parentGroup" />
-          <item-stats :item="group" class="group-stats prepend-top-2 d-none d-md-flex" />
+          <item-stats :item="group" class="group-stats gl-mt-2 d-none d-md-flex" />
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index 5454480e61a..985ea5a9019 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -53,7 +53,7 @@ export default {
       :aria-label="leaveBtnTitle"
       data-container="body"
       data-placement="bottom"
-      class="leave-group btn btn-xs no-expand"
+      class="leave-group btn btn-xs no-expand gl-text-gray-700 gl-ml-5"
       @click.prevent="onLeaveGroup"
     >
       <icon name="leave" class="position-top-0" />
@@ -66,7 +66,7 @@ export default {
       :aria-label="editBtnTitle"
       data-container="body"
       data-placement="bottom"
-      class="edit-group btn btn-xs no-expand"
+      class="edit-group btn btn-xs no-expand gl-text-gray-700 gl-ml-5"
     >
       <icon name="settings" class="position-top-0 align-middle" />
     </a>
diff --git a/app/assets/javascripts/groups/components/item_stats.vue b/app/assets/javascripts/groups/components/item_stats.vue
index 53da3f7b2ee..ffe4b18dea1 100644
--- a/app/assets/javascripts/groups/components/item_stats.vue
+++ b/app/assets/javascripts/groups/components/item_stats.vue
@@ -44,26 +44,26 @@ export default {
 </script>
 
 <template>
-  <div class="stats">
+  <div class="stats gl-text-gray-700">
     <item-stats-value
       v-if="isGroup"
       :title="__('Subgroups')"
       :value="item.subgroupCount"
-      css-class="number-subgroups"
+      css-class="number-subgroups gl-ml-5"
       icon-name="folder-o"
     />
     <item-stats-value
       v-if="isGroup"
       :title="__('Projects')"
       :value="item.projectCount"
-      css-class="number-projects"
+      css-class="number-projects gl-ml-5"
       icon-name="bookmark"
     />
     <item-stats-value
       v-if="isGroup"
       :title="__('Members')"
       :value="item.memberCount"
-      css-class="number-users"
+      css-class="number-users gl-ml-5"
       icon-name="users"
     />
     <item-stats-value