refactor: squash commits

frontend/src/components/NetworkRules/NetworkRules.jsx

@@ -0,0 +1,132 @@
+import { useState } from "react";
+
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Button,
+  Divider,
+  Snackbar,
+  Hidden,
+  Grid,
+  Typography,
+} from "@material-ui/core";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import CodeMirror from "@uiw/react-codemirror";
+import "codemirror/theme/3024-day.css";
+
+import { compile } from "external/RuleCompiler";
+
+import debounce from "lodash/debounce";
+
+import API from "utils/API";
+
+function NetworkRules({ network }) {
+  const [editor, setEditor] = useState(null);
+  const [flowData, setFlowData] = useState({
+    rules: [...network.config.rules],
+    capabilities: [...network.config.capabilities],
+    tags: [...network.config.tags],
+  });
+  const [errors, setErrors] = useState([]);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+
+  const saveChanges = async () => {
+    if (editor) {
+      const req = await API.post("/network/" + network["config"]["id"], {
+        config: { ...flowData },
+        rulesSource: editor.getValue(),
+      });
+      console.log("Action", req);
+      setSnackbarOpen(true);
+      const timer = setTimeout(() => {
+        setSnackbarOpen(false);
+      }, 1500);
+      return () => clearTimeout(timer);
+    }
+  };
+
+  const onChange = debounce((event) => {
+    const src = event.getValue();
+    setEditor(event);
+    let rules = [],
+      caps = [],
+      tags = [];
+    const res = compile(src, rules, caps, tags);
+    if (!res) {
+      setFlowData({
+        rules: [...rules],
+        capabilities: [...caps],
+        tags: [...tags],
+      });
+      setErrors([]);
+    } else {
+      setErrors(res);
+    }
+  }, 100);
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>Flow Rules</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        {/*   Important note: value in CodeMirror instance means INITAIL VALUE
+              or it could be used to replace editor state with the new value.
+              No need to update on every user character input
+        */}
+        <CodeMirror
+          value={network["rulesSource"]}
+          onChange={onChange}
+          options={{ tabSize: 2, lineWrapping: true }}
+        />
+        <Hidden mdDown>
+          <div>
+            <CodeMirror
+              value={JSON.stringify(flowData, null, 2)}
+              width="100%"
+              height="50%"
+              options={{
+                theme: "3024-day",
+                readOnly: true,
+                lineNumbers: false,
+                lineWrapping: true,
+              }}
+            />
+          </div>
+        </Hidden>
+        <Divider />
+        <Grid
+          item
+          style={{
+            margin: "1%",
+            display: "block",
+            overflowWrap: "break-word",
+            width: "250px",
+          }}
+        >
+          {!!errors.length ? (
+            <Typography color="error">
+              {"[" + errors[0] + ":" + errors[1] + "] " + errors[2]}
+            </Typography>
+          ) : (
+            <Button variant="contained" color="primary" onClick={saveChanges}>
+              Save Changes
+            </Button>
+          )}
+        </Grid>
+        <Snackbar
+          open={snackbarOpen}
+          anchorOrigin={{
+            vertical: "top",
+            horizontal: "center",
+          }}
+          message="Saved"
+        />
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+export default NetworkRules;