refactor(search): display entity title for result items if defined

Signed-off-by: Phil Kuang <pkuang@factset.com>

.changeset/four-days-sneeze.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-techdocs': patch
+'@backstage/plugin-techdocs-backend': patch
+---
+
+Display entity title (if defined) in titles of TechDocs search results

.changeset/twelve-candles-mix.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-backend': patch
+---
+
+Use entity title (if defined) as title of documents indexed by `DefaultCatalogCollator`

plugins/catalog-backend/src/search/DefaultCatalogCollator.test.ts

@@ -37,6 +37,20 @@ const expectedEntities: Entity[] = [
       owner: 'someone',
     },
   },
+  {
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Component',
+    metadata: {
+      title: 'Test Entity',
+      name: 'test-entity-2',
+      description: 'The expected description 2',
+    },
+    spec: {
+      type: 'some-type',
+      lifecycle: 'experimental',
+      owner: 'someone',
+    },
+  },
 ];
 
 describe('DefaultCatalogCollator', () => {
@@ -89,6 +103,15 @@ describe('DefaultCatalogCollator', () => {
       lifecycle: expectedEntities[0]!.spec!.lifecycle,
       owner: expectedEntities[0]!.spec!.owner,
     });
+    expect(documents[1]).toMatchObject({
+      title: expectedEntities[1].metadata.title,
+      location: '/catalog/default/component/test-entity-2',
+      text: expectedEntities[1].metadata.description,
+      namespace: 'default',
+      componentType: expectedEntities[1]!.spec!.type,
+      lifecycle: expectedEntities[1]!.spec!.lifecycle,
+      owner: expectedEntities[1]!.spec!.owner,
+    });
   });
 
   it('maps a returned entity with a custom locationTemplate', async () => {

plugins/catalog-backend/src/search/DefaultCatalogCollator.ts

@@ -87,7 +87,7 @@ export class DefaultCatalogCollator implements DocumentCollator {
     });
     return response.items.map((entity: Entity): CatalogEntityDocument => {
       return {
-        title: entity.metadata.name,
+        title: entity.metadata.title ?? entity.metadata.name,
         location: this.applyArgsToFormat(this.locationTemplate, {
           namespace: entity.metadata.namespace || 'default',
           kind: entity.kind,

plugins/techdocs-backend/src/search/DefaultTechDocsCollator.test.ts

@@ -58,6 +58,7 @@ const expectedEntities: Entity[] = [
     apiVersion: 'backstage.io/v1alpha1',
     kind: 'Component',
     metadata: {
+      title: 'Test Entity with Docs!',
       name: 'test-entity-with-docs',
       description: 'Documented description',
       annotations: {
@@ -133,6 +134,7 @@ describe('DefaultTechDocsCollator with legacyPathCasing configuration', () => {
         location: `/docs/default/Component/${entity.metadata.name}/${mockSearchDocIndex.docs[idx].location}`,
         text: mockSearchDocIndex.docs[idx].text,
         namespace: 'default',
+        entityTitle: entity!.metadata.title,
         componentType: entity!.spec!.type,
         lifecycle: entity!.spec!.lifecycle,
         owner: '',
@@ -177,6 +179,7 @@ describe('DefaultTechDocsCollator', () => {
         location: `/docs/default/component/${entity.metadata.name}/${mockSearchDocIndex.docs[idx].location}`,
         text: mockSearchDocIndex.docs[idx].text,
         namespace: 'default',
+        entityTitle: entity!.metadata.title,
         componentType: entity!.spec!.type,
         lifecycle: entity!.spec!.lifecycle,
         owner: '',

plugins/techdocs-backend/src/search/DefaultTechDocsCollator.ts

@@ -93,6 +93,7 @@ export class DefaultTechDocsCollator implements DocumentCollator {
         'namespace',
         'metadata.annotations',
         'metadata.name',
+        'metadata.title',
         'metadata.namespace',
         'spec.type',
         'spec.lifecycle',
@@ -130,6 +131,7 @@ export class DefaultTechDocsCollator implements DocumentCollator {
               }),
               path: doc.location,
               ...entityInfo,
+              entityTitle: entity.metadata.title,
               componentType: entity.spec?.type?.toString() || 'other',
               lifecycle: (entity.spec?.lifecycle as string) || '',
               owner:

plugins/techdocs/src/components/DocsResultListItem/DocsResultListItem.test.tsx

@@ -33,6 +33,17 @@ const validResult = {
   lifecycle: 'production',
 };
 
+const validResultWithTitle = {
+  location: 'https://backstage.io/docs',
+  title: 'Documentation',
+  text: 'Backstage is an open-source developer portal that puts the developer experience first.',
+  kind: 'library',
+  namespace: '',
+  name: 'Backstage',
+  entityTitle: 'Backstage App',
+  lifecycle: 'production',
+};
+
 describe('DocsResultListItem test', () => {
   it('should render search doc passed in', async () => {
     const { findByText } = render(<DocsResultListItem result={validResult} />);
@@ -59,4 +70,14 @@ describe('DocsResultListItem test', () => {
       ),
     ).toBeInTheDocument();
   });
+
+  it('should use entity title if defined', async () => {
+    const { findByText } = render(
+      <DocsResultListItem result={validResultWithTitle} />,
+    );
+
+    expect(
+      await findByText('Documentation | Backstage App docs'),
+    ).toBeInTheDocument();
+  });
 });

plugins/techdocs/src/components/DocsResultListItem/DocsResultListItem.tsx

@@ -47,7 +47,11 @@ export const DocsResultListItem = ({
     <ListItemText
       className={classes.itemText}
       primaryTypographyProps={{ variant: 'h6' }}
-      primary={title ? title : `${result.title} | ${result.name} docs`}
+      primary={
+        title
+          ? title
+          : `${result.title} | ${result.entityTitle ?? result.name} docs`
+      }
       secondary={
         <TextTruncate
           line={lineClamp}