fix two bugs: add validation when submitting job by json #2375, Job L…

…ist-filter UI fix #2479 (#2510)

* fix a bug, add validation when submitting job by json

bug issue:
#2375

* fix a bug: Job List-filter UI

issue: #2479

this issue has two parts, the first was fixed before, this commit fix the second.

* Update the code to make it more standardized

src/webportal/src/app/job/job-submit/job-submit.component.js

@@ -60,7 +60,7 @@ const isValidJson = (str) => {
     valid = false;
   }
   if (!valid) {
-    alert('Please upload a valid json file: ' + errors);
+    alert('Please fix the invalid parameters: ' + errors);
   }
   return valid;
 };
@@ -144,6 +144,23 @@ $(document).ready(() => {
       $('#submitJob').prop('disabled', (editor.validate().length != 0));
     });
 
+    // choose the first edit json box
+    $('[title="Edit JSON"]').filter(':first').one('click', () => {
+      // disable old save button to avoid saving automatically
+      let oldSave = $('[title="Edit JSON"]').filter(':first').next('div').children('[title=Save]')[0];
+      let newSave = oldSave.cloneNode(true);
+      oldSave.parentNode.replaceChild(newSave, oldSave);
+
+      // add new click listener
+      $(newSave).on('click', () => {
+        let curConfig = editor.root.editjson_textarea.value;
+        if (isValidJson(curConfig)) {
+          editor.root.setValue(JSON.parse(curConfig));
+          editor.root.hideEditJSON();
+        }
+      });
+  });
+
     $(document).on('change', '#fileUpload', (event) => {
       const reader = new FileReader();
       reader.onload = (event) => {

src/webportal/src/app/job/job-view/fabric/JobList/TopBar.jsx

@@ -420,7 +420,7 @@ function TopBar() {
       { active ? <CommandBar
         items={filterBarItems}
         farItems={filterBarFarItems}
-        styles={{root: {backgroundColor: 'transparent'}}}
+        styles={{root: {backgroundColor: '#ECECEC'}}}
       /> : null }
     </React.Fragment>
   );