Skip to content

Commit 057efc3

Browse files
rhamiltoclaude
andcommitted
CONSOLE-4990: Replace history types with React Router types
Replace `LocationDescriptor` and `Location` types from the history package with `To` and `Location` types from react-router-dom-v5-compat. This is part of the migration to programmatic navigation using React Router hooks instead of the history object. Changes: - Replace LocationDescriptor with To in console-types.ts (SDK) - Replace LocationDescriptor with To in delete-modal.tsx - Replace History.LocationDescriptor with To in LinkStatus.tsx - Replace Location import in telemetry.ts Breaking Change: The UseDeleteModal hook's redirectTo parameter type has changed from LocationDescriptor (history) to To (react-router-dom). Plugin developers should update their imports accordingly. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1 parent 4657529 commit 057efc3

6 files changed

Lines changed: 36 additions & 9 deletions

File tree

frontend/packages/console-dynamic-plugin-sdk/CHANGELOG-core.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ table in [Console dynamic plugins README](./README.md).
2424
- **Type breaking**: Fix inaccurate types in `console.topology/details/resource-link` and
2525
`console.topology/details/tab-section`. ([CONSOLE-4630], [#15893])
2626
- **Type breaking**: Fix inaccurate types in `console.catalog/item-type`. ([CONSOLE-4402], [#14869])
27+
- **Type breaking**: Replace `LocationDescriptor` type from `history` package with `To` type from `react-router-dom-v5-compat` in `UseDeleteModal` hook ([CONSOLE-4990], [#15959])
2728
- Add support for the updated `React.FC` type in `@types/react` version 18 ([CONSOLE-4630], [#15893])
2829
- Make all Console-provided shared modules optional peer dependencies ([CONSOLE-5050], [#15934])
2930

@@ -172,6 +173,7 @@ table in [Console dynamic plugins README](./README.md).
172173
[CONSOLE-4796]: https://issues.redhat.com/browse/CONSOLE-4796
173174
[CONSOLE-4806]: https://issues.redhat.com/browse/CONSOLE-4806
174175
[CONSOLE-4840]: https://issues.redhat.com/browse/CONSOLE-4840
176+
[CONSOLE-4990]: https://issues.redhat.com/browse/CONSOLE-4990
175177
[CONSOLE-5039]: https://issues.redhat.com/browse/CONSOLE-5039
176178
[CONSOLE-5050]: https://issues.redhat.com/browse/CONSOLE-5050
177179
[OCPBUGS-19048]: https://issues.redhat.com/browse/OCPBUGS-19048
@@ -243,3 +245,4 @@ table in [Console dynamic plugins README](./README.md).
243245
[#15778]: https://github.com/openshift/console/pull/15778
244246
[#15893]: https://github.com/openshift/console/pull/15893
245247
[#15934]: https://github.com/openshift/console/pull/15934
248+
[#15959]: https://github.com/openshift/console/pull/15959

frontend/packages/console-dynamic-plugin-sdk/release-notes/4.22.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,32 @@ The `@openshift-console/plugin-shared` package has been removed from the Console
1818
corresponding npm package is deprecated. Plugins should remove this dependency from their `package.json`
1919
if present.
2020

21+
## Migration from `history` package to React Router types
22+
23+
Console has migrated from using the `history` package to React Router's native types. This affects
24+
the following public API types:
25+
26+
- `UseDeleteModal` hook's `redirectTo` parameter type has changed from `LocationDescriptor` (from `history`)
27+
to `To` (from `react-router-dom-v5-compat`)
28+
29+
### Migration guide
30+
31+
If your plugin uses the `useDeleteModal` hook and passes a `redirectTo` parameter, update your imports:
32+
33+
```diff
34+
- import { LocationDescriptor } from 'history';
35+
+ import { To } from 'react-router-dom-v5-compat';
36+
37+
const MyComponent = ({ resource }) => {
38+
- const launchDeleteModal = useDeleteModal(resource, redirectTo as LocationDescriptor);
39+
+ const launchDeleteModal = useDeleteModal(resource, redirectTo as To);
40+
// ...
41+
};
42+
```
43+
44+
The `To` type is compatible with the previous `LocationDescriptor` type (accepts strings and location
45+
objects), so most plugins should only need to update their imports.
46+
2147
## React 18 upgrade tips
2248

2349
Console now uses React 18. The following guidance highlights common update considerations

frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import { QuickStartContextValues } from '@patternfly/quickstarts';
1010
import { CodeEditorProps as PfCodeEditorProps } from '@patternfly/react-code-editor';
1111
import { ButtonProps } from '@patternfly/react-core';
1212
import { ICell, OnSelect, SortByDirection, TableGridBreakpoint } from '@patternfly/react-table';
13-
import { LocationDescriptor } from 'history';
1413
import type { TFunction } from 'i18next';
1514
import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
15+
import { To } from 'react-router-dom-v5-compat';
1616
import type {
1717
ExtensionK8sGroupKindModel,
1818
K8sModel,
@@ -774,7 +774,7 @@ export type UseAnnotationsModal = (resource: K8sResourceCommon) => () => void;
774774

775775
export type UseDeleteModal = (
776776
resource: K8sResourceCommon,
777-
redirectTo?: LocationDescriptor,
777+
redirectTo?: To,
778778
message?: JSX.Element,
779779
btnText?: ReactNode,
780780
deleteAllResources?: () => Promise<K8sResourceKind[]>,

frontend/packages/console-shared/src/components/status/LinkStatus.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import type { FC, ComponentProps } from 'react';
2-
import * as History from 'history';
3-
import { Link } from 'react-router-dom-v5-compat';
2+
import { Link, To } from 'react-router-dom-v5-compat';
43
import { StatusIconAndText } from '@console/dynamic-plugin-sdk';
54

65
const LinkStatus: FC<LinkStatusProps> = ({ linkTitle, linkTo, ...other }) =>
@@ -14,7 +13,7 @@ const LinkStatus: FC<LinkStatusProps> = ({ linkTitle, linkTo, ...other }) =>
1413

1514
type LinkStatusProps = ComponentProps<typeof StatusIconAndText> & {
1615
linkTitle?: string;
17-
linkTo?: History.LocationDescriptor;
16+
linkTo?: To;
1817
};
1918

2019
export default LinkStatus;

frontend/public/components/modals/delete-modal.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { FC, ReactNode } from 'react';
33
import { useState, useCallback, useEffect } from 'react';
44
import { Alert, Backdrop, Checkbox, Modal, ModalVariant } from '@patternfly/react-core';
55
import { Trans, useTranslation } from 'react-i18next';
6-
import { useNavigate } from 'react-router-dom-v5-compat';
6+
import { useNavigate, To } from 'react-router-dom-v5-compat';
77
import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
88
import {
99
ModalTitle,
@@ -25,7 +25,6 @@ import { YellowExclamationTriangleIcon } from '@console/shared/src/components/st
2525
import { ClusterServiceVersionModel } from '@console/operator-lifecycle-manager/src/models';
2626
import { findOwner } from '../../module/k8s/managed-by';
2727

28-
import { LocationDescriptor } from 'history';
2928
import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
3029

3130
//Modal for resource deletion and allows cascading deletes if propagationPolicy is provided for the enum
@@ -191,7 +190,7 @@ export const DeleteModalOverlay: OverlayComponent<DeleteModalProps> = (props) =>
191190
export type DeleteModalProps = {
192191
kind: K8sModel;
193192
resource: K8sResourceKind;
194-
redirectTo?: LocationDescriptor;
193+
redirectTo?: To;
195194
message?: JSX.Element;
196195
btnText?: ReactNode;
197196
deleteAllResources?: () => Promise<K8sResourceKind[]>;

frontend/public/components/utils/telemetry.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Location } from 'history';
1+
import { Location } from 'react-router-dom-v5-compat';
22
import { getBrandingDetails } from './branding';
33

44
/**

0 commit comments

Comments
 (0)