Allow copying Epic reference from sidebar

Changelog: added
EE: true

app/assets/javascripts/sidebar/constants.js

@@ -3,6 +3,7 @@ import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import epicConfidentialQuery from '~/sidebar/queries/epic_confidential.query.graphql';
 import epicDueDateQuery from '~/sidebar/queries/epic_due_date.query.graphql';
 import epicParticipantsQuery from '~/sidebar/queries/epic_participants.query.graphql';
+import epicReferenceQuery from '~/sidebar/queries/epic_reference.query.graphql';
 import epicStartDateQuery from '~/sidebar/queries/epic_start_date.query.graphql';
 import epicSubscribedQuery from '~/sidebar/queries/epic_subscribed.query.graphql';
 import epicTodoQuery from '~/sidebar/queries/epic_todo.query.graphql';
@@ -95,6 +96,9 @@ export const referenceQueries = {
   [IssuableType.MergeRequest]: {
     query: mergeRequestReferenceQuery,
   },
+  [IssuableType.Epic]: {
+    query: epicReferenceQuery,
+  },
 };
 
 export const dateTypes = {

app/assets/javascripts/sidebar/queries/epic_reference.query.graphql

+query epicReference($fullPath: ID!, $iid: ID) {
+  workspace: group(fullPath: $fullPath) {
+    __typename
+    issuable: epic(iid: $iid) {
+      __typename
+      id
+      reference(full: true)
+    }
+  }
+}

app/assets/javascripts/vue_shared/components/sidebar/copyable_field.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import { s__, __, sprintf } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
@@ -10,8 +10,9 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 export default {
   name: 'CopyableField',
   components: {
-    GlLoadingIcon,
     ClipboardButton,
+    GlLoadingIcon,
+    GlSprintf,
   },
   props: {
     value: {
@@ -48,12 +49,6 @@ export default {
     loadingIconLabel() {
       return sprintf(this.$options.i18n.loadingIconLabel, { name: this.name });
     },
-    templateText() {
-      return sprintf(this.$options.i18n.templateText, {
-        name: this.name,
-        value: this.value,
-      });
-    },
   },
   i18n: {
     loadingIconLabel: __('Loading %{name}'),
@@ -78,7 +73,10 @@ export default {
         class="gl-overflow-hidden gl-text-overflow-ellipsis gl-white-space-nowrap"
         :title="value"
       >
-        {{ templateText }}
+        <gl-sprintf :message="$options.i18n.templateText">
+          <template #name>{{ name }}</template>
+          <template #value>{{ value }}</template>
+        </gl-sprintf>
       </span>
 
       <gl-loading-icon v-if="isLoading" size="sm" inline :label="loadingIconLabel" />

ee/app/assets/javascripts/epic/components/epic_sidebar.vue

@@ -7,6 +7,7 @@ import { IssuableType } from '~/issue_show/constants';
 import notesEventHub from '~/notes/event_hub';
 import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue';
 import SidebarParticipants from '~/sidebar/components/participants/participants.vue';
+import SidebarReferenceWidget from '~/sidebar/components/reference/sidebar_reference_widget.vue';
 import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue';
 import sidebarEventHub from '~/sidebar/event_hub';
 import SidebarDatePickerCollapsed from '~/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue';
@@ -30,6 +31,7 @@ export default {
     SidebarParticipants,
     SidebarConfidentialityWidget,
     SidebarSubscriptionsWidget,
+    SidebarReferenceWidget,
   },
   inject: ['iid'],
   data() {
@@ -250,6 +252,9 @@ export default {
         data-testid="subscribe"
         @expandSidebar="handleSidebarToggle"
       />
+      <div class="block with-sub-blocks">
+        <sidebar-reference-widget :issuable-type="issuableType" />
+      </div>
     </div>
   </aside>
 </template>

ee/spec/frontend/epic/components/epic_sidebar_spec.js

@@ -10,6 +10,7 @@ import epicUtils from 'ee/epic/utils/epic_utils';
 
 import { parsePikadayDate } from '~/lib/utils/datetime_utility';
 
+import SidebarReferenceWidget from '~/sidebar/components/reference/sidebar_reference_widget.vue';
 import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue';
 
 import { mockEpicMeta, mockEpicData, mockAncestors } from '../mock_data';
@@ -213,6 +214,10 @@ describe('EpicSidebarComponent', () => {
       expect(wrapper.find(SidebarSubscriptionsWidget).exists()).toBe(true);
     });
 
+    it('renders SidebarReferenceWidget', () => {
+      expect(wrapper.find(SidebarReferenceWidget).exists()).toBe(true);
+    });
+
     describe('when sub-epics feature is available', () => {
       it('renders ancestors list', async () => {
         store.dispatch('toggleSidebarFlag', false);

spec/frontend/vue_shared/components/sidebar/copyable_field_spec.js

-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue';
@@ -14,6 +14,9 @@ describe('SidebarCopyableField', () => {
   const createComponent = (propsData = defaultProps) => {
     wrapper = shallowMount(CopyableField, {
       propsData,
+      stubs: {
+        GlSprintf,
+      },
     });
   };