@ebubekirylmaz/link-test 1.2.44 → 1.2.46

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,158 @@
+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,
+        }}
+        slots={{
+          transition: 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;

package/src/lib/Schema/Schema.jsx

@@ -0,0 +1,204 @@
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { v4 as uuidv4 } from "uuid";
+
+import { Box, Typography } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
+import { TreeItem } from "@mui/x-tree-view/TreeItem";
+
+const Schema = ({ initialData = {}, customTypes = [] }) => {
+  const [schemaData, setSchemaData] = useState({});
+
+  useEffect(() => {
+    const addIdsToSchema = (schema) => {
+      if (!schema) return null;
+
+      return {
+        ...schema,
+        id: uuidv4(),
+        properties: schema.properties?.map(addIdsToSchema),
+      };
+    };
+
+    if (Object.keys(initialData).length === 0) {
+      setSchemaData({
+        type: "object",
+        properties: [],
+      });
+    } else {
+      setSchemaData(addIdsToSchema(initialData));
+    }
+  }, [initialData]);
+
+  const renderTree = (node, level = 0) => (
+    <TreeItem
+      key={node.id}
+      itemId={level === 0 ? "1" : node.id}
+      label={
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            width: "100%",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "1px",
+              width: "100%",
+            }}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                width: "100%",
+                gap: "4px",
+              }}
+            >
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  cursor: "pointer",
+                }}
+              >
+                <Typography
+                  variant="body2"
+                  sx={{
+                    padding: "2px 2px",
+                    borderRadius: "4px",
+                  }}
+                >
+                  {level === 0 ? "" : node.name}
+                </Typography>
+              </Box>
+
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  cursor: "pointer",
+                }}
+              >
+                <Typography
+                  variant="body2"
+                  sx={{
+                    cursor: "pointer",
+                    borderRadius: "4px",
+                  }}
+                >
+                  {node.type}
+                </Typography>
+              </Box>
+            </Box>
+          </div>
+        </div>
+      }
+    >
+      {Array.isArray(node.properties)
+        ? node.properties.map((childNode) => renderTree(childNode, level + 1))
+        : isCustomType(node.type)
+        ? renderCustomTypeNode(node)
+        : null}
+    </TreeItem>
+  );
+
+  const isCustomType = (type) => {
+    return customTypes.some((customType) => customType.name === type);
+  };
+
+  const renderCustomTypeNode = (node) => {
+    const customTypeSchema = customTypes.find(
+      (type) => type.name === node.type
+    )?.schema;
+
+    if (!customTypeSchema || !customTypeSchema.properties) {
+      return <Box sx={{ paddingLeft: "20px" }}>No properties defined</Box>;
+    }
+
+    return (
+      <Box sx={{ paddingLeft: "20px" }}>
+        {customTypeSchema.properties.map((prop, index) => (
+          <Box
+            key={index}
+            sx={{
+              paddingTop: "5px",
+              paddingBottom: "5px",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <Typography
+              variant="body2"
+              sx={{
+                color: (theme) => theme.palette.grey[600],
+              }}
+            >
+              {prop.name}
+            </Typography>
+            <Typography
+              variant="body2"
+              sx={{
+                marginLeft: "8px",
+                color: (theme) => theme.palette.grey[500],
+              }}
+            >
+              {prop.type}
+            </Typography>
+          </Box>
+        ))}
+      </Box>
+    );
+  };
+
+  return (
+    <SimpleTreeView
+      slots={{
+        collapseIcon: () => <ExpandMoreIcon />,
+        expandIcon: () => <ChevronRightIcon />,
+      }}
+      defaultExpandedItems={["1"]}
+      sx={{
+        flexGrow: 1,
+        overflowY: "auto",
+        width: "100%",
+        ".MuiTreeItem-root": {
+          alignItems: "center",
+        },
+        ".MuiTreeItem-content": {
+          width: "100%",
+          display: "flex",
+          justifyContent: "space-between",
+          padding: "1px 8px",
+          borderRadius: "4px",
+          margin: "1px 0",
+          transition: "width 0.3s ease-in-out, height 0.3s ease-in-out",
+        },
+        ".MuiTreeItem-label": {
+          width: "100%",
+          fontWeight: "bold",
+        },
+        ".MuiTreeItem-group": {
+          marginLeft: "16px !important",
+          paddingLeft: "8px",
+          borderLeft: `1px solid`,
+          borderColor: (theme) => theme.palette.grey[400],
+        },
+        ".MuiTreeItem-iconContainer": {
+          minWidth: "0",
+          marginRight: "0px",
+          padding: "0px",
+        },
+      }}
+    >
+      {renderTree(schemaData, 0)}
+    </SimpleTreeView>
+  );
+};
+
+export default Schema;

package/src/lib/Schema/index.js

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