import { Accordion, AccordionDetails, AccordionSummary, Button, Divider, Grid, Hidden, Snackbar, 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 { useState } from "react"; import API from "utils/API"; import { useTranslation, Trans } from "react-i18next"; function NetworkRules({ network, callback }) { const { t, i18n } = useTranslation(); const [editor, setEditor] = useState(null); const [flowData, setFlowData] = useState({ rules: [...network.config.rules], capabilities: [...network.config.capabilities], tags: [...network.config.tags], }); const [tagCapByNameData, setTagCapByNameData] = useState({ tagsByName: network.tagsByName || {}, capabilitiesByName: network.capabilitiesByName || {}, }); 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(), ...tagCapByNameData, }); console.log("Action", req); setSnackbarOpen(true); const timer = setTimeout(() => { setSnackbarOpen(false); }, 1500); callback(); 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) { let capabilitiesByName = {}; for (var key in caps) { capabilitiesByName[key] = caps[key].id; } let tagsByName = { ...tags }; for (let key in tags) { tags[key] = { id: tags[key].id, default: tags[key].default }; } setFlowData({ rules: [...rules], capabilities: [...Object.values(caps)], tags: [...Object.values(tags)], }); setTagCapByNameData({ tagsByName: tagsByName, capabilitiesByName: capabilitiesByName, }); setErrors([]); } else { setErrors(res); } }, 100); return ( }> {t("flowRules")} {/* 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 Flow Rules */}
{errors.length ? ( {"[" + errors[0] + ":" + errors[1] + "] " + errors[2]} ) : ( )}
); } export default NetworkRules;