From ce0260753273ef24fd9d43659b635457d4a453ce Mon Sep 17 00:00:00 2001
From: Aurelio Saraiva <aureliosaraiva@gmail.com>
Date: Wed, 18 Aug 2021 18:22:37 -0300
Subject: [PATCH] added title

Signed-off-by: Aurelio Saraiva <aureliosaraiva@gmail.com>
---
 .../examples/documented-component/catalog-info.yaml       | 1 +
 plugins/techdocs/src/home/components/columns.tsx          | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/plugins/techdocs-backend/examples/documented-component/catalog-info.yaml b/plugins/techdocs-backend/examples/documented-component/catalog-info.yaml
index 125c18200d..e6d14025e1 100644
--- a/plugins/techdocs-backend/examples/documented-component/catalog-info.yaml
+++ b/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:.
diff --git a/plugins/techdocs/src/home/components/columns.tsx b/plugins/techdocs/src/home/components/columns.tsx
index 5cdcc66c37..80dfd80a35 100644
--- a/plugins/techdocs/src/home/components/columns.tsx
+++ b/plugins/techdocs/src/home/components/columns.tsx
@@ -19,6 +19,10 @@ import { Link, SubvalueCell, TableColumn } from '@backstage/core-components';
 import { EntityRefLinks } from '@backstage/plugin-catalog-react';
 import { DocsTableRow } from './types';
 
+function formatTitle(entity): String {
+  return entity.metadata.title || entity.metadata.name;
+}
+
 export function createNameColumn(): TableColumn<DocsTableRow> {
   return {
     title: 'Document',
@@ -26,9 +30,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}>{formatTitle(row.entity)}</Link>}
         subvalue={row.entity.metadata.description}
       />
     ),