Add component names to resource item

We are adding component names to the CI/CD Catalog list items

Changelog: changed

app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue

@@ -8,6 +8,7 @@ import { CI_RESOURCE_DETAILS_PAGE_NAME } from '../../router/constants';
 
 export default {
   i18n: {
+    components: s__('CiCatalog|Components:'),
     unreleased: s__('CiCatalog|Unreleased'),
     releasedMessage: s__('CiCatalog|Released %{timeAgo} by %{author}'),
   },
@@ -34,8 +35,12 @@ export default {
     authorProfileUrl() {
       return this.latestVersion.author.webUrl;
     },
-    resourceId() {
-      return cleanLeadingSeparator(this.resource.webPath);
+    componentNames() {
+      const components = this.resource.latestVersion?.components?.nodes;
+      return components?.map((component) => component.name).join(', ') || null;
+    },
+    detailsPageHref() {
+      return decodeURIComponent(this.detailsPageResolved.href);
     },
     detailsPageResolved() {
       return this.$router.resolve({
@@ -43,32 +48,35 @@ export default {
         params: { id: this.resourceId },
       });
     },
-    detailsPageHref() {
-      return decodeURIComponent(this.detailsPageResolved.href);
-    },
     entityId() {
       return getIdFromGraphQLId(this.resource.id);
     },
-    starCount() {
-      return this.resource?.starCount || 0;
+    formattedDate() {
+      return formatDate(this.latestVersion?.releasedAt);
     },
-    starCountText() {
-      return n__('Star', 'Stars', this.starCount);
+    hasComponents() {
+      return Boolean(this.componentNames);
     },
     hasReleasedVersion() {
       return Boolean(this.latestVersion?.releasedAt);
     },
-    formattedDate() {
-      return formatDate(this.latestVersion?.releasedAt);
-    },
     latestVersion() {
       return this.resource?.latestVersion || {};
     },
+    name() {
+      return this.latestVersion?.name || this.$options.i18n.unreleased;
+    },
     releasedAt() {
       return getTimeago().format(this.latestVersion?.releasedAt);
     },
-    name() {
-      return this.latestVersion?.name || this.$options.i18n.unreleased;
+    resourceId() {
+      return cleanLeadingSeparator(this.resource.webPath);
+    },
+    starCount() {
+      return this.resource?.starCount || 0;
+    },
+    starCountText() {
+      return n__('Star', 'Stars', this.starCount);
     },
     webPath() {
       return cleanLeadingSeparator(this.resource?.webPath);
@@ -152,6 +160,14 @@ export default {
           </span>
         </div>
       </div>
+      <div
+        v-if="hasComponents"
+        data-testid="ci-resource-component-names"
+        class="gl-font-sm gl-mt-1"
+      >
+        <span class="gl-font-weight-bold"> &#8226; {{ $options.i18n.components }} </span>
+        <span class="gl-text-gray-900">{{ componentNames }}</span>
+      </div>
     </div>
   </li>
 </template>

app/assets/javascripts/ci/catalog/graphql/fragments/catalog_resource.fragment.graphql

@@ -7,6 +7,12 @@ fragment CatalogResourceFields on CiCatalogResource {
   starCount
   latestVersion {
     id
+    components {
+      nodes {
+        id
+        name
+      }
+    }
     name
     path
     releasedAt

locale/gitlab.pot

@@ -10484,6 +10484,9 @@ msgstr ""
 msgid "CiCatalog|Components"
 msgstr ""
+msgid "CiCatalog|Components:"
+msgstr ""
+
 msgid "CiCatalog|Create a pipeline component repository and make reusing pipeline configurations faster and easier."
 msgstr ""

spec/frontend/ci/catalog/components/list/ci_resources_list_item_spec.js

@@ -18,6 +18,20 @@ describe('CiResourcesListItem', () => {
 
   const router = createRouter();
   const resource = catalogSinglePageResponse.data.ciCatalogResources.nodes[0];
+  const componentList = {
+    components: {
+      nodes: [
+        {
+          id: 'gid://gitlab/Ci::Catalog::Resources::Component/2',
+          name: 'test-component',
+        },
+        {
+          id: 'gid://gitlab/Ci::Catalog::Resources::Component/1',
+          name: 'component_two',
+        },
+      ],
+    },
+  };
   const release = {
     author: { name: 'author', webUrl: '/user/1' },
     releasedAt: Date.now(),
@@ -42,6 +56,7 @@ describe('CiResourcesListItem', () => {
 
   const findAvatar = () => wrapper.findComponent(GlAvatar);
   const findBadge = () => wrapper.findComponent(GlBadge);
+  const findComponentNames = () => wrapper.findByTestId('ci-resource-component-names');
   const findResourceName = () => wrapper.findByTestId('ci-resource-link');
   const findResourceDescription = () => wrapper.findByText(defaultProps.resource.description);
   const findUserLink = () => wrapper.findByTestId('user-link');
@@ -82,6 +97,35 @@ describe('CiResourcesListItem', () => {
     });
   });
 
+  describe('components', () => {
+    describe('when there are no components', () => {
+      beforeEach(() => {
+        createComponent({ props: { resource: { ...resource, latestVersion: null } } });
+      });
+
+      it('does not render the component names', () => {
+        expect(findComponentNames().exists()).toBe(false);
+      });
+    });
+
+    describe('when there are components', () => {
+      beforeEach(() => {
+        createComponent({
+          props: { resource: { ...resource, latestVersion: { ...componentList, ...release } } },
+        });
+      });
+
+      it('renders the component name template', () => {
+        expect(findComponentNames().exists()).toBe(true);
+      });
+
+      it('renders the correct component names', () => {
+        expect(findComponentNames().text()).toContain(componentList.components.nodes[0].name);
+        expect(findComponentNames().text()).toContain(componentList.components.nodes[1].name);
+      });
+    });
+  });
+
   describe('release time', () => {
     describe('when there is no release data', () => {
       beforeEach(() => {

spec/frontend/ci/catalog/mock.js

+const componentsDetailsMockData = {
+  __typename: 'CiComponentConnection',
+  nodes: [
+    {
+      id: 'gid://gitlab/Ci::Component/1',
+      name: 'Ruby gal',
+      description: 'This is a pretty amazing component that does EVERYTHING ruby.',
+      includePath: 'gitlab.com/gitlab-org/ruby-gal@~latest',
+      inputs: [{ name: 'version', default: '1.0.0', required: true }],
+    },
+    {
+      id: 'gid://gitlab/Ci::Component/2',
+      name: 'Javascript madness',
+      description: 'Adds some spice to your life.',
+      includePath: 'gitlab.com/gitlab-org/javascript-madness@~latest',
+      inputs: [
+        { name: 'isFun', default: 'true', required: true },
+        { name: 'RandomNumber', default: '10', required: false },
+      ],
+    },
+    {
+      id: 'gid://gitlab/Ci::Component/3',
+      name: 'Go go go',
+      description: 'When you write Go, you gotta go go go.',
+      includePath: 'gitlab.com/gitlab-org/go-go-go@~latest',
+      inputs: [{ name: 'version', default: '1.0.0', required: true }],
+    },
+  ],
+};
+
+const componentsListMockData = {
+  nodes: [
+    {
+      id: 'gid://gitlab/Ci::Catalog::Resources::Component/2',
+      name: 'test-component',
+      __typename: 'CiCatalogResourceComponent',
+    },
+    {
+      id: 'gid://gitlab/Ci::Catalog::Resources::Component/1',
+      name: 'component_two',
+      __typename: 'CiCatalogResourceComponent',
+    },
+  ],
+  __typename: 'CiCatalogResourceComponentConnection',
+};
+
 export const emptyCatalogResponseBody = {
   data: {
     ciCatalogResources: {
@@ -268,7 +314,13 @@ export const catalogSinglePageResponse = {
           name: 'Project-45 Name',
           description: 'A simple component',
           starCount: 0,
-          latestVersion: null,
+          latestVersion: {
+            id: 'gid://gitlab/Ci::Catalog::Resources::Version/2',
+            components: {
+              ...componentsListMockData,
+            },
+            __typename: 'CiCatalogResourceVersion',
+          },
           webPath: '/frontend-fixtures/project-45',
           __typename: 'CiCatalogResource',
         },
@@ -310,6 +362,7 @@ export const catalogSharedDataMock = {
       latestVersion: {
         __typename: 'Release',
         id: '3',
+        components: componentsListMockData,
         name: '1.0.0',
         path: 'path/to/release',
         releasedAt: Date.now(),
@@ -378,6 +431,9 @@ const generateResourcesNodes = (count = 20, startId = 0) => {
       latestVersion: {
         __typename: 'Release',
         id: '3',
+        components: {
+          ...componentsListMockData,
+        },
         name: '1.0.0',
         path: 'path/to/release',
         releasedAt: Date.now(),
@@ -392,36 +448,6 @@ const generateResourcesNodes = (count = 20, startId = 0) => {
 
 export const mockCatalogResourceItem = generateResourcesNodes(1)[0];
 
-const componentsMockData = {
-  __typename: 'CiComponentConnection',
-  nodes: [
-    {
-      id: 'gid://gitlab/Ci::Component/1',
-      name: 'Ruby gal',
-      description: 'This is a pretty amazing component that does EVERYTHING ruby.',
-      includePath: 'gitlab.com/gitlab-org/ruby-gal@~latest',
-      inputs: [{ name: 'version', default: '1.0.0', required: true }],
-    },
-    {
-      id: 'gid://gitlab/Ci::Component/2',
-      name: 'Javascript madness',
-      description: 'Adds some spice to your life.',
-      includePath: 'gitlab.com/gitlab-org/javascript-madness@~latest',
-      inputs: [
-        { name: 'isFun', default: 'true', required: true },
-        { name: 'RandomNumber', default: '10', required: false },
-      ],
-    },
-    {
-      id: 'gid://gitlab/Ci::Component/3',
-      name: 'Go go go',
-      description: 'When you write Go, you gotta go go go.',
-      includePath: 'gitlab.com/gitlab-org/go-go-go@~latest',
-      inputs: [{ name: 'version', default: '1.0.0', required: true }],
-    },
-  ],
-};
-
 export const mockComponents = {
   data: {
     ciCatalogResource: {
@@ -431,7 +457,7 @@ export const mockComponents = {
       latestVersion: {
         id: 'gid://gitlab/Version/1',
         components: {
-          ...componentsMockData,
+          ...componentsDetailsMockData,
         },
       },
     },