@ebubekirylmaz/link-test 1.2.44 → 1.2.46

package/src/lib/APITypes/APITypes.jsx

@@ -0,0 +1,141 @@
+import Schema from "../Schema/Schema";
+import SchemaEditor from "../SchemaEditor";
+import TypeList from "./TypeList";
+import { publish } from "@nucleoidai/react-event";
+
+import { Box, Divider, Paper } from "@mui/material";
+import React, { useState } from "react";
+
+const APITypes = ({ tstypes, nuctypes, typesRef }) => {
+  const combinedData = [
+    ...tstypes.map((item) => ({ ...item, isTypeScript: true })),
+    ...nuctypes.map((item) => ({ ...item, isTypeScript: false })),
+  ];
+  const [selectedType, setSelectedType] = useState(
+    combinedData.length > 0 ? combinedData[0].name : null
+  );
+  const preloaded = {};
+  combinedData.forEach((item) => {
+    preloaded[item.name] = true;
+  });
+
+  const isTypeScriptType = (typeName) => {
+    return tstypes.some((type) => type.name === typeName);
+  };
+
+  const handleAddType = (typeName) => {
+    publish("API_TYPE_ADD", { typeName });
+  };
+
+  const handleDeleteType = (typeName) => {
+    publish("API_TYPE_DELETE", { typeName });
+  };
+
+  const handleUpdateType = (oldTypeName, newTypeName) => {
+    publish("API_TYPE_RENAME", { oldTypeName, newTypeName });
+  };
+
+  const renderRightPanel = () => {
+    if (!selectedType) return null;
+
+    const useSchemaEditor = !isTypeScriptType(selectedType);
+    const initialData = findSchemaByName(selectedType);
+
+    return (
+      <Box sx={{ width: "100%", height: "100%" }} data-cy="type-schema-editor">
+        {useSchemaEditor ? (
+          <SchemaEditor
+            key={selectedType}
+            ref={typesRef}
+            initialData={initialData}
+          />
+        ) : (
+          <Schema initialData={initialData} />
+        )}
+      </Box>
+    );
+  };
+
+  const handleTypeSelect = (name) => {
+    setSelectedType(name);
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        height: "85%",
+        p: 2,
+      }}
+      data-cy="api-types"
+    >
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <Paper
+          elevation={3}
+          sx={{
+            width: "100%",
+            p: 2,
+            bgcolor: "background.paper",
+            borderRadius: 2,
+            height: "100%",
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <TypeList
+            combinedData={combinedData}
+            selectedType={selectedType}
+            onTypeSelect={handleTypeSelect}
+            onAddType={handleAddType}
+            onUpdateType={handleUpdateType}
+            onDeleteType={handleDeleteType}
+          />
+        </Paper>
+      </Box>
+      <Divider orientation="vertical" flexItem sx={{ width: "1rem" }} />
+
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <Paper
+          elevation={3}
+          sx={{
+            width: "100%",
+            p: 2,
+            bgcolor: "background.paper",
+            borderRadius: 2,
+            height: "100%",
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {renderRightPanel()}
+        </Paper>
+      </Box>
+    </Box>
+  );
+
+  function findSchemaByName(name) {
+    const schema = combinedData.find((schema) => schema.name === name);
+    return schema ? schema.schema : null;
+  }
+};
+
+export default APITypes;

package/src/lib/APITypes/TypeEditor.jsx

@@ -0,0 +1,46 @@
+import { Box, IconButton, TextField } from "@mui/material";
+import { Check, Close } from "@mui/icons-material";
+import React, { useState } from "react";
+
+const TypeEditor = ({ initialValue = "", onConfirm, onCancel }) => {
+  const [typeName, setTypeName] = useState(initialValue);
+
+  const handleConfirm = () => {
+    onConfirm(typeName);
+    setTypeName("");
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "100%",
+      }}
+    >
+      <TextField
+        value={typeName}
+        onChange={(e) => setTypeName(e.target.value)}
+        variant="outlined"
+        size="small"
+        sx={{ width: "60%", marginRight: 1 }}
+        data-cy="type-name-input"
+      />
+      <Box>
+        <IconButton
+          onClick={handleConfirm}
+          size="small"
+          data-cy="confirm-type-button"
+        >
+          <Check />
+        </IconButton>
+        <IconButton onClick={onCancel} size="small">
+          <Close />
+        </IconButton>
+      </Box>
+    </Box>
+  );
+};
+
+export default TypeEditor;

package/src/lib/APITypes/TypeList.jsx

