Limit package page width to fluid layout

- package group list
- package project list
- package details

app/assets/javascripts/packages/list/components/packages_list.vue

@@ -86,7 +86,7 @@ export default {
     <slot v-if="isListEmpty && !isLoading" name="empty-state"></slot>
 
     <div v-else-if="isLoading">
-      <packages-list-loader :is-group="isGroupPage" />
+      <packages-list-loader />
     </div>
 
     <template v-else>

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

 <script>
-import { GlButton, GlIcon, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlIcon, GlLink, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui';
 import PackageTags from './package_tags.vue';
 import PublishMethod from './publish_method.vue';
 import { getPackageTypeLabel } from '../utils';
@@ -13,6 +13,7 @@ export default {
     GlIcon,
     GlLink,
     GlSprintf,
+    GlTruncate,
     PackageTags,
     PublishMethod,
     ListItem,
@@ -63,9 +64,13 @@ export default {
 <template>
   <list-item data-qa-selector="package_row">
     <template #left-primary>
-      <div class="gl-display-flex gl-align-items-center gl-mr-3">
-        <gl-link :href="packageLink" class="gl-text-body" data-qa-selector="package_link">
-          {{ packageEntity.name }}
+      <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0">
+        <gl-link
+          :href="packageLink"
+          class="gl-text-body gl-min-w-0"
+          data-qa-selector="package_link"
+        >
+          <gl-truncate :text="packageEntity.name" />
         </gl-link>
 
         <package-tags
@@ -88,14 +93,14 @@ export default {
         </div>
 
         <div v-if="hasProjectLink" class="gl-display-flex gl-align-items-center">
-          <gl-icon name="review-list" class="gl-ml-3 gl-mr-2" />
+          <gl-icon name="review-list" class="gl-ml-3 gl-mr-2 gl-min-w-0" />
 
           <gl-link
-            class="gl-text-body"
+            class="gl-text-body gl-min-w-0"
             data-testid="packages-row-project"
             :href="`/${packageEntity.project_path}`"
           >
-            {{ packageEntity.projectPathName }}
+            <gl-truncate :text="packageEntity.projectPathName" />
           </gl-link>
         </div>
 

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

@@ -5,40 +5,13 @@ export default {
   components: {
     GlSkeletonLoader,
   },
-  props: {
-    isGroup: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    desktopShapes() {
-      return this.isGroup ? this.$options.shapes.groups : this.$options.shapes.projects;
-    },
-    desktopHeight() {
-      return this.isGroup ? 38 : 54;
-    },
-    mobileHeight() {
-      return this.isGroup ? 160 : 170;
-    },
-  },
-  shapes: {
-    groups: [
-      { type: 'rect', width: '100', height: '10', x: '0', y: '15' },
-      { type: 'rect', width: '100', height: '10', x: '195', y: '15' },
-      { type: 'rect', width: '60', height: '10', x: '475', y: '15' },
-      { type: 'rect', width: '60', height: '10', x: '675', y: '15' },
-      { type: 'rect', width: '100', height: '10', x: '900', y: '15' },
-    ],
-    projects: [
+  shapes: [
     { type: 'rect', width: '220', height: '10', x: '0', y: '20' },
     { type: 'rect', width: '60', height: '10', x: '305', y: '20' },
     { type: 'rect', width: '60', height: '10', x: '535', y: '20' },
     { type: 'rect', width: '100', height: '10', x: '760', y: '20' },
     { type: 'rect', width: '30', height: '30', x: '970', y: '10', ref: 'button-loader' },
   ],
-  },
   rowsToRender: {
     mobile: 5,
     desktop: 20,
@@ -48,34 +21,35 @@ export default {
 
 <template>
   <div>
-    <div class="gl-display-sm-flex gl-flex-direction-column gl-display-md-none">
+    <div class="gl-flex-direction-column gl-display-sm-none" data-testid="mobile-loader">
       <gl-skeleton-loader
         v-for="index in $options.rowsToRender.mobile"
         :key="index"
         :width="500"
-        :height="mobileHeight"
+        :height="170"
         preserve-aspect-ratio="xMinYMax meet"
       >
         <rect width="500" height="10" x="0" y="15" rx="4" />
         <rect width="500" height="10" x="0" y="45" rx="4" />
         <rect width="500" height="10" x="0" y="75" rx="4" />
         <rect width="500" height="10" x="0" y="105" rx="4" />
-        <rect v-if="isGroup" width="500" height="10" x="0" y="135" rx="4" />
-        <rect v-else width="30" height="30" x="470" y="135" rx="4" />
+        <rect width="500" height="10" x="0" y="135" rx="4" />
       </gl-skeleton-loader>
     </div>
-
-    <div class="gl-display-none gl-display-md-flex gl-flex-direction-column">
+    <div
+      class="gl-display-none gl-display-sm-flex gl-flex-direction-column"
+      data-testid="desktop-loader"
+    >
       <gl-skeleton-loader
         v-for="index in $options.rowsToRender.desktop"
         :key="index"
         :width="1000"
-        :height="desktopHeight"
+        :height="54"
         preserve-aspect-ratio="xMinYMax meet"
       >
         <component
           :is="r.type"
-          v-for="(r, rIndex) in desktopShapes"
+          v-for="(r, rIndex) in $options.shapes"
           :key="rIndex"
           rx="4"
           v-bind="r"

app/assets/javascripts/vue_shared/components/registry/list_item.vue

@@ -65,11 +65,11 @@ export default {
         class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1"
       >
         <div
-          class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3"
+          class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3 gl-min-w-0 gl-flex-grow-1"
         >
           <div
             v-if="$slots['left-primary']"
-            class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6"
+            class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6 gl-min-w-0"
           >
             <slot name="left-primary"></slot>
             <gl-button
@@ -81,12 +81,15 @@ export default {
               @click="toggleDetails"
             />
           </div>
-          <div v-if="$slots['left-secondary']" class="gl-text-gray-500 gl-mt-1 gl-min-h-6">
+          <div
+            v-if="$slots['left-secondary']"
+            class="gl-text-gray-500 gl-mt-1 gl-min-h-6 gl-min-w-0 gl-flex-fill-1"
+          >
             <slot name="left-secondary"></slot>
           </div>
         </div>
         <div
-          class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500"
+          class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500 gl-flex-shrink-0"
         >
           <div
             v-if="$slots['right-primary']"

app/views/groups/packages/_legacy_package_list.haml

-- sort_value = @sort
-- sort_title = packages_sort_option_title(sort_value)
-
-- if @packages.any?
-  .d-flex.justify-content-end
-    .dropdown.inline.gl-mt-3.gl-mb-3.package-sort-dropdown
-      .btn-group{ role: 'group' }
-        .btn-group{ role: 'group' }
-          %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static', 'qa-selector': 'sort-dropdown-button' }, class: 'btn btn-default' }
-            = sort_title
-            = icon('chevron-down')
-          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
-            %li
-              = sortable_item(sort_title_created_date,      package_sort_path(sort: sort_value_recently_created),  sort_title)
-              = sortable_item(sort_title_name,              package_sort_path(sort: sort_value_name_desc),         sort_title)
-              = sortable_item(sort_title_project_name,      package_sort_path(sort: sort_value_project_name_desc), sort_title)
-              = sortable_item(sort_title_version,           package_sort_path(sort: sort_value_version_desc),      sort_title)
-              = sortable_item(sort_title_type,              package_sort_path(sort: sort_value_type_desc),         sort_title)
-        = packages_sort_direction_button(sort_value)
-
-  .table-holder
-    .gl-responsive-table-row.table-row-header.bg-secondary-50.px-2.border-top{ role: 'row' }
-      .table-section.section-30{ role: 'rowheader' }
-        = _('Name')
-      .table-section.section-20{ role: 'rowheader' }
-        = _('Project')
-      .table-section.section-20{ role: 'rowheader' }
-        = _('Version')
-      .table-section.section-10{ role: 'rowheader' }
-        = _('Type')
-      .table-section.section-20{ role: 'rowheader' }
-        = _('Created')
-    - @packages.each do |package|
-      .gl-responsive-table-row{ data: { 'qa-selector': 'package-row' } }
-        .table-section.section-30
-          .table-mobile-header{ role: "rowheader" }= _("Name")
-          .table-mobile-content.flex-truncate-parent
-            = link_to package.name, project_package_path(package.project, package), class: 'flex-truncate-child'
-        .table-section.section-20
-          .table-mobile-header{ role: "rowheader" }= _("Project")
-          .table-mobile-content
-            = link_to_project(package.project)
-        .table-section.section-20
-          .table-mobile-header{ role: "rowheader" }= _("Version")
-          .table-mobile-content
-            = package.version
-        .table-section.section-10
-          .table-mobile-header{ role: "rowheader" }= _("Type")
-          .table-mobile-content
-            = package.package_type
-        .table-section.section-20
-          .table-mobile-header{ role: "rowheader" }= _("Created")
-          .table-mobile-content
-            = time_ago_with_tooltip(package.created_at)
-    = paginate @packages, theme: "gitlab"
-- else
-  .row.empty-state
-    .col-12
-      = render 'shared/packages/no_packages'

app/views/groups/packages/index.html.haml

 - page_title _("Package Registry")
+- @content_class = "limit-container-width" unless fluid_layout
 
 .row
   .col-12

app/views/projects/packages/packages/index.html.haml

 - page_title _("Package Registry")
+- @content_class = "limit-container-width" unless fluid_layout
 
 .row
   .col-12

app/views/projects/packages/packages/show.html.haml

@@ -2,6 +2,7 @@
 - add_to_breadcrumbs @package.name, project_packages_path(@project)
 - breadcrumb_title @package.version
 - page_title _("Package Registry")
+- @content_class = "limit-container-width" unless fluid_layout
 
 .row
   .col-12

changelogs/unreleased/225467-package-registry-adjust-the-max-width-for-non-fluid-screens-to-be-.yml

+---
+title: 'Package Registry: Adjust the max width for non-fluid screens to be 990'
+merge_request: 41549
+author:
+type: changed

spec/frontend/packages/mock_data.js

@@ -30,6 +30,7 @@ export const mavenPackage = {
   name: 'Test package',
   package_type: 'maven',
   project_path: 'foo/bar/baz',
+  projectPathName: 'foo/bar/baz',
   project_id: 1,
   updated_at: '2015-12-10',
   version: '1.0.0',
@@ -59,6 +60,7 @@ export const npmPackage = {
   name: '@Test/package',
   package_type: 'npm',
   project_path: 'foo/bar/baz',
+  projectPathName: 'foo/bar/baz',
   project_id: 1,
   updated_at: '2015-12-10',
   version: '',
@@ -86,6 +88,7 @@ export const conanPackage = {
   id: 3,
   name: 'conan-package',
   project_path: 'foo/bar/baz',
+  projectPathName: 'foo/bar/baz',
   package_files: [],
   package_type: 'conan',
   project_id: 1,

spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap

@@ -14,22 +14,23 @@ exports[`packages_list_row renders 1`] = `
       class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1"
     >
       <div
-        class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3"
+        class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3 gl-min-w-0 gl-flex-grow-1"
       >
         <div
-          class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6"
+          class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6 gl-min-w-0"
         >
           <div
-            class="gl-display-flex gl-align-items-center gl-mr-3"
+            class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0"
           >
             <gl-link-stub
-              class="gl-text-body"
+              class="gl-text-body gl-min-w-0"
               data-qa-selector="package_link"
               href="foo"
             >
-              
-        Test package
-      
+              <gl-truncate-stub
+                position="end"
+                text="Test package"
+              />
             </gl-link-stub>
              
             <!---->
@@ -39,7 +40,7 @@ exports[`packages_list_row renders 1`] = `
         </div>
          
         <div
-          class="gl-text-gray-500 gl-mt-1 gl-min-h-6"
+          class="gl-text-gray-500 gl-mt-1 gl-min-h-6 gl-min-w-0 gl-flex-fill-1"
         >
           <div
             class="gl-display-flex"
@@ -54,19 +55,20 @@ exports[`packages_list_row renders 1`] = `
               class="gl-display-flex gl-align-items-center"
             >
               <gl-icon-stub
-                class="gl-ml-3 gl-mr-2"
+                class="gl-ml-3 gl-mr-2 gl-min-w-0"
                 name="review-list"
                 size="16"
               />
                
               <gl-link-stub
-                class="gl-text-body"
+                class="gl-text-body gl-min-w-0"
                 data-testid="packages-row-project"
                 href="/foo/bar/baz"
               >
-                
-          
-        
+                <gl-truncate-stub
+                  position="end"
+                  text="foo/bar/baz"
+                />
               </gl-link-stub>
             </div>
              
@@ -89,7 +91,7 @@ exports[`packages_list_row renders 1`] = `
       </div>
        
       <div
-        class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500"
+        class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500 gl-flex-shrink-0"
       >
         <div
           class="gl-sm-text-body gl-sm-font-weight-bold gl-min-h-6"

spec/frontend/packages/shared/components/packages_list_loader_spec.js

@@ -12,8 +12,8 @@ describe('PackagesListLoader', () => {
     });
   };
 
-  const getShapes = () => wrapper.vm.desktopShapes;
-  const findSquareButton = () => wrapper.find({ ref: 'button-loader' });
+  const findDesktopShapes = () => wrapper.find('[data-testid="desktop-loader"]');
+  const findMobileShapes = () => wrapper.find('[data-testid="mobile-loader"]');
 
   beforeEach(createComponent);
 
@@ -22,21 +22,30 @@ describe('PackagesListLoader', () => {
     wrapper = null;
   });
 
-  describe('when used for projects', () => {
-    it('should return 5 rects with last one being a square', () => {
-      expect(getShapes()).toHaveLength(5);
-      expect(findSquareButton().exists()).toBe(true);
+  describe('desktop loader', () => {
+    it('produces the right loader', () => {
+      expect(findDesktopShapes().findAll('rect[width="1000"]')).toHaveLength(20);
+    });
+
+    it('has the correct classes', () => {
+      expect(findDesktopShapes().classes()).toEqual([
+        'gl-display-none',
+        'gl-display-sm-flex',
+        'gl-flex-direction-column',
+      ]);
     });
   });
 
-  describe('when used for groups', () => {
-    beforeEach(() => {
-      createComponent({ isGroup: true });
+  describe('mobile loader', () => {
+    it('produces the right loader', () => {
+      expect(findMobileShapes().findAll('rect[height="170"]')).toHaveLength(5);
     });
 
-    it('should return 5 rects with no square', () => {
-      expect(getShapes()).toHaveLength(5);
-      expect(findSquareButton().exists()).toBe(false);
+    it('has the correct classes', () => {
+      expect(findMobileShapes().classes()).toEqual([
+        'gl-flex-direction-column',
+        'gl-display-sm-none',
+      ]);
     });
   });
 });