frontend: clusterActionSlice: Refactor clusterActions into a slice

- Use new style redux toolkit, and not sagas. - Added some documentation. - Added some tests. Signed-off-by: René Dudfield <[email protected]>
headlamp-k8s · Nov 13, 2023 · e8148a0 · e8148a0
1 parent b3f7ada
commit e8148a0
Show file tree

Hide file tree

Showing 22 changed files with 918 additions and 559 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",
@@ -191,6 +190,8 @@
     "@storybook/preset-create-react-app": "^4.1.1",
     "@storybook/react": "6.4.13",
     "@testing-library/user-event": "^14.5.1",
+    "@types/redux-mock-store": "^1.0.4",
+    "fetch-mock": "^9.11.0",
     "http-proxy-middleware": "^2.0.1",
     "husky": "^4.3.8",
     "i18next-parser": "^4.7.0",
@@ -199,6 +200,7 @@
     "msw": "^0.47.4",
     "msw-storybook-addon": "^1.6.3",
     "prettier": "^2.4.1",
+    "redux-mock-store": "^1.5.4",
     "resize-observer-polyfill": "^1.5.1",
     "typedoc": "0.22.10",
     "typedoc-hugo-theme": "1.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.stories.tsx b/frontend/src/components/common/ActionsNotifier.stories.tsx
@@ -29,7 +29,6 @@ Some.args = {
     '1': {
       id: '1',
       url: '/tmp',
-      key: '1',
       dismissSnackbar: '1',
       message: 'Some message',
       snackbarProps: {},

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 {
@@ -50,14 +49,14 @@ function PureActionsNotifier({ dispatch, clusterActions }: PureActionsNotifierPr
       closeSnackbar(clusterAction.dismissSnackbar);
     }
 
-    const { key, message, snackbarProps } = clusterAction;
-    enqueueSnackbar(message, {
-      key,
-      preventDuplicate: true,
-      autoHideDuration: CLUSTER_ACTION_GRACE_PERIOD,
-      action,
-      ...snackbarProps,
-    });
+    if (clusterAction.message) {
+      enqueueSnackbar(clusterAction.message, {
+        key: clusterAction.key,
+        autoHideDuration: clusterAction.autoHideDuration || CLUSTER_ACTION_GRACE_PERIOD,
+        action,
+        ...clusterAction.snackbarProps,
+      });
+    }
   }
 
   React.useEffect(

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 } from '../common';
 import { DetailsGrid } 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';
@@ -8,9 +7,6 @@ import { Notification } from '../../lib/notification';
 import { Route } from '../../lib/router';
 import { UIState } from '../reducers/ui';
 
-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';
@@ -38,41 +34,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;
@@ -95,17 +56,6 @@ export type TableColumnsProcessor = {
   }) => ResourceTableProps['columns'];
 };
 
-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 } };
 }