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

@@ -0,0 +1,7 @@
+---
+'@backstage/core': patch
+'@backstage/plugin-catalog-react': patch
+---
+
+Forward link styling of `EntityRefLink` and `EnriryRefLinks` into the underling
+`Link`.

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

packages/core/src/components/Link/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { Link } from './Link';
+export type { LinkProps } from './Link';

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 })}

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>
+    ))}
+  </>
+);