Epic board - Display epic reference on card

Rename issue_card_inner component to board_card_inner

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

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import IssueCardInner from './issue_card_inner.vue';
+import BoardCardInner from './board_card_inner.vue';
 
 export default {
   name: 'BoardCard',
   components: {
-    IssueCardInner,
+    BoardCardInner,
   },
   props: {
     list: {
@@ -76,6 +76,6 @@ export default {
     class="board-card gl-p-5 gl-rounded-base"
     @mouseup="toggleIssue($event)"
   >
-    <issue-card-inner :list="list" :issue="issue" :update-filters="true" />
+    <board-card-inner :list="list" :item="issue" :update-filters="true" />
   </li>
 </template>

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

@@ -2,7 +2,7 @@
 import { GlLabel, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { sortBy } from 'lodash';
 import { mapActions, mapState } from 'vuex';
-import issueCardInner from 'ee_else_ce/boards/mixins/issue_card_inner';
+import boardCardInner from 'ee_else_ce/boards/mixins/board_card_inner';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import { updateHistory } from '~/lib/utils/url_utility';
 import { sprintf, __, n__ } from '~/locale';
@@ -26,10 +26,10 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [issueCardInner],
+  mixins: [boardCardInner],
   inject: ['groupId', 'rootPath', 'scopedLabelsAvailable'],
   props: {
-    issue: {
+    item: {
       type: Object,
       required: true,
     },
@@ -52,19 +52,19 @@ export default {
     };
   },
   computed: {
-    ...mapState(['isShowingLabels']),
+    ...mapState(['isShowingLabels', 'isEpicBoard']),
     cappedAssignees() {
       // e.g. maxRender is 4,
       // Render up to all 4 assignees if there are only 4 assigness
       // Otherwise render up to the limitBeforeCounter
-      if (this.issue.assignees.length <= this.maxRender) {
-        return this.issue.assignees.slice(0, this.maxRender);
+      if (this.item.assignees.length <= this.maxRender) {
+        return this.item.assignees.slice(0, this.maxRender);
       }
 
-      return this.issue.assignees.slice(0, this.limitBeforeCounter);
+      return this.item.assignees.slice(0, this.limitBeforeCounter);
     },
     numberOverLimit() {
-      return this.issue.assignees.length - this.limitBeforeCounter;
+      return this.item.assignees.length - this.limitBeforeCounter;
     },
     assigneeCounterTooltip() {
       const { numberOverLimit, maxCounter } = this;
@@ -79,31 +79,35 @@ export default {
       return `+${this.numberOverLimit}`;
     },
     shouldRenderCounter() {
-      if (this.issue.assignees.length <= this.maxRender) {
+      if (this.item.assignees.length <= this.maxRender) {
         return false;
       }
 
-      return this.issue.assignees.length > this.numberOverLimit;
+      return this.item.assignees.length > this.numberOverLimit;
     },
-    issueId() {
-      if (this.issue.iid) {
-        return `#${this.issue.iid}`;
+    itemPrefix() {
+      return this.isEpicBoard ? '&' : '#';
+    },
+
+    itemId() {
+      if (this.item.iid) {
+        return `${this.itemPrefix}${this.item.iid}`;
       }
       return false;
     },
     showLabelFooter() {
-      return this.isShowingLabels && this.issue.labels.find(this.showLabel);
+      return this.isShowingLabels && this.item.labels.find(this.showLabel);
     },
-    issueReferencePath() {
-      const { referencePath, groupId } = this.issue;
-      return !groupId ? referencePath.split('#')[0] : null;
+    itemReferencePath() {
+      const { referencePath } = this.item;
+      return referencePath.split(this.itemPrefix)[0];
     },
     orderedLabels() {
-      return sortBy(this.issue.labels.filter(this.isNonListLabel), 'title');
+      return sortBy(this.item.labels.filter(this.isNonListLabel), 'title');
     },
     blockedLabel() {
-      if (this.issue.blockedByCount) {
-        return n__(`Blocked by %d issue`, `Blocked by %d issues`, this.issue.blockedByCount);
+      if (this.item.blockedByCount) {
+        return n__(`Blocked by %d issue`, `Blocked by %d issues`, this.item.blockedByCount);
       }
       return __('Blocked issue');
     },
@@ -160,7 +164,7 @@ export default {
     <div class="gl-display-flex" dir="auto">
       <h4 class="board-card-title gl-mb-0 gl-mt-0">
         <gl-icon
-          v-if="issue.blocked"
+          v-if="item.blocked"
           v-gl-tooltip
           name="issue-block"
           :title="blockedLabel"
@@ -169,7 +173,7 @@ export default {
           data-testid="issue-blocked-icon"
         />
         <gl-icon
-          v-if="issue.confidential"
+          v-if="item.confidential"
           v-gl-tooltip
           name="eye-slash"
           :title="__('Confidential')"
@@ -177,11 +181,11 @@ export default {
           :aria-label="__('Confidential')"
         />
         <a
-          :href="issue.path || issue.webUrl || ''"
-          :title="issue.title"
+          :href="item.path || item.webUrl || ''"
+          :title="item.title"
           class="js-no-trigger"
           @mousemove.stop
-          >{{ issue.title }}</a
+          >{{ item.title }}</a
         >
       </h4>
     </div>
@@ -205,29 +209,30 @@ export default {
         class="gl-display-flex align-items-start flex-wrap-reverse board-card-number-container gl-overflow-hidden js-board-card-number-container"
       >
         <span
-          v-if="issue.referencePath"
+          v-if="item.referencePath"
           class="board-card-number gl-overflow-hidden gl-display-flex gl-mr-3 gl-mt-3"
+          :class="{ 'gl-font-base': isEpicBoard }"
         >
           <tooltip-on-truncate
-            v-if="issueReferencePath"
-            :title="issueReferencePath"
+            v-if="itemReferencePath"
+            :title="itemReferencePath"
             placement="bottom"
-            class="board-issue-path gl-text-truncate gl-font-weight-bold"
-            >{{ issueReferencePath }}</tooltip-on-truncate
+            class="board-item-path gl-text-truncate gl-font-weight-bold"
+            >{{ itemReferencePath }}</tooltip-on-truncate
           >
-          #{{ issue.iid }}
+          {{ itemId }}
         </span>
         <span class="board-info-items gl-mt-3 gl-display-inline-block">
           <issue-due-date
-            v-if="issue.dueDate"
-            :date="issue.dueDate"
-            :closed="issue.closed || Boolean(issue.closedAt)"
+            v-if="item.dueDate"
+            :date="item.dueDate"
+            :closed="item.closed || Boolean(item.closedAt)"
           />
-          <issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" />
+          <issue-time-estimate v-if="item.timeEstimate" :estimate="item.timeEstimate" />
           <issue-card-weight
-            v-if="validIssueWeight"
-            :weight="issue.weight"
-            @click="filterByWeight(issue.weight)"
+            v-if="validIssueWeight(item)"
+            :weight="item.weight"
+            @click="filterByWeight(item.weight)"
           />
         </span>
       </div>

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

@@ -3,13 +3,12 @@ import { mapActions, mapGetters } from 'vuex';
 import { ISSUABLE } from '~/boards/constants';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import boardsStore from '../stores/boards_store';
-import IssueCardInner from './issue_card_inner.vue';
 import IssueCardInnerDeprecated from './issue_card_inner_deprecated.vue';
 
 export default {
   name: 'BoardCardLayout',
   components: {
-    IssueCardInner: gon.features?.graphqlBoardLists ? IssueCardInner : IssueCardInnerDeprecated,
+    IssueCardInner: IssueCardInnerDeprecated,
   },
   mixins: [glFeatureFlagMixin()],
   props: {

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

@@ -2,7 +2,7 @@
 import { GlLabel, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { sortBy } from 'lodash';
 import { mapState } from 'vuex';
-import issueCardInner from 'ee_else_ce/boards/mixins/issue_card_inner';
+import boardCardInner from 'ee_else_ce/boards/mixins/board_card_inner';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import { sprintf, __, n__ } from '~/locale';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
@@ -24,7 +24,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [issueCardInner],
+  mixins: [boardCardInner],
   inject: ['groupId', 'rootPath'],
   props: {
     issue: {
@@ -207,7 +207,7 @@ export default {
           />
           <issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" />
           <issue-card-weight
-            v-if="validIssueWeight"
+            v-if="validIssueWeight(issue)"
             :weight="issue.weight"
             @click="filterByWeight(issue.weight)"
           />

app/assets/javascripts/boards/components/modal/list.vue

@@ -2,11 +2,11 @@
 import { GlIcon } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import ModalStore from '../../stores/modal_store';
-import IssueCardInner from '../issue_card_inner.vue';
+import BoardCardInner from '../board_card_inner.vue';
 
 export default {
   components: {
-    IssueCardInner,
+    BoardCardInner,
     GlIcon,
   },
   props: {
@@ -126,7 +126,7 @@ export default {
           class="board-card position-relative p-3 rounded"
           @click="toggleIssue($event, issue)"
         >
-          <issue-card-inner :issue="issue" />
+          <board-card-inner :item="issue" />
           <gl-icon
             v-if="issue.selected"
             :aria-label="'Issue #' + issue.id + ' selected'"

app/assets/javascripts/boards/mixins/issue_card_inner.js → app/assets/javascripts/boards/mixins/board_card_inner.js

 export default {
-  computed: {
+  methods: {
     validIssueWeight() {
       return false;
     },
-  },
-  methods: {
     filterByWeight() {},
   },
 };

app/assets/stylesheets/page_bundles/boards.scss

@@ -515,7 +515,7 @@
   }
 }
 
-.board-issue-path.js-show-tooltip {
+.board-item-path.js-show-tooltip {
   cursor: help;
 }
 

ee/app/assets/javascripts/boards/graphql/lists_epics.query.graphql

@@ -18,6 +18,8 @@ query ListEpics(
               node {
                 ...EpicNode
                 relativePosition
+                referencePath: reference(full: true)
+                confidential
                 labels {
                   nodes {
                     ...Label

ee/app/assets/javascripts/boards/mixins/issue_card_inner.js → ee/app/assets/javascripts/boards/mixins/board_card_inner.js

 import { isNumber } from 'lodash';
 
 export default {
-  computed: {
-    validIssueWeight() {
-      if (this.issue && isNumber(this.issue.weight)) {
-        return this.issue.weight >= 0;
+  methods: {
+    validIssueWeight(issue) {
+      if (issue && isNumber(issue.weight)) {
+        return issue.weight >= 0;
       }
 
       return false;
     },
-  },
-  methods: {
     filterByWeight(weight) {
       if (!this.updateFilters) return;
 

ee/spec/frontend/boards/issue_card_inner_spec.js → ee/spec/frontend/boards/board_card_inner_spec.js

 import { GlLabel } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import IssueCardWeight from 'ee/boards/components/issue_card_weight.vue';
-import IssueCardInner from '~/boards/components/issue_card_inner.vue';
+import BoardCardInner from '~/boards/components/board_card_inner.vue';
 import defaultStore from '~/boards/stores';
 
-describe('Issue card component', () => {
+describe('Board card component', () => {
   let wrapper;
   let issue;
   let list;
 
   const createComponent = (props = {}, store = defaultStore) => {
-    wrapper = shallowMount(IssueCardInner, {
+    wrapper = shallowMount(BoardCardInner, {
       store,
       propsData: {
         list,
-        issue,
+        item: issue,
         ...props,
       },
       provide: {

spec/frontend/boards/issue_card_inner_spec.js → spec/frontend/boards/board_card_inner_spec.js

 import { GlLabel } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { range } from 'lodash';
-import IssueCardInner from '~/boards/components/issue_card_inner.vue';
+import BoardCardInner from '~/boards/components/board_card_inner.vue';
 import eventHub from '~/boards/eventhub';
 import defaultStore from '~/boards/stores';
 import { updateHistory } from '~/lib/utils/url_utility';
@@ -10,7 +10,7 @@ import { mockLabelList } from './mock_data';
 jest.mock('~/lib/utils/url_utility');
 jest.mock('~/boards/eventhub');
 
-describe('Issue card component', () => {
+describe('Board card component', () => {
   const user = {
     id: 1,
     name: 'testing 123',
@@ -31,11 +31,11 @@ describe('Issue card component', () => {
   let list;
 
   const createWrapper = (props = {}, store = defaultStore) => {
-    wrapper = mount(IssueCardInner, {
+    wrapper = mount(BoardCardInner, {
       store,
       propsData: {
         list,
-        issue,
+        item: issue,
         ...props,
       },
       stubs: {
@@ -63,7 +63,7 @@ describe('Issue card component', () => {
       weight: 1,
     };
 
-    createWrapper({ issue, list });
+    createWrapper({ item: issue, list });
   });
 
   afterEach(() => {
@@ -103,8 +103,8 @@ describe('Issue card component', () => {
   describe('confidential issue', () => {
     beforeEach(() => {
       wrapper.setProps({
-        issue: {
-          ...wrapper.props('issue'),
+        item: {
+          ...wrapper.props('item'),
           confidential: true,
         },
       });
@@ -119,8 +119,8 @@ describe('Issue card component', () => {
     describe('with avatar', () => {
       beforeEach(() => {
         wrapper.setProps({
-          issue: {
-            ...wrapper.props('issue'),
+          item: {
+            ...wrapper.props('item'),
             assignees: [user],
             updateData(newData) {
               Object.assign(this, newData);
@@ -146,8 +146,8 @@ describe('Issue card component', () => {
       });
 
       it('renders the avatar using avatarUrl property', async () => {
-        wrapper.props('issue').updateData({
-          ...wrapper.props('issue'),
+        wrapper.props('item').updateData({
+          ...wrapper.props('item'),
           assignees: [
             {
               id: '1',
@@ -172,8 +172,8 @@ describe('Issue card component', () => {
         global.gon.default_avatar_url = 'default_avatar';
 
         wrapper.setProps({
-          issue: {
-            ...wrapper.props('issue'),
+          item: {
+            ...wrapper.props('item'),
             assignees: [
               {
                 id: 1,
@@ -201,8 +201,8 @@ describe('Issue card component', () => {
   describe('multiple assignees', () => {
     beforeEach(() => {
       wrapper.setProps({
-        issue: {
-          ...wrapper.props('issue'),
+        item: {
+          ...wrapper.props('item'),
           assignees: [
             {
               id: 2,
@@ -233,7 +233,7 @@ describe('Issue card component', () => {
 
     describe('more than three assignees', () => {
       beforeEach(() => {
-        const { assignees } = wrapper.props('issue');
+        const { assignees } = wrapper.props('item');
         assignees.push({
           id: 5,
           name: 'user5',
@@ -242,8 +242,8 @@ describe('Issue card component', () => {
         });
 
         wrapper.setProps({
-          issue: {
-            ...wrapper.props('issue'),
+          item: {
+            ...wrapper.props('item'),
             assignees,
           },
         });
@@ -259,7 +259,7 @@ describe('Issue card component', () => {
 
       it('renders 99+ avatar counter', async () => {
         const assignees = [
-          ...wrapper.props('issue').assignees,
+          ...wrapper.props('item').assignees,
           ...range(5, 103).map((i) => ({
             id: i,
             name: 'name',
@@ -268,8 +268,8 @@ describe('Issue card component', () => {
           })),
         ];
         wrapper.setProps({
-          issue: {
-            ...wrapper.props('issue'),
+          item: {
+            ...wrapper.props('item'),
             assignees,
           },
         });
@@ -283,7 +283,7 @@ describe('Issue card component', () => {
 
   describe('labels', () => {
     beforeEach(() => {
-      wrapper.setProps({ issue: { ...issue, labels: [list.label, label1] } });
+      wrapper.setProps({ item: { ...issue, labels: [list.label, label1] } });
     });
 
     it('does not render list label but renders all other labels', () => {
@@ -295,7 +295,7 @@ describe('Issue card component', () => {
     });
 
     it('does not render label if label does not have an ID', async () => {
-      wrapper.setProps({ issue: { ...issue, labels: [label1, { title: 'closed' }] } });
+      wrapper.setProps({ item: { ...issue, labels: [label1, { title: 'closed' }] } });
 
       await wrapper.vm.$nextTick();
 
@@ -307,8 +307,8 @@ describe('Issue card component', () => {
   describe('blocked', () => {
     beforeEach(() => {
       wrapper.setProps({
-        issue: {
-          ...wrapper.props('issue'),
+        item: {
+          ...wrapper.props('item'),
           blocked: true,
         },
       });

spec/frontend/boards/components/board_card_deprecated_spec.js

@@ -7,7 +7,7 @@ import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import BoardCardDeprecated from '~/boards/components/board_card_deprecated.vue';
-import issueCardInner from '~/boards/components/issue_card_inner.vue';
+import issueCardInner from '~/boards/components/issue_card_inner_deprecated.vue';
 import eventHub from '~/boards/eventhub';
 import store from '~/boards/stores';
 import boardsStore from '~/boards/stores/boards_store';

spec/frontend/boards/components/board_card_layout_deprecated_spec.js

@@ -11,7 +11,7 @@ import '~/boards/models/label';
 import '~/boards/models/assignee';
 import '~/boards/models/list';
 import BoardCardLayout from '~/boards/components/board_card_layout_deprecated.vue';
-import issueCardInner from '~/boards/components/issue_card_inner.vue';
+import issueCardInner from '~/boards/components/issue_card_inner_deprecated.vue';
 import { ISSUABLE } from '~/boards/constants';
 import boardsVuexStore from '~/boards/stores';
 import boardsStore from '~/boards/stores/boards_store';

spec/frontend/boards/components/board_card_spec.js

@@ -2,7 +2,7 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 
 import BoardCard from '~/boards/components/board_card.vue';
-import IssueCardInner from '~/boards/components/issue_card_inner.vue';
+import BoardCardInner from '~/boards/components/board_card_inner.vue';
 import { inactiveId } from '~/boards/constants';
 import { mockLabelList, mockIssue } from '../mock_data';
 
@@ -38,7 +38,7 @@ describe('Board card layout', () => {
     wrapper = shallowMount(BoardCard, {
       localVue,
       stubs: {
-        IssueCardInner,
+        BoardCardInner,
       },
       store,
       propsData: {