@ebubekirylmaz/link-test 1.2.44 → 1.2.46

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;

package/src/lib/SchemaEditor/SchemaEditor.test.js

@@ -0,0 +1,193 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import SchemaEditor from "./SchemaEditor";
+import { act } from "react-dom/test-utils";
+
+import { render, screen } from "@testing-library/react";
+
+describe("SchemaEditor Component", () => {
+  const initialSchema = {
+    type: "object",
+    properties: [
+      { type: "string", name: "initial" },
+      { type: "integer", name: "schema" },
+      {
+        type: "object",
+        name: "object",
+        properties: [{ type: "integer", name: "nested" }],
+      },
+    ],
+  };
+
+  test("renders with initial schema", () => {
+    console.log("rendering ");
+    render(<SchemaEditor initialData={initialSchema} />);
+
+    expect(screen.getByDisplayValue(/initial/)).toBeInTheDocument();
+    expect(screen.getByDisplayValue(/schema/)).toBeInTheDocument();
+
+    // expect(screen.getByText(/nested/)).toBeInTheDocument();
+  });
+
+  test("initializes without initial data", () => {
+    console.log("initializing without initial data");
+    render(<SchemaEditor />);
+
+    const expectedSchema = {
+      type: "object",
+      properties: [],
+    };
+
+    const outputSchema = SchemaEditor.schemaOutput();
+    expect(outputSchema).toEqual(expectedSchema);
+  });
+
+  test("provides output correctly with initial data", () => {
+    console.log("provides output correctly with initial data");
+    render(<SchemaEditor initialData={initialSchema} />);
+
+    const outputSchema = SchemaEditor.schemaOutput();
+    expect(outputSchema).toEqual(initialSchema);
+  });
+
+  test("adds a new property", () => {
+    console.log("adds a new property");
+    const emptySchema = { type: "object", properties: [] };
+    render(<SchemaEditor initialData={emptySchema} />);
+
+    act(() => {
+      SchemaEditor.addProperty(null);
+    });
+
+    let updatedSchema = SchemaEditor.schemaOutput();
+    expect(updatedSchema.properties).toHaveLength(1);
+    expect(updatedSchema.properties[0].name).toBe("id");
+
+    act(() => {
+      SchemaEditor.addProperty(null);
+    });
+
+    updatedSchema = SchemaEditor.schemaOutput();
+    expect(updatedSchema.properties).toHaveLength(2);
+    expect(updatedSchema.properties[1].name).toBe("prop2");
+  });
+
+  test("removes a property by ID", () => {
+    console.log("removes a property by ID");
+    render(<SchemaEditor initialData={initialSchema} />);
+
+    const currentSchemaWithIDs = SchemaEditor.schemaOutputWithIDs();
+
+    const propertyToRemove = currentSchemaWithIDs.properties.find(
+      (prop) => prop.name === "initial"
+    );
+    if (!propertyToRemove) {
+      throw new Error("Property to remove not found");
+    }
+    act(() => {
+      SchemaEditor.removeProperty(propertyToRemove.id);
+    });
+
+    const newCurrentSchema = SchemaEditor.schemaOutput();
+    const isPropertyRemoved = newCurrentSchema.properties.every(
+      (prop) => prop.name !== "initial"
+    );
+    expect(isPropertyRemoved).toBeTruthy();
+  });
+
+  test("changes a property type and name", () => {
+    console.log("changes a property type and name");
+    render(<SchemaEditor initialData={initialSchema} />);
+
+    const currentSchemaWithIDs = SchemaEditor.schemaOutputWithIDs();
+
+    const propertyToChange = currentSchemaWithIDs.properties.find(
+      (prop) => prop.name === "initial"
+    );
+    if (!propertyToChange) {
+      throw new Error("Property to change not found");
+    }
+
+    const change = {
+      name: "initial2",
+      type: "integer",
+    };
+    act(() => {
+      SchemaEditor.changeProperty(propertyToChange.id, change);
+    });
+    const updatedSchemaWithIDs = SchemaEditor.schemaOutputWithIDs();
+
+    const changedProperty = updatedSchemaWithIDs.properties.find(
+      (prop) => prop.id === propertyToChange.id
+    );
+    expect(changedProperty).toBeDefined();
+    expect(changedProperty.name).toBe(change.name);
+    expect(changedProperty.type).toBe(change.type);
+  });
+
+  test("adds a nested object and a property to it", () => {
+    console.log("adds a nested object and a property to it");
+    render(<SchemaEditor initialData={initialSchema} />);
+
+    act(() => {
+      SchemaEditor.addProperty(null);
+    });
+
+    let updatedSchemaWithIDs = SchemaEditor.schemaOutputWithIDs();
+    const newNestedObjectId = updatedSchemaWithIDs.properties.find(
+      (prop) => prop.name === "prop4"
+    ).id;
+
+    act(() => {
+      SchemaEditor.addProperty(newNestedObjectId);
+    });
+
+    updatedSchemaWithIDs = SchemaEditor.schemaOutputWithIDs();
+    const updatedNestedObject = updatedSchemaWithIDs.properties.find(
+      (prop) => prop.id === newNestedObjectId
+    );
+    console.log("updatedNestedObject: ", updatedNestedObject);
+    expect(updatedNestedObject).toBeDefined();
+    expect(updatedNestedObject.name).toBe("prop4");
+  });
+
+  test("changes a property to custom type", () => {
+    console.log("changes a property to custom type");
+    const customTypes = [
+      {
+        name: "Item",
+        schema: {
+          type: "object",
+          properties: [
+            { type: "string", name: "id" },
+            { type: "string", name: "name" },
+            { type: "string", name: "barcode" },
+          ],
+        },
+      },
+    ];
+
+    render(
+      <SchemaEditor initialData={initialSchema} customTypes={customTypes} />
+    );
+
+    const currentSchemaWithIDs = SchemaEditor.schemaOutputWithIDs();
+    const propertyToChange = currentSchemaWithIDs.properties[0];
+
+    const change = {
+      type: "Item",
+    };
+
+    act(() => {
+      SchemaEditor.changeProperty(propertyToChange.id, change);
+    });
+
+    const updatedSchemaWithIDs = SchemaEditor.schemaOutputWithIDs();
+    const updatedProperty = updatedSchemaWithIDs.properties.find(
+      (prop) => prop.id === propertyToChange.id
+    );
+    expect(updatedProperty).toBeDefined();
+    expect(updatedProperty.type).toBe("Item");
+  });
+});

