diff --git a/assets/js/components/ClusterDetails/ChecksSelection.jsx b/assets/js/components/ClusterDetails/ChecksSelection.jsx
index ee59911e8d..042363d130 100644
--- a/assets/js/components/ClusterDetails/ChecksSelection.jsx
+++ b/assets/js/components/ClusterDetails/ChecksSelection.jsx
@@ -8,8 +8,14 @@ import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
import { remove, uniq, toggle, groupBy } from '@lib/lists';
import { getCatalog } from '@state/selectors/catalog';
import { updateCatalog } from '@state/actions/catalog';
-import { checksSelected } from '@state/clusters';
import { executionRequested } from '@state/actions/lastExecutions';
+import { getClusterCheckSelection } from '@state/selectors/checksSelection';
+import {
+ clusterChecksSelected,
+ isSaving,
+ isSuccessfullySaved,
+ isSavingFailed,
+} from '@state/checksSelection';
import CatalogContainer from '@components/ChecksCatalog/CatalogContainer';
import {
@@ -40,9 +46,12 @@ const getGroupSelectedState = (checks, selectedChecks) => {
function ChecksSelection({ clusterId, cluster }) {
const dispatch = useDispatch();
- const { saving, savingError, savingSuccess } = useSelector(
- (state) => state.clusterChecksSelection
- );
+ const { status } = useSelector(getClusterCheckSelection(clusterId));
+ const { saving, savingError, savingSuccess } = {
+ saving: isSaving(status),
+ savingSuccess: isSuccessfullySaved(status),
+ savingError: isSavingFailed(status),
+ };
const {
data: catalogData,
@@ -84,7 +93,11 @@ function ChecksSelection({ clusterId, cluster }) {
}, [catalogData, selectedChecks]);
useEffect(() => {
- setLocalSavingError(savingError);
+ if (savingError === true) {
+ setLocalSavingError(
+ 'An unexpected error happened while selecting your desired checks'
+ );
+ }
setLocalSavingSuccess(savingSuccess);
}, [savingError, savingSuccess]);
@@ -103,9 +116,10 @@ function ChecksSelection({ clusterId, cluster }) {
const saveSelection = useCallback(() =>
dispatch(
- checksSelected({
- checks: selectedChecks,
+ clusterChecksSelected({
clusterID: clusterId,
+ clusterName: cluster.name,
+ checks: selectedChecks,
})
)
);
@@ -158,6 +172,7 @@ function ChecksSelection({ clusterId, cluster }) {
- {localSavingError && (
+ {savingError && (
setLocalSavingError(null)}>
- {savingError}
+ {localSavingError}
)}
{localSavingSuccess && selectedChecks.length > 0 && (
diff --git a/assets/js/components/ClusterDetails/ChecksSelection.test.jsx b/assets/js/components/ClusterDetails/ChecksSelection.test.jsx
index 0cfb4b3220..012e1eebfb 100644
--- a/assets/js/components/ClusterDetails/ChecksSelection.test.jsx
+++ b/assets/js/components/ClusterDetails/ChecksSelection.test.jsx
@@ -20,7 +20,6 @@ describe('ClusterDetails ChecksSelection component', () => {
const initialState = {
catalog: { loading: false, data: catalog, error: null },
- clusterChecksSelection: {},
};
const [statefulChecksSelection] = withState(
,
@@ -64,7 +63,6 @@ describe('ClusterDetails ChecksSelection component', () => {
const initialState = {
catalog: { loading: false, data: catalog, error: null },
- clusterChecksSelection: {},
};
const [statefulChecksSelection] = withState(
,
@@ -106,7 +104,6 @@ describe('ClusterDetails ChecksSelection component', () => {
const initialState = {
catalog: { loading: false, data: catalog, error: null },
- clusterChecksSelection: {},
};
const [statefulChecksSelection, store] = withState(
,
@@ -136,6 +133,7 @@ describe('ClusterDetails ChecksSelection component', () => {
payload: {
checks: selectedChecks,
clusterID: cluster.id,
+ clusterName: cluster.name,
},
},
];