type(bugfix): Fixed Radio Button selection issue at Choose Workflow Screen 🐛 (#2933)

* Fixed Radio Button selection issue at Choose Workflow Screen

Signed-off-by: Sayan Mondal <sayan@chaosnative.com>

* Fixed Issues with workflow localforage state and persistence

Signed-off-by: Sayan Mondal <sayan@chaosnative.com>

litmus-portal/frontend/src/components/LitmusStepper/index.tsx

@@ -1,4 +1,11 @@
-import { Paper, Step, StepLabel, Stepper, Typography } from '@material-ui/core';
+import {
+  Paper,
+  Step,
+  StepLabel,
+  Stepper,
+  Tooltip,
+  Typography,
+} from '@material-ui/core';
 import clsx from 'clsx';
 import { ButtonFilled, ButtonOutlined } from 'litmus-ui';
 import React from 'react';
@@ -77,11 +84,23 @@ const LitmusStepper: React.FC<LitmusStepperProps> = ({
 
       {/* Stepper Actions */}
       <div className={classes.stepperActions}>
-        {activeStep > 0 && (
+        {activeStep === 2 ? (
+          <Tooltip
+            title="All selected Workflow Data will be lost"
+            placement="top"
+            leaveDelay={300}
+          >
+            <div>
               <ButtonOutlined onClick={handleBack}>
                 <Typography>{t('workflowStepper.back')}</Typography>
               </ButtonOutlined>
-        )}
+            </div>
+          </Tooltip>
+        ) : activeStep > 0 ? (
+          <ButtonOutlined onClick={handleBack}>
+            <Typography>{t('workflowStepper.back')}</Typography>
+          </ButtonOutlined>
+        ) : null}
         {moreStepperActions}
         <div className={classes.endAction}>
           {activeStep !== steps.length - 1 ? (

litmus-portal/frontend/src/components/WorkflowStepper/index.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@material-ui/core';
 import Snackbar from '@material-ui/core/Snackbar';
 import Typography from '@material-ui/core/Typography';
 import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
@@ -145,6 +146,26 @@ const WorkflowStepper = () => {
               Finish
             </ButtonFilled>
           )
+        ) : activeStep === 2 ? (
+          <div className={classes.headerButtonWrapper} aria-label="buttons">
+            <Tooltip
+              title="All selected Workflow Data will be lost"
+              placement="top"
+              leaveDelay={300}
+            >
+              <div>
+                <ButtonOutlined
+                  className={classes.btn}
+                  onClick={() => handleBack()}
+                >
+                  Back
+                </ButtonOutlined>
+              </div>
+            </Tooltip>
+            <ButtonFilled className={classes.btn} onClick={() => handleNext()}>
+              Next
+            </ButtonFilled>
+          </div>
         ) : (
           // Apply headerButtonWrapper style for top button's div
           <div className={classes.headerButtonWrapper} aria-label="buttons">

litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/ChooseWorkflowFromExisting.tsx

@@ -8,7 +8,7 @@ import {
 } from '@material-ui/core';
 import { LitmusCard, RadioButton, Search } from 'litmus-ui';
 import localforage from 'localforage';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   DELETE_WORKFLOW_TEMPLATE,
@@ -18,17 +18,23 @@ import {
   ListManifestTemplate,
   ListManifestTemplateArray,
 } from '../../../models/graphql/workflowListData';
-import { getProjectID } from '../../../utils/getSearchParams';
-import * as WorkflowActions from '../../../redux/actions/workflow';
-import useStyles from './styles';
 import useActions from '../../../redux/actions';
+import * as WorkflowActions from '../../../redux/actions/workflow';
+import { getProjectID } from '../../../utils/getSearchParams';
+import useStyles from './styles';
 
 interface ChooseWorkflowRadio {
   selected: string;
   id: string;
 }
 
-const ChooseWorkflowFromExisting = () => {
+interface ChooseWorkflowFromExistingProps {
+  selectedExp: (expID: string) => void;
+}
+
+const ChooseWorkflowFromExisting: React.FC<ChooseWorkflowFromExistingProps> = ({
+  selectedExp,
+}) => {
   const { t } = useTranslation();
   const classes = useStyles();
   const { palette } = useTheme();
@@ -73,6 +79,7 @@ const ChooseWorkflowFromExisting = () => {
       selected: 'B',
       id: event.target.value,
     };
+    selectedExp(selection.id);
     const templateData = filteredExistingWorkflows.filter((workflow) => {
       return workflow.template_id === event.target.value;
     })[0];
@@ -83,17 +90,6 @@ const ChooseWorkflowFromExisting = () => {
     localforage.setItem('hasSetWorkflowData', false);
   };
 
-  // Selects Option B -> Sub Experiment Options which was already selected by the user
-  useEffect(() => {
-    localforage
-      .getItem('selectedScheduleOption')
-      .then((value) =>
-        value !== null
-          ? setSelected((value as ChooseWorkflowRadio).id)
-          : setSelected('')
-      );
-  }, []);
-
   return (
     <AccordionDetails>
       {/* Wrapping content inside the Accordion to take full width */}

litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/choosePreDefinedExperiments.tsx

@@ -25,7 +25,12 @@ interface ChooseWorkflowRadio {
   id: string;
 }
 
-const ChoosePreDefinedExperiments = () => {
+interface ChoosePreDefinedExperimentsProps {
+  selectedExp: (expID: string) => void;
+}
+
+const ChoosePreDefinedExperiments: React.FC<ChoosePreDefinedExperimentsProps> =
+  ({ selectedExp }) => {
     const { t } = useTranslation();
     const classes = useStyles();
     const { palette } = useTheme();
@@ -69,6 +74,7 @@ const ChoosePreDefinedExperiments = () => {
         selected: 'A',
         id: event.target.value,
       };
+      selectedExp(selection.id);
       localforage.setItem('selectedScheduleOption', selection);
       localforage.setItem('hasSetWorkflowData', false);
     };
@@ -98,17 +104,6 @@ const ChoosePreDefinedExperiments = () => {
       localforage.setItem('selectedHub', event.target.value as string);
     };
 
-  // Selects Option A -> Sub Experiment Options which was already selected by the user
-  useEffect(() => {
-    localforage
-      .getItem('selectedScheduleOption')
-      .then((value) =>
-        value !== null
-          ? setSelected((value as ChooseWorkflowRadio).id)
-          : setSelected('')
-      );
-  }, []);
-
     /**
      * UseEffect to check if Chaos Hub exists and if exists
      * fetch the pre-defined workflows

litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/index.tsx

@@ -14,7 +14,6 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { ChooseWorkflowRadio } from '../../../models/localforage/radioButton';
 import useActions from '../../../redux/actions';
 import * as AlertActions from '../../../redux/actions/alert';
 import * as WorkflowActions from '../../../redux/actions/workflow';
@@ -30,6 +29,7 @@ const ChooseWorkflow = forwardRef((_, ref) => {
   const { t } = useTranslation();
   const alert = useActions(AlertActions);
   const [selected, setSelected] = useState<string>('');
+  const [id, setSelectedID] = useState<string | undefined>(undefined);
   const workflowDetails = useSelector(
     (state: RootState) => state.workflowManifest.manifest
   );
@@ -50,11 +50,21 @@ const ChooseWorkflow = forwardRef((_, ref) => {
     }
   };
 
+  useEffect(() => {
+    workflowAction.setWorkflowManifest({ manifest: '' });
+  }, []);
+
   function onNext() {
     if (selected === '') {
       alert.changeAlertState(true); // No Workflow Type has been selected and user clicked on Next
       return false;
     }
+    if (selected === 'A' || selected === 'B') {
+      if (id === undefined) {
+        alert.changeAlertState(true);
+        return false;
+      }
+    }
     if (selected === 'D' && workflowDetails === '') {
       alert.changeAlertState(true);
       return false;
@@ -63,20 +73,9 @@ const ChooseWorkflow = forwardRef((_, ref) => {
     return true;
   }
 
-  useEffect(() => {
+  const pickedExperiment = (subExpNumber: string) => {
-    localforage.getItem('selectedScheduleOption').then((value) => {
+    setSelectedID(subExpNumber);
-      if (value) {
+  };
-        setSelected((value as ChooseWorkflowRadio).selected);
-      } else setSelected('');
-    });
-    workflowAction.setWorkflowManifest({
-      manifest: '',
-    });
-    /**
-     * Removes the workflow details if already present
-     */
-    localforage.removeItem('workflow');
-  }, []);
 
   useImperativeHandle(ref, () => ({
     onNext,
@@ -120,7 +119,7 @@ const ChooseWorkflow = forwardRef((_, ref) => {
                 </span>
               </RadioButton>
             </AccordionSummary>
-            <ChoosePreDefinedExperiments />
+            <ChoosePreDefinedExperiments selectedExp={pickedExperiment} />
           </Accordion>
 
           <Accordion
@@ -141,7 +140,7 @@ const ChooseWorkflow = forwardRef((_, ref) => {
                 </span>
               </RadioButton>
             </AccordionSummary>
-            <ChooseWorkflowFromExisting />
+            <ChooseWorkflowFromExisting selectedExp={pickedExperiment} />
           </Accordion>
 
           <Accordion

litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx

@@ -272,13 +272,13 @@ const TuneWorkflow = forwardRef((_, ref) => {
    * Index DB Fetching for extracting selected Button and Workflow Details
    */
   const getSelectedWorkflowDetails = () => {
-    localforage.getItem('workflow').then((workflow) =>
+    localforage.getItem('workflow').then((workflow) => {
       setWorkflow({
         name: (workflow as WorkflowDetailsProps).name,
         crd: (workflow as WorkflowDetailsProps).CRDLink,
         description: (workflow as WorkflowDetailsProps).description,
-      })
+      });
-    );
+    });
     localforage.getItem('selectedScheduleOption').then((value) => {
       /**
        * Setting default data when MyHub is selected
@@ -331,7 +331,7 @@ const TuneWorkflow = forwardRef((_, ref) => {
 
   useEffect(() => {
     getSelectedWorkflowDetails();
-  }, []);
+  }, [manifest]);
 
   /**
    * Graphql Query for fetching Engine YAML

litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx

@@ -241,11 +241,7 @@ const VerifyCommit = forwardRef(
     isLoading(loading);
 
     const handleMutation = () => {
-      if (
+      if (workflow.name.length !== 0 && weights.length !== 0) {
-        workflow.name.length !== 0 &&
-        workflow.description.length !== 0 &&
-        weights.length !== 0
-      ) {
         const weightData: WeightMap[] = [];
 
         weights.forEach((data) => {

litmus-portal/frontend/src/views/CreateWorkflow/WorkflowSettings/index.tsx

@@ -130,6 +130,7 @@ const WorkflowSettings = forwardRef((_, ref) => {
             },
           });
         });
+        workflowAction.setWorkflowManifest({ manifest: '' });
       }
       if ((value as ChooseWorkflowRadio).selected === 'B') {
         getSavedTemplateDetails({