From aa7770bb56a9b33d586059b1ce88c1958ef674bb Mon Sep 17 00:00:00 2001
From: Amit Kumar Das <amit@chaosnative.com>
Date: Thu, 22 Apr 2021 18:14:02 +0530
Subject: [PATCH 1/2] Added validation in probes modal and fixed the type issue
 while probes creation

Signed-off-by: Amit Kumar Das <amit@chaosnative.com>
---
 .../TuneWorkflow/AddProbe/ProbeDetails.tsx    | 22 ++++--
 .../TuneWorkflow/AddProbe/index.tsx           | 72 +++++++++++--------
 .../TuneWorkflowSteps/SteadyState.tsx         | 15 ++--
 .../TuneWorkflowSteps/TargetApplication.tsx   |  1 -
 4 files changed, 69 insertions(+), 41 deletions(-)

diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/AddProbe/ProbeDetails.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/AddProbe/ProbeDetails.tsx
index c244110710d..3ebb4853fc5 100644
--- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/AddProbe/ProbeDetails.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/AddProbe/ProbeDetails.tsx
@@ -37,11 +37,7 @@ const ProbeDetails: React.FC<ProbeDetailsProps> = ({
       | { name?: string | undefined; value: unknown }
     >
   ) => {
-    if (
-      e.target.name === 'url' ||
-      e.target.name === 'insecureSkipVerify' ||
-      e.target.name === 'responseTimeout'
-    ) {
+    if (e.target.name === 'url' || e.target.name === 'responseTimeout') {
       setProbeData({
         ...probeData,
         'httpProbe/inputs': {
@@ -50,6 +46,15 @@ const ProbeDetails: React.FC<ProbeDetailsProps> = ({
         },
       });
     }
+    if (e.target.name === 'insecureSkipVerify') {
+      setProbeData({
+        ...probeData,
+        'httpProbe/inputs': {
+          ...probeData['httpProbe/inputs'],
+          [e.target.name]: e.target.value === 'true',
+        },
+      });
+    }
   };
 
   const handleCmd = (
@@ -150,7 +155,12 @@ const ProbeDetails: React.FC<ProbeDetailsProps> = ({
               {t('createWorkflow.tuneWorkflow.addProbe.inputLabels.insecure')}
             </InputLabel>
             <Select
-              value={probeData['httpProbe/inputs']?.insecureSkipVerify}
+              value={
+                typeof probeData['httpProbe/inputs']?.insecureSkipVerify ===
+                'boolean'
+                  ? probeData['httpProbe/inputs']?.insecureSkipVerify.toString()
+                  : probeData['httpProbe/inputs']?.insecureSkipVerify
+              }
               className={classes.inputSelect}
               variant="outlined"
               onChange={handleHttp}
diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/AddProbe/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/AddProbe/index.tsx
index a1100c3811c..c14066676f5 100644
--- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/AddProbe/index.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/AddProbe/index.tsx
@@ -1,21 +1,27 @@
 import { Modal, ButtonOutlined, ButtonFilled, InputField } from 'litmus-ui';
 import { MenuItem, Select, InputLabel } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import React, { useEffect } from 'react';
+import React from 'react';
 import useStyles from './styles';
 import ProbeDetails from './ProbeDetails';
 
 interface AddProbeProps {
   probesValue: any;
-  setProbesValue: React.Dispatch<any>;
-  addProbe: () => void;
+  addProbe: (probes: any) => void;
   handleClose: () => void;
   open: boolean;
 }
 
+interface RunProperties {
+  probeTimeout: string;
+  retry: string;
+  interval: string;
+  probePollingInterval?: string;
+  initialDelaySeconds?: string;
+}
+
 const AddProbe: React.FC<AddProbeProps> = ({
   probesValue,
-  setProbesValue,
   addProbe,
   handleClose,
   open,
@@ -27,28 +33,26 @@ const AddProbe: React.FC<AddProbeProps> = ({
     probesValue && probesValue.length ? probesValue : []
   );
   const [probeType, setProbeType] = React.useState('httpProbe/inputs');
+  const [runProperties, setRunProperties] = React.useState<RunProperties>({
+    probeTimeout: '',
+    retry: '',
+    interval: '',
+    probePollingInterval: '',
+    initialDelaySeconds: '',
+  });
   const [probeData, setProbeData] = React.useState({
     name: '',
     type: 'httpProbe',
     mode: 'Continuous',
-    runProperties: {
-      probeTimeout: '',
-      retry: '',
-      interval: '',
-      probePollingInterval: '',
-      initialDelaySeconds: '',
-    },
+    runProperties: {},
     'httpProbe/inputs': {},
   });
   const handleRunProps = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
-    setProbeData({
-      ...probeData,
-      runProperties: {
-        ...probeData.runProperties,
-        [e.target.name]: e.target.value,
-      },
+    setRunProperties({
+      ...runProperties,
+      [e.target.name]: parseInt(e.target.value, 10),
     });
   };
 
@@ -76,15 +80,23 @@ const AddProbe: React.FC<AddProbeProps> = ({
   };
 
   const handleAddProbe = () => {
-    allProbes.push(probeData);
+    const properties = runProperties;
+    if (Number.isNaN(parseInt(properties.initialDelaySeconds as string, 10))) {
+      delete properties.initialDelaySeconds;
+    }
+    if (Number.isNaN(parseInt(properties.probePollingInterval as string, 10))) {
+      delete properties.probePollingInterval;
+    }
+    allProbes.push({
+      ...probeData,
+      runProperties: {
+        ...properties,
+      },
+    });
     setAllProbes(allProbes);
-    addProbe();
+    addProbe(allProbes);
   };
 
-  useEffect(() => {
-    setProbesValue(allProbes);
-  }, [allProbes]);
-
   return (
     <Modal
       open={open}
@@ -117,6 +129,7 @@ const AddProbe: React.FC<AddProbeProps> = ({
               id="name"
               name="name"
               type="text"
+              required
               value={probeData.name}
               onChange={(e) =>
                 setProbeData({ ...probeData, name: e.target.value })
@@ -203,8 +216,9 @@ const AddProbe: React.FC<AddProbeProps> = ({
                 width="50%"
                 id="timeout"
                 name="probeTimeout"
+                required
                 type="number"
-                value={probeData.runProperties.probeTimeout}
+                value={runProperties.probeTimeout}
                 onChange={handleRunProps}
               />
             </div>
@@ -217,8 +231,9 @@ const AddProbe: React.FC<AddProbeProps> = ({
                 width="50%"
                 id="retry"
                 name="retry"
+                required
                 type="number"
-                value={probeData.runProperties.retry}
+                value={runProperties.retry}
                 onChange={handleRunProps}
               />
             </div>
@@ -232,9 +247,10 @@ const AddProbe: React.FC<AddProbeProps> = ({
                 variant="primary"
                 width="50%"
                 id="interval"
+                required
                 name="interval"
                 type="number"
-                value={probeData.runProperties.interval}
+                value={runProperties.interval}
                 onChange={handleRunProps}
               />
             </div>
@@ -248,7 +264,7 @@ const AddProbe: React.FC<AddProbeProps> = ({
                 id="polling"
                 name="probePollingInterval"
                 type="number"
-                value={probeData.runProperties.probePollingInterval}
+                value={runProperties.probePollingInterval}
                 onChange={handleRunProps}
               />
             </div>
@@ -263,7 +279,7 @@ const AddProbe: React.FC<AddProbeProps> = ({
               id="initial-delay"
               name="initialDelaySeconds"
               type="number"
-              value={probeData.runProperties.initialDelaySeconds}
+              value={runProperties.initialDelaySeconds}
               onChange={handleRunProps}
             />
           </div>
diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/SteadyState.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/SteadyState.tsx
index d45ac081167..115868ec784 100644
--- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/SteadyState.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/SteadyState.tsx
@@ -101,11 +101,15 @@ const SteadyState: React.FC<SteadyStateProps> = ({
     handleMainYAMLChange();
   };
   // Function to handle add probes operation
-  const handleAddProbe = () => {
-    setProbesData(probesData);
+  const handleAddProbe = (probes: any) => {
+    setProbesData(probes);
+    setAddProbe(false);
+  };
+
+  const handleStepperClose = () => {
     chaosEngine.spec.experiments[0].spec.probe = probesData;
     handleMainYAMLChange();
-    setAddProbe(false);
+    return closeStepper();
   };
 
   return (
@@ -239,8 +243,7 @@ const SteadyState: React.FC<SteadyStateProps> = ({
       </ButtonOutlined>
       <AddProbe
         probesValue={probesData}
-        setProbesValue={setProbesData}
-        addProbe={handleAddProbe}
+        addProbe={(probes: any) => handleAddProbe(probes)}
         handleClose={handleClose}
         open={addProbe}
       />
@@ -254,7 +257,7 @@ const SteadyState: React.FC<SteadyStateProps> = ({
         <Button
           variant="contained"
           color="primary"
-          onClick={() => closeStepper()}
+          onClick={() => handleStepperClose()}
           className={classes.button}
         >
           Finish
diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/TargetApplication.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/TargetApplication.tsx
index 8a8075460dc..1f76de79708 100644
--- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/TargetApplication.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/TargetApplication.tsx
@@ -186,7 +186,6 @@ const TargetApplication: React.FC<TargetApplicationProp> = ({
       engineIndex
     ].inputs.artifacts[0].raw.data = YAML.stringify(engineManifest);
     workflow.setWorkflowManifest({
-      manifest: YAML.stringify(mainManifest),
       engineYAML: YAML.stringify(engineManifest),
     });
     return isCustom ? gotoStep(2) : gotoStep(1);

From 68307746389eabb2619864511376f17be648494b Mon Sep 17 00:00:00 2001
From: Amit Kumar Das <amit@chaosnative.com>
Date: Mon, 26 Apr 2021 14:58:42 +0530
Subject: [PATCH 2/2] Added error text in tune workflow step and delete
 experiment functionality

Signed-off-by: Amit Kumar Das <amit@chaosnative.com>
---
 .../frontend/public/icons/delete-exp.svg      |   5 +
 .../public/locales/en/translation.yaml        |   4 +
 .../ConfigurationStepper.tsx                  |  98 +++++++
 .../ConfigurationStepper/styles.ts            |  31 +-
 .../TuneWorkflowSteps/TargetApplication.tsx   | 265 ++++++++++--------
 5 files changed, 284 insertions(+), 119 deletions(-)
 create mode 100644 litmus-portal/frontend/public/icons/delete-exp.svg

diff --git a/litmus-portal/frontend/public/icons/delete-exp.svg b/litmus-portal/frontend/public/icons/delete-exp.svg
new file mode 100644
index 00000000000..aa3c3e65107
--- /dev/null
+++ b/litmus-portal/frontend/public/icons/delete-exp.svg
@@ -0,0 +1,5 @@
+<svg width="11" height="13" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.93161 1.11243C3.75636 1.11243 3.5883 1.17908 3.46438 1.2977C3.34046 1.41632 3.27085 1.57721 3.27085 1.74497V2.37751H7.07595V1.74497C7.07595 1.57721 7.00634 1.41632 6.88242 1.2977C6.7585 1.17908 6.59044 1.11243 6.41519 1.11243H3.93161ZM8.23802 2.37751V1.74497C8.23802 1.28218 8.04597 0.838337 7.70412 0.511091C7.36228 0.183845 6.89863 0 6.41519 0H3.93161C3.44816 0 2.98452 0.183845 2.64268 0.511091C2.30083 0.838337 2.10878 1.28218 2.10878 1.74497V2.37751H0.827126C0.506231 2.37751 0.246094 2.62654 0.246094 2.93373V11.255C0.246094 11.7178 0.438141 12.1617 0.779987 12.4889C1.12183 12.8162 1.58547 13 2.06892 13H8.27788C8.76132 13 9.22496 12.8162 9.56681 12.4889C9.90866 12.1617 10.1007 11.7178 10.1007 11.255V2.93373C10.1007 2.62654 9.84057 2.37751 9.51967 2.37751H8.23802ZM1.40816 3.48995V11.255C1.40816 11.4228 1.47777 11.5837 1.60169 11.7023C1.72561 11.8209 1.89367 11.8876 2.06892 11.8876H8.27788C8.45312 11.8876 8.62119 11.8209 8.74511 11.7023C8.86902 11.5837 8.93864 11.4228 8.93864 11.255V3.48995H1.40816Z" fill="#CA2C2C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.93259 5.35156C4.25349 5.35156 4.51362 5.60059 4.51362 5.90778V9.47405C4.51362 9.78124 4.25349 10.0303 3.93259 10.0303C3.6117 10.0303 3.35156 9.78124 3.35156 9.47405V5.90778C3.35156 5.60059 3.6117 5.35156 3.93259 5.35156Z" fill="#CA2C2C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.40916 5.35156C6.73005 5.35156 6.99019 5.60059 6.99019 5.90778V9.47405C6.99019 9.78124 6.73005 10.0303 6.40916 10.0303C6.08826 10.0303 5.82812 9.78124 5.82812 9.47405V5.90778C5.82812 5.60059 6.08826 5.35156 6.40916 5.35156Z" fill="#CA2C2C"/>
+</svg>
diff --git a/litmus-portal/frontend/public/locales/en/translation.yaml b/litmus-portal/frontend/public/locales/en/translation.yaml
index 59a24cf1ff6..9a087c808fa 100644
--- a/litmus-portal/frontend/public/locales/en/translation.yaml
+++ b/litmus-portal/frontend/public/locales/en/translation.yaml
@@ -805,6 +805,10 @@ createWorkflow:
       rollout: Rollout
       nodeselector: NodeSelector
       selector: 'kubernetes.io/hostname :'
+      nsError: Namespace not available
+      labelError: Label not available in the resource or namespace
+      deleteExp: Delete the experiment
+      editExp: Edit the experiment
     addProbe:
       heading: Add
       headingStrong: Probe
diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/ConfigurationStepper/ConfigurationStepper.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/ConfigurationStepper/ConfigurationStepper.tsx
index f316f063622..374edb5b3ad 100644
--- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/ConfigurationStepper/ConfigurationStepper.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/ConfigurationStepper/ConfigurationStepper.tsx
@@ -5,10 +5,17 @@ import StepLabel from '@material-ui/core/StepLabel';
 import StepContent from '@material-ui/core/StepContent';
 import Typography from '@material-ui/core/Typography';
 import { ButtonOutlined } from 'litmus-ui';
+import { useSelector } from 'react-redux';
+import YAML from 'yaml';
+import { useTranslation } from 'react-i18next';
 import General from '../TuneWorkflowSteps/General';
 import SteadyState from '../TuneWorkflowSteps/SteadyState';
 import TargetApplication from '../TuneWorkflowSteps/TargetApplication';
 import useStyles from './styles';
+import * as WorkflowActions from '../../../../redux/actions/workflow';
+import { WorkflowManifest } from '../../../../models/redux/workflow';
+import { RootState } from '../../../../redux/reducers';
+import useActions from '../../../../redux/actions';
 
 interface ConfigurationStepperProps {
   experimentIndex: number;
@@ -85,6 +92,7 @@ const ConfigurationStepper: React.FC<ConfigurationStepperProps> = ({
   closeStepper,
   isCustom,
 }) => {
+  const { t } = useTranslation();
   const classes = useStyles();
 
   // State variable to handle Stepper Steps
@@ -102,6 +110,76 @@ const ConfigurationStepper: React.FC<ConfigurationStepperProps> = ({
   const gotoStep = (page: number) => {
     setActiveStep(page);
   };
+  const workflow = useActions(WorkflowActions);
+  const manifest: WorkflowManifest = useSelector(
+    (state: RootState) => state.workflowManifest
+  );
+
+  const deleteExperiment = () => {
+    /**
+     * Workflow manifest saved in redux state
+     */
+    const wfManifest = YAML.parse(manifest.manifest);
+
+    /**
+     * Get template name according to the experiment index
+     */
+    const templateName = wfManifest.spec.templates[experimentIndex].name;
+
+    /**
+     * Get the workflow name according to the experiment index
+     */
+    const wfName = YAML.parse(manifest.engineYAML).metadata.name;
+
+    /**
+     * if the template is a revert-chaos template
+     * the engine name is removed from the
+     * revert-chaos template args
+     */
+    if (
+      wfManifest.spec.templates[
+        wfManifest.spec.templates.length - 1
+      ].name.includes('revert-')
+    ) {
+      const argument = wfManifest.spec.templates[
+        wfManifest.spec.templates.length - 1
+      ].container.args[0].replace(wfName, '');
+      wfManifest.spec.templates[
+        wfManifest.spec.templates.length - 1
+      ].container.args[0] = argument;
+    }
+
+    /**
+     * Remove the experiment name from steps
+     */
+    wfManifest.spec.templates[0].steps.forEach(
+      (data: any, stepIndex: number) => {
+        data.forEach((step: any, index: number) => {
+          if (step.name === templateName) {
+            data.splice(index, 1);
+          }
+        });
+        if (data.length === 0) {
+          wfManifest.spec.templates[0].steps.splice(stepIndex, 1);
+        }
+      }
+    );
+
+    /**
+     * Remove the chaos engine from the overall manifest
+     * according to the experiment index
+     */
+    wfManifest.spec.templates.splice(experimentIndex, 1);
+
+    /**
+     * Set the updated manifest to redux state
+     */
+    workflow.setWorkflowManifest({
+      manifest: YAML.stringify(wfManifest),
+      engineYAML: '',
+    });
+    closeStepper();
+  };
 
   return (
     <div className={classes.root}>
@@ -110,6 +188,26 @@ const ConfigurationStepper: React.FC<ConfigurationStepperProps> = ({
           &#x2715;
         </ButtonOutlined>
       </div>
+      <div className={classes.deleteExpDiv}>
+        <Typography className={classes.editExpText}>
+          {t('createWorkflow.tuneWorkflow.verticalStepper.editExp')}
+        </Typography>
+        <ButtonOutlined
+          onClick={() => {
+            deleteExperiment();
+          }}
+          className={classes.deleteBtn}
+        >
+          <img
+            src="./icons/delete-exp.svg"
+            alt="delete"
+            className={classes.deleteIcon}
+          />
+          <Typography color="error" className={classes.deleteExpText}>
+            {t('createWorkflow.tuneWorkflow.verticalStepper.deleteExp')}
+          </Typography>
+        </ButtonOutlined>
+      </div>
       <Stepper activeStep={activeStep} orientation="vertical">
         {steps.map((label, index) => (
           <Step key={label}>
diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/ConfigurationStepper/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/ConfigurationStepper/styles.ts
index 4650279d941..26d3f13842c 100644
--- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/ConfigurationStepper/styles.ts
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/ConfigurationStepper/styles.ts
@@ -41,8 +41,35 @@ const useStyles = makeStyles((theme: Theme) => ({
     maxWidth: '25rem',
   },
   annotationToggleBtn: {
-    width: 72,
-    height: 35,
+    width: '4.5rem',
+    height: '2.1875rem',
+  },
+
+  // Delete experiment
+  deleteExpDiv: {
+    display: 'flex',
+    marginTop: theme.spacing(10),
+    marginRight: theme.spacing(10),
+    marginLeft: theme.spacing(3.125),
+    justifyContent: 'space-between',
+  },
+
+  editExpText: {
+    fontSize: '1.5rem',
+  },
+
+  deleteBtn: {
+    border: `1px solid ${theme.palette.error.main}`,
+  },
+
+  deleteIcon: {
+    marginRight: theme.spacing(1.25),
+    height: '1.25rem',
+    width: '1.25rem',
+  },
+
+  deleteExpText: {
+    marginTop: theme.spacing(0.625),
   },
 
   // Stepper styles
diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/TargetApplication.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/TargetApplication.tsx
index 1f76de79708..80ed3971f15 100644
--- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/TargetApplication.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/TargetApplication.tsx
@@ -363,136 +363,167 @@ const TargetApplication: React.FC<TargetApplicationProp> = ({
         <>
           {/* AutoComplete textfield for Namespace */}
           {engineManifest.spec.appinfo?.appns && (
-            <Autocomplete
-              id="combo-box-demo"
-              options={appinfoData.map((option) => option.namespace)}
-              freeSolo
-              value={targetApp.appns}
-              defaultValue={targetApp.appns}
-              className={classes.autoCompleteText}
-              onChange={(_, v: any) => {
-                setTargetApp({
-                  ...targetApp,
-                  appns: v,
-                });
-                handleLabelChange();
-              }}
-              renderInput={(params) => (
-                <InputField
-                  onChange={(event) => {
-                    setTargetApp({
-                      ...targetApp,
-                      appns: event.target.value,
-                    });
-                  }}
-                  {...params}
-                  label={constants.appns}
-                />
-              )}
-            />
-          )}
-          <br />
-
-          {/* AppKind MenuList */}
-          {engineManifest.spec.appinfo?.appkind && (
-            <FormControl variant="outlined">
-              <InputLabel id="appKind" className={classes.appKind}>
-                {t('createWorkflow.tuneWorkflow.verticalStepper.appkind')}
-              </InputLabel>
-              <Select
-                labelId="appKind"
-                value={targetApp.appkind}
-                onChange={(event) => {
+            <>
+              <Autocomplete
+                id="combo-box-demo"
+                options={appinfoData.map((option) => option.namespace)}
+                freeSolo
+                value={targetApp.appns}
+                defaultValue={targetApp.appns}
+                className={classes.autoCompleteText}
+                onChange={(_, v: any) => {
                   setTargetApp({
                     ...targetApp,
-                    appkind: event.target.value as string,
+                    appns: v,
                   });
                   handleLabelChange();
-                  if (event.target.value === constants.deployment) {
-                    setGVRObj({
-                      group: constants.apps,
-                      version: constants.v1,
-                      resource: constants.deployments,
-                    });
-                  } else if (event.target.value === constants.statefulset) {
-                    setGVRObj({
-                      group: constants.apps,
-                      version: constants.v1,
-                      resource: constants.statefulsets,
-                    });
-                  } else if (event.target.value === constants.daemonset) {
-                    setGVRObj({
-                      group: constants.apps,
-                      version: constants.v1,
-                      resource: constants.daemonsets,
-                    });
-                  } else if (
-                    event.target.value === constants.deploymentconfig
-                  ) {
-                    setGVRObj({
-                      group: constants.openshift,
-                      version: constants.v1,
-                      resource: constants.deploymentconfigs,
-                    });
-                  } else if (event.target.value === constants.rollout) {
-                    setGVRObj({
-                      group: constants.argoproj,
-                      version: constants.v1alpha1,
-                      resource: constants.rollouts,
-                    });
-                  } else {
-                    setGVRObj({
-                      group: '',
-                      version: '',
-                      resource: '',
-                    });
-                  }
                 }}
-                label={constants.appKind}
-              >
-                <MenuItem aria-label="None" value="" />
-                {applicationKind.map((kind) => {
-                  return (
-                    <MenuItem key={kind} value={kind}>
-                      {kind}
-                    </MenuItem>
-                  );
-                })}
-              </Select>
-            </FormControl>
+                renderInput={(params) => (
+                  <InputField
+                    onChange={(event) => {
+                      setTargetApp({
+                        ...targetApp,
+                        appns: event.target.value,
+                      });
+                    }}
+                    {...params}
+                    label={constants.appns}
+                    helperText={
+                      appinfoData.filter(
+                        (data) => data.namespace === targetApp.appns
+                      ).length === 0 ? (
+                        <Typography color="error">
+                          {t(
+                            'createWorkflow.tuneWorkflow.verticalStepper.nsError'
+                          )}
+                        </Typography>
+                      ) : (
+                        ''
+                      )
+                    }
+                  />
+                )}
+              />
+              <br />
+            </>
           )}
-          <br />
 
-          {/* AutoComplete textfield for applabel */}
-          {engineManifest.spec.appinfo?.applabel && (
-            <Autocomplete
-              id="combo-box-demo"
-              options={appLabel}
-              freeSolo
-              value={targetApp.applabel}
-              defaultValue={targetApp.applabel}
-              className={classes.autoCompleteText}
-              onChange={(_, v: any) => {
-                setTargetApp({
-                  ...targetApp,
-                  applabel: v,
-                });
-              }}
-              renderInput={(params) => (
-                <InputField
+          {/* AppKind MenuList */}
+          {engineManifest.spec.appinfo?.appkind && (
+            <>
+              <FormControl variant="outlined">
+                <InputLabel id="appKind" className={classes.appKind}>
+                  {t('createWorkflow.tuneWorkflow.verticalStepper.appkind')}
+                </InputLabel>
+                <Select
+                  labelId="appKind"
+                  value={targetApp.appkind}
                   onChange={(event) => {
                     setTargetApp({
                       ...targetApp,
-                      applabel: event.target.value,
+                      appkind: event.target.value as string,
                     });
+                    handleLabelChange();
+                    if (event.target.value === constants.deployment) {
+                      setGVRObj({
+                        group: constants.apps,
+                        version: constants.v1,
+                        resource: constants.deployments,
+                      });
+                    } else if (event.target.value === constants.statefulset) {
+                      setGVRObj({
+                        group: constants.apps,
+                        version: constants.v1,
+                        resource: constants.statefulsets,
+                      });
+                    } else if (event.target.value === constants.daemonset) {
+                      setGVRObj({
+                        group: constants.apps,
+                        version: constants.v1,
+                        resource: constants.daemonsets,
+                      });
+                    } else if (
+                      event.target.value === constants.deploymentconfig
+                    ) {
+                      setGVRObj({
+                        group: constants.openshift,
+                        version: constants.v1,
+                        resource: constants.deploymentconfigs,
+                      });
+                    } else if (event.target.value === constants.rollout) {
+                      setGVRObj({
+                        group: constants.argoproj,
+                        version: constants.v1alpha1,
+                        resource: constants.rollouts,
+                      });
+                    } else {
+                      setGVRObj({
+                        group: '',
+                        version: '',
+                        resource: '',
+                      });
+                    }
                   }}
-                  {...params}
-                  label={constants.appLabel}
-                />
-              )}
-            />
+                  label={constants.appKind}
+                >
+                  <MenuItem aria-label="None" value="" />
+                  {applicationKind.map((kind) => {
+                    return (
+                      <MenuItem key={kind} value={kind}>
+                        {kind}
+                      </MenuItem>
+                    );
+                  })}
+                </Select>
+              </FormControl>
+              <br />
+            </>
+          )}
+
+          {/* AutoComplete textfield for applabel */}
+          {engineManifest.spec.appinfo?.applabel && (
+            <>
+              <Autocomplete
+                id="combo-box-demo"
+                options={appLabel}
+                freeSolo
+                value={targetApp.applabel}
+                defaultValue={targetApp.applabel}
+                className={classes.autoCompleteText}
+                onChange={(_, v: any) => {
+                  setTargetApp({
+                    ...targetApp,
+                    applabel: v,
+                  });
+                }}
+                renderInput={(params) => (
+                  <InputField
+                    onChange={(event) => {
+                      setTargetApp({
+                        ...targetApp,
+                        applabel: event.target.value,
+                      });
+                    }}
+                    helperText={
+                      appLabel.filter((data) => data === targetApp.applabel)
+                        .length === 0 ? (
+                        <Typography color="error">
+                          {t(
+                            'createWorkflow.tuneWorkflow.verticalStepper.labelError'
+                          )}
+                        </Typography>
+                      ) : (
+                        ''
+                      )
+                    }
+                    {...params}
+                    label={constants.appLabel}
+                  />
+                )}
+              />
+              <br />
+            </>
           )}
-          <br />
 
           {/* JobCleanUpPolicy textfield */}
           <InputField