1 files changed, 8 insertions, 33 deletions
diff --git a/app/assets/javascripts/sidebar/components/reference/sidebar_reference_widget.vue b/app/assets/javascripts/sidebar/components/reference/sidebar_reference_widget.vue
index 567c921b74e..d07c6e0cbd2 100644
--- a/app/assets/javascripts/sidebar/components/reference/sidebar_reference_widget.vue
+++ b/app/assets/javascripts/sidebar/components/reference/sidebar_reference_widget.vue
@@ -1,17 +1,11 @@
 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { referenceQueries } from '~/sidebar/constants';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue';
 
 export default {
-  i18n: {
-    copyReference: __('Copy reference'),
-    text: __('Reference'),
-  },
   components: {
-    ClipboardButton,
-    GlLoadingIcon,
+    CopyableField,
   },
   inject: ['fullPath', 'iid'],
   props: {
@@ -56,29 +50,10 @@ export default {
 </script>
 
 <template>
-  <div class="sub-block">
-    <clipboard-button
-      v-if="!isLoading"
-      :title="$options.i18n.copyReference"
-      :text="reference"
-      category="tertiary"
-      css-class="sidebar-collapsed-icon dont-change-state"
-      tooltip-placement="left"
-    />
-    <div class="gl-display-flex gl-align-items-center gl-justify-between gl-mb-2 hide-collapsed">
-      <span class="gl-overflow-hidden gl-text-overflow-ellipsis gl-white-space-nowrap">
-        {{ $options.i18n.text }}: {{ reference }}
-        <gl-loading-icon v-if="isLoading" inline :label="$options.i18n.text" />
-      </span>
-      <clipboard-button
-        v-if="!isLoading"
-        :title="$options.i18n.copyReference"
-        :text="reference"
-        size="small"
-        category="tertiary"
-        css-class="gl-mr-1"
-        tooltip-placement="left"
-      />
-    </div>
-  </div>
+  <copyable-field
+    class="sub-block"
+    :is-loading="isLoading"
+    :name="__('Reference')"
+    :value="reference"
+  />
 </template>