feat(env-panel): add description field to environment variables

Add description field to environment variable modal and display it in the env item component. This allows users to provide additional context for each environment variable.

web/app/components/workflow/nodes/_base/components/variable/utils.ts

@@ -462,6 +462,7 @@ const formatItem = (
         return {
           variable: `env.${env.name}`,
           type: env.value_type,
+          des: env.description,
         }
       }) as Var[]
       break

web/app/components/workflow/panel/env-panel/env-item.tsx

@@ -3,6 +3,7 @@ import { capitalize } from 'lodash-es'
 import { RiDeleteBinLine, RiEditLine, RiLock2Line } from '@remixicon/react'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
+import { useTranslation } from 'react-i18next'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 
@@ -17,6 +18,7 @@ const EnvItem = ({
   onEdit,
   onDelete,
 }: EnvItemProps) => {
+  const { t } = useTranslation()
   const envSecrets = useStore(s => s.envSecrets)
   const [destructive, setDestructive] = useState(false)
 
@@ -45,6 +47,7 @@ const EnvItem = ({
           </div>
         </div>
       </div>
+      <div className='system-xs-regular truncate text-text-tertiary'>{env.description ? (`${t('workflow.env.modal.description')}: ${env.description}`) : ''}</div>
       <div className='system-xs-regular truncate text-text-tertiary'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
     </div>
   )

web/app/components/workflow/panel/env-panel/variable-modal.tsx

@@ -29,6 +29,7 @@ const VariableModal = ({
   const [type, setType] = React.useState<'string' | 'number' | 'secret'>('string')
   const [name, setName] = React.useState('')
   const [value, setValue] = React.useState<any>()
+  const [des, setDes] = React.useState<string>('')
 
   const checkVariableName = (value: string) => {
     const { isValid, errorMessageKey } = checkKeys([value], false)
@@ -60,6 +61,7 @@ const VariableModal = ({
       value_type: type,
       name,
       value: type === 'number' ? Number(value) : value,
+      description: des,
     })
     onClose()
   }
@@ -69,6 +71,7 @@ const VariableModal = ({
       setType(env.value_type)
       setName(env.name)
       setValue(env.value_type === 'secret' ? envSecrets[env.id] : env.value)
+      setDes(env.description)
     }
   }, [env, envSecrets])
 
@@ -153,6 +156,18 @@ const VariableModal = ({
             }
           </div>
         </div>
+        {/* description */}
+        <div className=''>
+          <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.description')}</div>
+          <div className='flex'>
+            <textarea
+              className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
+              value={des}
+              placeholder={t('workflow.env.modal.descriptionPlaceholder') || ''}
+              onChange={e => setDes(e.target.value)}
+            />
+          </div>
+        </div>
       </div>
       <div className='flex flex-row-reverse rounded-b-2xl p-4 pt-2'>
         <div className='flex gap-2'>