fix(routing): fix Link routing when using custom basepath (#1539)

src/app/AppLayout/AppLayout.tsx

@@ -25,6 +25,7 @@ import { GlobalQuickStartDrawer } from '@app/QuickStarts/QuickStartDrawer';
 import { IAppRoute, navGroups, routes } from '@app/routes';
 import { ThemeSetting, SettingTab } from '@app/Settings/types';
 import { DARK_THEME_CLASS, selectTab, tabAsParam } from '@app/Settings/utils';
+import { CryostatLink } from '@app/Shared/Components/CryostatLink';
 import { DynamicFeatureFlag, FeatureFlag } from '@app/Shared/Components/FeatureFlag';
 import { NotificationCategory, Notification } from '@app/Shared/Services/api.types';
 import { NotificationsContext } from '@app/Shared/Services/Notifications.service';
@@ -507,9 +508,9 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
           </MastheadToggle>
           <MastheadMain>
             <MastheadBrand component={'div'}>
-              <Link to="/">
+              <CryostatLink to={'/'}>
                 <Brand alt="Cryostat" src={cryostatLogo} className="cryostat-logo" />
-              </Link>
+              </CryostatLink>
             </MastheadBrand>
             <DynamicFeatureFlag levels={[FeatureLevel.DEVELOPMENT, FeatureLevel.BETA]} component={levelBadge} />
           </MastheadMain>

src/app/BreadcrumbPage/BreadcrumbPage.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { CryostatLink } from '@app/Shared/Components/CryostatLink';
 import {
   Breadcrumb,
   BreadcrumbHeading,
@@ -23,7 +24,6 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import * as React from 'react';
-import { Link } from 'react-router-dom-v5-compat';
 import { BreadcrumbTrail } from './types';
 import { isItemFilled } from './utils';
 
@@ -40,7 +40,7 @@ export const BreadcrumbPage: React.FC<BreadcrumbPageProps> = ({ pageTitle, bread
         <Breadcrumb>
           {(breadcrumbs || []).map(({ title, path }) => (
             <BreadcrumbItem key={path}>
-              <Link to={path}>{title}</Link>
+              <CryostatLink to={path}>{title}</CryostatLink>
             </BreadcrumbItem>
           ))}
           <BreadcrumbHeading>{pageTitle}</BreadcrumbHeading>

src/app/NotFound/NotFoundCard.tsx

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
+import { CryostatLink } from '@app/Shared/Components/CryostatLink';
 import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 import * as React from 'react';
-import { Link } from 'react-router-dom-v5-compat';
-
 export interface NotFoundCardProps {
   title: React.ReactNode;
   bodyText: React.ReactNode;
@@ -31,7 +30,7 @@ export const NotFoundCard: React.FC<NotFoundCardProps> = ({ title, bodyText, lin
       <CardTitle>{title}</CardTitle>
       <CardBody isFilled>{bodyText}</CardBody>
       <CardFooter>
-        <Link to={linkPath}>{linkText}</Link>
+        <CryostatLink to={linkPath}>{linkText}</CryostatLink>
       </CardFooter>
     </Card>
   );

src/app/Rules/Rules.tsx

@@ -15,6 +15,7 @@
  */
 import { BreadcrumbPage } from '@app/BreadcrumbPage/BreadcrumbPage';
 import { DeleteOrDisableWarningType } from '@app/Modal/types';
+import { CryostatLink } from '@app/Shared/Components/CryostatLink';
 import { EmptyText } from '@app/Shared/Components/EmptyText';
 import { LoadingView } from '@app/Shared/Components/LoadingView';
 import { MatchExpressionDisplay } from '@app/Shared/Components/MatchExpression/MatchExpressionDisplay';
@@ -60,7 +61,7 @@ import {
 import _ from 'lodash';
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { Link, useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { first } from 'rxjs/operators';
 import { RuleDeleteWarningModal } from './RuleDeleteWarningModal';
 import { RuleUploadModal } from './RulesUploadModal';
@@ -497,10 +498,10 @@ export const RulesTable: React.FC<RulesTableProps> = () => {
                 <Trans
                   t={t}
                   components={[
-                    <Link to={'/recordings'} />,
-                    <Link to={'/events'} />,
-                    <Link to={'/security'} />,
-                    <Link to={'/archives'} />,
+                    <CryostatLink to={'/recordings'} />,
+                    <CryostatLink to={'/events'} />,
+                    <CryostatLink to={'/security'} />,
+                    <CryostatLink to={'/archives'} />,
                   ]}
                 >
                   Rules.ABOUT_BODY

src/app/Shared/Components/CryostatLink.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright The Cryostat Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { toPath } from '@app/utils/utils';
+import React from 'react';
+import { Link } from 'react-router-dom-v5-compat';
+
+export const CryostatLink: React.FC<{ to: string }> = ({ to, ...props }) => {
+  return <Link to={toPath(to)} {...props}></Link>;
+};

src/app/Topology/Actions/QuickSearchPanel.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { CryostatLink } from '@app/Shared/Components/CryostatLink';
 import { NotificationsContext } from '@app/Shared/Services/Notifications.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useFeatureLevel } from '@app/utils/hooks/useFeatureLevel';
@@ -48,7 +49,7 @@ import { css } from '@patternfly/react-styles';
 import { useHover } from '@patternfly/react-topology';
 import _ from 'lodash';
 import * as React from 'react';
-import { Link, useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import QuickSearchIcon from '../../Shared/Components/QuickSearchIcon';
 import quickSearches, { QuickSearchId, quickSearchIds } from './quicksearches/all-quick-searches';
 import { QuickSearchItem } from './types';
@@ -218,7 +219,8 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({ isOpen, onCl
   const description = React.useMemo(() => {
     return (
       <span>
-        For quickstarts on how to create these entities, visit <Link to={'/quickstarts'}>Quick Starts</Link>.
+        For quickstarts on how to create these entities, visit{' '}
+        <CryostatLink to={'/quickstarts'}>Quick Starts</CryostatLink>.
       </span>
     );
   }, []);

src/app/Topology/Shared/Components/TopologyEmptyState.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { CryostatLink } from '@app/Shared/Components/CryostatLink';
 import { topologyDeleteAllFiltersIntent } from '@app/Shared/Redux/ReduxStore';
 import { getAllLeaves } from '@app/Shared/Services/api.utils';
 import { SearchExprServiceContext } from '@app/Shared/Services/service.utils';
@@ -30,7 +31,6 @@ import {
 import { TopologyIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
-import { Link } from 'react-router-dom-v5-compat';
 import { DiscoveryTreeContext } from '../utils';
 
 export interface TopologyEmptyStateProps {}
@@ -49,7 +49,7 @@ export const TopologyEmptyState: React.FC<TopologyEmptyStateProps> = ({ ...props
       return (
         <EmptyStateActions>
           Start launching a Java application or define a{' '}
-          <Link to={'/topology/create-custom-target'}>Custom Target</Link>.
+          <CryostatLink to={'/topology/create-custom-target'}>Custom Target</CryostatLink>.
         </EmptyStateActions>
       );
     }