@@ -0,0 +1,180 @@
+import ToggleableMenu from "../ToggleableMenu";
+import TypeEditor from "./TypeEditor";
+
+import { Add, Delete, Edit, MoreVert } from "@mui/icons-material";
+import { Box, Fab, IconButton, Typography } from "@mui/material";
+import React, { useState } from "react";
+
+const TypeList = ({
+  combinedData,
+  selectedType,
+  onTypeSelect,
+  onAddType,
+  onUpdateType,
+  onDeleteType,
+}) => {
+  const [isAddingType, setIsAddingType] = useState(false);
+  const [editingType, setEditingType] = useState(null);
+
+  const handleAddTypeClick = () => {
+    setIsAddingType(true);
+  };
+
+  const handleAddTypeConfirm = (typeName) => {
+    onAddType(typeName);
+    setIsAddingType(false);
+    onTypeSelect(typeName);
+  };
+
+  const handleEditType = (item) => {
+    setEditingType(item);
+  };
+
+  const handleDeleteType = (typeName) => {
+    const deletedIndex = combinedData.findIndex(
+      (type) => type.name === typeName
+    );
+
+    onDeleteType(typeName);
+
+    if (deletedIndex === -1) {
+      onTypeSelect(null);
+    } else if (deletedIndex > 0) {
+      setTimeout(() => {
+        onTypeSelect(combinedData[deletedIndex - 1].name);
+      }, 0);
+    } else if (deletedIndex < combinedData.length - 1) {
+      setTimeout(() => {
+        onTypeSelect(combinedData[deletedIndex + 1].name);
+      }, 0);
+    } else {
+      onTypeSelect(null);
+    }
+
+    setEditingType(null);
+  };
+
+  const handleUpdateType = (updatedTypeName) => {
+    onTypeSelect(null);
+    onUpdateType(editingType, updatedTypeName);
+    setEditingType(null);
+    setTimeout(() => {
+      onTypeSelect(updatedTypeName);
+    }, 0);
+  };
+
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        overflowY: "auto",
+        position: "relative",
+        height: "100%",
+      }}
+      data-cy="type-list"
+    >
+      {combinedData.map((item) => (
+        <Box
+          key={item.name}
+          onClick={() => {
+            onTypeSelect(item.name);
+          }}
+          sx={{
+            padding: "6px 16px",
+            height: "40px",
+            width: "100%",
+            borderRadius: 2,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            cursor: "pointer",
+            bgcolor: (theme) =>
+              selectedType === item.name
+                ? theme.palette.action.selected
+                : theme.palette.background.paper,
+            "&:hover": {
+              bgcolor: (theme) => theme.palette.action.hover,
+            },
+          }}
+          data-cy={`type-list-item-${item.name}`}
+        >
+          {editingType === item.name ? (
+            <TypeEditor
+              initialValue={item.name}
+              onConfirm={handleUpdateType}
+              onCancel={() => setEditingType(null)}
+              data-cy="type-editor"
+            />
+          ) : (
+            <>
+              <Typography variant="body1" style={{ textAlign: "left" }}>
+                {item.name}
+              </Typography>
+              <Box
+                sx={{ display: "flex", alignItems: "center" }}
+                data-cy={`type-item-actions-${item.name}`}
+              >
+                {item.isTypeScript && (
+                  <span
+                    style={{
+                      marginRight: "4px",
+                      color: "#808080",
+                      fontWeight: "bold",
+                    }}
+                    data-cy={`typescript-item-${item.name}`}
+                  >
+                    TS
+                  </span>
+                )}
+                {!item.isTypeScript && (
+                  <ToggleableMenu defaultIcon={<MoreVert />}>
+                    <IconButton
+                      size="small"
+                      onClick={() => handleEditType(item.name)}
+                      data-cy={`edit-type-button-${item.name}`}
+                    >
+                      <Edit />
+                    </IconButton>
+                    <IconButton
+                      size="small"
+                      onClick={() => handleDeleteType(item.name)}
+                      data-cy={`delete-type-button-${item.name}`}
+                    >
+                      <Delete />
+                    </IconButton>
+                  </ToggleableMenu>
+                )}
+              </Box>
+            </>
+          )}
+        </Box>
+      ))}
+      {isAddingType && (
+        <TypeEditor
+          onConfirm={handleAddTypeConfirm}
+          onCancel={() => setIsAddingType(false)}
+          data-cy="add-type-editor"
+        />
+      )}
+      <Box
+        sx={{
+          position: "absolute",
+          bottom: 16,
+          left: "50%",
+          transform: "translateX(-50%)",
+        }}
+      >
+        <Fab
+          color="primary"
+          onClick={handleAddTypeClick}
+          size="small"
+          data-cy="add-type-button"
+        >
+          <Add />
+        </Fab>
+      </Box>
+    </Box>
+  );
+};
+
+export default TypeList;

package/src/lib/APITypes/index.js

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

package/src/lib/AddItemWizard/AddItemWizard.jsx

