@canmingir/link 1.2.23 → 1.2.25

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;

package/src/lib/SchemaEditor/SchemaUtils.js

@@ -0,0 +1,152 @@
+import { v4 as uuidv4 } from "uuid";
+
+export const getTypeStyle = (type) => {
+  return {
+    fontWeight: "normal",
+    color: getTypeColor(type),
+    marginLeft: "auto",
+  };
+};
+
+const getTypeColor = (type) => {
+  switch (type) {
+    case "object":
+      return "red";
+    case "string":
+      return "green";
+    case "integer":
+      return "blue";
+
+    default:
+      return "black";
+  }
+};
+
+export const addProperty = (parentId = null, setSchemaData) => {
+  const addPropertyToNode = (node, parentId) => {
+    if (node.id === parentId) {
+      const propertyCount = node.properties ? node.properties.length : 0;
+      const newName = propertyCount === 0 ? "id" : `prop${propertyCount + 1}`;
+      const newType = "string";
+
+      const newProperty = {
+        name: newName,
+        type: newType,
+        id: uuidv4(),
+      };
+
+      const updatedProperties = node.properties
+        ? [...node.properties, newProperty]
+        : [newProperty];
+
+      return { ...node, properties: updatedProperties };
+    } else if (node.properties) {
+      const updatedProperties = node.properties.map((childNode) =>
+        addPropertyToNode(childNode, parentId)
+      );
+      return { ...node, properties: updatedProperties };
+    }
+    return node;
+  };
+
+  setSchemaData((currentData) => {
+    if (!parentId) {
+      const propertyCount = currentData.properties
+        ? currentData.properties.length
+        : 0;
+      const newName = propertyCount === 0 ? "id" : `prop${propertyCount + 1}`;
+      const newType = "string";
+
+      const newProperty = {
+        name: newName,
+        type: newType,
+        id: uuidv4(),
+      };
+
+      const updatedProperties = currentData.properties
+        ? [...currentData.properties, newProperty]
+        : [newProperty];
+
+      return {
+        ...currentData,
+        properties: updatedProperties,
+      };
+    } else {
+      return addPropertyToNode(currentData, parentId);
+    }
+  });
+};
+
+export const removeProperty = (propertyId, setSchemaData) => {
+  const removePropertyFromNode = (node, propertyId) => {
+    if (node.id === propertyId) {
+      return null;
+    }
+    if (node.properties) {
+      const updatedProperties = node.properties
+        .map((childNode) => removePropertyFromNode(childNode, propertyId))
+        .filter((childNode) => childNode !== null);
+
+      return { ...node, properties: updatedProperties };
+    }
+    return node;
+  };
+  setSchemaData((currentData) => {
+    const updatedProperties = currentData.properties
+      .map((node) => removePropertyFromNode(node, propertyId))
+      .filter((node) => node !== null);
+    const updatedData = { ...currentData, properties: updatedProperties };
+
+    return updatedData;
+  });
+};
+export const changeProperty = (propertyId, changes, setSchemaData) => {
+  const updateProperty = (node, propertyId, changes) => {
+    if (node.id === propertyId || propertyId === "1") {
+      const updatedNode = {
+        ...node,
+        name: changes.name,
+        type: changes.type,
+      };
+
+      if (changes.type === "object") {
+        if (!updatedNode.properties || updatedNode.properties.length === 0) {
+          updatedNode.properties = [
+            {
+              name: "id",
+              type: "string",
+              id: uuidv4(),
+            },
+          ];
+        }
+      } else if (changes.type === "array") {
+        if (!updatedNode.properties || updatedNode.properties.length === 0) {
+          updatedNode.properties = [
+            {
+              name: "item",
+              type: "string",
+              id: uuidv4(),
+            },
+          ];
+        } else {
+          updatedNode.properties = updatedNode.properties.slice(0, 1);
+        }
+      } else if (changes.type !== "object" && changes.type !== "array") {
+        delete updatedNode.properties;
+      }
+      return updatedNode;
+    }
+
+    if (node.properties) {
+      const updatedProperties = node.properties.map((childNode) =>
+        updateProperty(childNode, propertyId, changes)
+      );
+      return { ...node, properties: updatedProperties };
+    }
+    return node;
+  };
+
+  setSchemaData((currentData) => {
+    return updateProperty(currentData, propertyId, changes);
+  });
+};

