diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/reference')
-rw-r--r-- | app/assets/javascripts/sidebar/components/reference/sidebar_reference_widget.vue | 41 |
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> |