Merge branch 'dev' into feature/SOF-7056

Exabyte-io · Nov 2, 2023 · 95c6174 · 95c6174
2 parents ab01ecf + d8474e3
commit 95c6174
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -72,7 +72,10 @@
     "devDependencies": {
         "@exabyte-io/code.js": "^2022.6.15-1",
         "@exabyte-io/eslint-config": "^2023.8.29-1",
-        "@exabyte-io/made.js": "^2023.6.3-0",
+        "@exabyte-io/made.js": "^2023.9.21-0",
+        "@exabyte-io/standata": "git+https://github.com/Exabyte-io/standata",
+        "@types/mocha": "^10.0.1",
+        "@types/node": "^20.4.2",
         "babel-eslint": "^10.1.0",
         "babel-preset-react-app": "^9.1.2",
         "cross-env": "^7.0.3",

diff --git a/src/MaterialsDesigner.jsx b/src/MaterialsDesigner.jsx
@@ -79,6 +79,7 @@ class MaterialsDesigner extends mix(React.Component).with(FullscreenComponentMix
                                     maxCombinatorialBasesCount={
                                         this.props.maxCombinatorialBasesCount
                                     }
+                                    defaultMaterialsSet={this.props.defaultMaterialsSet}
                                 />
                                 <div className="bgm-dark col-xs-12">
                                     <ItemsList
@@ -170,6 +171,8 @@ MaterialsDesigner.propTypes = {
     onRemove: PropTypes.func,
 
     maxCombinatorialBasesCount: PropTypes.number,
+
+    defaultMaterialsSet: PropTypes.array,
 };
 
 export default MaterialsDesigner;
diff --git a/src/MaterialsDesignerContainer.jsx b/src/MaterialsDesignerContainer.jsx
@@ -137,9 +137,12 @@ MaterialsDesignerContainer.propTypes = {
     maxCombinatorialBasesCount: PropTypes.number,
     // eslint-disable-next-line react/require-default-props
     isConventionalCellShown: PropTypes.bool,
+    // eslint-disable-next-line react/require-default-props
+    defaultMaterialsSet: PropTypes.array,
 };
 
 MaterialsDesignerContainer.defaultProps = {
     applyMiddleware: true,
     initialMaterials,
+    defaultMaterialsSet: [],
 };
diff --git a/src/components/header_menu/HeaderMenuToolbar.jsx b/src/components/header_menu/HeaderMenuToolbar.jsx
@@ -288,7 +288,7 @@ class HeaderMenuToolbar extends React.Component {
 
     renderImportModal() {
         const { showImportMaterialsDialog } = this.state;
-        const { ImportModal, onAdd } = this.props;
+        const { ImportModal, onAdd, defaultMaterialsSet } = this.props;
         return ImportModal ? (
             <ImportModal
                 modalId="defaultImportModalDialog"
@@ -299,6 +299,7 @@ class HeaderMenuToolbar extends React.Component {
                     this.setState({ showImportMaterialsDialog: false });
                 }}
                 onClose={() => this.setState({ showImportMaterialsDialog: false })}
+                defaultMaterialsSet={defaultMaterialsSet}
             />
         ) : null;
     }
@@ -461,6 +462,7 @@ HeaderMenuToolbar.propTypes = {
     index: PropTypes.number.isRequired,
     isFullscreen: PropTypes.bool.isRequired,
     maxCombinatorialBasesCount: PropTypes.number.isRequired,
+    defaultMaterialsSet: PropTypes.array.isRequired,
 
     onUpdate: PropTypes.func.isRequired,
     onUndo: PropTypes.func.isRequired,

diff --git a/src/components/include/DefaultImportModalDialog.jsx b/src/components/include/DefaultImportModalDialog.jsx
@@ -1,10 +1,13 @@
 import { Made } from "@exabyte-io/made.js";
+import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
 import FormControl from "@mui/material/FormControl";
+import TextField from "@mui/material/TextField";
 import { DataGrid } from "@mui/x-data-grid";
 import PropTypes from "prop-types";
 import React from "react";
@@ -47,6 +50,8 @@ class DefaultImportModalDialog extends React.Component {
         this.state = {
             files: [],
             dragging: false,
+            defaultMaterialsList: this.getDefaultMaterialsList() || [],
+            selectedMaterial: null,
         };
         this.title = "Import Materials";
 
@@ -117,7 +122,7 @@ class DefaultImportModalDialog extends React.Component {
         // Filter out invalid files
         const validFiles = Array.from(files).filter((file) => file && file.size);
         if (validFiles.length === 0) {
-            NPMsAlert.warning("Error: file(s) cannot be read (unaccessible?)");
+            NPMsAlert.warning("Error: file(s) cannot be read (inaccessible?)");
             return;
         }
 
@@ -148,6 +153,13 @@ class DefaultImportModalDialog extends React.Component {
         });
     }
 
+    getDefaultMaterialsList = () => {
+        const { defaultMaterialsSet } = this.props;
+        return defaultMaterialsSet.map((material) => {
+            return { label: material.name || "Not available", value: material };
+        });
+    };
+
     formatDate = (date) => {
         const hours = date.getHours().toString().padStart(2, "0");
         const minutes = date.getMinutes().toString().padStart(2, "0");
@@ -166,15 +178,57 @@ class DefaultImportModalDialog extends React.Component {
         }));
     };
 
+    addMaterialAsJSONFile = () => {
+        const { selectedMaterial, files } = this.state;
+
+        if (!selectedMaterial) {
+            return;
+        }
+        const config = selectedMaterial.value;
+
+        const newFile = {
+            id: config.id || files.length,
+            fileName: config.name || "Not available",
+            format: "json",
+            text: JSON.stringify(config) || "Not available",
+            lastModified: this.formatDate(new Date()),
+        };
+
+        this.setState({
+            files: [...files, newFile],
+            selectedMaterial: null,
+        });
+    };
+
     onSubmit = () => {
         this.handleSubmit();
         // eslint-disable-next-line react/destructuring-assignment
         this.props.onClose();
     };
 
+    renderAutocomplete = () => {
+        const { defaultMaterialsList } = this.state;
+        return (
+            <Autocomplete
+                sx={{ flexGrow: 1, mr: 2, height: "100%" }}
+                disablePortal
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                renderInput={(params) => <TextField {...params} label="Default set of Materials" />}
+                options={defaultMaterialsList}
+                getOptionLabel={(option) => option.label}
+                onChange={(event, value) => this.setState({ selectedMaterial: value })}
+                onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                        this.addMaterialAsJSONFile();
+                    }
+                }}
+            />
+        );
+    };
+
     render() {
         const { show, onClose, onSubmit, title } = this.props;
-        const { files, dragging } = this.state;
+        const { files, dragging, selectedMaterial } = this.state;
 
         const rows = files.map((file, i) => ({
             id: i,
@@ -242,6 +296,20 @@ class DefaultImportModalDialog extends React.Component {
                 <DialogTitle>{this.title || title}</DialogTitle>
 
                 <DialogContent>
+                    <Box
+                        sx={{
+                            padding: "10px 0",
+                            display: "flex",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            width: "100%",
+                        }}
+                    >
+                        {this.renderAutocomplete()}
+                        <Button onClick={this.addMaterialAsJSONFile} disabled={!selectedMaterial}>
+                            Add
+                        </Button>
+                    </Box>
                     <FormControl variant="standard" sx={{ width: "100%", alignContent: "center" }}>
                         {files.length > 0 ? (
                             <div
@@ -303,6 +371,12 @@ DefaultImportModalDialog.propTypes = {
     show: PropTypes.bool.isRequired,
     onClose: PropTypes.func.isRequired,
     onSubmit: PropTypes.func.isRequired,
+    // eslint-disable-next-line react/forbid-prop-types
+    defaultMaterialsSet: PropTypes.array,
+};
+
+DefaultImportModalDialog.defaultProps = {
+    defaultMaterialsSet: [],
 };
 
 export default DefaultImportModalDialog;
diff --git a/src/index.jsx b/src/index.jsx
@@ -5,11 +5,14 @@ import "react-s-alert/dist/s-alert-css-effects/stackslide.css";
 import "@exabyte-io/wave.js/dist/stylesheets/main.css";
 import "./stylesheets/main.scss";
 
+// eslint-disable-next-line import/no-unresolved
+import data from "@exabyte-io/standata/lib/runtime_data/materials";
 import React from "react";
 import ReactDOM from "react-dom";
 
 import { MaterialsDesignerContainer } from "./MaterialsDesignerContainer";
 
+const materials = Object.values(data.filesMapByName);
 /*
  * Set timeout to ensure Codemirror CSS is loaded: https://github.com/graphql/graphiql/issues/33#issuecomment-318188555
  * CSS is loaded in the component using CodeMirror (eg. `Basis`).
@@ -18,7 +21,7 @@ setTimeout(() => {
     // Store component reference in window to access it in console for debugging/tests purposes
     // eslint-disable-next-line react/no-render-return-value
     window.MDContainer = ReactDOM.render(
-        <MaterialsDesignerContainer />,
+        <MaterialsDesignerContainer defaultMaterialsSet={materials} />,
         document.getElementById("root"),
     );
 }, 0);