feat(carp-module-cep): update ConditionExecutor and CodeExecutor

Author: wangqi

carp-ui/package.json

@@ -84,6 +84,7 @@
     "query-string": "^9.1.1",
     "rc-util": "^5.38.1",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-fittext": "^1.0.0",
     "react-resizable-panels": "^2.1.7",

carp-ui/src/pages/Workspace/Cep/Workflow/Detail/container/workflow-page-container-module.ts

@@ -4,6 +4,7 @@
  */
 
 import { forwardRef, useEffect, useRef } from 'react';
+import { PageContainer } from '@ant-design/pro-components';
 import { history, useIntl, useLocation } from '@umijs/max';
 import { EditorRenderer, FreeLayoutEditorProvider } from '@flowgram.ai/free-layout-editor';
 import { DockedPanelLayer } from '@flowgram.ai/panel-manager-plugin';
@@ -12,11 +13,11 @@ import '@flowgram.ai/free-layout-editor/index.css';
 import './styles/index.css';
 import { nodeRegistries } from './nodes';
 import { useEditorProps } from './hooks';
-import { WorkflowPageContainerModule } from './container/workflow-page-container-module';
+import { WorkflowPageContainerModule } from '../container/workflow-page-container-module';
 import { WorkflowLoader } from '../render/workflow-loader';
-import { PageContainer } from '@ant-design/pro-components';
 import { WorkspaceCepAPI } from '@/services/workspace/cep/typings';
 
