From f4c67c3eca7c78addcb2c96dd3566f09dedd5679 Mon Sep 17 00:00:00 2001
From: bnechyporenko <bnechyporenko@bol.com>
Date: Mon, 19 Sep 2022 18:19:22 +0200
Subject: [PATCH] Incorporated the feedback

Signed-off-by: bnechyporenko <bnechyporenko@bol.com>
---
 plugins/catalog-react/api-report.md           |  2 +-
 .../EntityRefLink/EntityRefLinks.tsx          | 35 ++++++++++++-------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md
index 49dd7843c0..711e1935c1 100644
--- a/plugins/catalog-react/api-report.md
+++ b/plugins/catalog-react/api-report.md
@@ -285,7 +285,7 @@ export function EntityRefLinks(props: EntityRefLinksProps): JSX.Element;
 export type EntityRefLinksProps = {
   entityRefs: (string | Entity | CompoundEntityRef)[];
   defaultKind?: string;
-  titleFn?: (r: string | Entity | CompoundEntityRef) => string;
+  getTitle?: (cer: CompoundEntityRef) => string;
 } & Omit<LinkProps, 'to'>;
 
 // @public
diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx
index 054dd0350c..0434dfb525 100644
--- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx
+++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx
@@ -26,7 +26,7 @@ import { LinkProps } from '@backstage/core-components';
 export type EntityRefLinksProps = {
   entityRefs: (string | Entity | CompoundEntityRef)[];
   defaultKind?: string;
-  titleFn?: (r: string | Entity | CompoundEntityRef) => string;
+  getTitle?: (cer: CompoundEntityRef) => string;
 } & Omit<LinkProps, 'to'>;
 
 /**
@@ -35,20 +35,29 @@ export type EntityRefLinksProps = {
  * @public
  */
 export function EntityRefLinks(props: EntityRefLinksProps) {
-  const { entityRefs, defaultKind, titleFn, ...linkProps } = props;
+  const { entityRefs, defaultKind, getTitle, ...linkProps } = props;
   return (
     <>
-      {entityRefs.map((r, i) => (
-        <React.Fragment key={i}>
-          {i > 0 && ', '}
-          <EntityRefLink
-            {...linkProps}
-            entityRef={r}
-            defaultKind={defaultKind}
-            title={titleFn ? titleFn(r) : undefined}
-          />
-        </React.Fragment>
-      ))}
+      {entityRefs.map((r, i) => {
+        const isCompoundEntityRef =
+          getTitle && typeof r !== 'string' && !('metadata' in r && getTitle);
+
+        const title = isCompoundEntityRef
+          ? getTitle(r as CompoundEntityRef)
+          : undefined;
+
+        return (
+          <React.Fragment key={i}>
+            {i > 0 && ', '}
+            <EntityRefLink
+              {...linkProps}
+              entityRef={r}
+              defaultKind={defaultKind}
+              title={title}
+            />
+          </React.Fragment>
+        );
+      })}
     </>
   );
 }