Move IconLink from catalog to core

To reuse in scaffolder.

Signed-off-by: James Turley <james.turley@signalmedia.co>
Signed-off-by: James Turley <jamesturley1905@googlemail.com>

packages/core/src/components/IconLink/IconLink.tsx

@@ -14,10 +14,12 @@
  * limitations under the License.
  */
 
-import { Link, IconComponent } from '@backstage/core';
-import { Grid, makeStyles, Typography } from '@material-ui/core';
-import LanguageIcon from '@material-ui/icons/Language';
 import React from 'react';
+import { IconComponent } from '@backstage/core-api';
+import { Grid, LinkProps, makeStyles, Typography } from '@material-ui/core';
+import LanguageIcon from '@material-ui/icons/Language';
+import { omit } from 'lodash';
+import { Link } from '../Link';
 
 const useStyles = makeStyles({
   svgIcon: {
@@ -30,15 +32,15 @@ const useStyles = makeStyles({
   },
 });
 
-export const IconLink = ({
-  href,
-  text,
-  Icon,
-}: {
-  href: string;
-  text?: string;
-  Icon?: IconComponent;
-}) => {
+export const IconLink = (
+  props: {
+    href: string;
+    text?: string;
+    Icon?: IconComponent;
+  } & LinkProps,
+) => {
+  const { href, text, Icon, ...linkProps } = props;
+
   const classes = useStyles();
 
   return (
@@ -49,7 +51,7 @@ export const IconLink = ({
         </Typography>
       </Grid>
       <Grid item>
-        <Link to={href} target="_blank" rel="noopener">
+        <Link to={href} {...linkProps}>
           {text || href}
         </Link>
       </Grid>

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

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { IconLink } from './IconLink';

packages/core/src/components/index.ts

@@ -26,6 +26,7 @@ export * from './ResponseErrorPanel';
 export * from './FeatureDiscovery';
 export * from './HeaderIconLinkRow';
 export * from './HorizontalScrollGrid';
+export * from './IconLink';
 export * from './Lifecycle';
 export * from './Link';
 export * from './MarkdownContent';

plugins/catalog/src/components/EntityLinksCard/LinksGridList.tsx

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-import { IconComponent } from '@backstage/core';
+import { IconComponent, IconLink } from '@backstage/core';
 import { GridList, GridListTile } from '@material-ui/core';
 import React from 'react';
-import { IconLink } from './IconLink';
 import { ColumnBreakpoints } from './types';
 import { useDynamicColumns } from './useDynamicColumns';
 
@@ -39,7 +38,13 @@ export const LinksGridList = ({ items, cols = undefined }: Props) => {
     <GridList cellHeight="auto" cols={numOfCols}>
       {items.map(({ text, href, Icon }, i) => (
         <GridListTile key={i}>
-          <IconLink href={href} text={text ?? href} Icon={Icon} />
+          <IconLink
+            href={href}
+            text={text ?? href}
+            Icon={Icon}
+            target="_blank"
+            rel="noopener"
+          />
         </GridListTile>
       ))}
     </GridList>