Update group overview icons to match sidebar icons

Switch to official group and project icons

Changelog: changed

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

@@ -131,7 +131,7 @@ export default {
     >
       <div class="folder-toggle-wrap gl-mr-2 d-flex align-items-center">
         <item-caret :is-group-open="group.isOpen" />
-        <item-type-icon :item-type="group.type" :is-group-open="group.isOpen" />
+        <item-type-icon :item-type="group.type" />
       </div>
       <gl-loading-icon
         v-if="group.isChildrenLoading"

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

@@ -55,7 +55,7 @@ export default {
       :title="__('Subgroups')"
       :value="item.subgroupCount"
       css-class="number-subgroups gl-ml-5"
-      icon-name="folder-o"
+      icon-name="group"
       data-testid="subgroups-count"
     />
     <item-stats-value
@@ -63,7 +63,7 @@ export default {
       :title="__('Projects')"
       :value="item.projectCount"
       css-class="number-projects gl-ml-5"
-      icon-name="bookmark"
+      icon-name="project"
       data-testid="projects-count"
     />
     <item-stats-value

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

@@ -11,18 +11,13 @@ export default {
       type: String,
       required: true,
     },
-    isGroupOpen: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
   },
   computed: {
     iconClass() {
       if (this.itemType === ITEM_TYPE.GROUP) {
-        return this.isGroupOpen ? 'folder-open' : 'folder-o';
+        return 'group';
       }
-      return 'bookmark';
+      return 'project';
     },
   },
 };

spec/frontend/groups/components/item_type_icon_spec.js

@@ -8,7 +8,6 @@ describe('ItemTypeIcon', () => {
 
   const defaultProps = {
     itemType: ITEM_TYPE.GROUP,
-    isGroupOpen: false,
   };
 
   const createComponent = (props = {}) => {
@@ -34,20 +33,14 @@ describe('ItemTypeIcon', () => {
     });
 
     it.each`
-      type                 | isGroupOpen | icon
-      ${ITEM_TYPE.GROUP}   | ${true}     | ${'folder-open'}
-      ${ITEM_TYPE.GROUP}   | ${false}    | ${'folder-o'}
-      ${ITEM_TYPE.PROJECT} | ${true}     | ${'bookmark'}
-      ${ITEM_TYPE.PROJECT} | ${false}    | ${'bookmark'}
-    `(
-      'shows "$icon" icon when `itemType` is "$type" and `isGroupOpen` is $isGroupOpen',
-      ({ type, isGroupOpen, icon }) => {
-        createComponent({
-          itemType: type,
-          isGroupOpen,
-        });
-        expect(findGlIcon().props('name')).toBe(icon);
-      },
-    );
+      type                 | icon
+      ${ITEM_TYPE.GROUP}   | ${'group'}
+      ${ITEM_TYPE.PROJECT} | ${'project'}
+    `('shows "$icon" icon when `itemType` is "$type"', ({ type, icon }) => {
+      createComponent({
+        itemType: type,
+      });
+      expect(findGlIcon().props('name')).toBe(icon);
+    });
   });
 });