@canmingir/link 1.2.23 → 1.2.25

package/src/lib/NewApiBody/ParamView.jsx

@@ -0,0 +1,38 @@
+import { v4 as uuid } from "uuid";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+
+function ParamView({ params }) {
+  params = params || [];
+
+  return (
+    <Table size={"small"} data-cy="param-view">
+      <colgroup>
+        <col style={{ width: "50%" }} />
+        <col style={{ width: "50%" }} />
+      </colgroup>
+      <TableHead>
+        <TableRow>
+          <TableCell>Parameter</TableCell>
+          <TableCell>Data Type</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {params.map((param) => (
+          <TableRow key={uuid()}>
+            <TableCell>{param.name}</TableCell>
+            <TableCell>{param.type}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+export default ParamView;

package/src/lib/NucDialog/NucDialog.jsx

@@ -0,0 +1,108 @@
+import { Close } from "@mui/icons-material";
+import Fullscreen from "@mui/icons-material/Fullscreen";
+import FullscreenExit from "@mui/icons-material/FullscreenExit";
+import React from "react";
+
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+} from "@mui/material";
+import { storage, useStorage } from "@nucleoidjs/webstorage";
+
+export default function NucDialog({
+  title,
+  minWidth = 600,
+  children,
+  action,
+  open,
+  handleClose,
+  maximizedDimensions = { width: "65rem", height: "50rem" },
+  minimizedDimensions = { width: "55rem", height: "40rem" },
+}) {
+  const [maximized] = useStorage("platform", title, "maximized", false);
+  const currentDimensions = maximized
+    ? maximizedDimensions
+    : minimizedDimensions;
+
+  return (
+    <Dialog
+      open={open}
+      maxWidth={false}
+      onClose={handleClose}
+      sx={{
+        "& .MuiDialog-paper": {
+          width: currentDimensions.width,
+          height: currentDimensions.height,
+          transition: "width 0.3s ease-in-out, height 0.3s ease-in-out",
+        },
+      }}
+    >
+      <DialogTitle
+        sx={{
+          m: 0,
+          p: 2,
+          backgroundColor: (theme) => theme.palette.background.default,
+        }}
+      >
+        {title}
+      </DialogTitle>
+      <IconButton
+        aria-label="close"
+        onClick={handleClose}
+        sx={{
+          position: "absolute",
+          right: 8,
+          top: 8,
+          color: (theme) => theme.palette.grey[500],
+        }}
+        data-cy="close-dialog-button"
+      >
+        <Close />
+      </IconButton>
+      {maximized ? (
+        <IconButton
+          aria-label="collapse"
+          onClick={() => storage.set("platform", title, "maximized", false)}
+          sx={{
+            position: "absolute",
+            right: 48,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <FullscreenExit />
+        </IconButton>
+      ) : (
+        <IconButton
+          aria-label="expand"
+          onClick={() => storage.set("platform", title, "maximized", true)}
+          sx={{
+            position: "absolute",
+            right: 48,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <Fullscreen />
+        </IconButton>
+      )}
+
+      <DialogContent
+        sx={{
+          minWidth,
+          backgroundColor: (theme) => theme.palette.background.default,
+        }}
+      >
+        {children}
+      </DialogContent>
+      <DialogActions
+        sx={{ backgroundColor: (theme) => theme.palette.background.default }}
+      >
+        {action}
+      </DialogActions>
+    </Dialog>
+  );
+}

package/src/lib/NucDialog/index.js

@@ -0,0 +1 @@
+export { default } from "./NucDialog";

package/src/lib/ParamTable/ParamTable.jsx

@@ -0,0 +1,133 @@
+import { DataGrid } from "@mui/x-data-grid";
+import HighlightOffIcon from "@mui/icons-material/HighlightOff";
+import React from "react";
+import TypeMenu from "./TypeMenu";
+import styles from "./styles";
+
+import { Checkbox, IconButton, InputBase } from "@mui/material";
+
+const ParamTable = ({ types, params, setParams }) => {
+  const columns = [
+    {
+      field: "name",
+      headerName: "Name",
+      renderCell: (param) => {
+        const { id } = param.row;
+        return (
+          <InputBase
+            disabled={param.row.in === "path"}
+            value={param.value || ""}
+            onChange={(event) => updateParam(id, "name", event.target.value)}
+            fullWidth
+            placeholder="Enter name"
+            data-cy={`param-name-field-${id}`}
+          />
+        );
+      },
+      flex: 1,
+    },
+    {
+      field: "type",
+      headerName: "Type",
+      renderCell: (param) => {
+        const { id } = param.row;
+        return (
+          <TypeMenu
+            disabled={param.row.in === "path"}
+            primitive
+            types={types}
+            id={id}
+            type={param.value}
+            onChange={(type) => updateParam(id, "type", type)}
+          />
+        );
+      },
+      flex: 1,
+    },
+    {
+      field: "in",
+      headerName: "Param",
+      flex: 1,
+      valueGetter: (param) => param.value || "query",
+    },
+    {
+      field: "required",
+      headerName: "Required",
+      renderCell: (param) => {
+        const { id } = param.row;
+        return (
+          <Checkbox
+            disabled={param.row.in === "path"}
+            checked={param.value}
+            onChange={(event) =>
+              updateParam(id, "required", event.target.checked)
+            }
+            data-cy={`param-required-checkbox-${id}`}
+          />
+        );
+      },
+      flex: 1,
+    },
+    {
+      field: "description",
+      headerName: "Description",
+      renderCell: (param) => {
+        const { id } = param.row;
+        return (
+          <InputBase
+            disabled={param.row.in === "path"}
+            value={param.value || ""}
+            onChange={(event) =>
+              updateParam(id, "description", event.target.value)
+            }
+            fullWidth
+            placeholder="Enter description"
+            data-cy={`param-description-field-${id}`}
+          />
+        );
+      },
+      flex: 2,
+    },
+    {
+      field: "action",
+      headerName: " ",
+      sortable: false,
+      renderCell: (param) => {
+        const { id } = param.row;
+        return (
+          <IconButton
+            disabled={param.row.in === "path"}
+            onClick={() => removeParam(id)}
+            size="large"
+          >
+            <HighlightOffIcon />
+          </IconButton>
+        );
+      },
+    },
+  ];
+
+  const removeParam = (id) => {
+    setParams((prevParams) => prevParams.filter((param) => param.id !== id));
+  };
+
+  const updateParam = (id, field, value) => {
+    setParams((prevParams) =>
+      prevParams.map((param) =>
+        param.id === id ? { ...param, [field]: value } : param
+      )
+    );
+  };
+
+  return (
+    <DataGrid
+      sx={styles.dataGrid}
+      columns={columns}
+      rows={params}
+      hideFooter
+      disableSelectionOnClick
+    />
+  );
+};
+
+export default ParamTable;

package/src/lib/ParamTable/TypeMenu.jsx

@@ -0,0 +1,102 @@
+import Defaults from "./defaults";
+import { v4 as uuid } from "uuid";
+
+import { Divider, MenuItem, Select } from "@mui/material";
+import { forwardRef, useState } from "react";
+
+const TypeMenu = forwardRef(
+  (
+    {
+      id,
+      type,
+      types,
+      map,
+      edit,
+      setKey,
+      primitive,
+      objAndArr,
+      globalTypes,
+      disabled,
+    },
+    ref
+  ) => {
+    const [selectedType, setSelectedType] = useState(type);
+
+    function updateType(id, value) {
+      if (ref) {
+        ref[id].type = value;
+      } else {
+        switch (value) {
+          case "array":
+            if (map.type === "object") delete map["properties"];
+            map.type = "array";
+            map["items"] = Defaults.compiledObject(uuid(), uuid());
+
+            break;
+          case "object":
+            if (map.type === "array") delete map["items"];
+            map.type = "object";
+            map["properties"] = Defaults.compiledProperty(uuid());
+
+            break;
+          default:
+            if (map["properties"]) delete map["properties"];
+            if (map["items"]) delete map["items"];
+            map.type = value;
+
+            break;
+        }
+      }
+      setKey && setKey(uuid());
+      setSelectedType(value);
+    }
+
+    return (
+      <>
+        {edit && (
+          <Select
+            disabled={disabled}
+            value={selectedType}
+            onChange={(event) => {
+              updateType(id, event.target.value);
+            }}
+          >
+            {primitive && [
+              <MenuItem key={uuid()} value={"integer"}>
+                integer
+              </MenuItem>,
+              <MenuItem key={uuid()} value={"string"}>
+                string
+              </MenuItem>,
+              <MenuItem key={uuid()} value={"boolean"}>
+                boolean
+              </MenuItem>,
+              <Divider key={uuid()} id={uuid()} />,
+            ]}
+
+            {objAndArr && [
+              <MenuItem key={uuid()} id={uuid()} value={"object"}>
+                object
+              </MenuItem>,
+              <MenuItem key={uuid()} id={uuid()} value={"array"}>
+                array
+              </MenuItem>,
+            ]}
+            {globalTypes && <Divider />}
+            {globalTypes &&
+              types.map((item) => {
+                return (
+                  <MenuItem key={uuid()} id={uuid()} value={item.name}>
+                    {item.name}
+                  </MenuItem>
+                );
+              })}
+          </Select>
+        )}
+        {!edit && <>{type}</>}
+      </>
+    );
+  }
+);
+
+export default TypeMenu;

package/src/lib/ParamTable/defaults.js

@@ -0,0 +1,47 @@
+const Defaults = {
+  compiledObject: (objID, objPropID) => {
+    return {
+      [objID]: {
+        type: "object",
+        id: objID,
+        properties: {
+          [objPropID]: {
+            id: objPropID,
+            name: "id",
+            type: "string",
+          },
+        },
+      },
+    };
+  },
+  compiledProperty: (id) => {
+    return {
+      [id]: {
+        id: id,
+        name: "id",
+        type: "string",
+      },
+    };
+  },
+  object: {
+    type: "object",
+    properties: {
+      id: {
+        type: "string",
+      },
+    },
+  },
+  array: {
+    type: "array",
+    items: {
+      id: {
+        type: "string",
+      },
+    },
+  },
+  action: `function action(req) {\n\treturn req.body.name;\n}\n`,
+  summary: "Summary",
+  description: "Description",
+};
+
+export default Defaults;

package/src/lib/ParamTable/index.js

@@ -0,0 +1 @@
+export { default } from "./ParamTable";

package/src/lib/ParamTable/styles.js

@@ -0,0 +1,12 @@
+const styles = {
+  dataGrid: {
+    border: "none",
+    width: "100%",
+    "& .MuiDataGrid-cell": {
+      cursor: "pointer",
+      borderBottom: "none",
+    },
+  },
+};
+
+export default styles;

package/src/lib/ResourceMenu/AlertMassage.jsx

@@ -0,0 +1,28 @@
+import { Alert } from "@mui/material";
+import React from "react";
+import Snackbar from "@mui/material/Snackbar";
+
+export default function AlertMassage({ message }) {
+  const [open, setOpen] = React.useState(true);
+
+  function handleClose(event, reason) {
+    if (reason === "clickaway") return;
+    setOpen(false);
+  }
+
+  return (
+    <Snackbar
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "center",
+      }}
+      open={open}
+      autoHideDuration={2000}
+      onClose={handleClose}
+    >
+      <Alert onClose={handleClose} severity="info">
+        {message}
+      </Alert>
+    </Snackbar>
+  );
+}

package/src/lib/ResourceMenu/DeleteResourceDialog.jsx

@@ -0,0 +1,60 @@
+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 { Typography } from "@mui/material";
+import { forwardRef } from "react";
+
+const DeleteResourceDialog = forwardRef(({ setOpen, deleteResource }, ref) => {
+  const resource = ref.current;
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleDelete = () => {
+    deleteResource();
+  };
+
+  return (
+    <Dialog
+      open={true}
+      onClose={handleClose}
+      aria-labelledby="responsive-dialog-title"
+    >
+      <DialogTitle id="responsive-dialog-title">Delete resource</DialogTitle>
+      <DialogContent>
+        <Typography>
+          {`The selected resource "${resource?.deleteAdress}" will be deleted.`}
+        </Typography>
+        {resource?.deleteList.length > 0 && (
+          <>
+            <Typography sx={{ mt: 2 }}>
+              The following child resources will also be deleted:
+            </Typography>
+            {resource?.deleteList.map((item, index) => (
+              <Typography key={index} sx={{ ml: 2 }}>
+                - {item}
+              </Typography>
+            ))}
+          </>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button autoFocus onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button
+          onClick={handleDelete}
+          autoFocus
+          data-cy="delete-resource-confirm-button"
+        >
+          Delete
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+});
+
+export default DeleteResourceDialog;

package/src/lib/ResourceMenu/ResourceMenu.jsx

@@ -0,0 +1,156 @@
+import AlertMassage from "./AlertMassage";
+import DeleteIcon from "@mui/icons-material/Delete";
+import DeleteResourceDialog from "./DeleteResourceDialog";
+import Fade from "@mui/material/Fade";
+import HttpIcon from "@mui/icons-material/Http";
+import React from "react";
+import SourceIcon from "@mui/icons-material/Source";
+import styles from "./styles";
+import { useRef } from "react";
+
+import { Divider, Menu, MenuItem, Typography } from "@mui/material";
+import { publish, useEvent } from "@nucleoidai/react-event";
+
+const ResourceMenu = (props) => {
+  const { anchor, openMenu, handleClose, hash, map } = props;
+
+  const [methodDisabled, setMethodDisabled] = React.useState();
+  const [alertMessage, setAlertMessage] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const resourceRef = useRef();
+
+  const [api] = useEvent("API_DATA_CHANGED", []);
+  const [selectedAPI] = useEvent("SELECTED_API_CHANGED", {
+    path: "/",
+    method: "GET",
+  });
+
+  React.useEffect(() => {
+    const checkMethodAddable = () => {
+      const countMethodsForPath = (path) => {
+        return api.filter((endpoint) => endpoint.path === path).length;
+      };
+
+      if (hash) {
+        const path = map ? map[hash].path : null;
+        return countMethodsForPath(path) > 3;
+      }
+
+      if (selectedAPI) {
+        const apiSelectedPath = selectedAPI.path;
+        return countMethodsForPath(apiSelectedPath) > 4;
+      }
+      return false;
+    };
+
+    setMethodDisabled(checkMethodAddable());
+  }, [api, hash, map, selectedAPI]);
+
+  const addMethod = () => {
+    selectPath();
+    publish("API_DIALOG_OPEN", { type: "method", action: "add" });
+    handleClose();
+  };
+
+  const addResource = () => {
+    selectPath();
+    publish("API_DIALOG_OPEN", { type: "resource", action: "add" });
+    handleClose();
+  };
+
+  const deleteResource = () => {
+    const path = selectedAPI?.path;
+    if (!path) return;
+
+    publish("API_RESOURCE_DELETE", { path });
+    handleClose();
+    setOpen(false);
+  };
+
+  const handleResourceDeleteDialog = () => {
+    selectPath();
+
+    if (selectedAPI?.path === "/") {
+      setAlertMessage("Root path cannot be deleted");
+      handleClose();
+    } else {
+      const selectedPath = selectedAPI?.path;
+      const deleteList = api
+        .filter(
+          (item) =>
+            item.path.startsWith(selectedPath) && item.path !== selectedPath
+        )
+        .map((item) => item.path)
+        .filter((path, index, self) => self.indexOf(path) === index);
+
+      resourceRef.current = {
+        deleteAdress: selectedPath,
+        deleteList: deleteList,
+      };
+      handleClose();
+      setOpen(true);
+    }
+  };
+
+  const selectPath = () => {
+    const item = map ? map[hash] : null;
+
+    if (item) {
+      publish("SELECTED_API_CHANGED", { path: item.path, method: null });
+    } else if (selectedAPI) {
+      publish("SELECTED_API_CHANGED", {
+        path: selectedAPI.path,
+        method: null,
+      });
+    }
+  };
+
+  return (
+    <>
+      {open && (
+        <DeleteResourceDialog
+          open={open}
+          setOpen={setOpen}
+          deleteResource={deleteResource}
+          ref={resourceRef}
+        />
+      )}
+      {alertMessage && <AlertMassage message={alertMessage} />}
+      <Menu
+        open={openMenu}
+        onClose={handleClose}
+        onContextMenu={(event) => event.preventDefault()}
+        anchorReference="anchorPosition"
+        anchorPosition={{
+          top: anchor?.clientY || 0,
+          left: anchor?.clientX || 0,
+        }}
+        TransitionComponent={Fade}
+      >
+        <MenuItem onClick={addResource} data-cy="add-resource">
+          <SourceIcon />
+          <Typography sx={styles.menuItemText}>Resource</Typography>
+        </MenuItem>
+        <MenuItem
+          onClick={addMethod}
+          disabled={methodDisabled}
+          data-cy="add-method"
+        >
+          <HttpIcon />
+          <Typography sx={styles.menuItemText}>Method</Typography>
+        </MenuItem>
+        <Divider />
+        <MenuItem
+          onClick={handleResourceDeleteDialog}
+          disabled={selectedAPI?.path === "/"}
+          data-cy="delete-resource"
+        >
+          <DeleteIcon />
+          <Typography sx={styles.menuItemText}>Delete</Typography>
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+export default ResourceMenu;

package/src/lib/ResourceMenu/index.js

@@ -0,0 +1 @@
+export { default } from "./ResourceMenu";

package/src/lib/ResourceMenu/styles.js

@@ -0,0 +1,5 @@
+const styles = {
+  menuItemText: { pl: 3 / 2 },
+};
+
+export default styles;