From d74c73b33bb0cc67d8e9aa0139c9fb30191edb64 Mon Sep 17 00:00:00 2001
From: arty-aeroai <arturo@aeroai.io>
Date: Tue, 14 May 2024 23:25:45 -0700
Subject: [PATCH] refactored use of Modal

---
 .../public/components/BootstrapField.jsx      |  47 ++---
 .../public/components/IonAssetButton.jsx      |   8 +-
 .../public/components/UploadDialog.jsx        | 165 +++++++++++-------
 3 files changed, 125 insertions(+), 95 deletions(-)

diff --git a/coreplugins/cesiumion/public/components/BootstrapField.jsx b/coreplugins/cesiumion/public/components/BootstrapField.jsx
index 4c0138ee..360a98c2 100644
--- a/coreplugins/cesiumion/public/components/BootstrapField.jsx
+++ b/coreplugins/cesiumion/public/components/BootstrapField.jsx
@@ -1,12 +1,5 @@
 import { Formik, Field, getIn } from "formik";
-
-import {
-	FormGroup,
-	ControlLabel,
-	FormControl,
-	Checkbox,
-	HelpBlock
-} from "react-bootstrap";
+import { Checkbox } from "../../../../app/static/app/js/components/Toggle";
 
 const BootstrapFieldComponent = ({
 	field,
@@ -18,28 +11,26 @@ const BootstrapFieldComponent = ({
 	...props
 }) => {
 	const isError = getIn(errors, field.name) && getIn(touched, field.name);
-	const errorMsg = getIn(errors, field.name);
-	let ControlComponent = FormControl;
+    const errorMsg = getIn(errors, field.name);
+    let ControlComponent = 'input';
 
-	const testType = type.toLowerCase();
-	if (testType === "checkbox") ControlComponent = Checkbox;
-	else if (testType === "textarea" || testType === "select")
-		props.componentClass = testType;
-	else props.type = type;
+    const testType = type.toLowerCase();
+    if (testType === "checkbox") ControlComponent = Checkbox;
+    else if (testType === "textarea" || testType === "select")
+        ControlComponent = testType;
+    else props.type = type;
 
-	return (
-		<FormGroup
-			controlId={field.name}
-			validationState={isError ? "error" : null}
-			style={{ marginLeft: 0, marginRight: 0 }}
-		>
-			{label && <ControlLabel>{label}</ControlLabel>}
-			<ControlComponent {...field} {...props} />
-			{isError && <HelpBlock>{errorMsg}</HelpBlock>}
-			{help && !isError && <HelpBlock>{help}</HelpBlock>}
-			{isError && showIcon && <FormControl.Feedback />}
-		</FormGroup>
-	);
+    return (
+        <div
+            id={field.name}
+            style={{ marginLeft: 0, marginRight: 0 }}
+        >
+            {label && <label>{label}</label>}
+            <ControlComponent {...field} {...props} />
+            {isError && <span>{errorMsg}</span>}
+            {help && !isError && <span>{help}</span>}
+        </div>
+    );
 };
 
 const BootstrapField = props => (
diff --git a/coreplugins/cesiumion/public/components/IonAssetButton.jsx b/coreplugins/cesiumion/public/components/IonAssetButton.jsx
index f0462dc3..7af52c06 100644
--- a/coreplugins/cesiumion/public/components/IonAssetButton.jsx
+++ b/coreplugins/cesiumion/public/components/IonAssetButton.jsx
@@ -22,12 +22,10 @@ export default class IonAssetButton extends PureComponent {
 		} = this.props;
 	
 		const menuItems = assets
-			.sort((a, b) =>
-				AssetStyles[a].name.localeCompare(AssetStyles[b].name)
-			)
+			.sort((a, b) => AssetStyles[a].name.localeCompare(AssetStyles[b].name))
 			.map(asset => (
-				<li key={asset}>
-					<a style={{cursor:'pointer'}} onClick={this.handleClick(asset)}>
+				<li>
+					<a key={asset} style={{cursor:'pointer'}} onClick={this.handleClick(asset)}>
 						<AssetComponent asset={asset} showIcon={true} />
 					</a>
 				</li>
diff --git a/coreplugins/cesiumion/public/components/UploadDialog.jsx b/coreplugins/cesiumion/public/components/UploadDialog.jsx
index 48bcdd7f..5fed14ab 100644
--- a/coreplugins/cesiumion/public/components/UploadDialog.jsx
+++ b/coreplugins/cesiumion/public/components/UploadDialog.jsx
@@ -1,9 +1,8 @@
 import React, { Component, Fragment } from "react";
 
-import FormDialog from "webodm/components/FormDialog";
+import FormDialog from "../../../../app/static/app/js/components/FormDialog";
 import { Formik } from "formik";
 import * as Yup from "yup";
-import { Row, Col, Modal, Button } from "react-bootstrap";
 
 import BootstrapField from "./BootstrapField";
 import FormikErrorFocus from "./FormikErrorFocus";
@@ -159,67 +158,109 @@ export default class UploadDialog extends Component {
 			...initialValues
 		};
 
+		// return (
+		// 	<Modal className={"ion-upload"} onHide={onHide} {...options}>
+		// 		<Modal.Header closeButton>
+		// 			<Modal.Title>
+		// 				<i className={"fa fa-cesium"} /> {title}
+		// 			</Modal.Title>
+		// 		</Modal.Header>
+		// 		<Formik
+		// 			initialValues={mergedInitialValues}
+		// 			onSubmit={this.onSubmit}
+		// 			enableReinitialize
+		// 			validationSchema={this.getValidation()}
+		// 		>
+		// 			{({ handleSubmit = () => {} }) => (
+		// 				<form>
+		// 					<Modal.Body>
+		// 						<BootstrapField
+		// 							name={"name"}
+		// 							label={"Name: "}
+		// 							type={"text"}
+		// 						/>
+		// 						<BootstrapField
+		// 							name={"description"}
+		// 							label={"Description: "}
+		// 							type={"textarea"}
+		// 							rows={"3"}
+		// 						/>
+		// 						<BootstrapField
+		// 							name={"attribution"}
+		// 							label={"Attribution: "}
+		// 							type={"text"}
+		// 						/>
+		// 						{this.getSourceFields()}
+
+		// 						<FormikErrorFocus />
+		// 					</Modal.Body>
+
+		// 					<Modal.Footer>
+		// 						<Button onClick={onHide}>Close</Button>
+		// 						{isLoading && (
+		// 							<Button bsStyle="primary" disabled>
+		// 								<i
+		// 									className={"fa fa-sync fa-spin"}
+		// 								/>
+		// 								Submitting...
+		// 							</Button>
+		// 						)}
+		// 						{!isLoading && (
+		// 							<Button
+		// 								bsStyle="primary"
+		// 								onClick={handleSubmit}
+		// 							>
+		// 								<i className={"fa fa-upload"} />
+		// 								Submit
+		// 							</Button>
+		// 						)}
+		// 					</Modal.Footer>
+		// 				</form>
+		// 			)}
+		// 		</Formik>
+		// 	</Modal>
+		// );
 		return (
-			<Modal className={"ion-upload"} onHide={onHide} {...options}>
-				<Modal.Header closeButton>
-					<Modal.Title>
-						<i className={"fa fa-cesium"} /> {title}
-					</Modal.Title>
-				</Modal.Header>
-				<Formik
-					initialValues={mergedInitialValues}
-					onSubmit={this.onSubmit}
-					enableReinitialize
-					validationSchema={this.getValidation()}
-				>
-					{({ handleSubmit = () => {} }) => (
-						<form>
-							<Modal.Body>
-								<BootstrapField
-									name={"name"}
-									label={"Name: "}
-									type={"text"}
-								/>
-								<BootstrapField
-									name={"description"}
-									label={"Description: "}
-									type={"textarea"}
-									rows={"3"}
-								/>
-								<BootstrapField
-									name={"attribution"}
-									label={"Attribution: "}
-									type={"text"}
-								/>
-								{this.getSourceFields()}
+            <FormDialog
+                title={title}
+                show={this.props.show}
+                onHide={onHide}
+                handleSaveFunction={this.onSubmit}
+                saveLabel={isLoading ? "Submitting..." : "Submit"}
+                savingLabel="Submitting..."
+                saveIcon={isLoading ? "fa fa-sync fa-spin" : "fa fa-upload"}
+            >
+                <Formik
+                    initialValues={mergedInitialValues}
+                    onSubmit={this.onSubmit}
+                    enableReinitialize
+                    validationSchema={this.getValidation()}
+                >
+                    {({ handleSubmit = () => {} }) => (
+                        <form>
+                            <BootstrapField
+                                name={"name"}
+                                label={"Name: "}
+                                type={"text"}
+                            />
+                            <BootstrapField
+                                name={"description"}
+                                label={"Description: "}
+                                type={"textarea"}
+                                rows={"3"}
+                            />
+                            <BootstrapField
+                                name={"attribution"}
+                                label={"Attribution: "}
+                                type={"text"}
+                            />
+                            {this.getSourceFields()}
 
-								<FormikErrorFocus />
-							</Modal.Body>
-
-							<Modal.Footer>
-								<Button onClick={onHide}>Close</Button>
-								{isLoading && (
-									<Button bsStyle="primary" disabled>
-										<i
-											className={"fa fa-sync fa-spin"}
-										/>
-										Submitting...
-									</Button>
-								)}
-								{!isLoading && (
-									<Button
-										bsStyle="primary"
-										onClick={handleSubmit}
-									>
-										<i className={"fa fa-upload"} />
-										Submit
-									</Button>
-								)}
-							</Modal.Footer>
-						</form>
-					)}
-				</Formik>
-			</Modal>
-		);
+                            <FormikErrorFocus />
+                        </form>
+                    )}
+                </Formik>
+            </FormDialog>
+        );
 	}
 }