Fetch only the last pipeline on package list

app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue

 <script>
 import { GlButton, GlLink, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 import ListItem from '~/vue_shared/components/registry/list_item.vue';
 import {
   PACKAGE_ERROR_STATUS,
@@ -64,6 +64,7 @@ export default {
   },
   i18n: {
     erroredPackageText: s__('PackageRegistry|Invalid Package: failed metadata extraction'),
+    createdAt: __('Created %{timestamp}'),
   },
 };
 </script>
@@ -127,8 +128,8 @@ export default {
     </template>
 
     <template #right-secondary>
-      <span>
-        <gl-sprintf :message="__('Created %{timestamp}')">
+      <span data-testid="created-date">
+        <gl-sprintf :message="$options.i18n.createdAt">
           <template #timestamp>
             <timeago-tooltip :time="packageEntity.createdAt" />
           </template>

app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql

@@ -10,7 +10,7 @@ fragment PackageData on Package {
       name
     }
   }
-  pipelines {
+  pipelines(last: 1) {
     nodes {
       sha
       ref

spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap

@@ -77,7 +77,9 @@ exports[`packages_list_row renders 1`] = `
         <div
           class="gl-display-flex gl-align-items-center gl-min-h-6"
         >
-          <span>
+          <span
+            data-testid="created-date"
+          >
             Created 
             <timeago-tooltip-stub
               cssclass=""

spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js

@@ -6,6 +6,8 @@ import PackagesListRow from '~/packages_and_registries/package_registry/componen
 import PackagePath from '~/packages/shared/components/package_path.vue';
 import PackageTags from '~/packages/shared/components/package_tags.vue';
 import PackageIconAndName from '~/packages/shared/components/package_icon_and_name.vue';
+import PublishMethod from '~/packages_and_registries/package_registry/components/list/publish_method.vue';
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { PACKAGE_ERROR_STATUS } from '~/packages_and_registries/package_registry/constants';
 
 import ListItem from '~/vue_shared/components/registry/list_item.vue';
@@ -29,6 +31,9 @@ describe('packages_list_row', () => {
   const findPackageLink = () => wrapper.findComponent(GlLink);
   const findWarningIcon = () => wrapper.findByTestId('warning-icon');
   const findLeftSecondaryInfos = () => wrapper.findByTestId('left-secondary-infos');
+  const findPublishMethod = () => wrapper.findComponent(PublishMethod);
+  const findCreatedDateText = () => wrapper.findByTestId('created-date');
+  const findTimeAgoTooltip = () => wrapper.findComponent(TimeagoTooltip);
 
   const mountComponent = ({
     packageEntity = packageWithoutTags,
@@ -153,4 +158,23 @@ describe('packages_list_row', () => {
       expect(findPackageIconAndName().text()).toBe(packageWithoutTags.packageType.toLowerCase());
     });
   });
+
+  describe('right info', () => {
+    it('has publish method component', () => {
+      mountComponent({
+        packageEntity: { ...packageWithoutTags, pipelines: { nodes: packagePipelines() } },
+      });
+
+      expect(findPublishMethod().props('pipeline')).toEqual(packagePipelines()[0]);
+    });
+
+    it('has the created date', () => {
+      mountComponent();
+
+      expect(findCreatedDateText().text()).toMatchInterpolatedText(PackagesListRow.i18n.createdAt);
+      expect(findTimeAgoTooltip().props()).toMatchObject({
+        time: packageData().createdAt,
+      });
+    });
+  });
 });