feat(ApiDefinitionCard): display entity title if defined

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

.changeset/wet-chefs-exercise.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-api-docs': patch
+---
+
+Display entity title on `ApiDefinitionCard` if defined

plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.test.tsx

@@ -62,6 +62,7 @@ paths:
       kind: 'API',
       metadata: {
         name: 'my-name',
+        title: 'My Name',
       },
       spec: {
         type: 'openapi',
@@ -88,7 +89,7 @@ paths:
     );
 
     await waitFor(() => {
-      expect(getByText(/my-name/i)).toBeInTheDocument();
+      expect(getByText(/My Name/i)).toBeInTheDocument();
       expect(getByText(/OpenAPI/)).toBeInTheDocument();
       expect(getByText(/Raw/i)).toBeInTheDocument();
       expect(getByText(/List all artists/i)).toBeInTheDocument();
@@ -101,6 +102,7 @@ paths:
       kind: 'API',
       metadata: {
         name: 'my-name',
+        title: 'My Name',
       },
       spec: {
         type: 'custom-type',
@@ -118,7 +120,7 @@ paths:
       </Wrapper>,
     );
 
-    expect(getByText(/my-name/i)).toBeInTheDocument();
+    expect(getByText(/My Name/i)).toBeInTheDocument();
     expect(getByText(/custom-type/i)).toBeInTheDocument();
     expect(
       getAllByText(

plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx

@@ -39,10 +39,11 @@ export const ApiDefinitionCard = (_: Props) => {
   }
 
   const definitionWidget = getApiDefinitionWidget(entity);
+  const entityTitle = entity.metadata.title ?? entity.metadata.name;
 
   if (definitionWidget) {
     return (
-      <TabbedCard title={entity.metadata.name}>
+      <TabbedCard title={entityTitle}>
         <CardTab label={definitionWidget.title} key="widget">
           {definitionWidget.component(entity.spec.definition)}
         </CardTab>
@@ -58,7 +59,7 @@ export const ApiDefinitionCard = (_: Props) => {
 
   return (
     <TabbedCard
-      title={entity.metadata.name}
+      title={entityTitle}
       children={[
         // Has to be an array, otherwise typescript doesn't like that this has only a single child
         <CardTab label={entity.spec.type} key="raw">