From 908c95639dea23bc2820cd945352eda0515ba42c Mon Sep 17 00:00:00 2001
From: Rida Abou-Haidar <rida.abou-haidar@mcin.ca>
Date: Mon, 16 Dec 2024 12:18:37 -0500
Subject: [PATCH] add form element to modal

added changes from lack of rebase

updated formelement props

modify uses of modal to avoid form nesting

resolving lint
---
 jsx/Form.d.ts                                 |  18 +--
 jsx/Modal.tsx                                 |  29 ++--
 .../data_release/jsx/managePermissionsForm.js | 131 ++++++++--------
 .../jsx/definefilters.importcsvmodal.tsx      | 142 +++++++++---------
 .../dataquery/jsx/welcome.adminquerymodal.tsx |  68 ++++-----
 .../dataquery/jsx/welcome.namequerymodal.tsx  |  22 ++-
 6 files changed, 203 insertions(+), 207 deletions(-)

diff --git a/jsx/Form.d.ts b/jsx/Form.d.ts
index 4b34465e99a..8c9ecd596c1 100644
--- a/jsx/Form.d.ts
+++ b/jsx/Form.d.ts
@@ -5,17 +5,17 @@ type formElement = {
     type: string
 };
 type formElementProps = {
-    name: string
-    id: string
-    method: 'POST' | 'GET',
-    action: string
-    class: string
-    columns: number
-    formElements: {[elementName: string]: formElement}
+    name?: string
+    id?: string
+    method?: 'POST' | 'GET' = 'POST',
+    action?: string = '',
+    class?: string
+    columns?: number
+    formElements?: {[elementName: string]: formElement}
     onSubmit: (FormEvent) => void
-    onUserInput : (name: string, value: string) => void
+    onUserInput?: (name: string, value: string) => void
     children: ReactNode
-    fieUpload: boolean
+    fileUpload?: boolean = false
 };
 /**
  * FormElement class. See Form.js
diff --git a/jsx/Modal.tsx b/jsx/Modal.tsx
index f21fb9e35a3..af283baea2d 100644
--- a/jsx/Modal.tsx
+++ b/jsx/Modal.tsx
@@ -3,6 +3,7 @@ import Swal from 'sweetalert2';
 import Loader from './Loader';
 import {
   ButtonElement,
+  FormElement,
 } from 'jsx/Form';
 
 export type ModalProps = PropsWithChildren<{
@@ -88,11 +89,7 @@ const Modal = ({
    */
   const submitButton = () => {
     if (onSubmit && !(loading || success)) { // Show button if conditions met
-      return (
-        <div style={submitStyle}>
-          <ButtonElement onUserInput={handleSubmit}/>
-        </div>
-      );
+      return <div style={submitStyle}><ButtonElement/></div>;
     }
   };
 
