type(ux): Adding enable schedule (ux-issue 14) + fixing ux issue 7 and 11 (#2824)

* Adding enable schedule (ux-issue 14) + fixing ux issue 7 and 11
* Updating logic for Disable and Enable schedule
* Removing comments

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

litmus-portal/frontend/public/locales/en/translation.yaml

@@ -402,6 +402,7 @@ chaosWorkflows:
     editSchedule: Edit Schedule
     scheduleIsDisabled: This Schedule is disabled now
     disableSchedule: Disable Schedule
+    enableSchedule: Enable Schedule
     saveTemplate: Save Template
     updateEngine: 'Note: Make sure to update the chaos engine names'
     saveChanges: Save Changes

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx

@@ -37,13 +37,13 @@ import useStyles from './styles';
 interface TableDataProps {
   data: ScheduleWorkflow;
   deleteRow: (wfid: string) => void;
-  handleDisableSchedule: (schedule: ScheduleWorkflow) => void;
+  handleToggleSchedule: (schedule: ScheduleWorkflow) => void;
 }
 
 const TableData: React.FC<TableDataProps> = ({
   data,
   deleteRow,
-  handleDisableSchedule,
+  handleToggleSchedule,
 }) => {
   const classes = useStyles();
   const { t } = useTranslation();
@@ -396,7 +396,7 @@ const TableData: React.FC<TableDataProps> = ({
               <MenuItem
                 value="Disable"
                 onClick={() => {
-                  handleDisableSchedule(data);
+                  handleToggleSchedule(data);
                 }}
               >
                 <div className={classes.expDiv}>
@@ -414,6 +414,30 @@ const TableData: React.FC<TableDataProps> = ({
                 </div>
               </MenuItem>
             )}
+
+          {projectRole !== 'Viewer' &&
+            YAML.parse(data.workflow_manifest).spec.suspend === true && (
+              <MenuItem
+                value="Enable"
+                onClick={() => {
+                  handleToggleSchedule(data);
+                }}
+              >
+                <div className={classes.expDiv}>
+                  <img
+                    src="/icons/disableSchedule.svg"
+                    alt="Enable Schedule"
+                    className={classes.btnImg}
+                  />
+                  <Typography
+                    data-cy="enableSchedule"
+                    className={classes.downloadText}
+                  >
+                    {t('chaosWorkflows.browseSchedules.enableSchedule')}
+                  </Typography>
+                </div>
+              </MenuItem>
+            )}
           <MenuItem
             value="Download"
             onClick={() =>

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx

@@ -29,6 +29,7 @@ import {
   SCHEDULE_DETAILS,
   UPDATE_SCHEDULE,
 } from '../../../graphql';
+import { WeightMap } from '../../../models/graphql/createWorkflowData';
 import {
   DeleteSchedule,
   ScheduleDataVars,
@@ -44,7 +45,6 @@ import {
 } from '../../../utils/sort';
 import useStyles from './styles';
 import TableData from './TableData';
-import { WeightMap } from '../../../models/graphql/createWorkflowData';
 
 interface FilterOption {
   search: string;
@@ -86,13 +86,18 @@ const BrowseSchedule: React.FC = () => {
     suspended: 'All',
   });
 
-  const [disableSchedule] = useMutation(UPDATE_SCHEDULE, {
+  const [updateSchedule] = useMutation(UPDATE_SCHEDULE, {
     refetchQueries: [{ query: SCHEDULE_DETAILS, variables: { projectID } }],
   });
 
-  const handleDisableSchedule = (schedule: ScheduleWorkflow) => {
+  // Disable and re-enable a schedule
+  const handleToggleSchedule = (schedule: ScheduleWorkflow) => {
     const yaml = YAML.parse(schedule.workflow_manifest);
-    yaml.spec.suspend = true;
+    if (yaml.spec.suspend === undefined || yaml.spec.suspend === false) {
+      yaml.spec.suspend = true;
+    } else {
+      yaml.spec.suspend = false;
+    }
 
     const weightData: WeightMap[] = [];
 
@@ -103,7 +108,7 @@ const BrowseSchedule: React.FC = () => {
       });
     });
 
-    disableSchedule({
+    updateSchedule({
       variables: {
         ChaosWorkFlowInput: {
           workflow_id: schedule.workflow_id,
@@ -366,7 +371,7 @@ const BrowseSchedule: React.FC = () => {
                       <TableData
                         data={data}
                         deleteRow={deleteRow}
-                        handleDisableSchedule={handleDisableSchedule}
+                        handleToggleSchedule={handleToggleSchedule}
                       />
                     </TableRow>
                   ))

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/index.tsx

@@ -91,7 +91,7 @@ const BrowseAWorkflow: React.FC<BrowseTemplateProps> = ({ location }) => {
 
           {/* Buttons */}
           <div className={classes.spaceBetween}>
-            <ButtonOutlined onClick={() => history.push('/workflows')}>
+            <ButtonOutlined onClick={() => history.goBack()}>
               {t('browseTemplate.back')}
             </ButtonOutlined>
             <ButtonFilled variant="success" onClick={() => preSelectWorkflow()}>

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/HeaderSection.tsx

@@ -113,7 +113,7 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
             <MenuItem value="All">All</MenuItem>
             <MenuItem value="Failed">Failed</MenuItem>
             <MenuItem value="Running">Running</MenuItem>
-            <MenuItem value="Succeeded">Succeeded</MenuItem>
+            <MenuItem value="Succeeded">Completed</MenuItem>
           </Select>
         </FormControl>