From 30843e0a21e25ca10d511aeab76d1b46055d6798 Mon Sep 17 00:00:00 2001 From: Valerii Sidorenko Date: Wed, 6 Mar 2024 21:25:52 +0100 Subject: [PATCH] feat: use rtk to init store and add typed dispatch --- package-lock.json | 80 +++++++++++++------ package.json | 11 ++- .../EnableFullscreenButton.tsx | 4 +- src/components/Fullscreen/Fullscreen.tsx | 26 +++--- src/components/QueryResultTable/Cell/Cell.tsx | 4 +- .../TabletsOverall/TabletsOverall.tsx | 12 +-- src/components/VirtualTable/TableHead.tsx | 2 +- src/containers/App/App.tsx | 5 +- src/containers/App/Content.tsx | 9 ++- src/containers/App/Providers.tsx | 2 +- .../AppWithClusters/AppWithClusters.tsx | 2 +- .../YdbInternalUser/YdbInternalUser.tsx | 5 +- .../Authentication/Authentication.tsx | 7 +- src/containers/Cluster/Cluster.tsx | 7 +- src/containers/Clusters/Clusters.tsx | 7 +- src/containers/Clusters/useClustersList.ts | 4 +- src/containers/Header/Header.tsx | 5 +- src/containers/Heatmap/Heatmap.tsx | 7 +- src/containers/Node/Node.tsx | 5 +- .../Node/NodeStructure/NodeStructure.tsx | 5 +- src/containers/Nodes/Nodes.tsx | 11 ++- src/containers/ReduxTooltip/ReduxTooltip.js | 5 +- src/containers/Storage/Storage.tsx | 4 +- src/containers/Storage/VirtualStorage.tsx | 5 +- src/containers/Tablet/Tablet.tsx | 5 +- src/containers/Tablets/Tablets.tsx | 5 +- src/containers/Tenant/Acl/Acl.tsx | 5 +- .../Diagnostics/Consumers/Consumers.tsx | 5 +- .../Tenant/Diagnostics/Describe/Describe.tsx | 6 +- .../Tenant/Diagnostics/Diagnostics.tsx | 10 ++- .../Tenant/Diagnostics/HotKeys/HotKeys.tsx | 5 +- .../Tenant/Diagnostics/Overview/Overview.tsx | 6 +- .../Diagnostics/Partitions/Partitions.tsx | 10 ++- .../TenantCpu/TopNodesByCpu.tsx | 10 ++- .../TenantCpu/TopNodesByLoad.tsx | 10 ++- .../TenantOverview/TenantCpu/TopQueries.tsx | 5 +- .../TenantOverview/TenantCpu/TopShards.tsx | 5 +- .../TenantMemory/TopNodesByMemory.tsx | 10 ++- .../TenantOverview/TenantOverview.tsx | 5 +- .../TenantStorage/TopGroups.tsx | 10 ++- .../TenantStorage/TopTables.tsx | 5 +- .../TenantOverview/useHealthcheck.ts | 5 +- .../Diagnostics/TopQueries/TopQueries.tsx | 7 +- .../Diagnostics/TopShards/TopShards.tsx | 5 +- .../Tenant/ObjectSummary/ObjectSummary.tsx | 5 +- .../Query/ExecuteResult/ExecuteResult.tsx | 5 +- .../Query/ExplainResult/ExplainResult.js | 6 +- .../Tenant/Query/Preview/Preview.tsx | 5 +- .../Query/QueriesHistory/QueriesHistory.tsx | 5 +- src/containers/Tenant/Query/Query.tsx | 5 +- .../Tenant/Query/SaveQuery/SaveQuery.js | 8 +- .../Query/SavedQueries/SavedQueries.tsx | 4 +- .../Tenant/Schema/SchemaTree/SchemaTree.tsx | 5 +- src/containers/Tenant/Tenant.tsx | 21 +++-- src/containers/Tenants/Tenants.tsx | 5 +- src/containers/Versions/Versions.tsx | 5 +- src/index.tsx | 5 +- src/store/{index.js => configureStore.ts} | 37 ++++++--- src/store/defaultStore.ts | 7 ++ src/store/getUrlData.ts | 8 +- src/store/index.ts | 12 +++ .../reducers/authentication/authentication.ts | 2 +- src/store/reducers/cluster/cluster.ts | 2 +- .../reducers/clusterNodes/clusterNodes.tsx | 2 +- src/store/reducers/clusters/clusters.ts | 2 +- src/store/reducers/clusters/selectors.ts | 2 +- src/store/reducers/describe.ts | 2 +- src/store/reducers/executeQuery.ts | 2 +- .../executeTopQueries/executeTopQueries.ts | 4 +- src/store/reducers/explainQuery.ts | 2 +- src/store/reducers/header/header.ts | 2 +- src/store/reducers/healthcheckInfo.ts | 4 +- src/store/reducers/heatmap.ts | 2 +- src/store/reducers/host.ts | 2 +- src/store/reducers/hotKeys/hotKeys.ts | 2 +- src/store/reducers/index.ts | 6 +- src/store/reducers/network/network.ts | 2 +- src/store/reducers/node/node.ts | 2 +- src/store/reducers/node/selectors.ts | 4 +- src/store/reducers/nodes/nodes.ts | 2 +- src/store/reducers/nodes/selectors.ts | 2 +- src/store/reducers/nodesList.ts | 2 +- src/store/reducers/olapStats.ts | 2 +- src/store/reducers/overview/overview.ts | 2 +- src/store/reducers/partitions/partitions.ts | 2 +- src/store/reducers/saveQuery.ts | 2 +- src/store/reducers/schema/schema.ts | 5 +- src/store/reducers/schemaAcl/schemaAcl.ts | 2 +- src/store/reducers/settings/settings.ts | 4 +- .../reducers/shardsWorkload/shardsWorkload.ts | 2 +- src/store/reducers/storage/selectors.ts | 2 +- src/store/reducers/storage/storage.ts | 2 +- src/store/reducers/tablet.ts | 2 +- src/store/reducers/tablets.ts | 2 +- src/store/reducers/tabletsFilters.js | 2 +- src/store/reducers/tenant/tenant.ts | 2 +- .../executeTopTables/executeTopTables.ts | 2 +- .../topNodesByCpu/topNodesByCpu.ts | 2 +- .../topNodesByLoad/topNodesByLoad.ts | 2 +- .../topNodesByMemory/topNodesByMemory.ts | 2 +- .../topQueries/tenantOverviewTopQueries.ts | 2 +- .../topShards/tenantOverviewTopShards.ts | 2 +- .../topStorageGroups/topStorageGroups.ts | 2 +- src/store/reducers/tenants/selectors.ts | 4 +- src/store/reducers/tenants/tenants.ts | 2 +- src/store/reducers/tooltip.ts | 8 +- src/store/reducers/topic.ts | 4 +- ...te-url-mapping.js => state-url-mapping.ts} | 45 +++++++---- src/store/utils.ts | 4 +- src/types/redux-location-state.d.ts | 68 ++++++++++++++++ src/types/store/tooltip.ts | 1 - src/types/window.d.ts | 6 +- src/utils/additionalProps.ts | 2 +- src/utils/hooks/index.ts | 1 + src/utils/hooks/useSetting.ts | 4 +- src/utils/hooks/useTypedDispatch.ts | 4 + src/utils/hooks/useTypedSelector.ts | 2 +- 117 files changed, 453 insertions(+), 317 deletions(-) rename src/store/{index.js => configureStore.ts} (62%) create mode 100644 src/store/defaultStore.ts create mode 100644 src/store/index.ts rename src/store/{state-url-mapping.js => state-url-mapping.ts} (78%) create mode 100644 src/types/redux-location-state.d.ts create mode 100644 src/utils/hooks/useTypedDispatch.ts diff --git a/package-lock.json b/package-lock.json index f800d977b7..8957faa815 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@gravity-ui/paranoid": "^1.4.0", "@gravity-ui/react-data-table": "^1.2.0", "@gravity-ui/uikit": "^5.30.1", + "@reduxjs/toolkit": "^2.2.1", "axios": "^0.21.2", "bem-cn-lite": "^4.1.0", "copy-to-clipboard": "^3.3.3", @@ -37,10 +38,8 @@ "react-router": "^5.2.1", "react-router-dom": "^5.3.0", "react-split": "^2.0.14", - "redux": "^4.0.1", - "redux-location-state": "^2.6.0", - "redux-thunk": "^2.3.0", - "reselect": "^4.1.6", + "redux": "^5.0.1", + "redux-location-state": "^2.8.2", "url": "^0.11.0", "use-query-params": "^2.2.1", "web-vitals": "^1.1.2", @@ -4680,6 +4679,38 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@reduxjs/toolkit": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.1.tgz", + "integrity": "sha512-8CREoqJovQW/5I4yvvijm/emUiCCmcs4Ev4XPWd4mizSO+dD3g5G6w34QK5AGeNrSH7qM8Fl66j4vuV7dpOdkw==", + "dependencies": { + "immer": "^10.0.3", + "redux": "^5.0.1", + "redux-thunk": "^3.1.0", + "reselect": "^5.0.1" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, + "node_modules/@reduxjs/toolkit/node_modules/immer": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.0.3.tgz", + "integrity": "sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -21357,17 +21388,14 @@ } }, "node_modules/redux": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", - "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", - "dependencies": { - "@babel/runtime": "^7.9.2" - } + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==" }, "node_modules/redux-location-state": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/redux-location-state/-/redux-location-state-2.6.0.tgz", - "integrity": "sha512-4pZstjhbHmii+sf0ydsm+ul7koAb+fD2GebFl+1GfwGa3e5KwD+wGgj8tsH7BtcjEvYB4wfhZ+QOd0quKmOFyg==", + "version": "2.8.2", + "resolved": "https://registry.npmjs.org/redux-location-state/-/redux-location-state-2.8.2.tgz", + "integrity": "sha512-KKbvnl0k+pRg1U2gWWSLuId8SbDbt2rdFfaSWX1mLZBDzMtftvnIGrxuQ528xrjd9nq7YcFxVWgGDYlRxMzAvg==", "dependencies": { "lodash": "^4.13.1" }, @@ -21375,16 +21403,16 @@ "node": ">4.0" }, "peerDependencies": { - "react": "^0.14.0 || ^15.0.0", - "react-dom": "^0.14.0 || ^15.0.0", - "redux": "^3.0.0", - "redux-thunk": "^1.0.0 || ^2.0.0" + "redux": "^3.0.0 || ^4.0.0" } }, "node_modules/redux-thunk": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz", - "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==" + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "peerDependencies": { + "redux": "^5.0.0" + } }, "node_modules/reflect.getprototypeof": { "version": "1.0.4", @@ -21739,9 +21767,9 @@ "dev": true }, "node_modules/reselect": { - "version": "4.1.6", - "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz", - "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ==" + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.0.tgz", + "integrity": "sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg==" }, "node_modules/resize-observer-polyfill": { "version": "1.5.1", @@ -24232,9 +24260,9 @@ } }, "node_modules/typescript": { - "version": "4.6.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz", - "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "dev": true, "bin": { "tsc": "bin/tsc", diff --git a/package.json b/package.json index f3f514f6f6..05fb6d5daf 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@gravity-ui/paranoid": "^1.4.0", "@gravity-ui/react-data-table": "^1.2.0", "@gravity-ui/uikit": "^5.30.1", + "@reduxjs/toolkit": "^2.2.1", "axios": "^0.21.2", "bem-cn-lite": "^4.1.0", "copy-to-clipboard": "^3.3.3", @@ -31,18 +32,16 @@ "path-to-regexp": "^3.0.0", "qs": "^6.11.0", "react-error-boundary": "^4.0.12", - "react-json-inspector": "^7.1.1", "react-helmet-async": "2.0.4", + "react-json-inspector": "^7.1.1", "react-list": "^0.8.11", "react-monaco-editor": "^0.47.0", "react-redux": "^7.2.6", "react-router": "^5.2.1", "react-router-dom": "^5.3.0", "react-split": "^2.0.14", - "redux": "^4.0.1", - "redux-location-state": "^2.6.0", - "redux-thunk": "^2.3.0", - "reselect": "^4.1.6", + "redux": "^5.0.1", + "redux-location-state": "^2.8.2", "url": "^0.11.0", "use-query-params": "^2.2.1", "web-vitals": "^1.1.2", @@ -157,6 +156,6 @@ "overrides": { "react": "^17.0.2", "react-dom": "^17.0.2", - "redux": "^4.0.1" + "redux": "^5.0.1" } } diff --git a/src/components/EnableFullscreenButton/EnableFullscreenButton.tsx b/src/components/EnableFullscreenButton/EnableFullscreenButton.tsx index ba3f6e1043..f272416455 100644 --- a/src/components/EnableFullscreenButton/EnableFullscreenButton.tsx +++ b/src/components/EnableFullscreenButton/EnableFullscreenButton.tsx @@ -1,5 +1,5 @@ import {Button} from '@gravity-ui/uikit'; -import {useDispatch} from 'react-redux'; +import {useTypedDispatch} from '../../utils/hooks'; import {enableFullscreen} from '../../store/reducers/fullscreen'; import {Icon} from '../Icon'; @@ -8,7 +8,7 @@ interface EnableFullscreenButtonProps { } function EnableFullscreenButton({disabled}: EnableFullscreenButtonProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const onEnableFullscreen = () => { dispatch(enableFullscreen()); }; diff --git a/src/components/Fullscreen/Fullscreen.tsx b/src/components/Fullscreen/Fullscreen.tsx index 71193cb0d8..9602aacbea 100644 --- a/src/components/Fullscreen/Fullscreen.tsx +++ b/src/components/Fullscreen/Fullscreen.tsx @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'; import {Button} from '@gravity-ui/uikit'; import cn from 'bem-cn-lite'; -import {useDispatch} from 'react-redux'; +import {useTypedDispatch} from '../../utils/hooks'; import {disableFullscreen} from '../../store/reducers/fullscreen'; import {Icon} from '../Icon'; @@ -49,22 +49,24 @@ class FullscreenWrapper extends React.Component { } function Fullscreen(props: FullscreenProps) { - const dispatch = useDispatch(); - const escFunction = (event: KeyboardEvent) => { - if (event.key === 'Escape') { - onDisableFullScreen(); - } - }; + const dispatch = useTypedDispatch(); + + const onDisableFullScreen = React.useCallback(() => { + dispatch(disableFullscreen()); + }, [dispatch]); + useEffect(() => { + const escFunction = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + onDisableFullScreen(); + } + }; + document.addEventListener('keydown', escFunction, false); return () => { document.removeEventListener('keydown', escFunction, false); }; - }, []); - - const onDisableFullScreen = () => { - dispatch(disableFullscreen()); - }; + }, [onDisableFullScreen]); return ( diff --git a/src/components/QueryResultTable/Cell/Cell.tsx b/src/components/QueryResultTable/Cell/Cell.tsx index 29ed85bdca..f08463154c 100644 --- a/src/components/QueryResultTable/Cell/Cell.tsx +++ b/src/components/QueryResultTable/Cell/Cell.tsx @@ -1,6 +1,6 @@ import React, {useEffect} from 'react'; -import {useDispatch} from 'react-redux'; +import {useTypedDispatch} from '../../../utils/hooks'; import {showTooltip, hideTooltip} from '../../../store/reducers/tooltip'; import {b} from '../QueryResultTable'; @@ -13,7 +13,7 @@ interface CellProps { export const Cell = React.memo(function Cell(props: CellProps) { const {className, value} = props; - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); useEffect( () => () => { diff --git a/src/components/TabletsOverall/TabletsOverall.tsx b/src/components/TabletsOverall/TabletsOverall.tsx index dce587365f..1bceb2f8b5 100644 --- a/src/components/TabletsOverall/TabletsOverall.tsx +++ b/src/components/TabletsOverall/TabletsOverall.tsx @@ -1,9 +1,9 @@ -import {useDispatch} from 'react-redux'; import cn from 'bem-cn-lite'; import {Progress} from '@gravity-ui/uikit'; import {hideTooltip, showTooltip} from '../../store/reducers/tooltip'; +import {useTypedDispatch} from '../../utils/hooks'; import {COLORS_PRIORITY} from '../../utils/constants'; import './TabletsOverall.scss'; @@ -29,17 +29,17 @@ interface TabletsOverallProps { } function TabletsOverall({tablets}: TabletsOverallProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const tabletsCount = tablets.length; - const substractPercentsFromMaxPercents = ( + const subtractPercentsFromMaxPercents = ( statesForOverallProgress: Record, - substractValue: number, + subtractValue: number, ) => { Object.keys(statesForOverallProgress).some((key) => { if (statesForOverallProgress[key as Color] > 10) { - statesForOverallProgress[key as Color] -= minOverallPercentValue - substractValue; + statesForOverallProgress[key as Color] -= minOverallPercentValue - subtractValue; return true; } return false; @@ -71,7 +71,7 @@ function TabletsOverall({tablets}: TabletsOverallProps) { // replace percents which are smaller then 3 to 3. Object.keys(statesForOverallProgress).forEach((key) => { if (statesForOverallProgress[key] < minOverallPercentValue) { - substractPercentsFromMaxPercents( + subtractPercentsFromMaxPercents( statesForOverallProgress, statesForOverallProgress[key], ); diff --git a/src/components/VirtualTable/TableHead.tsx b/src/components/VirtualTable/TableHead.tsx index e2b11b8050..bf1d575b93 100644 --- a/src/components/VirtualTable/TableHead.tsx +++ b/src/components/VirtualTable/TableHead.tsx @@ -144,7 +144,7 @@ export const TableHead = ({ return new ResizeObserver((entries) => { const columnsWidth: TableColumnsWidthSetup = {}; entries.forEach((entry) => { - // @ts-ignore ignore custrom property usage + // @ts-expect-error ignore custrom property usage const id = entry.target.attributes[COLUMN_NAME_HTML_ATTRIBUTE]?.value; columnsWidth[id] = entry.contentRect.width; }); diff --git a/src/containers/App/App.tsx b/src/containers/App/App.tsx index 51b87aa0d9..7c4a364edf 100644 --- a/src/containers/App/App.tsx +++ b/src/containers/App/App.tsx @@ -12,9 +12,10 @@ import {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary'; import {settings} from '../UserSettings/settings'; import {Providers} from './Providers'; -import type {Store} from 'redux'; +import type {Store} from '@reduxjs/toolkit'; import type {History} from 'history'; import type {YDBEmbeddedUISettings} from '../UserSettings/settings'; +import type {RootState} from '../../store'; import './App.scss'; @@ -46,7 +47,7 @@ function App({store, history, singleClusterMode, children, userSettings = settin ); } -function mapStateToProps(state: any) { +function mapStateToProps(state: RootState) { return { singleClusterMode: state.singleClusterMode, }; diff --git a/src/containers/App/Content.tsx b/src/containers/App/Content.tsx index 91d526b85f..422996353e 100644 --- a/src/containers/App/Content.tsx +++ b/src/containers/App/Content.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {Switch, Route, Redirect, RedirectProps} from 'react-router-dom'; import cn from 'bem-cn-lite'; -import {connect, useDispatch} from 'react-redux'; +import {connect} from 'react-redux'; import routes from '../../routes'; @@ -17,7 +17,7 @@ import Authentication from '../Authentication/Authentication'; import {getUser} from '../../store/reducers/authentication/authentication'; import {getClusterPath} from '../Cluster/utils'; import {useSlots} from '../../components/slots'; -import {useTypedSelector} from '../../utils/hooks'; +import {useTypedSelector, useTypedDispatch} from '../../utils/hooks'; import { ClusterSlot, ClustersSlot, @@ -32,6 +32,7 @@ import { import type {SlotComponent} from '../../components/slots/types'; import type {SlotMap} from '../../components/slots/SlotMap'; import type {RawBreadcrumbItem} from '../Header/breadcrumbs'; +import type {RootState} from '../../store'; import i18n from './i18n'; import './App.scss'; @@ -142,7 +143,7 @@ export function Content(props: ContentProps) { } function GetUser() { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const {isAuthenticated, isInternalUser} = useTypedSelector((state) => ({ isAuthenticated: state.authentication.isAuthenticated, isInternalUser: Boolean(state.authentication.user), @@ -180,7 +181,7 @@ function ContentWrapper(props: ContentWrapperProps) { ); } -function mapStateToProps(state: any) { +function mapStateToProps(state: RootState) { return { isAuthenticated: state.authentication.isAuthenticated, singleClusterMode: state.singleClusterMode, diff --git a/src/containers/App/Providers.tsx b/src/containers/App/Providers.tsx index a62ec64d74..640fffdb52 100644 --- a/src/containers/App/Providers.tsx +++ b/src/containers/App/Providers.tsx @@ -11,7 +11,7 @@ import {componentsRegistry as defaultComponentsRegistry} from '../../components/ import {useSetting} from '../../utils/hooks'; import {THEME_KEY} from '../../utils/constants'; -import type {Store} from 'redux'; +import type {Store} from '@reduxjs/toolkit'; import type {History} from 'history'; import type {ComponentsRegistry} from '../../components/ComponentsProvider/componentsRegistry'; diff --git a/src/containers/AppWithClusters/AppWithClusters.tsx b/src/containers/AppWithClusters/AppWithClusters.tsx index 54686a7195..7256c60f3f 100644 --- a/src/containers/AppWithClusters/AppWithClusters.tsx +++ b/src/containers/AppWithClusters/AppWithClusters.tsx @@ -1,7 +1,7 @@ import {App, AppSlots} from '../App'; import type {History} from 'history'; -import type {Store} from 'redux'; +import type {Store} from '@reduxjs/toolkit'; import type {GetMonitoringClusterLink, GetMonitoringLink} from '../../utils/monitoring'; diff --git a/src/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.tsx b/src/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.tsx index b2abd9b7ee..deb3557c21 100644 --- a/src/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.tsx +++ b/src/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.tsx @@ -1,10 +1,9 @@ import {useHistory} from 'react-router'; -import {useDispatch} from 'react-redux'; import {Button, Icon} from '@gravity-ui/uikit'; import routes, {createHref} from '../../../routes'; -import {useTypedSelector} from '../../../utils/hooks'; +import {useTypedSelector, useTypedDispatch} from '../../../utils/hooks'; import {logout} from '../../../store/reducers/authentication/authentication'; import {cn} from '../../../utils/cn'; @@ -27,7 +26,7 @@ export function YdbInternalUser() { ); }; - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const handleLogout = () => { dispatch(logout); }; diff --git a/src/containers/Authentication/Authentication.tsx b/src/containers/Authentication/Authentication.tsx index 8ddd18d1ae..723ad95a5f 100644 --- a/src/containers/Authentication/Authentication.tsx +++ b/src/containers/Authentication/Authentication.tsx @@ -1,12 +1,11 @@ import {KeyboardEvent, useEffect, useState} from 'react'; -import {useDispatch} from 'react-redux'; import {useHistory, useLocation} from 'react-router'; import cn from 'bem-cn-lite'; import {Button, TextInput, Icon, Link as ExternalLink} from '@gravity-ui/uikit'; import {authenticate} from '../../store/reducers/authentication/authentication'; -import {useTypedSelector} from '../../utils/hooks'; +import {useTypedSelector, useTypedDispatch} from '../../utils/hooks'; import {parseQuery} from '../../routes'; import ydbLogoIcon from '../../assets/icons/ydb.svg'; @@ -23,7 +22,7 @@ interface AuthenticationProps { } function Authentication({closable = false}: AuthenticationProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const history = useHistory(); const location = useLocation(); @@ -57,8 +56,6 @@ function Authentication({closable = false}: AuthenticationProps) { }; const onLoginClick = () => { - // @ts-expect-error - // typed dispatch required, remove error expectation after adding it dispatch(authenticate(login, pass)).then(() => { if (returnUrl) { const decodedUrl = decodeURIComponent(returnUrl.toString()); diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx index dfd7255b1e..d17849f3de 100644 --- a/src/containers/Cluster/Cluster.tsx +++ b/src/containers/Cluster/Cluster.tsx @@ -1,6 +1,5 @@ import {useEffect, useMemo, useRef} from 'react'; import {Redirect, Switch, Route, useLocation, useRouteMatch} from 'react-router'; -import {useDispatch} from 'react-redux'; import {Helmet} from 'react-helmet-async'; import cn from 'bem-cn-lite'; import qs from 'qs'; @@ -19,7 +18,7 @@ import {setHeaderBreadcrumbs} from '../../store/reducers/header/header'; import {getClusterInfo, updateDefaultClusterTab} from '../../store/reducers/cluster/cluster'; import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes'; import {parseNodesToVersionsValues, parseVersionsToVersionToColorMap} from '../../utils/versions'; -import {useAutofetcher, useTypedSelector} from '../../utils/hooks'; +import {useAutofetcher, useTypedSelector, useTypedDispatch} from '../../utils/hooks'; import {InternalLink} from '../../components/InternalLink'; import {Tenants} from '../Tenants/Tenants'; @@ -51,7 +50,7 @@ function Cluster({ }: ClusterProps) { const container = useRef(null); - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const activeTabId = useClusterTab(); @@ -215,7 +214,7 @@ function Cluster({ } function useClusterTab() { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const defaultTab = useTypedSelector((state) => state.cluster.defaultClusterTab); diff --git a/src/containers/Clusters/Clusters.tsx b/src/containers/Clusters/Clusters.tsx index 0b312841c5..7834863314 100644 --- a/src/containers/Clusters/Clusters.tsx +++ b/src/containers/Clusters/Clusters.tsx @@ -1,5 +1,4 @@ import {useCallback, useMemo} from 'react'; -import {useDispatch} from 'react-redux'; import {Helmet} from 'react-helmet-async'; import DataTable from '@gravity-ui/react-data-table'; @@ -8,9 +7,7 @@ import {TableColumnSetup, Select} from '@gravity-ui/uikit'; import {Search} from '../../components/Search'; import {Loader} from '../../components/Loader'; import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants'; -import {useAutofetcher} from '../../utils/hooks'; - -import {useTypedSelector} from '../../utils/hooks/useTypedSelector'; +import {useAutofetcher, useTypedSelector, useTypedDispatch} from '../../utils/hooks'; import {fetchClustersList, changeClustersFilters} from '../../store/reducers/clusters/clusters'; import { @@ -41,7 +38,7 @@ import i18n from './i18n'; import './Clusters.scss'; export function Clusters() { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const loading = useTypedSelector(selectLoadingFlag); const clusters = useTypedSelector(selectClustersList); diff --git a/src/containers/Clusters/useClustersList.ts b/src/containers/Clusters/useClustersList.ts index e653f4da0f..7dc41c9da8 100644 --- a/src/containers/Clusters/useClustersList.ts +++ b/src/containers/Clusters/useClustersList.ts @@ -1,9 +1,9 @@ import React from 'react'; -import {useDispatch} from 'react-redux'; +import {useTypedDispatch} from '../../utils/hooks'; import {fetchClustersList} from '../../store/reducers/clusters/clusters'; export function useClustersList() { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); React.useEffect(() => { dispatch(fetchClustersList()); diff --git a/src/containers/Header/Header.tsx b/src/containers/Header/Header.tsx index d7e24bee59..7cf9b1db56 100644 --- a/src/containers/Header/Header.tsx +++ b/src/containers/Header/Header.tsx @@ -1,6 +1,5 @@ import {useEffect, useMemo} from 'react'; import {useHistory, useLocation} from 'react-router'; -import {useDispatch} from 'react-redux'; import block from 'bem-cn-lite'; import {Breadcrumbs} from '@gravity-ui/uikit'; @@ -9,7 +8,7 @@ import {ExternalLinkWithIcon} from '../../components/ExternalLinkWithIcon/Extern import {backend, customBackend} from '../../store'; import {getClusterInfo} from '../../store/reducers/cluster/cluster'; -import {useTypedSelector} from '../../utils/hooks'; +import {useTypedSelector, useTypedDispatch} from '../../utils/hooks'; import {DEVELOPER_UI_TITLE} from '../../utils/constants'; import {parseQuery} from '../../routes'; @@ -32,7 +31,7 @@ interface HeaderProps { } function Header({mainPage}: HeaderProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const history = useHistory(); const location = useLocation(); diff --git a/src/containers/Heatmap/Heatmap.tsx b/src/containers/Heatmap/Heatmap.tsx index c75a41f932..517b586901 100644 --- a/src/containers/Heatmap/Heatmap.tsx +++ b/src/containers/Heatmap/Heatmap.tsx @@ -1,5 +1,4 @@ import React, {useCallback, useEffect, useState} from 'react'; -import {useDispatch} from 'react-redux'; import cn from 'bem-cn-lite'; import {Checkbox, Select} from '@gravity-ui/uikit'; @@ -8,7 +7,7 @@ import type {IHeatmapMetricValue} from '../../types/store/heatmap'; import {getTabletsInfo, setHeatmapOptions} from '../../store/reducers/heatmap'; import {showTooltip, hideTooltip} from '../../store/reducers/tooltip'; import {formatNumber} from '../../utils/dataFormatters/dataFormatters'; -import {useAutofetcher, useTypedSelector} from '../../utils/hooks'; +import {useAutofetcher, useTypedSelector, useTypedDispatch} from '../../utils/hooks'; import {Loader} from '../../components/Loader'; import {ResponseError} from '../../components/Errors/ResponseError'; @@ -27,7 +26,7 @@ interface HeatmapProps { } export const Heatmap = ({path}: HeatmapProps) => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const itemsContainer = React.createRef(); @@ -75,7 +74,7 @@ export const Heatmap = ({path}: HeatmapProps) => { }; const onHideTooltip = () => { - dispatch(hideTooltip); + dispatch(hideTooltip()); }; const handleMetricChange = (value: string[]) => { diff --git a/src/containers/Node/Node.tsx b/src/containers/Node/Node.tsx index 003dda62fb..cf1435d735 100644 --- a/src/containers/Node/Node.tsx +++ b/src/containers/Node/Node.tsx @@ -1,7 +1,6 @@ import {useEffect, useMemo, useRef} from 'react'; import {useLocation, useRouteMatch} from 'react-router'; import cn from 'bem-cn-lite'; -import {useDispatch} from 'react-redux'; import {Helmet} from 'react-helmet-async'; import {Tabs} from '@gravity-ui/uikit'; @@ -19,7 +18,7 @@ import {getNodeInfo, resetNode} from '../../store/reducers/node/node'; import routes, {createHref, parseQuery} from '../../routes'; import {setHeaderBreadcrumbs} from '../../store/reducers/header/header'; import {AutoFetcher} from '../../utils/autofetcher'; -import {useTypedSelector} from '../../utils/hooks'; +import {useTypedSelector, useTypedDispatch} from '../../utils/hooks'; import type {AdditionalNodesProps} from '../../types/additionalProps'; @@ -39,7 +38,7 @@ interface NodeProps { function Node(props: NodeProps) { const container = useRef(null); - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const location = useLocation(); const {loading, wasLoaded, error, data: node} = useTypedSelector((state) => state.node); diff --git a/src/containers/Node/NodeStructure/NodeStructure.tsx b/src/containers/Node/NodeStructure/NodeStructure.tsx index 3c3cc8d362..e25458a51b 100644 --- a/src/containers/Node/NodeStructure/NodeStructure.tsx +++ b/src/containers/Node/NodeStructure/NodeStructure.tsx @@ -1,5 +1,4 @@ import {useEffect, useRef} from 'react'; -import {useDispatch} from 'react-redux'; import url from 'url'; import {isEmpty} from 'lodash/fp'; @@ -11,7 +10,7 @@ import {getNodeStructure} from '../../../store/reducers/node/node'; import {selectNodeStructure} from '../../../store/reducers/node/selectors'; import {AutoFetcher} from '../../../utils/autofetcher'; -import {useTypedSelector} from '../../../utils/hooks'; +import {useTypedSelector, useTypedDispatch} from '../../../utils/hooks'; import {PDisk} from './Pdisk'; @@ -35,7 +34,7 @@ interface NodeStructureProps { const autofetcher = new AutoFetcher(); function NodeStructure({nodeId, className}: NodeStructureProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const nodeStructure = useTypedSelector(selectNodeStructure); diff --git a/src/containers/Nodes/Nodes.tsx b/src/containers/Nodes/Nodes.tsx index f2087112c2..d141f3cd01 100644 --- a/src/containers/Nodes/Nodes.tsx +++ b/src/containers/Nodes/Nodes.tsx @@ -1,6 +1,5 @@ import {useCallback, useEffect} from 'react'; import cn from 'bem-cn-lite'; -import {useDispatch} from 'react-redux'; import DataTable from '@gravity-ui/react-data-table'; import {ASCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants'; @@ -18,7 +17,13 @@ import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/ import {ResponseError} from '../../components/Errors/ResponseError'; import {DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY} from '../../utils/constants'; -import {useAutofetcher, useSetting, useTypedSelector, useTableSort} from '../../utils/hooks'; +import { + useAutofetcher, + useSetting, + useTypedSelector, + useTableSort, + useTypedDispatch, +} from '../../utils/hooks'; import { isSortableNodesProperty, isUnavailableNode, @@ -52,7 +57,7 @@ interface NodesProps { } export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const isClusterNodes = !path; diff --git a/src/containers/ReduxTooltip/ReduxTooltip.js b/src/containers/ReduxTooltip/ReduxTooltip.js index f9ee677ad3..10c59f8a33 100644 --- a/src/containers/ReduxTooltip/ReduxTooltip.js +++ b/src/containers/ReduxTooltip/ReduxTooltip.js @@ -4,6 +4,7 @@ import {connect} from 'react-redux'; import {Popup, useVirtualElementRef} from '@gravity-ui/uikit'; import {hideTooltip} from '../../store/reducers/tooltip'; +import {tooltipTemplates} from '../../utils/tooltip'; import './ReduxTooltip.scss'; @@ -87,7 +88,7 @@ function ReduxTooltip(props) { } const mapStateToProps = (state) => { - const {toolTipVisible, currentHoveredRef, data, template, additionalData, positions} = + const {toolTipVisible, currentHoveredRef, data, templateType, additionalData, positions} = state.tooltip; const {popupClassName} = additionalData || {}; @@ -96,7 +97,7 @@ const mapStateToProps = (state) => { toolTipVisible, currentHoveredRef, data, - template, + template: tooltipTemplates[templateType], additionalData, positions, popupClassName, diff --git a/src/containers/Storage/Storage.tsx b/src/containers/Storage/Storage.tsx index 1f6700646c..32ff4255f4 100644 --- a/src/containers/Storage/Storage.tsx +++ b/src/containers/Storage/Storage.tsx @@ -1,5 +1,4 @@ import {useCallback, useEffect} from 'react'; -import {useDispatch} from 'react-redux'; import {AccessDenied} from '../../components/Errors/403'; import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout'; @@ -41,6 +40,7 @@ import { useStorageRequestParams, useTableSort, useTypedSelector, + useTypedDispatch, } from '../../utils/hooks'; import {NodesUptimeFilterValues} from '../../utils/nodes'; import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants'; @@ -59,7 +59,7 @@ interface StorageProps { } export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const {autorefresh} = useTypedSelector((state) => state.schema); const { diff --git a/src/containers/Storage/VirtualStorage.tsx b/src/containers/Storage/VirtualStorage.tsx index 4e71a9eab7..af71d71060 100644 --- a/src/containers/Storage/VirtualStorage.tsx +++ b/src/containers/Storage/VirtualStorage.tsx @@ -1,5 +1,4 @@ import {useEffect, useState} from 'react'; -import {useDispatch} from 'react-redux'; import type {AdditionalNodesProps} from '../../types/additionalProps'; import type {RenderControls, RenderErrorMessage} from '../../components/VirtualTable'; @@ -9,7 +8,7 @@ import {NodesUptimeFilterValues} from '../../utils/nodes'; import {AccessDenied} from '../../components/Errors/403/AccessDenied'; import {ResponseError} from '../../components/Errors/ResponseError/ResponseError'; import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList'; -import {useTypedSelector} from '../../utils/hooks'; +import {useTypedSelector, useTypedDispatch} from '../../utils/hooks'; import {StorageControls} from './StorageControls/StorageControls'; import {VirtualStorageGroups} from './StorageGroups/VirtualStorageGroups'; @@ -28,7 +27,7 @@ export const VirtualStorage = ({ parentContainer, additionalNodesProps, }: VirtualStorageProps) => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const [searchValue, setSearchValue] = useState(''); const [storageType, setStorageType] = useState(STORAGE_TYPES.groups); diff --git a/src/containers/Tablet/Tablet.tsx b/src/containers/Tablet/Tablet.tsx index dddc07d954..6c4eb5ff4c 100644 --- a/src/containers/Tablet/Tablet.tsx +++ b/src/containers/Tablet/Tablet.tsx @@ -1,6 +1,5 @@ import {useCallback, useEffect, useRef} from 'react'; import {useLocation, useParams} from 'react-router'; -import {useDispatch} from 'react-redux'; import cn from 'bem-cn-lite'; import {Link as ExternalLink} from '@gravity-ui/uikit'; import {Helmet} from 'react-helmet-async'; @@ -9,7 +8,7 @@ import {backend} from '../../store'; import {getTablet, getTabletDescribe, clearTabletData} from '../../store/reducers/tablet'; import {setHeaderBreadcrumbs} from '../../store/reducers/header/header'; -import {useAutofetcher, useTypedSelector} from '../../utils/hooks'; +import {useAutofetcher, useTypedSelector, useTypedDispatch} from '../../utils/hooks'; import {CLUSTER_DEFAULT_TITLE, DEVELOPER_UI_TITLE} from '../../utils/constants'; import {parseQuery} from '../../routes'; @@ -34,7 +33,7 @@ export const b = cn('tablet-page'); export const Tablet = () => { const isFirstDataFetchRef = useRef(true); - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const location = useLocation(); const params = useParams<{id: string}>(); diff --git a/src/containers/Tablets/Tablets.tsx b/src/containers/Tablets/Tablets.tsx index c838edaae6..e188adc4f0 100644 --- a/src/containers/Tablets/Tablets.tsx +++ b/src/containers/Tablets/Tablets.tsx @@ -1,5 +1,4 @@ import {useCallback, useEffect, useMemo, useState} from 'react'; -import {useDispatch} from 'react-redux'; import cn from 'bem-cn-lite'; import ReactList from 'react-list'; @@ -9,7 +8,7 @@ import {Tablet} from '../../components/Tablet'; import TabletsOverall from '../../components/TabletsOverall/TabletsOverall'; import {Loader} from '../../components/Loader'; -import {useAutofetcher, useTypedSelector} from '../../utils/hooks'; +import {useAutofetcher, useTypedSelector, useTypedDispatch} from '../../utils/hooks'; import {ETabletState, EType, TTabletStateInfo} from '../../types/api/tablet'; import { @@ -32,7 +31,7 @@ interface TabletsProps { } export const Tablets = ({path, nodeId, className}: TabletsProps) => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const {data, wasLoaded, loading, error, stateFilter, typeFilter} = useTypedSelector( (state) => state.tablets, diff --git a/src/containers/Tenant/Acl/Acl.tsx b/src/containers/Tenant/Acl/Acl.tsx index 52a47c31c3..da4e7b62e3 100644 --- a/src/containers/Tenant/Acl/Acl.tsx +++ b/src/containers/Tenant/Acl/Acl.tsx @@ -1,4 +1,3 @@ -import {useDispatch} from 'react-redux'; import {useEffect} from 'react'; import cn from 'bem-cn-lite'; @@ -6,7 +5,7 @@ import DataTable, {Column} from '@gravity-ui/react-data-table'; import type {TACE} from '../../../types/api/acl'; import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants'; -import {useTypedSelector} from '../../../utils/hooks'; +import {useTypedSelector, useTypedDispatch} from '../../../utils/hooks'; import {getSchemaAcl, setAclWasNotLoaded} from '../../../store/reducers/schemaAcl/schemaAcl'; import {ResponseError} from '../../../components/Errors/ResponseError'; @@ -70,7 +69,7 @@ const columns: Column[] = [ ]; export const Acl = () => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const {currentSchemaPath} = useTypedSelector((state) => state.schema); const {loading, error, acl, owner, wasLoaded} = useTypedSelector((state) => state.schemaAcl); diff --git a/src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx b/src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx index 55483213cc..1d98efc289 100644 --- a/src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx +++ b/src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx @@ -1,5 +1,4 @@ import {useCallback, useMemo, useState} from 'react'; -import {useDispatch} from 'react-redux'; import block from 'bem-cn-lite'; import {escapeRegExp} from 'lodash/fp'; @@ -11,7 +10,7 @@ import {Loader} from '../../../../components/Loader'; import {Search} from '../../../../components/Search'; import {ResponseError} from '../../../../components/Errors/ResponseError'; -import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks'; +import {useAutofetcher, useTypedSelector, useTypedDispatch} from '../../../../utils/hooks'; import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants'; import { @@ -40,7 +39,7 @@ interface ConsumersProps { export const Consumers = ({path, type}: ConsumersProps) => { const isCdcStream = isCdcStreamEntityType(type); - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const [searchValue, setSearchValue] = useState(''); diff --git a/src/containers/Tenant/Diagnostics/Describe/Describe.tsx b/src/containers/Tenant/Diagnostics/Describe/Describe.tsx index f621749709..08b34ab4d0 100644 --- a/src/containers/Tenant/Diagnostics/Describe/Describe.tsx +++ b/src/containers/Tenant/Diagnostics/Describe/Describe.tsx @@ -1,5 +1,5 @@ import {useCallback, useEffect, useState} from 'react'; -import {shallowEqual, useDispatch} from 'react-redux'; +import {shallowEqual} from 'react-redux'; import cn from 'bem-cn-lite'; import JSONTree from 'react-json-inspector'; import 'react-json-inspector/json-inspector.css'; @@ -7,7 +7,7 @@ import 'react-json-inspector/json-inspector.css'; import {Loader} from '../../../../components/Loader'; import {ResponseError} from '../../../../components/Errors/ResponseError'; -import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks'; +import {useAutofetcher, useTypedSelector, useTypedDispatch} from '../../../../utils/hooks'; import { getDescribe, setDataWasNotLoaded, @@ -31,7 +31,7 @@ interface IDescribeProps { } const Describe = ({tenant, type}: IDescribeProps) => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const {currentDescribe, error, loading, wasLoaded} = useTypedSelector( (state) => state.describe, diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.tsx b/src/containers/Tenant/Diagnostics/Diagnostics.tsx index e454d0c72b..f2f86c7b9e 100644 --- a/src/containers/Tenant/Diagnostics/Diagnostics.tsx +++ b/src/containers/Tenant/Diagnostics/Diagnostics.tsx @@ -2,7 +2,6 @@ import {useMemo, useRef} from 'react'; import qs from 'qs'; import cn from 'bem-cn-lite'; import {Link} from 'react-router-dom'; -import {useDispatch, useSelector} from 'react-redux'; import {useLocation} from 'react-router'; import {Helmet} from 'react-helmet-async'; @@ -11,7 +10,7 @@ import {Switch, Tabs} from '@gravity-ui/uikit'; import type {EPathType} from '../../../types/api/schema'; import type {AdditionalTenantsProps, AdditionalNodesProps} from '../../../types/additionalProps'; -import {useTypedSelector} from '../../../utils/hooks'; +import {useTypedSelector, useTypedDispatch} from '../../../utils/hooks'; import routes, {createHref} from '../../../routes'; import type {TenantDiagnosticsTab} from '../../../store/reducers/tenant/types'; import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema/schema'; @@ -52,8 +51,8 @@ const b = cn('kv-tenant-diagnostics'); function Diagnostics(props: DiagnosticsProps) { const container = useRef(null); - const dispatch = useDispatch(); - const {currentSchemaPath, autorefresh, wasLoaded} = useSelector((state: any) => state.schema); + const dispatch = useTypedDispatch(); + const {currentSchemaPath, autorefresh, wasLoaded} = useTypedSelector((state) => state.schema); const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview} = useTypedSelector( (state) => state.tenant, ); @@ -147,12 +146,15 @@ function Diagnostics(props: DiagnosticsProps) { return ; } case TENANT_DIAGNOSTICS_TABS_IDS.hotKeys: { + // @ts-expect-error return ; } case TENANT_DIAGNOSTICS_TABS_IDS.graph: { + // @ts-expect-error return ; } case TENANT_DIAGNOSTICS_TABS_IDS.consumers: { + // @ts-expect-error return ; } case TENANT_DIAGNOSTICS_TABS_IDS.partitions: { diff --git a/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.tsx b/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.tsx index c3ba7d2418..81192f6087 100644 --- a/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.tsx +++ b/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.tsx @@ -1,12 +1,11 @@ import {useEffect, useMemo, useRef} from 'react'; -import {useDispatch} from 'react-redux'; import DataTable, {type Column} from '@gravity-ui/react-data-table'; import type {HotKey} from '../../../../types/api/hotkeys'; import type {IResponseError} from '../../../../types/api/error'; import {Icon} from '../../../../components/Icon'; import {ResponseError} from '../../../../components/Errors/ResponseError'; -import {useTypedSelector} from '../../../../utils/hooks'; +import {useTypedSelector, useTypedDispatch} from '../../../../utils/hooks'; import {cn} from '../../../../utils/cn'; import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants'; import { @@ -57,7 +56,7 @@ interface HotKeysProps { } export function HotKeys({path}: HotKeysProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const collectSamplesTimerRef = useRef>(); diff --git a/src/containers/Tenant/Diagnostics/Overview/Overview.tsx b/src/containers/Tenant/Diagnostics/Overview/Overview.tsx index 24d608e829..8fb29d790d 100644 --- a/src/containers/Tenant/Diagnostics/Overview/Overview.tsx +++ b/src/containers/Tenant/Diagnostics/Overview/Overview.tsx @@ -1,12 +1,12 @@ import {ReactNode, useCallback} from 'react'; -import {shallowEqual, useDispatch} from 'react-redux'; +import {shallowEqual} from 'react-redux'; import {Loader} from '../../../../components/Loader'; import {TableIndexInfo} from '../../../../components/InfoViewer/schemaInfo'; import {ResponseError} from '../../../../components/Errors/ResponseError'; import {EPathType} from '../../../../types/api/schema'; -import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks'; +import {useAutofetcher, useTypedSelector, useTypedDispatch} from '../../../../utils/hooks'; import {selectSchemaMergedChildrenPaths} from '../../../../store/reducers/schema/schema'; import {getTopic} from '../../../../store/reducers/topic'; import { @@ -40,7 +40,7 @@ interface OverviewProps { } function Overview({type, tenantName}: OverviewProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema); const { diff --git a/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx b/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx index 0e87ff9e62..feb75c526e 100644 --- a/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx +++ b/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx @@ -1,10 +1,14 @@ import block from 'bem-cn-lite'; import {useCallback, useEffect, useMemo, useState} from 'react'; -import {useDispatch} from 'react-redux'; import DataTable from '@gravity-ui/react-data-table'; -import {useAutofetcher, useTypedSelector, useSetting} from '../../../../utils/hooks'; +import { + useAutofetcher, + useTypedSelector, + useTypedDispatch, + useSetting, +} from '../../../../utils/hooks'; import {DEFAULT_TABLE_SETTINGS, PARTITIONS_HIDDEN_COLUMNS_KEY} from '../../../../utils/constants'; import {getNodesList, selectNodesMap} from '../../../../store/reducers/nodesList'; @@ -39,7 +43,7 @@ interface PartitionsProps { } export const Partitions = ({path}: PartitionsProps) => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); // Manual path control to ensure that topic state will be reset before data fetch // so no request with wrong params will be sent diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx index abd6cc62de..1b34568dd3 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx @@ -1,7 +1,11 @@ -import {useDispatch} from 'react-redux'; import {useCallback} from 'react'; -import {useAutofetcher, useSearchQuery, useTypedSelector} from '../../../../../utils/hooks'; +import { + useAutofetcher, + useSearchQuery, + useTypedDispatch, + useTypedSelector, +} from '../../../../../utils/hooks'; import { getTopNodesByCpu, selectTopNodesByCpu, @@ -23,7 +27,7 @@ interface TopNodesByCpuProps { } export function TopNodesByCpu({path, additionalNodesProps}: TopNodesByCpuProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const query = useSearchQuery(); diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx index ddb31fd9a4..9d9a9264e1 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx @@ -1,7 +1,11 @@ -import {useDispatch} from 'react-redux'; import {useCallback} from 'react'; -import {useAutofetcher, useSearchQuery, useTypedSelector} from '../../../../../utils/hooks'; +import { + useAutofetcher, + useSearchQuery, + useTypedDispatch, + useTypedSelector, +} from '../../../../../utils/hooks'; import { getTopNodesByLoad, selectTopNodesByLoad, @@ -23,7 +27,7 @@ interface TopNodesByLoadProps { } export function TopNodesByLoad({path, additionalNodesProps}: TopNodesByLoadProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const query = useSearchQuery(); diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx index e3b4cc0cde..677a521f0a 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx @@ -1,4 +1,3 @@ -import {useDispatch} from 'react-redux'; import {useHistory, useLocation} from 'react-router'; import {useCallback} from 'react'; @@ -13,7 +12,7 @@ import { setDataWasNotLoaded, } from '../../../../../store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries'; import {changeUserInput} from '../../../../../store/reducers/executeQuery'; -import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks'; +import {useAutofetcher, useTypedDispatch, useTypedSelector} from '../../../../../utils/hooks'; import {parseQuery} from '../../../../../routes'; import {TenantTabsGroups, getTenantPath} from '../../../TenantPages'; @@ -28,7 +27,7 @@ interface TopQueriesProps { } export function TopQueries({path}: TopQueriesProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const location = useLocation(); const history = useHistory(); diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx index a992a76f00..2a83966ed5 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx @@ -1,7 +1,6 @@ -import {useDispatch} from 'react-redux'; import {useLocation} from 'react-router'; -import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks'; +import {useAutofetcher, useTypedDispatch, useTypedSelector} from '../../../../../utils/hooks'; import {parseQuery} from '../../../../../routes'; import { @@ -22,7 +21,7 @@ interface TopShardsProps { } export const TopShards = ({path}: TopShardsProps) => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const location = useLocation(); const query = parseQuery(location); diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx index 558a7c1ad7..8e29d6e94e 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx @@ -1,7 +1,11 @@ -import {useDispatch} from 'react-redux'; import {useCallback} from 'react'; -import {useAutofetcher, useTypedSelector, useSearchQuery} from '../../../../../utils/hooks'; +import { + useAutofetcher, + useTypedSelector, + useSearchQuery, + useTypedDispatch, +} from '../../../../../utils/hooks'; import { getTopNodesByMemory, selectTopNodesByMemory, @@ -23,7 +27,7 @@ interface TopNodesByMemoryProps { } export function TopNodesByMemory({path, additionalNodesProps}: TopNodesByMemoryProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const query = useSearchQuery(); diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx index c83e9f23d1..e94fb9d3e2 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx @@ -1,5 +1,4 @@ import {useCallback} from 'react'; -import {useDispatch} from 'react-redux'; import {Loader} from '@gravity-ui/uikit'; @@ -7,7 +6,7 @@ import EntityStatus from '../../../../components/EntityStatus/EntityStatus'; import {TENANT_DEFAULT_TITLE} from '../../../../utils/constants'; import {TENANT_METRICS_TABS_IDS} from '../../../../store/reducers/tenant/constants'; import {mapDatabaseTypeToDBName} from '../../utils/schema'; -import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks'; +import {useAutofetcher, useTypedSelector, useTypedDispatch} from '../../../../utils/hooks'; import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../../types/additionalProps'; import {getTenantInfo, setDataWasNotLoaded} from '../../../../store/reducers/tenant/tenant'; import {calculateTenantMetrics} from '../../../../store/reducers/tenants/utils'; @@ -33,7 +32,7 @@ export function TenantOverview({ additionalTenantProps, additionalNodesProps, }: TenantOverviewProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const { tenant, diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx index 23c7460b78..2fb05c4833 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx @@ -1,7 +1,11 @@ import {useCallback} from 'react'; -import {useDispatch} from 'react-redux'; -import {useAutofetcher, useSearchQuery, useTypedSelector} from '../../../../../utils/hooks'; +import { + useAutofetcher, + useSearchQuery, + useTypedDispatch, + useTypedSelector, +} from '../../../../../utils/hooks'; import { setDataWasNotLoaded, getTopStorageGroups, @@ -21,7 +25,7 @@ interface TopGroupsProps { } export function TopGroups({tenant}: TopGroupsProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const query = useSearchQuery(); diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx index 9cf5b41301..0b29e279e1 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx @@ -1,9 +1,8 @@ -import {useDispatch} from 'react-redux'; import {useLocation} from 'react-router'; import DataTable, {Column} from '@gravity-ui/react-data-table'; -import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks'; +import {useAutofetcher, useTypedDispatch, useTypedSelector} from '../../../../../utils/hooks'; import { fetchTopTables, setDataWasNotLoaded, @@ -24,7 +23,7 @@ interface TopTablesProps { } export function TopTables({path}: TopTablesProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const location = useLocation(); const {autorefresh} = useTypedSelector((state) => state.schema); diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/useHealthcheck.ts b/src/containers/Tenant/Diagnostics/TenantOverview/useHealthcheck.ts index eea286be67..ccf1f9dce4 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/useHealthcheck.ts +++ b/src/containers/Tenant/Diagnostics/TenantOverview/useHealthcheck.ts @@ -1,5 +1,4 @@ import {useCallback} from 'react'; -import {useDispatch} from 'react-redux'; import { getHealthcheckInfo, @@ -10,7 +9,7 @@ import { import type {IIssuesTree} from '../../../../types/store/healthcheck'; import {type StatusFlag, SelfCheckResult} from '../../../../types/api/healthcheck'; import type {IResponseError} from '../../../../types/api/error'; -import {useTypedSelector} from '../../../../utils/hooks/useTypedSelector'; +import {useTypedSelector, useTypedDispatch} from '../../../../utils/hooks'; interface HealthcheckParams { issueTrees: IIssuesTree[]; @@ -23,7 +22,7 @@ interface HealthcheckParams { } export const useHealthcheck = (tenantName: string): HealthcheckParams => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const {data, loading, wasLoaded, error} = useTypedSelector((state) => state.healthcheckInfo); const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED; diff --git a/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx b/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx index 241aaa1918..940344d826 100644 --- a/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx +++ b/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx @@ -1,5 +1,4 @@ import {useCallback, useEffect, useRef, useState} from 'react'; -import {useDispatch} from 'react-redux'; import {useHistory, useLocation} from 'react-router'; import cn from 'bem-cn-lite'; @@ -26,7 +25,7 @@ import { fetchTopQueries, } from '../../../../store/reducers/executeTopQueries/executeTopQueries'; import {HOUR_IN_SECONDS} from '../../../../utils/constants'; -import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks'; +import {useAutofetcher, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks'; import {prepareQueryError} from '../../../../utils/query'; import {parseQuery} from '../../../../routes'; import {QUERY_TABLE_SETTINGS} from '../../utils/constants'; @@ -46,7 +45,7 @@ interface TopQueriesProps { } export const TopQueries = ({path, type}: TopQueriesProps) => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const location = useLocation(); const history = useHistory(); @@ -117,8 +116,6 @@ export const TopQueries = ({path, type}: TopQueriesProps) => { ); } - // @ts-expect-error - // typed dispatch required, remove error expectation after adding it dispatch(fetchTopQueries({database: path, filters})).then( setDefaultFiltersFromResponse, ); diff --git a/src/containers/Tenant/Diagnostics/TopShards/TopShards.tsx b/src/containers/Tenant/Diagnostics/TopShards/TopShards.tsx index c9cb68a568..57f11a8db6 100644 --- a/src/containers/Tenant/Diagnostics/TopShards/TopShards.tsx +++ b/src/containers/Tenant/Diagnostics/TopShards/TopShards.tsx @@ -1,5 +1,4 @@ import {useState, useEffect, useMemo} from 'react'; -import {useDispatch} from 'react-redux'; import cn from 'bem-cn-lite'; import {useLocation} from 'react-router'; @@ -21,7 +20,7 @@ import type {CellValue, KeyValueRow} from '../../../../types/api/query'; import {formatDateTime} from '../../../../utils/dataFormatters/dataFormatters'; import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants'; -import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks'; +import {useAutofetcher, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks'; import {prepareQueryError} from '../../../../utils/query'; import {isSortableTopShardsProperty} from '../../../../utils/diagnostics'; import {isColumnEntityType} from '../../utils/schema'; @@ -95,7 +94,7 @@ interface TopShardsProps { } export const TopShards = ({tenantPath, type}: TopShardsProps) => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const location = useLocation(); const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema); diff --git a/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx b/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx index 234767afdb..fbe53230d9 100644 --- a/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx +++ b/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx @@ -3,7 +3,6 @@ import {Button, Tabs} from '@gravity-ui/uikit'; import cn from 'bem-cn-lite'; import qs from 'qs'; import React, {ReactNode, useEffect, useReducer} from 'react'; -import {useDispatch} from 'react-redux'; import {useLocation} from 'react-router'; import {Link} from 'react-router-dom'; import {ClipboardButton} from '../../../components/ClipboardButton'; @@ -34,7 +33,7 @@ import { DEFAULT_SIZE_TENANT_SUMMARY_KEY, } from '../../../utils/constants'; import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters'; -import {useTypedSelector} from '../../../utils/hooks'; +import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks'; import {Acl} from '../Acl/Acl'; import i18n from '../i18n'; import {ExternalDataSourceSummary} from '../Info/ExternalDataSource/ExternalDataSource'; @@ -100,7 +99,7 @@ export function ObjectSummary({ onExpandSummary, isCollapsed, }: ObjectSummaryProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const [commonInfoVisibilityState, dispatchCommonInfoVisibilityState] = useReducer( paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED), undefined, diff --git a/src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx b/src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx index 01982d7057..e496afcb68 100644 --- a/src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx +++ b/src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx @@ -2,7 +2,6 @@ import {RadioButton, Tabs} from '@gravity-ui/uikit'; import cn from 'bem-cn-lite'; import React, {useEffect, useState} from 'react'; import JSONTree from 'react-json-inspector'; -import {useDispatch} from 'react-redux'; import {ClipboardButton} from '../../../../components/ClipboardButton'; import Divider from '../../../../components/Divider/Divider'; import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton'; @@ -14,7 +13,7 @@ import type {ColumnType, KeyValueRow} from '../../../../types/api/query'; import type {ValueOf} from '../../../../types/common'; import type {IQueryResult, QueryErrorResponse} from '../../../../types/store/query'; import {getArray} from '../../../../utils'; -import {useTypedSelector} from '../../../../utils/hooks'; +import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks'; import {prepareQueryError} from '../../../../utils/query'; import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers'; import {ResultIssues} from '../Issues/Issues'; @@ -57,7 +56,7 @@ export function ExecuteResult({ const [activeSection, setActiveSection] = useState(resultOptionsIds.result); const isFullscreen = useTypedSelector((state) => state.fullscreen); - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const resultsSetsCount = data?.resultSets?.length; const isMulti = resultsSetsCount && resultsSetsCount > 0; diff --git a/src/containers/Tenant/Query/ExplainResult/ExplainResult.js b/src/containers/Tenant/Query/ExplainResult/ExplainResult.js index a498276ef0..b7ce76b05c 100644 --- a/src/containers/Tenant/Query/ExplainResult/ExplainResult.js +++ b/src/containers/Tenant/Query/ExplainResult/ExplainResult.js @@ -1,5 +1,4 @@ import React, {useEffect, useRef, useState} from 'react'; -import {useDispatch, useSelector} from 'react-redux'; import cn from 'bem-cn-lite'; import MonacoEditor from 'react-monaco-editor'; import JSONTree from 'react-json-inspector'; @@ -17,6 +16,7 @@ import {explainVersions} from '../../../../store/reducers/explainQuery'; import {disableFullscreen} from '../../../../store/reducers/fullscreen'; import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco'; +import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks'; import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers'; @@ -92,10 +92,10 @@ function GraphRoot(props) { } export function ExplainResult(props) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const [activeOption, setActiveOption] = useState(ExplainOptionIds.schema); - const isFullscreen = useSelector((state) => state.fullscreen); + const isFullscreen = useTypedSelector((state) => state.fullscreen); useEffect(() => { return () => { diff --git a/src/containers/Tenant/Query/Preview/Preview.tsx b/src/containers/Tenant/Query/Preview/Preview.tsx index 2efabc54f6..1d2ce248f4 100644 --- a/src/containers/Tenant/Query/Preview/Preview.tsx +++ b/src/containers/Tenant/Query/Preview/Preview.tsx @@ -1,5 +1,4 @@ import {useCallback} from 'react'; -import {useDispatch} from 'react-redux'; import cn from 'bem-cn-lite'; import {Loader, Button} from '@gravity-ui/uikit'; @@ -8,7 +7,7 @@ import type {EPathType} from '../../../../types/api/schema'; import {sendQuery, setQueryOptions} from '../../../../store/reducers/preview'; import {setShowPreview} from '../../../../store/reducers/schema/schema'; import {prepareQueryError} from '../../../../utils/query'; -import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks'; +import {useAutofetcher, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks'; import {Icon} from '../../../../components/Icon'; import Fullscreen from '../../../../components/Fullscreen/Fullscreen'; @@ -29,7 +28,7 @@ interface PreviewProps { } export const Preview = ({database, type}: PreviewProps) => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const {data = {}, loading, error, wasLoaded} = useTypedSelector((state) => state.preview); const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema); diff --git a/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx b/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx index bb6e5ad57a..3fe44e1707 100644 --- a/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx +++ b/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx @@ -1,4 +1,3 @@ -import {useDispatch} from 'react-redux'; import block from 'bem-cn-lite'; import DataTable, {Column} from '@gravity-ui/react-data-table'; @@ -8,7 +7,7 @@ import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQue import {setQueryTab} from '../../../../store/reducers/tenant/tenant'; import {selectQueriesHistory} from '../../../../store/reducers/executeQuery'; import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants'; -import {useQueryModes, useTypedSelector} from '../../../../utils/hooks'; +import {useQueryModes, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks'; import {QUERY_MODES, QUERY_SYNTAX} from '../../../../utils/query'; import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants'; @@ -23,7 +22,7 @@ interface QueriesHistoryProps { } function QueriesHistory({changeUserInput}: QueriesHistoryProps) { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const [queryMode, setQueryMode] = useQueryModes(); diff --git a/src/containers/Tenant/Query/Query.tsx b/src/containers/Tenant/Query/Query.tsx index c0db0a8757..29835e839b 100644 --- a/src/containers/Tenant/Query/Query.tsx +++ b/src/containers/Tenant/Query/Query.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import {useDispatch} from 'react-redux'; import {Helmet} from 'react-helmet-async'; import block from 'bem-cn-lite'; @@ -7,7 +6,7 @@ import type {EPathType} from '../../../types/api/schema'; import type {SavedQuery} from '../../../types/store/query'; import {changeUserInput} from '../../../store/reducers/executeQuery'; import {TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants'; -import {useSetting, useTypedSelector} from '../../../utils/hooks'; +import {useSetting, useTypedDispatch, useTypedSelector} from '../../../utils/hooks'; import {SAVED_QUERIES_KEY} from '../../../utils/constants'; import {QueryTabs, queryEditorTabs} from './QueryTabs/QueryTabs'; @@ -26,7 +25,7 @@ interface QueryProps { } export const Query = (props: QueryProps) => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const {queryTab = TENANT_QUERY_TABS_ID.newQuery} = useTypedSelector((state) => state.tenant); diff --git a/src/containers/Tenant/Query/SaveQuery/SaveQuery.js b/src/containers/Tenant/Query/SaveQuery/SaveQuery.js index e5406b7ae4..c5416320a0 100644 --- a/src/containers/Tenant/Query/SaveQuery/SaveQuery.js +++ b/src/containers/Tenant/Query/SaveQuery/SaveQuery.js @@ -1,23 +1,23 @@ import React, {useState} from 'react'; import _ from 'lodash'; import cn from 'bem-cn-lite'; -import {useDispatch, useSelector} from 'react-redux'; import {Dialog, DropdownMenu, TextInput, Button} from '@gravity-ui/uikit'; import {setQueryNameToEdit} from '../../../../store/reducers/saveQuery'; +import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks'; import './SaveQuery.scss'; const b = cn('kv-save-query'); function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) { - const singleClusterMode = useSelector((state) => state.singleClusterMode); + const singleClusterMode = useTypedSelector((state) => state.singleClusterMode); const [isDialogVisible, setIsDialogVisible] = useState(false); const [queryName, setQueryName] = useState(''); const [validationError, setValidationError] = useState(null); - const queryNameToEdit = useSelector((state) => state.saveQuery); - const dispatch = useDispatch(); + const queryNameToEdit = useTypedSelector((state) => state.saveQuery); + const dispatch = useTypedDispatch(); const onSaveQueryClick = () => { setIsDialogVisible(true); diff --git a/src/containers/Tenant/Query/SavedQueries/SavedQueries.tsx b/src/containers/Tenant/Query/SavedQueries/SavedQueries.tsx index 5538f3daa6..6676beac6d 100644 --- a/src/containers/Tenant/Query/SavedQueries/SavedQueries.tsx +++ b/src/containers/Tenant/Query/SavedQueries/SavedQueries.tsx @@ -1,5 +1,4 @@ import {MouseEvent, useState} from 'react'; -import {useDispatch} from 'react-redux'; import block from 'bem-cn-lite'; import {Dialog, Button} from '@gravity-ui/uikit'; @@ -13,6 +12,7 @@ import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants' import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery'; import {Icon} from '../../../../components/Icon'; +import {useTypedDispatch} from '../../../../utils/hooks'; import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants'; import i18n from '../i18n'; @@ -59,7 +59,7 @@ interface SavedQueriesProps { } export const SavedQueries = ({savedQueries, changeUserInput, onDeleteQuery}: SavedQueriesProps) => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const [isDeleteDialogVisible, setIsDeleteDialogVisible] = useState(false); const [queryNameToDelete, setQueryNameToDelete] = useState(''); diff --git a/src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx b/src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx index 18189386b8..a94e702a7f 100644 --- a/src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx +++ b/src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx @@ -1,11 +1,10 @@ import {useEffect} from 'react'; -import {useDispatch} from 'react-redux'; import {NavigationTree} from 'ydb-ui-components'; import type {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema'; import {setCurrentSchemaPath, preloadSchemas} from '../../../../store/reducers/schema/schema'; -import {useQueryModes} from '../../../../utils/hooks'; +import {useQueryModes, useTypedDispatch} from '../../../../utils/hooks'; import {isChildlessPathType, mapPathTypeToNavigationTreeType} from '../../utils/schema'; import {getActions} from '../../utils/schemaActions'; @@ -21,7 +20,7 @@ interface SchemaTreeProps { export function SchemaTree(props: SchemaTreeProps) { const {rootPath, rootName, rootType, currentPath} = props; - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const [_, setQueryMode] = useQueryModes(); diff --git a/src/containers/Tenant/Tenant.tsx b/src/containers/Tenant/Tenant.tsx index 969941a4ba..5c9c339fad 100644 --- a/src/containers/Tenant/Tenant.tsx +++ b/src/containers/Tenant/Tenant.tsx @@ -1,5 +1,4 @@ import {useEffect, useReducer} from 'react'; -import {useDispatch, useSelector} from 'react-redux'; import cn from 'bem-cn-lite'; import {useLocation} from 'react-router'; import qs from 'qs'; @@ -9,7 +8,7 @@ import type {TEvDescribeSchemeResult} from '../../types/api/schema'; import type {AdditionalTenantsProps, AdditionalNodesProps} from '../../types/additionalProps'; import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../../utils/constants'; -import {useTypedSelector} from '../../utils/hooks'; +import {useTypedSelector, useTypedDispatch} from '../../utils/hooks'; import {setHeaderBreadcrumbs} from '../../store/reducers/header/header'; import {disableAutorefresh, getSchema} from '../../store/reducers/schema/schema'; @@ -51,12 +50,15 @@ function Tenant(props: TenantProps) { getTenantSummaryState, ); - const {currentSchemaPath, currentSchema: currentItem = {}} = useSelector( - (state: any) => state.schema, + const {currentSchemaPath, currentSchema: currentItem = {}} = useTypedSelector( + (state) => state.schema, ); - const {PathType: preloadedPathType, PathSubType: preloadedPathSubType} = useSelector( - (state: any) => state.schema.data[currentSchemaPath]?.PathDescription?.Self || {}, + const {PathType: preloadedPathType, PathSubType: preloadedPathSubType} = useTypedSelector( + (state) => + currentSchemaPath + ? state.schema.data[currentSchemaPath]?.PathDescription?.Self || {} + : {}, ); const {PathType: currentPathType, PathSubType: currentPathSubType} = @@ -64,7 +66,7 @@ function Tenant(props: TenantProps) { const {error: {status: schemaStatus = 200} = {}} = useTypedSelector((state) => state.schema); - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const location = useLocation(); @@ -80,7 +82,9 @@ function Tenant(props: TenantProps) { }, [tenantName, dispatch]); useEffect(() => { - dispatch(getSchema({path: currentSchemaPath})); + if (currentSchemaPath) { + dispatch(getSchema({path: currentSchemaPath})); + } }, [currentSchemaPath, dispatch]); useEffect(() => { @@ -132,6 +136,7 @@ function Tenant(props: TenantProps) { isCollapsed={summaryVisibilityState.collapsed} /> { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const {error, loading, wasLoaded} = useTypedSelector((state) => state.tenants); const searchValue = useTypedSelector(selectTenantsSearchValue); diff --git a/src/containers/Versions/Versions.tsx b/src/containers/Versions/Versions.tsx index 9616498fb4..ac32e4356b 100644 --- a/src/containers/Versions/Versions.tsx +++ b/src/containers/Versions/Versions.tsx @@ -1,11 +1,10 @@ import {useState} from 'react'; -import {useDispatch} from 'react-redux'; import block from 'bem-cn-lite'; import {Checkbox, RadioButton} from '@gravity-ui/uikit'; import type {VersionToColorMap} from '../../types/versions'; -import {useAutofetcher, useTypedSelector} from '../../utils/hooks'; +import {useAutofetcher, useTypedDispatch, useTypedSelector} from '../../utils/hooks'; import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes'; import {Loader} from '../../components/Loader'; @@ -22,7 +21,7 @@ interface VersionsProps { } export const Versions = ({versionToColor}: VersionsProps) => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const {nodes = [], loading, wasLoaded} = useTypedSelector((state) => state.clusterNodes); diff --git a/src/index.tsx b/src/index.tsx index bdcb17c264..8f0c03d05a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,15 +3,14 @@ import ReactDOM from 'react-dom'; import '@gravity-ui/uikit/styles/styles.scss'; -import {ErrorBoundary, configureStore} from './lib'; +import {ErrorBoundary} from './lib'; +import {store, history} from './store/defaultStore'; import reportWebVitals from './reportWebVitals'; import './styles/themes.scss'; import './styles/constants.scss'; import './index.css'; -const {store, history} = configureStore(); - async function render() { let App; if ( diff --git a/src/store/index.js b/src/store/configureStore.ts similarity index 62% rename from src/store/index.js rename to src/store/configureStore.ts index 5e1f04b7c5..a1357e2021 100644 --- a/src/store/index.js +++ b/src/store/configureStore.ts @@ -1,6 +1,5 @@ -import {createStore, applyMiddleware, compose} from 'redux'; -import thunkMiddleware from 'redux-thunk'; -import {createBrowserHistory} from 'history'; +import {configureStore as configureReduxStore} from '@reduxjs/toolkit'; +import {History, createBrowserHistory} from 'history'; import {listenForHistoryChange} from 'redux-location-state'; import {getUrlData} from './getUrlData'; @@ -8,17 +7,32 @@ import getLocationMiddleware from './state-url-mapping'; import rootReducer from './reducers'; import {createApi} from '../services/api'; -export let backend, basename, clusterName; +import type {Action, Reducer, UnknownAction} from '@reduxjs/toolkit'; +import {UPDATE_REF} from './reducers/tooltip'; -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; +export let backend: string | undefined, basename: string, clusterName: string | undefined; -function _configureStore(aRootReducer, history, singleClusterMode) { +function _configureStore( + aRootReducer: Reducer, + history: History, + preloadedState: P, +) { const {locationMiddleware, reducersWithLocation} = getLocationMiddleware(history, aRootReducer); - const middlewares = applyMiddleware(thunkMiddleware, locationMiddleware); - return composeEnhancers(middlewares)(createStore)(reducersWithLocation, { - singleClusterMode, + const store = configureReduxStore({ + reducer: reducersWithLocation, + preloadedState, + middleware: (getDefaultMiddleware) => + getDefaultMiddleware({ + immutableCheck: {ignoredPaths: ['tooltip.currentHoveredRef']}, + serializableCheck: { + ignoredPaths: ['tooltip.currentHoveredRef'], + ignoredActions: [UPDATE_REF], + }, + }).concat(locationMiddleware), }); + + return store; } export const webVersion = window.web_version; @@ -39,10 +53,11 @@ export function configureStore({ })); const history = createBrowserHistory({basename}); - const store = _configureStore(aRootReducer, history, singleClusterMode); + const store = _configureStore(aRootReducer, history, {singleClusterMode}); listenForHistoryChange(store, history); // Interceptor to process OIDC auth + // @ts-expect-error api._axios.interceptors.response.use( function (response) { return Promise.resolve(response); @@ -66,5 +81,3 @@ export function configureStore({ return {history, store}; } - -export * from './reducers'; diff --git a/src/store/defaultStore.ts b/src/store/defaultStore.ts new file mode 100644 index 0000000000..b7bb380c64 --- /dev/null +++ b/src/store/defaultStore.ts @@ -0,0 +1,7 @@ +import {configureStore} from './configureStore'; + +export const {store, history} = configureStore(); + +export type GetState = typeof store.getState; +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; diff --git a/src/store/getUrlData.ts b/src/store/getUrlData.ts index 1bccaf227e..4a8d230d5b 100644 --- a/src/store/getUrlData.ts +++ b/src/store/getUrlData.ts @@ -13,18 +13,18 @@ export const getUrlData = ({ const {backend, clusterName} = url.parse(href, true).query; return { basename: '/', - backend, - clusterName, + backend: backend ? String(backend) : backend, + clusterName: clusterName ? String(clusterName) : clusterName, }; } else if (customBackend) { const {backend} = url.parse(href, true).query; return { basename: '/', - backend: backend || customBackend, + backend: backend ? String(backend) : customBackend, }; } else { const parsedPrefix = window.location.pathname.match(/.*(?=\/monitoring)/) || []; - const basenamePrefix = Boolean(parsedPrefix.length) && parsedPrefix[0]; + const basenamePrefix = parsedPrefix.length > 0 ? parsedPrefix[0] : ''; const basename = [basenamePrefix, 'monitoring'].filter(Boolean).join('/'); return { diff --git a/src/store/index.ts b/src/store/index.ts new file mode 100644 index 0000000000..38f228f33c --- /dev/null +++ b/src/store/index.ts @@ -0,0 +1,12 @@ +export { + backend, + basename, + clusterName, + configureStore, + customBackend, + metaBackend, + webVersion, +} from './configureStore'; +export {rootReducer} from './reducers'; + +export type {AppDispatch, GetState, RootState} from './defaultStore'; diff --git a/src/store/reducers/authentication/authentication.ts b/src/store/reducers/authentication/authentication.ts index 726298308d..8109289a80 100644 --- a/src/store/reducers/authentication/authentication.ts +++ b/src/store/reducers/authentication/authentication.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {createRequestActionTypes, createApiRequest} from '../../utils'; diff --git a/src/store/reducers/cluster/cluster.ts b/src/store/reducers/cluster/cluster.ts index 1fcfd2215a..a2ea372161 100644 --- a/src/store/reducers/cluster/cluster.ts +++ b/src/store/reducers/cluster/cluster.ts @@ -1,4 +1,4 @@ -import type {Dispatch, Reducer} from 'redux'; +import type {Dispatch, Reducer} from '@reduxjs/toolkit'; import {DEFAULT_CLUSTER_TAB_KEY} from '../../../utils/constants'; import {clusterTabsIds, isClusterTab, ClusterTab} from '../../../containers/Cluster/utils'; diff --git a/src/store/reducers/clusterNodes/clusterNodes.tsx b/src/store/reducers/clusterNodes/clusterNodes.tsx index 5ecc5ed6b8..61f8824064 100644 --- a/src/store/reducers/clusterNodes/clusterNodes.tsx +++ b/src/store/reducers/clusterNodes/clusterNodes.tsx @@ -1,4 +1,4 @@ -import {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {createRequestActionTypes, createApiRequest} from '../../utils'; diff --git a/src/store/reducers/clusters/clusters.ts b/src/store/reducers/clusters/clusters.ts index 7a6ae5c8db..263ec214c5 100644 --- a/src/store/reducers/clusters/clusters.ts +++ b/src/store/reducers/clusters/clusters.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {createRequestActionTypes, createApiRequest} from '../../utils'; diff --git a/src/store/reducers/clusters/selectors.ts b/src/store/reducers/clusters/selectors.ts index 5ac9b8b804..1bbc943074 100644 --- a/src/store/reducers/clusters/selectors.ts +++ b/src/store/reducers/clusters/selectors.ts @@ -1,4 +1,4 @@ -import {type Selector, createSelector} from 'reselect'; +import {type Selector, createSelector} from '@reduxjs/toolkit'; import {escapeRegExp} from 'lodash/fp'; import {getMinorVersion} from '../../../utils/versions'; diff --git a/src/store/reducers/describe.ts b/src/store/reducers/describe.ts index be19f98b25..a8d8098cc4 100644 --- a/src/store/reducers/describe.ts +++ b/src/store/reducers/describe.ts @@ -1,4 +1,4 @@ -import {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import type { IDescribeState, diff --git a/src/store/reducers/executeQuery.ts b/src/store/reducers/executeQuery.ts index 934a0aef60..adbefcbb69 100644 --- a/src/store/reducers/executeQuery.ts +++ b/src/store/reducers/executeQuery.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import type {ExecuteActions, Schemas} from '../../types/api/query'; import type { diff --git a/src/store/reducers/executeTopQueries/executeTopQueries.ts b/src/store/reducers/executeTopQueries/executeTopQueries.ts index 9fb9731672..f18d79b96b 100644 --- a/src/store/reducers/executeTopQueries/executeTopQueries.ts +++ b/src/store/reducers/executeTopQueries/executeTopQueries.ts @@ -1,11 +1,11 @@ -import type {AnyAction, Reducer} from 'redux'; +import type {AnyAction, Reducer} from '@reduxjs/toolkit'; import type {ThunkAction} from 'redux-thunk'; import type {IQueryResult} from '../../../types/store/query'; import {parseQueryAPIExecuteResponse} from '../../../utils/query'; import {createRequestActionTypes, createApiRequest} from '../../utils'; -import type {RootState} from '..'; +import type {RootState} from '../..'; import type {ITopQueriesAction, ITopQueriesFilters, ITopQueriesState} from './types'; import {getFiltersConditions} from './utils'; diff --git a/src/store/reducers/explainQuery.ts b/src/store/reducers/explainQuery.ts index 3aff7af3bc..28c2504aeb 100644 --- a/src/store/reducers/explainQuery.ts +++ b/src/store/reducers/explainQuery.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import type {ExplainPlanNodeData, GraphNode, Link} from '@gravity-ui/paranoid'; import _ from 'lodash'; diff --git a/src/store/reducers/header/header.ts b/src/store/reducers/header/header.ts index abdc37ba4c..7193e7fab5 100644 --- a/src/store/reducers/header/header.ts +++ b/src/store/reducers/header/header.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import type {HeaderAction, HeaderState, Page, PageBreadcrumbsOptions} from './types'; diff --git a/src/store/reducers/healthcheckInfo.ts b/src/store/reducers/healthcheckInfo.ts index ae22e8c9f4..d35661c5bf 100644 --- a/src/store/reducers/healthcheckInfo.ts +++ b/src/store/reducers/healthcheckInfo.ts @@ -1,8 +1,8 @@ import _flow from 'lodash/fp/flow'; import _sortBy from 'lodash/fp/sortBy'; import _uniqBy from 'lodash/fp/uniqBy'; -import {createSelector, Selector} from 'reselect'; -import {Reducer} from 'redux'; +import {createSelector} from '@reduxjs/toolkit'; +import type {Reducer, Selector} from '@reduxjs/toolkit'; import type { IHealthCheckInfoAction, diff --git a/src/store/reducers/heatmap.ts b/src/store/reducers/heatmap.ts index 23062dc276..6ba501708a 100644 --- a/src/store/reducers/heatmap.ts +++ b/src/store/reducers/heatmap.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import type { IHeatmapAction, diff --git a/src/store/reducers/host.ts b/src/store/reducers/host.ts index 3ee8c2359a..a3534612bb 100644 --- a/src/store/reducers/host.ts +++ b/src/store/reducers/host.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import type {IHostAction, IHostState} from '../../types/store/host'; diff --git a/src/store/reducers/hotKeys/hotKeys.ts b/src/store/reducers/hotKeys/hotKeys.ts index 5021b0fc6b..2f772bcf6a 100644 --- a/src/store/reducers/hotKeys/hotKeys.ts +++ b/src/store/reducers/hotKeys/hotKeys.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import type {JsonHotKeysResponse} from '../../../types/api/hotkeys'; import type {IResponseError} from '../../../types/api/error'; diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts index 9fb948f95e..f5b983ecc5 100644 --- a/src/store/reducers/index.ts +++ b/src/store/reducers/index.ts @@ -1,4 +1,4 @@ -import {combineReducers} from 'redux'; +import {combineReducers} from '@reduxjs/toolkit'; import nodes from './nodes/nodes'; import {topNodesByLoad} from './tenantOverview/topNodesByLoad/topNodesByLoad'; @@ -94,8 +94,4 @@ const combinedReducer = combineReducers({ ...rootReducer, }); -export type RootReducer = typeof combinedReducer; -export type RootState = ReturnType; -export type GetState = () => RootState; - export default combinedReducer; diff --git a/src/store/reducers/network/network.ts b/src/store/reducers/network/network.ts index 294e3e1f94..001f00d4e1 100644 --- a/src/store/reducers/network/network.ts +++ b/src/store/reducers/network/network.ts @@ -1,4 +1,4 @@ -import {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {createRequestActionTypes, createApiRequest} from '../../utils'; diff --git a/src/store/reducers/node/node.ts b/src/store/reducers/node/node.ts index 1357fc8257..1018ca513a 100644 --- a/src/store/reducers/node/node.ts +++ b/src/store/reducers/node/node.ts @@ -1,4 +1,4 @@ -import {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {createRequestActionTypes, createApiRequest} from '../../utils'; diff --git a/src/store/reducers/node/selectors.ts b/src/store/reducers/node/selectors.ts index 47629dbd3b..faed681a87 100644 --- a/src/store/reducers/node/selectors.ts +++ b/src/store/reducers/node/selectors.ts @@ -1,5 +1,5 @@ -import type {Selector} from 'reselect'; -import {createSelector} from 'reselect'; +import type {Selector} from '@reduxjs/toolkit'; +import {createSelector} from '@reduxjs/toolkit'; import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters'; import {preparePDiskData} from '../../../utils/disks/prepareDisks'; diff --git a/src/store/reducers/nodes/nodes.ts b/src/store/reducers/nodes/nodes.ts index 62878b50ee..f666ee58f7 100644 --- a/src/store/reducers/nodes/nodes.ts +++ b/src/store/reducers/nodes/nodes.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {NodesUptimeFilterValues} from '../../../utils/nodes'; import {EVersion} from '../../../types/api/compute'; diff --git a/src/store/reducers/nodes/selectors.ts b/src/store/reducers/nodes/selectors.ts index b2f79e56fc..d128c5562a 100644 --- a/src/store/reducers/nodes/selectors.ts +++ b/src/store/reducers/nodes/selectors.ts @@ -1,4 +1,4 @@ -import {Selector, createSelector} from 'reselect'; +import {Selector, createSelector} from '@reduxjs/toolkit'; import {EFlag} from '../../../types/api/enums'; import {calcUptimeInSeconds} from '../../../utils/dataFormatters/dataFormatters'; diff --git a/src/store/reducers/nodesList.ts b/src/store/reducers/nodesList.ts index a0f6190c6c..e0829b7fae 100644 --- a/src/store/reducers/nodesList.ts +++ b/src/store/reducers/nodesList.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import type { NodesListState, diff --git a/src/store/reducers/olapStats.ts b/src/store/reducers/olapStats.ts index 53baeae7a3..1b13f6f739 100644 --- a/src/store/reducers/olapStats.ts +++ b/src/store/reducers/olapStats.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import type {OlapStatsAction, OlapStatsState} from '../../types/store/olapStats'; diff --git a/src/store/reducers/overview/overview.ts b/src/store/reducers/overview/overview.ts index 16dd5eada1..eea5ab99bc 100644 --- a/src/store/reducers/overview/overview.ts +++ b/src/store/reducers/overview/overview.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import type {OverviewState, OverviewAction, OverviewHandledResponse} from './types'; diff --git a/src/store/reducers/partitions/partitions.ts b/src/store/reducers/partitions/partitions.ts index 09e155479f..16296c5bb3 100644 --- a/src/store/reducers/partitions/partitions.ts +++ b/src/store/reducers/partitions/partitions.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {createRequestActionTypes, createApiRequest} from '../../utils'; diff --git a/src/store/reducers/saveQuery.ts b/src/store/reducers/saveQuery.ts index 03b2fa27a4..ec70a71836 100644 --- a/src/store/reducers/saveQuery.ts +++ b/src/store/reducers/saveQuery.ts @@ -1,4 +1,4 @@ -import {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; const SET_QUERY_NAME_TO_EDIT = 'SET_QUERY_NAME_TO_EDIT'; const CLEAR_QUERY_NAME_TO_EDIT = 'CLEAR_QUERY_NAME_TO_EDIT'; diff --git a/src/store/reducers/schema/schema.ts b/src/store/reducers/schema/schema.ts index 9ce00ae641..862d5e387c 100644 --- a/src/store/reducers/schema/schema.ts +++ b/src/store/reducers/schema/schema.ts @@ -1,7 +1,6 @@ -import type {Reducer} from 'redux'; -import type {Selector} from 'reselect'; +import type {Selector, Reducer} from '@reduxjs/toolkit'; -import {createSelector} from 'reselect'; +import {createSelector} from '@reduxjs/toolkit'; import type {EPathType} from '../../../types/api/schema'; import type { diff --git a/src/store/reducers/schemaAcl/schemaAcl.ts b/src/store/reducers/schemaAcl/schemaAcl.ts index 86c8f7d3f9..bc97719179 100644 --- a/src/store/reducers/schemaAcl/schemaAcl.ts +++ b/src/store/reducers/schemaAcl/schemaAcl.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {createRequestActionTypes, createApiRequest} from '../../utils'; diff --git a/src/store/reducers/settings/settings.ts b/src/store/reducers/settings/settings.ts index 51da23d2a5..e698c8b665 100644 --- a/src/store/reducers/settings/settings.ts +++ b/src/store/reducers/settings/settings.ts @@ -1,9 +1,9 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import type {ThunkAction} from 'redux-thunk'; import {DEFAULT_USER_SETTINGS, SettingsObject, settingsManager} from '../../../services/settings'; -import type {RootState} from '..'; +import type {RootState} from '../..'; import type { ProblemFilterValue, SetSettingValueAction, diff --git a/src/store/reducers/shardsWorkload/shardsWorkload.ts b/src/store/reducers/shardsWorkload/shardsWorkload.ts index c3acd3ad84..8da4740d8a 100644 --- a/src/store/reducers/shardsWorkload/shardsWorkload.ts +++ b/src/store/reducers/shardsWorkload/shardsWorkload.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {parseQueryAPIExecuteResponse} from '../../../utils/query'; import {createRequestActionTypes, createApiRequest} from '../../utils'; diff --git a/src/store/reducers/storage/selectors.ts b/src/store/reducers/storage/selectors.ts index 871bdb927d..607215a3fe 100644 --- a/src/store/reducers/storage/selectors.ts +++ b/src/store/reducers/storage/selectors.ts @@ -1,4 +1,4 @@ -import {Selector, createSelector} from 'reselect'; +import {Selector, createSelector} from '@reduxjs/toolkit'; import type {OrderType} from '@gravity-ui/react-data-table'; import {ASCENDING, DESCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants'; diff --git a/src/store/reducers/storage/storage.ts b/src/store/reducers/storage/storage.ts index c562f922b5..ae583ff567 100644 --- a/src/store/reducers/storage/storage.ts +++ b/src/store/reducers/storage/storage.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import _ from 'lodash'; import {EVersion} from '../../../types/api/storage'; diff --git a/src/store/reducers/tablet.ts b/src/store/reducers/tablet.ts index 1e92735d11..5230ae66e9 100644 --- a/src/store/reducers/tablet.ts +++ b/src/store/reducers/tablet.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import type {TDomainKey} from '../../types/api/tablet'; import type { diff --git a/src/store/reducers/tablets.ts b/src/store/reducers/tablets.ts index 8845d6203b..4ee816a939 100644 --- a/src/store/reducers/tablets.ts +++ b/src/store/reducers/tablets.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import type {ETabletState, EType} from '../../types/api/tablet'; import type { diff --git a/src/store/reducers/tabletsFilters.js b/src/store/reducers/tabletsFilters.js index 4718d1bc05..a660b10625 100644 --- a/src/store/reducers/tabletsFilters.js +++ b/src/store/reducers/tabletsFilters.js @@ -1,4 +1,4 @@ -import {createSelector} from 'reselect'; +import {createSelector} from '@reduxjs/toolkit'; import {createRequestActionTypes, createApiRequest} from '../utils'; import {AUTO_RELOAD_INTERVAL} from '../../utils/constants'; diff --git a/src/store/reducers/tenant/tenant.ts b/src/store/reducers/tenant/tenant.ts index 41186ef08d..2a94ef1625 100644 --- a/src/store/reducers/tenant/tenant.ts +++ b/src/store/reducers/tenant/tenant.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import type {TTenant} from '../../../types/api/tenant'; import type { diff --git a/src/store/reducers/tenantOverview/executeTopTables/executeTopTables.ts b/src/store/reducers/tenantOverview/executeTopTables/executeTopTables.ts index 81c4e0ca4c..9fa27bdff7 100644 --- a/src/store/reducers/tenantOverview/executeTopTables/executeTopTables.ts +++ b/src/store/reducers/tenantOverview/executeTopTables/executeTopTables.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../utils/constants'; import {parseQueryAPIExecuteResponse} from '../../../../utils/query'; diff --git a/src/store/reducers/tenantOverview/topNodesByCpu/topNodesByCpu.ts b/src/store/reducers/tenantOverview/topNodesByCpu/topNodesByCpu.ts index e7dcbb802c..17737af5a5 100644 --- a/src/store/reducers/tenantOverview/topNodesByCpu/topNodesByCpu.ts +++ b/src/store/reducers/tenantOverview/topNodesByCpu/topNodesByCpu.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../utils/constants'; import {createApiRequest, createRequestActionTypes} from '../../../utils'; diff --git a/src/store/reducers/tenantOverview/topNodesByLoad/topNodesByLoad.ts b/src/store/reducers/tenantOverview/topNodesByLoad/topNodesByLoad.ts index 16ed110e63..73af8ccb0b 100644 --- a/src/store/reducers/tenantOverview/topNodesByLoad/topNodesByLoad.ts +++ b/src/store/reducers/tenantOverview/topNodesByLoad/topNodesByLoad.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../utils/constants'; import {createApiRequest, createRequestActionTypes} from '../../../utils'; diff --git a/src/store/reducers/tenantOverview/topNodesByMemory/topNodesByMemory.ts b/src/store/reducers/tenantOverview/topNodesByMemory/topNodesByMemory.ts index ddc1ed66f5..ceefabd1e4 100644 --- a/src/store/reducers/tenantOverview/topNodesByMemory/topNodesByMemory.ts +++ b/src/store/reducers/tenantOverview/topNodesByMemory/topNodesByMemory.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../utils/constants'; import {createApiRequest, createRequestActionTypes} from '../../../utils'; diff --git a/src/store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries.ts b/src/store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries.ts index c8f9c4181e..646a107927 100644 --- a/src/store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries.ts +++ b/src/store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../utils/constants'; import {parseQueryAPIExecuteResponse} from '../../../../utils/query'; diff --git a/src/store/reducers/tenantOverview/topShards/tenantOverviewTopShards.ts b/src/store/reducers/tenantOverview/topShards/tenantOverviewTopShards.ts index 2f6c8df8d5..fd7370c2b8 100644 --- a/src/store/reducers/tenantOverview/topShards/tenantOverviewTopShards.ts +++ b/src/store/reducers/tenantOverview/topShards/tenantOverviewTopShards.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../utils/constants'; import {parseQueryAPIExecuteResponse} from '../../../../utils/query'; diff --git a/src/store/reducers/tenantOverview/topStorageGroups/topStorageGroups.ts b/src/store/reducers/tenantOverview/topStorageGroups/topStorageGroups.ts index 3d469f4209..1704f41c66 100644 --- a/src/store/reducers/tenantOverview/topStorageGroups/topStorageGroups.ts +++ b/src/store/reducers/tenantOverview/topStorageGroups/topStorageGroups.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../utils/constants'; import {EVersion} from '../../../../types/api/storage'; diff --git a/src/store/reducers/tenants/selectors.ts b/src/store/reducers/tenants/selectors.ts index 58969c6811..02bf36b167 100644 --- a/src/store/reducers/tenants/selectors.ts +++ b/src/store/reducers/tenants/selectors.ts @@ -1,9 +1,9 @@ -import {Selector, createSelector} from 'reselect'; +import {Selector, createSelector} from '@reduxjs/toolkit'; import {escapeRegExp} from 'lodash'; import {EFlag} from '../../../types/api/enums'; -import type {RootState} from '..'; +import type {RootState} from '../..'; import type {ProblemFilterValue} from '../settings/types'; import {ProblemFilterValues, selectProblemFilter} from '../settings/settings'; diff --git a/src/store/reducers/tenants/tenants.ts b/src/store/reducers/tenants/tenants.ts index 173483e5bf..2ddab6d209 100644 --- a/src/store/reducers/tenants/tenants.ts +++ b/src/store/reducers/tenants/tenants.ts @@ -1,4 +1,4 @@ -import type {Reducer} from 'redux'; +import type {Reducer} from '@reduxjs/toolkit'; import {createRequestActionTypes, createApiRequest} from '../../utils'; diff --git a/src/store/reducers/tooltip.ts b/src/store/reducers/tooltip.ts index e8f95b89fe..9b69666d96 100644 --- a/src/store/reducers/tooltip.ts +++ b/src/store/reducers/tooltip.ts @@ -1,7 +1,5 @@ import isEqual from 'lodash/isEqual'; -import type {Reducer} from 'redux'; - -import {tooltipTemplates} from '../../utils/tooltip'; +import type {Reducer} from '@reduxjs/toolkit'; import { ITooltipAction, @@ -11,14 +9,13 @@ import { } from '../../types/store/tooltip'; const HIDE_TOOLTIP = 'tooltip/HIDE_TOOLTIP'; -const UPDATE_REF = 'tooltip/UPDATE_REF'; +export const UPDATE_REF = 'tooltip/UPDATE_REF'; const initialState: ITooltipState = { toolTipVisible: false, currentHoveredRef: undefined, data: undefined, templateType: 'pool', - template: tooltipTemplates['pool'], }; const tooltip: Reducer = (state = initialState, action) => { @@ -48,7 +45,6 @@ const tooltip: Reducer = (state = initialState, a data: action.data, additionalData: action.additionalData, templateType: action.templateType, - template: tooltipTemplates[action.templateType], }; } default: { diff --git a/src/store/reducers/topic.ts b/src/store/reducers/topic.ts index 1845856866..02ecd1e95b 100644 --- a/src/store/reducers/topic.ts +++ b/src/store/reducers/topic.ts @@ -1,6 +1,6 @@ /* eslint-disable camelcase */ -import type {Reducer} from 'redux'; -import {createSelector, Selector} from 'reselect'; +import type {Reducer, Selector} from '@reduxjs/toolkit'; +import {createSelector} from '@reduxjs/toolkit'; import type { IPreparedConsumerData, diff --git a/src/store/state-url-mapping.js b/src/store/state-url-mapping.ts similarity index 78% rename from src/store/state-url-mapping.js rename to src/store/state-url-mapping.ts index 7edd069f2d..bc4301333a 100644 --- a/src/store/state-url-mapping.js +++ b/src/store/state-url-mapping.ts @@ -1,4 +1,4 @@ -import {createReduxLocationActions} from 'redux-location-state'; +import {LocationWithQuery, ParamSetup, createReduxLocationActions} from 'redux-location-state'; import qs from 'qs'; import _ from 'lodash'; import {stateToParams} from 'redux-location-state/lib/stateToParams'; @@ -9,7 +9,10 @@ import {getMatchingDeclaredPath} from 'redux-location-state/lib/helpers'; import {initialState as initialSettingsState} from './reducers/settings/settings'; import {initialState as initialHeatmapState} from './reducers/heatmap'; -const paramSetup = { +import type {History, Location} from 'history'; +import type {Action, Reducer, UnknownAction} from '@reduxjs/toolkit'; + +const paramSetup: ParamSetup = { global: { problemFilter: { stateKey: 'settings.problemFilter', @@ -82,11 +85,11 @@ const paramSetup = { }, }; -function mergeLocationToState(state, location) { +function mergeLocationToState(state: S, location: Pick): S { return _.merge({}, state, location.query); } -function restoreUnknownParams(location, prevLocation) { +function restoreUnknownParams(location: Location, prevLocation: Location) { const {search, ...rest} = location; const params = qs.parse(prevLocation.search.slice(1)); @@ -112,11 +115,18 @@ function restoreUnknownParams(location, prevLocation) { let prevSearchStringFromState = ''; // Keep intact params that are not present in paramSetup -function overwriteLocationHandling(setupObject, nextState, prevLocation) { +function overwriteLocationHandling( + setupObject: ParamSetup, + nextState: S, + prevLocation: Location, +) { const nextLocation = stateToParams(setupObject, nextState, prevLocation); let {location} = nextLocation; - if (location.search !== prevSearchStringFromState) { + if (location.search === prevSearchStringFromState) { + // nothing to do here, state parts represented in query params didn't change + return {location: prevLocation, shouldPush: false}; + } else { const searchRe = /\?\w+/; prevSearchStringFromState = location.search; @@ -125,21 +135,23 @@ function overwriteLocationHandling(setupObject, nextState, prevLocation) { } return {...nextLocation, location}; - } else { - // nothing to do here, state parts represented in query params didn't change - return {location: prevLocation, shouldPush: false}; } } -function makeReducersWithLocation(setupObject, mapLocationToState, rootReducer) { - const locationReducer = (state, action) => { +function makeReducersWithLocation( + setupObject: ParamSetup, + mapLocationToState: (state: S, location: LocationWithQuery) => S, + rootReducer: Reducer, +): Reducer { + const locationReducer = (state: S, action: UnknownAction) => { const {type, payload} = action; if (!payload) { return state; } if (LOCATION_POP === type || LOCATION_PUSH === type) { - payload.query = parseQuery(setupObject, payload); - return mapLocationToState(state, payload); + const location = payload as LocationWithQuery; + location.query = parseQuery(setupObject, payload); + return mapLocationToState(state, location); } return state; }; @@ -149,11 +161,14 @@ function makeReducersWithLocation(setupObject, mapLocationToState, rootReducer) const postLocationState = locationReducer(postReducerState, action); const hasChanged = postLocationState !== state; - return hasChanged ? postLocationState : state; + return hasChanged ? postLocationState : (state as S); }; } -export default function getLocationMiddleware(history, rootReducer) { +export default function getLocationMiddleware( + history: History, + rootReducer: Reducer, +) { const {locationMiddleware} = createReduxLocationActions( paramSetup, mergeLocationToState, diff --git a/src/store/utils.ts b/src/store/utils.ts index c66a898395..13246502d7 100644 --- a/src/store/utils.ts +++ b/src/store/utils.ts @@ -1,10 +1,10 @@ -import type {Dispatch} from 'redux'; +import type {Dispatch} from '@reduxjs/toolkit'; import {AxiosResponse} from 'axios'; import createToast from '../utils/createToast'; import {SET_UNAUTHENTICATED} from './reducers/authentication/authentication'; -import type {GetState} from './reducers'; +import type {GetState} from '.'; export const nop = (result: any) => result; diff --git a/src/types/redux-location-state.d.ts b/src/types/redux-location-state.d.ts new file mode 100644 index 0000000000..ed357e7009 --- /dev/null +++ b/src/types/redux-location-state.d.ts @@ -0,0 +1,68 @@ +/* eslint-disable @typescript-eslint/no-duplicate-imports */ +declare module 'redux-location-state' { + import type {Middleware, Reducer, Store} from '@reduxjs/toolkit'; + import type {History, Location} from 'History'; + + export function listenForHistoryChange(store: Store, history: History): void; + + export interface ParamSetup { + [key: string]: { + [key: string]: { + stateKey: string; + type?: 'array' | 'bool' | 'number' | 'object' | 'date'; + initialState?: any; + options?: { + shouldPush?: boolean; + isFlags?: boolean; + delimiter?: string; + keepOrder?: boolean; + serialize?: (value: any) => string; + parse?: (value: string) => any; + }; + }; + }; + } + + export interface LocationWithQuery extends Location { + query: Record; + } + export function createReduxLocationActions( + paramSetup: ParamSetup, + mergeLocationToState: any, + history: History, + rootReducer: Reducer, + overwriteLocationHandling: ( + setupObject: ParamSetup, + nextState: S, + location: Location, + ) => {location: Location; shouldPush: boolean}, + ): { + locationMiddleware: Middleware; + }; +} + +declare module 'redux-location-state/lib/parseQuery' { + import {ParamSetup} from 'redux-location-state'; + export function parseQuery(setupObject: ParamSetup, payload: any): Record; +} + +declare module 'redux-location-state/lib/constants' { + export const LOCATION_PUSH: 'REDUX-LOCATION-POP-ACTION'; + export const LOCATION_POP: 'REDUX-LOCATION-PUSH-ACTION'; +} + +declare module 'redux-location-state/lib/helpers' { + import type {ParamSetup} from 'redux-location-state'; + import type {Location} from 'History'; + export function getMatchingDeclaredPath(setupObject: ParamSetup, location: Location): string; +} + +declare module 'redux-location-state/lib/stateToParams' { + import type {Location} from 'History'; + import type {ParamSetup} from 'redux-location-state'; + export function stateToParams( + setupObject: ParamSetup, + state: S, + location: L, + ): {location: L; shouldPush: boolean}; +} diff --git a/src/types/store/tooltip.ts b/src/types/store/tooltip.ts index 00d09845fe..989ad7f47a 100644 --- a/src/types/store/tooltip.ts +++ b/src/types/store/tooltip.ts @@ -12,7 +12,6 @@ export interface ITooltipState { toolTipVisible: boolean; positions?: ITooltipPositions; currentHoveredRef?: EventTarget | null; - template: (data: any) => JSX.Element; templateType: ITooltipTemplateType; data?: any; additionalData?: any; diff --git a/src/types/window.d.ts b/src/types/window.d.ts index fab283312d..43a044fe8d 100644 --- a/src/types/window.d.ts +++ b/src/types/window.d.ts @@ -31,13 +31,11 @@ interface Window { Rum?: RumCounter; }; - // eslint-disable-next-line web_version?: boolean; - // eslint-disable-next-line custom_backend?: string; + meta_backend?: string; - __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof import('redux').compose; - store?: import('redux').Store; + store?: import('@reduxjs/toolkit').Store; userSettings?: import('../services/settings').SettingsObject; systemSettings?: import('../services/settings').SettingsObject; diff --git a/src/utils/additionalProps.ts b/src/utils/additionalProps.ts index ebe245f6a5..7b7c24ee7c 100644 --- a/src/utils/additionalProps.ts +++ b/src/utils/additionalProps.ts @@ -9,6 +9,6 @@ export const getAdditionalNodesProps = ( ): AdditionalNodesProps => { return { getNodeRef: (node: NodeAddress = {}) => - getBackendFromRawNodeData(node, balancer, useClusterBalancerAsBackend), + getBackendFromRawNodeData(node, balancer ?? '', useClusterBalancerAsBackend), }; }; diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts index 42ebaaa93b..7fe29f9291 100644 --- a/src/utils/hooks/index.ts +++ b/src/utils/hooks/index.ts @@ -1,5 +1,6 @@ export * from './useAutofetcher'; export * from './useTypedSelector'; +export * from './useTypedDispatch'; export * from './useSetting'; export * from './useQueryModes'; export * from './useTableSort'; diff --git a/src/utils/hooks/useSetting.ts b/src/utils/hooks/useSetting.ts index 8cbf702957..f681867db2 100644 --- a/src/utils/hooks/useSetting.ts +++ b/src/utils/hooks/useSetting.ts @@ -1,12 +1,12 @@ import {useCallback} from 'react'; -import {useDispatch} from 'react-redux'; import {getSettingValue, setSettingValue} from '../../store/reducers/settings/settings'; import {useTypedSelector} from './useTypedSelector'; +import {useTypedDispatch} from './useTypedDispatch'; export const useSetting = (key: string, defaultValue?: T): [T, (value: T) => void] => { - const dispatch = useDispatch(); + const dispatch = useTypedDispatch(); const settingValue = useTypedSelector((state) => { // Since we type setter value as T, we assume that received value is also T diff --git a/src/utils/hooks/useTypedDispatch.ts b/src/utils/hooks/useTypedDispatch.ts new file mode 100644 index 0000000000..0784fe0fd0 --- /dev/null +++ b/src/utils/hooks/useTypedDispatch.ts @@ -0,0 +1,4 @@ +import {useDispatch} from 'react-redux'; +import type {AppDispatch} from '../../store'; + +export const useTypedDispatch: () => AppDispatch = useDispatch; diff --git a/src/utils/hooks/useTypedSelector.ts b/src/utils/hooks/useTypedSelector.ts index eb9bd206be..1926b63e6a 100644 --- a/src/utils/hooks/useTypedSelector.ts +++ b/src/utils/hooks/useTypedSelector.ts @@ -1,5 +1,5 @@ import {TypedUseSelectorHook, useSelector} from 'react-redux'; -import {RootState} from '../../store'; +import type {RootState} from '../../store'; export const useTypedSelector: TypedUseSelectorHook = useSelector;