frontend: Move useTypedSelector to redux/hooks and decouple

frontend/src/App.tsx

@@ -29,7 +29,7 @@ import i18n from './i18n/config';
 import { useElectronI18n } from './i18n/electronI18n';
 import ThemeProviderNexti18n from './i18n/ThemeProviderNexti18n';
 import { createMuiTheme, getThemeName, usePrefersColorScheme } from './lib/themes';
-import { useTypedSelector } from './redux/reducers/reducers';
+import { useTypedSelector } from './redux/hooks';
 import store from './redux/stores/store';
 
 function AppWithRedux(props: React.PropsWithChildren<{}>) {

frontend/src/components/App/AppLogo.tsx

@@ -18,7 +18,7 @@ import { Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 import React, { isValidElement, ReactElement } from 'react';
 import { getThemeName, useNavBarMode } from '../../lib/themes';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import LogoDark from '../../resources/icon-dark.svg?react';
 import LogoLight from '../../resources/icon-light.svg?react';
 import LogoWithTextDark from '../../resources/logo-dark.svg?react';

frontend/src/components/App/CreateCluster/AddCluster.tsx

@@ -26,7 +26,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { createRouteURL } from '../../../lib/router';
 import { ClusterProviderInfo } from '../../../redux/clusterProviderSlice';
-import { useTypedSelector } from '../../../redux/reducers/reducers';
+import { useTypedSelector } from '../../../redux/hooks';
 import { DialogProps } from '../../common/Dialog';
 import { PageGrid } from '../../common/Resource';
 import SectionBox from '../../common/SectionBox';

frontend/src/components/App/Home/ClusterContextMenu.tsx

@@ -30,7 +30,7 @@ import { Cluster } from '../../../lib/k8s/cluster';
 import { createRouteURL } from '../../../lib/router';
 import { useId } from '../../../lib/util';
 import { setConfig } from '../../../redux/configSlice';
-import { useTypedSelector } from '../../../redux/reducers/reducers';
+import { useTypedSelector } from '../../../redux/hooks';
 import { ConfirmDialog } from '../../common/ConfirmDialog';
 import ErrorBoundary from '../../common/ErrorBoundary/ErrorBoundary';
 

frontend/src/components/App/Layout.tsx

@@ -30,7 +30,7 @@ import { request } from '../../lib/k8s/apiProxy';
 import { Cluster } from '../../lib/k8s/cluster';
 import { setConfig } from '../../redux/configSlice';
 import { ConfigState } from '../../redux/configSlice';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import store from '../../redux/stores/store';
 import { useUIPanelsGroupedBySide } from '../../redux/uiSlice';
 import { fetchStatelessClusterKubeConfigs, isEqualClusterConfigs } from '../../stateless/';

frontend/src/components/App/Notifications/List/List.tsx

@@ -26,7 +26,7 @@ import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import { useTypedSelector } from '../../../../redux/reducers/reducers';
+import { useTypedSelector } from '../../../../redux/hooks';
 import Empty from '../../../common/EmptyContent';
 import { DateLabel } from '../../../common/Label';
 import Link from '../../../common/Link';

frontend/src/components/App/Notifications/Notifications.tsx

@@ -34,7 +34,7 @@ import { FixedSizeList, ListChildComponentProps } from 'react-window';
 import { useClustersConf } from '../../../lib/k8s';
 import Event from '../../../lib/k8s/event';
 import { createRouteURL } from '../../../lib/router';
-import { useTypedSelector } from '../../../redux/reducers/reducers';
+import { useTypedSelector } from '../../../redux/hooks';
 import Empty from '../../common/EmptyContent';
 import { DateLabel } from '../../common/Label';
 import {

frontend/src/components/App/PluginSettings/PluginSettings.tsx

@@ -28,7 +28,7 @@ import { useDispatch } from 'react-redux';
 import { isElectron } from '../../../helpers/isElectron';
 import { useFilterFunc } from '../../../lib/util';
 import { PluginInfo, reloadPage, setPluginSettings } from '../../../plugin/pluginsSlice';
-import { useTypedSelector } from '../../../redux/reducers/reducers';
+import { useTypedSelector } from '../../../redux/hooks';
 import { Link as HeadlampLink } from '../../common/';
 import SectionBox from '../../common/SectionBox';
 import SectionFilterHeader from '../../common/SectionFilterHeader';

frontend/src/components/App/PluginSettings/PluginSettingsDetails.tsx

@@ -28,7 +28,7 @@ import { getCluster } from '../../../lib/cluster';
 import { deletePlugin } from '../../../lib/k8s/apiProxy';
 import { ConfigStore } from '../../../plugin/configStore';
 import { PluginInfo, reloadPage } from '../../../plugin/pluginsSlice';
-import { useTypedSelector } from '../../../redux/reducers/reducers';
+import { useTypedSelector } from '../../../redux/hooks';
 import NotFoundComponent from '../../404';
 import { ConfirmDialog } from '../../common/Dialog';
 import ErrorBoundary from '../../common/ErrorBoundary';

frontend/src/components/App/RouteSwitcher.tsx

@@ -29,7 +29,7 @@ import {
   NotFoundRoute,
   Route as RouteType,
 } from '../../lib/router';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import { uiSlice } from '../../redux/uiSlice';
 import ErrorBoundary from '../common/ErrorBoundary';
 import ErrorComponent from '../common/ErrorPage';

frontend/src/components/App/Settings/DrawerModeSettings.tsx

@@ -20,7 +20,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { setDetailDrawerEnabled } from '../../../redux/drawerModeSlice';
-import { useTypedSelector } from '../../../redux/reducers/reducers';
+import { useTypedSelector } from '../../../redux/hooks';
 import { TooltipIcon } from '../../common/Tooltip';
 
 export default function DrawerModeSettings() {

frontend/src/components/App/Settings/Settings.tsx

@@ -24,7 +24,7 @@ import { useDispatch } from 'react-redux';
 import LocaleSelect from '../../../i18n/LocaleSelect/LocaleSelect';
 import { setAppSettings } from '../../../redux/configSlice';
 import { defaultTableRowsPerPageOptions } from '../../../redux/configSlice';
-import { useTypedSelector } from '../../../redux/reducers/reducers';
+import { useTypedSelector } from '../../../redux/hooks';
 import { uiSlice } from '../../../redux/uiSlice';
 import ActionButton from '../../common/ActionButton';
 import NameValueTable from '../../common/NameValueTable';

frontend/src/components/App/Settings/hook.tsx

@@ -15,7 +15,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { useTypedSelector } from '../../../redux/reducers/reducers';
+import { useTypedSelector } from '../../../redux/hooks';
 
 export const useSettings = function (settingName?: string) {
   const storeSettingEntries = useTypedSelector(state =>

frontend/src/components/App/TopBar.tsx

@@ -40,7 +40,7 @@ import {
   AppBarActionType,
   DefaultAppBarAction,
 } from '../../redux/actionButtonsSlice';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import { uiSlice } from '../../redux/uiSlice';
 import { SettingsButton } from '../App/Settings';
 import { ClusterTitle } from '../cluster/Chooser';

frontend/src/components/App/VersionDialog.tsx

@@ -18,7 +18,7 @@ import DialogContent from '@mui/material/DialogContent';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { getProductName, getVersion } from '../../helpers/getProductInfo';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import { uiSlice } from '../../redux/uiSlice';
 import { Dialog } from '../common/Dialog';
 import NameValueTable from '../common/NameValueTable';

frontend/src/components/DetailsViewSection/DetailsViewSection.tsx

@@ -17,7 +17,7 @@
 import React, { isValidElement, ReactElement, ReactNode, useMemo } from 'react';
 import { KubeObject } from '../../lib/k8s/KubeObject';
 import { HeadlampEventType, useEventCallback } from '../../redux/headlampEventSlice';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import ErrorBoundary from '../common/ErrorBoundary';
 
 export interface DetailsViewSectionProps {

frontend/src/components/Sidebar/NavigationTabs.tsx

@@ -23,7 +23,7 @@ import { useTranslation } from 'react-i18next';
 import { generatePath, useHistory } from 'react-router';
 import { getCluster, getClusterPrefixedPath } from '../../lib/cluster';
 import { createRouteURL } from '../../lib/router';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import Tabs from '../common/Tabs';
 import { SidebarItemProps } from '../Sidebar';
 import { useSidebarItems } from './useSidebarItems';

frontend/src/components/Sidebar/Sidebar.tsx

@@ -27,7 +27,7 @@ import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { isElectron } from '../../helpers/isElectron';
 import { createRouteURL } from '../../lib/router';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import ActionButton from '../common/ActionButton';
 import CreateButton from '../common/Resource/CreateButton';
 import NavigationTabs from './NavigationTabs';

frontend/src/components/Sidebar/VersionButton.tsx

@@ -29,7 +29,7 @@ import { useTranslation } from 'react-i18next';
 import semver from 'semver';
 import { getVersion, useCluster } from '../../lib/k8s';
 import { StringDict } from '../../lib/k8s/cluster';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import { NameValueTable } from '../common/SimpleTable';
 
 const versionSnackbarHideTimeout = 5000; // ms

frontend/src/components/Sidebar/useSidebarItems.ts

@@ -20,7 +20,7 @@ import { useTranslation } from 'react-i18next';
 import { isElectron } from '../../helpers/isElectron';
 import { useSelectedClusters } from '../../lib/k8s';
 import { createRouteURL } from '../../lib/router';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import { DefaultSidebars, SidebarItemProps } from '.';
 
 /** Iterates over every entry in the list, including children */

frontend/src/components/cluster/Chooser.tsx

@@ -44,7 +44,7 @@ import { useClustersConf } from '../../lib/k8s';
 import { Cluster } from '../../lib/k8s/cluster';
 import { createRouteURL } from '../../lib/router';
 import { getCluster, getClusterPrefixedPath } from '../../lib/util';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import { uiSlice } from '../../redux/uiSlice';
 import { AppLogo } from '../App/AppLogo';
 import ActionButton from '../common/ActionButton';

frontend/src/components/cluster/Overview.tsx

@@ -25,8 +25,8 @@ import Event from '../../lib/k8s/event';
 import Node from '../../lib/k8s/node';
 import Pod from '../../lib/k8s/pod';
 import { useFilterFunc } from '../../lib/util';
+import { useTypedSelector } from '../../redux/hooks';
 import { OverviewChart } from '../../redux/overviewChartsSlice';
-import { useTypedSelector } from '../../redux/reducers/reducers';
 import { DateLabel } from '../common/Label';
 import { StatusLabel } from '../common/Label';
 import Link from '../common/Link';

frontend/src/components/common/ActionsNotifier.tsx

@@ -21,7 +21,7 @@ import React, { useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { CLUSTER_ACTION_GRACE_PERIOD, ClusterAction } from '../../redux/clusterActionSlice';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 
 export interface PureActionsNotifierProps {
   clusterActions: { [x: string]: ClusterAction };

frontend/src/components/common/Link.tsx

@@ -24,7 +24,7 @@ import { kubeObjectQueryKey, useEndpoints } from '../../lib/k8s/api/v2/hooks';
 import { KubeObject } from '../../lib/k8s/KubeObject';
 import { createRouteURL, RouteURLProps } from '../../lib/router';
 import { setSelectedResource } from '../../redux/drawerModeSlice';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import { canRenderDetails } from '../resourceMap/details/KubeNodeDetails';
 import { LightTooltip } from './Tooltip';
 

frontend/src/components/common/NamespacesAutocomplete.tsx

@@ -30,7 +30,7 @@ import { loadClusterSettings } from '../../helpers/clusterSettings';
 import { useCluster, useClustersConf } from '../../lib/k8s';
 import Namespace from '../../lib/k8s/namespace';
 import { setNamespaceFilter } from '../../redux/filterSlice';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 
 /**
  * addQuery will add a query parameter to the URL using history API.

frontend/src/components/common/Resource/DetailsDrawer.tsx

@@ -22,7 +22,7 @@ import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router';
 import { isElectron } from '../../../helpers/isElectron';
 import { setSelectedResource } from '../../../redux/drawerModeSlice';
-import { useTypedSelector } from '../../../redux/reducers/reducers';
+import { useTypedSelector } from '../../../redux/hooks';
 import { KubeObjectDetails } from '../../resourceMap/details/KubeNodeDetails';
 import { ActionButton } from '..';
 

frontend/src/components/common/Resource/MainInfoSection/MainInfoSectionHeader.tsx

@@ -23,7 +23,7 @@ import {
   HeaderAction,
   HeaderActionType,
 } from '../../../../redux/actionButtonsSlice';
-import { useTypedSelector } from '../../../../redux/reducers/reducers';
+import { useTypedSelector } from '../../../../redux/hooks';
 import ErrorBoundary from '../../ErrorBoundary';
 import SectionHeader, { HeaderStyle } from '../../SectionHeader';
 import DeleteButton from '../DeleteButton';

frontend/src/components/common/Resource/Resource.tsx

@@ -46,7 +46,7 @@ import { createRouteURL, RouteURLProps } from '../../../lib/router';
 import { getThemeName } from '../../../lib/themes';
 import { localeDate, useId } from '../../../lib/util';
 import { HeadlampEventType, useEventCallback } from '../../../redux/headlampEventSlice';
-import { useTypedSelector } from '../../../redux/reducers/reducers';
+import { useTypedSelector } from '../../../redux/hooks';
 import { useHasPreviousRoute } from '../../App/RouteSwitcher';
 import { SectionBox } from '../../common/SectionBox';
 import SimpleTable, { NameValueTable } from '../../common/SimpleTable';

frontend/src/components/common/Resource/ResourceTable.tsx

@@ -29,7 +29,7 @@ import { useFilterFunc } from '../../../lib/util';
 import { DefaultHeaderAction, RowAction } from '../../../redux/actionButtonsSlice';
 import { useNamespaces } from '../../../redux/filterSlice';
 import { HeadlampEventType, useEventCallback } from '../../../redux/headlampEventSlice';
-import { useTypedSelector } from '../../../redux/reducers/reducers';
+import { useTypedSelector } from '../../../redux/hooks';
 import { useSettings } from '../../App/Settings/hook';
 import { ClusterGroupErrorMessage } from '../../cluster/ClusterGroupErrorMessage';
 import { DateLabel } from '../Label';

frontend/src/components/common/SectionFilterHeader.tsx

@@ -20,7 +20,7 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { setNamespaceFilter } from '../../redux/filterSlice';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import { NamespacesAutocomplete } from './NamespacesAutocomplete';
 import SectionHeader, { SectionHeaderProps } from './SectionHeader';
 

frontend/src/components/globalSearch/GlobalSearchContent.tsx

@@ -48,7 +48,7 @@ import ServiceAccount from '../../lib/k8s/serviceAccount';
 import StatefulSet from '../../lib/k8s/statefulSet';
 import { createRouteURL, getDefaultRoutes } from '../../lib/router';
 import { getClusterPrefixedPath } from '../../lib/util';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import { ThemePreview } from '../App/Settings/ThemePreview';
 import { setTheme, useAppThemes } from '../App/themeSlice';
 import { Delayed } from './Delayed';

frontend/src/components/resourceMap/GraphView.tsx

@@ -40,7 +40,7 @@ import { useDispatch } from 'react-redux';
 import Namespace from '../../lib/k8s/namespace';
 import K8sNode from '../../lib/k8s/node';
 import { setNamespaceFilter } from '../../redux/filterSlice';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import { NamespacesAutocomplete } from '../common/NamespacesAutocomplete';
 import { GraphNodeDetails } from './details/GraphNodeDetails';
 import { filterGraph, GraphFilter } from './graph/graphFiltering';

frontend/src/components/resourceMap/kubeIcon/KubeIcon.tsx

@@ -16,7 +16,7 @@
 
 import Box from '@mui/material/Box';
 import { alpha } from '@mui/system/colorManipulator';
-import { useTypedSelector } from '../../../redux/reducers/reducers';
+import { useTypedSelector } from '../../../redux/hooks';
 import CRoleIcon from './img/c-role.svg?react';
 import CmIcon from './img/cm.svg?react';
 import CrbIcon from './img/crb.svg?react';

frontend/src/lib/k8s/index.ts

@@ -18,7 +18,7 @@ import _ from 'lodash';
 import React, { useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 import { ConfigState } from '../../redux/configSlice';
-import { useTypedSelector } from '../../redux/reducers/reducers';
+import { useTypedSelector } from '../../redux/hooks';
 import { getCluster, getSelectedClusters } from '../cluster';
 import { ApiError, clusterRequest } from './apiProxy';
 import { Cluster, LabelSelector, StringDict } from './cluster';

frontend/src/lib/util.ts

@@ -19,7 +19,7 @@ import merge from 'lodash/merge';
 import React from 'react';
 import { useHistory } from 'react-router';
 import { filterGeneric, filterResource } from '../redux/filterSlice';
-import { useTypedSelector } from '../redux/reducers/reducers';
+import { useTypedSelector } from '../redux/hooks';
 import store from '../redux/stores/store';
 import { getCluster, getClusterGroup, getClusterPrefixedPath } from './cluster';
 import { ApiError } from './k8s/apiProxy';

frontend/src/plugin/Plugins.tsx

@@ -21,7 +21,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { isElectron } from '../helpers/isElectron';
-import { useTypedSelector } from '../redux/reducers/reducers';
+import { useTypedSelector } from '../redux/hooks';
 import { fetchAndExecutePlugins } from './index';
 import { pluginsLoaded, setPluginSettings } from './pluginsSlice';
 

frontend/src/redux/hooks.ts

@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
-import { useDispatch, useSelector, useStore } from 'react-redux';
-import { AppDispatch, AppStore, RootState } from './stores/store';
+import { TypedUseSelectorHook, useDispatch, useSelector, useStore } from 'react-redux';
+import type { AppDispatch, AppStore, RootState } from './stores/store';
 
 // These know the types from our store.
 export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
 export const useAppSelector = useSelector.withTypes<RootState>();
 export const useAppStore = useStore.withTypes<AppStore>();
+export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

frontend/src/redux/reducers/reducers.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { TypedUseSelectorHook, useSelector } from 'react-redux';
 import { combineReducers } from 'redux';
 import notificationsReducer from '../../components/App/Notifications/notificationsSlice';
 import themeReducer from '../../components/App/themeSlice';
@@ -59,6 +58,4 @@ const reducers = combineReducers({
 
 export type RootState = ReturnType<typeof reducers>;
 
-export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;
-
 export default reducers;

frontend/src/redux/uiSlice.ts

@@ -17,7 +17,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { ReactElement, useMemo } from 'react';
 import { ClusterChooserType } from '../components/cluster/ClusterChooser';
-import { useTypedSelector } from './reducers/reducers';
+import { useTypedSelector } from './hooks';
 
 export type FunctionsToOverride = {
   setToken?: (cluster: string, token: string | null) => void;