diff options
Diffstat (limited to 'app/assets/javascripts/packages/details')
9 files changed, 164 insertions, 47 deletions
diff --git a/app/assets/javascripts/packages/details/components/composer_installation.vue b/app/assets/javascripts/packages/details/components/composer_installation.vue index 9d87ae8f836..bf1e5083e12 100644 --- a/app/assets/javascripts/packages/details/components/composer_installation.vue +++ b/app/assets/javascripts/packages/details/components/composer_installation.vue @@ -2,12 +2,14 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { mapGetters, mapState } from 'vuex'; import { s__ } from '~/locale'; +import InstallationTitle from '~/packages/details/components/installation_title.vue'; import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; import { TrackingActions, TrackingLabels } from '../constants'; export default { name: 'ComposerInstallation', components: { + InstallationTitle, CodeInstruction, GlLink, GlSprintf, @@ -27,12 +29,13 @@ export default { }, trackingActions: { ...TrackingActions }, TrackingLabels, + installOptions: [{ value: 'composer', label: s__('PackageRegistry|Show Composer commands') }], }; </script> <template> <div v-if="groupExists" data-testid="root-node"> - <h3 class="gl-font-lg">{{ __('Installation') }}</h3> + <installation-title package-type="composer" :options="$options.installOptions" /> <code-instruction :label="$options.i18n.registryInclude" diff --git a/app/assets/javascripts/packages/details/components/conan_installation.vue b/app/assets/javascripts/packages/details/components/conan_installation.vue index a5df87c9c5b..1d855f6cf3e 100644 --- a/app/assets/javascripts/packages/details/components/conan_installation.vue +++ b/app/assets/javascripts/packages/details/components/conan_installation.vue @@ -2,12 +2,14 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { mapGetters, mapState } from 'vuex'; import { s__ } from '~/locale'; +import InstallationTitle from '~/packages/details/components/installation_title.vue'; import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; import { TrackingActions, TrackingLabels } from '../constants'; export default { name: 'ConanInstallation', components: { + InstallationTitle, CodeInstruction, GlLink, GlSprintf, @@ -23,12 +25,13 @@ export default { }, trackingActions: { ...TrackingActions }, TrackingLabels, + installOptions: [{ value: 'conan', label: s__('PackageRegistry|Show Conan commands') }], }; </script> <template> <div> - <h3 class="gl-font-lg">{{ __('Installation') }}</h3> + <installation-title package-type="conan" :options="$options.installOptions" /> <code-instruction :label="s__('PackageRegistry|Conan Command')" diff --git a/app/assets/javascripts/packages/details/components/installation_title.vue b/app/assets/javascripts/packages/details/components/installation_title.vue new file mode 100644 index 00000000000..43133bf7825 --- /dev/null +++ b/app/assets/javascripts/packages/details/components/installation_title.vue @@ -0,0 +1,38 @@ +<script> +import PersistedDropdownSelection from '~/vue_shared/components/registry/persisted_dropdown_selection.vue'; + +export default { + name: 'InstallationTitle', + components: { + PersistedDropdownSelection, + }, + props: { + packageType: { + type: String, + required: true, + }, + options: { + type: Array, + required: true, + }, + }, + computed: { + storageKey() { + return `package_${this.packageType}_installation_instructions`; + }, + }, +}; +</script> + +<template> + <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center"> + <h3 class="gl-font-lg">{{ __('Installation') }}</h3> + <div> + <persisted-dropdown-selection + :storage-key="storageKey" + :options="options" + @change="$emit('change', $event)" + /> + </div> + </div> +</template> diff --git a/app/assets/javascripts/packages/details/components/maven_installation.vue b/app/assets/javascripts/packages/details/components/maven_installation.vue index c2f6f76967b..b9532cb7e72 100644 --- a/app/assets/javascripts/packages/details/components/maven_installation.vue +++ b/app/assets/javascripts/packages/details/components/maven_installation.vue @@ -2,19 +2,36 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { mapGetters, mapState } from 'vuex'; import { s__ } from '~/locale'; +import InstallationTitle from '~/packages/details/components/installation_title.vue'; import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; + import { TrackingActions, TrackingLabels } from '../constants'; export default { name: 'MavenInstallation', components: { + InstallationTitle, CodeInstruction, GlLink, GlSprintf, }, + data() { + return { + instructionType: 'maven', + }; + }, computed: { ...mapState(['mavenHelpPath']), - ...mapGetters(['mavenInstallationXml', 'mavenInstallationCommand', 'mavenSetupXml']), + ...mapGetters([ + 'mavenInstallationXml', + 'mavenInstallationCommand', + 'mavenSetupXml', + 'gradleGroovyInstalCommand', + 'gradleGroovyAddSourceCommand', + ]), + showMaven() { + return this.instructionType === 'maven'; + }, }, i18n: { xmlText: s__( @@ -29,57 +46,84 @@ export default { }, trackingActions: { ...TrackingActions }, TrackingLabels, + installOptions: [ + { value: 'maven', label: s__('PackageRegistry|Show Maven commands') }, + { value: 'groovy', label: s__('PackageRegistry|Show Gradle Groovy DSL commands') }, + ], }; </script> <template> <div> - <h3 class="gl-font-lg">{{ __('Installation') }}</h3> + <installation-title + package-type="maven" + :options="$options.installOptions" + @change="instructionType = $event" + /> - <p> - <gl-sprintf :message="$options.i18n.xmlText"> - <template #code="{ content }"> - <code>{{ content }}</code> - </template> - </gl-sprintf> - </p> + <template v-if="showMaven"> + <p> + <gl-sprintf :message="$options.i18n.xmlText"> + <template #code="{ content }"> + <code>{{ content }}</code> + </template> + </gl-sprintf> + </p> - <code-instruction - :label="s__('PackageRegistry|Maven XML')" - :instruction="mavenInstallationXml" - :copy-text="s__('PackageRegistry|Copy Maven XML')" - multiline - :tracking-action="$options.trackingActions.COPY_MAVEN_XML" - :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" - /> + <code-instruction + :instruction="mavenInstallationXml" + :copy-text="s__('PackageRegistry|Copy Maven XML')" + :tracking-action="$options.trackingActions.COPY_MAVEN_XML" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" + multiline + /> - <code-instruction - :label="s__('PackageRegistry|Maven Command')" - :instruction="mavenInstallationCommand" - :copy-text="s__('PackageRegistry|Copy Maven command')" - :tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND" - :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" - /> + <code-instruction + :label="s__('PackageRegistry|Maven Command')" + :instruction="mavenInstallationCommand" + :copy-text="s__('PackageRegistry|Copy Maven command')" + :tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" + /> - <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3> - <p> - <gl-sprintf :message="$options.i18n.setupText"> - <template #code="{ content }"> - <code>{{ content }}</code> + <h3 class="gl-font-lg">{{ s__('PackageRegistry|Registry setup') }}</h3> + <p> + <gl-sprintf :message="$options.i18n.setupText"> + <template #code="{ content }"> + <code>{{ content }}</code> + </template> + </gl-sprintf> + </p> + <code-instruction + :instruction="mavenSetupXml" + :copy-text="s__('PackageRegistry|Copy Maven registry XML')" + :tracking-action="$options.trackingActions.COPY_MAVEN_SETUP" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" + multiline + /> + <gl-sprintf :message="$options.i18n.helpText"> + <template #link="{ content }"> + <gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link> </template> </gl-sprintf> - </p> - <code-instruction - :instruction="mavenSetupXml" - :copy-text="s__('PackageRegistry|Copy Maven registry XML')" - multiline - :tracking-action="$options.trackingActions.COPY_MAVEN_SETUP" - :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" - /> - <gl-sprintf :message="$options.i18n.helpText"> - <template #link="{ content }"> - <gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link> - </template> - </gl-sprintf> + </template> + <template v-else> + <code-instruction + class="gl-mb-5" + :label="s__('PackageRegistry|Gradle Groovy DSL install command')" + :instruction="gradleGroovyInstalCommand" + :copy-text="s__('PackageRegistry|Copy Gradle Groovy DSL install command')" + :tracking-action="$options.trackingActions.COPY_GRADLE_INSTALL_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" + /> + <code-instruction + :label="s__('PackageRegistry|Add Gradle Groovy DSL repository command')" + :instruction="gradleGroovyAddSourceCommand" + :copy-text="s__('PackageRegistry|Copy add Gradle Groovy DSL repository command')" + :tracking-action="$options.trackingActions.COPY_GRADLE_ADD_TO_SOURCE_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" + multiline + /> + </template> </div> </template> diff --git a/app/assets/javascripts/packages/details/components/npm_installation.vue b/app/assets/javascripts/packages/details/components/npm_installation.vue index 37ba279d098..18f15e2c63e 100644 --- a/app/assets/javascripts/packages/details/components/npm_installation.vue +++ b/app/assets/javascripts/packages/details/components/npm_installation.vue @@ -2,12 +2,14 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { mapGetters, mapState } from 'vuex'; import { s__ } from '~/locale'; +import InstallationTitle from '~/packages/details/components/installation_title.vue'; import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; import { NpmManager, TrackingActions, TrackingLabels } from '../constants'; export default { name: 'NpmInstallation', components: { + InstallationTitle, CodeInstruction, GlLink, GlSprintf, @@ -35,12 +37,13 @@ export default { }, trackingActions: { ...TrackingActions }, TrackingLabels, + installOptions: [{ value: 'npm', label: s__('PackageRegistry|Show NPM commands') }], }; </script> <template> <div> - <h3 class="gl-font-lg">{{ __('Installation') }}</h3> + <installation-title package-type="npm" :options="$options.installOptions" /> <code-instruction :label="s__('PackageRegistry|npm command')" diff --git a/app/assets/javascripts/packages/details/components/nuget_installation.vue b/app/assets/javascripts/packages/details/components/nuget_installation.vue index 36887703716..d5e64722f24 100644 --- a/app/assets/javascripts/packages/details/components/nuget_installation.vue +++ b/app/assets/javascripts/packages/details/components/nuget_installation.vue @@ -2,12 +2,14 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { mapGetters, mapState } from 'vuex'; import { s__ } from '~/locale'; +import InstallationTitle from '~/packages/details/components/installation_title.vue'; import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; import { TrackingActions, TrackingLabels } from '../constants'; export default { name: 'NugetInstallation', components: { + InstallationTitle, CodeInstruction, GlLink, GlSprintf, @@ -23,12 +25,14 @@ export default { }, trackingActions: { ...TrackingActions }, TrackingLabels, + installOptions: [{ value: 'nuget', label: s__('PackageRegistry|Show Nuget commands') }], }; </script> <template> <div> - <h3 class="gl-font-lg">{{ __('Installation') }}</h3> + <installation-title package-type="nuget" :options="$options.installOptions" /> + <code-instruction :label="s__('PackageRegistry|NuGet Command')" :instruction="nugetInstallationCommand" diff --git a/app/assets/javascripts/packages/details/components/pypi_installation.vue b/app/assets/javascripts/packages/details/components/pypi_installation.vue index f87be68be48..fe4709d5feb 100644 --- a/app/assets/javascripts/packages/details/components/pypi_installation.vue +++ b/app/assets/javascripts/packages/details/components/pypi_installation.vue @@ -2,12 +2,14 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { mapGetters, mapState } from 'vuex'; import { s__ } from '~/locale'; +import InstallationTitle from '~/packages/details/components/installation_title.vue'; import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; import { TrackingActions, TrackingLabels } from '../constants'; export default { name: 'PyPiInstallation', components: { + InstallationTitle, CodeInstruction, GlLink, GlSprintf, @@ -26,12 +28,13 @@ export default { }, trackingActions: { ...TrackingActions }, TrackingLabels, + installOptions: [{ value: 'pypi', label: s__('PackageRegistry|Show PyPi commands') }], }; </script> <template> <div> - <h3 class="gl-font-lg">{{ __('Installation') }}</h3> + <installation-title package-type="pypi" :options="$options.installOptions" /> <code-instruction :label="s__('PackageRegistry|Pip Command')" diff --git a/app/assets/javascripts/packages/details/constants.js b/app/assets/javascripts/packages/details/constants.js index 986b0667356..f0300ee29b4 100644 --- a/app/assets/javascripts/packages/details/constants.js +++ b/app/assets/javascripts/packages/details/constants.js @@ -35,6 +35,9 @@ export const TrackingActions = { COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND: 'copy_composer_registry_include_command', COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND: 'copy_composer_package_include_command', + + COPY_GRADLE_INSTALL_COMMAND: 'copy_gradle_install_command', + COPY_GRADLE_ADD_TO_SOURCE_COMMAND: 'copy_gradle_add_to_source_command', }; export const NpmManager = { diff --git a/app/assets/javascripts/packages/details/store/getters.js b/app/assets/javascripts/packages/details/store/getters.js index 14e76ac84bd..fd75d476b86 100644 --- a/app/assets/javascripts/packages/details/store/getters.js +++ b/app/assets/javascripts/packages/details/store/getters.js @@ -110,4 +110,20 @@ export const composerPackageInclude = ({ packageEntity }) => // eslint-disable-next-line @gitlab/require-i18n-strings `composer req ${[packageEntity.name]}:${packageEntity.version}`; +export const gradleGroovyInstalCommand = ({ packageEntity }) => { + const { + app_group: group = '', + app_name: name = '', + app_version: version = '', + } = packageEntity.maven_metadatum; + // eslint-disable-next-line @gitlab/require-i18n-strings + return `implementation '${group}:${name}:${version}'`; +}; + +export const gradleGroovyAddSourceCommand = ({ mavenPath }) => + // eslint-disable-next-line @gitlab/require-i18n-strings + `gitlab { + url "${mavenPath}" +}`; + export const groupExists = ({ groupListUrl }) => groupListUrl.length > 0; |