Merge pull request #229 from o2r-project/dev

New Release

ui/dev/nginx.conf

@@ -20,16 +20,16 @@ http {
 
   server {
     listen 80;
-
+          # https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/
+
     # serve built app
     location / {
       include mime.types;
-      # https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/
       root /usr/share/nginx/html;
-      index index.html;
+
+      try_files $uri /index.html;
     }
 
     include nginx-share.conf;
-
   }
 }

ui/package.json

@@ -1,9 +1,9 @@
 {
   "name": "ui",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "author": "o2r-project (https://o2r.info)",
   "license": "Apache-2.0",
-  "homepage": ".",
+  "homepage": "/",
   "repository": {
     "type": "git",
     "url": "https://github.com/o2r-project/o2r-UI.git"

ui/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "o2r UI",
+  "name": "User Interface for the Project Open Reproducible Research",
   "icons": [
     {
       "src": "favicon.ico",

ui/src/components/app/App.js

@@ -28,12 +28,12 @@ const Header = ( props ) => {
         <Button target="_blank" rel="noopener" color="inherit" href="http://www.dlib.org/dlib/january17/nuest/01nuest.html">
           Learn more about ERCs
         </Button>
-        <BrowserRouter>
-          {/*<NavLink id="link" to="/discover">
+        <BrowserRouter forceRefresh>
+          {/*<a id="link" href="/discover">
             <Button color="inherit" label="test">
               Discover ERC
             </Button>
-          </NavLink>*/}
+          </a>*/}
           <NavLink id="link" to={"/author/" + props.userOrcid}>
             {props.loggedIn ?
               <Button color="inherit">
@@ -58,7 +58,7 @@ const Header = ( props ) => {
 const Footer = () => {
   return(
     <div className="mui-container mui--text-center" id="footer">
-      <BrowserRouter>
+      <BrowserRouter forceRefresh>
       <div id="links">
           <NavLink id="link" to="/">Home</NavLink> |&nbsp;
           <a id="link" href="http://www.dlib.org/dlib/january17/nuest/01nuest.html">About ERC</a> |&nbsp;

ui/src/components/erc/Shipment/Shipment.js

@@ -34,10 +34,15 @@ class Shipment extends React.Component {
                     httpRequests.getShipment(shipment)
                         .then((response) => {
                             shipment = response.data
+                            if(shipment.recipient == "download"){
+                                shipment.deposition_url = config.baseUrl + "shipment/" + shipment.id + "/dl"; // eslint-disable-line
+                            }
+                            else{
                             let urls = this.createURL(shipment)
                             shipment.deposition_url = urls.url
                             shipment.doi = urls.doi
                             shipment.image_url = urls.image_url
+                            }
                             let shipments = this.state.shipments;
                             shipments.unshift(response.data);
                             self.setState({ shipments });
@@ -97,13 +102,41 @@ class Shipment extends React.Component {
         self.setState({ showProgress: true, open: true, message: message, backgroundColor: "#004286" })
         httpRequests.createShipment(this.state.id, this.state.value)
             .then((response) => {
-                console.log(response);
                 let shipments = this.state.shipments;
-                let shipment = response.data;
+                let shipment={}
+                if(self.state.value == "download"){
+                    const disposition = response.request.getResponseHeader('Content-Disposition')
+                    console.log(disposition)
+                    var fileName = "";
+                    var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+                    var matches = filenameRegex.exec(disposition);
+                    console.log(matches)
+                    if (matches != null && matches[1]) {
+                        fileName = matches[1].replace(/['"]/g, '');
+                     }
+                    let blob = new Blob([response.data], { type: 'application/zip' })
+                    const downloadUrl = URL.createObjectURL(blob)
+                    console.log(downloadUrl)
+                    console.log(fileName)
+                    let a = document.createElement("a"); 
+                    a.href = downloadUrl;
+                    a.download = fileName;
+                    document.body.appendChild(a);
+                    a.click();
+                    let id = fileName.substring(0, fileName.lastIndexOf("."));
+                    shipment.id = id
+                    shipment.deposition_url = config.baseUrl + "shipment/" + shipment.id + "/dl"; // eslint-disable-line
+                    shipment.recipient = self.state.value
+                }
+                else{
+                shipment = response.data;
+                console.log(shipment)
+                console.log(response)
                 let urls = this.createURL(shipment)
                 shipment.deposition_url = urls.url
                 shipment.doi = urls.doi
                 shipment.image_url = urls.image_url
+                }
                 shipments.unshift(shipment);
                 self.setState({ shipments });
                 message = "sucessfull shipped to " + self.state.value
@@ -179,14 +212,14 @@ class Shipment extends React.Component {
                     <FormControl component="fieldset" >
                         <FormLabel component="legend">Coose destination</FormLabel>
                         <RadioGroup aria-label="gender" name="gender1" value={this.state.value} onChange={this.handleChange}>
-                            <FormControlLabel value="zenodo" control={<Radio />} label="Zenodo" />
-                            <FormControlLabel value="zenodo_sandbox" control={<Radio />} label="Zenodo Sandbox" />
-                            <FormControlLabel value="download" control={<Radio />} label="Download" />
+                            <FormControlLabel id="zenodo" value="zenodo" control={<Radio />} label="Zenodo" />
+                            <FormControlLabel id="zenodo_sandbox" value="zenodo_sandbox" control={<Radio />} label="Zenodo Sandbox" />
+                            <FormControlLabel id="download" value="download" control={<Radio />} label="Download" />
                         </RadioGroup>
                     </FormControl>
                     <br />
                     <br />
-                    <Button onClick={() => this.ship()} variant="contained" disabled={this.state.showProgress}>
+                    <Button onClick={() => this.ship()} id="ship" variant="contained" disabled={this.state.showProgress}>
                         Ship
                 </Button>
                     <br />
@@ -213,22 +246,31 @@ class Shipment extends React.Component {
                                     <CardContent>
                                         <Grid container spacing={3}>
                                             <Grid item xs={9} style={{ "padding-top": "0px" }}>
-                                                <p> <span style={{ "font-weight": "bold" }}> Last modified on: </span> {shipment.last_modified}  <br />
-                                                    <span style={{ "font-weight": "bold" }}> Created by: </span> {shipment.user} <br />
-                                                    <span style={{ "font-weight": "bold" }}> Recipient: </span> {shipment.recipient} <br />
-                                                    <span style={{ "font-weight": "bold" }}> Status: </span> {shipment.status} <br />
+                                                <p> <span style={{ "font-weight": "bold" }} id={"modified" + index}> Last modified on: </span> {shipment.last_modified}  <br />
+                                                    <span style={{ "font-weight": "bold" }} id={"creator" + index}> Created by: </span> {shipment.user} <br />
+                                                    <span style={{ "font-weight": "bold" }} id={"recipient" + index}> Recipient: </span> {shipment.recipient} <br />
+                                                    <span style={{ "font-weight": "bold" }} id={"status" + index} > Status: </span> {shipment.status} <br />
                                                     {shipment.status === "published" ? 
                                                     <a href={shipment.deposition_url}><img src={shipment.image_url} alt="DOI"></img></a> : "" } </p>
                                             </Grid>
                                                 <Grid item xs={3}>
+                                                    {shipment.recipient == "download" ?
+                                                    <div>
+                                                    {shipment.deposition_url ? <Button variant="contained" size="small" color="primary" onClick={() => this.hrefToLink(shipment.deposition_url)}>
+                                                    Download
+                                                    </Button> : ""}
+                                                    </div>
+                                                    : 
+                                                    <div>
                                                     {shipment.status === "shipped" ? <Button variant="contained" size="small" color="primary" onClick={() => this.publishShipment(shipment)}>
                                                         Publish
                                                          </Button> : ""}
                                                     <br />
                                                     <br />
                                                     {shipment.deposition_url ? <Button variant="contained" size="small" color="primary" onClick={() => this.hrefToLink(shipment.deposition_url)}>
                                                         {shipment.status === "shipped" ? "Inspect on" : "View on"} {shipment.recipient}
-                                                    </Button> : ""}
+                                                    </Button> : "" }
+                                                    </div>}
 
                                                 </Grid>
                                             </Grid>

ui/src/components/startpageDemo/Startpage.js

@@ -38,6 +38,45 @@ class Startpage extends Component {
           pathname: '/erc/' + id,
           state: { data: metadata }
       });
+    })
+      .catch((response) => {
+          if (response.response.status === 401) {
+            self.setState({ title: "ERC Upload failed", errorMessage: "You have to be logged in to upload a Workspace" })
+          } 
+          else {
+            self.setState({ title: "ERC Upload failed", errorMessage: "Wokrspace not found" })
+          }
+        })
+  }
+
+  submitLink = () => {
+    let self= this;
+    this.setState({open:true, progress: 30, title: "Retreving file from public link"})
+    httpRequests.uploadViaLink(this.state.link, this.state.fileName)
+      .then((response) => {
+        self.setState({open:true, progress: 50})
+        var id= response.data.id
+        var metadata= "";
+        httpRequests
+                .singleCompendium(response.data.id)
+                .then(function(res) {
+                  self.setState({open:true, progress: 80})
+                    metadata=res.data.metadata
+                    return httpRequests.updateMetadata(res.data.id, res.data.metadata.o2r);
+                })
+        self.setState({open:true, progress: 100})
+        this.props.history.push({
+          pathname: '/createErc/' + id,
+          state: { data: metadata }
+        })
+      })
+      .catch((response) => {
+        if (response.response.status === 401) {
+          self.setState({ title: "ERC Upload failed", errorMessage: "You have to be logged in to upload a Workspace" })
+        } 
+        else {
+          self.setState({ title: "ERC Upload failed", errorMessage: "Wokrspace not found" })
+        }
 
         });
   }
@@ -46,6 +85,14 @@ class Startpage extends Component {
     this.setState({value : event.target.value});
   };
 
+  handleLinkChange = (event) => {
+    this.setState({link : event.target.value});
+  };
+
+  handleFileNameChange = (event) => {
+    this.setState({fileName : event.target.value});
+  };
+
   handleClose() {
     this.setState({ open: false })
   }
@@ -72,20 +119,7 @@ render() {
             <h1>Create your own Executable Research Compendium (ERC)</h1>
             <div style={{ width: "65%", marginLeft: "auto", marginRight: "auto" }}>
               <div className="instruction">
-                <b>Step 1: Create an R Markdown file including your R analysis</b>
-              </div>
-              <div className="instruction">
-                <b>Step 2: Add metadata to your R Markdown in YAML format like <a target="_blank"  rel="noopener noreferrer" href="https://github.com/o2r-project/erc-examples/blob/master/ERC/Finished/INSYDE/workspace/main.Rmd">here (optional)</a>
-                </b><br />
-              </div>
-              <div className="instruction">
-                <b>Step 3: Run your R Markdown to generate the HTML file</b><br />
-              </div>
-              <div className="instruction">
-                <b>Step 4: Upload your workspace including the code files, data, and the HTML (.zip)</b><br />
-              </div>
-              <div className="instruction">
-                <b>No workspace at hand? Just upload one of our <a target="_blank"  rel="noopener noreferrer" href="https://github.com/o2r-project/erc-examples/tree/master/ERC/Finished">example workspaces</a></b>
+                <h3>To get instruction how to create an workspace, please click <a href= "https://o2r.info/pilots/#%EF%B8%8F-information-for-authors" target= "_blank">here </a>.</h3>
               </div>
               <Dropzone loggedIn={this.props.loggedIn} setUpperState={this.setUpperState} handleClose={this.handleClose}/>
             </div>
@@ -104,10 +138,23 @@ render() {
                 <TextField id="outlined-basic" value={this.state.value} label="Zenodo link or DOI" variant="outlined" onChange={this.handleChange}/>
               </form>
               <br />
-              <br />
               <Button variant="contained" color="primary" onClick={this.submit}>Submit</Button>
             </div>
 
+            <div style={{ width: "65%", marginLeft: "auto", marginRight: "auto", marginTop: "30px" }}>
+              <div className="instruction">
+                <b>Upload over a public sciebo url</b>
+              </div>
+              <br />
+              <form noValidate autoComplete="off">
+                <TextField id="outlined-basic" style ={{textAlign: "left"}} value={this.state.link} label="Link to the folder containing the zip file" variant="outlined" onChange={this.handleLinkChange}/>
+                <span style ={{marginLeft: "20px"}}> </span>
+                <TextField id="outlined-basic" style ={{textAlign: "left"}}  value={this.state.fileName} label="Name of the zip file" variant="outlined" onChange={this.handleFileNameChange}/>
+              </form>
+              <br />
+              <Button variant="contained" color="primary" onClick={this.submitLink}>Submit</Button>
+            </div>
+
           </div>
 
         </Grid>

ui/src/helpers/httpRequests.js

@@ -117,7 +117,11 @@ function createShipment(id, recipient){
     var params = new URLSearchParams();
     params.append('compendium_id', id);
     params.append('recipient', recipient);
-    return axios.post(_env.api + 'shipment', params);
+    let config = null;
+    if (recipient == "download"){
+        config = {responseType: 'arraybuffer'}
+    }
+    return axios.post(_env.api + 'shipment', params, config);
 }
 
 function getShipmentsByERCID(id){
@@ -159,7 +163,25 @@ function uploadViaZenodo(idOrUrl, path){
     return axios.post(_url, _data);
 }
 
+
+function uploadViaLink(path, fileName){
+    var _url = _env.api + 'compendium/';
+    var path = path
+
+    var _data = {
+        content_type:"workspace",
+        share_url: path,
+    }
+
+    if(fileName){
+        _data.filename= fileName
+    }
+    return axios.post(_url, _data);
+}
+
 module.exports = {
+
+    uploadViaLink: uploadViaLink,
     uploadViaZenodo: uploadViaZenodo,
     getUser: getUser,
     listAllCompendia: listAllCompendia,

ui/src/test/workflowBindings.test.js

@@ -354,7 +354,7 @@ describe("Inspect ERC", () => {
     test("Inspect Logs", async () => {
 
 
-        await page.waitForTimeout(10000)
+        await page.waitForTimeout(20000)
         await page.click("#logs")
         await page.waitForTimeout(4000)
 
@@ -367,7 +367,7 @@ describe("Inspect ERC", () => {
 
      test("Inspect Results", async () => {
 
-        await page.waitForTimeout(1000)
+        await page.waitForTimeout(20000)
         await page.click('#close')
 
         await page.waitForTimeout(4000)
@@ -455,4 +455,18 @@ describe("Inspect ERC", () => {
         expect(html).toBe("Create new Shipment:");
     })
 
+
+    test("Ship to download", async () => {
+        await page.click('#download')
+        await page.click('#ship')
+        await page.waitForTimeout(2000)
+        await page.screenshot({ path: 'screenshots/bindingsShipped.jpg', type: 'jpeg' });
+
+        const handle = await page.$("#recipient0");
+        const html = await page.evaluate(handle => handle.innerText, handle);
+
+        expect(html).toBe("Recipient: ");
+    })
+
+
 });