+
 const Editor = () => {
   const intl = useIntl()
   const urlParams = useLocation();

carp-ui/src/pages/Workspace/Cep/Workflow/Detail/container/workflow-page-contribution.ts

@@ -4,10 +4,13 @@
  */
 
 import { Field } from '@flowgram.ai/free-layout-editor';
-import { TypeScriptCodeEditor } from '@flowgram.ai/form-materials';
+import { IJsonSchema, JsonSchemaEditor, TypeScriptCodeEditor } from '@flowgram.ai/form-materials';
 import { Divider } from '@douyinfe/semi-ui';
 
 import { useIsSidebar, useNodeRenderContext } from '../../../hooks';
+import { FormItem } from '../../../form-components';
+import { CodeEditor } from '../mateterials/code-editor';
+import { CodeValue, DEFAULT_CODE_VALUE } from '../mateterials/code-editor/types';
 
 export function Code() {
   const isSidebar = useIsSidebar();
@@ -20,15 +23,14 @@ export function Code() {
   return (
     <>
       <Divider />
-      <Field<string> name="script.content">
-        {({ field }) => (
-          <TypeScriptCodeEditor
-            value={field.value}
-            onChange={(value) => field.onChange(value)}
-            readonly={readonly}
-          />
-        )}
-      </Field>
+      <Field<CodeValue> name="script" defaultValue={DEFAULT_CODE_VALUE} >
+          {({ field, fieldState }) => (
+            <CodeEditor
+              codeValue={field.value}
+              onChange={(value) => field.onChange(value)}
+              readonly={readonly} />
+          )}
+        </Field>
     </>
   );
 }

carp-ui/src/pages/Workspace/Cep/Workflow/Detail/index.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { FormMeta, FormRenderProps } from '@flowgram.ai/free-layout-editor';
+import { FormMeta, FormRenderProps, I18n } from '@flowgram.ai/free-layout-editor';
 import { createInferInputsPlugin } from '@flowgram.ai/form-materials';
 
 import { FormHeader, FormContent } from '../../form-components';
@@ -12,11 +12,13 @@ import { Outputs } from './components/outputs';
 import { Inputs } from './components/inputs';
 import { Code } from './components/code';
 import { defaultFormMeta } from '../default-form-meta';
+import { InputNumberField, Section } from '../../../form';
 
 export const FormRender = ({ form }: FormRenderProps<CodeNodeJSON>) => (
   <>
     <FormHeader />
     <FormContent>
+     
       <Inputs />
       <Code />
       <Outputs />

carp-ui/src/pages/Workspace/Cep/Workflow/Detail/nodes/code/components/code.tsx

@@ -24,4 +24,5 @@ export enum WorkflowNodeType {
   Continue = 'continue',
   Break = 'break',
   Rule = 'rule',
+  Demo = 'demo',
 }

carp-ui/src/pages/Workspace/Cep/Workflow/Detail/nodes/code/form-meta.tsx

@@ -25,6 +25,7 @@ import { BlockStartNodeRegistry } from './block-start';
 import { BlockEndNodeRegistry } from './block-end';
 import { MultiConditionNodeRegistry } from "./multi-condition";
 import { RuleNodeRegistry } from "./rule";
+import { DemoNodeRegistry } from './demo';
 export { WorkflowNodeType } from './constants';
 
 export const nodeRegistries: FlowNodeRegistry[] = [
@@ -44,4 +45,5 @@ export const nodeRegistries: FlowNodeRegistry[] = [
   GroupNodeRegistry,
   MultiConditionNodeRegistry,
   RuleNodeRegistry,
+  DemoNodeRegistry,
 ];

carp-ui/src/pages/Workspace/Cep/Workflow/Detail/nodes/constants.ts

@@ -63,6 +63,11 @@ insert into `carp_cep_workflow` (`id`, `namespace`, `name`, `uuid`, `type`, `bod
 values (5, 'default', 'demo-code', 'c577cae5ade4443dab753afa13909c1f', 'user',
         '{"nodes":[{"id":"100001","type":"start","meta":{"position":{"x":0,"y":0}},"data":{"title":"Start","outputs":{"type":"object","properties":{"petId":{"type":"string","extra":{"index":1},"default":"20"}},"required":["petId"]}}},{"id":"900001","type":"end","meta":{"position":{"x":1760,"y":36}},"data":{"title":"End"}},{"id":"http_k3e6O","type":"http","meta":{"position":{"x":435,"y":-177.4}},"data":{"title":"HTTP_1","api":{"method":"GET","url":{"type":"template","content":"https://petstore.swagger.io/v2/pet/{{100001.petId}}"}},"body":{"bodyType":"none"},"headersValues":{},"paramsValues":{},"outputs":{"type":"object","properties":{"body":{"type":"string"},"headers":{"type":"object"},"statusCode":{"type":"integer"}}},"timeout":{"timeout":10000,"retryTimes":1},"headers":{"type":"object","properties":{}},"params":{"type":"object","properties":{}}}},{"id":"condition_R5KCg","type":"condition","meta":{"position":{"x":871,"y":-55}},"data":{"title":"Condition","conditions":[{"value":{"left":{"type":"ref","content":["http_k3e6O","statusCode"]},"operator":"eq","right":{"type":"constant","content":200,"schema":{"type":"number"}}},"key":"if_mVrfL"}]}},{"id":"code_mEXyi","type":"code","meta":{"position":{"x":1337,"y":-187}},"data":{"title":"Code_1","inputsValues":{"input":{"type":"ref","content":["100001","petId"],"extra":{"index":0}}},"script":{"language":"javascript","content":"// Here, you can retrieve input variables from the node using ''params'' and output results using ''ret''.\\n// ''params'' has been correctly injected into the environment.\\n// Here''s an example of getting the value of the parameter named ''input'' from the node input:\\n// const input = params.input;\\n// Here''s an example of outputting a ''ret'' object containing multiple data types:\\n// const ret = { \\"name\\": ''Xiaoming'', \\"hobbies\\": [\\"Reading\\", \\"Traveling\\"] };\\n\\nasync function main({ params }) {\\n  // Build the output object\\n  const ret = {\\n    key0: params.input + params.input, // Concatenate the input parameter ''input'' twice\\n    key1: [\\"hello\\", \\"world\\"], // Output an array\\n    key2: { // Output an Object\\n      key21: \\"hi\\"\\n    },\\n  };\\n\\n  return ret;\\n}"},"outputs":{"type":"object","properties":{"key0":{"type":"string"},"key1":{"type":"array","items":{"type":"string"}},"key2":{"type":"object","properties":{"key21":{"type":"string"}}}}},"inputs":{"type":"object","properties":{"input":{"type":"string"}}}}}],"edges":[{"sourceNodeID":"100001","targetNodeID":"http_k3e6O"},{"sourceNodeID":"code_mEXyi","targetNodeID":"900001"},{"sourceNodeID":"condition_R5KCg","targetNodeID":"900001","sourcePortID":"else"},{"sourceNodeID":"http_k3e6O","targetNodeID":"condition_R5KCg"},{"sourceNodeID":"condition_R5KCg","targetNodeID":"code_mEXyi","sourcePortID":"if_mVrfL"}]}',
         null, 'sys', 'sys');
+insert into `carp_cep_workflow` (`id`, `namespace`, `name`, `uuid`, `type`, `body`, `remark`, `creator`, `editor`)
+VALUES (6, 'defafult', 'demo-rule', 'a4d26bee27d44c109ee88dcf849b402a', 'user',
+        '{"nodes":[{"id":"100001","type":"start","meta":{"position":{"x":0,"y":0}},"data":{"title":"Start","outputs":{"type":"object","properties":{"petId":{"type":"integer","extra":{"index":1},"default":20},"result":{"type":"boolean","extra":{"index":2}},"action":{"type":"string","extra":{"index":3}}},"required":["petId"]}}},{"id":"900001","type":"end","meta":{"position":{"x":2973.4347640664196,"y":14.586512095692083}},"data":{"title":"End","inputsValues":{"result":{"type":"ref","content":["100001","result"],"extra":{"index":0}},"action":{"type":"ref","content":["100001","action"],"extra":{"index":1}}},"inputs":{"type":"object","properties":{"result":{"type":"boolean"},"action":{"type":"string"}}}}},{"id":"http_LOzxg","type":"http","meta":{"position":{"x":425.3821656050955,"y":-177.4}},"data":{"title":"HTTP_1","api":{"method":"GET","url":{"type":"template","content":"https://petstore.swagger.io/v2/pet/{{100001.petId}}"}},"body":{"bodyType":"none"},"headersValues":{},"paramsValues":{},"outputs":{"type":"object","properties":{"body":{"type":"string"},"headers":{"type":"object"},"statusCode":{"type":"integer"}}},"timeout":{"timeout":10000,"retryTimes":1},"headers":{"type":"object","properties":{}},"params":{"type":"object","properties":{}}}},{"id":"code_54HI-","type":"code","meta":{"position":{"x":851.608280254777,"y":-17.5}},"data":{"title":"Code_1","inputsValues":{"statusCode":{"type":"ref","content":["http_LOzxg","statusCode"],"extra":{"index":0}}},"script":{"language":"javascript","content":"// Here, you can retrieve input variables from the node using ''params'' and output results using ''ret''.\\n// ''params'' has been correctly injected into the environment.\\n// Here''s an example of getting the value of the parameter named ''input'' from the node input:\\n// const input = params.input;\\n// Here''s an example of outputting a ''ret'' object containing multiple data types:\\n// const ret = { \\"name\\": ''Xiaoming'', \\"hobbies\\": [\\"Reading\\", \\"Traveling\\"] };\\n\\nasync function main({ params }) {\\n  // Build the output object\\n  const ret = {\\n    success: params.statusCode == 200 ? true : false\\n  };\\n\\n  return ret;\\n}"},"outputs":{"type":"object","properties":{"success":{"type":"boolean"}},"required":[]},"inputs":{"type":"object","properties":{"statusCode":{"type":"integer"}}}}},{"id":"multi_condition_cXAcu","type":"multi-condition","meta":{"position":{"x":1287.7259047158634,"y":-192}},"data":{"title":"multi_condition_1","branch":[{"logic":"and","conditions":[{"value":{"left":{"type":"ref","content":["code_54HI-","success"]},"operator":"eq","right":{"type":"constant","content":true,"schema":{"type":"boolean"}}},"key":"condition_cupTz4"},{"value":{"left":{"type":"ref","content":["http_LOzxg","body"]},"operator":"is_not_empty"},"key":"condition_mecHXU"}]},{"logic":"and","conditions":[{"value":{"left":{"type":"ref","content":["code_54HI-","success"]},"operator":"eq","right":{"type":"constant","content":true,"schema":{"type":"boolean"}}},"key":"condition_6b-h-s"},{"value":{"left":{"type":"ref","content":["http_LOzxg","body"]},"operator":"is_empty"},"key":"condition_0oQaMC"}]}]}},{"id":"variable_yIwsy","type":"variable","meta":{"position":{"x":1724.5548427753126,"y":-100.06698394780085}},"data":{"title":"Variable_1","assign":[{"operator":"assign","left":{"type":"ref","content":["100001","result"]},"right":{"type":"constant","content":true,"schema":{"type":"boolean"}}}],"outputs":{"type":"object","required":[],"properties":{}}}},{"id":"variable_mbnKV","type":"variable","meta":{"position":{"x":1724.5548427753126,"y":171.74469809539076}},"data":{"title":"Variable_5","assign":[{"operator":"assign","left":{"type":"ref","content":["100001","result"]},"right":{"type":"constant","content":true,"schema":{"type":"boolean"}}}],"outputs":{"type":"object","required":[],"properties":{}}}},{"id":"code_cM-td","type":"code","meta":{"position":{"x":1724.5548427753126,"y":50.8312101910828}},"data":{"title":"Code_2","inputsValues":{"input":{"type":"constant","content":""}},"script":{"language":"javascript","content":"// Here, you can retrieve input variables from the node using ''params'' and output results using ''ret''.\\n// ''params'' has been correctly injected into the environment.\\n// Here''s an example of getting the value of the parameter named ''input'' from the node input:\\n// const input = params.input;\\n// Here''s an example of outputting a ''ret'' object containing multiple data types:\\n// const ret = { \\"name\\": ''Xiaoming'', \\"hobbies\\": [\\"Reading\\", \\"Traveling\\"] };\\n\\nasync function main({ params }) {\\n  // Build the output object\\n  const ret = {\\n    key0: params.input + params.input, // Concatenate the input parameter ''input'' twice\\n    key1: [\\"hello\\", \\"world\\"], // Output an array\\n    key2: { // Output an Object\\n      key21: \\"hi\\"\\n    },\\n  };\\n\\n  return ret;\\n}"},"outputs":{"type":"object","properties":{"key0":{"type":"string"},"key1":{"type":"array","items":{"type":"string"}},"key2":{"type":"object","properties":{"key21":{"type":"string"}}}}},"inputs":{"type":"object","properties":{"input":{"type":"string"}}}}},{"id":"variable_QefOy","type":"variable","meta":{"position":{"x":2143.398735306147,"y":68.3312101910828}},"data":{"title":"Variable_6","assign":[{"operator":"declare","left":"sum","right":{"type":"constant","content":0,"schema":{"type":"integer"}}}],"outputs":{"type":"object","required":[],"properties":{"sum":{"type":"integer"}}}}}],"edges":[{"sourceNodeID":"100001","targetNodeID":"http_LOzxg"},{"sourceNodeID":"variable_yIwsy","targetNodeID":"900001"},{"sourceNodeID":"variable_QefOy","targetNodeID":"900001"},{"sourceNodeID":"variable_mbnKV","targetNodeID":"900001"},{"sourceNodeID":"http_LOzxg","targetNodeID":"code_54HI-"},{"sourceNodeID":"code_54HI-","targetNodeID":"multi_condition_cXAcu"},{"sourceNodeID":"multi_condition_cXAcu","targetNodeID":"variable_yIwsy","sourcePortID":"branch.0"},{"sourceNodeID":"multi_condition_cXAcu","targetNodeID":"variable_mbnKV","sourcePortID":"else"},{"sourceNodeID":"multi_condition_cXAcu","targetNodeID":"code_cM-td","sourcePortID":"branch.1"},{"sourceNodeID":"code_cM-td","targetNodeID":"variable_QefOy"}]}',
+        NULL, 'sys', 'sys');
+
 
 
 drop table if exists carp_cep_function;