Update table registry column label

- updated label
- add ref for testing purposes
- test that the change is present
- pot updated
- changelog

app/assets/javascripts/registry/components/table_registry.vue

@@ -196,7 +196,7 @@ export default {
             />
           </th>
           <th>{{ s__('ContainerRegistry|Tag') }}</th>
-          <th>{{ s__('ContainerRegistry|Tag ID') }}</th>
+          <th ref="imageId">{{ s__('ContainerRegistry|Image ID') }}</th>
           <th>{{ s__('ContainerRegistry|Size') }}</th>
           <th>{{ s__('ContainerRegistry|Last Updated') }}</th>
           <th>

changelogs/unreleased/35873-update-container-registry-ui-to-display-correct-column-names.yml

+---
+title: Change container registry column name from Tag ID to Image ID
+merge_request: 20349
+author:
+type: fixed

locale/gitlab.pot

@@ -4560,6 +4560,9 @@ msgstr ""
 msgid "ContainerRegistry|If you are not already logged in, you need to authenticate to the Container Registry by using your GitLab username and password. If you have %{twofaDocLinkStart}Two-Factor Authentication%{twofaDocLinkEnd} enabled, use a %{personalAccessTokensDocLinkStart}Personal Access Token%{personalAccessTokensDocLinkEnd} instead of a password."
 msgstr ""
 
+msgid "ContainerRegistry|Image ID"
+msgstr ""
+
 msgid "ContainerRegistry|Last Updated"
 msgstr ""
 
@@ -4583,9 +4586,6 @@ msgstr ""
 msgid "ContainerRegistry|Tag"
 msgstr ""
 
-msgid "ContainerRegistry|Tag ID"
-msgstr ""
-
 msgid "ContainerRegistry|The last tag related to this image was recently removed. This empty image and any associated data will be automatically removed as part of the regular Garbage Collection process. If you have any questions, contact your administrator."
 msgstr ""
 

spec/frontend/registry/components/table_registry_spec.js

@@ -25,6 +25,7 @@ describe('table registry', () => {
   const findDeleteButtonsRow = (w = wrapper) => w.findAll('.js-delete-registry-row');
   const findPagination = (w = wrapper) => w.find('.js-registry-pagination');
   const findDeleteModal = (w = wrapper) => w.find({ ref: 'deleteModal' });
+  const findImageId = (w = wrapper) => w.find({ ref: 'imageId' });
   const bulkDeletePath = 'path';
 
   const mountWithStore = config => mount(tableRegistry, { ...config, store, localVue });
@@ -68,6 +69,15 @@ describe('table registry', () => {
       expect(tds.at(3).html()).toContain(repoPropsData.list[0].size);
       expect(tds.at(4).html()).toContain(wrapper.vm.timeFormated(repoPropsData.list[0].createdAt));
     });
+
+    it('should have a label called Image ID', () => {
+      const label = findImageId();
+      expect(label.element).toMatchInlineSnapshot(`
+        <th>
+          Image ID
+        </th>
+      `);
+    });
   });
 
   describe('multi select', () => {