Update tag order in package title

- update order
- smaller badges
- update tests

app/assets/javascripts/packages/details/components/package_title.vue

@@ -74,8 +74,9 @@ export default {
         <span data-testid="package-type" class="gl-font-weight-bold">{{ packageTypeDisplay }}</span>
       </div>
 
-      <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 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 v-if="packagePipeline" class="gl-display-flex gl-align-items-center gl-mr-5">
@@ -103,9 +104,8 @@ export default {
         >
       </div>
 
-      <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 v-if="hasTagsToDisplay" class="gl-display-flex gl-align-items-center gl-mr-5">
+        <package-tags :tag-display-limit="2" :tags="packageEntity.tags" hide-label />
       </div>
     </div>
   </div>

app/assets/javascripts/packages/shared/components/package_tags.vue

@@ -80,6 +80,7 @@ export default {
       data-testid="tagBadge"
       :class="tagBadgeClass(index)"
       variant="info"
+      size="sm"
       >{{ tag.name }}</gl-badge
     >
 
@@ -89,6 +90,7 @@ export default {
       data-testid="moreBadge"
       variant="muted"
       :title="moreTagsTooltip"
+      size="sm"
       class="gl-display-none d-md-flex gl-ml-2"
       ><gl-sprintf :message="__('+%{tags} more')">
         <template #tags>

changelogs/unreleased/225656-package-detail-view-update-the-order-of-the-header-metadata-to-imp.yml

+---
+title: Update order of the Header Metadata in Package details
+merge_request: 39585
+author:
+type: changed

spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap

@@ -56,19 +56,6 @@ exports[`PackageTitle renders with tags 1`] = `
       </span>
     </div>
      
-    <div
-      class="gl-display-flex gl-align-items-center gl-mr-5"
-    >
-      <package-tags-stub
-        tagdisplaylimit="1"
-        tags="[object Object],[object Object],[object Object],[object Object]"
-      />
-    </div>
-     
-    <!---->
-     
-    <!---->
-     
     <div
       class="gl-display-flex gl-align-items-center gl-mr-5"
     >
@@ -85,6 +72,20 @@ exports[`PackageTitle renders with tags 1`] = `
         300 bytes
       </span>
     </div>
+     
+    <!---->
+     
+    <!---->
+     
+    <div
+      class="gl-display-flex gl-align-items-center gl-mr-5"
+    >
+      <package-tags-stub
+        hidelabel="true"
+        tagdisplaylimit="2"
+        tags="[object Object],[object Object],[object Object],[object Object]"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -145,12 +146,6 @@ exports[`PackageTitle renders without tags 1`] = `
       </span>
     </div>
      
-    <!---->
-     
-    <!---->
-     
-    <!---->
-     
     <div
       class="gl-display-flex gl-align-items-center gl-mr-5"
     >
@@ -167,6 +162,12 @@ exports[`PackageTitle renders without tags 1`] = `
         300 bytes
       </span>
     </div>
+     
+    <!---->
+     
+    <!---->
+     
+    <!---->
   </div>
 </div>
 `;