@ebubekirylmaz/link-test 1.2.44 → 1.2.45

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;

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";

package/src/lib/SchemaEditor/SchemaEditor.jsx

@@ -0,0 +1,258 @@
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import IconButton from "@mui/material/IconButton";
+import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
+import SchemaPropertyEditor from "./SchemaPropertyEditor";
+import { v4 as uuidv4 } from "uuid";
+
+import { Box, Typography } from "@mui/material";
+import React, { forwardRef, useEffect, useState } from "react";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
+import { TreeItem } from "@mui/x-tree-view/TreeItem";
+import { addProperty, changeProperty, removeProperty } from "./SchemaUtils";
+
+const SchemaEditor = forwardRef(
+  ({ initialData = {}, customTypes = [] }, ref) => {
+    const [schemaData, setSchemaData] = useState({});
+
+    useEffect(() => {
+      const addIdsToSchema = (schema) => {
+        return {
+          ...schema,
+          id: uuidv4(),
+          properties: schema.properties?.map(addIdsToSchema),
+        };
+      };
+
+      if (!schemaData || Object.keys(schemaData).length === 0) {
+        if (Object.keys(initialData).length === 0) {
+          setSchemaData({
+            type: "object",
+            properties: [],
+          });
+        } else {
+          const dataWithIds = addIdsToSchema(initialData);
+          setSchemaData(dataWithIds);
+        }
+      }
+    }, [initialData, schemaData]);
+
+    const handleAddProperty = (newProperty, parentId = null) => {
+      addProperty(parentId, setSchemaData);
+    };
+
+    const handleRemoveProperty = (propertyId) => {
+      removeProperty(propertyId, setSchemaData);
+    };
+
+    const handleChangeProperty = (propertyId, changes) => {
+      changeProperty(propertyId, changes, setSchemaData);
+    };
+
+    const renderTree = (node, level = 0) => (
+      <TreeItem
+        key={node.id}
+        itemId={level === 0 ? "1" : node.id}
+        label={
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%",
+            }}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: "1px",
+                width: "100%",
+              }}
+            >
+              <SchemaPropertyEditor
+                node={{ ...node, level }}
+                disableNameChange={level === 0}
+                onNameChange={(newName) => {
+                  handleChangeProperty(node.id, {
+                    name: newName,
+                    type: node.type,
+                  });
+                }}
+                onTypeChange={(newType) => {
+                  handleChangeProperty(level === 0 ? "1" : node.id, {
+                    name: node.name,
+                    type: newType,
+                  });
+                }}
+                customTypes={customTypes}
+              />
+              {true && (
+                <IconButton
+                  size="small"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleAddProperty(
+                      { type: "string", name: "newProperty" },
+                      level === 0 ? null : node.id
+                    );
+                  }}
+                  disabled={
+                    node.type !== "object" ||
+                    (node.type === "array" && node.properties.length >= 1)
+                  }
+                  sx={{
+                    color: (theme) => theme.palette.grey[600],
+                    marginRight: "-8px ",
+                  }}
+                  data-cy={`add-property-button-${node.id}`}
+                >
+                  <AddCircleOutlineIcon fontSize="small" />
+                </IconButton>
+              )}
+            </Box>
+
+            {true && (
+              <IconButton
+                size="small"
+                style={{ marginLeft: "auto" }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleRemoveProperty(node.id);
+                }}
+                disabled={level === 0}
+                sx={{
+                  color: (theme) => theme.palette.grey[600],
+                }}
+              >
+                <RemoveCircleOutlineIcon fontSize="small" />
+              </IconButton>
+            )}
+          </Box>
+        }
+      >
+        {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>
+      );
+    };
+
+    const schemaOutput = () => {
+      const removeIds = (node) => {
+        // eslint-disable-next-line no-unused-vars
+        const { id, properties, ...rest } = node;
+        if ((node.type === "object" || node.type === "array") && properties) {
+          return { ...rest, properties: properties.map(removeIds) };
+        }
+        return rest;
+      };
+
+      return removeIds(schemaData);
+    };
+
+    React.useImperativeHandle(ref, () => ({
+      schemaOutput: schemaOutput,
+    }));
+
+    const schemaOutputWithIDs = () => schemaData;
+
+    return (
+      <SimpleTreeView
+        slots={{
+          collapseIcon: () => <ExpandMoreIcon data-cy="collapse-icon" />,
+          expandIcon: () => <ChevronRightIcon data-cy="expand-icon" />,
+        }}
+        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 SchemaEditor;