diff --git a/src/webportal/src/app/job-submission/models/job-protocol.js b/src/webportal/src/app/job-submission/models/job-protocol.js
index bc5d9f4f87..564422409f 100644
--- a/src/webportal/src/app/job-submission/models/job-protocol.js
+++ b/src/webportal/src/app/job-submission/models/job-protocol.js
@@ -25,7 +25,7 @@
 
 import {jobProtocolSchema} from '../models/protocol-schema';
 
-import {get, isEmpty} from 'lodash';
+import {get, isEmpty, cloneDeep} from 'lodash';
 import yaml from 'js-yaml';
 import Joi from 'joi-browser';
 import {removeEmptyProperties} from '../utils/utils';
@@ -68,8 +68,27 @@ export class JobProtocol {
     }
   }
 
+  static safePruneProtocol(protocol) {
+    const prunedProtocol= removeEmptyProperties(protocol);
+    const taskRoles = cloneDeep(prunedProtocol.taskRoles);
+    Object.keys(taskRoles).forEach((taskRoleName) => {
+      const taskRoleContent = taskRoles[taskRoleName];
+      if (isEmpty(taskRoleContent.commands)) {
+        return;
+      }
+      taskRoleContent.commands = taskRoleContent.commands.filter(
+        (line) => !isEmpty(line),
+      );
+    });
+    prunedProtocol.taskRoles = taskRoles;
+    return prunedProtocol;
+  }
+
   static validateFromObject(protocol) {
-    const result = Joi.validate(removeEmptyProperties(protocol), jobProtocolSchema);
+    const result = Joi.validate(
+      JobProtocol.safePruneProtocol(protocol),
+      jobProtocolSchema,
+    );
     return String(result.error || '');
   }
 
@@ -122,7 +141,7 @@ export class JobProtocol {
 
   toYaml() {
     try {
-      return yaml.safeDump(removeEmptyProperties(this));
+      return yaml.safeDump(JobProtocol.safePruneProtocol(this));
     } catch (e) {
       alert(e.message);
     }
diff --git a/src/webportal/src/app/job-submission/utils/utils.js b/src/webportal/src/app/job-submission/utils/utils.js
index 3a569fa159..811468f279 100644
--- a/src/webportal/src/app/job-submission/utils/utils.js
+++ b/src/webportal/src/app/job-submission/utils/utils.js
@@ -67,23 +67,12 @@ export function addPathPrefix(path, prefix) {
   return prefix.concat(path);
 }
 
-function pruneComponents(jobInformation, secrets, context) {
+function populateComponents(jobInformation, context) {
   const {vcNames} = context;
   const virtualCluster = jobInformation.virtualCluster;
   if (isEmpty(vcNames) || isNil(vcNames.find((vcName) => vcName === virtualCluster))) {
     jobInformation.virtualCluster = '';
   }
-
-  const removeValueIndex = secrets.map((secret, index) => {
-    if (secret.value === HIDE_SECRET) {
-      return index;
-    }
-    return -1;
-  }).filter((value) => value >= 0);
-
-  for (let i = removeValueIndex.length -1; i >= 0; i--) {
-    secrets.splice(removeValueIndex[i], 1);
-  }
 }
 
 export function getJobComponentsFromConfig(jobConfig, context) {
@@ -102,9 +91,12 @@ export function getJobComponentsFromConfig(jobConfig, context) {
   const updatedParameters = Object.keys(parameters).map((key) => {
     return {key: key, value: parameters[key]};
   });
-  const updatedSecrets = Object.keys(secrets).map((key) => {
-    return {key: key, value: secrets[key]};
-  });
+  const updatedSecrets =
+    secrets === HIDE_SECRET
+      ? []
+      : Object.keys(secrets).map((key) => {
+          return {key: key, value: secrets[key]};
+        });
   const updatedTaskRoles = Object.keys(taskRoles).map((name) =>
     JobTaskRole.fromProtocol(
       name,
@@ -115,7 +107,7 @@ export function getJobComponentsFromConfig(jobConfig, context) {
     ),
   );
 
-  pruneComponents(updatedJobInformation, updatedSecrets, context);
+  populateComponents(updatedJobInformation, context);
   return [
     updatedJobInformation,
     updatedTaskRoles,