package/src/lib/SchemaEditor/index.js

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

package/src/lib/ToggleableMenu/ToggleableMenu.jsx

@@ -0,0 +1,35 @@
+import { Box, ClickAwayListener, IconButton } from "@mui/material";
+import React, { useState } from "react";
+
+function ToggleableMenu({ defaultIcon, children }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleDefaultIconClick = (event) => {
+    event.stopPropagation();
+    setIsOpen(!isOpen);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleMenuItemClick = (event) => {
+    event.stopPropagation();
+  };
+
+  return (
+    <ClickAwayListener onClickAway={handleClose}>
+      <Box>
+        {isOpen ? (
+          <Box onClick={handleMenuItemClick}>{children}</Box>
+        ) : (
+          <IconButton size="small" onClick={handleDefaultIconClick}>
+            {defaultIcon}
+          </IconButton>
+        )}
+      </Box>
+    </ClickAwayListener>
+  );
+}
+
+export default ToggleableMenu;

package/src/lib/ToggleableMenu/index.js

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

package/src/lib/index.js

@@ -34,3 +34,17 @@ export {
 export { default as ActionNode } from "./Flow/layouts/ActionNode";
 
 export { default as InfoNode } from "./Flow/layouts/InfoNode";
+
+export { default as APITree, compile as compileAPITree } from "./APITree";
+export { default as APIDialogAction } from "./APIDialogAction";
+export { default as APIParams } from "./APIParams";
+export { default as APIPath } from "./APIPath";
+export { default as APITypes } from "./APITypes";
+export { default as BlankTreeMessage } from "./BlankTreeMessage";
+export { default as DialogTooltip } from "./DialogTootip";
+export { default as NucDialog } from "./NucDialog";
+export { default as ParamTable } from "./ParamTable";
+export { default as ResourceMenu } from "./ResourceMenu";
+export { default as Schema } from "./Schema";
+export { default as SchemaEditor } from "./SchemaEditor";
+export { default as ToggleableMenu } from "./ToggleableMenu";

package/src/pages/Callback.jsx

@@ -2,9 +2,9 @@ import Page from "../layouts/Page";
 import React from "react";
 import config from "../config/config";
 import oauth from "../http/oauth";
+import { publish } from "@nucleoidai/react-event";
 import qs from "qs";
 import { storage } from "@nucleoidjs/webstorage";
-import { useContext } from "../ContextProvider/ContextProvider";
 import { useLocation } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 
@@ -15,7 +15,6 @@ function Callback() {
   const projectBar = config().template?.projectBar;
 
   const { google, github, linkedin } = appConfig;
-  const [, dispatch] = useContext();
   const location = useLocation();
   const navigate = useNavigate();
   const hasProcessed = useRef(false);
@@ -91,14 +90,13 @@ function Callback() {
       .then(({ data }) => {
         const accessToken = data.accessToken;
         const refreshToken = data.refreshToken;
-        const userInfo = data.user;
 
         storage.set("link", "accessToken", accessToken);
         storage.set("link", "refreshToken", refreshToken);
         // TODO - update provider info
         storage.set("link", "identityProvider", identityProvider);
 
-        dispatch({ type: "LOGIN", payload: { user: userInfo } });
+        publish("LOGIN", { data: data });
 
         window.history.replaceState(
           {},

package/src/pages/LoginPage.jsx

@@ -30,20 +30,11 @@ function LoginPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [navigate]);
 
-  if (credentials?.provider === "COGNITO") {
-    return <CognitoLogin />;
-  }
-
-  if (credentials?.provider === "DEMO") {
-    return (
-      <Page title={`Sign in to ${name}`}>
-        <DemoLogin />
-      </Page>
-    );
-  }
-
   return (
     <Page title={`Sign in to ${name}`}>
+      {credentials?.provider === "COGNITO" && <CognitoLogin />}
+      {credentials?.provider === "DEMO" && <DemoLogin />}
+
       <LoginForm icon={template.login.icon} name={name} formColor={formColor} />
     </Page>
   );