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,6 +248,7 @@ const TuneCustomWorkflow: React.FC<VerifyCommitProps> = ({ gotoStep }) => {
             <Typography className={classes.appInfoHeader}>
               {t('customWorkflow.tuneExperiment.appInfo')}
             </Typography>
+            {YAML.parse(yaml).spec.appinfo.appns ? (
               <div className={classes.appInfoDiv}>
                 <Typography className={classes.appInfoText}>appns:</Typography>
                 <div className={classes.inputField}>
@@ -268,8 +269,12 @@ const TuneCustomWorkflow: React.FC<VerifyCommitProps> = ({ gotoStep }) => {
                   />
                 </div>
               </div>
+            ) : null}
+            {YAML.parse(yaml).spec.appinfo.applabel ? (
               <div className={classes.appInfoDiv}>
-              <Typography className={classes.appInfoText}>applabel:</Typography>
+                <Typography className={classes.appInfoText}>
+                  applabel:
+                </Typography>
                 <div className={classes.inputField}>
                   <InputField
                     label="applabel"
@@ -288,8 +293,12 @@ const TuneCustomWorkflow: React.FC<VerifyCommitProps> = ({ gotoStep }) => {
                   />
                 </div>
               </div>
+            ) : null}
+            {YAML.parse(yaml).spec.appinfo.appkind ? (
               <div className={classes.appKind}>
-              <Typography className={classes.appInfoText}>appkind:</Typography>
+                <Typography className={classes.appInfoText}>
+                  appkind:
+                </Typography>
                 <div className={classes.inputField}>
                   <InputField
                     label="appkind"
@@ -308,6 +317,8 @@ const TuneCustomWorkflow: React.FC<VerifyCommitProps> = ({ gotoStep }) => {
                   />
                 </div>
               </div>
+            ) : null}
+            {YAML.parse(yaml).spec.annotationCheck ? (
               <div className={classes.appKind}>
                 <Typography className={classes.appInfoText}>
                   annotationCheck:
@@ -325,6 +336,7 @@ const TuneCustomWorkflow: React.FC<VerifyCommitProps> = ({ gotoStep }) => {
                   />
                 </div>
               </div>
+            ) : null}
             <hr className={classes.horizontalLine} />
             <Typography className={classes.envHeader}>
               {t('customWorkflow.tuneExperiment.envText')}