Merge branch...

Merge branch '332901-closed-and-open-issue-vulnerability-popover-reference-is-too-subtle' into 'master'

Make issue vulnerability popover less subtle

See merge request gitlab-org/gitlab!71978

ee/app/assets/javascripts/vulnerabilities/components/issue_link.vue

 <script>
 import jiraLogo from '@gitlab/svgs/dist/illustrations/logos/jira.svg';
-import { GlIcon, GlLink, GlTooltipDirective, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlIcon, GlLink, GlTooltipDirective, GlSafeHtmlDirective, GlSprintf } from '@gitlab/ui';
 
 export default {
   components: {
     GlIcon,
     GlLink,
+    GlSprintf,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -23,11 +24,13 @@ export default {
   },
   computed: {
     iconName() {
-      return this.issue.state === this.$options.STATE_OPENED ? 'issue-open-m' : 'issue-close';
+      return this.issueIsClosed ? 'issue-closed' : 'issues';
+    },
+    issueIsClosed() {
+      return this.issue.state === 'closed';
     },
   },
   jiraLogo,
-  STATE_OPENED: 'opened',
 };
 </script>
 <template>
@@ -45,11 +48,14 @@ export default {
     ></span>
     <gl-icon
       v-else
-      class="gl-mr-1"
-      :class="{ 'gl-text-green-600': issue.state === $options.STATE_OPENED }"
+      class="gl-mr-2"
+      :class="{ 'gl-text-green-600': !issueIsClosed }"
       :name="iconName"
     />
-    #{{ issue.iid }}
+    <gl-sprintf v-if="issueIsClosed" :message="__('#%{issueIid} (closed)')">
+      <template #issueIid>{{ issue.iid }}</template>
+    </gl-sprintf>
+    <span v-else>#{{ issue.iid }}</span>
     <gl-icon v-if="isJira" :size="12" name="external-link" class="gl-ml-1" />
   </gl-link>
 </template>

ee/spec/frontend/vulnerabilities/issue_link_spec.js

-import { GlIcon, GlLink } from '@gitlab/ui';
+import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import IssueLink from 'ee/vulnerabilities/components/issue_link.vue';
 import { getBinding, createMockDirective } from 'helpers/vue_mock_directive';
@@ -21,6 +21,8 @@ describe('IssueLink component', () => {
         directives: {
           GlTooltip: createMockDirective(),
         },
+        // this allows us to retrieve the rendered text
+        stubs: { GlSprintf },
       }),
     );
   };
@@ -53,10 +55,10 @@ describe('IssueLink component', () => {
 
   describe('internal issues', () => {
     describe.each`
-      state       | icon
-      ${'opened'} | ${'issue-open-m'}
-      ${'closed'} | ${'issue-close'}
-    `('with state "$state"', ({ state, icon }) => {
+      state       | icon              | shouldContainClosedText
+      ${'opened'} | ${'issues'}       | ${false}
+      ${'closed'} | ${'issue-closed'} | ${true}
+    `('with state "$state"', ({ state, icon, shouldContainClosedText }) => {
       beforeEach(() => {
         wrapper = createWrapper({ propsData: { issue: createIssue({ state }) } });
       });
@@ -64,6 +66,12 @@ describe('IssueLink component', () => {
       it('should contain the correct issue icon', () => {
         expect(findIcon().attributes('name')).toBe(icon);
       });
+
+      it(`${
+        shouldContainClosedText ? 'should' : 'should not'
+      } contain a text that marks it as closed`, () => {
+        expect(findIssueLink().text().includes('closed')).toBe(shouldContainClosedText);
+      });
     });
   });
 

locale/gitlab.pot

@@ -86,6 +86,9 @@ msgstr ""
 msgid "\"el\" parameter is required for createInstance()"
 msgstr ""
 
+msgid "#%{issueIid} (closed)"
+msgstr ""
+
 msgid "#general, #development"
 msgstr ""