@@ -195,6 +192,17 @@ const Modal = ({
     </div>
   );
 
+  const content = (
+    <>
+      <div style={bodyStyle}>{show && children}</div>
+      <div style={footerStyle}>
+        {loader}
+        {successDisplay}
+        {submitButton()}
+      </div>
+    </>
+  );
+
   return (
     <div style={modalContainer} onClick={handleClose}>
       <div style={modalContent} onClick={(e) => e.stopPropagation()}>
@@ -203,12 +211,11 @@ const Modal = ({
           <span style={glyphStyle} onClick={handleClose}>×</span>
         </div>
         <div>
-          <div style={bodyStyle}>{show && children}</div>
-          <div style={footerStyle}>
-            {loader}
-            {successDisplay}
-            {submitButton()}
-          </div>
+          {onSubmit ? (
+            <FormElement onSubmit={handleSubmit}>
+              {content}
+            </FormElement>
+          ) : content}
         </div>
       </div>
     </div>
diff --git a/modules/data_release/jsx/managePermissionsForm.js b/modules/data_release/jsx/managePermissionsForm.js
index d98602a8856..59423c4fce8 100644
--- a/modules/data_release/jsx/managePermissionsForm.js
+++ b/modules/data_release/jsx/managePermissionsForm.js
@@ -4,7 +4,6 @@ import Loader from 'jsx/Loader';
 import swal from 'sweetalert2';
 import Modal from 'Modal';
 import {
-  FormElement,
   CheckboxElement,
   StaticElement,
   SearchableDropdown,
@@ -89,74 +88,72 @@ class ManagePermissionsForm extends Component {
         onClose={this.props.onClose}
         onSubmit={this.handleSubmit}
       >
-        <FormElement name="manage_permissions">
-          <SearchableDropdown name="user"
-            label="Manage Versions a User has access to"
-            placeHolder="Search for a User"
-            options={options.users}
-            strictSearch={true}
-            onUserInput={this.setFormData}
-            value={this.state.user}
-          />
-          {this.state.user && <StaticElement
-            label={'Versions'}
-            text={Object.values(options.versions).map((version) =>
-              <div>
-                <CheckboxElement
-                  name={'versionsByUser'}
-                  label={version}
-                  value={data[this.state.user].versions.includes(version)}
-                  onUserInput={(formElement, checked) =>
-                    this.setFormData(
-                      'versionsByUser', {
-                        userId: this.state.user, version, checked,
-                      }
-                    )
-                  }
-                /><br/>
-              </div>
-            )}
-          />
-          }
-          <SearchableDropdown
-            name="version"
-            label="Manage Users with access to a Version"
-            placeHolder="Search for a Version"
-            options={options.versions}
-            strictSearch={true}
-            onUserInput={this.setFormData}
-            value={this.state.version}
-          />
-          {this.state.version &&
-            <StaticElement
-              label={'Users'}
-              text={Object.values(this.state.originalData).map((user) => {
-                if (user.versions.includes(this.state.version)) {
-                  return <div>
-                    <CheckboxElement
-                      name={'usersByVersion'}
-                      label={user.name}
-                      value={
-                        data[user.id].versions.includes(this.state.version)
-                      }
-                      onUserInput={(_, checked) =>
-                        this.setFormData(
-                          'usersByVersion',
-                          {
-                            userId: user.id,
-                            checked,
-                            version: this.state.version,
-                          }
-                        )
-                      }
-                    /><br/>
-                  </div>;
+        <SearchableDropdown name="user"
+          label="Manage Versions a User has access to"
+          placeHolder="Search for a User"
+          options={options.users}
+          strictSearch={true}
+          onUserInput={this.setFormData}
+          value={this.state.user}
+        />
+        {this.state.user && <StaticElement
+          label={'Versions'}
+          text={Object.values(options.versions).map((version) =>
+            <div>
+              <CheckboxElement
+                name={'versionsByUser'}
+                label={version}
+                value={data[this.state.user].versions.includes(version)}
+                onUserInput={(formElement, checked) =>
+                  this.setFormData(
+                    'versionsByUser', {
+                      userId: this.state.user, version, checked,
+                    }
+                  )
                 }
+              /><br/>
+            </div>
+          )}
+        />
+        }
+        <SearchableDropdown
+          name="version"
+          label="Manage Users with access to a Version"
+          placeHolder="Search for a Version"
+          options={options.versions}
+          strictSearch={true}
+          onUserInput={this.setFormData}
+          value={this.state.version}
+        />
+        {this.state.version &&
+          <StaticElement
+            label={'Users'}
+            text={Object.values(this.state.originalData).map((user) => {
+              if (user.versions.includes(this.state.version)) {
+                return <div>
+                  <CheckboxElement
+                    name={'usersByVersion'}
+                    label={user.name}
+                    value={
+                      data[user.id].versions.includes(this.state.version)
+                    }
+                    onUserInput={(_, checked) =>
+                      this.setFormData(
+                        'usersByVersion',
+                        {
+                          userId: user.id,
+                          checked,
+                          version: this.state.version,
+                        }
+                      )
+                    }
+                  /><br/>
+                </div>;
               }
-              )}
-            />
-          }
-        </FormElement>
+            }
+            )}
+          />
+        }
       </Modal>
     );
   }
diff --git a/modules/dataquery/jsx/definefilters.importcsvmodal.tsx b/modules/dataquery/jsx/definefilters.importcsvmodal.tsx
index f3bf52a8c70..56642d56174 100644
--- a/modules/dataquery/jsx/definefilters.importcsvmodal.tsx
+++ b/modules/dataquery/jsx/definefilters.importcsvmodal.tsx
@@ -127,80 +127,76 @@ function ImportCSVModal(props: {
     throwWarning={true}
     onClose={props.closeModal}
     onSubmit={submitPromise}>
-    <div>
-      <form>
-        <fieldset>
-          <div>
-            <dl>
-              <dt style={dtstyle}>CSV containing list of</dt>
-              <dd>
-                <input type="radio" name="csvtype"
-                  checked={csvType == 'candidate'}
-                  onChange={() => setCSVType('candidate')}
-                /> Candidates
-                <input type="radio" name="csvtype"
-                  style={{marginLeft: '1.5em'}}
-                  checked={csvType == 'session'}
-                  onChange={() => setCSVType('session')}
-                /> Sessions
-              </dd>
-              <dt style={dtstyle}>Candidate identifier type</dt>
-              <dd><input type="radio" name="candidtype"
-                checked={idType == 'CandID'}
-                onChange={() => setIdType('CandID')}
-              /> DCC ID
-              <input type="radio" name="candidtype"
-                style={{marginLeft: '1.5em'}}
-                checked={idType == 'PSCID'}
-                onChange={() => setIdType('PSCID')}
-              /> PSCID
-              </dd>
-              <dt style={dtstyle}>
-                                Does CSV contain a header line?
-              </dt>
-              <dd><input type="radio" name="header"
-                checked={csvHeader == true}
-                onChange={() => setCSVHeader(true)}
-              /> Yes
-              <input type="radio" name="header"
-                style={{marginLeft: '1.5em'}}
-                checked={csvHeader == false}
-                onChange={() => setCSVHeader(false)}
-              /> No
-              </dd>
-              <dt style={dtstyle}>CSV File</dt>
-              <dd><FileElement label='' name="csvfile"
-                value={csvFile}
-                onUserInput={
-                  (filename: string, file: string) => {
-                    setCSVFile(file);
-                    const papaparseConfig:
-                                            Papa.ParseConfig<any> = {
-                                              skipEmptyLines: true,
-                                              complete: csvParsed,
-                                              // Setting this to try would cause
-                                              // papaparse to return an object
-                                              // instead of string. We just skip
-                                              // the first row if the user says
-                                              // they have a header when parsing
-                                              // results.
-                                              header: false,
-                                            };
-                    // Only 1 column, papaparse can't detect
-                    // the delimiter if it's not explicitly
-                    // specified.
-                    if (csvType == 'candidate') {
-                      papaparseConfig.delimiter = ',';
-                    }
-                    Papa.parse(file, papaparseConfig);
-                  }
+    <fieldset>
+      <div>
+        <dl>
+          <dt style={dtstyle}>CSV containing list of</dt>
+          <dd>
+            <input type="radio" name="csvtype"
+              checked={csvType == 'candidate'}
+              onChange={() => setCSVType('candidate')}
+            /> Candidates
+            <input type="radio" name="csvtype"
+              style={{marginLeft: '1.5em'}}
+              checked={csvType == 'session'}
+              onChange={() => setCSVType('session')}
+            /> Sessions
+          </dd>
+          <dt style={dtstyle}>Candidate identifier type</dt>
+          <dd><input type="radio" name="candidtype"
+            checked={idType == 'CandID'}
+            onChange={() => setIdType('CandID')}
+          /> DCC ID
+          <input type="radio" name="candidtype"
+            style={{marginLeft: '1.5em'}}
+            checked={idType == 'PSCID'}
+            onChange={() => setIdType('PSCID')}
+          /> PSCID
+          </dd>
+          <dt style={dtstyle}>
+                            Does CSV contain a header line?
+          </dt>
+          <dd><input type="radio" name="header"
+            checked={csvHeader == true}
+            onChange={() => setCSVHeader(true)}
+          /> Yes
+          <input type="radio" name="header"
+            style={{marginLeft: '1.5em'}}
+            checked={csvHeader == false}
+            onChange={() => setCSVHeader(false)}
+          /> No
+          </dd>
+          <dt style={dtstyle}>CSV File</dt>
+          <dd><FileElement label='' name="csvfile"
+            value={csvFile}
+            onUserInput={
+              (filename: string, file: string) => {
+                setCSVFile(file);
+                const papaparseConfig:
+                                        Papa.ParseConfig<any> = {
+                                          skipEmptyLines: true,
+                                          complete: csvParsed,
+                                          // Setting this to try would cause
+                                          // papaparse to return an object
+                                          // instead of string. We just skip
+                                          // the first row if the user says
+                                          // they have a header when parsing
+                                          // results.
+                                          header: false,
+                                        };
+                // Only 1 column, papaparse can't detect
+                // the delimiter if it's not explicitly
+                // specified.
+                if (csvType == 'candidate') {
+                  papaparseConfig.delimiter = ',';
                 }
-              /></dd>
-            </dl>
-          </div>
-        </fieldset>
-      </form>
-    </div>
+                Papa.parse(file, papaparseConfig);
+              }
+            }
+          /></dd>
+        </dl>
+      </div>
+    </fieldset>
   </Modal>;
 }
 
diff --git a/modules/dataquery/jsx/welcome.adminquerymodal.tsx b/modules/dataquery/jsx/welcome.adminquerymodal.tsx
index ff45d1c4bb4..ea7a839c5b9 100644
--- a/modules/dataquery/jsx/welcome.adminquerymodal.tsx
+++ b/modules/dataquery/jsx/welcome.adminquerymodal.tsx
@@ -68,41 +68,39 @@ function AdminQueryModal(props: {
     throwWarning={true}
     onClose={props.closeModal}
     onSubmit={submitPromise}>
-    <form style={{width: '100%', padding: '1em'}}>
-      <FieldsetElement
-        legend='Study Query'>
-        <TextboxElement name='queryname'
-          value={queryName}
-          placeholder="Query name"
-          onUserInput={
-            (name: string, value: string) => setQueryName(value)
-          }
-        />
-        <CheckboxElement name='topquery'
-          value={topQuery}
-          onUserInput={
-            (name: string, value: boolean) => setTopQuery(value)
-          }
-          label='Pin Study Query'
-        />
-        <CheckboxElement name='dashboardquery'
-          value={dashboardQuery}
-          label='Pin Dashboard Summary'
-          onUserInput={
-            (name: string, value: boolean) =>
-              setDashboardQuery(value)
-          }
-        />
-        <CheckboxElement name='loginpage'
-          value={loginQuery}
-          label='Pin To Login Page'
-          onUserInput={
-            (name: string, value: boolean) =>
-              setLoginQuery(value)
-          }
-        />
-      </FieldsetElement>
-    </form>
+    <FieldsetElement
+      legend='Study Query'>
+      <TextboxElement name='queryname'
+        value={queryName}
+        placeholder="Query name"
+        onUserInput={
+          (name: string, value: string) => setQueryName(value)
+        }
+      />
+      <CheckboxElement name='topquery'
+        value={topQuery}
+        onUserInput={
+          (name: string, value: boolean) => setTopQuery(value)
+        }
+        label='Pin Study Query'
+      />
+      <CheckboxElement name='dashboardquery'
+        value={dashboardQuery}
+        label='Pin Dashboard Summary'
+        onUserInput={
+          (name: string, value: boolean) =>
+            setDashboardQuery(value)
+        }
+      />
+      <CheckboxElement name='loginpage'
+        value={loginQuery}
+        label='Pin To Login Page'
+        onUserInput={
+          (name: string, value: boolean) =>
+            setLoginQuery(value)
+        }
+      />
+    </FieldsetElement>
   </Modal>;
 }
 
diff --git a/modules/dataquery/jsx/welcome.namequerymodal.tsx b/modules/dataquery/jsx/welcome.namequerymodal.tsx
index 138ee981459..189e5ac880e 100644
--- a/modules/dataquery/jsx/welcome.namequerymodal.tsx
+++ b/modules/dataquery/jsx/welcome.namequerymodal.tsx
@@ -47,18 +47,16 @@ function NameQueryModal(props: {
     throwWarning={true}
     onClose={props.closeModal}
     onSubmit={submitPromise}>
-    <form style={{width: '100%', padding: '1em'}}>
-      <FieldsetElement
-        legend='Query name'>
-        <TextboxElement name='queryname'
-          value={queryName}
-          placeholder="Enter your query name"
-          onUserInput={
-            (name: string, value: string) => setQueryName(value)
-          }
-        />
-      </FieldsetElement>
-    </form>
+    <FieldsetElement
+      legend='Query name'>
+      <TextboxElement name='queryname'
+        value={queryName}
+        placeholder="Enter your query name"
+        onUserInput={
+          (name: string, value: string) => setQueryName(value)
+        }
+      />
+    </FieldsetElement>
   </Modal>;
 }