@tduniec/plugin-template-designer-foundation 0.1.1

package/dist/components/Nodes/ActionNode.esm.js

@@ -0,0 +1,613 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState, useRef, useEffect } from 'react';
+import { NodeToolbar, Position, Handle } from '@xyflow/react';
+import { styled, useTheme } from '@material-ui/core/styles';
+import { Box, Typography, IconButton, TextField, Button, Divider, Chip } from '@material-ui/core';
+import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
+import AddIcon from '@material-ui/icons/Add';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import { normalizeSchemaType, buildTypeLabel, extractEnumOptions, stringifyValueForDisplay, coerceValueForType } from './action/schema.esm.js';
+import { useActionInputs } from './action/useActionInputs.esm.js';
+import { createStopNodeInteraction } from './common/nodeInteraction.esm.js';
+import { AutoWidthPopper } from './common/AutoWidthPopper.esm.js';
+
+const Card = styled(Box)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: 12,
+  width: 760,
+  // card width
+  padding: theme.spacing(1.5),
+  boxShadow: theme.shadows[2],
+  color: theme.palette.text.primary
+}));
+const Header = styled(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "1fr",
+  gap: theme.spacing(1),
+  marginBottom: theme.spacing(1)
+}));
+const Grid = styled(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "88px 1fr",
+  gap: theme.spacing(1),
+  alignItems: "center"
+}));
+const KvRow = styled(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "200px 140px 1fr auto",
+  gap: theme.spacing(1),
+  alignItems: "center"
+}));
+const DEFAULT_ACTION_OPTIONS = [
+  "fetch:template"
+  // TODO to be fixed later to not uses default actions
+];
+const ActionNodeComponent = ({ data }) => {
+  const { rfId, step } = data;
+  if (process.env.NODE_ENV === "development") {
+    console.debug("[DesignerFlow] render ActionNode", rfId);
+  }
+  const [newKey, setNewKey] = useState("");
+  const [newVal, setNewVal] = useState("");
+  const stepOutputReferences = data.stepOutputReferences ?? [];
+  const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);
+  const deleteConfirmationTimeoutRef = useRef(null);
+  const theme = useTheme();
+  const actionOptions = (data.scaffolderActionIds?.length ?? 0) > 0 ? data.scaffolderActionIds ?? [] : DEFAULT_ACTION_OPTIONS;
+  const handleTop = (field) => (e) => data.onUpdateField?.(rfId, field, e.target.value);
+  const actionId = typeof step?.action === "string" ? step.action : "";
+  const [actionInputValue, setActionInputValue] = useState(actionId);
+  useEffect(() => {
+    setActionInputValue(actionId);
+  }, [actionId]);
+  const {
+    actionInputSchema,
+    inputEntries,
+    usedInputKeys,
+    missingRequiredInputKeys,
+    availableInputOptions,
+    trimmedNewKey,
+    selectedNewKeyOption,
+    newKeyNormalizedType,
+    newKeyTypeLabel,
+    newKeyEnumOptions
+  } = useActionInputs({ data, step, actionId, newKey });
+  const displayedNewKeyTypeLabel = newKeyTypeLabel || "Any";
+  const hasMissingRequiredInputs = missingRequiredInputKeys.length > 0;
+  const isAddDisabled = !trimmedNewKey || usedInputKeys.has(trimmedNewKey);
+  const newValueOptions = Array.from(
+    /* @__PURE__ */ new Set([
+      ...newKeyNormalizedType === "boolean" ? ["true", "false"] : [],
+      ...newKeyEnumOptions,
+      ...stepOutputReferences
+    ])
+  );
+  const paletteMode = theme.palette.mode ?? theme.palette.type ?? "light";
+  const requiredInputsBackground = paletteMode === "dark" ? "rgba(244, 67, 54, 0.2)" : "rgba(244, 67, 54, 0.08)";
+  const addPair = () => {
+    const k = trimmedNewKey;
+    if (!k || usedInputKeys.has(k)) return;
+    const schema = selectedNewKeyOption?.schema ?? actionInputSchema?.[k];
+    const normalizedType = normalizeSchemaType(schema);
+    const parsedValue = coerceValueForType(newVal, normalizedType);
+    data.onUpdateInput?.(rfId, k, parsedValue);
+    setNewKey("");
+    setNewVal("");
+  };
+  const stopAll = createStopNodeInteraction();
+  useEffect(() => {
+    if (!isConfirmingDelete) {
+      if (deleteConfirmationTimeoutRef.current) {
+        clearTimeout(deleteConfirmationTimeoutRef.current);
+        deleteConfirmationTimeoutRef.current = null;
+      }
+      return void 0;
+    }
+    deleteConfirmationTimeoutRef.current = setTimeout(() => {
+      setIsConfirmingDelete(false);
+      deleteConfirmationTimeoutRef.current = null;
+    }, 3500);
+    return () => {
+      if (deleteConfirmationTimeoutRef.current) {
+        clearTimeout(deleteConfirmationTimeoutRef.current);
+        deleteConfirmationTimeoutRef.current = null;
+      }
+    };
+  }, [isConfirmingDelete]);
+  const handleDeleteNode = () => {
+    if (!data.onRemoveNode) {
+      return;
+    }
+    if (!isConfirmingDelete) {
+      setIsConfirmingDelete(true);
+      return;
+    }
+    data.onRemoveNode(rfId);
+    setIsConfirmingDelete(false);
+  };
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(Header, { title: step?.name || "Unnamed Step", children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: theme.spacing(1)
+          },
+          children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", noWrap: true, children: step?.name || "Unnamed Step" }),
+            data.onRemoveNode && /* @__PURE__ */ jsxs(
+              Box,
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: theme.spacing(0.5),
+                  color: theme.palette.text.secondary
+                },
+                children: [
+                  isConfirmingDelete && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", children: "Click again to delete" }),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: handleDeleteNode,
+                      onPointerDown: (e) => e.stopPropagation(),
+                      "aria-label": "Remove action",
+                      color: isConfirmingDelete ? "secondary" : "default",
+                      className: "nodrag nowheel",
+                      children: /* @__PURE__ */ jsx(DeleteOutlineIcon, { fontSize: "small" })
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Action" }),
+      /* @__PURE__ */ jsx(
+        Autocomplete,
+        {
+          size: "small",
+          options: actionOptions,
+          PopperComponent: AutoWidthPopper,
+          freeSolo: true,
+          autoHighlight: true,
+          value: actionId,
+          inputValue: actionInputValue,
+          filterOptions: (options) => {
+            const needle = actionInputValue.trim().toLowerCase();
+            if (!needle) {
+              return options;
+            }
+            return options.filter((opt) => opt.toLowerCase().includes(needle));
+          },
+          onChange: (_, newValue) => {
+            const nextValue = newValue ?? "";
+            setActionInputValue(nextValue);
+            data.onUpdateField?.(rfId, "action", nextValue);
+          },
+          onInputChange: (_, newInputValue, reason) => {
+            if (reason === "reset") {
+              return;
+            }
+            const nextValue = newInputValue ?? "";
+            setActionInputValue(nextValue);
+            data.onUpdateField?.(rfId, "action", nextValue);
+          },
+          onPointerDown: stopAll.onPointerDown,
+          onKeyDown: stopAll.onKeyDown,
+          className: stopAll.className,
+          fullWidth: true,
+          renderInput: (params) => /* @__PURE__ */ jsx(
+            TextField,
+            {
+              ...params,
+              size: "small",
+              placeholder: "e.g. fetch:template",
+              fullWidth: true,
+              inputProps: {
+                ...params.inputProps,
+                ...stopAll.inputProps
+              }
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(NodeToolbar, { position: Position.Bottom, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outlined",
+        size: "small",
+        startIcon: /* @__PURE__ */ jsx(AddIcon, { fontSize: "small" }),
+        onClick: () => data.onAddNode?.({
+          afterRfId: rfId,
+          type: "actionNode"
+        }),
+        onPointerDown: (e) => e.stopPropagation(),
+        className: "nodrag nowheel",
+        children: "Add Action"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(Box, { sx: { mb: 1 }, children: /* @__PURE__ */ jsxs(Grid, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "ID" }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          size: "small",
+          placeholder: "string id",
+          value: String(step?.id ?? ""),
+          onChange: handleTop("id"),
+          fullWidth: true,
+          ...stopAll
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Name" }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          size: "small",
+          placeholder: "Step name",
+          value: String(step?.name ?? ""),
+          onChange: handleTop("name"),
+          fullWidth: true,
+          ...stopAll
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Inputs" }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "grid", mt: 0.5 }, children: [
+      inputEntries.length === 0 && /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            fontSize: 12,
+            color: theme.palette.text.secondary,
+            border: `1px dashed ${theme.palette.divider}`,
+            borderRadius: 1,
+            p: 1,
+            textAlign: "center"
+          },
+          children: "No inputs yet"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        KvRow,
+        {
+          sx: {
+            mt: inputEntries.length === 0 ? 1.5 : 0.5,
+            color: theme.palette.text.secondary
+          },
+          children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Key" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Type" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Value" }),
+            /* @__PURE__ */ jsx(Box, {})
+          ]
+        }
+      ),
+      inputEntries.map(([k, v]) => {
+        const schema = actionInputSchema?.[k];
+        const normalizedType = normalizeSchemaType(schema, v);
+        const fallbackTypeLabel = normalizedType === "unknown" ? "Unknown" : normalizedType[0].toUpperCase() + normalizedType.slice(1);
+        const typeLabel = buildTypeLabel(schema) || fallbackTypeLabel;
+        const enumOptions = extractEnumOptions(schema);
+        const baseOptions = normalizedType === "boolean" ? ["true", "false"] : [];
+        const options = Array.from(
+          /* @__PURE__ */ new Set([...baseOptions, ...enumOptions, ...stepOutputReferences])
+        );
+        const displayValue = stringifyValueForDisplay(v, normalizedType);
+        const handleStringChange = (nextValue) => {
+          const parsed = coerceValueForType(nextValue, normalizedType);
+          data.onUpdateInput?.(rfId, k, parsed);
+        };
+        return /* @__PURE__ */ jsxs(KvRow, { children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              noWrap: true,
+              title: k,
+              color: "textSecondary",
+              children: k
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { display: "flex", children: /* @__PURE__ */ jsx(Chip, { size: "small", variant: "outlined", label: typeLabel }) }),
+          (normalizedType === "array" || normalizedType === "object") && /* @__PURE__ */ jsx(
+            TextField,
+            {
+              size: "small",
+              value: displayValue,
+              onChange: (event) => handleStringChange(event.target.value),
+              placeholder: "JSON value",
+              fullWidth: true,
+              multiline: true,
+              minRows: 2,
+              inputProps: {
+                ...stopAll.inputProps
+              },
+              onPointerDown: stopAll.onPointerDown,
+              onKeyDown: stopAll.onKeyDown,
+              className: stopAll.className
+            }
+          ),
+          (normalizedType === "number" || normalizedType === "integer") && /* @__PURE__ */ jsx(
+            TextField,
+            {
+              size: "small",
+              value: displayValue,
+              onChange: (event) => handleStringChange(event.target.value),
+              placeholder: "Number",
+              fullWidth: true,
+              inputProps: {
+                ...stopAll.inputProps,
+                inputMode: "decimal"
+              },
+              onPointerDown: stopAll.onPointerDown,
+              onKeyDown: stopAll.onKeyDown,
+              className: stopAll.className
+            }
+          ),
+          normalizedType !== "array" && normalizedType !== "object" && normalizedType !== "number" && normalizedType !== "integer" && /* @__PURE__ */ jsx(
+            Autocomplete,
+            {
+              size: "small",
+              freeSolo: true,
+              options,
+              PopperComponent: AutoWidthPopper,
+              value: displayValue,
+              inputValue: displayValue,
+              fullWidth: true,
+              onChange: (_, value) => handleStringChange(value ?? ""),
+              onInputChange: (_, value, reason) => {
+                if (reason === "reset") {
+                  return;
+                }
+                handleStringChange(value ?? "");
+              },
+              onPointerDown: stopAll.onPointerDown,
+              onKeyDown: stopAll.onKeyDown,
+              className: stopAll.className,
+              renderInput: (params) => /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  ...params,
+                  size: "small",
+                  placeholder: "value",
+                  inputProps: {
+                    ...params.inputProps,
+                    ...stopAll.inputProps
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: () => data.onRemoveInputKey?.(rfId, k),
+              onPointerDown: (e) => e.stopPropagation(),
+              "aria-label": `Remove ${k}`,
+              className: "nodrag nowheel",
+              children: /* @__PURE__ */ jsx(DeleteOutlineIcon, { fontSize: "small" })
+            }
+          )
+        ] }, k);
+      }),
+      /* @__PURE__ */ jsxs(KvRow, { children: [
+        /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            size: "small",
+            freeSolo: true,
+            options: availableInputOptions,
+            PopperComponent: AutoWidthPopper,
+            value: selectedNewKeyOption,
+            inputValue: newKey,
+            filterOptions: (options) => {
+              const needle = newKey.trim().toLowerCase();
+              if (!needle) {
+                return options;
+              }
+              return options.filter(
+                (option) => (typeof option === "string" ? option : option.label).toLowerCase().includes(needle)
+              );
+            },
+            onChange: (_, value) => {
+              if (!value) {
+                setNewKey("");
+                return;
+              }
+              if (typeof value === "string") {
+                setNewKey(value);
+                return;
+              }
+              setNewKey(value.key);
+            },
+            onInputChange: (_, value, reason) => {
+              if (reason === "reset") {
+                return;
+              }
+              setNewKey(value ?? "");
+            },
+            onPointerDown: stopAll.onPointerDown,
+            onKeyDown: stopAll.onKeyDown,
+            className: stopAll.className,
+            getOptionSelected: (option, value) => option.key === value?.key,
+            getOptionLabel: (option) => typeof option === "string" ? option : option.label,
+            renderInput: (params) => /* @__PURE__ */ jsx(
+              TextField,
+              {
+                ...params,
+                size: "small",
+                placeholder: "new key",
+                inputProps: {
+                  ...params.inputProps,
+                  ...stopAll.inputProps
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { display: "flex", children: /* @__PURE__ */ jsx(
+          Chip,
+          {
+            size: "small",
+            variant: "outlined",
+            label: displayedNewKeyTypeLabel
+          }
+        ) }),
+        (newKeyNormalizedType === "array" || newKeyNormalizedType === "object") && /* @__PURE__ */ jsx(
+          TextField,
+          {
+            size: "small",
+            value: newVal,
+            onChange: (event) => setNewVal(event.target.value),
+            placeholder: "JSON value",
+            fullWidth: true,
+            multiline: true,
+            minRows: 2,
+            inputProps: {
+              ...stopAll.inputProps
+            },
+            onPointerDown: stopAll.onPointerDown,
+            onKeyDown: stopAll.onKeyDown,
+            className: stopAll.className
+          }
+        ),
+        (newKeyNormalizedType === "number" || newKeyNormalizedType === "integer") && /* @__PURE__ */ jsx(
+          TextField,
+          {
+            size: "small",
+            value: newVal,
+            onChange: (event) => setNewVal(event.target.value),
+            placeholder: "Number",
+            fullWidth: true,
+            inputProps: {
+              ...stopAll.inputProps,
+              inputMode: "decimal"
+            },
+            onPointerDown: stopAll.onPointerDown,
+            onKeyDown: stopAll.onKeyDown,
+            className: stopAll.className
+          }
+        ),
+        newKeyNormalizedType !== "array" && newKeyNormalizedType !== "object" && newKeyNormalizedType !== "number" && newKeyNormalizedType !== "integer" && /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            size: "small",
+            freeSolo: true,
+            options: newValueOptions,
+            PopperComponent: AutoWidthPopper,
+            value: newVal,
+            inputValue: newVal,
+            fullWidth: true,
+            filterOptions: (options) => {
+              const needle = newVal.trim().toLowerCase();
+              if (!needle) {
+                return options;
+              }
+              return options.filter((option) => {
+                const raw = String(option);
+                const normalized = raw.replace(/^\s*\$\{\{\s*/, "").replace(/\s*\}\}\s*$/, "");
+                const haystacks = [
+                  raw.toLowerCase(),
+                  normalized.toLowerCase()
+                ];
+                return haystacks.some(
+                  (haystack) => haystack.includes(needle)
+                );
+              });
+            },
+            onChange: (_, value) => setNewVal(value ?? ""),
+            onInputChange: (_, value, reason) => {
+              if (reason === "reset") {
+                return;
+              }
+              setNewVal(value ?? "");
+            },
+            onPointerDown: stopAll.onPointerDown,
+            onKeyDown: stopAll.onKeyDown,
+            className: stopAll.className,
+            renderInput: (params) => /* @__PURE__ */ jsx(
+              TextField,
+              {
+                ...params,
+                size: "small",
+                placeholder: "new value",
+                inputProps: {
+                  ...params.inputProps,
+                  ...stopAll.inputProps
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "contained",
+            onClick: addPair,
+            onPointerDown: (e) => e.stopPropagation(),
+            disabled: isAddDisabled,
+            className: "nodrag nowheel",
+            children: "Add"
+          }
+        )
+      ] })
+    ] }),
+    hasMissingRequiredInputs && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          mt: 1.5,
+          p: 1,
+          borderRadius: 1,
+          border: `1px solid ${theme.palette.error.main}`
+        },
+        style: { backgroundColor: requiredInputsBackground },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", children: "Missing required inputs" }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                flexWrap: "wrap",
+                mt: 0.75
+              },
+              style: { gap: theme.spacing(0.5) },
+              children: missingRequiredInputKeys.map((key) => /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  size: "small",
+                  variant: "outlined",
+                  label: key,
+                  style: {
+                    borderColor: theme.palette.error.main,
+                    color: theme.palette.error.main
+                  }
+                },
+                key
+              ))
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top }),
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom })
+  ] });
+};
+const ActionNode = memo(ActionNodeComponent);
+
+export { ActionNode };
+//# sourceMappingURL=ActionNode.esm.js.map