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,136 +254,180 @@ const EditSchedule: React.FC = () => {
           </Typography>
           <div className={classes.root}>
             <div className={classes.innerContainer}>
-              <Typography className={classes.sumText}>
+              {yamlOpen ? (
-                {t('createWorkflow.verifyCommit.summary.header')}
+                <div className={classes.editorWrapper}>
-              </Typography>
+                  <div className={`${classes.flex} ${classes.additional}`}>
-
+                    <div className={classes.flex}>
-              <div className={classes.outerSum}>
+                      <img
-                <div className={classes.summaryDiv}>
+                        style={{ width: '2rem' }}
-                  <div className={classes.innerSumDiv}>
+                        src="/icons/terminal.svg"
-                    <Typography className={classes.col1}>
+                        alt="Terminal Icon"
-                      {t('createWorkflow.verifyCommit.summary.workflowName')}:
+                      />
-                    </Typography>
+                      <Typography className={classes.name}>
-                  </div>
+                        {fetchWorkflowNameFromManifest(manifest)}.yaml
-                  <div className={classes.col2} data-cy="WorkflowName">
-                    <Typography>
-                      {fetchWorkflowNameFromManifest(manifest)}
-                    </Typography>
-                  </div>
-                </div>
-
-                <div className={classes.summaryDiv}>
-                  <div className={classes.innerSumDiv}>
-                    <Typography className={classes.col1}>
-                      {t('createWorkflow.verifyCommit.summary.clustername')}:
-                    </Typography>
-                  </div>
-                  <Typography className={classes.schCol2}>
-                    {clustername}
-                  </Typography>
-                </div>
-
-                <div className={classes.summaryDiv}>
-                  <div className={classes.innerSumDiv}>
-                    <Typography className={classes.col1}>
-                      {t('createWorkflow.verifyCommit.summary.desc')}:
-                    </Typography>
-                  </div>
-                  <div className={classes.col2}>
-                    <Typography>{workflow.description}</Typography>
-                  </div>
-                </div>
-                <div className={classes.summaryDiv}>
-                  <div className={classes.innerSumDiv}>
-                    <Typography className={classes.col1}>
-                      {t('createWorkflow.verifyCommit.summary.schedule')}:
-                    </Typography>
-                  </div>
-                  <div className={classes.schCol2}>
-                    {cronSyntax === '' ? (
-                      <Typography>
-                        {t('createWorkflow.verifyCommit.summary.schedulingNow')}
                       </Typography>
-                    ) : (
+                    </div>
-                      <Typography>{cronstrue.toString(cronSyntax)}</Typography>
-                    )}
 
                     <ButtonOutlined
-                      className={classes.editButton}
+                      onClick={() => setYAMLOpen(false)}
-                      onClick={() =>
+                      className={classes.editorCloseBtn}
-                        history.push({
-                          pathname: `/workflows/schedule/${projectID}/${fetchWorkflowNameFromManifest(
-                            manifest
-                          )}/set`,
-                          search: `?projectID=${projectID}&projectRole=${userRole}`,
-                        })
-                      }
                     >
-                      <EditIcon className={classes.editIcon} data-cy="edit" />
+                      x
-                      {t('editSchedule.edit')}
                     </ButtonOutlined>
                   </div>
+                  <YamlEditor
+                    content={manifest}
+                    filename={workflow.name}
+                    readOnly
+                  />
                 </div>
-                <div className={classes.summaryDiv}>
+              ) : (
-                  <div className={classes.innerSumDiv}>
+                <>
-                    <Typography className={classes.col1}>
+                  <Typography className={classes.sumText}>
-                      {t('createWorkflow.verifyCommit.summary.adjustedWeights')}
+                    {t('createWorkflow.verifyCommit.summary.header')}
-                      :
+                  </Typography>
-                    </Typography>
+
-                  </div>
+                  <div className={classes.outerSum}>
-                  {weights.length === 0 ? (
+                    <div className={classes.summaryDiv}>
-                    <div>
+                      <div className={classes.innerSumDiv}>
-                      <Typography className={classes.col2}>
+                        <Typography className={classes.col1}>
-                        {t('createWorkflow.verifyCommit.error')}
+                          {t(
-                      </Typography>
+                            'createWorkflow.verifyCommit.summary.workflowName'
-                    </div>
+                          )}
-                  ) : (
+                          :
-                    <div className={classes.adjWeights}>
+                        </Typography>
-                      <div className={classes.progress}>
+                      </div>
-                        {weights.map((Test) => (
+                      <div className={classes.col2} data-cy="WorkflowName">
-                          <AdjustedWeights
+                        <Typography>
-                            key={Test.weight}
+                          {fetchWorkflowNameFromManifest(manifest)}
-                            testName={`${Test.experimentName} ${t(
+                        </Typography>
-                              'createWorkflow.verifyCommit.test'
-                            )}`}
-                            testValue={Test.weight}
-                            spacing={false}
-                            icon={false}
-                          />
-                        ))}
                       </div>
                     </div>
-                  )}
+
-                </div>
+                    <div className={classes.summaryDiv}>
-                <div className={classes.summaryDiv}>
+                      <div className={classes.innerSumDiv}>
-                  <div className={classes.innerSumDiv}>
+                        <Typography className={classes.col1}>
-                    <Typography className={classes.col1}>
+                          {t('createWorkflow.verifyCommit.summary.clustername')}
-                      {t('createWorkflow.verifyCommit.YAML')}
+                          :
-                    </Typography>
+                        </Typography>
-                  </div>
+                      </div>
-                  <div className={classes.yamlFlex}>
+                      <Typography className={classes.schCol2}>
-                    {weights.length === 0 ? (
+                        {clustername}
-                      <Typography className={classes.spacingHorizontal}>
-                        {t('createWorkflow.verifyCommit.errYaml')}
                       </Typography>
-                    ) : (
+                    </div>
-                      <Typography>
+
-                        <b>{yamlStatus}</b>
+                    <div className={classes.summaryDiv}>
-                        <span className={classes.spacingHorizontal}>
+                      <div className={classes.innerSumDiv}>
-                          {t('createWorkflow.verifyCommit.youCanMoveOn')}
+                        <Typography className={classes.col1}>
-                        </span>
+                          {t('createWorkflow.verifyCommit.summary.desc')}:
-                      </Typography>
+                        </Typography>
-                    )}
+                      </div>
-                    <br />
+                      <div className={classes.col2}>
-                    <ButtonFilled
+                        <Typography>{workflow.description}</Typography>
-                      className={classes.verifyYAMLButton}
+                      </div>
-                      onClick={handleEditOpen}
+                    </div>
-                    >
+                    <div className={classes.summaryDiv}>
-                      {t('createWorkflow.verifyCommit.button.viewYaml')}
+                      <div className={classes.innerSumDiv}>
-                    </ButtonFilled>
+                        <Typography className={classes.col1}>
+                          {t('createWorkflow.verifyCommit.summary.schedule')}:
+                        </Typography>
+                      </div>
+                      <div className={classes.schCol2}>
+                        {cronSyntax === '' ? (
+                          <Typography>
+                            {t(
+                              'createWorkflow.verifyCommit.summary.schedulingNow'
+                            )}
+                          </Typography>
+                        ) : (
+                          <Typography>
+                            {cronstrue.toString(cronSyntax)}
+                          </Typography>
+                        )}
+
+                        <ButtonOutlined
+                          className={classes.editButton}
+                          onClick={() =>
+                            history.push({
+                              pathname: `/workflows/schedule/${projectID}/${fetchWorkflowNameFromManifest(
+                                manifest
+                              )}/set`,
+                              search: `?projectID=${projectID}&projectRole=${userRole}`,
+                            })
+                          }
+                        >
+                          <EditIcon
+                            className={classes.editIcon}
+                            data-cy="edit"
+                          />
+                          {t('editSchedule.edit')}
+                        </ButtonOutlined>
+                      </div>
+                    </div>
+                    <div className={classes.summaryDiv}>
+                      <div className={classes.innerSumDiv}>
+                        <Typography className={classes.col1}>
+                          {t(
+                            'createWorkflow.verifyCommit.summary.adjustedWeights'
+                          )}
+                          :
+                        </Typography>
+                      </div>
+                      {weights.length === 0 ? (
+                        <div>
+                          <Typography className={classes.col2}>
+                            {t('createWorkflow.verifyCommit.error')}
+                          </Typography>
+                        </div>
+                      ) : (
+                        <div className={classes.adjWeights}>
+                          <div className={classes.progress}>
+                            {weights.map((Test) => (
+                              <AdjustedWeights
+                                key={Test.weight}
+                                testName={`${Test.experimentName} ${t(
+                                  'createWorkflow.verifyCommit.test'
+                                )}`}
+                                testValue={Test.weight}
+                                spacing={false}
+                                icon={false}
+                              />
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                    <div className={classes.summaryDiv}>
+                      <div className={classes.innerSumDiv}>
+                        <Typography className={classes.col1}>
+                          {t('createWorkflow.verifyCommit.YAML')}
+                        </Typography>
+                      </div>
+                      <div className={classes.yamlFlex}>
+                        {weights.length === 0 ? (
+                          <Typography className={classes.spacingHorizontal}>
+                            {t('createWorkflow.verifyCommit.errYaml')}
+                          </Typography>
+                        ) : (
+                          <Typography>
+                            <b>{yamlStatus}</b>
+                            <span className={classes.spacingHorizontal}>
+                              {t('createWorkflow.verifyCommit.youCanMoveOn')}
+                            </span>
+                          </Typography>
+                        )}
+                        <br />
+                        <ButtonFilled
+                          className={classes.verifyYAMLButton}
+                          onClick={handleEditOpen}
+                        >
+                          {t('createWorkflow.verifyCommit.button.viewYaml')}
+                        </ButtonFilled>
+                      </div>
+                    </div>
                   </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>