React and RJSF upgrade (#142)

* Remove useless data confirm modal js * Upgrade react 18 and rjsf 5.0 * Use React 18 new createRoot API * Patch select widget style to make rjsf work with bootstrap 5
whatsopt · Nov 4, 2022 · 954e881 · 954e881
1 parent 52eeb22
commit 954e881
Show file tree

Hide file tree

Showing 16 changed files with 336 additions and 612 deletions.
diff --git a/app/javascript/mda_viewer/components/DistributionModals.jsx b/app/javascript/mda_viewer/components/DistributionModals.jsx
@@ -1,8 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import validator from '@rjsf/validator-ajv8';
 import Form from '@rjsf/bootstrap-4';
 import update from 'immutability-helper';
 
+// Patch bootstrap 4 theme with bootstrap 5 select widget,
+// otherwise bootstrap 4 theme is compatible with Bootstrap 5
+import SelectWidget from '../../utils/RjsfSelectWidgetBs5';
+
 const NORMAL = 'Normal';
 const BETA = 'Beta';
 const GAMMA = 'Gamma';
@@ -15,7 +20,6 @@ const SCHEMA = {
       type: 'string',
       title: 'Distribution Kind',
       enum: [NORMAL, BETA, GAMMA, UNIFORM],
-      enumNames: [NORMAL, BETA, GAMMA, UNIFORM],
       default: NORMAL,
     },
   },
