Merge pull request #4196 from SDA-SE/feat/subcomponent-of-about-card

Show subcomponent in the about card

.changeset/few-geckos-shout.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Show the parent component in the about card (via partOf relationship)

packages/catalog-model/examples/all-components.yaml

@@ -15,4 +15,6 @@ spec:
     - ./components/www-artist-component.yaml
     - ./components/shuffle-api-component.yaml
     - ./components/wayback-archive-component.yaml
+    - ./components/wayback-archive-ingestion-component.yaml
+    - ./components/wayback-archive-storage-component.yaml
     - ./components/wayback-search-component.yaml

packages/catalog-model/examples/components/wayback-archive-ingestion-component.yaml

@@ -0,0 +1,10 @@
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: wayback-archive-ingestion
+  description: Ingestion subsystem of the Wayback Archive
+spec:
+  type: service
+  lifecycle: production
+  owner: team-d
+  subcomponentOf: wayback-archive

packages/catalog-model/examples/components/wayback-archive-storage-component.yaml

@@ -0,0 +1,10 @@
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: wayback-archive-storage
+  description: Storage subsystem of the Wayback Archive
+spec:
+  type: service
+  lifecycle: production
+  owner: team-a
+  subcomponentOf: wayback-archive

plugins/catalog/src/components/AboutCard/AboutContent.tsx

@@ -40,9 +40,17 @@ export const AboutContent = ({ entity }: Props) => {
   const isSystem = entity.kind.toLowerCase() === 'system';
   const isDomain = entity.kind.toLowerCase() === 'domain';
   const isResource = entity.kind.toLowerCase() === 'resource';
+  const isComponent = entity.kind.toLowerCase() === 'component';
   const [partOfSystemRelation] = getEntityRelations(entity, RELATION_PART_OF, {
     kind: 'system',
   });
+  const [partOfComponentRelation] = getEntityRelations(
+    entity,
+    RELATION_PART_OF,
+    {
+      kind: 'component',
+    },
+  );
   const [partOfDomainRelation] = getEntityRelations(entity, RELATION_PART_OF, {
     kind: 'domain',
   });
@@ -91,6 +99,18 @@ export const AboutContent = ({ entity }: Props) => {
           )}
         </AboutField>
       )}
+      {isComponent && partOfComponentRelation && (
+        <AboutField
+          label="Parent Component"
+          value="No Parent Component"
+          gridSizes={{ xs: 12, sm: 6, lg: 4 }}
+        >
+          <EntityRefLink
+            entityRef={partOfComponentRelation}
+            defaultKind="component"
+          />
+        </AboutField>
+      )}
       {!isSystem && !isDomain && (
         <AboutField
           label="Type"