diff --git a/.changeset/khaki-brooms-kiss.md b/.changeset/khaki-brooms-kiss.md
new file mode 100644
index 0000000000..76d4ff2cd2
--- /dev/null
+++ b/.changeset/khaki-brooms-kiss.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-explore': patch
+---
+
+Display the title of the entity on the explore card if present, otherwise stick to the name
diff --git a/packages/catalog-model/examples/domains/artists-domain.yaml b/packages/catalog-model/examples/domains/artists-domain.yaml
index 2a74425791..0dc1b91cb5 100644
--- a/packages/catalog-model/examples/domains/artists-domain.yaml
+++ b/packages/catalog-model/examples/domains/artists-domain.yaml
@@ -3,6 +3,7 @@ kind: Domain
metadata:
name: artists
description: Everything related to artists
+ title: Artists
links:
- url: http://example.com/domain/artists/
title: Domain Readme
diff --git a/plugins/explore/src/components/DomainCard/DomainCard.test.tsx b/plugins/explore/src/components/DomainCard/DomainCard.test.tsx
index df9b84820a..b66e30c652 100644
--- a/plugins/explore/src/components/DomainCard/DomainCard.test.tsx
+++ b/plugins/explore/src/components/DomainCard/DomainCard.test.tsx
@@ -17,6 +17,7 @@
import { DomainEntity } from '@backstage/catalog-model';
import { entityRouteRef } from '@backstage/plugin-catalog-react';
import { renderInTestApp } from '@backstage/test-utils';
+import { screen } from '@testing-library/react';
import React from 'react';
import { DomainCard } from './DomainCard';
@@ -51,4 +52,33 @@ describe('', () => {
'/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',
+ title: 'my Custom Title',
+ },
+ spec: {
+ owner: 'guest',
+ },
+ };
+ const { getByText } = await renderInTestApp(
+ ,
+ {
+ mountedRoutes: {
+ '/catalog/:namespace/:kind/:name': entityRouteRef,
+ },
+ },
+ );
+
+ expect(getByText('Explore').parentElement).toHaveAttribute(
+ 'href',
+ '/catalog/default/domain/artists',
+ );
+ expect(getByText('my Custom Title')).toBeInTheDocument();
+ expect(screen.queryByText('artists')).not.toBeInTheDocument();
+ });
});
diff --git a/plugins/explore/src/components/DomainCard/DomainCard.tsx b/plugins/explore/src/components/DomainCard/DomainCard.tsx
index 0d37e3e273..c70df46b1a 100644
--- a/plugins/explore/src/components/DomainCard/DomainCard.tsx
+++ b/plugins/explore/src/components/DomainCard/DomainCard.tsx
@@ -53,7 +53,10 @@ export const DomainCard = (props: { entity: DomainEntity }) => {
return (
-
+
{entity.metadata.tags?.length ? (
diff --git a/plugins/explore/src/components/EntityCard/EntityCard.test.tsx b/plugins/explore/src/components/EntityCard/EntityCard.test.tsx
index 4b006e347f..cebd5af3d6 100644
--- a/plugins/explore/src/components/EntityCard/EntityCard.test.tsx
+++ b/plugins/explore/src/components/EntityCard/EntityCard.test.tsx
@@ -18,6 +18,7 @@ import { Entity } from '@backstage/catalog-model';
import { entityRouteRef } from '@backstage/plugin-catalog-react';
import { renderInTestApp } from '@backstage/test-utils';
import React from 'react';
+import { screen } from '@testing-library/react';
import { EntityCard } from './EntityCard';
describe('', () => {
@@ -51,4 +52,29 @@ describe('', () => {
'/catalog/default/domain/artists',
);
});
+
+ it('renders an entity card with display title', async () => {
+ const entity: Entity = {
+ apiVersion: 'backstage.io/v1alpha1',
+ kind: 'Domain',
+ metadata: {
+ name: 'artists',
+ title: 'New Title',
+ },
+ spec: {
+ owner: 'guest',
+ },
+ };
+ const { getByText } = await renderInTestApp(
+ ,
+ {
+ mountedRoutes: {
+ '/catalog/:namespace/:kind/:name': entityRouteRef,
+ },
+ },
+ );
+
+ expect(getByText('New Title')).toBeInTheDocument();
+ expect(screen.queryByText('artists')).not.toBeInTheDocument();
+ });
});
diff --git a/plugins/explore/src/components/EntityCard/EntityCard.tsx b/plugins/explore/src/components/EntityCard/EntityCard.tsx
index 0a5908df38..9589d4721e 100644
--- a/plugins/explore/src/components/EntityCard/EntityCard.tsx
+++ b/plugins/explore/src/components/EntityCard/EntityCard.tsx
@@ -53,7 +53,10 @@ export const EntityCard = (props: { entity: Entity }) => {
return (
-
+
{entity.metadata.tags?.length ? (