From e3838b9b987a01b39e0efb3cecdf967633919a78 Mon Sep 17 00:00:00 2001 From: aptmac Date: Fri, 24 Jan 2025 16:46:53 -0500 Subject: [PATCH] fix(routing): fix Link routing when using custom basepath (#1539) --- src/app/AppLayout/AppLayout.tsx | 5 ++-- src/app/BreadcrumbPage/BreadcrumbPage.tsx | 4 ++-- src/app/NotFound/NotFoundCard.tsx | 5 ++-- src/app/Rules/Rules.tsx | 11 +++++---- src/app/Shared/Components/CryostatLink.tsx | 23 +++++++++++++++++++ src/app/Topology/Actions/QuickSearchPanel.tsx | 6 +++-- .../Shared/Components/TopologyEmptyState.tsx | 4 ++-- 7 files changed, 42 insertions(+), 16 deletions(-) create mode 100644 src/app/Shared/Components/CryostatLink.tsx diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx index 7b6a9895a..6a4fabc08 100644 --- a/src/app/AppLayout/AppLayout.tsx +++ b/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 = ({ children }) => { - + - + diff --git a/src/app/BreadcrumbPage/BreadcrumbPage.tsx b/src/app/BreadcrumbPage/BreadcrumbPage.tsx index 43cd5970b..9d8c291eb 100644 --- a/src/app/BreadcrumbPage/BreadcrumbPage.tsx +++ b/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 = ({ pageTitle, bread {(breadcrumbs || []).map(({ title, path }) => ( - {title} + {title} ))} {pageTitle} diff --git a/src/app/NotFound/NotFoundCard.tsx b/src/app/NotFound/NotFoundCard.tsx index 1045317a8..befa0a40e 100644 --- a/src/app/NotFound/NotFoundCard.tsx +++ b/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 = ({ title, bodyText, lin {title} {bodyText} - {linkText} + {linkText} ); diff --git a/src/app/Rules/Rules.tsx b/src/app/Rules/Rules.tsx index 18381059c..48818d927 100644 --- a/src/app/Rules/Rules.tsx +++ b/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 = () => { , - , - , - , + , + , + , + , ]} > Rules.ABOUT_BODY diff --git a/src/app/Shared/Components/CryostatLink.tsx b/src/app/Shared/Components/CryostatLink.tsx new file mode 100644 index 000000000..266304811 --- /dev/null +++ b/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 ; +}; diff --git a/src/app/Topology/Actions/QuickSearchPanel.tsx b/src/app/Topology/Actions/QuickSearchPanel.tsx index c63b33cca..c48d2b83b 100644 --- a/src/app/Topology/Actions/QuickSearchPanel.tsx +++ b/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 = ({ isOpen, onCl const description = React.useMemo(() => { return ( - For quickstarts on how to create these entities, visit Quick Starts. + For quickstarts on how to create these entities, visit{' '} + Quick Starts. ); }, []); diff --git a/src/app/Topology/Shared/Components/TopologyEmptyState.tsx b/src/app/Topology/Shared/Components/TopologyEmptyState.tsx index 58d4786cc..85c37eb8a 100644 --- a/src/app/Topology/Shared/Components/TopologyEmptyState.tsx +++ b/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 = ({ ...props return ( Start launching a Java application or define a{' '} - Custom Target. + Custom Target. ); }