Merge pull request #6881 from aureliosaraiva/techdoc_title

Friendly Title for Docs

.changeset/two-hats-judge.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Display [metadata.title](https://backstage.io/docs/features/software-catalog/descriptor-format#title-optional) for components on the TechDocs homepage, if defined; otherwise fall back to `metadata.name` as displayed before.

plugins/techdocs-backend/examples/documented-component/catalog-info.yaml

@@ -2,6 +2,7 @@ apiVersion: backstage.io/v1alpha1
 kind: Component
 metadata:
   name: documented-component
+  title: Documented Component
   description: A Service with TechDocs documentation
   annotations:
     backstage.io/techdocs-ref: dir:.

plugins/techdocs/src/home/components/columns.tsx

@@ -17,8 +17,13 @@
 import React from 'react';
 import { Link, SubvalueCell, TableColumn } from '@backstage/core-components';
 import { EntityRefLinks } from '@backstage/plugin-catalog-react';
+import { Entity } from '@backstage/catalog-model';
 import { DocsTableRow } from './types';
 
+function customTitle(entity: Entity): string {
+  return entity.metadata.title || entity.metadata.name;
+}
+
 export function createNameColumn(): TableColumn<DocsTableRow> {
   return {
     title: 'Document',
@@ -26,9 +31,7 @@ export function createNameColumn(): TableColumn<DocsTableRow> {
     highlight: true,
     render: (row: DocsTableRow) => (
       <SubvalueCell
-        value={
-          <Link to={row.resolved.docsUrl}>{row.entity.metadata.name}</Link>
-        }
+        value={<Link to={row.resolved.docsUrl}>{customTitle(row.entity)}</Link>}
         subvalue={row.entity.metadata.description}
       />
     ),