Added annotation and app info check and fixed the namespace issue in custom workflow creation (#2367)

Signed-off-by: Amit Kumar Das <amitkumar.das@mayadata.io>

litmus-portal/frontend/src/components/WorkflowStepper/index.tsx

@@ -163,6 +163,7 @@ const CustomStepper = () => {
       newParsedYaml.spec.schedule = cronSyntax;
       delete newParsedYaml.metadata.generateName;
       newParsedYaml.metadata.name = workflowData.name;
+      newParsedYaml.metadata.namespace = workflowData.namespace;
       newParsedYaml.spec.workflowSpec = oldParsedYaml.spec;
       const timeZone = {
         timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC',
@@ -186,6 +187,7 @@ const CustomStepper = () => {
       delete newParsedYaml.metadata.generateName;
       newParsedYaml.metadata.name = workflowData.name;
       newParsedYaml.spec = oldParsedYaml.spec.workflowSpec;
+      newParsedYaml.metadata.namespace = workflowData.namespace;
       const NewYaml = YAML.stringify(newParsedYaml);
       workflow.setWorkflowDetails({
         link: NewLink,
@@ -200,6 +202,7 @@ const CustomStepper = () => {
       newParsedYaml.spec.schedule = cronSyntax;
       delete newParsedYaml.metadata.generateName;
       newParsedYaml.metadata.name = workflowData.name;
+      newParsedYaml.metadata.namespace = workflowData.namespace;
       const timeZone = {
         timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC',
       };

litmus-portal/frontend/src/components/YamlEditor/Editor.tsx

@@ -37,6 +37,7 @@ import 'ace-builds/src-min-noconflict/ext-statusbar';
 import 'ace-builds/src-min-noconflict/ext-textarea';
 import 'ace-builds/src-min-noconflict/ext-themelist';
 import 'ace-builds/src-min-noconflict/ext-whitespace';
+import YAML from 'yaml';
 import { AceValidations, parseYamlValidations } from './Validations';
 import useStyles from './styles';
 import useActions from '../../redux/actions';
@@ -123,9 +124,11 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
     }
     setEditorState(stateObject as any);
     setModifiedYaml(value);
+    const yamlData = YAML.parse(value);
     workflow.setWorkflowDetails({
       name: filename,
       link: yamlLink,
+      namespace: yamlData.metadata.namespace,
       yaml: value,
       id,
       description,
@@ -230,6 +233,10 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
       });
     }
     setEditorState(stateObject as any);
+    const yamlData = YAML.parse(content);
+    workflow.setWorkflowDetails({
+      namespace: yamlData.metadata.namespace,
+    });
   }, []);
 
   return (

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

@@ -87,7 +87,7 @@ const ScheduleCustomWorkflow: React.FC<VerifyCommitProps> = ({ gotoStep }) => {
     kind: 'Workflow',
     metadata: {
       name: `${workflowDetails.name}`,
-      namespace: 'litmus',
+      namespace: `${workflowDetails.namespace}`,
     },
     spec: {
       arguments: {

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

@@ -248,83 +248,95 @@ const TuneCustomWorkflow: React.FC<VerifyCommitProps> = ({ gotoStep }) => {
             <Typography className={classes.appInfoHeader}>
               {t('customWorkflow.tuneExperiment.appInfo')}
             </Typography>
-            <div className={classes.appInfoDiv}>
-              <Typography className={classes.appInfoText}>appns:</Typography>
-              <div className={classes.inputField}>
-                <InputField
-                  label="appns"
-                  styles={{
-                    width: '100%',
-                  }}
-                  data-cy="inputWorkflow"
-                  validationError={false}
-                  handleChange={(event) =>
-                    setAppInfo({
-                      ...appInfo,
-                      appns: event.target.value.toLowerCase(),
-                    })
-                  }
-                  value={appInfo.appns}
-                />
+            {YAML.parse(yaml).spec.appinfo.appns ? (
+              <div className={classes.appInfoDiv}>
+                <Typography className={classes.appInfoText}>appns:</Typography>
+                <div className={classes.inputField}>
+                  <InputField
+                    label="appns"
+                    styles={{
+                      width: '100%',
+                    }}
+                    data-cy="inputWorkflow"
+                    validationError={false}
+                    handleChange={(event) =>
+                      setAppInfo({
+                        ...appInfo,
+                        appns: event.target.value.toLowerCase(),
+                      })
+                    }
+                    value={appInfo.appns}
+                  />
+                </div>
               </div>
-            </div>
-            <div className={classes.appInfoDiv}>
-              <Typography className={classes.appInfoText}>applabel:</Typography>
-              <div className={classes.inputField}>
-                <InputField
-                  label="applabel"
-                  styles={{
-                    width: '100%',
-                  }}
-                  data-cy="inputWorkflow"
-                  validationError={false}
-                  handleChange={(event) =>
-                    setAppInfo({
-                      ...appInfo,
-                      applabel: event.target.value.toLowerCase(),
-                    })
-                  }
-                  value={appInfo.applabel}
-                />
+            ) : null}
+            {YAML.parse(yaml).spec.appinfo.applabel ? (
+              <div className={classes.appInfoDiv}>
+                <Typography className={classes.appInfoText}>
+                  applabel:
+                </Typography>
+                <div className={classes.inputField}>
+                  <InputField
+                    label="applabel"
+                    styles={{
+                      width: '100%',
+                    }}
+                    data-cy="inputWorkflow"
+                    validationError={false}
+                    handleChange={(event) =>
+                      setAppInfo({
+                        ...appInfo,
+                        applabel: event.target.value.toLowerCase(),
+                      })
+                    }
+                    value={appInfo.applabel}
+                  />
+                </div>
               </div>
-            </div>
-            <div className={classes.appKind}>
-              <Typography className={classes.appInfoText}>appkind:</Typography>
-              <div className={classes.inputField}>
-                <InputField
-                  label="appkind"
-                  styles={{
-                    width: '100%',
-                  }}
-                  data-cy="inputWorkflow"
-                  validationError={false}
-                  handleChange={(event) =>
-                    setAppInfo({
-                      ...appInfo,
-                      appkind: event.target.value.toLowerCase(),
-                    })
-                  }
-                  value={appInfo.appkind}
-                />
+            ) : null}
+            {YAML.parse(yaml).spec.appinfo.appkind ? (
+              <div className={classes.appKind}>
+                <Typography className={classes.appInfoText}>
+                  appkind:
+                </Typography>
+                <div className={classes.inputField}>
+                  <InputField
+                    label="appkind"
+                    styles={{
+                      width: '100%',
+                    }}
+                    data-cy="inputWorkflow"
+                    validationError={false}
+                    handleChange={(event) =>
+                      setAppInfo({
+                        ...appInfo,
+                        appkind: event.target.value.toLowerCase(),
+                      })
+                    }
+                    value={appInfo.appkind}
+                  />
+                </div>
               </div>
-            </div>
-            <div className={classes.appKind}>
-              <Typography className={classes.appInfoText}>
-                annotationCheck:
-              </Typography>
-              <div className={classes.inputField}>
-                <InputField
-                  label="annotationCheck"
-                  styles={{
-                    width: '100%',
-                  }}
-                  data-cy="inputWorkflow"
-                  validationError={false}
-                  handleChange={(event) => setAnnotation(event.target.value)}
-                  value={annotation}
-                />
+            ) : null}
+            {YAML.parse(yaml).spec.annotationCheck ? (
+              <div className={classes.appKind}>
+                <Typography className={classes.appInfoText}>
+                  annotationCheck:
+                </Typography>
+                <div className={classes.inputField}>
+                  <InputField
+                    label="annotationCheck"
+                    styles={{
+                      width: '100%',
+                    }}
+                    data-cy="inputWorkflow"
+                    validationError={false}
+                    handleChange={(event) => setAnnotation(event.target.value)}
+                    value={annotation}
+                  />
+                </div>
               </div>
-            </div>
+            ) : null}
             <hr className={classes.horizontalLine} />
             <Typography className={classes.envHeader}>
               {t('customWorkflow.tuneExperiment.envText')}