Migrate from react-json-viewer to json-edit-react

package.json

@@ -26,25 +26,23 @@
     "gaugeJS": "^1.3.7",
     "handlebars": "^4.7.7",
     "isomorphic-form-data": "^2.0.0",
+    "json-edit-react": "^1.29.0",
     "jsonwebtoken": "^8.5.1",
     "jszip": "^3.9.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.3",
     "moment-duration-format": "^2.3.2",
-    "multiselect-react-dropdown": "^2.0.21",
     "prop-types": "^15.8.1",
     "rc-slider": "^10.0.0",
     "react": "^17.0.2",
     "react-bootstrap": "^2.2.3",
     "react-collapse": "^5.1.1",
     "react-color": "^2.19.3",
     "react-contexify": "^5.0.0",
-    "react-copy-to-clipboard": "^5.1.0",
     "react-datetime-picker": "^3.5.0",
     "react-dnd": "^14.0.5",
     "react-dnd-html5-backend": "^14.1.0",
     "react-dom": "^17.0.2",
-    "react-json-view": "^1.21.3",
     "react-notification-system": "^0.4.0",
     "react-redux": "^7.2.8",
     "react-rnd": "^10.3.7",

src/common/multiselect.jsx

@@ -0,0 +1,79 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import { useEffect, useState } from "react";
+import { Dropdown, Form } from "react-bootstrap";
+
+//a dropdown with a checklist
+//each item has to be an object and have parameters id and name
+const MultiselectDropdown = ({ items, checkedInitialyIDs, onUpdate }) => {
+  const [selectedItems, setSelectedItems] = useState([]);
+
+  //push items that are to be checked upon component mount
+  useEffect(() => {
+    if (checkedInitialyIDs.length > 0) {
+      const initialItems = items.filter((item) =>
+        checkedInitialyIDs.includes(item.id)
+      );
+      setSelectedItems(initialItems);
+    }
+  }, [checkedInitialyIDs]);
+
+  const handleItemCheck = (item) => {
+    let updatedList;
+
+    if (selectedItems.some((i) => i.id === item.id)) {
+      updatedList = selectedItems.filter((i) => i.id !== item.id);
+    } else {
+      updatedList = [...selectedItems, item];
+    }
+
+    setSelectedItems(updatedList);
+    onUpdate(updatedList, item);
+  };
+
+  return (
+    <Dropdown>
+      <Dropdown.Toggle variant="primary">
+        {selectedItems.length > 0
+          ? selectedItems.map((i) => (
+              <div style={{ color: "white" }}>{i.name}</div>
+            ))
+          : "Select file(s)..."}
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        {items.map((item) => (
+          <Form.Check
+            key={item.id}
+            type="checkbox"
+            label={item.name}
+            checked={selectedItems.some((i) => i.id == item.id)}
+            onChange={() => handleItemCheck(item)}
+            style={{
+              marginLeft: "0.5em",
+              marginRight: "0.5em",
+              paddingTop: "1em",
+            }}
+          />
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export default MultiselectDropdown;

src/common/parameters-editor.js

@@ -15,64 +15,53 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import JsonView from 'react-json-view';
+import React from "react";
+import PropTypes from "prop-types";
+import { JsonEditor } from "json-edit-react";
 
 class ParametersEditor extends React.Component {
-    onAdd = event => {
-        if (this.props.onChange != null) {
-            this.props.onChange(JSON.parse(JSON.stringify(event.updated_src)));
-        }
-    }
+  handleJsonUpdate = ({ newData }) => {
+    this.props.onChange(JSON.parse(JSON.stringify(newData)));
+  };
 
-    onEdit = event => {
-        if (this.props.onChange != null) {
-            this.props.onChange(JSON.parse(JSON.stringify(event.updated_src)));
-        }
-    }
+  render() {
+    const containerStyle = {
+      width: "100%",
+      minHeight: "100px",
+      padding: "5px",
+      border: "1px solid lightgray",
+      display: "flex",
+    };
 
-    onDelete = event => {
-        if (this.props.onChange != null) {
-            this.props.onChange(JSON.parse(JSON.stringify(event.updated_src)));
-        }
-    }
-
-    render() {
-        const containerStyle = {
-            minHeight: '100px',
-
-            paddingTop: '5px',
-            paddingBottom: '5px',
-            paddingLeft: '8px',
-
-            border: '1px solid lightgray'
-        };
-
-        return <div style={containerStyle}>
-            <JsonView
-                src={this.props.content}
-                name={false}
-                displayDataTypes={false}
-                displayObjectSize={false}
-                enableClipboard={false}
-                onAdd={this.props.disabled ? undefined : this.onAdd}
-                onEdit={this.props.disabled ? undefined : this.onEdit}
-                onDelete={this.props.disabled ? undefined : this.onDelete}
-            />
-        </div>;
-    }
+    return (
+      <div className="parameters-editor" style={containerStyle}>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <JsonEditor
+            data={this.props.content}
+            rootName={false}
+            showDataTypes={false}
+            showObjectSize={false}
+            enableClipboard={false}
+            onUpdate={this.handleJsonUpdate}
+            minWidth={0}
+            maxWidth="100%"
+            theme={{ styles: { container: { width: "100%" } } }}
+          />
+        </div>
+      </div>
+    );
+  }
 }
 
 ParametersEditor.propTypes = {
-    content: PropTypes.object,
-    onChange: PropTypes.func,
-    disabled: PropTypes.bool
+  content: PropTypes.object,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 ParametersEditor.defaultProps = {
-    content: {},
-    disabled: false
+  content: {},
+  disabled: false,
 };
 
 export default ParametersEditor;

src/common/rawDataTable.js

@@ -1,23 +1,23 @@
 import { isJSON } from "../utils/isJson";
-import ReactJson from "react-json-view";
+import { JsonEditor } from "json-edit-react";
 
 const RawDataTable = (props) => {
-    if(props.rawData !== null && isJSON(props.rawData)){
-      return (
-        <ReactJson
-          src={props.rawData}
-          name={false}
-          displayDataTypes={false}
-          displayObjectSize={false}
-          enableClipboard={false}
-          collapsed={1}
-        />
-      )
-    } else {
-      return (
-        <div>No valid JSON raw data available.</div>
-      )
-    }
-}
+  if (props.rawData !== null && isJSON(props.rawData)) {
+    return (
+      <JsonEditor
+        data={props.rawData}
+        rootName={false}
+        showDataTypes={false}
+        showObjectSize={false}
+        enableClipboard={false}
+        collapsed={1}
+        editable={true}
+        viewOnly
+      />
+    );
+  } else {
+    return <div>No valid JSON raw data available.</div>;
+  }
+};
 
-export default RawDataTable;
+export default RawDataTable;