Show the parent component in the about card (via partOf relationship)

.changeset/few-geckos-shout.md

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

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"