publiccode remote url import in editor

src/app/components/editor.js

@@ -68,6 +68,7 @@ class Index extends Component {
       lastGen: null,
       yamlLoaded: false
     };
+    this.onLoadingRemote = this.props.onLoadingRemote.bind(this);
   }
 
   initBootstrap() {
@@ -397,6 +398,7 @@ class Index extends Component {
       loading,
       values,
       allFields,
+      onLoadingRemote: this.onLoadingRemote,
       onLoad: this.parseYml.bind(this),
       onReset: this.reset.bind(this)
     };

src/app/components/sidebar.js

@@ -11,7 +11,7 @@ import img_download from "../../asset/img/download.svg";
 import img_dots from "../../asset/img/dots.svg";
 import img_xx from "../../asset/img/xx.svg";
 
-import { getRemoteYml } from "../utils/calls";
+import { getRemoteYml, passRemoteURLToValidator } from "../utils/calls";
 import { getLabel } from "../contents/data";
 
 function mapStateToProps(state) {
@@ -65,9 +65,24 @@ class sidebar extends Component {
 
     let yaml = null;
     try {
-      yaml = await getRemoteYml(remoteYml);
+      this.setState({ loading: true });
+      this.props.onLoadingRemote(true);
+
+      // trying to get file and process it, cors problem
+      // yaml = await getRemoteYml(remoteYml);
+
+      // piping url to validator which will returns a fresh
+      // and validated copy
+      yaml = await passRemoteURLToValidator(remoteYml);
+
       onLoad(yaml);
+
+      this.setState({ loading: false });
+      this.props.onLoadingRemote(false);
     } catch (error) {
+
+      this.setState({ loading: false });
+      this.props.onLoadingRemote(false);
       console.error(error);
       alert("error parsing remote yaml");
     }
@@ -92,7 +107,7 @@ class sidebar extends Component {
 
     onReset();
 
-    reader.onload = function() {
+    reader.onload = function () {
       let yaml = reader.result;
       onLoad(yaml);
       document.getElementById("load_yaml").value = "";
@@ -103,9 +118,9 @@ class sidebar extends Component {
 
   download(data) {
     //has dom
-	if (!data || data.length == 0){
-		return;
-	}
+    if (!data || data.length == 0) {
+      return;
+    }
     const blob = new Blob([data], {
       type: "text/yaml;charset=utf-8;"
     });
@@ -117,7 +132,7 @@ class sidebar extends Component {
     tempLink.setAttribute("download", "publiccode.yml");
     document.body.appendChild(tempLink);
     tempLink.click();
-    setTimeout(function() {
+    setTimeout(function () {
       document.body.removeChild(tempLink);
       window.URL.revokeObjectURL(blobURL);
     }, 1000);
@@ -199,7 +214,7 @@ class sidebar extends Component {
                   </button>
                 </div>
               </div>
-              <div className="d-none">
+              <div>
                 <div>Paste remote yaml url</div>
                 <div>
                   <form
@@ -213,7 +228,7 @@ class sidebar extends Component {
                       required={true}
                       onChange={e => this.handleChange(e)}
                     />
-                    <button type="submit" className="btn btn-primary btn-block disabled" disabled>
+                    <button type="submit" className="btn btn-primary btn-block">
                       <img src={img_upload} alt="upload" />Load
                     </button>
                   </form>

src/app/contents/constants.js

@@ -1,9 +1,10 @@
-let {REPOSITORY, ELASTIC_URL, VALIDATOR_URL} = process.env;
+let {REPOSITORY, ELASTIC_URL, VALIDATOR_URL, VALIDATOR_REMOTE_URL} = process.env;
 
 export const privacyPolicyUrl = `https://developers.italia.it/it/privacy-policy/`;
 export const repositoryUrl = `https://docs.italia.it/italia/developers-italia/publiccodeyml/it/master/`;
 export const versionsUrl = `https://api.github.com/repos/${REPOSITORY}/contents/version`;
-export const sampleUrl = `https://raw.githubusercontent.com/italia/publiccode.yml/master/docs/it/example/publiccode.minimal.yml`;
+export const sampleUrl = `https://raw.githubusercontent.com/italia/pc-web-validator/master/tests/valid.minimal.yml`;
 export const elasticUrl = ELASTIC_URL || '';
 export const validatorUrl = VALIDATOR_URL || '';
+export const validatorRemoteUrl = VALIDATOR_REMOTE_URL || '';
 export const APP_FORM = "appForm";

src/app/utils/calls.js

@@ -1,4 +1,4 @@
-import { validatorUrl } from "../contents/constants";
+import { validatorUrl, validatorRemoteUrl } from "../contents/constants";
 
 export const getReleases = versionsUrl => {
   return fetch(versionsUrl)
@@ -10,9 +10,34 @@ export const getReleases = versionsUrl => {
 export const getRemoteYml = url => {
   //return fetch(url).then(res => res.blob());
   // return fetch(url).then(res => res.text());
+  //it causes cors exception on gitlab domains
   return fetch(url)
-    .then(res => res.json())
-    .then(data => atob(data.content));
+    .then(res => res.text());
+};
+
+export const passRemoteURLToValidator = yamlURL => {
+  const paramsString = "url=" + yamlURL;
+  // let searchParams = new URLSearchParams(paramsString);
+
+  const myHeaders = new Headers({
+    'Accept': 'application/x-yaml',
+    'Content-Type': 'application/x-yaml'
+  });
+  const url = validatorRemoteUrl;
+
+  const myInit = {
+    method: 'POST',
+    headers: myHeaders,
+    mode: 'cors',
+    cache: 'default',
+    // body: searchParams // params are sent in query sting url see below in fetch
+  };
+
+  if (url == '')
+    return Promise.reject(new Error('no validator url specified'));
+
+  return fetch(url + '?' + paramsString, myInit)
+    .then(res => res.text());
 };
 
 export const postDataForValidation = data => {
@@ -29,8 +54,8 @@ export const postDataForValidation = data => {
     cache: 'default',
     body: JSON.stringify(data)
   };
-  
-  if(url=='')
+
+  if (url == '')
     return Promise.reject(new Error('no validator url specified'));
 
   return fetch(url, myInit);

webpack.config.js

@@ -31,7 +31,8 @@ module.exports = env => {
         "process.env": {
           REPOSITORY: JSON.stringify(process.env.REPOSITORY),
           ELASTIC_URL: JSON.stringify(process.env.ELASTIC_URL),
-          VALIDATOR_URL: JSON.stringify(process.env.VALIDATOR_URL)
+          VALIDATOR_URL: JSON.stringify(process.env.VALIDATOR_URL),
+          VALIDATOR_REMOTE_URL: JSON.stringify(process.env.VALIDATOR_REMOTE_URL)
         }
       }),
       new HtmlWebpackPlugin({