Merge pull request #1514 from hubmapconsortium/UploadIntentFields

Upload intent fields
hubmapconsortium · Dec 18, 2024 · 91a405f · 91a405f
2 parents a214830 + 213a522
commit 91a405f
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 10 deletions.
diff --git a/src/src/components/uploads/createUploads.jsx b/src/src/components/uploads/createUploads.jsx
@@ -111,6 +111,14 @@ class CreateUploads extends Component {
       ){ 
         this.handleError("Please fill in all required fields before submitting.");
         return;
+      }else if(
+        (!this.state.inputValue_title || this.state.inputValue_title ==="") || 
+        (!this.state.inputValue_desc || this.state.inputValue_desc ==="") || 
+        (!this.state.inputValue_organ || this.state.inputValue_organ ==="") || 
+        (!this.state.inputValue_type || this.state.inputValue_type ==="")
+      ){
+        this.handleError("Above marked fields are required.");
+        return
       }else{
         this.handleError("The system has encountered an unrecognized error during validation. \
           Please try again or contact the help desk for further assistance.");
@@ -221,7 +229,7 @@ class CreateUploads extends Component {
         console.debug('%c◉ Cant Match: ', 'color:#00ff7b', evt.target.id);
       }
 
-      this.validateForm();
+      // this.validateForm();
     }
   }
 
@@ -500,7 +508,7 @@ class CreateUploads extends Component {
                     <div className='form-group mb-4'>
                       <label
                         htmlFor='organ'>
-                        Organ <span className='text-danger'>*</span>
+                        Intended Organ Type <span className='text-danger'>*</span>
                       </label>
                       <span className="px-2">
                           <FontAwesomeIcon
@@ -514,7 +522,7 @@ class CreateUploads extends Component {
                             type='info'
                             effect='solid'
                           >
-                            <p>The Organ In Question</p>
+                            <p>Select the organ type that the data in this Upload is intended to be derived from.</p>
                           </ReactTooltip>
                         </span>
                           {this.renderOrganDropdown()}
@@ -523,7 +531,7 @@ class CreateUploads extends Component {
                     <div className='form-group mb-1'>
                       <label
                         htmlFor='datasetTypes'>
-                        Dataset Type <span className='text-danger'>*</span>
+                        Intended Dataset Type <span className='text-danger'>*</span>
                       </label>
                       <span className="px-2">
                           <FontAwesomeIcon
@@ -537,7 +545,7 @@ class CreateUploads extends Component {
                             type='info'
                             effect='solid'
                           >
-                            <p>The Type of Dataset In Question</p>
+                            <p>Select the data type that this Upload will contain.</p>
                           </ReactTooltip>
                         </span>
                         {this.state.datasetTypes.length > 0 && (

diff --git a/src/src/components/uploads/editUploads.jsx b/src/src/components/uploads/editUploads.jsx
@@ -961,13 +961,16 @@ renderReorganizeButton() {
   renderDatasetTypeDropdown(){
     return (
       <Select
-        fullWidth
+        // fullWidth
         size="small"
         name="intended_dataset_type"
         className={
           "form-control " +
           this.errorClass(this.state.formErrors.intended_dataset_type)
         }
+        sx={{
+          margin:"10px auto"
+        }}
         value={this.state.intended_dataset_type} 
         id="intended_dataset_type" 
         labelid="type_label"
@@ -990,7 +993,7 @@ renderReorganizeButton() {
     // console.debug('%c◉ organList ', 'color:#0033ff', this.state.organList);
     return (
       <Select
-        fullWidth
+        // fullWidth
         size="small"
         name="intended_organ"
         className={
@@ -1003,7 +1006,7 @@ renderReorganizeButton() {
         value={this.state.intended_organ} 
         id="intended_organ" 
         labelid="organ_label"
-        label="Organ"
+        label="Intended Organ Type"
         onChange={(e) => this.updateInputValue(e)}>
         <MenuItem key={0}  ></MenuItem>
         {Object.entries(this.state.organList).map(([key, value], index) => {
@@ -1263,9 +1266,45 @@ renderReorganizeButton() {
                 </div>
               </div>
             )}
+            <div className="row mt-4  ">
+              <div className='form-group col-6'> 
+                <label htmlFor='Organ'>Intended Organ Type <span className='text-danger'>*</span></label>
+                <span className="px-2">
+                  <FontAwesomeIcon
+                    icon={faQuestionCircle}
+                    data-tip
+                    data-for='Organ_tooltip'/>
+                  <ReactTooltip
+                    id='Organ_tooltip'
+                    place='top'
+                    type='info'
+                    effect='solid'>
+                    <p>Select the organ type that the data in this Upload is intended to be derived from.</p>
+                  </ReactTooltip>
+                </span>
+                {this.renderOrganDropdown()}
+              </div>
+              <div className='form-group col-6'> 
+                <label htmlFor='Dataset Type'>Intended Dataset Type <span className='text-danger'>*</span></label>
+                <span className="px-2">
+                  <FontAwesomeIcon
+                    icon={faQuestionCircle}
+                    data-tip
+                    data-for='Dataset Type_tooltip'/>
+                  <ReactTooltip
+                    id='Dataset Type_tooltip'
+                    place='top'
+                    type='info'
+                    effect='solid'>
+                    <p>Select the data type that this Upload will contain.</p>
+                  </ReactTooltip>
+                </span>
+                {this.renderDatasetTypeDropdown()}  
+              </div>
+            </div>
+
 
-            {this.renderOrganDropdown()}
-            {this.renderDatasetTypeDropdown()}
+
             {!this.state.data_admin && this.state.assigned_to_group_name && this.state.ingest_task && (
               <div className="row mt-4  ">
                 <div className='form-group col-6'>