Merge pull request #8156 from WarlenRodrigues/fixing_link_somponents_usage

Fixed Link components usage. Now, all links use the Backstage's Link c…

packages/core-components/src/components/Button/Button.stories.tsx

@@ -18,13 +18,13 @@ import { Button } from './Button';
 import { useLocation } from 'react-router-dom';
 import { createRouteRef, useRouteRef } from '@backstage/core-plugin-api';
 import Divider from '@material-ui/core/Divider';
-import Link from '@material-ui/core/Link';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
 import MaterialButton from '@material-ui/core/Button';
 import { wrapInTestApp } from '@backstage/test-utils';
+import { Link } from '../Link';
 
 const routeRef = createRouteRef({
   id: 'storybook.test-route',
@@ -45,7 +45,7 @@ export default {
           <Typography>
             A collection of buttons that should be used in the Backstage
             interface. These leverage the properties inherited from{' '}
-            <Link href="https://material-ui.com/components/buttons/">
+            <Link to="https://material-ui.com/components/buttons/">
               Material-UI Button
             </Link>
             , but include an opinionated set that align to the Backstage design.

packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx

@@ -16,7 +16,6 @@
 
 import React from 'react';
 import { DismissableBanner } from './DismissableBanner';
-import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
 import { WebStorage } from '@backstage/core-app-api';
 import {
@@ -25,6 +24,7 @@ import {
   StorageApi,
 } from '@backstage/core-plugin-api';
 import { TestApiProvider } from '@backstage/test-utils';
+import { Link } from '../Link';
 
 export default {
   title: 'Feedback/DismissableBanner',
@@ -83,7 +83,7 @@ export const WithLink = () => (
         message={
           <Typography>
             This is a dismissable banner with a link:{' '}
-            <Link href="http://example.com" color="textPrimary">
+            <Link to="http://example.com" color="textPrimary">
               example.com
             </Link>
           </Typography>
@@ -94,6 +94,7 @@ export const WithLink = () => (
     </TestApiProvider>
   </div>
 );
+
 export const Fixed = () => (
   <div style={containerStyle}>
     <TestApiProvider apis={apis}>
@@ -106,6 +107,7 @@ export const Fixed = () => (
     </TestApiProvider>
   </div>
 );
+
 export const Warning = () => (
   <div style={containerStyle}>
     <TestApiProvider apis={apis}>

packages/core-components/src/components/WarningPanel/WarningPanel.stories.tsx

@@ -17,8 +17,8 @@
 import React from 'react';
 import { WarningPanel } from './WarningPanel';
 import Button from '@material-ui/core/Button';
-import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
+import { Link } from '../Link';
 
 export default {
   title: 'Feedback/Warning Panel',
@@ -32,7 +32,7 @@ export const Default = () => (
       <>
         This example entity is missing an annotation. If this is unexpected,
         please make sure you have set up everything correctly by following{' '}
-        <Link href="http://example.com">this guide</Link>.
+        <Link to="http://example.com">this guide</Link>.
       </>
     }
   />

packages/core-components/src/layout/ErrorPage/ErrorPage.tsx

@@ -16,13 +16,13 @@
 
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
-import Link from '@material-ui/core/Link';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 import { BackstageTheme } from '@backstage/theme';
 import { MicDrop } from './MicDrop';
 import { useNavigate } from 'react-router';
 import { useSupportConfig } from '../../hooks';
+import { Link } from '../../components/Link';
 
 interface IErrorPageProps {
   status: string;
@@ -80,14 +80,11 @@ export function ErrorPage(props: IErrorPageProps) {
           Looks like someone dropped the mic!
         </Typography>
         <Typography variant="h6">
-          <Link data-testid="go-back-link" onClick={() => navigate(-1)}>
+          <Link to="#" data-testid="go-back-link" onClick={() => navigate(-1)}>
             Go back
           </Link>
-          ... or please{' '}
-          <Link href={support.url} rel="noopener noreferrer">
-            contact support
-          </Link>{' '}
-          if you think this is a bug.
+          ... or please <Link to={support.url}>contact support</Link> if you
+          think this is a bug.
         </Typography>
       </Grid>
     </Grid>

packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx

@@ -15,10 +15,10 @@
  */
 
 import { makeStyles } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import React from 'react';
+import { Link } from '../../components/Link';
 
 /** @public */
 export type HeaderLabelClassKey = 'root' | 'label' | 'value';
@@ -74,7 +74,7 @@ export function HeaderLabel(props: HeaderLabelProps) {
     <Grid item>
       <span className={classes.root}>
         <Typography className={classes.label}>{label}</Typography>
-        {url ? <Link href={url}>{content}</Link> : content}
+        {url ? <Link to={url}>{content}</Link> : content}
       </span>
     </Grid>
   );