Add commit column to package files table

- source
- tests

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

 <script>
 import { GlLink, GlTable } from '@gitlab/ui';
+import { last } from 'lodash';
 import { __ } from '~/locale';
 import Tracking from '~/tracking';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
@@ -27,30 +28,41 @@ export default {
       return this.packageFiles.map(pf => ({
         ...pf,
         size: this.formatSize(pf.size),
+        pipeline: last(pf.pipelines),
       }));
     },
+    showCommitColumn() {
+      return this.filesTableRows.some(row => Boolean(row.pipeline?.id));
+    },
+    filesTableHeaderFields() {
+      return [
+        {
+          key: 'name',
+          label: __('Name'),
+          tdClass: 'gl-display-flex gl-align-items-center',
+        },
+        {
+          key: 'commit',
+          label: __('Commit'),
+          hide: !this.showCommitColumn,
+        },
+        {
+          key: 'size',
+          label: __('Size'),
+        },
+        {
+          key: 'created',
+          label: __('Created'),
+          class: 'gl-text-right',
+        },
+      ].filter(c => !c.hide);
+    },
   },
   methods: {
     formatSize(size) {
       return numberToHumanSize(size);
     },
   },
-  filesTableHeaderFields: [
-    {
-      key: 'name',
-      label: __('Name'),
-      tdClass: 'gl-display-flex gl-align-items-center',
-    },
-    {
-      key: 'size',
-      label: __('Size'),
-    },
-    {
-      key: 'created',
-      label: __('Created'),
-      class: 'gl-text-right',
-    },
-  ],
 };
 </script>
 
@@ -58,14 +70,14 @@ export default {
   <div>
     <h3 class="gl-font-lg gl-mt-5">{{ __('Files') }}</h3>
     <gl-table
-      :fields="$options.filesTableHeaderFields"
+      :fields="filesTableHeaderFields"
       :items="filesTableRows"
       :tbody-tr-attr="{ 'data-testid': 'file-row' }"
     >
       <template #cell(name)="{ item }">
         <gl-link
           :href="item.download_path"
-          class="gl-relative"
+          class="gl-relative gl-text-gray-500"
           data-testid="download-link"
           @click="$emit('download-file')"
         >
@@ -78,6 +90,15 @@ export default {
         </gl-link>
       </template>
 
+      <template #cell(commit)="{item}">
+        <gl-link
+          :href="item.pipeline.project.commit_url"
+          class="gl-text-gray-500"
+          data-testid="commit-link"
+          >{{ item.pipeline.git_commit_message }}</gl-link
+        >
+      </template>
+
       <template #cell(created)="{ item }">
         <time-ago-tooltip :time="item.created_at" />
       </template>

changelogs/unreleased/239518-package-details-not-updating-when-the-same-version-is-deployed-fro.yml

+---
+title: Update package_file table to display commits when present
+merge_request: 48882
+author:
+type: changed

spec/frontend/packages/details/components/package_files_spec.js

@@ -12,6 +12,7 @@ describe('Package Files', () => {
   const findAllRows = () => wrapper.findAll('[data-testid="file-row"');
   const findFirstRow = () => findAllRows().at(0);
   const findFirstRowDownloadLink = () => findFirstRow().find('[data-testid="download-link"');
+  const findFirstRowCommitLink = () => findFirstRow().find('[data-testid="commit-link"');
   const findFirstRowFileIcon = () => findFirstRow().find(FileIcon);
   const findFirstRowCreatedAt = () => findFirstRow().find(TimeAgoTooltip);
 
@@ -96,4 +97,35 @@ describe('Package Files', () => {
       expect(findFirstRowCreatedAt().props('time')).toBe(npmFiles[0].created_at);
     });
   });
+
+  describe('commit', () => {
+    describe('when package file has a pipeline associated', () => {
+      it('exists', () => {
+        createComponent();
+
+        expect(findFirstRowCommitLink().exists()).toBe(true);
+      });
+
+      it('the link points to the commit url', () => {
+        createComponent();
+
+        expect(findFirstRowCommitLink().attributes('href')).toBe(
+          npmFiles[0].pipelines[0].project.commit_url,
+        );
+      });
+
+      it('the text is git_commit_message', () => {
+        createComponent();
+
+        expect(findFirstRowCommitLink().text()).toBe(npmFiles[0].pipelines[0].git_commit_message);
+      });
+    });
+    describe('when package file has no pipeline associated', () => {
+      it('does not exist', () => {
+        createComponent(mavenFiles);
+
+        expect(findFirstRowCommitLink().exists()).toBe(false);
+      });
+    });
+  });
 });

spec/frontend/packages/mock_data.js

@@ -76,6 +76,9 @@ export const npmFiles = [
     id: 2,
     size: 200,
     download_path: '/-/package_files/2/download',
+    pipelines: [
+      { id: 1, project: { commit_url: 'http://foo.bar' }, git_commit_message: 'foo bar baz?' },
+    ],
   },
 ];