public commit

2026-03-17 21:06:04 +00:00 · 2024-11-16 12:01:47 +01:00
commit 90f80c4280
582 changed files with 49291 additions and 0 deletions
--- a/app/src/ui/modules/flows/components2/nodes/triggers/TriggerNode.tsx
+++ b/app/src/ui/modules/flows/components2/nodes/triggers/TriggerNode.tsx
@@ -0,0 +1,172 @@
+import { typeboxResolver } from "@hookform/resolvers/typebox";
+import { TextInput } from "@mantine/core";
+import { TypeRegistry } from "@sinclair/typebox";
+import { Clean } from "@sinclair/typebox/value";
+import { type Node, type NodeProps, Position } from "@xyflow/react";
+import {
+   Const,
+   type Static,
+   StringEnum,
+   Type,
+   registerCustomTypeboxKinds,
+   transformObject
+} from "core/utils";
+import { TriggerMap } from "flows";
+import type { TAppFlowTriggerSchema } from "flows/AppFlows";
+import { isEqual } from "lodash-es";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { JsonViewer } from "ui/components/code/JsonViewer";
+import { MantineSegmentedControl } from "ui/components/form/hook-form-mantine/MantineSegmentedControl";
+import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelect";
+import { useFlowCanvas, useFlowSelector } from "../../../hooks/use-flow";
+import { BaseNode } from "../BaseNode";
+import { Handle } from "../Handle";
+
+// @todo: check if this could become an issue
+registerCustomTypeboxKinds(TypeRegistry);
+
+const schema = Type.Object({
+   trigger: Type.Union(
+      Object.values(
+         transformObject(TriggerMap, (trigger, name) =>
+            Type.Object(
+               {
+                  type: Const(name),
+                  config: trigger.cls.schema
+               },
+               { title: String(name), additionalProperties: false }
+            )
+         )
+      )
+   )
+});
+
+export const TriggerNode = (props: NodeProps<Node<TAppFlowTriggerSchema & { label: string }>>) => {
+   const {
+      data: { label, ...trigger }
+   } = props;
+   //console.log("TriggerNode");
+   const state = useFlowSelector((s) => s.flow!.trigger!);
+   const { actions } = useFlowCanvas();
+
+   const {
+      register,
+      handleSubmit,
+      setValue,
+      getValues,
+      formState: { isValid, errors },
+      watch,
+      control
+   } = useForm({
+      resolver: typeboxResolver(schema),
+      defaultValues: { trigger: state } as Static<typeof schema>,
+      mode: "onChange"
+   });
+   const data = watch("trigger");
+
+   async function onSubmit(data: Static<typeof schema>) {
+      console.log("submit", data.trigger);
+      // @ts-ignore
+      await actions.trigger.update(data.trigger);
+   }
+
+   async function onChangeName(name: string) {
+      console.log("change name", name);
+      await actions.flow.setName(name);
+   }
+
+   /*useEffect(() => {
+      console.log("trigger update", data);
+      actions.trigger.update(data);
+   }, [data]);*/
+
+   return (
+      <BaseNode {...props} tabs={TriggerNodeTabs({ data })} onChangeName={onChangeName}>
+         <form onBlur={handleSubmit(onSubmit)} className="flex flex-col gap-3">
+            <div className="flex flex-row justify-between items-center">
+               <MantineSegmentedControl
+                  label="Trigger Type"
+                  defaultValue="manual"
+                  data={[
+                     { label: "Manual", value: "manual" },
+                     { label: "HTTP", value: "http" },
+                     { label: "Event", value: "event", disabled: true }
+                  ]}
+                  name="trigger.type"
+                  control={control}
+               />
+               <MantineSegmentedControl
+                  label="Execution Mode"
+                  defaultValue="async"
+                  data={[
+                     { label: "Async", value: "async" },
+                     { label: "Sync", value: "sync" }
+                  ]}
+                  name="trigger.config.mode"
+                  control={control}
+               />
+            </div>
+            {data.type === "manual" && <Manual />}
+            {data.type === "http" && (
+               <Http form={{ watch, register, setValue, getValues, control }} />
+            )}
+         </form>
+         <Handle type="source" id="trigger-out" />
+      </BaseNode>
+   );
+};
+
+const Manual = () => {
+   return null;
+};
+
+const Http = ({ form }) => {
+   return (
+      <>
+         <div className="flex flex-row gap-2 items-center">
+            <MantineSelect
+               className="w-36"
+               label="Method"
+               data={["GET", "POST", "PATCH", "PUT", "DEL"]}
+               name="trigger.config.method"
+               control={form.control}
+            />
+            <TextInput
+               className="w-full"
+               label="Mapping Path"
+               placeholder="/trigger_http"
+               classNames={{ wrapper: "font-mono pt-px" }}
+               {...form.register("trigger.config.path")}
+            />
+         </div>
+         <div className="flex flex-row gap-2 items-center">
+            <MantineSegmentedControl
+               className="w-full"
+               label="Response Type"
+               defaultValue="json"
+               data={[
+                  { label: "JSON", value: "json" },
+                  { label: "HTML", value: "html" },
+                  { label: "Text", value: "text" }
+               ]}
+               name="trigger.config.response_type"
+               control={form.control}
+            />
+         </div>
+      </>
+   );
+};
+
+const TriggerNodeTabs = ({ data, ...props }) => [
+   {
+      id: "json",
+      label: "JSON",
+      content: () => <JsonViewer json={data} expand={2} className="" />
+   },
+   {
+      id: "test",
+      label: "test",
+      content: () => <div>test</div>
+   }
+];