Merge pull request #3037 from spotify/freben/linkit

fix(catalog): make the About card links use react-router properly

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

@@ -125,9 +125,7 @@ export function AboutCard({ entity, variant }: AboutCardProps) {
               disabled={!entity.spec?.implementsApis}
               label="View API"
               icon={<BrightnessAutoIcon />}
-              href={`./${
-                entity.metadata.namespace || ENTITY_DEFAULT_NAMESPACE
-              }:${entity.metadata.name}/api`}
+              href="api"
             />
           </nav>
         }

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

@@ -17,6 +17,7 @@ import * as React from 'react';
 import classnames from 'classnames';
 import { makeStyles, Link } from '@material-ui/core';
 import LinkIcon from '@material-ui/icons/Link';
+import { Link as RouterLink } from 'react-router-dom';
 
 export type IconLinkVerticalProps = {
   icon?: React.ReactNode;
@@ -64,8 +65,18 @@ export function IconLinkVertical({
     );
   }
 
+  // Absolute links should not be using RouterLink
+  if (href?.startsWith('//') || href?.includes('://')) {
+    return (
+      <Link className={classes.link} href={href} {...props}>
+        {icon}
+        <span className={classes.label}>{props.label}</span>
+      </Link>
+    );
+  }
+
   return (
-    <Link className={classes.link} href={href} {...props}>
+    <Link className={classes.link} to={href} component={RouterLink} {...props}>
       {icon}
       <span className={classes.label}>{props.label}</span>
     </Link>

plugins/catalog/src/components/Router.tsx

@@ -31,7 +31,7 @@ const DefaultEntityPage = () => (
       title="Overview"
       element={
         <Content>
-          <Typography variant="h2">This is default entity page. </Typography>
+          <Typography variant="h2">This is the default entity page.</Typography>
           <Typography variant="body1">
             To override this component with your custom implementation, read
             docs on{' '}
@@ -62,9 +62,9 @@ export const Router = ({
   EntityPage?: ComponentType;
 }) => (
   <Routes>
-    <Route path={`/${rootRoute.path}`} element={<CatalogPage />} />
+    <Route path={`${rootRoute.path}`} element={<CatalogPage />} />
     <Route
-      path={`/${entityRoute.path}`}
+      path={`${entityRoute.path}`}
       element={
         <EntityProvider>
           <EntityPageSwitch EntityPage={EntityPage} />