From a496cee4d19144094bbad026c9aac9e88f9f15f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Fri, 18 Mar 2022 11:50:53 +0100
Subject: [PATCH] Add support for string refs to the EntityRefLinks component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
---
 .changeset/red-snakes-float.md                |  5 +++
 plugins/catalog-react/api-report.md           |  8 ++---
 .../EntityRefLink/EntityRefLinks.tsx          | 33 ++++++++++---------
 3 files changed, 25 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/red-snakes-float.md

diff --git a/.changeset/red-snakes-float.md b/.changeset/red-snakes-float.md
new file mode 100644
index 0000000000..f1bd16d84c
--- /dev/null
+++ b/.changeset/red-snakes-float.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Add support for string refs to the `EntityRefLinks` component
diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md
index a1541b555e..b90072beba 100644
--- a/plugins/catalog-react/api-report.md
+++ b/plugins/catalog-react/api-report.md
@@ -261,15 +261,11 @@ export type EntityRefLinkProps = {
 } & Omit<LinkProps, 'to'>;
 
 // @public
-export const EntityRefLinks: ({
-  entityRefs,
-  defaultKind,
-  ...linkProps
-}: EntityRefLinksProps) => JSX.Element;
+export function EntityRefLinks(props: EntityRefLinksProps): JSX.Element;
 
 // @public
 export type EntityRefLinksProps = {
-  entityRefs: (Entity | CompoundEntityRef)[];
+  entityRefs: (string | Entity | CompoundEntityRef)[];
   defaultKind?: string;
 } & Omit<LinkProps, 'to'>;
 
diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx
index d92cd2ec87..30dda011d4 100644
--- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx
+++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx
@@ -25,7 +25,7 @@ import { LinkProps } from '@backstage/core-components';
  * @public
  */
 export type EntityRefLinksProps = {
-  entityRefs: (Entity | CompoundEntityRef)[];
+  entityRefs: (string | Entity | CompoundEntityRef)[];
   defaultKind?: string;
 } & Omit<LinkProps, 'to'>;
 
@@ -34,17 +34,20 @@ export type EntityRefLinksProps = {
  *
  * @public
  */
-export const EntityRefLinks = ({
-  entityRefs,
-  defaultKind,
-  ...linkProps
-}: EntityRefLinksProps) => (
-  <>
-    {entityRefs.map((r, i) => (
-      <React.Fragment key={i}>
-        {i > 0 && ', '}
-        <EntityRefLink {...linkProps} entityRef={r} defaultKind={defaultKind} />
-      </React.Fragment>
-    ))}
-  </>
-);
+export function EntityRefLinks(props: EntityRefLinksProps) {
+  const { entityRefs, defaultKind, ...linkProps } = props;
+  return (
+    <>
+      {entityRefs.map((r, i) => (
+        <React.Fragment key={i}>
+          {i > 0 && ', '}
+          <EntityRefLink
+            {...linkProps}
+            entityRef={r}
+            defaultKind={defaultKind}
+          />
+        </React.Fragment>
+      ))}
+    </>
+  );
+}