Merge branch '218477-update-epic-issue-closed-icons' into 'master'

Use closed icons for issue and epics

See merge request gitlab-org/gitlab!47176

ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue

@@ -80,7 +80,10 @@ export default {
       return this.isOpen ? __('Opened') : __('Closed');
     },
     stateIconName() {
-      return this.item.type === ChildType.Epic ? 'epic' : 'issues';
+      if (this.item.type === ChildType.Epic) {
+        return this.isOpen ? 'epic' : 'epic-closed';
+      }
+      return this.isOpen ? 'issues' : 'issue-closed';
     },
     stateIconClass() {
       return this.isOpen

ee/app/assets/stylesheets/components/related_items_tree.scss

@@ -30,7 +30,7 @@
       }
 
       &.item-closed {
-        background-color: $gray-10;
+        background-color: $white;
       }
     }
 

ee/changelogs/unreleased/218477-update-epic-issue-closed-icons.yml

+---
+title: Use closed icons for issues and epics when closed
+merge_request: 47176
+author:
+type: changed

ee/spec/frontend/related_items_tree/components/tree_item_body_spec.js

@@ -242,10 +242,10 @@ describe('RelatedItemsTree', () => {
       });
 
       describe.each`
-        createItem         | itemType   | isEpic   | stateIconName
-        ${createEpicItem}  | ${'epic'}  | ${true}  | ${'epic'}
-        ${createIssueItem} | ${'issue'} | ${false} | ${'issues'}
-      `(`when dependent on item type`, ({ createItem, isEpic, stateIconName, itemType }) => {
+        createItem         | itemType   | isEpic
+        ${createEpicItem}  | ${'epic'}  | ${true}
+        ${createIssueItem} | ${'issue'} | ${false}
+      `(`when dependent on item type`, ({ createItem, isEpic, itemType }) => {
         beforeEach(() => {
           mockItem = createItem();
           wrapper = createComponent();
@@ -256,9 +256,25 @@ describe('RelatedItemsTree', () => {
             expect(wrapper.vm.isEpic).toBe(isEpic);
           });
         });
+      });
+
+      describe.each`
+        createItem                          | testDesc               | stateIconName
+        ${createEpicItem(mockOpenEpic)}     | ${'epic is `open`'}    | ${'epic'}
+        ${createEpicItem(mockClosedEpic)}   | ${'epic is `closed`'}  | ${'epic-closed'}
+        ${createIssueItem(mockIssue1)}      | ${'issue is `open`'}   | ${'issues'}
+        ${createIssueItem(mockClosedIssue)} | ${'issue is `closed`'} | ${'issue-closed'}
+      `(`when dependent on item type and state`, ({ createItem, testDesc, stateIconName }) => {
+        beforeEach(() => {
+          mockItem = createItem;
+        });
 
         describe('stateIconName', () => {
-          it(`returns string ${stateIconName}`, async () => {
+          it(`returns string \`${stateIconName}\` when ${testDesc}`, async () => {
+            wrapper.setProps({
+              item: mockItem,
+            });
+
             await wrapper.vm.$nextTick();
 
             expect(wrapper.vm.stateIconName).toBe(stateIconName);