From d5b23612c2f6e7b4b0bcc9a76f4d4cb9798bbea4 Mon Sep 17 00:00:00 2001
From: Phil Kuang <pkuang@factset.com>
Date: Mon, 13 Sep 2021 11:27:16 -0400
Subject: [PATCH] feat(EntityLayout): display title field if defined

Signed-off-by: Phil Kuang <pkuang@factset.com>
---
 .changeset/unlucky-tables-repair.md           |  5 ++++
 .../EntityLayout/EntityLayout.test.tsx        | 30 +++++++++++++++++++
 .../components/EntityLayout/EntityLayout.tsx  |  3 +-
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/unlucky-tables-repair.md

diff --git a/.changeset/unlucky-tables-repair.md b/.changeset/unlucky-tables-repair.md
new file mode 100644
index 0000000000..ed1222b6d6
--- /dev/null
+++ b/.changeset/unlucky-tables-repair.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Display entity titles on `EntityLayout` if defined
diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
index f9faa3f90f..b61d8bc10c 100644
--- a/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
+++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
@@ -61,6 +61,36 @@ describe('EntityLayout', () => {
     expect(rendered.getByText('tabbed-test-content')).toBeInTheDocument();
   });
 
+  it('renders the entity title if defined', async () => {
+    const mockEntityDataWithTitle = {
+      loading: false,
+      error: undefined,
+      entity: {
+        kind: 'MyKind',
+        metadata: {
+          name: 'my-entity',
+          title: 'My Entity',
+        },
+      } as Entity,
+    };
+
+    const rendered = await renderInTestApp(
+      <ApiProvider apis={mockApis}>
+        <EntityContext.Provider value={mockEntityDataWithTitle}>
+          <EntityLayout>
+            <EntityLayout.Route path="/" title="tabbed-test-title">
+              <div>tabbed-test-content</div>
+            </EntityLayout.Route>
+          </EntityLayout>
+        </EntityContext.Provider>
+      </ApiProvider>,
+    );
+
+    expect(rendered.getByText('My Entity')).toBeInTheDocument();
+    expect(rendered.getByText('tabbed-test-title')).toBeInTheDocument();
+    expect(rendered.getByText('tabbed-test-content')).toBeInTheDocument();
+  });
+
   it('renders error message when entity is not found', async () => {
     const noEntityData = {
       ...mockEntityData,
diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
index 4eec0d5341..c5679355e5 100644
--- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
+++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
@@ -94,7 +94,8 @@ const headerProps = (
 ): { headerTitle: string; headerType: string } => {
   const kind = paramKind ?? entity?.kind ?? '';
   const namespace = paramNamespace ?? entity?.metadata.namespace ?? '';
-  const name = paramName ?? entity?.metadata.name ?? '';
+  const name =
+    entity?.metadata.title ?? paramName ?? entity?.metadata.name ?? '';
   return {
     headerTitle: `${name}${
       namespace && namespace !== ENTITY_DEFAULT_NAMESPACE