From 2b3f9f5342cbd89a02c6998a2115e471f5b72ec3 Mon Sep 17 00:00:00 2001
From: Birdie <birdmachine@blackboxjack.com>
Date: Wed, 9 Jun 2021 08:24:34 -0400
Subject: [PATCH 1/4] Get this cancel button to close the Uploads modal

---
 src/src/App.js                               | 12 ++++++------
 src/src/components/uploads/createUploads.jsx | 16 ++++++++++++----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/src/App.js b/src/src/App.js
index 0dc595f2..a7cca4a0 100644
--- a/src/src/App.js
+++ b/src/src/App.js
@@ -182,13 +182,13 @@ handleMenuSelection = (event) => {
   };
 
   handleClose = () => {
-    console.log("handleClose");
+    console.log("App.js handleClose");
     this.setState({
+      creatingNewUpload: false,
       anchorEl: null,
       show_menu_popup: false,
       open_edit_dialog: false, 
-      creatingNewEntity: false,
-      creatingNewUpload: false
+      creatingNewEntity: false
     })
   };
 
@@ -264,7 +264,7 @@ handleMenuSelection = (event) => {
                   </Button>
                 */}
                    <Button aria-controls="simple-menu" aria-haspopup="true" onClick={this.handleClick}>
-                     Register New Item
+                      Register New Item
                   </Button>
                   <Menu
                     id="simple-menu"
@@ -279,7 +279,6 @@ handleMenuSelection = (event) => {
                     <MenuItem id="mi_dataset" onClick={this.handleMenuSelection}>Dataset</MenuItem>
                     <Divider />
                     <MenuItem id="mi_dataupload" onClick={this.handleUploadsDialog}>Data Upload</MenuItem>
-                 
                   </Menu>
               
      
@@ -506,8 +505,9 @@ handleMenuSelection = (event) => {
             <Dialog fullWidth={true} maxWidth="lg" onClose={this.handleClose} aria-labelledby="source-lookup-dialog" open={this.state.creatingNewUpload}>
             <DialogContent>
               <UploadsForm
-                testVal="fnord"
+                testVal="ERIS"
                 onCreated={this.onCreated}
+                cancelEdit={this.handleClose}
               />
             </DialogContent>
             </Dialog>
diff --git a/src/src/components/uploads/createUploads.jsx b/src/src/components/uploads/createUploads.jsx
index 17ddabf2..0abd38ac 100644
--- a/src/src/components/uploads/createUploads.jsx
+++ b/src/src/components/uploads/createUploads.jsx
@@ -34,6 +34,7 @@ class CreateUploads extends Component {
     var tgl = this.getUserGroups();
     console.log(tgl);
     console.debug(this.state);
+    console.debug(this.props);
   }
 
   
@@ -110,7 +111,14 @@ class CreateUploads extends Component {
 
 
   cancelEdit = () => {
-    this.setState({ creatingNewSubmission: false, editingSubmission: null });
+    console.debug("form js cancelEdit!!");
+    this.setState({ 
+      creatingNewSubmission: false, 
+      editingSubmission: null ,
+      processingUpload:false,
+      submitting: false,
+      creatingNewUpload:false
+    });
   };
 
 
@@ -226,19 +234,19 @@ class CreateUploads extends Component {
                   className="inline-icon"
                   icon={faSpinner}
                   spin
-                   />
+                />
               )}
               {!this.state.submitting && "Create"}
               </button>
               <button
               type="button"
               className="btn btn-secondary"
-              onClick={() => this.props.onClose}
+              onClick={this.props.cancelEdit}
               >
                   Cancel
               </button>
           </div>
-        </div>
+        </div>  
       );
     
   }

From 8aaff4c472e1e190999540d02dd018764d9629b0 Mon Sep 17 00:00:00 2001
From: Birdie <birdmachine@blackboxjack.com>
Date: Wed, 9 Jun 2021 08:30:12 -0400
Subject: [PATCH 2/4] DOnt close uploads modal on backdrop click

---
 src/src/App.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/src/App.js b/src/src/App.js
