Use the new check selection in legacy cluster ChecksSelection

trento-project · Jul 18, 2023 · bfd22a6 · bfd22a6
1 parent 180bc6d
commit bfd22a6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git 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 }) {
             <button
               className="flex justify-center items-center bg-jungle-green-500 hover:opacity-75 text-white font-bold py-2 px-4 rounded"
               onClick={saveSelection}
+              disabled={saving}
               type="button"
               data-testid="save-selection-button"
             >
@@ -169,9 +184,9 @@ function ChecksSelection({ clusterId, cluster }) {
                 'Select Checks for Execution'
               )}
             </button>
-            {localSavingError && (
+            {savingError && (
               <SavingFailedAlert onClose={() => setLocalSavingError(null)}>
-                <p>{savingError}</p>
+                <p>{localSavingError}</p>
               </SavingFailedAlert>
             )}
             {localSavingSuccess && selectedChecks.length > 0 && (

diff --git 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(
       <ChecksSelection clusterId={cluster.id} cluster={cluster} />,
@@ -64,7 +63,6 @@ describe('ClusterDetails ChecksSelection component', () => {
 
     const initialState = {
       catalog: { loading: false, data: catalog, error: null },
-      clusterChecksSelection: {},
     };
     const [statefulChecksSelection] = withState(
       <ChecksSelection clusterId={cluster.id} cluster={cluster} />,
@@ -106,7 +104,6 @@ describe('ClusterDetails ChecksSelection component', () => {
 
     const initialState = {
       catalog: { loading: false, data: catalog, error: null },
-      clusterChecksSelection: {},
     };
     const [statefulChecksSelection, store] = withState(
       <ChecksSelection clusterId={cluster.id} cluster={cluster} />,
@@ -136,6 +133,7 @@ describe('ClusterDetails ChecksSelection component', () => {
         payload: {
           checks: selectedChecks,
           clusterID: cluster.id,
+          clusterName: cluster.name,
         },
       },
     ];