package/src/lib/SchemaEditor/SchemaPropertyEditor.jsx

@@ -0,0 +1,135 @@
+import { Box, Input, MenuItem, Select, Typography } from "@mui/material";
+import React, { useState } from "react";
+
+const SchemaPropertyEditor = ({
+  node,
+  onNameChange,
+  disableNameChange,
+  onTypeChange,
+  customTypes,
+}) => {
+  const [editMode, setEditMode] = useState(null);
+  const [name, setName] = useState(node.name || "");
+  const [type, setType] = useState(node.type);
+  const [isSelectOpen, setIsSelectOpen] = useState(false);
+
+  const handleNameChange = (newName) => {
+    setName(newName);
+    onNameChange(newName);
+  };
+
+  const handleTypeChange = (newType) => {
+    setType(newType);
+    onTypeChange(newType);
+    setEditMode(null);
+    setIsSelectOpen(false);
+  };
+
+  const isRootNode = node.level === 0;
+
+  const propertyTypes = isRootNode
+    ? ["object", "array", ...customTypes.map((type) => type.name)]
+    : [
+        "string",
+        "number",
+        "boolean",
+        "object",
+        "array",
+        ...customTypes.map((type) => type.name),
+      ];
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        width: "100%",
+        gap: "4px",
+      }}
+    >
+      {!disableNameChange ? (
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            width: "100%",
+            gap: "4px",
+          }}
+          onClick={() => {
+            setEditMode("name");
+          }}
+        >
+          <Input
+            value={name}
+            onChange={(e) => handleNameChange(e.target.value)}
+            disableUnderline
+            fullWidth
+            sx={{
+              borderBottom: "2px solid transparent",
+              "&:hover": {
+                borderBottom: "2px solid gray",
+              },
+              "&:focus": {
+                borderBottom: "2px solid blue",
+              },
+            }}
+            data-cy={`property-name-field-${node.id}`}
+          />
+        </Box>
+      ) : (
+        <Box
+          sx={{
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+          }}
+        ></Box>
+      )}
+
+      {editMode === "type" ? (
+        <Select
+          open={isSelectOpen}
+          value={type}
+          onChange={(e) => handleTypeChange(e.target.value)}
+          onClose={() => {
+            setEditMode(null);
+            setIsSelectOpen(false);
+          }}
+          onOpen={() => setIsSelectOpen(true)}
+        >
+          {propertyTypes.map((typeOption) => (
+            <MenuItem
+              value={typeOption}
+              key={typeOption}
+              data-cy={`property-type-option-${typeOption}`}
+            >
+              {typeOption}
+            </MenuItem>
+          ))}
+        </Select>
+      ) : (
+        <Box sx={{ display: "flex", alignItems: "center", cursor: "pointer" }}>
+          <Typography
+            variant="body2"
+            onClick={() => {
+              setEditMode("type");
+              setIsSelectOpen(true);
+            }}
+            sx={{
+              cursor: "pointer",
+              borderRadius: "4px",
+              "&:hover": {
+                backgroundColor: (theme) => theme.palette.grey[600],
+              },
+            }}
+            data-cy={`property-type-select-${node.id}`}
+          >
+            {node.type}
+          </Typography>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default SchemaPropertyEditor;