Hide the entity kind for systems

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

@@ -50,10 +50,12 @@ export const AboutContent = ({ entity }: Props) => {
         </Typography>
       </AboutField>
       <AboutField label="Owner" gridSizes={{ xs: 12, sm: 6, lg: 4 }}>
-        {ownedByRelations.map((t, i) => [
-          i > 0 && ', ',
-          <EntityRefLink key={i} entityRef={t} />,
-        ])}
+        {ownedByRelations.map((t, i) => (
+          <React.Fragment key={i}>
+            {i > 0 && ', '}
+            <EntityRefLink entityRef={t} />
+          </React.Fragment>
+        ))}
       </AboutField>
       <AboutField
         label="System"
@@ -61,7 +63,10 @@ export const AboutContent = ({ entity }: Props) => {
         gridSizes={{ xs: 12, sm: 6, lg: 4 }}
       >
         {partOfSystemRelation && (
-          <EntityRefLink entityRef={partOfSystemRelation} />
+          <EntityRefLink
+            entityRef={partOfSystemRelation}
+            defaultKind="system"
+          />
         )}
       </AboutField>
       <AboutField

plugins/catalog/src/components/EntityRefLink/EntityRefLink.test.tsx

@@ -60,6 +60,29 @@ describe('<EntityRefLink />', () => {
     expect(getByText('component:test/software')).toBeInTheDocument();
   });
 
+  it('renders link for entity and hides default kind', () => {
+    const entity = {
+      apiVersion: 'v1',
+      kind: 'Component',
+      metadata: {
+        name: 'software',
+        namespace: 'test',
+      },
+      spec: {
+        owner: 'guest',
+        type: 'service',
+        lifecycle: 'production',
+      },
+    };
+    const { getByText } = render(
+      <EntityRefLink entityRef={entity} defaultKind="Component" />,
+      {
+        wrapper: MemoryRouter,
+      },
+    );
+    expect(getByText('test/software')).toBeInTheDocument();
+  });
+
   it('renders link for entity name in default namespace', () => {
     const entityName = {
       kind: 'Component',
@@ -83,4 +106,19 @@ describe('<EntityRefLink />', () => {
     });
     expect(getByText('component:test/software')).toBeInTheDocument();
   });
+
+  it('renders link for entity name and hides default kind', () => {
+    const entityName = {
+      kind: 'Component',
+      namespace: 'test',
+      name: 'software',
+    };
+    const { getByText } = render(
+      <EntityRefLink entityRef={entityName} defaultKind="component" />,
+      {
+        wrapper: MemoryRouter,
+      },
+    );
+    expect(getByText('test/software')).toBeInTheDocument();
+  });
 });

plugins/catalog/src/components/EntityRefLink/EntityRefLink.tsx

@@ -27,12 +27,16 @@ import { entityRoute } from '../../routes';
 
 type EntityRefLinkProps = {
   entityRef: Entity | EntityName;
+  defaultKind?: string;
 };
 
 // TODO: This component is private for now, as it should probably belong into
 // some kind of helper module for the catalog plugin to avoid a dependency on
 // the catalog plugin itself.
-export const EntityRefLink = ({ entityRef }: EntityRefLinkProps) => {
+export const EntityRefLink = ({
+  entityRef,
+  defaultKind,
+}: EntityRefLinkProps) => {
   let kind;
   let namespace;
   let name;
@@ -54,7 +58,7 @@ export const EntityRefLink = ({ entityRef }: EntityRefLinkProps) => {
   kind = kind.toLowerCase();
 
   const title = `${serializeEntityRef({
-    kind,
+    kind: defaultKind && defaultKind.toLowerCase() === kind ? undefined : kind,
     name,
     namespace,
   })}`;
@@ -64,6 +68,7 @@ export const EntityRefLink = ({ entityRef }: EntityRefLinkProps) => {
     name,
   };
 
+  // TODO: Use useRouteRef here to generate the path
   return (
     <Link
       component={RouterLink}