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, }, }, ];