Fix behavior of enable/disable button in scheduled experiments

chaoscenter/web/src/components/ExperimentActionButtons/ExperimentActionButtons.tsx

@@ -360,12 +360,14 @@ export const DownloadExperimentButton = ({
 
 interface EnableDisableCronButtonProps extends ActionButtonProps, Partial<RefetchExperiments> {
   isCronEnabled: boolean;
+  setIsCronEnabled?: React.Dispatch<React.SetStateAction<boolean | undefined>>;
 }
 
 export const EnableDisableCronButton = ({
   experimentID,
   tooltipProps,
   isCronEnabled,
+  setIsCronEnabled,
   refetchExperiments
 }: EnableDisableCronButtonProps): React.ReactElement => {
   const scope = getScope();
@@ -394,11 +396,13 @@ export const EnableDisableCronButton = ({
     intent: Intent.WARNING,
     onClose: (isConfirmed: boolean) => {
       if (isConfirmed) {
+        const diable = isCronEnabled ? true : false;
+        setIsCronEnabled?.(!diable);
         updateCronExperimentStateMutation({
           variables: {
             projectID: scope.projectID,
             experimentID: experimentID,
-            disable: isCronEnabled ? true : false
+            disable: diable
           }
         });
       }

chaoscenter/web/src/components/RightSideBarV2/RightSideBarV2.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Layout, Text } from '@harnessio/uicore';
+import { Container, Layout, Text, useToaster } from '@harnessio/uicore';
 import { Color, FontVariation } from '@harnessio/design-system';
 import { Classes } from '@blueprintjs/core';
 import { useStrings } from '@strings';
@@ -14,6 +14,9 @@ import {
 } from '@components/ExperimentActionButtons';
 import type { RefetchExperimentRuns, RefetchExperiments } from '@controllers/ExperimentDashboardV2';
 import { ExperimentRunStatus, ExperimentType, InfrastructureType } from '@api/entities';
+import { listExperiment, ListExperimentResponse } from '@api/core';
+import { getScope } from '@utils';
+import { cronEnabled } from 'utils';
 
 interface RightSideBarViewV2Props extends Partial<RefetchExperiments>, Partial<RefetchExperimentRuns> {
   experimentID: string;
@@ -23,6 +26,7 @@ interface RightSideBarViewV2Props extends Partial<RefetchExperiments>, Partial<R
   phase: ExperimentRunStatus | undefined;
   loading?: boolean;
   isCronEnabled?: boolean;
+  setIsCronEnabled?: React.Dispatch<React.SetStateAction<boolean | undefined>>;
   isEditMode?: boolean;
 }
 
@@ -35,9 +39,36 @@ function RightSideBarV2({
   loading,
   isEditMode,
   isCronEnabled,
+  setIsCronEnabled,
   refetchExperiments,
   refetchExperimentRuns
 }: RightSideBarViewV2Props): React.ReactElement {
+  const { showError } = useToaster();
+  let experimentList: ListExperimentResponse | undefined;
+  if (experimentType === ExperimentType.CRON) {
+    const scope = getScope();
+    const { data: experimentListData } = listExperiment({
+      ...scope,
+      experimentIDs: [experimentID],
+      options: {
+        onError: err => showError(err.message),
+        fetchPolicy: 'network-only'
+      }
+    });
+
+    experimentList = experimentListData;
+  }
+
+  React.useEffect(() => {
+    if (experimentList !== undefined) {
+      const experimentData = experimentList?.listExperiment.experiments.filter(
+        experiment => experiment.experimentID === experimentID
+      )[0];
+      const parsedManifest = JSON.parse(experimentData?.experimentManifest);
+      setIsCronEnabled?.(cronEnabled(parsedManifest));
+    }
+  }, [experimentList]);
+
   const { getString } = useStrings();
   const showStopButton = phase === ExperimentRunStatus.RUNNING || phase === ExperimentRunStatus.QUEUED;
 
@@ -61,6 +92,7 @@ function RightSideBarV2({
               experimentID={experimentID}
               refetchExperiments={refetchExperiments}
               isCronEnabled={isCronEnabled}
+              setIsCronEnabled={setIsCronEnabled}
             />
             <Text
               style={{ textAlign: 'center' }}

chaoscenter/web/src/controllers/ChaosStudioEdit/ChaosStudioEdit.tsx

@@ -68,7 +68,8 @@ export default function ChaosStudioEditController(): React.ReactElement {
         ?.updateExperimentManifest(experimentID, parse(experimentData.experimentManifest))
         .then(() => setShowStudio(oldState => oldState + 1));
       setLastExperimentRun(experimentData.recentExperimentRunDetails?.[0]);
-
+    }
+    if (experimentData && showStudio < 2) {
       const parsedManifest = JSON.parse(experimentData.experimentManifest);
       const validateCron = experimentData?.experimentType === ExperimentType.CRON && cronEnabled(parsedManifest);
       setIsCronEnabled(validateCron);
@@ -89,6 +90,7 @@ export default function ChaosStudioEditController(): React.ReactElement {
     <RightSideBarV2
       experimentID={experimentID}
       isCronEnabled={isCronEnabled}
+      setIsCronEnabled={setIsCronEnabled}
       isEditMode
       phase={lastExperimentRun?.phase}
       experimentType={experimentType as ExperimentType}