Feat/environment variables in workflow (#6515)

Co-authored-by: JzoNg <jzongcode@gmail.com>

web/app/components/workflow/nodes/http/components/api-input.tsx

@@ -42,7 +42,7 @@ const ApiInput: FC<Props> = ({
   const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
     onlyLeafNodeVar: false,
     filterVar: (varPayload: Var) => {
-      return [VarType.string, VarType.number].includes(varPayload.type)
+      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
     },
   })
 

web/app/components/workflow/nodes/http/components/authorization/index.tsx

@@ -1,17 +1,23 @@
 'use client'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import produce from 'immer'
 import type { Authorization as AuthorizationPayloadType } from '../../types'
 import { APIType, AuthorizationType } from '../../types'
 import RadioGroup from './radio-group'
+import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
+import { VarType } from '@/app/components/workflow/types'
+import type { Var } from '@/app/components/workflow/types'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
+import cn from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.http.authorization'
 
 type Props = {
+  nodeId: string
   payload: AuthorizationPayloadType
   onChange: (payload: AuthorizationPayloadType) => void
   isShow: boolean
@@ -31,6 +37,7 @@ const Field = ({ title, isRequired, children }: { title: string; isRequired?: bo
 }
 
 const Authorization: FC<Props> = ({
+  nodeId,
   payload,
   onChange,
   isShow,
@@ -38,6 +45,14 @@ const Authorization: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
 
+  const [isFocus, setIsFocus] = useState(false)
+  const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
+    onlyLeafNodeVar: false,
+    filterVar: (varPayload: Var) => {
+      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
+    },
+  })
+
   const [tempPayload, setTempPayload] = React.useState<AuthorizationPayloadType>(payload)
   const handleAuthTypeChange = useCallback((type: string) => {
     const newPayload = produce(tempPayload, (draft: AuthorizationPayloadType) => {
@@ -80,6 +95,19 @@ const Authorization: FC<Props> = ({
     }
   }, [tempPayload, setTempPayload])
 
+  const handleAPIKeyChange = useCallback((str: string) => {
+    const newPayload = produce(tempPayload, (draft: AuthorizationPayloadType) => {
+      if (!draft.config) {
+        draft.config = {
+          type: APIType.basic,
+          api_key: '',
+        }
+      }
+      draft.config.api_key = str
+    })
+    setTempPayload(newPayload)
+  }, [tempPayload, setTempPayload])
+
   const handleConfirm = useCallback(() => {
     onChange(tempPayload)
     onHide()
@@ -128,12 +156,19 @@ const Authorization: FC<Props> = ({
               )}
 
               <Field title={t(`${i18nPrefix}.api-key-title`)} isRequired>
-                <input
-                  type='text'
-                  className='w-full h-8 leading-8 px-2.5  rounded-lg border-0 bg-gray-100  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
-                  value={tempPayload.config?.api_key || ''}
-                  onChange={handleAPIKeyOrHeaderChange('api_key')}
-                />
+                <div className='flex'>
+                  <Input
+                    instanceId='http-api-key'
+                    className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'w-0 grow rounded-lg px-3 py-[6px] border')}
+                    value={tempPayload.config?.api_key || ''}
+                    onChange={handleAPIKeyChange}
+                    nodesOutputVars={availableVars}
+                    availableNodes={availableNodesWithParent}
+                    onFocusChange={setIsFocus}
+                    placeholder={' '}
+                    placeholderClassName='!leading-[21px]'
+                  />
+                </div>
               </Field>
             </>
           )}

web/app/components/workflow/nodes/http/components/edit-body/index.tsx

@@ -44,7 +44,7 @@ const EditBody: FC<Props> = ({
   const { availableVars, availableNodes } = useAvailableVarList(nodeId, {
     onlyLeafNodeVar: false,
     filterVar: (varPayload: Var) => {
-      return [VarType.string, VarType.number].includes(varPayload.type)
+      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
     },
   })
 

web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx

@@ -39,7 +39,7 @@ const InputItem: FC<Props> = ({
   const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
     onlyLeafNodeVar: false,
     filterVar: (varPayload: Var) => {
-      return [VarType.string, VarType.number].includes(varPayload.type)
+      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
     },
   })
 

web/app/components/workflow/nodes/http/panel.tsx

@@ -125,6 +125,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
       </div>
       {(isShowAuthorization && !readOnly) && (
         <AuthorizationModal
+          nodeId={id}
           isShow
           onHide={hideAuthorization}
           payload={inputs.authorization}

web/app/components/workflow/nodes/http/use-config.ts

@@ -103,7 +103,7 @@ const useConfig = (id: string, payload: HttpNodeType) => {
   }, [inputs, setInputs])
 
   const filterVar = useCallback((varPayload: Var) => {
-    return [VarType.string, VarType.number].includes(varPayload.type)
+    return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
   }, [])
 
   // single run