diff --git a/web/package-lock.json b/web/package-lock.json index 10b13fda8..7245230ae 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -16,7 +16,8 @@ "@patternfly/react-table": "^5.4.15", "@patternfly/react-virtualized-extension": "^5.1.0", "i18next": "^22.4.12", - "react-i18next": "^11.18.6" + "react-i18next": "^11.18.6", + "react-router-dom-v5-compat": "^6.30.0" }, "devDependencies": { "@cypress/code-coverage": "^3.10.0", @@ -53,8 +54,6 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-helmet": "^6.1.0", - "react-router": "5.3.x", - "react-router-dom": "5.3.x", "serve": "^14.2.3", "style-loader": "^3.3.1", "ts-jest": "^28.0.8", @@ -3476,10 +3475,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.22.0.tgz", - "integrity": "sha512-MBOl8MeOzpK0HQQQshKB7pABXbmyHizdTpqnrIseTbsv0nAepwC2ENZa1aaBExNQcpLoXmWthhak8SABLzvGPw==", - "dev": true, + "version": "1.23.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz", + "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==", "license": "MIT", "engines": { "node": ">=14.0.0" @@ -9417,7 +9415,6 @@ "version": "4.10.1", "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", - "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.1.2", @@ -12620,7 +12617,6 @@ "version": "3.3.0", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-3.3.0.tgz", "integrity": "sha512-qyCH421YQPS2WFDxDjftfc1ZR5WKQzVzqsp4n9M2kQhVOo/ByahFoUNJfl58kOcEGfQ//7weFTDhm+ss8Ecxgw==", - "dev": true, "license": "MIT" }, "node_modules/path-type": { @@ -13265,7 +13261,6 @@ "version": "5.3.4", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", - "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.12.13", @@ -13286,7 +13281,6 @@ "version": "5.3.4", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz", "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==", - "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.12.13", @@ -13302,15 +13296,14 @@ } }, "node_modules/react-router-dom-v5-compat": { - "version": "6.29.0", - "resolved": "https://registry.npmjs.org/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.29.0.tgz", - "integrity": "sha512-WfZyWsOzcZK4g7KPrXMKbjHpRhTRdiEg/aioP72Q5NIL1Ekop3VFlML29UtKtvi5ncxqJO0/b4nPCaBqSo9Gww==", - "dev": true, + "version": "6.30.0", + "resolved": "https://registry.npmjs.org/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.30.0.tgz", + "integrity": "sha512-MAVRASbdQ3+ZOTPPjAa7jKcF0F9LkHWKB/iib3hf+jzzIazL4GEpMDDdTswCsqRQNU+zNnT3qD0WiNbzJ6ncPw==", "license": "MIT", "dependencies": { - "@remix-run/router": "1.22.0", + "@remix-run/router": "1.23.0", "history": "^5.3.0", - "react-router": "6.29.0" + "react-router": "6.30.0" }, "engines": { "node": ">=14.0.0" @@ -13325,20 +13318,18 @@ "version": "5.3.0", "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", - "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.7.6" } }, "node_modules/react-router-dom-v5-compat/node_modules/react-router": { - "version": "6.29.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.29.0.tgz", - "integrity": "sha512-DXZJoE0q+KyeVw75Ck6GkPxFak63C4fGqZGNijnWgzB/HzSP1ZfTlBj5COaGWwhrMQ/R8bXiq5Ooy4KG+ReyjQ==", - "dev": true, + "version": "6.30.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.0.tgz", + "integrity": "sha512-D3X8FyH9nBcTSHGdEKurK7r8OYE1kKFn3d/CF+CoxbSHkxU7o37+Uh7eAHRXr6k2tSExXYO++07PeXJtA/dEhQ==", "license": "MIT", "dependencies": { - "@remix-run/router": "1.22.0" + "@remix-run/router": "1.23.0" }, "engines": { "node": ">=14.0.0" @@ -13765,7 +13756,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==", - "dev": true, "license": "MIT" }, "node_modules/resolve.exports": { @@ -14976,14 +14966,12 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz", "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==", - "dev": true, "license": "MIT" }, "node_modules/tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==", - "dev": true, "license": "MIT" }, "node_modules/tmp": { @@ -15625,7 +15613,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==", - "dev": true, "license": "MIT" }, "node_modules/value-or-function": { @@ -19259,10 +19246,9 @@ } }, "@remix-run/router": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.22.0.tgz", - "integrity": "sha512-MBOl8MeOzpK0HQQQshKB7pABXbmyHizdTpqnrIseTbsv0nAepwC2ENZa1aaBExNQcpLoXmWthhak8SABLzvGPw==", - "dev": true + "version": "1.23.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz", + "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==" }, "@sinclair/typebox": { "version": "0.23.5", @@ -23622,7 +23608,6 @@ "version": "4.10.1", "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", - "dev": true, "requires": { "@babel/runtime": "^7.1.2", "loose-envify": "^1.2.0", @@ -25856,8 +25841,7 @@ "path-to-regexp": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-3.3.0.tgz", - "integrity": "sha512-qyCH421YQPS2WFDxDjftfc1ZR5WKQzVzqsp4n9M2kQhVOo/ByahFoUNJfl58kOcEGfQ//7weFTDhm+ss8Ecxgw==", - "dev": true + "integrity": "sha512-qyCH421YQPS2WFDxDjftfc1ZR5WKQzVzqsp4n9M2kQhVOo/ByahFoUNJfl58kOcEGfQ//7weFTDhm+ss8Ecxgw==" }, "path-type": { "version": "4.0.0", @@ -26302,7 +26286,6 @@ "version": "5.3.4", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", - "dev": true, "requires": { "@babel/runtime": "^7.12.13", "history": "^4.9.0", @@ -26319,7 +26302,6 @@ "version": "5.3.4", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz", "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==", - "dev": true, "requires": { "@babel/runtime": "^7.12.13", "history": "^4.9.0", @@ -26331,32 +26313,29 @@ } }, "react-router-dom-v5-compat": { - "version": "6.29.0", - "resolved": "https://registry.npmjs.org/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.29.0.tgz", - "integrity": "sha512-WfZyWsOzcZK4g7KPrXMKbjHpRhTRdiEg/aioP72Q5NIL1Ekop3VFlML29UtKtvi5ncxqJO0/b4nPCaBqSo9Gww==", - "dev": true, + "version": "6.30.0", + "resolved": "https://registry.npmjs.org/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.30.0.tgz", + "integrity": "sha512-MAVRASbdQ3+ZOTPPjAa7jKcF0F9LkHWKB/iib3hf+jzzIazL4GEpMDDdTswCsqRQNU+zNnT3qD0WiNbzJ6ncPw==", "requires": { - "@remix-run/router": "1.22.0", + "@remix-run/router": "1.23.0", "history": "^5.3.0", - "react-router": "6.29.0" + "react-router": "6.30.0" }, "dependencies": { "history": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", - "dev": true, "requires": { "@babel/runtime": "^7.7.6" } }, "react-router": { - "version": "6.29.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.29.0.tgz", - "integrity": "sha512-DXZJoE0q+KyeVw75Ck6GkPxFak63C4fGqZGNijnWgzB/HzSP1ZfTlBj5COaGWwhrMQ/R8bXiq5Ooy4KG+ReyjQ==", - "dev": true, + "version": "6.30.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.0.tgz", + "integrity": "sha512-D3X8FyH9nBcTSHGdEKurK7r8OYE1kKFn3d/CF+CoxbSHkxU7o37+Uh7eAHRXr6k2tSExXYO++07PeXJtA/dEhQ==", "requires": { - "@remix-run/router": "1.22.0" + "@remix-run/router": "1.23.0" } } } @@ -26678,8 +26657,7 @@ "resolve-pathname": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", - "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==", - "dev": true + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" }, "resolve.exports": { "version": "1.1.0", @@ -27582,14 +27560,12 @@ "tiny-invariant": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz", - "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==", - "dev": true + "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==" }, "tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", - "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==", - "dev": true + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" }, "tmp": { "version": "0.2.1", @@ -28027,8 +28003,7 @@ "value-equal": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", - "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==", - "dev": true + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" }, "value-or-function": { "version": "4.0.0", diff --git a/web/package.json b/web/package.json index d375dc595..77487be92 100644 --- a/web/package.json +++ b/web/package.json @@ -65,8 +65,6 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-helmet": "^6.1.0", - "react-router": "5.3.x", - "react-router-dom": "5.3.x", "serve": "^14.2.3", "style-loader": "^3.3.1", "ts-jest": "^28.0.8", @@ -108,7 +106,8 @@ "@patternfly/react-table": "^5.4.15", "@patternfly/react-virtualized-extension": "^5.1.0", "i18next": "^22.4.12", - "react-i18next": "^11.18.6" + "react-i18next": "^11.18.6", + "react-router-dom-v5-compat": "^6.30.0" }, "nyc": { "report-dir": "./coverage/cov-cypress" diff --git a/web/src/components/logs-table.tsx b/web/src/components/logs-table.tsx index 3c475bb3c..cd81aa270 100644 --- a/web/src/components/logs-table.tsx +++ b/web/src/components/logs-table.tsx @@ -2,7 +2,7 @@ import { ResourceLink, RowProps, TableColumn } from '@openshift-console/dynamic- import { Split, SplitItem } from '@patternfly/react-core'; import { ISortBy, SortByDirection, Td, ThProps } from '@patternfly/react-table'; import React, { useCallback, useEffect } from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom-v5-compat'; import { DateFormat, dateToFormat } from '../date-utils'; import { Direction, diff --git a/web/src/e2e-tests-app.tsx b/web/src/e2e-tests-app.tsx index de2b5a7ff..78d1da734 100644 --- a/web/src/e2e-tests-app.tsx +++ b/web/src/e2e-tests-app.tsx @@ -1,7 +1,14 @@ import '@patternfly/patternfly/patternfly.css'; import React from 'react'; import ReactDOM from 'react-dom'; -import { BrowserRouter, Link, Route, useHistory, useParams } from 'react-router-dom'; +import { + BrowserRouter, + Link, + Route, + Routes, + useNavigate, + useParams, +} from 'react-router-dom-v5-compat'; import LogsAlertMetrics from './components/alerts/logs-alerts-metrics'; import i18n from './i18n'; import './index.css'; @@ -19,7 +26,7 @@ import { TestIds } from './test-ids'; const DevConsole = () => { const { ns: namespace } = useParams<{ ns: string }>(); - const history = useHistory(); + const navigate = useNavigate(); const [isOpen, setIsOpen] = React.useState(false); const onToggle = () => { @@ -27,7 +34,7 @@ const DevConsole = () => { }; const onSelectNamespace = (selectedNamespace: string) => () => { - history.push(`/dev-monitoring/ns/${selectedNamespace}/logs`); + navigate(`/dev-monitoring/ns/${selectedNamespace}/logs`); setIsOpen(false); }; @@ -119,23 +126,22 @@ const EndToEndTestsApp = () => {
- - - - - - - - - - - 0`, - }} + + } /> + } /> + } /> + 0`, + }} + /> + } /> - +
diff --git a/web/src/hooks/useQueryParams.ts b/web/src/hooks/useQueryParams.ts index 411dbff30..dff42270a 100644 --- a/web/src/hooks/useQueryParams.ts +++ b/web/src/hooks/useQueryParams.ts @@ -1,5 +1,5 @@ import React from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; export const useQueryParams = () => { const location = useLocation(); diff --git a/web/src/hooks/useURLState.ts b/web/src/hooks/useURLState.ts index 7941bb307..7ac5b5b02 100644 --- a/web/src/hooks/useURLState.ts +++ b/web/src/hooks/useURLState.ts @@ -1,5 +1,5 @@ import React from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; +import { useNavigate, useLocation } from 'react-router-dom-v5-compat'; import { filtersFromQuery } from '../attribute-filters'; import { AttributeList, Filters } from '../components/filters/filter.types'; import { Direction, TimeRange } from '../logs.types'; @@ -35,7 +35,7 @@ export const useURLState = ({ attributes, }: UseURLStateHook) => { const queryParams = useQueryParams(); - const history = useHistory(); + const navigate = useNavigate(); const location = useLocation(); const initialTenant = queryParams.get(TENANT_PARAM_KEY) ?? defaultTenant; @@ -68,29 +68,29 @@ export const useURLState = ({ const setTenantInURL = (selectedTenant: string) => { queryParams.set(TENANT_PARAM_KEY, selectedTenant); - history.push(`${location.pathname}?${queryParams.toString()}`); + navigate(`${location.pathname}?${queryParams.toString()}`); }; const setShowResourcesInURL = (showResources: boolean) => { queryParams.set(SHOW_RESOURCES_PARAM_KEY, showResources ? '1' : '0'); - history.push(`${location.pathname}?${queryParams.toString()}`); + navigate(`${location.pathname}?${queryParams.toString()}`); }; const setShowStatsInURL = (showStats: boolean) => { queryParams.set(SHOW_STATS_PARAM_KEY, showStats ? '1' : '0'); - history.push(`${location.pathname}?${queryParams.toString()}`); + navigate(`${location.pathname}?${queryParams.toString()}`); }; const setQueryInURL = (newQuery: string) => { const trimmedQuery = newQuery.trim(); queryParams.set(QUERY_PARAM_KEY, trimmedQuery); - history.push(`${location.pathname}?${queryParams.toString()}`); + navigate(`${location.pathname}?${queryParams.toString()}`); }; const setTimeRangeInURL = (selectedTimeRange: TimeRange) => { queryParams.set(TIME_RANGE_START, String(selectedTimeRange.start)); queryParams.set(TIME_RANGE_END, String(selectedTimeRange.end)); - history.push(`${location.pathname}?${queryParams.toString()}`); + navigate(`${location.pathname}?${queryParams.toString()}`); }; const setDirectionInURL = (selectedDirection?: 'forward' | 'backward') => { @@ -99,7 +99,7 @@ export const useURLState = ({ } else { queryParams.delete(DIRECTION); } - history.push(`${location.pathname}?${queryParams.toString()}`); + navigate(`${location.pathname}?${queryParams.toString()}`); }; React.useEffect(() => { diff --git a/web/src/pages/logs-detail-page.tsx b/web/src/pages/logs-detail-page.tsx index d81637bf3..d0ba4d0bb 100644 --- a/web/src/pages/logs-detail-page.tsx +++ b/web/src/pages/logs-detail-page.tsx @@ -11,7 +11,7 @@ import { import { SyncAltIcon } from '@patternfly/react-icons'; import React from 'react'; import { useTranslation } from 'react-i18next'; -import { useParams } from 'react-router'; +import { useParams } from 'react-router-dom-v5-compat'; import { availablePodAttributes, filtersFromQuery, queryFromFilters } from '../attribute-filters'; import { AttributeList, Filters } from '../components/filters/filter.types'; import { LogsHistogram } from '../components/logs-histogram'; diff --git a/web/src/pages/logs-dev-page.tsx b/web/src/pages/logs-dev-page.tsx index b17852972..8b2d46a70 100644 --- a/web/src/pages/logs-dev-page.tsx +++ b/web/src/pages/logs-dev-page.tsx @@ -2,7 +2,7 @@ import { Button, Card, CardBody, Flex, Grid, PageSection, Tooltip } from '@patte import { SyncAltIcon } from '@patternfly/react-icons'; import React from 'react'; import { useTranslation } from 'react-i18next'; -import { useParams } from 'react-router'; +import { useParams } from 'react-router-dom-v5-compat'; import { availableDevConsoleAttributes, initialAvailableAttributes,