Merge pull request #22514 from secustor/fix/home-plugin-fall-back-to-name

feat(plugins/home/FeatureDocsCard): use EntityDisplayName component

.changeset/nasty-shirts-look.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': patch
+---
+
+Use EntityDisplayName JSX element entity information directly for FeaturedDocsCard.

plugins/home/src/homePageComponents/FeaturedDocsCard/Content.test.tsx

@@ -66,8 +66,7 @@ describe('<FeaturedDocsCard />', () => {
       },
     );
     const docsCardContent = getByTestId('docs-card-content');
-    const docsEntity = getByText('Getting Started Docs');
-
+    const docsEntity = getByText('getting-started-with-idp');
     expect(docsCardContent).toContainElement(docsEntity);
   });
 });

plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx

@@ -23,11 +23,16 @@ import {
   Progress,
   ErrorPanel,
 } from '@backstage/core-components';
-import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog-react';
+import {
+  catalogApiRef,
+  CatalogApi,
+  EntityDisplayName,
+} from '@backstage/plugin-catalog-react';
 import { useApi } from '@backstage/core-plugin-api';
 import { EntityFilterQuery } from '@backstage/catalog-client';
 
 import { makeStyles, Typography } from '@material-ui/core';
+import { stringifyEntityRef } from '@backstage/catalog-model';
 
 /**
  * Props customizing the <FeaturedDocsCard/> component.
@@ -116,7 +121,7 @@ export const Content = (props: FeaturedDocsCardProps): JSX.Element => {
               }/`
             }
           >
-            {d.metadata.title}
+            <EntityDisplayName entityRef={stringifyEntityRef(d)} />
           </Link>
           {d.metadata.description && (
             <Typography className={styles.docDescription}>