ISSUE-678: UI does not show parse error for non-breaking space when a…

…dding a schema
hortonworks · Mar 13, 2020 · 7d89b0f · 7d89b0f
1 parent 04f49b0
commit 7d89b0f
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 11 deletions.
diff --git a/...main/resources/app/scripts/containers/Registry-Services/SchemaRegistry/SchemaInfoForm.jsx b/...main/resources/app/scripts/containers/Registry-Services/SchemaRegistry/SchemaInfoForm.jsx
@@ -57,7 +57,8 @@ export default class SchemaFormContainer extends Component {
       description: '',
       showError: false,
       changedFields: [],
-      showCodemirror: false
+      showCodemirror: false,
+      schemaParseError: false
     };
     this.fetchData();
   }
@@ -128,7 +129,7 @@ export default class SchemaFormContainer extends Component {
       var file = e.dataTransfer.files[0];
       var reader = new FileReader();
       reader.onload = function(e) {
-        if(this.state.type.toLowerCase() == 'avro' && Utils.isValidJson(reader.result)) {
+        if(this.state.type.toLowerCase() == 'avro' && Utils.isValidJson(reader.result).flag) {
           this.setState({schemaTextFile: file, schemaText: reader.result, showCodemirror: true});
         } else if(this.state.type.toLowerCase() != 'avro') {
           this.setState({schemaTextFile: file, schemaText: reader.result, showCodemirror: true});
@@ -173,7 +174,8 @@ export default class SchemaFormContainer extends Component {
       }
       this.setState({showError: true, changedFields: changedFields, expandCodemirror: false});
       return false;
-    } else if (this.state.type.toLowerCase() == 'avro' && !Utils.isValidJson(schemaText.trim())) {/*Add validation logic to Utils method for schema type other than "Avro" */
+    } else if (this.state.type.toLowerCase() == 'avro' && !Utils.isValidJson(schemaText.trim()).flag) {/*Add validation logic to Utils method for schema type other than "Avro" */
+      this.setState({schemaParseError: true});
       return false;
     } else {
       this.setState({showError: false});
@@ -213,7 +215,7 @@ export default class SchemaFormContainer extends Component {
       gutters: this.state.type.toLowerCase() == 'avro' ? ["CodeMirror-lint-markers"] : [],
       lint: this.state.type.toLowerCase() == 'avro'
     };
-    let {evolve, schemaText, showError, changedFields, showCodemirror, expandCodemirror} = this.state;
+    let {evolve, schemaText, showError, changedFields, showCodemirror, expandCodemirror, schemaParseError} = this.state;
     return (
       <form>
       <div className="row">
@@ -288,9 +290,18 @@ export default class SchemaFormContainer extends Component {
           >
             {showCodemirror
               ?
+              <div>
+              {schemaParseError &&
+              <div className="validation-alert danger">
+                <span className="danger">Parse error - {Utils.isValidJson(this.state.schemaText).message}</span>
+                <span className="alert-close"><i className="fa fa-times"
+                  onClick={() => this.setState({schemaParseError: false})}></i></span>
+              </div>
+              }
               <ReactCodemirror ref="JSONCodemirror" value={this.state.schemaText} onChange={this.handleJSONChange.bind(this)} options={jsonoptions} />
+              </div>
               :
-              <div ref="browseFileContainer" className={"addSchemaBrowseFileContainer"+(showError && this.state.type.toLowerCase() == 'avro' && !Utils.isValidJson(schemaText) ? ' invalidInput' : '')}>
+              <div ref="browseFileContainer" className={"addSchemaBrowseFileContainer"+(showError && this.state.type.toLowerCase() == 'avro' && !Utils.isValidJson(schemaText).flag ? ' invalidInput' : '')}>
                 <div onClick={(e) => {
                   this.setState({showCodemirror: true});
                 }}>

diff --git a/...n/resources/app/scripts/containers/Registry-Services/SchemaRegistry/SchemaVersionForm.jsx b/...n/resources/app/scripts/containers/Registry-Services/SchemaRegistry/SchemaVersionForm.jsx
@@ -80,7 +80,7 @@ export default class SchemaVersionForm extends Component {
       var file = e.dataTransfer.files[0];
       var reader = new FileReader();
       reader.onload = function(e) {
-        if(this.props.schemaObj.type.toLowerCase() == 'avro' && Utils.isValidJson(reader.result)) {
+        if(this.props.schemaObj.type.toLowerCase() == 'avro' && Utils.isValidJson(reader.result).flag) {
           this.setState({schemaTextFile: file, schemaText: reader.result, showCodemirror: true});
         } else if(this.props.schemaObj.type.toLowerCase() != 'avro') {
           this.setState({schemaTextFile: file, schemaText: reader.result, showCodemirror: true});
@@ -112,7 +112,8 @@ export default class SchemaVersionForm extends Component {
       }
       this.setState({showError: true, changedFields: changedFields});
       return false;
-    } else if(this.props.schemaObj.type.toLowerCase() == 'avro' && !Utils.isValidJson(schemaText.trim())) {/*Add validation logic to Utils method for schema type other than "Avro" */
+    } else if(this.props.schemaObj.type.toLowerCase() == 'avro' && !Utils.isValidJson(schemaText.trim()).flag) {/*Add validation logic to Utils method for schema type other than "Avro" */
+      this.setState({schemaTextCompatibility: 'Parse error - ' + Utils.isValidJson(schemaText.trim()).message});
       return false;
     } else {
       this.setState({showError: false});
@@ -155,7 +156,7 @@ export default class SchemaVersionForm extends Component {
         });
     }
     catch(err){
-      console.log(err);
+      this.setState({schemaTextCompatibility: 'Parse error - '+ Utils.isValidJson(schemaText.trim()).message});
     }
   }
 
@@ -216,7 +217,7 @@ export default class SchemaVersionForm extends Component {
                 <ReactCodemirror ref="JSONCodemirror" value={this.state.schemaText} onChange={this.handleJSONChange.bind(this)} options={jsonoptions}/>
               </div>
               :
-              <div ref="browseFileContainer" className={"addSchemaBrowseFileContainer"+(showError && this.props.schemaObj.type.toLowerCase() == 'avro' && !Utils.isValidJson(schemaText) ? ' invalidInput' : '')}>
+              <div ref="browseFileContainer" className={"addSchemaBrowseFileContainer"+(showError && this.props.schemaObj.type.toLowerCase() == 'avro' && !Utils.isValidJson(schemaText).flag ? ' invalidInput' : '')}>
                 <div onClick={(e) => {
                   this.setState({showCodemirror: true});
                 }}>

diff --git a/webservice/src/main/resources/app/scripts/utils/Utils.js b/webservice/src/main/resources/app/scripts/utils/Utils.js
@@ -24,7 +24,10 @@ const isValidJson = function(obj) {
     const valid = JSON.parse(obj);
     return true;
   } catch (e) {
-    return false;
+    return {
+      flag: false,
+      message: e.message
+    };
   }
 };
 

diff --git a/webservice/src/main/resources/app/styles/css/style.css b/webservice/src/main/resources/app/styles/css/style.css
@@ -1396,7 +1396,7 @@ span.checkbox-warning {
   margin-left: 3px;
 }
 
-.compatibility-alert{
+.compatibility-alert, .validation-alert{
   position: absolute;
   top: 0;
   z-index: 999;
@@ -1422,6 +1422,13 @@ span.checkbox-warning {
   cursor: pointer;
   color: grey;
 }
+.validation-alert.danger {
+  top: 25px;
+  width: 93%;
+  border-color: #ebccd1;
+  background-color: rgba(242, 222, 222, 0.74);
+  color: #a94442;
+}
 .schema-validating{
   position: absolute;
   z-index: 999;