Add latest changes from gitlab-org/gitlab@master

2 files changed, 13 insertions, 3 deletions

diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql
index 51e0ab5aba8..9153906a38c 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql
+++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql
@@ -62,6 +62,7 @@ query getPackageDetails(
       }
     }
     versions(after: $after, before: $before, first: $first, last: $last) {
+      count
       nodes {
         id
         name
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
index c59dcaee411..03352f01aca 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
@@ -304,7 +304,7 @@ export default {
     deleteFileModalContent: s__(
       `PackageRegistry|You are about to delete %{filename}. This is a destructive action that may render your package unusable. Are you sure?`,
     ),
-    otherVersionsTabTitle: __('Other versions'),
+    otherVersionsTabTitle: s__('PackageRegistry|Other versions'),
   },
   modal: {
     packageDeletePrimaryAction: {
@@ -380,7 +380,9 @@ export default {
       <gl-tab v-if="showDependencies">
         <template #title>
           <span>{{ __('Dependencies') }}</span>
-          <gl-badge size="sm">{{ packageDependencies.length }}</gl-badge>
+          <gl-badge size="sm" data-testid="dependencies-badge">{{
+            packageDependencies.length
+          }}</gl-badge>
         </template>
 
         <template v-if="packageDependencies.length > 0">
@@ -392,7 +394,14 @@ export default {
         </p>
       </gl-tab>
 
-      <gl-tab :title="$options.i18n.otherVersionsTabTitle" title-item-class="js-versions-tab" lazy>
+      <gl-tab title-item-class="js-versions-tab" lazy>
+        <template #title>
+          <span>{{ $options.i18n.otherVersionsTabTitle }}</span>
+          <gl-badge size="sm" class="gl-tab-counter-badge" data-testid="other-versions-badge">{{
+            packageEntity.versions.count
+          }}</gl-badge>
+        </template>
+
         <package-versions-list
           :is-loading="isLoading"
           :page-info="versionPageInfo"