Merge pull request #104 from relf/tech-jsonschema

Use official react-jsonschema-form with bs 4
whatsopt · Feb 1, 2022 · 9fa11f6 · 9fa11f6
2 parents 8b79739 + fddcaa7
commit 9fa11f6
Show file tree

Hide file tree

Showing 6 changed files with 245 additions and 81 deletions.
diff --git a/app/javascript/mda_viewer/components/DistributionModals.jsx b/app/javascript/mda_viewer/components/DistributionModals.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Form from 'react-jsonschema-form-bs4';
+import Form from '@rjsf/bootstrap-4';
 import update from 'immutability-helper';
 
 const NORMAL = 'Normal';
@@ -121,7 +121,8 @@ class DistributionModal extends React.Component {
   componentDidMount() {
     const { conn: { name } } = this.props;
     // eslint-disable-next-line no-undef
-    $(`#distributionListModal-${name}`).on('show.bs.modal',
+    $(`#distributionListModal-${name}`).on(
+      'show.bs.modal',
       () => {
         const { conn: { uq } } = this.props;
         const dists = DistributionModal._uqToState(uq);
@@ -133,14 +134,18 @@ class DistributionModal extends React.Component {
             this.setState({ selected: i });
           });
         }
-      });
+      },
+    );
     // eslint-disable-next-line no-undef
-    $(`#distributionListModal-${name}`).on('hidden.bs.modal',
+    $(`#distributionListModal-${name}`).on(
+      'hidden.bs.modal',
       () => {
         this.visible = false;
-      });
+      },
+    );
     // eslint-disable-next-line no-undef
-    $(`#distributionModal-${name}`).on('show.bs.modal',
+    $(`#distributionModal-${name}`).on(
+      'show.bs.modal',
       () => {
         const { conn: { uq } } = this.props;
         if (uq.length === 1) {
@@ -158,14 +163,17 @@ class DistributionModal extends React.Component {
         const varname = uq.length === 1 ? name : `${name}[${selected}]`;
         // eslint-disable-next-line no-undef
         $(`#distributionModal-${name} .modal-title`).text(`Distribution of ${varname}`);
-      });
+      },
+    );
     // eslint-disable-next-line no-undef
-    $(`#distributionModal-${name}`).on('hidden.bs.modal',
+    $(`#distributionModal-${name}`).on(
+      'hidden.bs.modal',
       () => {
         const { conn: { uq } } = this.props;
         const dists = DistributionModal._uqToState(uq);
         this.setState(dists);
-      });
+      },
+    );
   }
 
   shouldComponentUpdate() {

diff --git a/app/javascript/mda_viewer/components/OpenmdaoImplEditor.jsx b/app/javascript/mda_viewer/components/OpenmdaoImplEditor.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Form from 'react-jsonschema-form-bs4';
+import Form from '@rjsf/bootstrap-4';
 
 const SCHEMA_GENERAL = {
   type: 'object',

diff --git a/app/javascript/plotter/components/MetaModelManager.jsx b/app/javascript/plotter/components/MetaModelManager.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import update from 'immutability-helper';
-import Form from 'react-jsonschema-form-bs4';
+import Form from '@rjsf/bootstrap-4';
 
 import Error from '../../utils/components/Error';
 import LoadingIndicator from '../../utils/components/LoadingIndicator';
@@ -125,7 +125,9 @@ class MetaModelManager extends React.Component {
       }
     }
     console.log(`CREATE with ${JSON.stringify(mmAttrs)}`);
-    api.createMetaModel(opeId, mmAttrs,
+    api.createMetaModel(
+      opeId,
+      mmAttrs,
       (response) => {
         console.log(`Metamodel created ${JSON.stringify(response.data)}`);
         const { data: { operation_id } } = response;
@@ -137,7 +139,8 @@ class MetaModelManager extends React.Component {
         const newState = update(this.state, { errors: { $set: [message] } });
         this.setState(newState);
         this.btnSubmit.removeAttribute('disabled');
-      });
+      },
+    );
   }
 
   render() {

diff --git a/app/javascript/runner/index.jsx b/app/javascript/runner/index.jsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import update from 'immutability-helper';
-import Form from 'react-jsonschema-form-bs4';
+import Form from '@rjsf/bootstrap-4';
 import deepIsEqual from '../utils/compare';
 
 class LogLine extends React.PureComponent {
@@ -337,7 +337,8 @@ class Runner extends React.Component {
       name: form.name, host: form.host, driver: form.driver, options_attributes: [],
     };
     const { ope } = this.props;
-    this.api.getOperation(ope.id,
+    this.api.getOperation(
+      ope.id,
       (response) => {
         console.log(`resp=${JSON.stringify(response.data)}`);
         const ids = response.data.options.map((opt) => opt.id);
@@ -360,10 +361,14 @@ class Runner extends React.Component {
         this.setState(newState);
         console.log(`opeAttrs=${JSON.stringify(opeAttrs)}`);
 
-        this.api.updateOperation(ope.id, opeAttrs,
-          () => { this._pollOperationJob(data.formData); });
+        this.api.updateOperation(
+          ope.id,
+          opeAttrs,
+          () => { this._pollOperationJob(data.formData); },
+        );
       },
-      (error) => { console.log(error); });
+      (error) => { console.log(error); },
+    );
   }
 
   handleAbort() {
@@ -409,7 +414,8 @@ class Runner extends React.Component {
 
   _pollOperationJob(formData) {
     const { ope } = this.props;
-    this.api.pollOperationJob(ope.id,
+    this.api.pollOperationJob(
+      ope.id,
       (job) => {
         console.log('CHECK');
         console.log(JSON.stringify(job.status));
@@ -425,7 +431,8 @@ class Runner extends React.Component {
       },
       (error) => {
         console.log(error);
-      });
+      },
+    );
   }
 
   render() {

diff --git a/package.json b/package.json
@@ -8,6 +8,8 @@
     "@babel/preset-react": "^7.7.4",
     "@rails/actiontext": "^6.1.1",
     "@rails/webpacker": "^5.2.1",
+    "@rjsf/bootstrap-4": "^3.2.1",
+    "@rjsf/core": "^3.2.1",
     "actioncable": "^5.2.0",
     "autoprefixer": "^9.3.1",
     "axios": "0.24.0",
@@ -28,9 +30,9 @@
     "qs": "^6.9.4",
     "react": "^17.0.0",
     "react-beautiful-dnd": "^13.0.0",
+    "react-bootstrap": "^2.1.1",
     "react-bootstrap-typeahead": "^5.1.4",
     "react-dom": "^17.0.0",
-    "react-jsonschema-form-bs4": "^1.3.0",
     "react-plotly.js": "^2.4.0",
     "react-promise-tracker": "^2.1.0",
     "react-table": "^7.2.0",