@@ -73,10 +73,11 @@ function AddItemWizard({ onSubmit, items, steps, stepExp }) {
       <Stack
         container
         direction="column"
-        alignItems="center"
-        justifyContent="center"
         spacing={2}
-      >
+        sx={{
+          alignItems: "center",
+          justifyContent: "center"
+        }}>
         <SparkleInput
           prop="name"
           value={newItems[0].details.name}
@@ -94,7 +95,9 @@ function AddItemWizard({ onSubmit, items, steps, stepExp }) {
         <Typography variant="subtitle1" color={"gray"} sx={{ mb: -2 }}>
           Service Type
         </Typography>
-        <Stack direction="row" alignItems="center">
+        <Stack direction="row" sx={{
+          alignItems: "center"
+        }}>
           <Typography>Single</Typography>
           <Switch
             data-cy="type-switch"
@@ -109,8 +112,14 @@ function AddItemWizard({ onSubmit, items, steps, stepExp }) {
 
   const Service = () => {
     return (
-      <Grid container justifyContent="center" mt={1} spacing={2}>
-        <Grid item xs={5}>
+      <Grid
+        container
+        spacing={2}
+        sx={{
+          justifyContent: "center",
+          mt: 1
+        }}>
+        <Grid size={5}>
           <Stack
             sx={{
               borderStyle: "none dotted none none",
@@ -128,9 +137,11 @@ function AddItemWizard({ onSubmit, items, steps, stepExp }) {
             <Typography
               variant="subtitle1"
               color={"gray"}
-              textAlign={"center"}
-              sx={{ marginTop: 2, marginBottom: 1 }}
-            >
+              sx={{
+                textAlign: "center",
+                marginTop: 2,
+                marginBottom: 1
+              }}>
               Select an Icon
             </Typography>
             <SelectAvatar
@@ -142,7 +153,7 @@ function AddItemWizard({ onSubmit, items, steps, stepExp }) {
             />
           </Stack>
         </Grid>
-        <Grid item xs={7}>
+        <Grid size={7}>
           <SparkleInput
             prop="description"
             value={newItems[1].details.description}

package/src/lib/BlankTreeMessage/BlankTreeMessage.jsx

@@ -0,0 +1,39 @@
+import { AutoAwesome } from "@mui/icons-material";
+import { Box, CardActions, Fab, Typography } from "@mui/material";
+
+function BlankTreeMessage({ item, openLogicDialog, functionsExist }) {
+  return (
+    <Box sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Typography
+          sx={{
+            color: "text.secondary",
+            textAlign: "center",
+          }}
+        >
+          No {item} defined yet
+        </Typography>
+      </Box>
+      {functionsExist && (
+        <Box
+          sx={{ display: "flex", justifyContent: "center", marginBottom: 1 }}
+        >
+          <CardActions>
+            <Fab size="medium" onClick={openLogicDialog}>
+              <AutoAwesome />
+            </Fab>
+          </CardActions>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default BlankTreeMessage;

package/src/lib/BlankTreeMessage/index.js

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

package/src/lib/CustomBreadcrumbs/CustomBreadcrumbs.jsx

@@ -19,7 +19,9 @@ export default function CustomBreadcrumbs({
 
   return (
     <Box sx={{ ...sx }}>
-      <Stack direction="row" alignItems="center">
+      <Stack direction="row" sx={{
+        alignItems: "center"
+      }}>
         <Box sx={{ flexGrow: 1 }}>
           {heading && (
             <Typography variant="h4" gutterBottom>
@@ -43,7 +45,6 @@ export default function CustomBreadcrumbs({
 
         {action && <Box sx={{ flexShrink: 0 }}> {action} </Box>}
       </Stack>
-
       {!!moreLink && (
         <Box sx={{ mt: 2 }}>
           {moreLink.map((href) => (

package/src/lib/DialogTootip/DialogTooltip.jsx

@@ -0,0 +1,67 @@
+import CloseIcon from "@mui/icons-material/Close";
+import IconButton from "@mui/material/IconButton";
+import { styled } from "@mui/material/styles";
+
+import { Grid, Tooltip, Typography, tooltipClasses } from "@mui/material";
+
+const DialogTooltip = styled(
+  ({
+    className,
+    open,
+    handleTooltipClose,
+    title,
+    message,
+    footer,
+    ...props
+  }) => (
+    <Tooltip
+      open={open}
+      onClose={handleTooltipClose}
+      disableFocusListener
+      disableHoverListener
+      disableTouchListener
+      title={
+        <>
+          <Grid
+            container
+            sx={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              backgroundColor: (theme) => theme.palette.background.paper,
+            }}
+          >
+            <Typography variant="subtitle1" sx={{ flexGrow: 1, marginLeft: 2 }}>
+              {title}
+            </Typography>
+            <IconButton onClick={handleTooltipClose} size="small">
+              <CloseIcon />
+            </IconButton>
+          </Grid>
+          <Grid sx={{ padding: 2 }}>
+            <Typography
+              variant="body2"
+              sx={{ color: (theme) => theme.palette.text.primary }}
+            >
+              {message}
+            </Typography>
+            {footer}
+          </Grid>
+        </>
+      }
+      {...props}
+      classes={{ popper: className }}
+    />
+  )
+)(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    width: 600,
+    fontSize: theme.typography.pxToRem(12),
+    border: `1px solid ${theme.palette.divider}`,
+    boxShadow: theme.shadows[1],
+  },
+}));
+
+export default DialogTooltip;

package/src/lib/DialogTootip/index.js

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

package/src/lib/DialogTootip/styles.js

@@ -0,0 +1,9 @@
+const styles = {
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+};
+
+export default styles;