From e462ddb805a5839bd2585b53523ae00757728b85 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 20 Mar 2024 16:17:04 +0800
Subject: [PATCH] feat: http support readonly

---
 .../_base/components/editor/text-editor.tsx   |  3 +++
 .../nodes/http/components/api-input.tsx       |  8 ++++----
 .../nodes/http/components/edit-body/index.tsx |  2 ++
 .../key-value/key-value-edit/index.tsx        | 19 ++++++++++---------
 .../key-value/key-value-edit/input-item.tsx   |  5 ++++-
 .../key-value/key-value-edit/item.tsx         |  2 ++
 .../components/workflow/nodes/http/panel.tsx  | 13 ++++++-------
 7 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx b/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
index 26eefedfb3..5be80b1ffc 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
@@ -12,6 +12,7 @@ type Props = {
   minHeight?: number
   onBlur?: () => void
   placeholder?: string
+  readonly?: boolean
 }
 
 const TextEditor: FC<Props> = ({
@@ -22,6 +23,7 @@ const TextEditor: FC<Props> = ({
   minHeight,
   onBlur,
   placeholder,
+  readonly,
 }) => {
   const [isFocus, {
     setTrue: setIsFocus,
@@ -49,6 +51,7 @@ const TextEditor: FC<Props> = ({
           onBlur={handleBlur}
           className='w-full h-full px-3 resize-none bg-transparent border-none focus:outline-none leading-[18px] text-[13px] font-normal text-gray-900 placeholder:text-gray-300'
           placeholder={placeholder}
+          readOnly={readonly}
         />
       </Base>
     </div>
diff --git a/web/app/components/workflow/nodes/http/components/api-input.tsx b/web/app/components/workflow/nodes/http/components/api-input.tsx
index 068c2bc7ea..ab04226373 100644
--- a/web/app/components/workflow/nodes/http/components/api-input.tsx
+++ b/web/app/components/workflow/nodes/http/components/api-input.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
+import cn from 'classnames'
 import { Method } from '../types'
 import Selector from '../../_base/components/selector'
 import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
-
 const MethodOptions = [
   { label: 'GET', value: Method.get },
   { label: 'POST', value: Method.post },
@@ -38,9 +38,9 @@ const ApiInput: FC<Props> = ({
         onChange={onMethodChange}
         options={MethodOptions}
         trigger={
-          <div className='h-8 shrink-0 flex items-center px-2.5 cursor-pointer border-r border-black/5'>
+          <div className={cn(readonly && 'cursor-pointer', 'h-8 shrink-0 flex items-center px-2.5 border-r border-black/5')} >
             <div className='w-12 pl-0.5 leading-[18px] text-xs font-medium text-gray-900 uppercase'>{method}</div>
-            <ChevronDown className='ml-1 w-3.5 h-3.5 text-gray-700' />
+            {!readonly && <ChevronDown className='ml-1 w-3.5 h-3.5 text-gray-700' />}
           </div>
         }
         popupClassName='top-[34px] w-[108px]'
@@ -54,7 +54,7 @@ const ApiInput: FC<Props> = ({
         onChange={handleUrlChange}
         className='w-0 grow h-6 leading-6 px-2.5 border-0  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none'
       />
-    </div>
+    </div >
   )
 }
 export default React.memo(ApiInput)
diff --git a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
index fafa153f50..c738d2ccc1 100644
--- a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
@@ -99,6 +99,7 @@ const EditBody: FC<Props> = ({
               value={t}
               checked={type === t}
               onChange={handleTypeChange}
+              disabled={readonly}
             />
             <div className='leading-[18px] text-[13px] font-normal text-gray-700'>{bodyTextMap[t]}</div>
           </label>
@@ -124,6 +125,7 @@ const EditBody: FC<Props> = ({
             onChange={handleBodyValueChange}
             value={payload.data}
             minHeight={150}
+            readonly={readonly}
           />
         )}
 
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
index 2f4c2dbc09..528579f3d2 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
@@ -51,16 +51,17 @@ const KeyValueList: FC<Props> = ({
         <div className='w-1/2 h-full pl-3 border-r border-gray-200'>{t(`${i18nPrefix}.key`)}</div>
         <div className='flex w-1/2 h-full pl-3 pr-1 items-center justify-between'>
           <div>{t(`${i18nPrefix}.value`)}</div>
-          <TooltipPlus
-            popupContent={t(`${i18nPrefix}.bulkEdit`)}
-          >
-            <div
-              className='p-1 cursor-pointer rounded-md hover:bg-black/5 text-gray-500 hover:text-gray-800'
-              onClick={onSwitchToBulkEdit}
+          {!readonly && (
+            <TooltipPlus
+              popupContent={t(`${i18nPrefix}.bulkEdit`)}
             >
-              <EditList className='w-3 h-3' />
-            </div>
-          </TooltipPlus>
+              <div
+                className='p-1 cursor-pointer rounded-md hover:bg-black/5 text-gray-500 hover:text-gray-800'
+                onClick={onSwitchToBulkEdit}
+              >
+                <EditList className='w-3 h-3' />
+              </div>
+            </TooltipPlus>)}
         </div>
       </div>
       {
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
index bb3d987a31..4e6f0f3faf 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
@@ -11,6 +11,7 @@ type Props = {
   hasRemove: boolean
   onRemove?: () => void
   placeholder?: string
+  readOnly?: boolean
 }
 
 const InputItem: FC<Props> = ({
@@ -20,6 +21,7 @@ const InputItem: FC<Props> = ({
   hasRemove,
   onRemove,
   placeholder,
+  readOnly,
 }) => {
   const hasValue = !!value
   const [isEdit, {
@@ -38,7 +40,7 @@ const InputItem: FC<Props> = ({
 
   return (
     <div className={cn(className, !isEdit && 'hover:bg-gray-50 hover:cursor-text', 'relative flex h-full items-center pl-2')}>
-      {isEdit
+      {(isEdit && !readOnly)
         ? (
           <input
             type='text'
@@ -48,6 +50,7 @@ const InputItem: FC<Props> = ({
             onBlur={setIsEditFalse}
             autoFocus
             placeholder={placeholder}
+            readOnly={readOnly}
           />
         )
         : <div
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
index c0988ee829..fb2e330cbb 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
@@ -53,6 +53,7 @@ const KeyValueItem: FC<Props> = ({
           onChange={handleChange('key')}
           hasRemove={false}
           placeholder={t(`${i18nPrefix}.key`)!}
+          readOnly={readonly}
         />
       </div>
       <div className='w-1/2  h-full'>
@@ -63,6 +64,7 @@ const KeyValueItem: FC<Props> = ({
           hasRemove={!readonly && canRemove}
           onRemove={onRemove}
           placeholder={t(`${i18nPrefix}.value`)!}
+          readOnly={readonly}
         />
       </div>
     </div>
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index d1e9a2ad28..f809f21bad 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
 import useConfig from './use-config'
 import ApiInput from './components/api-input'
 import KeyValue from './components/key-value'
@@ -24,9 +25,9 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
   data,
 }) => {
   const { t } = useTranslation()
-  const readOnly = false
 
   const {
+    readOnly,
     inputs,
     handleVarListChange,
     handleAddVariable,
@@ -60,15 +61,13 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
     runResult,
   } = useConfig(id, data)
 
-  // console.log(inputs)
-
   return (
     <div className='mt-2'>
       <div className='px-4 pb-4 space-y-4'>
         <Field
           title={t(`${i18nPrefix}.inputVars`)}
           operations={
-            <AddButton onClick={handleAddVariable} />
+            !readOnly ? <AddButton onClick={handleAddVariable} /> : undefined
           }
         >
           <VarList
@@ -84,9 +83,9 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
           operations={
             <div
               onClick={showAuthorization}
-              className='flex items-center h-6 space-x-1 cursor-pointer'
+              className={cn(!readOnly && 'cursor-pointer', 'flex items-center h-6 space-x-1')}
             >
-              <Settings01 className='w-3 h-3 text-gray-500' />
+              {!readOnly && <Settings01 className='w-3 h-3 text-gray-500' />}
               <div className='text-xs font-medium text-gray-500'>
                 {t(`${i18nPrefix}.authorization.authorization`)}
                 <span className='ml-1 text-gray-700'>{t(`${i18nPrefix}.authorization.${inputs.authorization.type}`)}</span>
@@ -136,7 +135,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
           />
         </Field>
       </div>
-      {isShowAuthorization && (
+      {(isShowAuthorization && !readOnly) && (
         <AuthorizationModal
           isShow
           onHide={hideAuthorization}