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

src/app/AppLayout/AppLayout.tsx

@@ -507,7 +507,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
           </MastheadToggle>
           <MastheadMain>
             <MastheadBrand component={'div'}>
-              <Link to="/">
+              <Link to={toPath("/")}>
                 <Brand alt="Cryostat" src={cryostatLogo} className="cryostat-logo" />
               </Link>
             </MastheadBrand>

src/app/BreadcrumbPage/BreadcrumbPage.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { toPath } from '@app/utils/utils';
 import {
   Breadcrumb,
   BreadcrumbHeading,
@@ -40,7 +41,7 @@ export const BreadcrumbPage: React.FC<BreadcrumbPageProps> = ({ pageTitle, bread
         <Breadcrumb>
           {(breadcrumbs || []).map(({ title, path }) => (
             <BreadcrumbItem key={path}>
-              <Link to={path}>{title}</Link>
+              <Link to={toPath(path)}>{title}</Link>
             </BreadcrumbItem>
           ))}
           <BreadcrumbHeading>{pageTitle}</BreadcrumbHeading>

src/app/NotFound/NotFoundCard.tsx

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

src/app/Rules/Rules.tsx

@@ -21,7 +21,7 @@ import { MatchExpressionDisplay } from '@app/Shared/Components/MatchExpression/M
 import { Rule, NotificationCategory } from '@app/Shared/Services/api.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
-import { TableColumn, formatBytes, formatDuration, sortResources, portalRoot } from '@app/utils/utils';
+import { TableColumn, formatBytes, formatDuration, sortResources, portalRoot, toPath } from '@app/utils/utils';
 import { useCryostatTranslation } from '@i18n/i18nextUtil';
 import {
   Button,
@@ -497,10 +497,10 @@ export const RulesTable: React.FC<RulesTableProps> = () => {
                 <Trans
                   t={t}
                   components={[
-                    <Link to={'/recordings'} />,
-                    <Link to={'/events'} />,
-                    <Link to={'/security'} />,
-                    <Link to={'/archives'} />,
+                    <Link to={toPath('/recordings')} />,
+                    <Link to={toPath('/events')} />,
+                    <Link to={toPath('/security')} />,
+                    <Link to={toPath('/archives')} />,
                   ]}
                 >
                   Rules.ABOUT_BODY

src/app/Topology/Actions/QuickSearchPanel.tsx

@@ -16,7 +16,7 @@
 import { NotificationsContext } from '@app/Shared/Services/Notifications.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useFeatureLevel } from '@app/utils/hooks/useFeatureLevel';
-import { portalRoot } from '@app/utils/utils';
+import { portalRoot, toPath } from '@app/utils/utils';
 import {
   Bullseye,
   Button,
@@ -218,7 +218,7 @@ 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 <Link to={toPath('/quickstarts')}>Quick Starts</Link>.
       </span>
     );
   }, []);

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

@@ -16,6 +16,7 @@
 import { topologyDeleteAllFiltersIntent } from '@app/Shared/Redux/ReduxStore';
 import { getAllLeaves } from '@app/Shared/Services/api.utils';
 import { SearchExprServiceContext } from '@app/Shared/Services/service.utils';
+import { toPath } from '@app/utils/utils';
 import {
   Bullseye,
   Button,
@@ -49,7 +50,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>.
+          <Link to={toPath('/topology/create-custom-target')}>Custom Target</Link>.
         </EmptyStateActions>
       );
     }