Fied Link components usage. Now, all links use the Backstage's Link component

Signed-off-by: WarlenRodrigues <warlen.cesarrodrigues@gmail.com>

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>

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,11 +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">
             Go back
           </Link>
           ... or please{' '}
-          <Link href={support.url} rel="noopener noreferrer">
+          <Link to={support.url} rel="noopener noreferrer">
             contact support
           </Link>{' '}
           if you think this is a bug.

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

plugins/catalog/src/components/Router.tsx

@@ -19,13 +19,13 @@ import {
   useEntity,
   useEntityFromUrl,
 } from '@backstage/plugin-catalog-react';
-import { Link, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import React, { ComponentType, ReactNode } from 'react';
 import { Navigate, Route, Routes, useParams } from 'react-router';
 import { CatalogPage } from './CatalogPage';
 import { EntityNotFound } from './EntityNotFound';
 import { EntityPageLayout } from './EntityPageLayout';
-import { Content } from '@backstage/core-components';
+import { Content, Link } from '@backstage/core-components';
 
 const DefaultEntityPage = () => (
   <EntityPageLayout>
@@ -38,7 +38,7 @@ const DefaultEntityPage = () => (
           <Typography variant="body1">
             To override this component with your custom implementation, read
             docs on{' '}
-            <Link target="_blank" href="https://backstage.io/docs">
+            <Link target="_blank" to="https://backstage.io/docs">
               backstage.io/docs
             </Link>
           </Typography>

plugins/circleci/src/components/BuildsPage/lib/CITable/CITable.tsx

@@ -17,7 +17,6 @@
 import React from 'react';
 import {
   Avatar,
-  Link,
   Typography,
   Box,
   IconButton,
@@ -37,6 +36,7 @@ import {
   StatusRunning,
   Table,
   TableColumn,
+  Link,
 } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
@@ -121,7 +121,7 @@ const SourceInfo = ({ build }: { build: CITableBuildInfo }) => {
         <Typography variant="button">{source?.branchName}</Typography>
         <Typography variant="body1">
           {source?.commit?.url !== undefined ? (
-            <Link href={source?.commit?.url} target="_blank">
+            <Link to={source?.commit?.url} target="_blank">
               {source?.commit.shortHash}
             </Link>
           ) : (
@@ -169,7 +169,7 @@ const generatedColumns: TableColumn[] = [
     field: 'buildName',
     highlight: true,
     render: (row: Partial<CITableBuildInfo>) => (
-      <Link href={row?.buildUrl} target="_blank">
+      <Link to={row?.buildUrl!} target="_blank">
         <Box display="flex" alignItems="center">
           <LaunchIcon fontSize="small" color="disabled" />
           <Box mr={1} />

plugins/cloudbuild/src/components/Cards/Cards.tsx

@@ -19,12 +19,13 @@ import { WorkflowRunsTable } from '../WorkflowRunsTable';
 import { Entity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
-import { Link, Theme, makeStyles, LinearProgress } from '@material-ui/core';
+import { Theme, makeStyles, LinearProgress } from '@material-ui/core';
 import ExternalLinkIcon from '@material-ui/icons/Launch';
 import { CLOUDBUILD_ANNOTATION } from '../useProjectName';
 
 import {
   InfoCard,
+  Link,
   StructuredMetadataTable,
   WarningPanel,
 } from '@backstage/core-components';
@@ -62,7 +63,7 @@ const WidgetContent = ({
         ),
         message: lastRun.message,
         url: (
-          <Link href={lastRun.googleUrl} target="_blank">
+          <Link to={lastRun.googleUrl ?? ''} target="_blank">
             See more on Google{' '}
             <ExternalLinkIcon className={classes.externalLinkIcon} />
           </Link>

plugins/github-actions/src/components/Cards/Cards.tsx

@@ -18,7 +18,6 @@ import { readGitHubIntegrationConfigs } from '@backstage/integration';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import {
   LinearProgress,
-  Link,
   makeStyles,
   Theme,
   Typography,
@@ -34,6 +33,7 @@ import { configApiRef, errorApiRef, useApi } from '@backstage/core-plugin-api';
 import {
   InfoCard,
   InfoCardVariants,
+  Link,
   StructuredMetadataTable,
 } from '@backstage/core-components';
 
@@ -71,7 +71,7 @@ const WidgetContent = ({
         ),
         message: lastRun.message,
         url: (
-          <Link href={lastRun.githubUrl} target="_blank">
+          <Link to={lastRun.githubUrl ?? ''} target="_blank">
             See more on GitHub{' '}
             <ExternalLinkIcon className={classes.externalLinkIcon} />
           </Link>

plugins/gitops-profiles/src/components/ClusterTable/ClusterTable.tsx

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Link } from '@material-ui/core';
 import { ClusterStatus } from '../../api';
 import { transformStatus } from '../ProfileCatalog/ProfileCatalog';
-import { Table, TableColumn } from '@backstage/core-components';
+import { Link, Table, TableColumn } from '@backstage/core-components';
 
 const columns: TableColumn[] = [
   {
@@ -25,7 +24,7 @@ const columns: TableColumn[] = [
     field: 'name',
     highlight: true,
     render: (componentData: any) => (
-      <Link href={`/gitops-cluster/${componentData.name}`}>
+      <Link to={`/gitops-cluster/${componentData.name}`}>
         {componentData.name}
       </Link>
     ),

plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx

@@ -13,17 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState } from 'react';
+import { Progress, Table, TableColumn } from '@backstage/core-components';
+import { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { Box, IconButton, Link, Tooltip, Typography } from '@material-ui/core';
 import RetryIcon from '@material-ui/icons/Replay';
-import JenkinsLogo from '../../../../assets/JenkinsLogo.svg';
+import { default as React, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import { JenkinsRunStatus } from '../Status';
-import { useBuilds } from '../../../useBuilds';
-import { buildRouteRef } from '../../../../plugin';
-import { Progress, Table, TableColumn } from '@backstage/core-components';
 import { Project } from '../../../../api/JenkinsApi';
-import { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
+import JenkinsLogo from '../../../../assets/JenkinsLogo.svg';
+import { buildRouteRef } from '../../../../plugin';
+import { useBuilds } from '../../../useBuilds';
+import { JenkinsRunStatus } from '../Status';
 
 const FailCount = ({ count }: { count: number }): JSX.Element | null => {
   if (count !== 0) {
@@ -127,7 +127,7 @@ const generatedColumns: TableColumn[] = [
     render: (row: Partial<Project>) => (
       <>
         <p>
-          <Link href={row.lastBuild?.source?.url || ''} target="_blank">
+          <Link to={row.lastBuild?.source?.url || ''} target="_blank">
             {row.lastBuild?.source?.branchName}
           </Link>
         </p>
@@ -154,7 +154,7 @@ const generatedColumns: TableColumn[] = [
         <>
           <p>
             {row.lastBuild?.tests && (
-              <Link href={row.lastBuild?.tests.testUrl || ''} target="_blank">
+              <Link to={row.lastBuild?.tests.testUrl || ''} target="_blank">
                 {row.lastBuild?.tests.passed} / {row.lastBuild?.tests.total}{' '}
                 passed
                 <FailSkippedWidget

plugins/jenkins/src/components/Cards/Cards.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { LinearProgress, Link, makeStyles, Theme } from '@material-ui/core';
+import { LinearProgress, makeStyles, Theme } from '@material-ui/core';
 import ExternalLinkIcon from '@material-ui/icons/Launch';
 import { DateTime, Duration } from 'luxon';
 import React from 'react';
@@ -22,6 +22,7 @@ import { ErrorType, useBuilds } from '../useBuilds';
 import {
   InfoCard,
   InfoCardVariants,
+  Link,
   StructuredMetadataTable,
   WarningPanel,
 } from '@backstage/core-components';
@@ -66,7 +67,7 @@ const WidgetContent = ({
         'latest run': displayDate,
         duration: displayDuration,
         link: (
-          <Link href={latestRun.lastBuild.url} target="_blank">
+          <Link to={latestRun.lastBuild.url} target="_blank">
             See more on Jenkins{' '}
             <ExternalLinkIcon className={classes.externalLinkIcon} />
           </Link>

plugins/lighthouse/src/components/AuditList/AuditListTable.tsx

@@ -22,10 +22,15 @@ import {
   CATEGORY_LABELS,
   buildSparklinesDataForItem,
 } from '../../utils';
-import { Link, generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router-dom';
 import AuditStatusIcon from '../AuditStatusIcon';
 
-import { Table, TableColumn, TrendLine } from '@backstage/core-components';
+import {
+  Link,
+  Table,
+  TableColumn,
+  TrendLine,
+} from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
 const columns: TableColumn[] = [

plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx

@@ -22,7 +22,6 @@ import {
 import {
   Box,
   Grid,
-  Link,
   List,
   ListItem,
   ListItemIcon,
@@ -34,7 +33,12 @@ import GroupIcon from '@material-ui/icons/Group';
 import PersonIcon from '@material-ui/icons/Person';
 import Alert from '@material-ui/lab/Alert';
 import React from 'react';
-import { Avatar, InfoCard, InfoCardVariants } from '@backstage/core-components';
+import {
+  Avatar,
+  InfoCard,
+  InfoCardVariants,
+  Link,
+} from '@backstage/core-components';
 
 const CardTitle = ({ title }: { title?: string }) =>
   title ? (
@@ -83,7 +87,7 @@ export const UserProfileCard = ({
                   </Tooltip>
                 </ListItemIcon>
                 <ListItemText>
-                  <Link href={emailHref}>{profile.email}</Link>
+                  <Link to={emailHref ?? ''}>{profile.email}</Link>
                 </ListItemText>
               </ListItem>
             )}

plugins/scaffolder/src/components/TemplateList/TemplateList.tsx

@@ -24,11 +24,12 @@ import {
   Content,
   ContentHeader,
   ItemCardGrid,
+  Link,
   Progress,
   WarningPanel,
 } from '@backstage/core-components';
 import { useEntityListProvider } from '@backstage/plugin-catalog-react';
-import { Link, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import { TemplateCard } from '../TemplateCard';
 
 export type TemplateListProps = {
@@ -73,7 +74,7 @@ export const TemplateList = ({
       {!error && !loading && !entities.length && (
         <Typography variant="body2">
           No templates found that match your filter. Learn more about{' '}
-          <Link href="https://backstage.io/docs/features/software-templates/adding-templates">
+          <Link to="https://backstage.io/docs/features/software-templates/adding-templates">
             adding templates
           </Link>
           .

plugins/search/src/components/SearchResult/SearchResult.stories.tsx

@@ -15,9 +15,10 @@
  */
 
 import React from 'react';
-import { List, Link, ListItem } from '@material-ui/core';
+import { List, ListItem } from '@material-ui/core';
 import { SearchResult, SearchContext, DefaultResultListItem } from '../index';
 import { MemoryRouter } from 'react-router';
+import { Link } from '@backstage/core-components';
 
 export default {
   title: 'Plugins/Search/SearchResult',
@@ -79,7 +80,7 @@ export const Default = () => {
                   default:
                     return (
                       <ListItem>
-                        <Link href={document.location}>
+                        <Link to={document.location}>
                           {document.title} - {document.text}
                         </Link>
                       </ListItem>

plugins/sentry/src/components/ErrorCell/ErrorCell.tsx

@@ -16,9 +16,10 @@
 
 import React from 'react';
 import { SentryIssue } from '../../api';
-import { Link, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { BackstageTheme } from '@backstage/theme';
+import { Link } from '@backstage/core-components';
 
 function stripText(text: string, maxLength: number) {
   return text.length > maxLength ? `${text.substr(0, maxLength)}...` : text;
@@ -53,7 +54,7 @@ export const ErrorCell = ({ sentryIssue }: { sentryIssue: SentryIssue }) => {
 
   return (
     <div className={classes.root}>
-      <Link href={sentryIssue.permalink}>
+      <Link to={sentryIssue.permalink}>
         <Typography variant="body1" gutterBottom className={classes.text}>
           {stripText(issueType, 28)}
         </Typography>

plugins/sonarqube/src/components/SonarQubeCard/RatingCard.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { Grid, Typography, Link } from '@material-ui/core';
+import { Link } from '@backstage/core-components';
+import { Grid, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import React, { ReactNode } from 'react';
 
@@ -62,7 +63,7 @@ export const RatingCard = ({
   const classes = useStyles();
 
   return (
-    <Link href={link} color="inherit" underline="none">
+    <Link to={link} color="inherit" underline="none">
       <Grid item className={classes.root}>
         <Grid item className={classes.upper}>
           <Grid item className={classes.left}>