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( + + + + +
tabbed-test-content
+
+
+
+
, + ); + + 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