Remove slot from copyable_field.vue

Instead, handle UI text creation within the component.

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

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
-import { __, sprintf } from '~/locale';
+import { s__, __, sprintf } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 /**
@@ -35,12 +35,23 @@ export default {
         tooltipBoundary: 'viewport',
         tooltipPlacement: 'left',
         text: this.value,
-        title: sprintf(__('Copy %{name}'), { name: this.name }),
+        title: sprintf(this.$options.i18n.clipboardTooltip, { name: this.name }),
       };
     },
     loadingIconLabel() {
-      return sprintf(__('Loading %{name}'), { name: this.name });
+      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}'),
+    clipboardTooltip: __('Copy %{name}'),
+    templateText: s__('Sidebar|%{name}: %{value}'),
   },
 };
 </script>
@@ -56,14 +67,12 @@ export default {
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-space-between hide-collapsed"
     >
-      <gl-loading-icon v-if="isLoading" inline :label="loadingIconLabel" />
-      <template v-else>
-        <span class="gl-overflow-hidden gl-text-overflow-ellipsis gl-white-space-nowrap">
-          <slot></slot>
-        </span>
+      <span class="gl-overflow-hidden gl-text-overflow-ellipsis gl-white-space-nowrap">
+        {{ templateText }}
+      </span>
 
-        <clipboard-button size="small" v-bind="clipboardProps" />
-      </template>
+      <gl-loading-icon v-if="isLoading" inline :label="loadingIconLabel" />
+      <clipboard-button v-else size="small" v-bind="clipboardProps" />
     </div>
   </div>
 </template>

ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue

 <script>
-import { GlSprintf } from '@gitlab/ui';
 import { labelsFilterParam } from 'ee/integrations/jira/issues_show/constants';
 import { __ } from '~/locale';
 import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue';
@@ -11,7 +10,6 @@ import IssueField from './issue_field.vue';
 export default {
   name: 'JiraIssuesSidebar',
   components: {
-    GlSprintf,
     Assignee,
     IssueDueDate,
     IssueField,
@@ -46,7 +44,6 @@ export default {
   i18n: {
     statusTitle: __('Status'),
     referenceName: __('Reference'),
-    referenceText: __('Reference: %{reference}'),
   },
 };
 </script>
@@ -70,14 +67,6 @@ export default {
       class="block"
       :name="$options.i18n.referenceName"
       :value="reference"
-    >
-      <span class="cross-project-reference">
-        <gl-sprintf :message="$options.i18n.referenceText">
-          <template #reference>
-            <cite>{{ reference }}</cite>
-          </template>
-        </gl-sprintf>
-      </span>
-    </copyable-field>
+    />
   </div>
 </template>

locale/gitlab.pot

@@ -8497,6 +8497,9 @@ msgstr ""
 msgid "Copy %{http_label} clone URL"
 msgstr ""
 
+msgid "Copy %{name}"
+msgstr ""
+
 msgid "Copy %{protocol} clone URL"
 msgstr ""
 
@@ -18428,6 +18431,9 @@ msgstr ""
 msgid "Loading"
 msgstr ""
 
+msgid "Loading %{name}"
+msgstr ""
+
 msgid "Loading contribution stats for group members"
 msgstr ""
 
@@ -25189,9 +25195,6 @@ msgstr ""
 msgid "Reference"
 msgstr ""
 
-msgid "Reference:"
-msgstr ""
-
 msgid "References"
 msgstr ""
 
@@ -28091,6 +28094,9 @@ msgstr ""
 msgid "Side-by-side"
 msgstr ""
 
+msgid "Sidebar|%{name}: %{value}"
+msgstr ""
+
 msgid "Sidebar|Assign health status"
 msgstr ""
 

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

@@ -14,9 +14,6 @@ describe('SidebarCopyableField', () => {
   const createComponent = (propsData = defaultProps) => {
     wrapper = shallowMount(CopyableField, {
       propsData,
-      slots: {
-        default: 'Reference: Gl-1',
-      },
     });
   };
 
@@ -51,12 +48,18 @@ describe('SidebarCopyableField', () => {
     });
 
     describe('when `isLoading` prop is `true`', () => {
-      it('renders loading icon', () => {
+      beforeEach(() => {
         createComponent({ ...defaultProps, isLoading: true });
+      });
 
+      it('renders loading icon', () => {
         expect(findLoadingIcon().exists()).toBe(true);
         expect(findLoadingIcon().props('label')).toBe('Loading Reference');
       });
+
+      it('does not render clipboard button', () => {
+        expect(findClipboardButton().exists()).toBe(false);
+      });
     });
   });
 });