@@ -323,6 +327,8 @@ class DistributionModal extends React.Component {
                   schema={SCHEMA}
                   formData={formData}
                   onChange={this.handleChange}
+                  validator={validator}
+                  widgets={{ SelectWidget }}
                 >
                   <button type="button" className="d-none" />
                 </Form>

diff --git a/app/javascript/mda_viewer/components/OpenmdaoImplEditor.jsx b/app/javascript/mda_viewer/components/OpenmdaoImplEditor.jsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-// workaround to avoid warning in console
-// https://github.com/rjsf-team/react-jsonschema-form/issues/2648
-// import Form from '@rjsf/core';
-// instead of
+import validator from '@rjsf/validator-ajv8';
 import Form from '@rjsf/bootstrap-4';
 
+// Patch bootstrap 4 theme with bootstrap 5 select widget,
+// otherwise bootstrap 4 theme is compatible with Bootstrap 5
+import SelectWidget from '../../utils/RjsfSelectWidgetBs5';
+
 const SCHEMA_GENERAL = {
   type: 'object',
   properties: {
@@ -31,31 +32,18 @@ const SCHEMA_GENERAL = {
             optimization: {
               type: 'string',
               title: 'Optimization',
-              enum: [
-                'scipy_optimizer_cobyla',
-                'scipy_optimizer_bfgs',
-                'scipy_optimizer_slsqp',
-                'pyoptsparse_optimizer_conmin',
-                // "pyoptsparse_optimizer_fsqp",
-                'pyoptsparse_optimizer_slsqp',
-                // "pyoptsparse_optimizer_psqp",
-                'pyoptsparse_optimizer_nsga2',
-                'pyoptsparse_optimizer_snopt',
-                'onerasego_optimizer_segomoe',
-                'egobox_optimizer_egor',
-              ],
-              enumNames: [
-                'Scipy - COBYLA',
-                'Scipy - BFGS',
-                'Scipy - SLSQP',
-                'pyOptSparse - CONMIN',
-                // "pyOptSparse - FSQP",
-                'pyOptSparse - SLSQP',
-                // "pyOptSparse - PSQP",
-                'pyOptSparse - NSGA2',
-                'pyOptSparse - SNOPT',
-                'Onera - SEGOMOE',
-                'Egobox - EGOR'
+              oneOf: [
+                { const: 'scipy_optimizer_cobyla', title: 'Scipy - COBYLA' },
+                { const: 'scipy_optimizer_bfgs', title: 'Scipy - BFGS' },
+                { const: 'scipy_optimizer_slsqp', title: 'Scipy - SLSQP' },
+                { const: 'pyoptsparse_optimizer_conmin', title: 'pyOptSparse - CONMIN' },
+                // { const: "pyoptsparse_optimizer_fsqp", title: "pyOptSparse - FSQP"},
+                { const: 'pyoptsparse_optimizer_slsqp', title: 'pyOptSparse - SLSQP' },
+                // { const: "pyoptsparse_optimizer_psqp", title: "pyOptSparse - PSQP" },
+                { const: 'pyoptsparse_optimizer_nsga2', title: 'pyOptSparse - NSGA2' },
+                { const: 'pyoptsparse_optimizer_snopt', title: 'pyOptSparse - SNOPT' },
+                { const: 'onerasego_optimizer_segomoe', title: 'Onera - SEGOMOE' },
+                { const: 'egobox_optimizer_egor', title: 'Egobox - EGOR' },
               ],
               default: 'scipy_optimizer_slsqp',
             },
@@ -262,6 +250,8 @@ class OpenmdaoImplEditor extends React.Component {
               uiSchema={uiSchema}
               onChange={(data) => this.handleChange(data)}
               onSubmit={(data) => this.handleSubmit(data)}
+              validator={validator}
+              widgets={{ SelectWidget }}
               liveValidate
             >
               <div>
@@ -277,6 +267,8 @@ class OpenmdaoImplEditor extends React.Component {
               formData={formData}
               onChange={(data) => this.handleChange(data)}
               onSubmit={(data) => this.handleSubmit(data)}
+              validator={validator}
+              widgets={{ SelectWidget }}
               liveValidate
             >
               <div>
@@ -291,6 +283,8 @@ class OpenmdaoImplEditor extends React.Component {
               formData={formData}
               onChange={(data) => this.handleChange(data)}
               onSubmit={(data) => this.handleSubmit(data)}
+              validator={validator}
+              widgets={{ SelectWidget }}
               liveValidate
             >
               <div className="mb-3">
@@ -305,6 +299,8 @@ class OpenmdaoImplEditor extends React.Component {
               formData={formData}
               onChange={(data) => this.handleChange(data)}
               onSubmit={(data) => this.handleSubmit(data)}
+              validator={validator}
+              widgets={{ SelectWidget }}
               liveValidate
             >
               <div className="mb-3">

diff --git a/app/javascript/packs/api_doc_viewer_application.jsx b/app/javascript/packs/api_doc_viewer_application.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+
 import SwaggerApiDoc from 'api_doc_viewer';
 import WhatsOptApi from '../utils/WhatsOptApi';
 
@@ -14,5 +15,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
   const api = new WhatsOptApi(csrfToken, apiKey, relativeUrlRoot);
 
-  ReactDOM.render(<SwaggerApiDoc api={api} />, runnerElt[0]);
+  const root = createRoot(runnerElt[0]);
+  root.render(<SwaggerApiDoc api={api} />);
 });
diff --git a/app/javascript/packs/mda_viewer_application.jsx b/app/javascript/packs/mda_viewer_application.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+
 import MdaViewer from 'mda_viewer';
 import '@rails/actiontext';
 
@@ -20,12 +21,13 @@ document.addEventListener('DOMContentLoaded', () => {
 
   const api = new WhatsOptApi(csrfToken, apiKey, relativeUrlRoot, mda.updated_at);
 
-  ReactDOM.render(<MdaViewer
+  const root = createRoot(mdaViewerElt[0]);
+  root.render(<MdaViewer
     mda={mda}
     isEditing={isEditing}
     api={api}
     members={members}
     coOwners={coOwners}
     currentUser={currentUser}
-  />, mdaViewerElt[0]);
+  />);
 });
diff --git a/app/javascript/packs/metamodel_quality_plotter_application.jsx b/app/javascript/packs/metamodel_quality_plotter_application.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+
 import MetaModelQualityPlotter from 'metamodel_quality_plotter';
 import WhatsOptApi from '../utils/WhatsOptApi';
 
@@ -16,9 +17,11 @@ document.addEventListener('DOMContentLoaded', () => {
   const apiKey = plotterElt.data('api-key');
 
   const api = new WhatsOptApi(csrfToken, apiKey, relativeUrlRoot);
-  ReactDOM.render(<MetaModelQualityPlotter
+
+  const root = createRoot(plotterElt[0]);
+  root.render(<MetaModelQualityPlotter
     mdaName={mdaName}
     api={api}
     metaModelId={metaModelId}
-  />, plotterElt[0]);
+  />);
 });
diff --git a/app/javascript/packs/optim_viewer_application.jsx b/app/javascript/packs/optim_viewer_application.jsx
@@ -1,12 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+
 import OptimViewer from 'optim_viewer';
 
 document.addEventListener('DOMContentLoaded', () => {
-  const optim_plot = document.getElementById('optim_viewer');
+  const optimViewer = document.getElementById('optim_viewer');
+  const data = JSON.parse(optimViewer.getAttribute('data-optimization'));
 
-  ReactDOM.render(
-    <OptimViewer data={JSON.parse(optim_plot.getAttribute('data-optimization'))} />,
-    optim_plot,
+  const root = createRoot(optimViewer);
+  root.render(
+    <OptimViewer data={data} />,
   );
 });
diff --git a/app/javascript/packs/plotter_application.jsx b/app/javascript/packs/plotter_application.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+
 import Plotter from 'plotter';
 import WhatsOptApi from '../utils/WhatsOptApi';
 
@@ -15,5 +16,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const uqMode = plotterElt.data('uq-mode');
 
   const api = new WhatsOptApi(csrfToken, apiKey, relativeUrlRoot);
-  ReactDOM.render(<Plotter mda={mda} ope={ope} api={api} uqMode={uqMode} />, plotterElt[0]);
+
+  const root = createRoot(plotterElt[0]);
+  root.render(<Plotter mda={mda} ope={ope} api={api} uqMode={uqMode} />);
 });
diff --git a/app/javascript/packs/runner_application.jsx b/app/javascript/packs/runner_application.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+
 import Runner from 'runner';
 import WhatsOptApi from '../utils/WhatsOptApi';
 
@@ -16,5 +17,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
   const api = new WhatsOptApi(csrfToken, apiKey, relativeUrlRoot);
 
-  ReactDOM.render(<Runner mda={mda} ope={ope} api={api} wsServer={wsServer} />, runnerElt[0]);
+  const root = createRoot(runnerElt[0]);
+  root.render(<Runner mda={mda} ope={ope} api={api} wsServer={wsServer} />);
 });
diff --git a/app/javascript/packs/sensitivity_plotter_application.jsx b/app/javascript/packs/sensitivity_plotter_application.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+
 import SensitivityPlotter from 'sensitivity_plotter';
 import WhatsOptApi from '../utils/WhatsOptApi';
 
@@ -14,5 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const apiKey = plotterElt.data('api-key');
 
   const api = new WhatsOptApi(csrfToken, apiKey, relativeUrlRoot);
-  ReactDOM.render(<SensitivityPlotter mda={mda} ope={ope} api={api} />, plotterElt[0]);
+
+  const root = createRoot(plotterElt[0]);
+  root.render(<SensitivityPlotter mda={mda} ope={ope} api={api} />);
 });
diff --git a/app/javascript/plotter/components/MetaModelManager.jsx b/app/javascript/plotter/components/MetaModelManager.jsx
@@ -1,8 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import update from 'immutability-helper';
+import validator from '@rjsf/validator-ajv8';
 import Form from '@rjsf/bootstrap-4';
 
+// Patch bootstrap 4 theme with bootstrap 5 select widget,
+// otherwise bootstrap 4 theme is compatible with Bootstrap 5
+import SelectWidget from '../../utils/RjsfSelectWidgetBs5';
+
 import Error from '../../utils/components/Error';
 import LoadingIndicator from '../../utils/components/LoadingIndicator';
 
@@ -19,8 +24,7 @@ const UQ_SCHEMA = {
     kind: {
       type: 'string',
       title: 'Method',
-      enum: [OPENTURNS_PCE],
-      enumNames: ['Polynomial Chaos Expension'],
+      oneOf: [{ const: OPENTURNS_PCE, title: 'Polynomial Chaos Expension' }],
       default: SMT_KRIGING,
     },
   },
@@ -55,9 +59,12 @@ const OPTIM_SCHEMA = {
     kind: {
       type: 'string',
       title: 'Method',
-      enum: [SMT_KRIGING, SMT_KPLS, SMT_KPLSK, SMT_LS, SMT_QP],
-      enumNames: ['Kriging', 'KPLS (Kriging+PLS)', 'KPLSK (Kriging+PLS+KPLS initial guess)',
-        'Least-Squares Approximation', 'Quadratic Polynomial Approximation'],
+      oneOf: [
+        { const: SMT_KRIGING, title: 'Kriging' },
+        { const: SMT_KPLS, title: 'KPLS (Kriging+PLS)' },
+        { const: SMT_KPLSK, title: 'KPLSK (Kriging+PLS+KPLS initial guess)' },
+        { const: SMT_LS, title: 'Least-Squares Approximation' },
+        { const: SMT_QP, title: 'Quadratic Polynomial Approximation' }],
       default: SMT_KRIGING,
     },
   },
@@ -190,6 +197,8 @@ class MetaModelManager extends React.Component {
             formData={formData}
             onChange={this.handleChange}
             onSubmit={this.handleSubmit}
+            widgets={{ SelectWidget }}
+            validator={validator}
           >
             <div>
               <button className="btn btn-primary" type="submit" ref={(btn) => { this.btnSubmit = btn; }}>Submit</button>