Adding data-cy for E2E and fixing Edit Scheduile View YAML (#2977)

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

litmus-portal/frontend/src/pages/EditSchedule/Schedule.tsx

@@ -493,6 +493,7 @@ const ScheduleWorkflow = () => {
                     <div className={classes.innerRecurring}>
                       <FormControl component="fieldset">
                         <RadioGroup
+                          data-cy="RecurringSchedule"
                           aria-label="instanceDef"
                           name="instanceDef"
                           value={valueDef}
@@ -750,6 +751,7 @@ const ScheduleWorkflow = () => {
           Cancel
         </ButtonOutlined>
         <ButtonFilled
+          data-cy="VerifyButton"
           onClick={() =>
             history.push({
               pathname: `/workflows/schedule/${getProjectID()}/${fetchWorkflowNameFromManifest(

litmus-portal/frontend/src/pages/EditSchedule/index.tsx

@@ -67,6 +67,7 @@ const EditSchedule: React.FC = () => {
     },
   ]);
 
+  const [yamlOpen, setYAMLOpen] = React.useState(false);
   const [open, setOpen] = React.useState(false);
   const [finishModalOpen, setFinishModalOpen] = useState(false);
   const [errorModal, setErrorModal] = useState(false);
@@ -204,7 +205,7 @@ const EditSchedule: React.FC = () => {
 
   const handleEditOpen = () => {
     setModified(false);
-    setOpen(true);
+    setYAMLOpen(true);
   };
 
   const handleEditClose = () => {
@@ -253,6 +254,35 @@ const EditSchedule: React.FC = () => {
           </Typography>
           <div className={classes.root}>
             <div className={classes.innerContainer}>
+              {yamlOpen ? (
+                <div className={classes.editorWrapper}>
+                  <div className={`${classes.flex} ${classes.additional}`}>
+                    <div className={classes.flex}>
+                      <img
+                        style={{ width: '2rem' }}
+                        src="/icons/terminal.svg"
+                        alt="Terminal Icon"
+                      />
+                      <Typography className={classes.name}>
+                        {fetchWorkflowNameFromManifest(manifest)}.yaml
+                      </Typography>
+                    </div>
+
+                    <ButtonOutlined
+                      onClick={() => setYAMLOpen(false)}
+                      className={classes.editorCloseBtn}
+                    >
+                      x
+                    </ButtonOutlined>
+                  </div>
+                  <YamlEditor
+                    content={manifest}
+                    filename={workflow.name}
+                    readOnly
+                  />
+                </div>
+              ) : (
+                <>
                   <Typography className={classes.sumText}>
                     {t('createWorkflow.verifyCommit.summary.header')}
                   </Typography>
@@ -261,7 +291,10 @@ const EditSchedule: React.FC = () => {
                     <div className={classes.summaryDiv}>
                       <div className={classes.innerSumDiv}>
                         <Typography className={classes.col1}>
-                      {t('createWorkflow.verifyCommit.summary.workflowName')}:
+                          {t(
+                            'createWorkflow.verifyCommit.summary.workflowName'
+                          )}
+                          :
                         </Typography>
                       </div>
                       <div className={classes.col2} data-cy="WorkflowName">
@@ -274,7 +307,8 @@ const EditSchedule: React.FC = () => {
                     <div className={classes.summaryDiv}>
                       <div className={classes.innerSumDiv}>
                         <Typography className={classes.col1}>
-                      {t('createWorkflow.verifyCommit.summary.clustername')}:
+                          {t('createWorkflow.verifyCommit.summary.clustername')}
+                          :
                         </Typography>
                       </div>
                       <Typography className={classes.schCol2}>
@@ -301,10 +335,14 @@ const EditSchedule: React.FC = () => {
                       <div className={classes.schCol2}>
                         {cronSyntax === '' ? (
                           <Typography>
-                        {t('createWorkflow.verifyCommit.summary.schedulingNow')}
+                            {t(
+                              'createWorkflow.verifyCommit.summary.schedulingNow'
+                            )}
                           </Typography>
                         ) : (
-                      <Typography>{cronstrue.toString(cronSyntax)}</Typography>
+                          <Typography>
+                            {cronstrue.toString(cronSyntax)}
+                          </Typography>
                         )}
 
                         <ButtonOutlined
@@ -318,7 +356,10 @@ const EditSchedule: React.FC = () => {
                             })
                           }
                         >
-                      <EditIcon className={classes.editIcon} data-cy="edit" />
+                          <EditIcon
+                            className={classes.editIcon}
+                            data-cy="edit"
+                          />
                           {t('editSchedule.edit')}
                         </ButtonOutlined>
                       </div>
@@ -326,7 +367,9 @@ const EditSchedule: React.FC = () => {
                     <div className={classes.summaryDiv}>
                       <div className={classes.innerSumDiv}>
                         <Typography className={classes.col1}>
-                      {t('createWorkflow.verifyCommit.summary.adjustedWeights')}
+                          {t(
+                            'createWorkflow.verifyCommit.summary.adjustedWeights'
+                          )}
                           :
                         </Typography>
                       </div>
@@ -383,6 +426,8 @@ const EditSchedule: React.FC = () => {
                       </div>
                     </div>
                   </div>
+                </>
+              )}
             </div>
           </div>
           {/* Cancel and Save Button */}
@@ -397,7 +442,10 @@ const EditSchedule: React.FC = () => {
             >
               {t('editSchedule.cancel')}
             </ButtonOutlined>
-            <ButtonFilled onClick={() => handleNext()}>
+            <ButtonFilled
+              data-cy="SaveEditScheduleButton"
+              onClick={() => handleNext()}
+            >
               {t('editSchedule.save')}
             </ButtonFilled>
           </div>

litmus-portal/frontend/src/pages/EditSchedule/styles.ts

@@ -227,4 +227,33 @@ export const useStyles = makeStyles((theme: Theme) => ({
     fontWeight: 'bold',
     margin: theme.spacing(2, 0),
   },
+
+  // Editor
+  editorWrapper: {
+    marginBottom: theme.spacing(-4),
+  },
+  flex: {
+    display: 'flex',
+  },
+  additional: {
+    width: '95%',
+    margin: '0rem auto',
+    justifyContent: 'space-between',
+  },
+  name: {
+    margin: theme.spacing(1, 0, 2, 2),
+    fontWeight: 'bold',
+  },
+  editorTopBtn: {
+    padding: '0.4rem',
+    fontSize: '0.8rem',
+  },
+  editorCloseBtn: {
+    width: '0.5rem',
+    borderColor: theme.palette.disabledBackground,
+    color: theme.palette.text.disabled,
+    minWidth: '2rem',
+    padding: '0.2rem',
+    fontSize: '1rem',
+  },
 }));

litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx

@@ -204,7 +204,10 @@ const WorkflowDetails: React.FC = () => {
               </Tabs>
             </AppBar>
             <TabPanel value={workflowDetailsTabValue} index={0}>
-              <div className={classes.graphView}>
+              <div
+                className={classes.graphView}
+                data-cy="dagreGraphWorkflowLevel"
+              >
                 {/* Argo Workflow DAG Graph */}
                 <ArgoWorkflow
                   nodes={

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

@@ -471,6 +471,7 @@ const ScheduleWorkflow = forwardRef((_, ref) => {
                   <div className={classes.innerRecurring}>
                     <FormControl component="fieldset">
                       <RadioGroup
+                        data-cy="RecurringSchedule"
                         aria-label="instanceDef"
                         name="instanceDef"
                         value={valueDef}

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

@@ -795,6 +795,7 @@ const TuneWorkflow = forwardRef((_, ref) => {
             {/* Edit Button */}
             {manifest !== '' && (
               <ButtonOutlined
+                data-cy="EditSequenceButton"
                 disabled={isVisualizationComplete}
                 onClick={() => setEditSequence(true)}
               >

litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/styles.ts

@@ -82,7 +82,6 @@ const useStyles = makeStyles((theme) => ({
 
   // Table
   table: {
-    minWidth: '40rem',
     minHeight: '23rem',
   },
   revertChaos: {

litmus-portal/frontend/src/views/WorkflowDetails/LogsSwitcher/index.tsx

@@ -159,7 +159,7 @@ const LogsSwitcher: React.FC<LogsSwitcherProps> = ({
     try {
       const podLogs = JSON.parse(logs);
       return (
-        <div>
+        <div data-cy="LogsWindow">
           <div>
             {workflow !== undefined &&
             JSON.parse(workflow?.execution_data).nodes[pod_name].type ===
@@ -245,7 +245,12 @@ const LogsSwitcher: React.FC<LogsSwitcherProps> = ({
         <TabPanel value={selectedTab} index={1} style={{ height: '100%' }}>
           <div className={classes.logs}>
             <div style={{ whiteSpace: 'pre-wrap' }}>
-              <Typography className={classes.text}>{chaosResult}</Typography>
+              <Typography
+                data-cy="ChaosResultTypography"
+                className={classes.text}
+              >
+                {chaosResult}
+              </Typography>
             </div>
           </div>
         </TabPanel>