Add latest changes from gitlab-org/gitlab@13-4-stable-ee

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)">
+            &nbsp;{{ timeFormatted(packageEntity.created_at) }}
+          </span>
+        </template>
+      </gl-sprintf>
+    </template>
 
-            <template #timeAgo>
-              <span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)">
-                &nbsp;{{ 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 }">