From 1ac96564a0dc1be11a39365bd59c8504e4d694a0 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 26 Mar 2024 16:35:53 +0800
Subject: [PATCH] feat: http node hightlight node

---
 .../configuration/base/var-highlight/index.tsx    |  8 +++++---
 .../_base/components/support-var-input/index.tsx  | 15 ++++++++-------
 web/app/components/workflow/nodes/http/node.tsx   |  8 +++++++-
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/web/app/components/app/configuration/base/var-highlight/index.tsx b/web/app/components/app/configuration/base/var-highlight/index.tsx
index 64c907d664..3dd6c14902 100644
--- a/web/app/components/app/configuration/base/var-highlight/index.tsx
+++ b/web/app/components/app/configuration/base/var-highlight/index.tsx
@@ -6,15 +6,17 @@ import s from './style.module.css'
 
 export type IVarHighlightProps = {
   name: string
+  className?: string
 }
 
 const VarHighlight: FC<IVarHighlightProps> = ({
   name,
+  className = '',
 }) => {
   return (
     <div
       key={name}
-      className={`${s.item} flex mb-2 items-center justify-center rounded-md px-1 h-5 text-xs font-medium text-primary-600`}
+      className={`${s.item} ${className} flex mb-2 items-center justify-center rounded-md px-1 h-5 text-xs font-medium text-primary-600`}
     >
       <span className='opacity-60'>{'{{'}</span>
       <span>{name}</span>
@@ -23,8 +25,8 @@ const VarHighlight: FC<IVarHighlightProps> = ({
   )
 }
 
-export const varHighlightHTML = ({ name }: IVarHighlightProps) => {
-  const html = `<div class="${s.item} inline-flex mb-2 items-center justify-center px-1 rounded-md h-5 text-xs font-medium text-primary-600">
+export const varHighlightHTML = ({ name, className = '' }: IVarHighlightProps) => {
+  const html = `<div class="${s.item} ${className} inline-flex mb-2 items-center justify-center px-1 rounded-md h-5 text-xs font-medium text-primary-600">
   <span class='opacity-60'>{{</span>
   <span>${name}</span>
   <span class='opacity-60'>}}</span>
diff --git a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
index aadcf02de6..921ad57172 100644
--- a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
@@ -4,10 +4,10 @@ import React from 'react'
 import cn from 'classnames'
 import { varHighlightHTML } from '@/app/components/app/configuration/base/var-highlight'
 type Props = {
-  isFocus: boolean
-  onFocus: () => void
+  isFocus?: boolean
+  onFocus?: () => void
   value: string
-  children: React.ReactNode
+  children?: React.ReactNode
   wrapClassName?: string
   textClassName?: string
   readonly?: boolean
@@ -25,22 +25,23 @@ const SupportVarInput: FC<Props> = ({
   const withHightContent = (value || '')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
-    .replace(/\{\{([^}]+)\}\}/g, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
+    .replace(/\{\{([^}]+)\}\}/g, varHighlightHTML({ name: '$1', className: '!mb-0' })) // `<span class="${highLightClassName}">{{$1}}</span>`
     .replace(/\n/g, '<br />')
 
   return (
     <div
       className={
-        cn(wrapClassName, 'w-full h-full')
+        cn(wrapClassName, 'flex w-full h-full')
       } onClick={onFocus}
     >
-      {(isFocus && !readonly)
+      {(isFocus && !readonly && children)
         ? (
           children
         )
         : (
           <div
-            className={cn(textClassName, 'w-full h-full')}
+            className={cn(textClassName, 'w-0 grow h-full whitespace-nowrap truncate')}
+            title={value}
             dangerouslySetInnerHTML={{
               __html: withHightContent,
             }}></div>
diff --git a/web/app/components/workflow/nodes/http/node.tsx b/web/app/components/workflow/nodes/http/node.tsx
index 8ed5877207..161bf97f8f 100644
--- a/web/app/components/workflow/nodes/http/node.tsx
+++ b/web/app/components/workflow/nodes/http/node.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import React from 'react'
 import type { HttpNodeType } from './types'
 import type { NodeProps } from '@/app/components/workflow/types'
+import SupportVarInput from '@/app/components/workflow/nodes/_base/components/support-var-input'
 
 const Node: FC<NodeProps<HttpNodeType>> = ({
   data,
@@ -11,7 +12,12 @@ const Node: FC<NodeProps<HttpNodeType>> = ({
     <div className='mb-1 px-3 py-1'>
       <div className='flex items-center p-1 rounded-md bg-gray-100'>
         <div className='shrink-0 px-1 h-7 leading-7 rounded bg-gray-25 text-xs font-semibold text-gray-700 uppercase'>{method}</div>
-        <div className='ml-1 w-0 grow truncate text-xs font-normal text-gray-700'>{url}</div>
+        <SupportVarInput
+          wrapClassName='w-0 grow truncate flex items-center'
+          textClassName='ml-1 text-xs font-normal text-gray-700'
+          value={url}
+          readonly
+        />
       </div>
     </div>
   )