Fixed Accordion width problem and Edit Sequence Button render for No Visualizaed Graphs and minor css fixes (#2937)

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

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

@@ -29,6 +29,7 @@ import { cronWorkflow, workflowOnce } from '../../utils/workflowTemplate';
 import { fetchWorkflowNameFromManifest } from '../../utils/yamlUtils';
 import SetTime from '../../views/CreateWorkflow/ScheduleWorkflow/SetTime';
 import useStyles from '../../views/CreateWorkflow/ScheduleWorkflow/styles';
+import { externalStyles } from './styles';
 
 interface ScheduleSyntax {
   minute: string | undefined;
@@ -180,6 +181,7 @@ const ScheduleWorkflow = () => {
   }, [cronValue]);
 
   const classes = useStyles();
+  const externalClass = externalStyles();
   const { t } = useTranslation();
 
   // Sets individual minutes
@@ -390,7 +392,7 @@ const ScheduleWorkflow = () => {
       <Typography className={classes.title}>
         {t('editSchedule.title')}
       </Typography>
-      <div className={classes.root}>
+      <div className={externalClass.root}>
         <div className={classes.innerContainer}>
           <br />
           {/* Upper segment */}

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

@@ -35,7 +35,7 @@ import { history } from '../../redux/configureStore';
 import { RootState } from '../../redux/reducers';
 import { getProjectID, getProjectRole } from '../../utils/getSearchParams';
 import { fetchWorkflowNameFromManifest } from '../../utils/yamlUtils';
-import useStyles from './styles';
+import { useStyles } from './styles';
 
 interface URLParams {
   workflowName: string;

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

@@ -1,6 +1,20 @@
 import { makeStyles, Theme } from '@material-ui/core/styles';
 
-const useStyles = makeStyles((theme: Theme) => ({
+export const externalStyles = makeStyles((theme: Theme) => ({
+  root: {
+    background: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    padding: theme.spacing(0, 2),
+    margin: '0 auto',
+    width: '100%',
+    flexDirection: 'column',
+    [theme.breakpoints.up('lg')]: {
+      width: '99%',
+    },
+  },
+}));
+
+export const useStyles = makeStyles((theme: Theme) => ({
   horizontalLine: {
     background: theme.palette.border.main,
   },
@@ -214,4 +228,3 @@ const useStyles = makeStyles((theme: Theme) => ({
     margin: theme.spacing(2, 0),
   },
 }));
-export default useStyles;

litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/ChooseWorkflowFromExisting.tsx

@@ -153,6 +153,7 @@ const ChooseWorkflowFromExisting: React.FC<ChooseWorkflowFromExistingProps> = ({
                               variables: { data: templateData.template_id },
                             });
                           }}
+                          className={classes.deleteButton}
                         >
                           <img
                             alt="delete"

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

@@ -57,6 +57,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   accordion: {
     border: 'none',
     boxShadow: 'none',
+    width: '100%',
     '& .MuiAccordionSummary-root': {
       marginLeft: '-1rem',
       border: 'none',
@@ -117,31 +118,36 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
 
     '& #left-div': {
-      width: '15rem',
+      width: '15%',
       margin: theme.spacing(2),
     },
 
     '& #right-div': {
-      width: '30rem',
+      width: '30%',
       margin: theme.spacing(0, 4, 0, 4),
     },
     '& #last-div': {
-      width: '15rem',
-      margin: theme.spacing(0, 4, 0, 4),
+      width: '45%',
+      display: 'flex',
+      margin: theme.spacing(0, 2, 0, 2),
       position: 'relative',
     },
   },
   lastDivChildren: {
-    width: '60%',
-    position: 'absolute',
+    width: '10rem',
+    // position: 'absolute',
     display: 'flex',
-    justifyContent: 'space-evenly',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    top: 14,
+    // top: 14,
   },
   templateIconBg: {
     height: 70,
-    marginLeft: theme.spacing(15),
+    marginLeft: '5%',
+  },
+  deleteButton: {
+    position: 'absolute',
+    right: 20,
   },
   experimentIcon: {
     width: '3rem',

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

@@ -24,11 +24,13 @@ interface StepType {
 interface WorkflowPreviewProps {
   isCustomWorkflow: boolean;
   SequenceSteps?: StepType;
+  editSequenceLoader: (state: boolean) => void;
 }
 
 const WorkflowPreview: React.FC<WorkflowPreviewProps> = ({
   isCustomWorkflow,
   SequenceSteps,
+  editSequenceLoader,
 }) => {
   let steps: Steps[][] = [];
   const updatedSteps: Steps[][] = [];
@@ -208,6 +210,12 @@ const WorkflowPreview: React.FC<WorkflowPreviewProps> = ({
     });
   }, [manifest, SequenceSteps]);
 
+  if (graphData.nodes.length > 0) {
+    editSequenceLoader(false);
+  } else {
+    editSequenceLoader(true);
+  }
+
   return graphData.nodes.length ? (
     <DagreGraph
       className={classes.dagreGraph}

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

@@ -109,6 +109,8 @@ const TuneWorkflow = forwardRef((_, ref) => {
   const [isEditorSaveAlertOpen, setIsEditorSaveAlertOpen] = useState(false);
   const [yamlValid, setYamlValid] = useState(true);
   const [editSequence, setEditSequence] = useState(false);
+  const [isVisualizationComplete, setIsVisualizationComplete] =
+    useState<boolean>(false);
   const [steps, setSteps] = useState<StepType>({});
   const [workflow, setWorkflow] = useState<WorkflowProps>({
     name: '',
@@ -209,6 +211,10 @@ const TuneWorkflow = forwardRef((_, ref) => {
       );
   }, []);
 
+  const handleEditSequenceRender = (state: boolean) => {
+    setIsVisualizationComplete(state);
+  };
+
   /**
    * Default Manifest Template
    */
@@ -782,7 +788,10 @@ const TuneWorkflow = forwardRef((_, ref) => {
           <div className={classes.experimentWrapper}>
             {/* Edit Button */}
             {manifest !== '' && (
-              <ButtonOutlined onClick={() => setEditSequence(true)}>
+              <ButtonOutlined
+                disabled={isVisualizationComplete}
+                onClick={() => setEditSequence(true)}
+              >
                 <img src="./icons/editsequence.svg" alt="Edit Sequence" />{' '}
                 <Width width="0.5rem" />
                 {t('createWorkflow.tuneWorkflow.editSequence')}
@@ -817,6 +826,7 @@ const TuneWorkflow = forwardRef((_, ref) => {
                 <Row>
                   <Width width="40%">
                     <WorkflowPreview
+                      editSequenceLoader={handleEditSequenceRender}
                       SequenceSteps={steps}
                       isCustomWorkflow={isCustomWorkflow}
                     />
@@ -838,7 +848,10 @@ const TuneWorkflow = forwardRef((_, ref) => {
             <Row>
               {/* Argo Workflow Graph */}
               <Width width="30%">
-                <WorkflowPreview isCustomWorkflow={isCustomWorkflow} />
+                <WorkflowPreview
+                  editSequenceLoader={handleEditSequenceRender}
+                  isCustomWorkflow={isCustomWorkflow}
+                />
               </Width>
               {/* Workflow Table */}
               <Width width="70%">