index a7cca4a0..393369ba 100644
--- a/src/src/App.js
+++ b/src/src/App.js
@@ -502,7 +502,18 @@ handleMenuSelection = (event) => {
           
           {this.state.isAuthenticated && this.state.creatingNewUpload && (
           <div className="col-sm-12">
-            <Dialog fullWidth={true} maxWidth="lg" onClose={this.handleClose} aria-labelledby="source-lookup-dialog" open={this.state.creatingNewUpload}>
+            <Dialog 
+              open={this.state.creatingNewUpload}
+              fullWidth={true} 
+              maxWidth="lg" 
+              aria-labelledby="source-lookup-dialog" 
+              // onClose={this.handleClose} 
+              onClose={(event, reason) => {
+                if (reason !== 'backdropClick') {
+                  this.handleClose()
+                }
+              }}
+            >
             <DialogContent>
               <UploadsForm
                 testVal="ERIS"

From 8277cb7d838ee1a0a7bf1849dced21abb2e8036b Mon Sep 17 00:00:00 2001
From: Birdie <birdmachine@blackboxjack.com>
Date: Wed, 9 Jun 2021 08:52:31 -0400
Subject: [PATCH 3/4] Updates tooltip & label text within the Upload Creation
 form

---
 src/src/components/uploads/createUploads.jsx | 31 ++++++++++++++++----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/src/components/uploads/createUploads.jsx b/src/src/components/uploads/createUploads.jsx
index 0abd38ac..cb706d21 100644
--- a/src/src/components/uploads/createUploads.jsx
+++ b/src/src/components/uploads/createUploads.jsx
@@ -198,6 +198,7 @@ class CreateUploads extends Component {
   }
 
   renderGroupSelect(){
+    //Select the data provider group that this data belongs to
     return (
       <div className="col3">
         <select
@@ -265,14 +266,14 @@ class CreateUploads extends Component {
             <div className='row mt-3 mb-3'>
               <div className='col-sm-12'>
                   <h3 className='float-left'>
-                  New Upload
+                  Create a new Data Upload
                 </h3>
               </div>
             </div>
 
             <div className='form-group'>
                 <label htmlFor='title'>
-                  Upload Title <span className='text-danger'>*</span>
+                  Title <span className='text-danger'>*</span>
                 </label>
                   <span className="px-2">
                     <FontAwesomeIcon
@@ -286,7 +287,7 @@ class CreateUploads extends Component {
                       type='info'
                       effect='solid'
                     >
-                      <p>Upload Title Tips</p>
+                      <p>A name for this upload. This will be used internally by Consortium members for the purposes of finding this Data Upload</p>
                     </ReactTooltip>
                   </span>
                     <input
@@ -320,7 +321,7 @@ class CreateUploads extends Component {
                       type='info'
                       effect='solid'
                     >
-                      <p>Description Tips</p>
+                      <p>A full description of this Data Upload which will be used internally by the Consortium (not displayed publicly) for the purposes of searching for the Data Upload.</p>
                     </ReactTooltip>
                   </span>
                   <React.Fragment>
@@ -338,9 +339,29 @@ class CreateUploads extends Component {
                       />
                     </div>
                   </React.Fragment>
+                </div>
 
+                <div className='form-group'>
+                  <label
+                    htmlFor='Submission_Group'>
+                    Select the data provider group that this data belongs to 
+                  </label>
+                  <span className="px-2">
+                    <FontAwesomeIcon
+                      icon={faQuestionCircle}
+                      data-tip
+                      data-for='group_tooltip'
+                    />
+                    <ReactTooltip
+                      id='group_tooltip'
+                      place='top'
+                      type='info'
+                      effect='solid'
+                    >
+                      <p>Choose the Data Provider group which the data included in this Data Upload will be associated with/is being uploaded by.</p>
+                    </ReactTooltip>
+                  </span>
                   {this.renderGroupSelect()}
-                
             
               {this.state.submit_error && (
                 <div className='alert alert-danger col-sm-12' role='alert'>

From b51914355400e6719cc0f96b123f4eebf9b6ef3f Mon Sep 17 00:00:00 2001
From: Birdie <birdmachine@blackboxjack.com>
Date: Wed, 9 Jun 2021 09:55:38 -0400
Subject: [PATCH 4/4] Adds informative text to the right of the Uploads
 creation Modal

---
 src/src/components/uploads/createUploads.jsx | 245 ++++++++++---------
 1 file changed, 128 insertions(+), 117 deletions(-)

diff --git a/src/src/components/uploads/createUploads.jsx b/src/src/components/uploads/createUploads.jsx
index cb706d21..6eab981c 100644
--- a/src/src/components/uploads/createUploads.jsx
+++ b/src/src/components/uploads/createUploads.jsx
@@ -22,9 +22,9 @@ class CreateUploads extends Component {
       errorMessage:" ",
       showNewUpload:true,
       formErrors: {
-           title: "",
-           description: ""
-         },
+          title: "",
+          description: ""
+        },
     };
 
   }
@@ -146,7 +146,7 @@ class CreateUploads extends Component {
 
   renderLoadingSpinner() {
       return (
-        <div className='text-center'>
+        <div className='text-center mx-2 my-4'>
           <FontAwesomeIcon icon={faSpinner} spin size='6x' />
           <h3>Generating your new folder.</h3>
           <h6>Please do not refresh or leave this page</h6>
@@ -255,125 +255,136 @@ class CreateUploads extends Component {
 
   render() {
     return (
-      <React.Fragment>
-        {(this.state.processingUpload) && (
-          this.renderLoadingSpinner()
-        )}
-        {(!this.state.processingUpload) && (
+      <div>
+      <div className="row">
+        <div className="col-12">
+          <h3 className='float-left'>
+            Create a new Data Upload
+          </h3>
+        </div>
+      </div>
+
 
+      <div className="row">
+        <div className="col-md-9">
           
-          <form>
-            <div className='row mt-3 mb-3'>
-              <div className='col-sm-12'>
-                  <h3 className='float-left'>
-                  Create a new Data Upload
-                </h3>
-              </div>
-            </div>
+          {(this.state.processingUpload) && (
+            this.renderLoadingSpinner()
+          )}
+          {(!this.state.processingUpload) && (
+            <div>
+              <form>
 
-            <div className='form-group'>
-                <label htmlFor='title'>
-                  Title <span className='text-danger'>*</span>
-                </label>
-                  <span className="px-2">
-                    <FontAwesomeIcon
-                      icon={faQuestionCircle}
-                      data-tip
-                      data-for='title_tooltip'
-                    />
-                    <ReactTooltip
-                      id='title_tooltip'
-                      place='top'
-                      type='info'
-                      effect='solid'
-                    >
-                      <p>A name for this upload. This will be used internally by Consortium members for the purposes of finding this Data Upload</p>
-                    </ReactTooltip>
-                  </span>
-                    <input
-                      type='text'
-                      name='title'
-                      id='Submission_Name'
-                      className={
-                        "form-control " +
-                        this.errorClass(this.state.formErrors.name)
-                      }
-                      placeholder='Upload Title'
-                      onChange={this.updateInputValue}
-                      value={this.state.e_title}
-                    />
-              </div>
-
-            <div className='form-group'>
-                <label
-                  htmlFor='description'>
-                  Description 
-                </label>
-                <span className="px-2">
-                    <FontAwesomeIcon
-                      icon={faQuestionCircle}
-                      data-tip
-                      data-for='description_tooltip'
-                    />
-                    <ReactTooltip
-                      id='description_tooltip'
-                      place='top'
-                      type='info'
-                      effect='solid'
-                    >
-                      <p>A full description of this Data Upload which will be used internally by the Consortium (not displayed publicly) for the purposes of searching for the Data Upload.</p>
-                    </ReactTooltip>
-                  </span>
-                  <React.Fragment>
-                    <div>
-                      <textarea
-                        type='text'
-                        name='description'
-                        id='Submission_Desc'
-                        cols='30'
-                        rows='5'
-                        className='form-control'
-                        placeholder='Description'
-                        onChange={this.updateInputValue}
-                        value={this.state.e_desc}
-                      />
-                    </div>
-                  </React.Fragment>
-                </div>
+                <div className='form-group'>
+                    <label htmlFor='title'>
+                      Title <span className='text-danger'>*</span>
+                    </label>
+                      <span className="px-2">
+                        <FontAwesomeIcon
+                          icon={faQuestionCircle}
+                          data-tip
+                          data-for='title_tooltip'
+                        />
+                        <ReactTooltip
+                          id='title_tooltip'
+                          place='top'
+                          type='info'
+                          effect='solid'
+                        >
+                          <p>A name for this upload. This will be used internally by Consortium members for the purposes of finding this Data Upload</p>
+                        </ReactTooltip>
+                      </span>
+                        <input
+                          type='text'
+                          name='title'
+                          id='Submission_Name'
+                          className={
+                            "form-control " +
+                            this.errorClass(this.state.formErrors.name)
+                          }
+                          placeholder='Upload Title'
+                          onChange={this.updateInputValue}
+                          value={this.state.e_title}
+                        />
+                  </div>
 
                 <div className='form-group'>
-                  <label
-                    htmlFor='Submission_Group'>
-                    Select the data provider group that this data belongs to 
-                  </label>
-                  <span className="px-2">
-                    <FontAwesomeIcon
-                      icon={faQuestionCircle}
-                      data-tip
-                      data-for='group_tooltip'
-                    />
-                    <ReactTooltip
-                      id='group_tooltip'
-                      place='top'
-                      type='info'
-                      effect='solid'
-                    >
-                      <p>Choose the Data Provider group which the data included in this Data Upload will be associated with/is being uploaded by.</p>
-                    </ReactTooltip>
-                  </span>
-                  {this.renderGroupSelect()}
-            
-              {this.state.submit_error && (
-                <div className='alert alert-danger col-sm-12' role='alert'>
-                  Oops! Something went wrong. Please contact administrator for help.
-                </div>
-              )}
-              </div>
-            {this.renderActionButtons()}
-          </form>
+                    <label
+                      htmlFor='description'>
+                      Description 
+                    </label>
+                    <span className="px-2">
+                        <FontAwesomeIcon
+                          icon={faQuestionCircle}
+                          data-tip
+                          data-for='description_tooltip'
+                        />
+                        <ReactTooltip
+                          id='description_tooltip'
+                          place='top'
+                          type='info'
+                          effect='solid'
+                        >
+                          <p>A full description of this Data Upload which will be used internally by the Consortium (not displayed publicly) for the purposes of searching for the Data Upload.</p>
+                        </ReactTooltip>
+                      </span>
+                      <React.Fragment>
+                        <div>
+                          <textarea
+                            type='text'
+                            name='description'
+                            id='Submission_Desc'
+                            cols='30'
+                            rows='5'
+                            className='form-control'
+                            placeholder='Description'
+                            onChange={this.updateInputValue}
+                            value={this.state.e_desc}
+                          />
+                        </div>
+                      </React.Fragment>
+                    </div>
+
+                    <div className='form-group'>
+                      <label
+                        htmlFor='Submission_Group'>
+                        Select the data provider group that this data belongs to 
+                      </label>
+                      <span className="px-2">
+                        <FontAwesomeIcon
+                          icon={faQuestionCircle}
+                          data-tip
+                          data-for='group_tooltip'
+                        />
+                        <ReactTooltip
+                          id='group_tooltip'
+                          place='top'
+                          type='info'
+                          effect='solid'
+                        >
+                          <p>Choose the Data Provider group which the data included in this Data Upload will be associated with/is being uploaded by.</p>
+                        </ReactTooltip>
+                      </span>
+                      {this.renderGroupSelect()}
+                
+                  {this.state.submit_error && (
+                    <div className='alert alert-danger col-sm-12' role='alert'>
+                      Oops! Something went wrong. Please contact administrator for help.
+                    </div>
+                  )}
+                  </div>
+                {this.renderActionButtons()}
+              </form>
+            </div>
           )}
-        </React.Fragment>
-    );
+
+        </div>
+        <div className='col-md-3 mt-4'>
+          Register a new Data Upload which will be used to bulk upload data which will organized by the HIVE into multiple Datasets. For more information about registering and uploading data see the <a href="https://docs.google.com/document/d/1KR2TC2y-NIjbBRHTu0giSZATMUfPKxN_/edit" target="new"> Data Submission Guide.</a>
+        </div>
+      </div>
+      </div>
+      );
   }
 }