diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/clone_dropdown.vue | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/clone_dropdown.vue b/app/assets/javascripts/vue_shared/components/clone_dropdown.vue new file mode 100644 index 00000000000..3b9b9f37f52 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/clone_dropdown.vue @@ -0,0 +1,89 @@ +<script> +import { + GlNewDropdown, + GlNewDropdownHeader, + GlFormInputGroup, + GlNewButton, + GlIcon, + GlTooltipDirective, +} from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; +import { getHTTPProtocol } from '~/lib/utils/url_utility'; + +export default { + components: { + GlNewDropdown, + GlNewDropdownHeader, + GlFormInputGroup, + GlNewButton, + GlIcon, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + sshLink: { + type: String, + required: false, + default: '', + }, + httpLink: { + type: String, + required: false, + default: '', + }, + }, + computed: { + httpLabel() { + const protocol = this.httpLink ? getHTTPProtocol(this.httpLink)?.toUpperCase() : ''; + return sprintf(__('Clone with %{protocol}'), { protocol }); + }, + }, + labels: { + defaultLabel: __('Clone'), + ssh: __('Clone with SSH'), + }, + copyURLTooltip: __('Copy URL'), +}; +</script> +<template> + <gl-new-dropdown :text="$options.labels.defaultLabel" category="primary" variant="info"> + <div class="pb-2 mx-1"> + <template v-if="sshLink"> + <gl-new-dropdown-header>{{ $options.labels.ssh }}</gl-new-dropdown-header> + + <div class="mx-3"> + <gl-form-input-group :value="sshLink" readonly select-on-click> + <template #append> + <gl-new-button + v-gl-tooltip.hover + :title="$options.copyURLTooltip" + :data-clipboard-text="sshLink" + > + <gl-icon name="copy-to-clipboard" :title="$options.copyURLTooltip" /> + </gl-new-button> + </template> + </gl-form-input-group> + </div> + </template> + + <template v-if="httpLink"> + <gl-new-dropdown-header>{{ httpLabel }}</gl-new-dropdown-header> + + <div class="mx-3"> + <gl-form-input-group :value="httpLink" readonly select-on-click> + <template #append> + <gl-new-button + v-gl-tooltip.hover + :title="$options.copyURLTooltip" + :data-clipboard-text="httpLink" + > + <gl-icon name="copy-to-clipboard" :title="$options.copyURLTooltip" /> + </gl-new-button> + </template> + </gl-form-input-group> + </div> + </template> + </div> + </gl-new-dropdown> +</template> |