diff --git a/package.json b/package.json index 9be85265..42eced8f 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,6 @@ "@types/react": "^17.0.37", "@types/react-helmet": "^6.1.4", "@types/react-redux": "6.0.2", - "@types/react-router-dom": "^5.3.2", "@types/react-transition-group": "2.x", "@types/react-virtualized": "9.x", "@typescript-eslint/eslint-plugin": "^5.14.0", @@ -107,9 +106,7 @@ "react-linkify": "^0.2.2", "react-monaco-editor": "0.46.x", "react-rnd": "^10.3.4", - "react-router": "5.3.x", - "react-router-dom": "5.3.x", - "react-router-dom-v5-compat": "^6.11.2", + "react-router-dom-v5-compat": "^6.30.0", "react-transition-group": "2.3.x", "react-virtualized": "9.x", "resolve-url-loader": "5.0.0", diff --git a/src/components/details-page/breadcrumbs/BreadCrumbs.tsx b/src/components/details-page/breadcrumbs/BreadCrumbs.tsx index 09cd8e3e..9e7f32c2 100644 --- a/src/components/details-page/breadcrumbs/BreadCrumbs.tsx +++ b/src/components/details-page/breadcrumbs/BreadCrumbs.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom-v5-compat'; import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'; type BreadCrumbsProps = { diff --git a/src/components/pipeline-builder/PipelineBuilderEditPage.tsx b/src/components/pipeline-builder/PipelineBuilderEditPage.tsx index 544f1ccd..cf49f6a6 100644 --- a/src/components/pipeline-builder/PipelineBuilderEditPage.tsx +++ b/src/components/pipeline-builder/PipelineBuilderEditPage.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Alert } from '@patternfly/react-core'; import { useTranslation } from 'react-i18next'; -import { Link, RouteComponentProps } from 'react-router-dom'; +import { Link, useParams } from 'react-router-dom-v5-compat'; import { PipelineModel } from '../../models'; import { PipelineKind } from '../../types'; import PipelineBuilderPage from './PipelineBuilderPage'; @@ -10,16 +10,8 @@ import { LoadingBox } from '../status/status-box'; import { k8sGet } from '@openshift-console/dynamic-plugin-sdk'; import './PipelineBuilderEditPage.scss'; -import { useParams } from 'react-router-dom-v5-compat'; -type PipelineBuilderEditPageProps = RouteComponentProps<{ - ns: string; - pipelineName: string; -}>; - -const PipelineBuilderEditPage: React.FC = ( - props, -) => { +const PipelineBuilderEditPage: React.FC = (props) => { const { t } = useTranslation('plugin__pipelines-console-plugin'); const [editPipeline, setEditPipeline] = React.useState(null); const [error, setError] = React.useState(null); diff --git a/src/components/pipeline-builder/PipelineBuilderPage.tsx b/src/components/pipeline-builder/PipelineBuilderPage.tsx index e08ff8fa..f81b2fd6 100644 --- a/src/components/pipeline-builder/PipelineBuilderPage.tsx +++ b/src/components/pipeline-builder/PipelineBuilderPage.tsx @@ -3,7 +3,6 @@ import { Formik, FormikBag } from 'formik'; import { load } from 'js-yaml'; import { Helmet } from 'react-helmet'; import { useTranslation } from 'react-i18next'; -import { useHistory } from 'react-router-dom'; import { PipelineKind } from '../../types'; import { initialPipelineFormData } from './const'; import { sanitizeToYaml } from './form-switcher-validation'; @@ -21,7 +20,7 @@ import { validationSchema } from './validation-utils'; import { k8sCreate, k8sUpdate } from '@openshift-console/dynamic-plugin-sdk'; import { returnValidPipelineModel } from '../utils/pipeline-utils'; import { getReferenceForModel } from '../pipelines-overview/utils'; -import { useParams } from 'react-router-dom-v5-compat'; +import { useNavigate, useParams } from 'react-router-dom-v5-compat'; import './PipelineBuilderPage.scss'; @@ -31,7 +30,7 @@ type PipelineBuilderPageProps = { const PipelineBuilderPage: React.FC = (props) => { const { t } = useTranslation('plugin__pipelines-console-plugin'); - const history = useHistory(); + const navigate = useNavigate(); const { ns } = useParams(); const { existingPipeline } = props; @@ -87,7 +86,7 @@ const PipelineBuilderPage: React.FC = (props) => { return resourceCall .then(() => { - history.push( + navigate( `/k8s/ns/${ns}/${getReferenceForModel(pipelineModel)}/${ pipeline.metadata.name }`, @@ -106,7 +105,7 @@ const PipelineBuilderPage: React.FC = (props) => { navigate(-1)} validationSchema={validationSchema(t)} > {(formikProps) => ( diff --git a/src/components/pipelineRuns-details/PipelineRunCustomDetails.tsx b/src/components/pipelineRuns-details/PipelineRunCustomDetails.tsx index e8a5a96d..129522b6 100644 --- a/src/components/pipelineRuns-details/PipelineRunCustomDetails.tsx +++ b/src/components/pipelineRuns-details/PipelineRunCustomDetails.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { ClipboardCopy } from '@patternfly/react-core'; import { useTranslation } from 'react-i18next'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom-v5-compat'; import { getPLRLogSnippet } from '../logs/pipelineRunLogSnippet'; import RunDetailsErrorLog from '../logs/RunDetailsErrorLog'; import { getReferenceForModel } from '../pipelines-overview/utils'; diff --git a/src/components/pipelineRuns-details/PipelineRunDetailsPage.tsx b/src/components/pipelineRuns-details/PipelineRunDetailsPage.tsx index 730dadb9..1a9f057a 100644 --- a/src/components/pipelineRuns-details/PipelineRunDetailsPage.tsx +++ b/src/components/pipelineRuns-details/PipelineRunDetailsPage.tsx @@ -14,7 +14,7 @@ import { TextVariants, Tooltip, } from '@patternfly/react-core'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom-v5-compat'; import { useTranslation } from 'react-i18next'; import { navFactory } from '../utils/horizontal-nav'; import PipelineRunDetails from './PipelineRunDetails'; diff --git a/src/components/pipelines-details/PipelineDetailsPage.tsx b/src/components/pipelines-details/PipelineDetailsPage.tsx index 9af0abcf..53734b27 100644 --- a/src/components/pipelines-details/PipelineDetailsPage.tsx +++ b/src/components/pipelines-details/PipelineDetailsPage.tsx @@ -1,7 +1,6 @@ import { BreadcrumbItem, Text, TextVariants } from '@patternfly/react-core'; -import { Link, useHistory } from 'react-router-dom'; import * as React from 'react'; -import { useNavigate, useParams } from 'react-router-dom-v5-compat'; +import { Link, useNavigate, useParams } from 'react-router-dom-v5-compat'; import { useTranslation } from 'react-i18next'; import { getGroupVersionKindForModel, @@ -38,7 +37,6 @@ import { ErrorPage404 } from '../common/error'; const PipelineDetailsPage = () => { const { t } = useTranslation('plugin__pipelines-console-plugin'); const params = useParams(); - const history = useHistory(); const navigate = useNavigate(); const { name, ns: namespace } = params; const [pipeline, loaded, loadError] = useK8sWatchResource({ @@ -205,7 +203,7 @@ const PipelineDetailsPage = () => { label: t('Edit {{resourceKind}}', { resourceKind: PipelineModel.kind, }), - onClick: () => history.push(editURL), + onClick: () => navigate(editURL), disabled: !canEditResource[0], }, { diff --git a/src/components/pipelines-list/PipelineKebab.tsx b/src/components/pipelines-list/PipelineKebab.tsx index 404862b6..1dea4846 100644 --- a/src/components/pipelines-list/PipelineKebab.tsx +++ b/src/components/pipelines-list/PipelineKebab.tsx @@ -35,7 +35,6 @@ import { import { useNavigate } from 'react-router-dom-v5-compat'; import { errorModal } from '../modals/error-modal'; import { getPipelineRunData } from '../start-pipeline/utils'; -import { useHistory } from 'react-router-dom'; import { getReferenceForModel } from '../pipelines-overview/utils'; import { rerunPipeline } from '../utils/pipelines-actions'; import { usePipelineTriggerTemplateNames } from '../utils/triggers'; @@ -62,7 +61,6 @@ const PipelineKebab: React.FC = ({ pipeline }) => { const launchLabelsModal = useLabelsModal(pipeline); const launchModal = useModal(); const navigate = useNavigate(); - const history = useHistory(); const [isOpen, setIsOpen] = React.useState(false); const templateNames = usePipelineTriggerTemplateNames(name, namespace) || []; const onToggle = () => { @@ -215,7 +213,7 @@ const PipelineKebab: React.FC = ({ pipeline }) => { history.push(editURL)} + onClick={() => navigate(editURL)} isDisabled={!canEditResource} data-test-action={KEBAB_ACTION_EDIT_ID} > diff --git a/src/components/pipelines-list/status/LinkedPipelineRunTaskStatus.tsx b/src/components/pipelines-list/status/LinkedPipelineRunTaskStatus.tsx index 64eeb9fd..ceffd021 100644 --- a/src/components/pipelines-list/status/LinkedPipelineRunTaskStatus.tsx +++ b/src/components/pipelines-list/status/LinkedPipelineRunTaskStatus.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useTranslation } from 'react-i18next'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom-v5-compat'; import { PipelineRunKind, TaskRunKind } from '../../../types'; import { PipelineBars, PipelineBarsForTaskRunsStatus } from './PipelineBars'; import { LoadingInline } from '../../Loading'; diff --git a/src/components/pipelines-list/status/PipelineRunStatus.tsx b/src/components/pipelines-list/status/PipelineRunStatus.tsx index 5f7b359d..a4c7a89b 100644 --- a/src/components/pipelines-list/status/PipelineRunStatus.tsx +++ b/src/components/pipelines-list/status/PipelineRunStatus.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useTranslation } from 'react-i18next'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom-v5-compat'; import { PipelineRunModel } from '../../../models'; import { PipelineRunKind, TaskRunKind } from '../../../types'; import PipelineResourceStatus from './PipelineResourceStatus'; diff --git a/src/components/pipelines-overview/list-pages/PipelineRunsForPipelinesRow.tsx b/src/components/pipelines-overview/list-pages/PipelineRunsForPipelinesRow.tsx index b5c9406b..24cd739b 100644 --- a/src/components/pipelines-overview/list-pages/PipelineRunsForPipelinesRow.tsx +++ b/src/components/pipelines-overview/list-pages/PipelineRunsForPipelinesRow.tsx @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom-v5-compat'; import { SummaryProps, getReferenceForModel, diff --git a/src/components/pipelines-overview/list-pages/PipelineRunsForPipelinesRowK8s.tsx b/src/components/pipelines-overview/list-pages/PipelineRunsForPipelinesRowK8s.tsx index 4d22c2b0..6d0bc893 100644 --- a/src/components/pipelines-overview/list-pages/PipelineRunsForPipelinesRowK8s.tsx +++ b/src/components/pipelines-overview/list-pages/PipelineRunsForPipelinesRowK8s.tsx @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom-v5-compat'; import { useTranslation } from 'react-i18next'; import { Tooltip } from '@patternfly/react-core'; import { diff --git a/src/components/pipelines-overview/list-pages/PipelineRunsForRepositoriesRow.tsx b/src/components/pipelines-overview/list-pages/PipelineRunsForRepositoriesRow.tsx index 79cd4fc6..a7b01815 100644 --- a/src/components/pipelines-overview/list-pages/PipelineRunsForRepositoriesRow.tsx +++ b/src/components/pipelines-overview/list-pages/PipelineRunsForRepositoriesRow.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom-v5-compat'; import { ResourceLink, RowProps, diff --git a/src/components/pipelines-overview/utils.ts b/src/components/pipelines-overview/utils.ts index a71d428a..b63b570c 100644 --- a/src/components/pipelines-overview/utils.ts +++ b/src/components/pipelines-overview/utils.ts @@ -6,7 +6,7 @@ import { } from '@openshift-console/dynamic-plugin-sdk'; import * as React from 'react'; import { useTranslation } from 'react-i18next'; -import { useHistory } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom-v5-compat'; import { ALL_NAMESPACES_KEY } from '../../consts'; import { adjustToStartOfWeek } from '../pipelines-metrics/utils'; @@ -287,9 +287,10 @@ export const useQueryParams = (param) => { value, } = param; const [isLoaded, setIsLoaded] = React.useState(0); - const history = useHistory(); + const navigate = useNavigate(); + const location = useLocation(); const queryParams = {}; - history.location.search + location.search .substring(1) ?.split('&') .forEach((_) => { @@ -298,10 +299,10 @@ export const useQueryParams = (param) => { }); function setQueryParams(key?: string, value?: string) { - const path = history.location.pathname; + const path = location.pathname; if (key && value) queryParams[key] = value; - history.push( + navigate( `${path}?${Object.keys(queryParams) .map((k) => { const v = queryParams[k]; diff --git a/src/components/pipelines-tasks/TaskRunStatus.tsx b/src/components/pipelines-tasks/TaskRunStatus.tsx index 6fed62ab..9c4066e3 100644 --- a/src/components/pipelines-tasks/TaskRunStatus.tsx +++ b/src/components/pipelines-tasks/TaskRunStatus.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useTranslation } from 'react-i18next'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom-v5-compat'; import { TaskRunKind } from '../../types'; import PipelineResourceStatus from '../status/PipelineResourceStatus'; import { taskRunFilterTitleReducer } from '../utils/pipeline-filter-reducer'; diff --git a/src/components/pipelines-tasks/TasksNavigationPage.tsx b/src/components/pipelines-tasks/TasksNavigationPage.tsx index 6db0081f..c8c5c978 100644 --- a/src/components/pipelines-tasks/TasksNavigationPage.tsx +++ b/src/components/pipelines-tasks/TasksNavigationPage.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom-v5-compat'; import { useTranslation } from 'react-i18next'; import { HorizontalNav, @@ -23,7 +23,7 @@ const taskRunModelRef = getReferenceForModel(TaskRunModel); const TasksNavigationPage = () => { const { t } = useTranslation('plugin__pipelines-console-plugin'); const [activeNamespace] = useActiveNamespace(); - const history = useHistory(); + const navigate = useNavigate(); const createItems = { tasks: TaskModel.labelKey || TaskModel.label, @@ -32,14 +32,14 @@ const TasksNavigationPage = () => { const onCreate = (type: string) => { return type === 'tasks' - ? history.push( + ? navigate( `/k8s/ns/${ activeNamespace === ALL_NAMESPACES_KEY ? DEFAULT_NAMESPACE : activeNamespace }/${taskModelRef}/~new`, ) - : history.push( + : navigate( `/k8s/ns/${ activeNamespace === ALL_NAMESPACES_KEY ? DEFAULT_NAMESPACE diff --git a/src/components/pipelines-tasks/tasks-details-pages/TaskRunDetailsPage.tsx b/src/components/pipelines-tasks/tasks-details-pages/TaskRunDetailsPage.tsx index 1c636e92..629713bd 100644 --- a/src/components/pipelines-tasks/tasks-details-pages/TaskRunDetailsPage.tsx +++ b/src/components/pipelines-tasks/tasks-details-pages/TaskRunDetailsPage.tsx @@ -4,7 +4,7 @@ import { TextVariants, Tooltip, } from '@patternfly/react-core'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom-v5-compat'; import * as React from 'react'; import { useParams } from 'react-router-dom-v5-compat'; import { ArchiveIcon } from '@patternfly/react-icons'; diff --git a/src/components/repositories-list/RepositoriesRow.tsx b/src/components/repositories-list/RepositoriesRow.tsx index 0128c25e..0605e35f 100644 --- a/src/components/repositories-list/RepositoriesRow.tsx +++ b/src/components/repositories-list/RepositoriesRow.tsx @@ -8,7 +8,7 @@ import { } from '@openshift-console/dynamic-plugin-sdk'; import * as React from 'react'; import { PipelineRunKind, RepositoryKind, TaskRunKind } from '../../types'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom-v5-compat'; import { PipelineRunModel, RepositoryModel } from '../../models'; import { getLatestRun } from '../utils/pipeline-augment'; import { getTaskRunsOfPipelineRun } from '../hooks/useTaskRuns'; diff --git a/src/components/utils/k8s-common-kebab-menu.tsx b/src/components/utils/k8s-common-kebab-menu.tsx index 03d9d0af..c810e2ad 100644 --- a/src/components/utils/k8s-common-kebab-menu.tsx +++ b/src/components/utils/k8s-common-kebab-menu.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom-v5-compat'; import { useTranslation } from 'react-i18next'; import { DropdownItem } from '@patternfly/react-core'; import { @@ -23,7 +23,7 @@ export const K8sCommonKebabMenu = (obj: K8sResourceCommon, model: K8sModel) => { const launchDeleteModal = useDeleteModal(obj); const launchAnnotationsModal = useAnnotationsModal(obj); const launchLabelsModal = useLabelsModal(obj); - const history = useHistory(); + const navigate = useNavigate(); const { name, namespace } = obj.metadata; const canEditResource = useAccessReview({ @@ -71,7 +71,7 @@ export const K8sCommonKebabMenu = (obj: K8sResourceCommon, model: K8sModel) => { history.push(editURL)} + onClick={() => navigate(editURL)} isDisabled={!canEditResource[0]} data-test-action={KEBAB_ACTION_EDIT_ID} > diff --git a/src/components/utils/resource-link.tsx b/src/components/utils/resource-link.tsx index ac5d8965..f31b85f1 100644 --- a/src/components/utils/resource-link.tsx +++ b/src/components/utils/resource-link.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom-v5-compat'; import cx from 'classnames'; import { getReference } from '../pipelines-overview/utils'; import { diff --git a/yarn.lock b/yarn.lock index 93e3ae89..756a1fd5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2730,11 +2730,6 @@ dependencies: "@types/node" "*" -"@types/history@^4.7.11": - version "4.7.11" - resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64" - integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA== - "@types/hoist-non-react-statics@^3.3.1": version "3.3.6" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz#6bba74383cdab98e8db4e20ce5b4a6b98caed010" @@ -2901,23 +2896,6 @@ "@types/react" "*" redux "^4.0.0" -"@types/react-router-dom@^5.3.2": - version "5.3.3" - resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83" - integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw== - dependencies: - "@types/history" "^4.7.11" - "@types/react" "*" - "@types/react-router" "*" - -"@types/react-router@*": - version "5.1.20" - resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.20.tgz#88eccaa122a82405ef3efbcaaa5dcdd9f021387c" - integrity sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q== - dependencies: - "@types/history" "^4.7.11" - "@types/react" "*" - "@types/react-transition-group@2.x": version "2.9.2" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.9.2.tgz#c48cf2a11977c8b4ff539a1c91d259eaa627028d" @@ -10698,7 +10676,7 @@ react-rnd@^10.3.4: react-draggable "4.4.6" tslib "2.6.2" -react-router-dom-v5-compat@^6.11.2: +react-router-dom-v5-compat@^6.11.2, react-router-dom-v5-compat@^6.30.0: version "6.30.0" resolved "https://registry.yarnpkg.com/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.30.0.tgz#d089e7b8dc964ade2480467aa77381647b10a78b" integrity sha512-MAVRASbdQ3+ZOTPPjAa7jKcF0F9LkHWKB/iib3hf+jzzIazL4GEpMDDdTswCsqRQNU+zNnT3qD0WiNbzJ6ncPw==