refactor: replace @material-ui Link

Signed-off-by: Dmitry Lobanov <lobanov.dmitry.s@gmail.com>

.changeset/two-yaks-wave.md

@@ -0,0 +1,20 @@
+---
+'@backstage/core-components': patch
+'@backstage/create-app': patch
+'@backstage/plugin-azure-sites': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-circleci': patch
+'@backstage/plugin-cloudbuild': patch
+'@backstage/plugin-dynatrace': patch
+'@backstage/plugin-gcalendar': patch
+'@backstage/plugin-github-actions': patch
+'@backstage/plugin-github-issues': patch
+'@backstage/plugin-gitops-profiles': patch
+'@backstage/plugin-jenkins': patch
+'@backstage/plugin-kafka': patch
+'@backstage/plugin-pagerduty': patch
+'@backstage/plugin-rollbar': patch
+'@backstage/plugin-scaffolder': patch
+---
+
+Prefer using `Link` from `@backstage/core-components` rather than material-UI.

packages/app/src/components/Root/Root.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { Link, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
 import ExtensionIcon from '@material-ui/icons/Extension';
 import RuleIcon from '@material-ui/icons/AssignmentTurnedIn';
@@ -29,7 +29,6 @@ import MenuIcon from '@material-ui/icons/Menu';
 import MoneyIcon from '@material-ui/icons/MonetizationOn';
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
-import { NavLink } from 'react-router-dom';
 import { GraphiQLIcon } from '@backstage/plugin-graphiql';
 import {
   Settings as SidebarSettings,
@@ -46,6 +45,7 @@ import {
   SidebarPage,
   SidebarScrollWrapper,
   SidebarSpace,
+  Link,
   useSidebarOpenState,
 } from '@backstage/core-components';
 import { MyGroupsSidebarItem } from '@backstage/plugin-org';
@@ -74,13 +74,7 @@ const SidebarLogo = () => {
 
   return (
     <div className={classes.root}>
-      <Link
-        component={NavLink}
-        to="/"
-        underline="none"
-        className={classes.link}
-        aria-label="Home"
-      >
+      <Link to="/" underline="none" className={classes.link} aria-label="Home">
         {isOpen ? <LogoFull /> : <LogoIcon />}
       </Link>
     </div>

packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.tsx

@@ -16,9 +16,8 @@
 import React from 'react';
 import classnames from 'classnames';
 import { makeStyles } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
 import LinkIcon from '@material-ui/icons/Link';
-import { Link as RouterLink } from '../Link';
+import { Link } from '../Link';
 
 export type IconLinkVerticalProps = {
   color?: 'primary' | 'secondary';
@@ -80,14 +79,10 @@ export function IconLinkVertical({
 
   if (disabled) {
     return (
-      <Link
-        title={title}
-        className={classnames(classes.link, classes.disabled)}
-        underline="none"
-      >
+      <div title={title} className={classnames(classes.link, classes.disabled)}>
         {icon}
         <span className={classes.label}>{label}</span>
-      </Link>
+      </div>
     );
   }
 
@@ -96,7 +91,6 @@ export function IconLinkVertical({
       title={title}
       className={classnames(classes.link, classes[color])}
       to={href}
-      component={RouterLink}
       onClick={onClick}
     >
       {icon}

packages/core-components/src/components/Link/Link.tsx

@@ -16,6 +16,7 @@
 
 import { configApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api';
 import classnames from 'classnames';
+// eslint-disable-next-line no-restricted-imports
 import MaterialLink, {
   LinkProps as MaterialLinkProps,
 } from '@material-ui/core/Link';

packages/core-components/src/layout/Page/Page.stories.tsx

@@ -18,7 +18,6 @@ import { wrapInTestApp } from '@backstage/test-utils';
 import Box from '@material-ui/core/Box';
 import Chip from '@material-ui/core/Chip';
 import Grid from '@material-ui/core/Grid';
-import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
 import React, { useState } from 'react';
 import {
@@ -28,6 +27,7 @@ import {
   Table,
   TableColumn,
   TrendLine,
+  Link,
 } from '../../components';
 import { Content } from '../Content';
 import { ContentHeader } from '../ContentHeader';
@@ -75,7 +75,7 @@ const columns: TableColumn[] = [
     highlight: true,
     render: (row: Partial<TableData>) => (
       <>
-        <Link>{row.branch}</Link>
+        <Link to="#message-source">{row.branch}</Link>
         <Typography variant="body2">{row.hash}</Typography>
       </>
     ),
@@ -169,7 +169,8 @@ const DataGrid = () => (
           able to function.
         </Typography>
         <Typography paragraph>
-          Contact <Link>#cost-awareness</Link> for information and support.
+          Contact <Link to="#cost-awareness">#cost-awareness</Link> for
+          information and support.
         </Typography>
       </InfoCard>
     </Grid>

packages/core-components/src/layout/Sidebar/Intro.tsx

@@ -16,8 +16,8 @@
 
 import { BackstageTheme } from '@backstage/theme';
 import Collapse from '@material-ui/core/Collapse';
-import Link from '@material-ui/core/Link';
 import { makeStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
 import CloseIcon from '@material-ui/icons/Close';
 import React, { useContext, useState } from 'react';
@@ -106,17 +106,12 @@ export function IntroCard(props: IntroCardProps) {
     <div className={classes.introCard}>
       <Typography variant="subtitle2">{text}</Typography>
       <div className={classes.introDismiss}>
-        <Link
-          component="button"
-          onClick={handleClose}
-          underline="none"
-          className={classes.introDismissLink}
-        >
+        <IconButton onClick={handleClose} className={classes.introDismissLink}>
           <CloseIcon className={classes.introDismissIcon} />
           <Typography component="span" className={classes.introDismissText}>
             Dismiss
           </Typography>
-        </Link>
+        </IconButton>
       </div>
     </div>
   );

packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { Link, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
 import ExtensionIcon from '@material-ui/icons/Extension';
 import MapIcon from '@material-ui/icons/MyLocation';
@@ -7,7 +7,6 @@ import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
-import { NavLink } from 'react-router-dom';
 import {
   Settings as SidebarSettings,
   UserSettingsSignInAvatar,
@@ -23,6 +22,7 @@ import {
   SidebarScrollWrapper,
   SidebarSpace,
   useSidebarOpenState,
+  Link,
 } from '@backstage/core-components';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
@@ -48,13 +48,7 @@ const SidebarLogo = () => {
 
   return (
     <div className={classes.root}>
-      <Link
-        component={NavLink}
-        to="/"
-        underline="none"
-        className={classes.link}
-        aria-label="Home"
-      >
+      <Link to="/" underline="none" className={classes.link} aria-label="Home">
         {isOpen ? <LogoFull /> : <LogoIcon />}
       </Link>
     </div>

packages/techdocs-cli-embedded-app/src/components/Root/Root.tsx

@@ -16,7 +16,7 @@
 
 import React, { PropsWithChildren } from 'react';
 
-import { Link, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
 import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
@@ -28,8 +28,8 @@ import {
   sidebarConfig,
   SidebarDivider,
   useSidebarOpenState,
+  Link,
 } from '@backstage/core-components';
-import { NavLink } from 'react-router-dom';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -53,7 +53,6 @@ const SidebarLogo = () => {
   return (
     <div className={classes.root}>
       <Link
-        component={NavLink}
         to="/docs/default/component/local/"
         underline="none"
         className={classes.link}

plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx

@@ -20,7 +20,6 @@ import {
   Card,
   IconButton,
   LinearProgress,
-  Link,
   Menu,
   MenuItem,
   Snackbar,
@@ -28,7 +27,7 @@ import {
 } from '@material-ui/core';
 import { default as MuiAlert } from '@material-ui/lab/Alert';
 import { AzureSite } from '@backstage/plugin-azure-sites-common';
-import { Table, TableColumn } from '@backstage/core-components';
+import { Table, TableColumn, Link } from '@backstage/core-components';
 import FlashOnIcon from '@material-ui/icons/FlashOn';
 import PublicIcon from '@material-ui/icons/Public';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
@@ -199,11 +198,7 @@ export const AzureSitesOverviewTable = ({ data, loading }: TableProps) => {
       field: 'name',
       highlight: true,
       render: (func: AzureSite) => {
-        return (
-          <Link href={func.href} target="_blank">
-            {func.name}
-          </Link>
-        );
+        return <Link to={func.href}>{func.name}</Link>;
       },
     },
     {

plugins/catalog/src/components/AboutCard/AboutCard.test.tsx

@@ -216,7 +216,7 @@ describe('<AboutCard />', () => {
     );
   });
 
-  it('renders without "view source" link', async () => {
+  it('renders disabled "view source" link', async () => {
     const entity = {
       apiVersion: 'v1',
       kind: 'Component',
@@ -250,7 +250,8 @@ describe('<AboutCard />', () => {
         },
       },
     );
-    expect(getByText('View Source').closest('a')).not.toHaveAttribute('href');
+    expect(getByText('View Source')).toBeVisible();
+    expect(getByText('View Source').closest('a')).toBeNull();
   });
 
   it.each([
@@ -445,7 +446,8 @@ describe('<AboutCard />', () => {
       },
     );
 
-    expect(getByText('View TechDocs').closest('a')).not.toHaveAttribute('href');
+    expect(getByText('View TechDocs')).toBeVisible();
+    expect(getByText('View TechDocs').closest('a')).toBeNull();
   });
 
   it('renders disabled techdocs link when route is not bound', async () => {
@@ -497,6 +499,7 @@ describe('<AboutCard />', () => {
       },
     );
 
-    expect(getByText('View TechDocs').closest('a')).not.toHaveAttribute('href');
+    expect(getByText('View TechDocs')).toBeVisible();
+    expect(getByText('View TechDocs').closest('a')).toBeNull();
   });
 });

plugins/circleci/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx

@@ -17,32 +17,25 @@
 import React, { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { BuildWithSteps, BuildStepAction } from '../../api';
-import {
-  Grid,
-  Box,
-  IconButton,
-  Typography,
-  Link as MaterialLink,
-} from '@material-ui/core';
+import { Grid, Box, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { ActionOutput } from './lib/ActionOutput/ActionOutput';
 import LaunchIcon from '@material-ui/icons/Launch';
 import { useBuildWithSteps } from '../../state/useBuildWithSteps';
 import {
   Breadcrumbs,
+  Button,
   InfoCard,
   Progress,
   Link,
 } from '@backstage/core-components';
 
-const IconLink = IconButton as any as typeof MaterialLink;
-
 const BuildName = ({ build }: { build?: BuildWithSteps }) => (
   <Box display="flex" alignItems="center">
     #{build?.build_num} - {build?.subject}
-    <IconLink href={build?.build_url} target="_blank">
+    <Button to={build?.build_url || '#'}>
       <LaunchIcon />
-    </IconLink>
+    </Button>
   </Box>
 );
 

plugins/cloudbuild/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx

@@ -17,7 +17,6 @@ import { Entity } from '@backstage/catalog-model';
 import {
   Box,
   LinearProgress,
-  Link as MaterialLink,
   makeStyles,
   Paper,
   Table,
@@ -135,10 +134,10 @@ export const WorkflowRunDetails = (props: { entity: Entity }) => {
               </TableCell>
               <TableCell>
                 {details.value?.logUrl && (
-                  <MaterialLink target="_blank" href={details.value.logUrl}>
+                  <Link to={details.value.logUrl}>
                     Workflow runs on Google{' '}
                     <ExternalLinkIcon className={classes.externalLinkIcon} />
-                  </MaterialLink>
+                  </Link>
                 )}
               </TableCell>
             </TableRow>

plugins/cloudbuild/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Link, Typography, Box, IconButton, Tooltip } from '@material-ui/core';
+import { Typography, Box, IconButton, Tooltip } from '@material-ui/core';
 import RetryIcon from '@material-ui/icons/Replay';
 import GoogleIcon from '@material-ui/icons/CloudCircle';
-import { Link as RouterLink } from 'react-router-dom';
 import { useWorkflowRuns, WorkflowRun } from '../useWorkflowRuns';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
 import SyncIcon from '@material-ui/icons/Sync';
@@ -25,7 +24,7 @@ import { useProjectName } from '../useProjectName';
 import { Entity } from '@backstage/catalog-model';
 import { buildRouteRef } from '../../routes';
 import { DateTime } from 'luxon';
-import { Table, TableColumn } from '@backstage/core-components';
+import { Table, TableColumn, Link } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
 const generatedColumns: TableColumn[] = [
@@ -59,11 +58,7 @@ const generatedColumns: TableColumn[] = [
       const LinkWrapper = () => {
         const routeLink = useRouteRef(buildRouteRef);
         return (
-          <Link
-            component={RouterLink}
-            data-testid="cell-source"
-            to={routeLink({ id: row.id! })}
-          >
+          <Link data-testid="cell-source" to={routeLink({ id: row.id! })}>
             {row.message}
           </Link>
         );

plugins/dynatrace/src/components/Problems/ProblemsTable/ProblemsTable.tsx

@@ -17,7 +17,7 @@ import React from 'react';
 import { Table, TableColumn } from '@backstage/core-components';
 import { DynatraceProblem } from '../../../api/DynatraceApi';
 import { ProblemStatus } from '../ProblemStatus';
-import { Link } from '@material-ui/core';
+import { Link } from '@backstage/core-components';
 
 type ProblemsTableProps = {
   problems: DynatraceProblem[];
@@ -36,7 +36,7 @@ export const ProblemsTable = (props: ProblemsTableProps) => {
       field: 'title',
       render: (row: Partial<DynatraceProblem>) => (
         <Link
-          href={`${dynatraceBaseUrl}/#problems/problemdetails;pid=${row.problemId}`}
+          to={`${dynatraceBaseUrl}/#problems/problemdetails;pid=${row.problemId}`}
         >
           {row.title}
         </Link>

plugins/gcalendar/src/components/CalendarCard/CalendarEvent.tsx

@@ -22,10 +22,10 @@ import {
 import React, { useState } from 'react';
 
 import { useAnalytics } from '@backstage/core-plugin-api';
+import { Link } from '@backstage/core-components';
 
 import {
   Box,
-  Link,
   Paper,
   Popover,
   Tooltip,
@@ -133,12 +133,12 @@ export const CalendarEvent = ({ event }: { event: GCalendarEvent }) => {
             <Link
               data-testid="calendar-event-zoom-link"
               className={classes.link}
-              href={zoomLink}
-              target="_blank"
+              to={zoomLink}
               onClick={e => {
                 e.stopPropagation();
                 analytics.captureEvent('click', 'zoom link');
               }}
+              noTrack
             >
               <img src={zoomIcon} alt="Zoom link" />
             </Link>

plugins/gcalendar/src/components/CalendarCard/CalendarEventPopoverContent.tsx

@@ -18,12 +18,11 @@ import React from 'react';
 import DOMPurify from 'dompurify';
 
 import { useAnalytics } from '@backstage/core-plugin-api';
-
+import { Link } from '@backstage/core-components';
 import {
   Box,
   Divider,
   IconButton,
-  Link,
   Tooltip,
   Typography,
   makeStyles,
@@ -77,11 +76,11 @@ export const CalendarEventPopoverContent = ({
           <Tooltip title="Open in Calendar">
             <Link
               data-testid="open-calendar-link"
-              href={event.htmlLink}
-              target="_blank"
+              to={event.htmlLink}
               onClick={_e =>
                 analytics.captureEvent('click', 'open in calendar')
               }
+              noTrack
             >
               <IconButton>
                 <ArrowForwardIcon />
@@ -92,9 +91,9 @@ export const CalendarEventPopoverContent = ({
       </Box>
       {zoomLink && (
         <Link
-          href={zoomLink}
-          target="_blank"
+          to={zoomLink}
           onClick={_e => analytics.captureEvent('click', 'zoom link')}
+          noTrack
         >
           Join Zoom Meeting
         </Link>

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

@@ -22,7 +22,6 @@ import {
   Box,
   CircularProgress,
   LinearProgress,
-  Link as MaterialLink,
   ListItemText,
   makeStyles,
   Paper,
@@ -246,10 +245,10 @@ export const WorkflowRunDetails = ({ entity }: { entity: Entity }) => {
               </TableCell>
               <TableCell>
                 {details.value?.html_url && (
-                  <MaterialLink target="_blank" href={details.value.html_url}>
+                  <Link to={details.value.html_url}>
                     Workflow runs on GitHub{' '}
                     <ExternalLinkIcon className={classes.externalLinkIcon} />
-                  </MaterialLink>
+                  </Link>
                 )}
               </TableCell>
             </TableRow>

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

@@ -15,7 +15,6 @@
  */
 import React from 'react';
 import {
-  Link,
   Typography,
   Box,
   IconButton,
@@ -33,7 +32,12 @@ import { getProjectNameFromEntity } from '../getProjectNameFromEntity';
 import { Entity } from '@backstage/catalog-model';
 import { readGithubIntegrationConfigs } from '@backstage/integration';
 
-import { EmptyState, Table, TableColumn } from '@backstage/core-components';
+import {
+  EmptyState,
+  Table,
+  TableColumn,
+  Link,
+} from '@backstage/core-components';
 import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
 
 const generatedColumns: TableColumn[] = [

plugins/github-issues/src/components/GithubIssues/IssueCard/IssueCard.tsx

@@ -16,13 +16,9 @@
 
 import React from 'react';
 import { DateTime } from 'luxon';
-import {
-  Box,
-  Paper,
-  Typography,
-  CardActionArea,
-  Link,
-} from '@material-ui/core';
+
+import { Box, Paper, Typography, CardActionArea } from '@material-ui/core';
+import { Link } from '@backstage/core-components';
 import { Assignees } from './Assignees';
 import { CommentsCount } from './CommentsCount';
 import Divider from '@material-ui/core/Divider';
@@ -63,10 +59,7 @@ export const IssueCard = (props: IssueCardProps) => {
         <CardActionArea href={url} target="_blank">
           <Box padding={1}>
             <Box display="flex" justifyContent="space-between">
-              <Link
-                href={`https://github.com/${repositoryName}/issues`}
-                target="_blank"
-              >
+              <Link to={`https://github.com/${repositoryName}/issues`}>
                 {repositoryName}
               </Link>
               <Assignees name={assigneeName} avatar={assigneeAvatar} />

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

@@ -15,7 +15,6 @@
  */
 import React, { useEffect, useState } from 'react';
 
-import { Link } from '@material-ui/core';
 import { useParams } from 'react-router-dom';
 import { gitOpsApiRef, Status } from '../../api';
 import { transformRunStatus } from '../ProfileCatalog';
@@ -27,6 +26,7 @@ import {
   Table,
   Progress,
   HeaderLabel,
+  Link,
 } from '@backstage/core-components';
 import { useApi, githubAuthApiRef } from '@backstage/core-plugin-api';
 
@@ -94,12 +94,7 @@ const ClusterPage = () => {
           data={transformRunStatus(runStatus)}
           columns={columns}
         />
-        <Link
-          hidden={runLink === ''}
-          rel="noopener noreferrer"
-          href={`${runLink}?check_suite_focus=true`}
-          target="_blank"
-        >
+        <Link hidden={runLink === ''} to={`${runLink}?check_suite_focus=true`}>
           Details
         </Link>
       </Content>

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

@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { TextField, List, ListItem, Link } from '@material-ui/core';
+import { TextField, List, ListItem } from '@material-ui/core';
 
 import ClusterTemplateCardList from '../ClusterTemplateCardList';
 import ProfileCardList from '../ProfileCardList';
@@ -32,6 +32,7 @@ import {
   SimpleStepper,
   SimpleStepperStep,
   InfoCard,
+  Link,
   Progress,
   Table,
   StatusWarning,
@@ -340,9 +341,7 @@ const ProfileCatalog = () => {
           />
           <Link
             hidden={runLink === ''}
-            rel="noopener noreferrer"
-            href={`${runLink}?check_suite_focus=true`}
-            target="_blank"
+            to={`${runLink}?check_suite_focus=true`}
           >
             Details
           </Link>

plugins/jenkins/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx

@@ -15,7 +15,6 @@
  */
 import {
   Box,
-  Link as MaterialLink,
   Paper,
   Table,
   TableBody,
@@ -102,10 +101,12 @@ const BuildWithStepsView = () => {
                 <Typography noWrap>Jenkins</Typography>
               </TableCell>
               <TableCell>
-                <MaterialLink target="_blank" href={value?.url}>
-                  View on Jenkins{' '}
-                  <ExternalLinkIcon className={classes.externalLinkIcon} />
-                </MaterialLink>
+                {value?.url && (
+                  <Link to={value.url}>
+                    View on Jenkins{' '}
+                    <ExternalLinkIcon className={classes.externalLinkIcon} />
+                  </Link>
+                )}
               </TableCell>
             </TableRow>
             <TableRow>
@@ -114,10 +115,12 @@ const BuildWithStepsView = () => {
                 <Typography noWrap>GitHub</Typography>
               </TableCell>
               <TableCell>
-                <MaterialLink target="_blank" href={value?.source?.url}>
-                  View on GitHub{' '}
-                  <ExternalLinkIcon className={classes.externalLinkIcon} />
-                </MaterialLink>
+                {value?.source?.url && (
+                  <Link to={value.source.url}>
+                    View on GitHub{' '}
+                    <ExternalLinkIcon className={classes.externalLinkIcon} />
+                  </Link>
+                )}
               </TableCell>
             </TableRow>
           </TableBody>

plugins/kafka/src/components/ConsumerGroupOffsets/ConsumerGroupOffsets.tsx

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Box, Grid, Typography, Link } from '@material-ui/core';
+import { Box, Grid, Typography } from '@material-ui/core';
 import RetryIcon from '@material-ui/icons/Replay';
 import React from 'react';
 import { useConsumerGroupsOffsetsForEntity } from './useConsumerGroupsOffsetsForEntity';
-import { Table, TableColumn } from '@backstage/core-components';
+import { Table, TableColumn, Link } from '@backstage/core-components';
 
 export type TopicPartitionInfo = {
   topic: string;
@@ -103,11 +103,7 @@ export const ConsumerGroupOffsets = ({
         <Box display="flex" alignItems="center">
           <Typography variant="h6">
             Consumed Topics for {consumerGroup} (
-            {(dashboardUrl && (
-              <Link href={dashboardUrl} target="_blank">
-                {clusterId}
-              </Link>
-            )) ||
+            {(dashboardUrl && <Link to={dashboardUrl}>{clusterId}</Link>) ||
               clusterId}
             )
           </Typography>

plugins/pagerduty/src/components/Incident/IncidentListItem.tsx

@@ -22,7 +22,6 @@ import {
   ListItemText,
   makeStyles,
   IconButton,
-  Link,
   Typography,
   Chip,
 } from '@material-ui/core';
@@ -32,6 +31,7 @@ import { DateTime, Duration } from 'luxon';
 import { PagerDutyIncident } from '../types';
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
 import { BackstageTheme } from '@backstage/theme';
+import { Link } from '@backstage/core-components';
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   denseListIcon: {
@@ -100,13 +100,7 @@ export const IncidentListItem = ({ incident }: Props) => {
         secondary={
           <Typography noWrap variant="body2" color="textSecondary">
             Created {createdAt} and assigned to{' '}
-            <Link
-              href={user?.html_url ?? '#'}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {user?.summary ?? 'nobody'}
-            </Link>
+            <Link to={user?.html_url ?? '#'}>{user?.summary ?? 'nobody'}</Link>
           </Typography>
         }
       />

plugins/rollbar/src/components/RollbarTopItemsTable/RollbarTopItemsTable.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Box, Link, Typography } from '@material-ui/core';
+import { Box, Typography } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React from 'react';
 import {
@@ -24,7 +24,7 @@ import {
 } from '../../api/types';
 import { buildItemUrl } from '../../utils';
 import { TrendGraph } from '../TrendGraph/TrendGraph';
-import { Table, TableColumn } from '@backstage/core-components';
+import { Table, TableColumn, Link } from '@backstage/core-components';
 
 const columns: TableColumn[] = [
   {
@@ -34,11 +34,7 @@ const columns: TableColumn[] = [
     align: 'left',
     width: '70px',
     render: (data: any) => (
-      <Link
-        href={buildItemUrl(data.org, data.project, data.item.counter)}
-        target="_blank"
-        rel="noreferrer"
-      >
+      <Link to={buildItemUrl(data.org, data.project, data.item.counter)}>
         {data.item.counter}
       </Link>
     ),

plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx

@@ -24,6 +24,7 @@ import {
 import {
   Button,
   ItemCardHeader,
+  Link,
   MarkdownContent,
 } from '@backstage/core-components';
 import {
@@ -52,7 +53,6 @@ import {
   CardMedia,
   Chip,
   IconButton,
-  Link,
   makeStyles,
   Tooltip,
   Typography,
@@ -162,7 +162,7 @@ const DeprecationWarning = () => {
     <div className={styles.deprecationIcon}>
       <Tooltip title={Title}>
         <Link
-          href="https://backstage.io/docs/features/software-templates/migrating-from-v1beta2-to-v1beta3"
+          to="https://backstage.io/docs/features/software-templates/migrating-from-v1beta2-to-v1beta3"
           className={styles.link}
         >
           <WarningIcon />

plugins/scaffolder/src/next/TemplateListPage/TemplateCard/CardLink.tsx

@@ -15,7 +15,8 @@
  */
 import { IconComponent } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
-import { Link, makeStyles } from '@material-ui/core';
+import { Link } from '@backstage/core-components';
+import { makeStyles } from '@material-ui/core';
 import React from 'react';
 
 interface CardLinkProps {
@@ -37,7 +38,7 @@ export const CardLink = ({ icon: Icon, text, url }: CardLinkProps) => {
   return (
     <div className={styles.linkText}>
       <Icon fontSize="small" />
-      <Link style={{ marginLeft: '8px' }} href={url}>
+      <Link style={{ marginLeft: '8px' }} to={url}>
         {text || url}
       </Link>
     </div>