From 36a0f6e0a6bafb3bc717815fe8dbfd516ced7f90 Mon Sep 17 00:00:00 2001
From: Chris Langhout <clanghout@bol.com>
Date: Tue, 25 Apr 2023 10:49:06 +0200
Subject: [PATCH] feat: allow custom title for DomainCard

Signed-off-by: Chris Langhout <clanghout@bol.com>
---
 .../components/DomainCard/DomainCard.test.tsx | 27 +++++++++++++++++++
 .../src/components/DomainCard/DomainCard.tsx  |  7 +++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/plugins/explore/src/components/DomainCard/DomainCard.test.tsx b/plugins/explore/src/components/DomainCard/DomainCard.test.tsx
index df9b84820a..cb0fd8b473 100644
--- a/plugins/explore/src/components/DomainCard/DomainCard.test.tsx
+++ b/plugins/explore/src/components/DomainCard/DomainCard.test.tsx
@@ -51,4 +51,31 @@ describe('<DomainCard />', () => {
       '/catalog/default/domain/artists',
     );
   });
+
+  it('renders a domain card with custom title', async () => {
+    const entity: DomainEntity = {
+      apiVersion: 'backstage.io/v1alpha1',
+      kind: 'Domain',
+      metadata: {
+        name: 'artists',
+      },
+      spec: {
+        owner: 'guest',
+      },
+    };
+    const { getByText } = await renderInTestApp(
+      <DomainCard entity={entity} title="my Custom Title" />,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
+    );
+
+    expect(getByText('Explore').parentElement).toHaveAttribute(
+      'href',
+      '/catalog/default/domain/artists',
+    );
+    expect(getByText('my Custom Title')).toBeInTheDocument();
+  });
 });
diff --git a/plugins/explore/src/components/DomainCard/DomainCard.tsx b/plugins/explore/src/components/DomainCard/DomainCard.tsx
index 0d37e3e273..f5327ea4e0 100644
--- a/plugins/explore/src/components/DomainCard/DomainCard.tsx
+++ b/plugins/explore/src/components/DomainCard/DomainCard.tsx
@@ -35,7 +35,7 @@ import { LinkButton, ItemCardHeader } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
 /** @public */
-export const DomainCard = (props: { entity: DomainEntity }) => {
+export const DomainCard = (props: { entity: DomainEntity; title?: string }) => {
   const { entity } = props;
 
   const catalogEntityRoute = useRouteRef(entityRouteRef);
@@ -53,7 +53,10 @@ export const DomainCard = (props: { entity: DomainEntity }) => {
   return (
     <Card>
       <CardMedia>
-        <ItemCardHeader title={entity.metadata.name} subtitle={owner} />
+        <ItemCardHeader
+          title={props.title ?? entity.metadata.name}
+          subtitle={owner}
+        />
       </CardMedia>
       <CardContent>
         {entity.metadata.tags?.length ? (