@openshift-assisted/ui-lib 2.11.3-cim → 2.12.0-cim

package/lib/ocm/components/clusters/ClustersListToolbar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import {
   Toolbar,
   ToolbarItem,
@@ -23,7 +23,6 @@ import { SyncIcon } from '@patternfly/react-icons/dist/js/icons/sync-icon';
 import { clusterStatusLabels, isSelectEventChecked, ToolbarButton } from '../../../common';
 import { ResourceUIState } from '../../../common';
 import { fetchClustersAsync } from '../../store/slices/clusters/slice';
-import { routeBasePath } from '../../config';
 import omit from 'lodash-es/omit.js';
 import { TFunction } from 'i18next';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -52,7 +51,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
   setFilters,
 }) => {
   const [isStatusExpanded, setStatusExpanded] = React.useState(false);
-  const history = useHistory();
+  const navigate = useNavigate();
   const clustersUIState = useSelectorDay1(selectClustersUIState);
   const dispatch = useDispatchDay1();
   const fetchClusters = React.useCallback(() => void dispatch(fetchClustersAsync()), [dispatch]);
@@ -153,7 +152,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
         </ToolbarFilter>
         <ToolbarButton
           variant={ButtonVariant.primary}
-          onClick={() => history.push(`${routeBasePath}/clusters/~new`)}
+          onClick={() => navigate(`~new`)}
           id="button-create-new-cluster"
           data-ouia-id="button-create-new-cluster"
         >

package/lib/ocm/components/clusters/NewClusterPage.tsx

@@ -11,9 +11,7 @@ import { ClusterUiError } from './ClusterPageErrors';
 import { NewFeatureSupportLevelProvider } from '../featureSupportLevels';
 import { AssistedInstallerHeader } from './AssistedInstallerHeader';
 
-const NewClusterPageGeneric: React.FC<{ pageTitleSection?: ReactNode }> = ({
-  pageTitleSection,
-}) => {
+const NewClusterPageGeneric = ({ pageTitleSection }: { pageTitleSection?: ReactNode }) => {
   return (
     <AlertsContextProvider>
       <SentryErrorMonitorContextProvider>
@@ -35,7 +33,7 @@ const NewClusterPageGeneric: React.FC<{ pageTitleSection?: ReactNode }> = ({
   );
 };
 
-const NewClusterTitleSection: React.FC = () => (
+const NewClusterTitleSection = () => (
   <>
     <ClusterBreadcrumbs clusterName="New cluster" />
     <PageSection variant={PageSectionVariants.light}>
@@ -44,7 +42,7 @@ const NewClusterTitleSection: React.FC = () => (
   </>
 );
 
-export const NewSingleClusterPage: React.FC = () => <NewClusterPageGeneric />;
-export const NewClusterPage: React.FC = () => (
+export const NewSingleClusterPage = () => <NewClusterPageGeneric />;
+export const NewClusterPage = () => (
   <NewClusterPageGeneric pageTitleSection={<NewClusterTitleSection />} />
 );

package/lib/ocm/components/ui/Buttons/BackButton.tsx

@@ -1,12 +1,10 @@
-import { Link } from 'react-router-dom';
-import type { LinkProps } from 'react-router-dom';
-import type { LocationState } from 'history';
+import { Link, LinkProps } from 'react-router-dom-v5-compat';
 import type { ButtonProps } from '@patternfly/react-core';
 import { Button } from '@patternfly/react-core';
 import React from 'react';
 
 export type BackButtonProps = {
-  to: LinkProps<LocationState>['to'];
+  to: LinkProps['to'];
   variant?: ButtonProps['variant'];
 };
 export const BackButton = ({ to, variant = 'secondary' }: BackButtonProps) => (

package/lib/ocm/store/slices/clusters/selectors.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createSelector } from '@reduxjs/toolkit';
 import type { IRow, IRowData } from '@patternfly/react-table';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import type { TFunction } from 'i18next';
 import {
   DASH,
@@ -14,7 +14,6 @@ import {
 } from '../../../../common';
 import type { ClusterTableRows, HumanizedSortable } from '../../../../common';
 import ClusterStatus, { getClusterStatusText } from '../../../components/clusters/ClusterStatus';
-import { routeBasePath } from '../../../config';
 import { RootStateDay1 } from '../../store-day1';
 import type { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
@@ -53,7 +52,7 @@ const clusterToClusterTableRow = (cluster: Cluster, t: TFunction): IRow => {
     cells: [
       {
         title: (
-          <Link key={name} to={`${routeBasePath}/clusters/${id}`} id={`cluster-link-${id}`}>
+          <Link key={name} to={id} id={`cluster-link-${id}`}>
             {name}
           </Link>
         ),

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.11.3-cim",
-    "@openshift-assisted/types": "2.11.3-cim",
+    "@openshift-assisted/locales": "2.12.0-cim",
+    "@openshift-assisted/types": "2.12.0-cim",
     "@openshift-console/dynamic-plugin-sdk": "0.0.3",
     "@patternfly/patternfly": "^4.222.4",
     "@patternfly/react-code-editor": "^4.82.113",
@@ -103,7 +103,7 @@
     "react-i18next": ">11.7.3",
     "react-monaco-editor": "^0.51.0",
     "react-redux": "^8.0.5",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom-v5-compat": "^6.21.2",
     "react-tagsinput": "^3.20",
     "redux": "^4",
     "uuid": "^8.1",
@@ -141,5 +141,5 @@
       ]
     }
   },
-  "version": "2.11.3-cim"
+  "version": "2.12.0-cim"
 }

package/build/@types/ocm/components/ui/RedirectToCluster.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { History } from 'history';
-export declare const redirectToCluster: (history: History, id: string) => void;
-declare const RedirectToCluster: React.FC<{
-    id: string;
-}>;
-export default RedirectToCluster;
-//# sourceMappingURL=RedirectToCluster.d.ts.map

package/build/@types/ocm/components/ui/RedirectToCluster.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RedirectToCluster.d.ts","sourceRoot":"","sources":["../../../../../lib/ocm/components/ui/RedirectToCluster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAGlC,eAAO,MAAM,iBAAiB,YAAa,OAAO,MAAM,MAAM,SAE7D,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAE/C,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/build/cjs/ocm/components/ui/RedirectToCluster.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.redirectToCluster = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const react_router_dom_1 = require("react-router-dom");
-const config_1 = require("../../config");
-const redirectToCluster = (history, id) => {
-    history.push(`${config_1.routeBasePath}/clusters/${id}`);
-};
-exports.redirectToCluster = redirectToCluster;
-const RedirectToCluster = ({ id }) => (react_1.default.createElement(react_router_dom_1.Redirect, { to: `${config_1.routeBasePath}/clusters/${id}` }));
-exports.default = RedirectToCluster;
-//# sourceMappingURL=RedirectToCluster.js.map

package/build/cjs/ocm/components/ui/RedirectToCluster.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RedirectToCluster.js","sourceRoot":"","sources":["../../../../../lib/ocm/components/ui/RedirectToCluster.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,uDAA4C;AAE5C,yCAA6C;AAEtC,MAAM,iBAAiB,GAAG,CAAC,OAAgB,EAAE,EAAU,EAAE,EAAE;IAChE,OAAO,CAAC,IAAI,CAAC,GAAG,sBAAa,aAAa,EAAE,EAAE,CAAC,CAAC;AAClD,CAAC,CAAC;AAFW,QAAA,iBAAiB,qBAE5B;AAEF,MAAM,iBAAiB,GAA6B,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAC9D,8BAAC,2BAAQ,IAAC,EAAE,EAAE,GAAG,sBAAa,aAAa,EAAE,EAAE,GAAI,CACpD,CAAC;AAEF,kBAAe,iBAAiB,CAAC"}

package/lib/ocm/components/ui/RedirectToCluster.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Redirect } from 'react-router-dom';
-import { History } from 'history';
-import { routeBasePath } from '../../config';
-
-export const redirectToCluster = (history: History, id: string) => {
-  history.push(`${routeBasePath}/clusters/${id}`);
-};
-
-const RedirectToCluster: React.FC<{ id: string }> = ({ id }) => (
-  <Redirect to={`${routeBasePath}/clusters/${id}`} />
-);
-
-export default RedirectToCluster;