refactor: replace @material-ui Link

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

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}