frontend: clusterActionSlice: Refactor clusterActions into a slice

Use new style redux toolkit, and not sagas. Add some documentation.
headlamp-k8s · Oct 10, 2023 · 1dc600c · 1dc600c
1 parent 41738df
commit 1dc600c
Show file tree

Hide file tree

Showing 18 changed files with 291 additions and 404 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -73,7 +73,6 @@
     "react-scripts": "5.0.0",
     "react-window": "^1.8.7",
     "recharts": "^2.1.4",
-    "redux-saga": "^1.1.3",
     "semver": "^7.3.5",
     "spacetime": "^7.4.0",
     "stream-browserify": "^3.0.0",

diff --git a/frontend/src/components/App/PluginSettings/PluginSettings.stories.tsx b/frontend/src/components/App/PluginSettings/PluginSettings.stories.tsx
@@ -1,6 +1,4 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
-import React from 'react';
-import store from '../../../redux/stores/store';
 import { TestContext } from '../../../test';
 import { PluginSettingsPure, PluginSettingsPureProps } from './PluginSettings';
 
@@ -10,7 +8,7 @@ export default {
 } as Meta;
 
 const Template: Story<PluginSettingsPureProps> = args => (
-  <TestContext store={store}>
+  <TestContext>
     <PluginSettingsPure {...args} />
   </TestContext>
 );

