From ebda9779813815cda0a94eded15cc67aeea88768 Mon Sep 17 00:00:00 2001
From: heheer <heheer@sealos.io>
Date: Sat, 12 Oct 2024 15:39:26 +0800
Subject: [PATCH] feat: http node url support variables (#2891)

* feat: http node url support variables

* change to prompt editor
---
 .../Flow/nodes/NodeHttp/index.tsx             | 54 +++++++++++++------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeHttp/index.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeHttp/index.tsx
index 2c50d3c3e462..1f8dd32c8285 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeHttp/index.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeHttp/index.tsx
@@ -81,6 +81,9 @@ const RenderHttpMethodAndUrl = React.memo(function RenderHttpMethodAndUrl({
   const { t } = useTranslation();
   const { toast } = useToast();
   const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
+  const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
+  const edges = useContextSelector(WorkflowContext, (v) => v.edges);
+  const { appDetail } = useContextSelector(AppContext, (v) => v);
 
   const { isOpen: isOpenCurl, onOpen: onOpenCurl, onClose: onCloseCurl } = useDisclosure();
 
@@ -91,19 +94,18 @@ const RenderHttpMethodAndUrl = React.memo(function RenderHttpMethodAndUrl({
     (item) => item.key === NodeInputKeyEnum.httpReqUrl
   ) as FlowNodeInputItemType;
 
-  const onChangeUrl = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onChangeUrl = (value: string) => {
     onChangeNode({
       nodeId,
       type: 'updateInput',
       key: NodeInputKeyEnum.httpReqUrl,
       value: {
         ...requestUrl,
-        value: e.target.value
+        value
       }
     });
   };
-  const onBlurUrl = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
+  const onBlurUrl = (val: string) => {
     // 拆分params和url
     const url = val.split('?')[0];
     const params = val.split('?')[1];
@@ -154,6 +156,16 @@ const RenderHttpMethodAndUrl = React.memo(function RenderHttpMethodAndUrl({
     }
   };
 
+  const variables = useCreation(() => {
+    return getEditorVariables({
+      nodeId,
+      nodeList,
+      edges,
+      appDetail,
+      t
+    });
+  }, [nodeId, nodeList, edges, appDetail, t]);
+
   return (
     <Box>
       <Box mb={2} display={'flex'} justifyContent={'space-between'}>
@@ -166,7 +178,7 @@ const RenderHttpMethodAndUrl = React.memo(function RenderHttpMethodAndUrl({
       </Box>
       <Flex alignItems={'center'} className="nodrag">
         <MySelect
-          h={'34px'}
+          h={'40px'}
           w={'88px'}
           bg={'white'}
           width={'100%'}
@@ -205,17 +217,29 @@ const RenderHttpMethodAndUrl = React.memo(function RenderHttpMethodAndUrl({
             });
           }}
         />
-        <Input
-          flex={'1 0 0'}
-          ml={2}
-          h={'34px'}
+        <Box
+          w={'full'}
+          border={'1px solid'}
+          borderColor={'myGray.200'}
+          rounded={'md'}
           bg={'white'}
-          value={requestUrl?.value || ''}
-          placeholder={t('common:core.module.input.label.Http Request Url')}
-          fontSize={'xs'}
-          onChange={onChangeUrl}
-          onBlur={onBlurUrl}
-        />
+          ml={2}
+        >
+          <PromptEditor
+            placeholder={
+              t('common:core.module.input.label.Http Request Url') +
+              ', ' +
+              t('common:textarea_variable_picker_tip')
+            }
+            value={requestUrl?.value || ''}
+            variableLabels={variables}
+            variables={variables}
+            onBlur={onBlurUrl}
+            onChange={onChangeUrl}
+            minH={40}
+            showOpenModal={false}
+          />
+        </Box>
       </Flex>
 
       {isOpenCurl && <CurlImportModal nodeId={nodeId} inputs={inputs} onClose={onCloseCurl} />}