From 9615e68fb6382fbb08847a89a84ad9c46d4a48fb Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Thu, 18 Feb 2021 11:07:11 +0100
Subject: [PATCH] Forward link styling of `EntityRefLink` and `EnriryRefLinks`
 into the underling  `Link`

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
---
 .changeset/kind-eels-run.md                   |  7 +++++
 packages/core/src/components/Link/Link.tsx    |  6 ++--
 packages/core/src/components/Link/index.ts    |  1 +
 .../EntityRefLink/EntityRefLink.tsx           | 14 +++++-----
 .../EntityRefLink/EntityRefLinks.tsx          | 28 +++++++++----------
 5 files changed, 32 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/kind-eels-run.md

diff --git a/.changeset/kind-eels-run.md b/.changeset/kind-eels-run.md
new file mode 100644
index 0000000000..0d890b0478
--- /dev/null
+++ b/.changeset/kind-eels-run.md
@@ -0,0 +1,7 @@
+---
+'@backstage/core': patch
+'@backstage/plugin-catalog-react': patch
+---
+
+Forward link styling of `EntityRefLink` and `EnriryRefLinks` into the underling
+`Link`.
diff --git a/packages/core/src/components/Link/Link.tsx b/packages/core/src/components/Link/Link.tsx
index b551b0511d..cd74b681db 100644
--- a/packages/core/src/components/Link/Link.tsx
+++ b/packages/core/src/components/Link/Link.tsx
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
-import React, { ElementType } from 'react';
 import {
   Link as MaterialLink,
   LinkProps as MaterialLinkProps,
 } from '@material-ui/core';
+import React, { ElementType } from 'react';
 import {
   Link as RouterLink,
   LinkProps as RouterLinkProps,
 } from 'react-router-dom';
 
-type Props = MaterialLinkProps &
+export type LinkProps = MaterialLinkProps &
   RouterLinkProps & {
     component?: ElementType<any>;
   };
@@ -33,7 +33,7 @@ type Props = MaterialLinkProps &
  * Thin wrapper on top of material-ui's Link component
  * Makes the Link to utilise react-router
  */
-export const Link = React.forwardRef<any, Props>((props, ref) => {
+export const Link = React.forwardRef<any, LinkProps>((props, ref) => {
   const to = String(props.to);
   return /^https?:\/\//.test(to) ? (
     // External links
diff --git a/packages/core/src/components/Link/index.ts b/packages/core/src/components/Link/index.ts
index 18e990181c..9be779feb7 100644
--- a/packages/core/src/components/Link/index.ts
+++ b/packages/core/src/components/Link/index.ts
@@ -15,3 +15,4 @@
  */
 
 export { Link } from './Link';
+export type { LinkProps } from './Link';
diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
index 50a80af12a..73e3824d98 100644
--- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
+++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
@@ -15,22 +15,22 @@
  */
 import {
   Entity,
-  ENTITY_DEFAULT_NAMESPACE,
   EntityName,
+  ENTITY_DEFAULT_NAMESPACE,
 } from '@backstage/catalog-model';
-import { Link } from '@backstage/core';
-import React from 'react';
+import { Link, LinkProps } from '@backstage/core';
+import React, { forwardRef } from 'react';
 import { generatePath } from 'react-router';
 import { entityRoute } from '../../routes';
 import { formatEntityRefTitle } from './format';
 
-type EntityRefLinkProps = {
+export type EntityRefLinkProps = {
   entityRef: Entity | EntityName;
   defaultKind?: string;
   children?: React.ReactNode;
-};
+} & Omit<LinkProps, 'to'>;
 
-export const EntityRefLink = React.forwardRef<any, EntityRefLinkProps>(
+export const EntityRefLink = forwardRef<any, EntityRefLinkProps>(
   (props, ref) => {
     const { entityRef, defaultKind, children, ...linkProps } = props;
 
@@ -59,9 +59,9 @@ export const EntityRefLink = React.forwardRef<any, EntityRefLinkProps>(
     // TODO: Use useRouteRef here to generate the path
     return (
       <Link
+        {...linkProps}
         ref={ref}
         to={generatePath(`/catalog/${entityRoute.path}`, routeParams)}
-        {...linkProps}
       >
         {children}
         {!children && formatEntityRefTitle(entityRef, { defaultKind })}
diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx
index fb99fad176..52ed87c80b 100644
--- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx
+++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx
@@ -14,26 +14,26 @@
  * limitations under the License.
  */
 import { Entity, EntityName } from '@backstage/catalog-model';
+import { LinkProps } from '@backstage/core';
 import React from 'react';
 import { EntityRefLink } from './EntityRefLink';
 
-type EntityRefLinksProps = {
+export type EntityRefLinksProps = {
   entityRefs: (Entity | EntityName)[];
   defaultKind?: string;
-};
+} & Omit<LinkProps, 'to'>;
 
 export const EntityRefLinks = ({
   entityRefs,
   defaultKind,
-}: EntityRefLinksProps) => {
-  return (
-    <>
-      {entityRefs.map((r, i) => (
-        <React.Fragment key={i}>
-          {i > 0 && ', '}
-          <EntityRefLink entityRef={r} defaultKind={defaultKind} />
-        </React.Fragment>
-      ))}
-    </>
-  );
-};
+  ...linkProps
+}: EntityRefLinksProps) => (
+  <>
+    {entityRefs.map((r, i) => (
+      <React.Fragment key={i}>
+        {i > 0 && ', '}
+        <EntityRefLink {...linkProps} entityRef={r} defaultKind={defaultKind} />
+      </React.Fragment>
+    ))}
+  </>
+);