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>
2021-06-24 11:45:08 +05:30 · 2021-06-24 11:45:08 +05:30 · c9ac99b947
parent b7db9f42cb
commit c9ac99b947
8 changed files with 293 additions and 266 deletions
--- a/litmus-portal/frontend/src/components/LitmusStepper/index.tsx
+++ b/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 ? (
--- a/litmus-portal/frontend/src/components/WorkflowStepper/index.tsx
+++ b/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">
--- a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/ChooseWorkflowFromExisting.tsx
+++ b/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 */}
--- a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/choosePreDefinedExperiments.tsx
+++ b/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
@ -253,6 +248,6 @@ const ChoosePreDefinedExperiments = () => {
        </div>
      </AccordionDetails>
    );
-};
+  };

 export default ChoosePreDefinedExperiments;
--- a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/index.tsx
+++ b/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(() => {
-    localforage.getItem('selectedScheduleOption').then((value) => {
-      if (value) {
-        setSelected((value as ChooseWorkflowRadio).selected);
-      } else setSelected('');
-    });
-    workflowAction.setWorkflowManifest({
-      manifest: '',
-    });
-    /**
-     * Removes the workflow details if already present
-     */
-    localforage.removeItem('workflow');
-  }, []);
+  const pickedExperiment = (subExpNumber: string) => {
+    setSelectedID(subExpNumber);
+  };

  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
--- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx
+++ b/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
--- a/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx
@ -241,11 +241,7 @@ const VerifyCommit = forwardRef(
    isLoading(loading);

    const handleMutation = () => {
-      if (
-        workflow.name.length !== 0 &&
-        workflow.description.length !== 0 &&
-        weights.length !== 0
-      ) {
+      if (workflow.name.length !== 0 && weights.length !== 0) {
        const weightData: WeightMap[] = [];

        weights.forEach((data) => {
--- a/litmus-portal/frontend/src/views/CreateWorkflow/WorkflowSettings/index.tsx
+++ b/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({