diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 01:45:44 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 01:45:44 +0000 |
commit | 85dc423f7090da0a52c73eb66faf22ddb20efff9 (patch) | |
tree | 9160f299afd8c80c038f08e1545be119f5e3f1e1 /app/assets/javascripts/packages/details/components | |
parent | 15c2c8c66dbe422588e5411eee7e68f1fa440bb8 (diff) | |
download | gitlab-ce-85dc423f7090da0a52c73eb66faf22ddb20efff9.tar.gz |
Add latest changes from gitlab-org/gitlab@13-4-stable-ee
Diffstat (limited to 'app/assets/javascripts/packages/details/components')
13 files changed, 143 insertions, 253 deletions
diff --git a/app/assets/javascripts/packages/details/components/additional_metadata.vue b/app/assets/javascripts/packages/details/components/additional_metadata.vue index a3de6dd46c7..76e0976ac05 100644 --- a/app/assets/javascripts/packages/details/components/additional_metadata.vue +++ b/app/assets/javascripts/packages/details/components/additional_metadata.vue @@ -1,7 +1,7 @@ <script> import { GlLink, GlSprintf } from '@gitlab/ui'; import { s__ } from '~/locale'; -import DetailsRow from '~/registry/shared/components/details_row.vue'; +import DetailsRow from '~/vue_shared/components/registry/details_row.vue'; import { generateConanRecipe } from '../utils'; import { PackageType } from '../../shared/constants'; diff --git a/app/assets/javascripts/packages/details/components/app.vue b/app/assets/javascripts/packages/details/components/app.vue index dbb5f7be0a0..af3220840a6 100644 --- a/app/assets/javascripts/packages/details/components/app.vue +++ b/app/assets/javascripts/packages/details/components/app.vue @@ -25,8 +25,9 @@ import { numberToHumanSize } from '~/lib/utils/number_utils'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import FileIcon from '~/vue_shared/components/file_icon.vue'; import { __, s__ } from '~/locale'; -import { PackageType, TrackingActions } from '../../shared/constants'; +import { PackageType, TrackingActions, SHOW_DELETE_SUCCESS_ALERT } from '../../shared/constants'; import { packageTypeToTrackCategory } from '../../shared/utils'; +import { objectToQueryString } from '~/lib/utils/common_utils'; export default { name: 'PackagesApp', @@ -62,17 +63,15 @@ export default { 'packageFiles', 'isLoading', 'canDelete', - 'destroyPath', 'svgPath', 'npmPath', 'npmHelpPath', + 'projectListUrl', + 'groupListUrl', ]), isValidPackage() { return Boolean(this.packageEntity.name); }, - canDeletePackage() { - return this.canDelete && this.destroyPath; - }, filesTableRows() { return this.packageFiles.map(x => ({ name: x.file_name, @@ -100,7 +99,7 @@ export default { }, }, methods: { - ...mapActions(['fetchPackageVersions']), + ...mapActions(['deletePackage', 'fetchPackageVersions']), formatSize(size) { return numberToHumanSize(size); }, @@ -112,6 +111,16 @@ export default { this.fetchPackageVersions(); } }, + async confirmPackageDeletion() { + this.track(TrackingActions.DELETE_PACKAGE); + await this.deletePackage(); + const returnTo = + !this.groupListUrl || document.referrer.includes(this.projectName) + ? this.projectListUrl + : this.groupListUrl; // to avoid security issue url are supplied from backend + const modalQuery = objectToQueryString({ [SHOW_DELETE_SUCCESS_ALERT]: true }); + window.location.replace(`${returnTo}?${modalQuery}`); + }, }, i18n: { deleteModalTitle: s__(`PackageRegistry|Delete Package Version`), @@ -147,12 +156,10 @@ export default { /> <div v-else class="packages-app"> - <div class="detail-page-header d-flex justify-content-between flex-column flex-sm-row"> - <package-title /> - - <div class="mt-sm-2"> + <package-title> + <template #delete-button> <gl-button - v-if="canDeletePackage" + v-if="canDelete" v-gl-modal="'delete-modal'" class="js-delete-button" variant="danger" @@ -161,8 +168,8 @@ export default { > {{ __('Delete') }} </gl-button> - </div> - </div> + </template> + </package-title> <gl-tabs> <gl-tab :title="__('Detail')"> @@ -268,22 +275,22 @@ export default { </template> </gl-sprintf> - <div slot="modal-footer" class="w-100"> - <div class="float-right"> - <gl-button @click="cancelDelete()">{{ __('Cancel') }}</gl-button> - <gl-button - ref="modal-delete-button" - data-method="delete" - :to="destroyPath" - variant="danger" - category="primary" - data-qa-selector="delete_modal_button" - @click="track($options.trackingActions.DELETE_PACKAGE)" - > - {{ __('Delete') }} - </gl-button> + <template #modal-footer> + <div class="gl-w-full"> + <div class="float-right"> + <gl-button @click="cancelDelete">{{ __('Cancel') }}</gl-button> + <gl-button + ref="modal-delete-button" + variant="danger" + category="primary" + data-qa-selector="delete_modal_button" + @click="confirmPackageDeletion" + > + {{ __('Delete') }} + </gl-button> + </div> </div> - </div> + </template> </gl-modal> </div> </template> diff --git a/app/assets/javascripts/packages/details/components/code_instruction.vue b/app/assets/javascripts/packages/details/components/code_instruction.vue deleted file mode 100644 index 0719ddfcd2b..00000000000 --- a/app/assets/javascripts/packages/details/components/code_instruction.vue +++ /dev/null @@ -1,63 +0,0 @@ -<script> -import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; -import Tracking from '~/tracking'; -import { TrackingLabels } from '../constants'; - -export default { - name: 'CodeInstruction', - components: { - ClipboardButton, - }, - mixins: [ - Tracking.mixin({ - label: TrackingLabels.CODE_INSTRUCTION, - }), - ], - props: { - instruction: { - type: String, - required: true, - }, - copyText: { - type: String, - required: true, - }, - multiline: { - type: Boolean, - required: false, - default: false, - }, - trackingAction: { - type: String, - required: false, - default: '', - }, - }, - methods: { - trackCopy() { - if (this.trackingAction) { - this.track(this.trackingAction); - } - }, - }, -}; -</script> - -<template> - <div v-if="!multiline" class="input-group gl-mb-3"> - <input - :value="instruction" - type="text" - class="form-control monospace js-instruction-input" - readonly - @copy="trackCopy" - /> - <span class="input-group-append js-instruction-button" @click="trackCopy"> - <clipboard-button :text="instruction" :title="copyText" class="input-group-text" /> - </span> - </div> - - <div v-else> - <pre class="js-instruction-pre" @copy="trackCopy">{{ instruction }}</pre> - </div> -</template> diff --git a/app/assets/javascripts/packages/details/components/composer_installation.vue b/app/assets/javascripts/packages/details/components/composer_installation.vue index 1934da149ce..60ad468c293 100644 --- a/app/assets/javascripts/packages/details/components/composer_installation.vue +++ b/app/assets/javascripts/packages/details/components/composer_installation.vue @@ -2,8 +2,8 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { mapGetters, mapState } from 'vuex'; import { s__ } from '~/locale'; -import CodeInstruction from './code_instruction.vue'; -import { TrackingActions } from '../constants'; +import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; +import { TrackingActions, TrackingLabels } from '../constants'; export default { name: 'ComposerInstallation', @@ -26,28 +26,30 @@ export default { ), }, trackingActions: { ...TrackingActions }, + TrackingLabels, }; </script> <template> <div> <h3 class="gl-font-lg">{{ __('Installation') }}</h3> - <h4 class="gl-font-base" data-testid="registry-include-title"> - {{ $options.i18n.registryInclude }} - </h4> <code-instruction + :label="$options.i18n.registryInclude" :instruction="composerRegistryInclude" :copy-text="$options.i18n.copyRegistryInclude" :tracking-action="$options.trackingActions.COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" + data-testid="registry-include" /> - <h4 class="gl-font-base" data-testid="package-include-title"> - {{ $options.i18n.packageInclude }} - </h4> + <code-instruction + :label="$options.i18n.packageInclude" :instruction="composerPackageInclude" :copy-text="$options.i18n.copyPackageInclude" :tracking-action="$options.trackingActions.COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" + data-testid="package-include" /> <span data-testid="help-text"> <gl-sprintf :message="$options.i18n.infoLine"> diff --git a/app/assets/javascripts/packages/details/components/conan_installation.vue b/app/assets/javascripts/packages/details/components/conan_installation.vue index cff7d73f1e8..a5df87c9c5b 100644 --- a/app/assets/javascripts/packages/details/components/conan_installation.vue +++ b/app/assets/javascripts/packages/details/components/conan_installation.vue @@ -2,8 +2,8 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { mapGetters, mapState } from 'vuex'; import { s__ } from '~/locale'; -import CodeInstruction from './code_instruction.vue'; -import { TrackingActions } from '../constants'; +import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; +import { TrackingActions, TrackingLabels } from '../constants'; export default { name: 'ConanInstallation', @@ -22,30 +22,30 @@ export default { ), }, trackingActions: { ...TrackingActions }, + TrackingLabels, }; </script> <template> <div> <h3 class="gl-font-lg">{{ __('Installation') }}</h3> - <h4 class="gl-font-base"> - {{ s__('PackageRegistry|Conan Command') }} - </h4> <code-instruction + :label="s__('PackageRegistry|Conan Command')" :instruction="conanInstallationCommand" :copy-text="s__('PackageRegistry|Copy Conan Command')" :tracking-action="$options.trackingActions.COPY_CONAN_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" /> <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3> - <h4 class="gl-font-base"> - {{ s__('PackageRegistry|Add Conan Remote') }} - </h4> + <code-instruction + :label="s__('PackageRegistry|Add Conan Remote')" :instruction="conanSetupCommand" :copy-text="s__('PackageRegistry|Copy Conan Setup Command')" :tracking-action="$options.trackingActions.COPY_CONAN_SETUP_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" /> <gl-sprintf :message="$options.i18n.helpText"> <template #link="{ content }"> diff --git a/app/assets/javascripts/packages/details/components/dependency_row.vue b/app/assets/javascripts/packages/details/components/dependency_row.vue index 788673d2881..1a2202b23c8 100644 --- a/app/assets/javascripts/packages/details/components/dependency_row.vue +++ b/app/assets/javascripts/packages/details/components/dependency_row.vue @@ -26,7 +26,7 @@ export default { <div v-if="showVersion" - class="table-section section-50 gl-display-flex justify-content-md-end" + class="table-section section-50 gl-display-flex gl-md-justify-content-end" data-testid="version-pattern" > <span class="gl-text-body">{{ dependency.version_pattern }}</span> diff --git a/app/assets/javascripts/packages/details/components/history_element.vue b/app/assets/javascripts/packages/details/components/history_element.vue deleted file mode 100644 index 8a51c1528cf..00000000000 --- a/app/assets/javascripts/packages/details/components/history_element.vue +++ /dev/null @@ -1,35 +0,0 @@ -<script> -import { GlIcon } from '@gitlab/ui'; -import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; - -export default { - name: 'HistoryElement', - components: { - GlIcon, - TimelineEntryItem, - }, - - props: { - icon: { - type: String, - required: true, - }, - }, -}; -</script> - -<template> - <timeline-entry-item class="system-note note-wrapper gl-mb-6!"> - <div class="timeline-icon"> - <gl-icon :name="icon" /> - </div> - <div class="timeline-content"> - <div class="note-header"> - <span> - <slot></slot> - </span> - </div> - <div class="note-body"></div> - </div> - </timeline-entry-item> -</template> diff --git a/app/assets/javascripts/packages/details/components/maven_installation.vue b/app/assets/javascripts/packages/details/components/maven_installation.vue index d6641c886a0..c2f6f76967b 100644 --- a/app/assets/javascripts/packages/details/components/maven_installation.vue +++ b/app/assets/javascripts/packages/details/components/maven_installation.vue @@ -2,8 +2,8 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { mapGetters, mapState } from 'vuex'; import { s__ } from '~/locale'; -import CodeInstruction from './code_instruction.vue'; -import { TrackingActions } from '../constants'; +import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; +import { TrackingActions, TrackingLabels } from '../constants'; export default { name: 'MavenInstallation', @@ -28,6 +28,7 @@ export default { ), }, trackingActions: { ...TrackingActions }, + TrackingLabels, }; </script> @@ -35,9 +36,6 @@ export default { <div> <h3 class="gl-font-lg">{{ __('Installation') }}</h3> - <h4 class="gl-font-base"> - {{ s__('PackageRegistry|Maven XML') }} - </h4> <p> <gl-sprintf :message="$options.i18n.xmlText"> <template #code="{ content }"> @@ -45,20 +43,22 @@ export default { </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" /> - <h4 class="gl-font-base"> - {{ s__('PackageRegistry|Maven Command') }} - </h4> <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> @@ -74,6 +74,7 @@ export default { :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 }"> diff --git a/app/assets/javascripts/packages/details/components/npm_installation.vue b/app/assets/javascripts/packages/details/components/npm_installation.vue index d7ff8428370..37ba279d098 100644 --- a/app/assets/javascripts/packages/details/components/npm_installation.vue +++ b/app/assets/javascripts/packages/details/components/npm_installation.vue @@ -2,8 +2,8 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { mapGetters, mapState } from 'vuex'; import { s__ } from '~/locale'; -import CodeInstruction from './code_instruction.vue'; -import { NpmManager, TrackingActions } from '../constants'; +import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; +import { NpmManager, TrackingActions, TrackingLabels } from '../constants'; export default { name: 'NpmInstallation', @@ -34,41 +34,46 @@ export default { ), }, trackingActions: { ...TrackingActions }, + TrackingLabels, }; </script> <template> <div> <h3 class="gl-font-lg">{{ __('Installation') }}</h3> - <h4 class="gl-font-base">{{ s__('PackageRegistry|npm command') }}</h4> <code-instruction + :label="s__('PackageRegistry|npm command')" :instruction="npmCommand" :copy-text="s__('PackageRegistry|Copy npm command')" :tracking-action="$options.trackingActions.COPY_NPM_INSTALL_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" /> - <h4 class="gl-font-base">{{ s__('PackageRegistry|yarn command') }}</h4> <code-instruction + :label="s__('PackageRegistry|yarn command')" :instruction="yarnCommand" :copy-text="s__('PackageRegistry|Copy yarn command')" :tracking-action="$options.trackingActions.COPY_YARN_INSTALL_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" /> <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3> - <h4 class="gl-font-base">{{ s__('PackageRegistry|npm command') }}</h4> <code-instruction + :label="s__('PackageRegistry|npm command')" :instruction="npmSetup" :copy-text="s__('PackageRegistry|Copy npm setup command')" :tracking-action="$options.trackingActions.COPY_NPM_SETUP_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" /> - <h4 class="gl-font-base">{{ s__('PackageRegistry|yarn command') }}</h4> <code-instruction + :label="s__('PackageRegistry|yarn command')" :instruction="yarnSetupCommand" :copy-text="s__('PackageRegistry|Copy yarn setup command')" :tracking-action="$options.trackingActions.COPY_YARN_SETUP_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" /> <gl-sprintf :message="$options.i18n.helpText"> diff --git a/app/assets/javascripts/packages/details/components/nuget_installation.vue b/app/assets/javascripts/packages/details/components/nuget_installation.vue index 150b6e3ab0f..36887703716 100644 --- a/app/assets/javascripts/packages/details/components/nuget_installation.vue +++ b/app/assets/javascripts/packages/details/components/nuget_installation.vue @@ -2,8 +2,8 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { mapGetters, mapState } from 'vuex'; import { s__ } from '~/locale'; -import CodeInstruction from './code_instruction.vue'; -import { TrackingActions } from '../constants'; +import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; +import { TrackingActions, TrackingLabels } from '../constants'; export default { name: 'NugetInstallation', @@ -22,29 +22,28 @@ export default { ), }, trackingActions: { ...TrackingActions }, + TrackingLabels, }; </script> <template> <div> <h3 class="gl-font-lg">{{ __('Installation') }}</h3> - <h4 class="gl-font-base"> - {{ s__('PackageRegistry|NuGet Command') }} - </h4> <code-instruction + :label="s__('PackageRegistry|NuGet Command')" :instruction="nugetInstallationCommand" :copy-text="s__('PackageRegistry|Copy NuGet Command')" :tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" /> <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3> - <h4 class="gl-font-base"> - {{ s__('PackageRegistry|Add NuGet Source') }} - </h4> <code-instruction + :label="s__('PackageRegistry|Add NuGet Source')" :instruction="nugetSetupCommand" :copy-text="s__('PackageRegistry|Copy NuGet Setup Command')" :tracking-action="$options.trackingActions.COPY_NUGET_SETUP_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" /> <gl-sprintf :message="$options.i18n.helpText"> <template #link="{ content }"> diff --git a/app/assets/javascripts/packages/details/components/package_history.vue b/app/assets/javascripts/packages/details/components/package_history.vue index 96ce106884d..413ab1d15cb 100644 --- a/app/assets/javascripts/packages/details/components/package_history.vue +++ b/app/assets/javascripts/packages/details/components/package_history.vue @@ -2,7 +2,7 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { s__ } from '~/locale'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; -import HistoryElement from './history_element.vue'; +import HistoryItem from '~/vue_shared/components/registry/history_item.vue'; export default { name: 'PackageHistory', @@ -16,7 +16,7 @@ export default { components: { GlLink, GlSprintf, - HistoryElement, + HistoryItem, TimeAgoTooltip, }, props: { @@ -46,7 +46,7 @@ export default { <div class="issuable-discussion"> <h3 class="gl-font-lg" data-testid="title">{{ __('History') }}</h3> <ul class="timeline main-notes-list notes gl-mb-4" data-testid="timeline"> - <history-element icon="clock" data-testid="created-on"> + <history-item icon="clock" data-testid="created-on"> <gl-sprintf :message="$options.i18n.createdOn"> <template #name> <strong>{{ packageEntity.name }}</strong> @@ -58,8 +58,8 @@ export default { <time-ago-tooltip :time="packageEntity.created_at" /> </template> </gl-sprintf> - </history-element> - <history-element icon="pencil" data-testid="updated-at"> + </history-item> + <history-item icon="pencil" data-testid="updated-at"> <gl-sprintf :message="$options.i18n.updatedAtText"> <template #name> <strong>{{ packageEntity.name }}</strong> @@ -71,9 +71,9 @@ export default { <time-ago-tooltip :time="packageEntity.updated_at" /> </template> </gl-sprintf> - </history-element> + </history-item> <template v-if="packagePipeline"> - <history-element icon="commit" data-testid="commit"> + <history-item icon="commit" data-testid="commit"> <gl-sprintf :message="$options.i18n.commitText"> <template #link> <gl-link :href="packagePipeline.project.commit_url">{{ @@ -84,8 +84,8 @@ export default { <strong>{{ packagePipeline.ref }}</strong> </template> </gl-sprintf> - </history-element> - <history-element icon="pipeline" data-testid="pipeline"> + </history-item> + <history-item icon="pipeline" data-testid="pipeline"> <gl-sprintf :message="$options.i18n.pipelineText"> <template #link> <gl-link :href="packagePipeline.project.pipeline_url" @@ -97,9 +97,9 @@ export default { </template> <template #author>{{ packagePipeline.user.name }}</template> </gl-sprintf> - </history-element> + </history-item> </template> - <history-element icon="package" data-testid="published"> + <history-item icon="package" data-testid="published"> <gl-sprintf :message="$options.i18n.publishText"> <template #project> <strong>{{ projectName }}</strong> @@ -108,7 +108,7 @@ export default { <time-ago-tooltip :time="packageEntity.created_at" /> </template> </gl-sprintf> - </history-element> + </history-item> </ul> </div> </template> diff --git a/app/assets/javascripts/packages/details/components/package_title.vue b/app/assets/javascripts/packages/details/components/package_title.vue index d07883e3e7a..69dd494f11a 100644 --- a/app/assets/javascripts/packages/details/components/package_title.vue +++ b/app/assets/javascripts/packages/details/components/package_title.vue @@ -1,19 +1,21 @@ <script> import { mapState, mapGetters } from 'vuex'; -import { GlAvatar, GlIcon, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui'; +import { GlIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui'; import PackageTags from '../../shared/components/package_tags.vue'; import { numberToHumanSize } from '~/lib/utils/number_utils'; import timeagoMixin from '~/vue_shared/mixins/timeago'; +import TitleArea from '~/vue_shared/components/registry/title_area.vue'; +import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue'; import { __ } from '~/locale'; export default { name: 'PackageTitle', components: { - GlAvatar, + TitleArea, GlIcon, - GlLink, GlSprintf, PackageTags, + MetadataItem, }, directives: { GlTooltip: GlTooltipDirective, @@ -36,77 +38,49 @@ export default { </script> <template> - <div class="gl-flex-direction-column"> - <div class="gl-display-flex"> - <gl-avatar - v-if="packageIcon" - :src="packageIcon" - shape="rect" - class="gl-align-self-center gl-mr-4" - data-testid="package-icon" - /> - - <div class="gl-display-flex gl-flex-direction-column"> - <h1 class="gl-font-size-h1 gl-mt-3 gl-mb-2"> - {{ packageEntity.name }} - </h1> + <title-area :title="packageEntity.name" :avatar="packageIcon" data-qa-selector="package_title"> + <template #sub-header> + <gl-icon name="eye" class="gl-mr-3" /> + <gl-sprintf :message="$options.i18n.packageInfo"> + <template #version> + {{ packageEntity.version }} + </template> - <div class="gl-display-flex gl-align-items-center gl-text-gray-500"> - <gl-icon name="eye" class="gl-mr-3" /> - <gl-sprintf :message="$options.i18n.packageInfo"> - <template #version> - {{ packageEntity.version }} - </template> + <template #timeAgo> + <span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)"> + {{ timeFormatted(packageEntity.created_at) }} + </span> + </template> + </gl-sprintf> + </template> - <template #timeAgo> - <span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)"> - {{ timeFormatted(packageEntity.created_at) }} - </span> - </template> - </gl-sprintf> - </div> - </div> - </div> + <template v-if="packageTypeDisplay" #metadata_type> + <metadata-item data-testid="package-type" icon="package" :text="packageTypeDisplay" /> + </template> - <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mb-3"> - <div v-if="packageTypeDisplay" class="gl-display-flex gl-align-items-center gl-mr-5"> - <gl-icon name="package" class="gl-text-gray-500 gl-mr-3" /> - <span data-testid="package-type" class="gl-font-weight-bold">{{ packageTypeDisplay }}</span> - </div> + <template #metadata_size> + <metadata-item data-testid="package-size" icon="disk" :text="totalSize" /> + </template> - <div v-if="hasTagsToDisplay" class="gl-display-flex gl-align-items-center gl-mr-5"> - <package-tags :tag-display-limit="1" :tags="packageEntity.tags" /> - </div> + <template v-if="packagePipeline" #metadata_pipeline> + <metadata-item + data-testid="pipeline-project" + icon="review-list" + :text="packagePipeline.project.name" + :link="packagePipeline.project.web_url" + /> + </template> - <div v-if="packagePipeline" class="gl-display-flex gl-align-items-center gl-mr-5"> - <gl-icon name="review-list" class="gl-text-gray-500 gl-mr-3" /> - <gl-link - data-testid="pipeline-project" - :href="packagePipeline.project.web_url" - class="gl-font-weight-bold text-truncate" - > - {{ packagePipeline.project.name }} - </gl-link> - </div> + <template v-if="packagePipeline" #metadata_ref> + <metadata-item data-testid="package-ref" icon="branch" :text="packagePipeline.ref" /> + </template> - <div - v-if="packagePipeline" - data-testid="package-ref" - class="gl-display-flex gl-align-items-center gl-mr-5" - > - <gl-icon name="branch" class="gl-text-gray-500 gl-mr-3" /> - <span - v-gl-tooltip - class="gl-font-weight-bold text-truncate mw-xs" - :title="packagePipeline.ref" - >{{ packagePipeline.ref }}</span - > - </div> + <template v-if="hasTagsToDisplay" #metadata_tags> + <package-tags :tag-display-limit="2" :tags="packageEntity.tags" hide-label /> + </template> - <div class="gl-display-flex gl-align-items-center gl-mr-5"> - <gl-icon name="disk" class="gl-text-gray-500 gl-mr-3" /> - <span data-testid="package-size" class="gl-font-weight-bold">{{ totalSize }}</span> - </div> - </div> - </div> + <template #right-actions> + <slot name="delete-button"></slot> + </template> + </title-area> </template> diff --git a/app/assets/javascripts/packages/details/components/pypi_installation.vue b/app/assets/javascripts/packages/details/components/pypi_installation.vue index f1c619fd6d3..f87be68be48 100644 --- a/app/assets/javascripts/packages/details/components/pypi_installation.vue +++ b/app/assets/javascripts/packages/details/components/pypi_installation.vue @@ -2,8 +2,8 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { mapGetters, mapState } from 'vuex'; import { s__ } from '~/locale'; -import CodeInstruction from './code_instruction.vue'; -import { TrackingActions } from '../constants'; +import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; +import { TrackingActions, TrackingLabels } from '../constants'; export default { name: 'PyPiInstallation', @@ -25,6 +25,7 @@ export default { ), }, trackingActions: { ...TrackingActions }, + TrackingLabels, }; </script> @@ -32,15 +33,13 @@ export default { <div> <h3 class="gl-font-lg">{{ __('Installation') }}</h3> - <h4 class="gl-font-base"> - {{ s__('PackageRegistry|Pip Command') }} - </h4> - <code-instruction + :label="s__('PackageRegistry|Pip Command')" :instruction="pypiPipCommand" :copy-text="s__('PackageRegistry|Copy Pip command')" data-testid="pip-command" :tracking-action="$options.trackingActions.COPY_PIP_INSTALL_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" /> <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3> @@ -58,6 +57,7 @@ export default { data-testid="pypi-setup-content" multiline :tracking-action="$options.trackingActions.COPY_PYPI_SETUP_COMMAND" + :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION" /> <gl-sprintf :message="$options.i18n.helpText"> <template #link="{ content }"> |