diff options
Diffstat (limited to 'app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue')
-rw-r--r-- | app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue b/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue new file mode 100644 index 00000000000..8b06797c0ae --- /dev/null +++ b/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue @@ -0,0 +1,103 @@ +<script> +import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui'; +import { mapGetters } from 'vuex'; +import Tracking from '~/tracking'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import { + QUICK_START, + LOGIN_COMMAND_LABEL, + COPY_LOGIN_TITLE, + BUILD_COMMAND_LABEL, + COPY_BUILD_TITLE, + PUSH_COMMAND_LABEL, + COPY_PUSH_TITLE, +} from '../../constants/index'; + +export default { + components: { + GlDropdown, + GlFormGroup, + GlFormInputGroup, + ClipboardButton, + }, + mixins: [Tracking.mixin({ label: 'quickstart_dropdown' })], + i18n: { + dropdownTitle: QUICK_START, + loginCommandLabel: LOGIN_COMMAND_LABEL, + copyLoginTitle: COPY_LOGIN_TITLE, + buildCommandLabel: BUILD_COMMAND_LABEL, + copyBuildTitle: COPY_BUILD_TITLE, + pushCommandLabel: PUSH_COMMAND_LABEL, + copyPushTitle: COPY_PUSH_TITLE, + }, + computed: { + ...mapGetters(['dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand']), + }, +}; +</script> +<template> + <gl-dropdown + :text="$options.i18n.dropdownTitle" + variant="primary" + size="sm" + right + @shown="track('click_dropdown')" + > + <!-- This li is used as a container since gl-dropdown produces a root ul, this mimics the functionality exposed by b-dropdown-form --> + <li role="presentation" class="px-2 py-1 dropdown-menu-large"> + <form> + <gl-form-group + label-size="sm" + label-for="docker-login-btn" + :label="$options.i18n.loginCommandLabel" + > + <gl-form-input-group id="docker-login-btn" :value="dockerLoginCommand" readonly> + <template #append> + <clipboard-button + class="border" + :text="dockerLoginCommand" + :title="$options.i18n.copyLoginTitle" + @click.native="track('click_copy_login')" + /> + </template> + </gl-form-input-group> + </gl-form-group> + + <gl-form-group + label-size="sm" + label-for="docker-build-btn" + :label="$options.i18n.buildCommandLabel" + > + <gl-form-input-group id="docker-build-btn" :value="dockerBuildCommand" readonly> + <template #append> + <clipboard-button + class="border" + :text="dockerBuildCommand" + :title="$options.i18n.copyBuildTitle" + @click.native="track('click_copy_build')" + /> + </template> + </gl-form-input-group> + </gl-form-group> + + <gl-form-group + class="mb-0" + label-size="sm" + label-for="docker-push-btn" + :label="$options.i18n.pushCommandLabel" + > + <gl-form-input-group id="docker-push-btn" :value="dockerPushCommand" readonly> + <template #append> + <clipboard-button + class="border" + :text="dockerPushCommand" + :title="$options.i18n.copyPushTitle" + @click.native="track('click_copy_push')" + /> + </template> + </gl-form-input-group> + </gl-form-group> + </form> + </li> + </gl-dropdown> +</template> |