diff --git a/frontend/src/components/common/ActionsNotifier.tsx b/frontend/src/components/common/ActionsNotifier.tsx
@@ -4,8 +4,7 @@ import { useSnackbar } from 'notistack';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import { CLUSTER_ACTION_GRACE_PERIOD } from '../../lib/util';
-import { ClusterAction } from '../../redux/actions/actions';
+import { CLUSTER_ACTION_GRACE_PERIOD, ClusterAction } from '../../redux/clusterActionSlice';
 import { useTypedSelector } from '../../redux/reducers/reducers';
 
 export interface PureActionsNotifierProps {

diff --git a/frontend/src/components/common/Resource/CreateButton.tsx b/frontend/src/components/common/Resource/CreateButton.tsx
@@ -6,7 +6,7 @@ import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { apply } from '../../../lib/k8s/apiProxy';
 import { KubeObjectInterface } from '../../../lib/k8s/cluster';
-import { clusterAction } from '../../../redux/actions/actions';
+import { clusterAction } from '../../../redux/clusterActionSlice';
 import ActionButton from '../ActionButton';
 import EditorDialog from './EditorDialog';
 

diff --git a/frontend/src/components/common/Resource/DeleteButton.tsx b/frontend/src/components/common/Resource/DeleteButton.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { KubeObject } from '../../../lib/k8s/cluster';
-import { CallbackActionOptions, clusterAction } from '../../../redux/actions/actions';
+import { CallbackActionOptions, clusterAction } from '../../../redux/clusterActionSlice';
 import ActionButton from '../ActionButton';
 import { ConfirmDialog } from '../Dialog';
 import AuthVisible from './AuthVisible';

diff --git a/frontend/src/components/common/Resource/EditButton.tsx b/frontend/src/components/common/Resource/EditButton.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { KubeObject, KubeObjectInterface } from '../../../lib/k8s/cluster';
-import { CallbackActionOptions, clusterAction } from '../../../redux/actions/actions';
+import { CallbackActionOptions, clusterAction } from '../../../redux/clusterActionSlice';
 import ActionButton from '../ActionButton';
 import AuthVisible from './AuthVisible';
 import EditorDialog from './EditorDialog';

diff --git a/frontend/src/components/common/Resource/RestartButton.tsx b/frontend/src/components/common/Resource/RestartButton.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { apply } from '../../../lib/k8s/apiProxy';
 import { KubeObject } from '../../../lib/k8s/cluster';
-import { clusterAction } from '../../../redux/actions/actions';
+import { clusterAction } from '../../../redux/clusterActionSlice';
 import AuthVisible from './AuthVisible';
 
 interface RestartButtonProps {

diff --git a/frontend/src/components/common/Resource/ScaleButton.tsx b/frontend/src/components/common/Resource/ScaleButton.tsx
@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { KubeObject } from '../../../lib/k8s/cluster';
-import { CallbackActionOptions, clusterAction } from '../../../redux/actions/actions';
+import { CallbackActionOptions, clusterAction } from '../../../redux/clusterActionSlice';
 import { LightTooltip } from '../Tooltip';
 import AuthVisible from './AuthVisible';
 

diff --git a/frontend/src/components/common/SimpleTable.stories.tsx b/frontend/src/components/common/SimpleTable.stories.tsx
@@ -4,7 +4,6 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { useLocation } from 'react-router-dom';
 import { KubeObjectInterface } from '../../lib/k8s/cluster';
 import { useFilterFunc } from '../../lib/util';
-import store from '../../redux/stores/store';
 import { TestContext, TestContextProps } from '../../test';
 import SectionFilterHeader from './SectionFilterHeader';
 import SimpleTable, { SimpleTableProps } from './SimpleTable';
@@ -33,7 +32,7 @@ function TestSimpleTable(props: SimpleTableProps) {
 }
 
 const Template: Story<SimpleTableProps> = args => (
-  <TestContext store={store}>
+  <TestContext>
     <TestSimpleTable {...args} />
   </TestContext>
 );

diff --git a/frontend/src/components/cronjob/Details.tsx b/frontend/src/components/cronjob/Details.tsx
@@ -18,7 +18,7 @@ import { apply } from '../../lib/k8s/apiProxy';
 import { KubeObjectInterface } from '../../lib/k8s/cluster';
 import CronJob from '../../lib/k8s/cronJob';
 import Job from '../../lib/k8s/job';
-import { clusterAction } from '../../redux/actions/actions';
+import { clusterAction } from '../../redux/clusterActionSlice';
 import { ActionButton, ObjectEventList } from '../common';
 import { MainInfoSection } from '../common/Resource';
 import AuthVisible from '../common/Resource/AuthVisible';

diff --git a/frontend/src/components/node/Details.tsx b/frontend/src/components/node/Details.tsx
@@ -11,7 +11,7 @@ import { apply, drainNode, drainNodeStatus } from '../../lib/k8s/apiProxy';
 import { KubeMetrics } from '../../lib/k8s/cluster';
 import Node from '../../lib/k8s/node';
 import { getCluster, timeAgo } from '../../lib/util';
-import { clusterAction } from '../../redux/actions/actions';
+import { clusterAction } from '../../redux/clusterActionSlice';
 import { CpuCircularChart, MemoryCircularChart } from '../cluster/Charts';
 import { ActionButton, ObjectEventList, StatusLabelProps } from '../common';
 import { HeaderLabel, StatusLabel, ValueLabel } from '../common/Label';

diff --git a/frontend/src/redux/actions/actions.tsx b/frontend/src/redux/actions/actions.tsx
@@ -1,4 +1,3 @@
-import { OptionsObject as SnackbarProps } from 'notistack';
 import { AppLogoType } from '../../components/App/AppLogo';
 import { ClusterChooserType } from '../../components/cluster/ClusterChooser';
 import { ResourceTableProps } from '../../components/common/Resource/ResourceTable';
@@ -11,9 +10,6 @@ import { UIState } from '../reducers/ui';
 export const FILTER_RESET = 'FILTER_RESET';
 export const FILTER_SET_NAMESPACE = 'FILTER_SET_NAMESPACE';
 export const FILTER_SET_SEARCH = 'FILTER_SET_SEARCH';
-export const CLUSTER_ACTION = 'CLUSTER_ACTION';
-export const CLUSTER_ACTION_UPDATE = 'CLUSTER_ACTION_UPDATE';
-export const CLUSTER_ACTION_CANCEL = 'CLUSTER_ACTION_CANCEL';
 export const UI_SIDEBAR_SET_SELECTED = 'UI_SIDEBAR_SET_SELECTED';
 export const UI_SIDEBAR_SET_VISIBLE = 'UI_SIDEBAR_SET_VISIBLE';
 export const UI_SIDEBAR_SET_ITEM = 'UI_SIDEBAR_SET_ITEM';
@@ -41,41 +37,6 @@ export interface BrandingProps {
 export const UI_SET_NOTIFICATIONS = 'UI_SET_NOTIFICATIONS';
 export const UI_UPDATE_NOTIFICATION = 'UI_UPDATE_NOTIFICATION';
 
-export interface ClusterActionButton {
-  label: string;
-  actionToDispatch: string;
-}
-
-export interface ClusterAction {
-  id: string;
-  key?: string;
-  message?: string;
-  url?: string;
-  buttons?: ClusterActionButton[];
-  dismissSnackbar?: string;
-  snackbarProps?: SnackbarProps;
-}
-
-export interface CallbackAction extends CallbackActionOptions {
-  callback: (...args: any[]) => void;
-}
-
-export interface CallbackActionOptions {
-  startUrl?: string;
-  cancelUrl?: string;
-  errorUrl?: string;
-  successUrl?: string;
-  startMessage?: string;
-  cancelledMessage?: string;
-  errorMessage?: string;
-  successMessage?: string;
-  startOptions?: SnackbarProps;
-  cancelledOptions?: SnackbarProps;
-  successOptions?: SnackbarProps;
-  errorOptions?: SnackbarProps;
-  cancelCallback?: (...args: any[]) => void;
-}
-
 export interface Action {
   type: string;
   [propName: string]: any;
@@ -110,17 +71,6 @@ export function resetFilter() {
   return { type: FILTER_RESET };
 }
 
-export function clusterAction(
-  callback: CallbackAction['callback'],
-  actionOptions: CallbackActionOptions = {}
-) {
-  return { type: CLUSTER_ACTION, callback, ...actionOptions };
-}
-
-export function updateClusterAction(actionOptions: ClusterAction) {
-  return { type: CLUSTER_ACTION_UPDATE, ...actionOptions };
-}
-
 export function setSidebarSelected(selected: string | null, sidebar: string | null = '') {
   return { type: UI_SIDEBAR_SET_SELECTED, selected: { item: selected, sidebar } };
 }