Display icon for hidden issues on group/project issue boards

Issues created by banned users are hidden from all users except admins.
This commit adds an icon to hidden issues on group/project issue
boards.

Changelog: added

app/assets/javascripts/boards/components/board_card_inner.vue

@@ -214,6 +214,14 @@ export default {
           class="confidential-icon gl-mr-2"
           :aria-label="__('Confidential')"
         />
+        <gl-icon
+          v-if="item.hidden"
+          v-gl-tooltip
+          name="spam"
+          :title="__('This issue is hidden because its author has been banned')"
+          class="gl-mr-2 hidden-icon"
+          data-testid="hidden-icon"
+        />
         <a
           :href="item.path || item.webUrl || ''"
           :title="item.title"

app/assets/javascripts/boards/graphql/issue.fragment.graphql

@@ -12,6 +12,7 @@ fragment IssueNode on Issue {
   humanTotalTimeSpent
   emailsDisabled
   confidential
+  hidden
   webUrl
   relativePosition
   assignees {

app/assets/stylesheets/page_bundles/boards.scss

@@ -248,7 +248,8 @@
     margin-right: 4px;
   }
 
-  .confidential-icon {
+  .confidential-icon,
+  .hidden-icon {
     color: var(--orange-500, $orange-500);
     cursor: help;
   }

ee/app/assets/javascripts/boards/graphql/issue.fragment.graphql

@@ -12,6 +12,7 @@ fragment IssueNode on Issue {
   humanTotalTimeSpent
   weight
   confidential
+  hidden
   webUrl
   blocked
   blockedByCount

spec/frontend/boards/board_card_inner_spec.js

@@ -2,6 +2,7 @@ import { GlLabel, GlLoadingIcon, GlTooltip } from '@gitlab/ui';
 import { range } from 'lodash';
 import Vuex from 'vuex';
 import setWindowLocation from 'helpers/set_window_location_helper';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import BoardBlockedIcon from '~/boards/components/board_blocked_icon.vue';
 import BoardCardInner from '~/boards/components/board_card_inner.vue';
@@ -44,6 +45,7 @@ describe('Board card component', () => {
   const findEpicBadgeProgress = () => wrapper.findByTestId('epic-progress');
   const findEpicCountablesTotalWeight = () => wrapper.findByTestId('epic-countables-total-weight');
   const findEpicProgressTooltip = () => wrapper.findByTestId('epic-progress-tooltip-content');
+  const findHiddenIssueIcon = () => wrapper.findByTestId('hidden-icon');
 
   const createStore = ({ isEpicBoard = false, isProjectBoard = false } = {}) => {
     store = new Vuex.Store({
@@ -72,6 +74,9 @@ describe('Board card component', () => {
         GlLabel: true,
         GlLoadingIcon: true,
       },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
       mocks: {
         $apollo: {
           queries: {
@@ -122,6 +127,10 @@ describe('Board card component', () => {
     expect(wrapper.find('.confidential-icon').exists()).toBe(false);
   });
 
+  it('does not render hidden issue icon', () => {
+    expect(findHiddenIssueIcon().exists()).toBe(false);
+  });
+
   it('renders issue ID with #', () => {
     expect(wrapper.find('.board-card-number').text()).toContain(`#${issue.iid}`);
   });
@@ -184,6 +193,30 @@ describe('Board card component', () => {
     });
   });
 
+  describe('hidden issue', () => {
+    beforeEach(() => {
+      wrapper.setProps({
+        item: {
+          ...wrapper.props('item'),
+          hidden: true,
+        },
+      });
+    });
+
+    it('renders hidden issue icon', () => {
+      expect(findHiddenIssueIcon().exists()).toBe(true);
+    });
+
+    it('displays a tooltip which explains the meaning of the icon', () => {
+      const tooltip = getBinding(findHiddenIssueIcon().element, 'gl-tooltip');
+
+      expect(tooltip).toBeDefined();
+      expect(findHiddenIssueIcon().attributes('title')).toBe(
+        'This issue is hidden because its author has been banned',
+      );
+    });
+  });
+
   describe('with assignee', () => {
     describe('with avatar', () => {
       beforeEach(() => {