⚡ Fixed Predefined Workflow Name population issue + Cleansed Verify &…

… Commit Page 🎨 (#2782) Signed-off-by: Sayan Mondal <[email protected]>
litmuschaos · May 12, 2021 · 6c20e5f · 6c20e5f
1 parent b961fc0
commit 6c20e5f
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 169 deletions.
diff --git a/litmus-portal/frontend/src/pages/EditSchedule/index.tsx b/litmus-portal/frontend/src/pages/EditSchedule/index.tsx
@@ -238,7 +238,7 @@ const EditSchedule: React.FC = () => {
 
   return (
     <Scaffold>
-      {loading ? (
+      {loading || !manifest ? (
         <Loader />
       ) : (
         <>

diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx
@@ -12,8 +12,8 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import YAML from 'yaml';
 import { v4 as uuidv4 } from 'uuid';
+import YAML from 'yaml';
 import YamlEditor from '../../../components/YamlEditor/Editor';
 import Row from '../../../containers/layouts/Row';
 import Width from '../../../containers/layouts/Width';
@@ -458,7 +458,7 @@ const TuneWorkflow = forwardRef((_, ref) => {
     workflowAction.setWorkflowManifest({
       manifest: YAML.stringify(parsedManifest),
     });
-  }, [workflow.name]);
+  }, [manifest]);
 
   const onModalClose = () => {
     setAddExpModal(false);

diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx
@@ -325,14 +325,13 @@ const VerifyCommit = forwardRef(
               {t('createWorkflow.verifyCommit.summary.header')}
             </Typography>
 
-            <div className={classes.outerSum}>
-              <div className={classes.summaryDiv}>
-                <div className={classes.innerSumDiv}>
-                  <Typography className={classes.col1}>
-                    {t('createWorkflow.verifyCommit.summary.workflowName')}:
-                  </Typography>
-                </div>
-                <div className={classes.col2} data-cy="WorkflowName">
+            <div className={classes.summaryWrapper}>
+              <div className={classes.itemWrapper}>
+                <Typography className={classes.left}>
+                  {t('createWorkflow.verifyCommit.summary.workflowName')}:
+                </Typography>
+
+                <div className={classes.right} data-cy="WorkflowName">
                   <EditableText
                     defaultValue={fetchWorkflowNameFromManifest(manifest)}
                     id="name"
@@ -342,24 +341,20 @@ const VerifyCommit = forwardRef(
                 </div>
               </div>
 
-              <div className={classes.summaryDiv}>
-                <div className={classes.innerSumDiv}>
-                  <Typography className={classes.col1}>
-                    {t('createWorkflow.verifyCommit.summary.clustername')}:
-                  </Typography>
-                </div>
-                <Typography className={classes.clusterName}>
-                  {clustername}
+              <div className={classes.itemWrapper}>
+                <Typography className={classes.left}>
+                  {t('createWorkflow.verifyCommit.summary.clustername')}:
                 </Typography>
+
+                <Typography className={classes.right}>{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}>
+              <div className={classes.itemWrapper}>
+                <Typography className={classes.left}>
+                  {t('createWorkflow.verifyCommit.summary.desc')}:
+                </Typography>
+
+                <div className={classes.right}>
                   {workflow.description !== '' ? (
                     <EditableText
                       defaultValue={workflow.description}
@@ -374,26 +369,25 @@ const VerifyCommit = forwardRef(
                 </div>
               </div>
 
-              <div className={classes.summaryDiv}>
-                <div className={classes.innerSumDiv}>
-                  <div className={classes.subjectDiv}>
-                    <Typography className={classes.subject}>
-                      {t('createWorkflow.verifyCommit.summary.subject')}:
-                    </Typography>
-                    <Tooltip
-                      title={
-                        <Typography className={classes.subjectDesc}>
-                          {t('createWorkflow.verifyCommit.summary.subjectDesc')}
-                        </Typography>
-                      }
-                    >
-                      <IconButton aria-label="info">
-                        <InfoIcon />
-                      </IconButton>
-                    </Tooltip>
-                  </div>
+              <div className={classes.itemWrapper}>
+                <div className={classes.leftFlex}>
+                  <Typography className={classes.verticalAlign}>
+                    {t('createWorkflow.verifyCommit.summary.subject')}:
+                  </Typography>
+                  <Tooltip
+                    title={
+                      <Typography className={classes.subjectDesc}>
+                        {t('createWorkflow.verifyCommit.summary.subjectDesc')}
+                      </Typography>
+                    }
+                  >
+                    <IconButton aria-label="info">
+                      <InfoIcon />
+                    </IconButton>
+                  </Tooltip>
                 </div>
-                <div className={classes.col2}>
+
+                <div className={classes.right}>
                   {subject !== '' ? (
                     <EditableText
                       defaultValue={subject}
@@ -408,44 +402,41 @@ const VerifyCommit = forwardRef(
                 </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}>
+              <div className={classes.itemWrapper}>
+                <Typography className={classes.left}>
+                  {t('createWorkflow.verifyCommit.summary.schedule')}:
+                </Typography>
+
+                <div className={classes.right}>
                   {cronSyntax === '' ? (
-                    <Typography className={classes.schedule}>
+                    <Typography>
                       {t('createWorkflow.verifyCommit.summary.schedulingNow')}
                     </Typography>
                   ) : (
-                    <Typography className={classes.schedule}>
-                      {cronstrue.toString(cronSyntax)}
-                    </Typography>
+                    <Typography>{cronstrue.toString(cronSyntax)}</Typography>
                   )}
 
-                  <div className={classes.editButton}>
-                    <IconButton onClick={() => handleGoToStep(5)}>
-                      <EditIcon className={classes.editIcon} data-cy="edit" />
-                    </IconButton>
-                  </div>
+                  <IconButton
+                    className={classes.iconBtn}
+                    onClick={() => handleGoToStep(5)}
+                  >
+                    <EditIcon className={classes.editIcon} data-cy="edit" />
+                  </IconButton>
                 </div>
               </div>
-              <div className={classes.summaryDiv}>
-                <div className={classes.innerSumDiv}>
-                  <Typography className={classes.col1}>
-                    {t('createWorkflow.verifyCommit.summary.adjustedWeights')}:
-                  </Typography>
-                </div>
+
+              <div className={classes.itemWrapper}>
+                <Typography className={classes.left}>
+                  {t('createWorkflow.verifyCommit.summary.adjustedWeights')}:
+                </Typography>
                 {weights.length === 0 ? (
-                  <div>
-                    <Typography className={classes.errorText}>
-                      {t('createWorkflow.verifyCommit.error')}
-                    </Typography>
-                  </div>
+                  <Typography
+                    className={`${classes.errorText} ${classes.right}`}
+                  >
+                    {t('createWorkflow.verifyCommit.error')}
+                  </Typography>
                 ) : (
-                  <div className={classes.adjWeights}>
+                  <div className={classes.right}>
                     <div className={classes.progress}>
                       {WorkflowTestData.map((Test) => (
                         <AdjustedWeights
@@ -468,15 +459,14 @@ const VerifyCommit = forwardRef(
                   </div>
                 )}
               </div>
-              <div className={classes.summaryDiv}>
-                <div className={classes.innerSumDiv}>
-                  <Typography className={classes.col1}>
-                    {t('createWorkflow.verifyCommit.YAML')}
-                  </Typography>
-                </div>
-                <div className={classes.yamlFlex}>
+
+              <div className={classes.itemWrapper}>
+                <Typography className={classes.left}>
+                  {t('createWorkflow.verifyCommit.YAML')}
+                </Typography>
+                <div className={classes.rightColumn}>
                   {weights.length === 0 ? (
-                    <Typography className={classes.spacingHorizontal}>
+                    <Typography className={classes.errorText}>
                       {t('createWorkflow.verifyCommit.errYaml')}
                     </Typography>
                   ) : (

diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/styles.ts
@@ -43,25 +43,42 @@ const useStyles = makeStyles((theme: Theme) => ({
     width: '7rem',
     height: '6.31rem',
   },
-  outerSum: {
-    display: 'flex',
-    flexDirection: 'column',
+  summaryWrapper: {
+    padding: theme.spacing(2, 0),
   },
-  summaryDiv: {
+  itemWrapper: {
     display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'baseline',
-    margin: theme.spacing(1, 0),
+    justifyContent: 'space-between',
+    margin: theme.spacing(2, 0),
   },
-  innerSumDiv: {
-    alignContent: 'center',
+  verticalAlign: {
     display: 'table-cell',
     verticalAlign: 'middle',
+    fontSize: '1rem',
+  },
+  left: {
     width: '20%',
-    [theme.breakpoints.up('lg')]: {
-      width: '10%',
-    },
+    display: 'table-cell',
+    verticalAlign: 'middle',
+    color: theme.palette.highlight,
+    fontSize: '1rem',
+  },
+  leftFlex: {
+    display: 'flex',
+    width: '20%',
+    verticalAlign: 'middle',
+    color: theme.palette.highlight,
+    fontSize: '1rem',
+  },
+  right: {
+    width: '75%',
+    display: 'flex',
+  },
+  rightColumn: {
+    width: '75%',
+  },
+  iconBtn: {
+    padding: theme.spacing(0, 1),
   },
   sumText: {
     width: '100%',
@@ -72,13 +89,6 @@ const useStyles = makeStyles((theme: Theme) => ({
       fontSize: '1.4rem',
     },
   },
-  col1: {
-    alignContent: 'center',
-    color: theme.palette.highlight,
-    fontSize: '1rem',
-    paddingTop: theme.spacing(0.5),
-    verticalAlign: 'middle',
-  },
   subject: {
     alignContent: 'center',
     color: theme.palette.highlight,
@@ -89,98 +99,31 @@ const useStyles = makeStyles((theme: Theme) => ({
   subjectDesc: {
     fontSize: '0.75rem',
   },
-  subjectDiv: {
-    display: 'flex',
-  },
-  schedule: {
-    fontSize: '0.85rem',
-    paddingLeft: theme.spacing(2),
-    paddingTop: theme.spacing(0.75),
-  },
-  col2: {
-    color: theme.palette.text.secondary,
-    marginLeft: theme.spacing(5),
-    width: '75%',
-  },
-  schCol2: {
-    marginLeft: theme.spacing(5),
-    display: 'flex',
-    flexDirection: 'row',
-  },
-  clusterName: {
-    fontSize: '0.85rem',
-    marginLeft: theme.spacing(7),
-    paddingTop: theme.spacing(0.5),
-  },
-  editButton: {
-    height: '1rem',
-  },
   editIcon: {
     color: theme.palette.text.primary,
     height: '0.8rem',
   },
-  link: {
-    fontSize: '0.875rem',
-    color: theme.palette.secondary.dark,
-  },
-  adjWeights: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginLeft: theme.spacing(2),
-    width: '80%',
-    [theme.breakpoints.up('lg')]: {
-      width: '90%',
-    },
-  },
-  config: {
-    height: '3rem',
-    fontSize: '0.9375rem',
-    color: theme.palette.text.disabled,
-    width: '30rem',
-    marginTop: theme.spacing(3.75),
-    marginLeft: theme.spacing(30),
-  },
-  typoCol2: {
-    fontSize: '1rem',
-  },
-  textEdit: {
-    marginTop: theme.spacing(7.5),
-  },
-  buttonOutlineText: {
-    padding: theme.spacing(1.5),
-  },
   spacingHorizontal: {
     margin: theme.spacing(0, 1),
   },
   errorText: {
     color: theme.palette.error.main,
     fontWeight: 700,
     fontSize: '1rem',
-    marginLeft: theme.spacing(5),
-  },
-  yamlFlex: {
-    display: 'flex',
-    flexDirection: 'column',
-    marginLeft: theme.spacing(7),
   },
   progress: {
     display: 'flex',
     flexDirection: 'row',
     flexWrap: 'wrap',
     flexGrow: 1,
-    marginLeft: theme.spacing(5),
-  },
-  buttomPad: {
-    paddingBottom: theme.spacing(3.75),
   },
   closeBtn: {
     color: theme.palette.secondary.contrastText,
     marginTop: theme.spacing(-6),
     marginRight: theme.spacing(-2.5),
   },
   verifyYAMLButton: {
-    width: '60%',
+    width: '40%',
   },
 
   // Modal