Feat: description field for env variables (#21556)

api/fields/workflow_fields.py

@@ -17,6 +17,7 @@ class EnvironmentVariableField(fields.Raw):
                 "name": value.name,
                 "value": encrypter.obfuscated_token(value.value),
                 "value_type": value.value_type.value,
+                "description": value.description,
             }
         if isinstance(value, Variable):
             return {
@@ -24,6 +25,7 @@ class EnvironmentVariableField(fields.Raw):
                 "name": value.name,
                 "value": value.value,
                 "value_type": value.value_type.value,
+                "description": value.description,
             }
         if isinstance(value, dict):
             value_type = value.get("value_type")

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,
+          description: env.description,
         }
       }) as Var[]
       break
@@ -472,7 +473,7 @@ const formatItem = (
         return {
           variable: `conversation.${chatVar.name}`,
           type: chatVar.value_type,
-          des: chatVar.description,
+          description: chatVar.description,
         }
       }) as Var[]
       break

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

@@ -80,7 +80,7 @@ const ChatVariableModal = ({
   const [objectValue, setObjectValue] = React.useState<ObjectValueItem[]>([DEFAULT_OBJECT_VALUE])
   const [editorContent, setEditorContent] = React.useState<string>()
   const [editInJSON, setEditInJSON] = React.useState(false)
-  const [des, setDes] = React.useState<string>('')
+  const [description, setDescription] = React.useState<string>('')
 
   const editorMinHeight = useMemo(() => {
     if (type === ChatVarType.ArrayObject)
@@ -237,7 +237,7 @@ const ChatVariableModal = ({
       name,
       value_type: type,
       value: formatValue(value),
-      description: des,
+      description,
     })
     onClose()
   }
@@ -247,7 +247,7 @@ const ChatVariableModal = ({
       setName(chatVar.name)
       setType(chatVar.value_type)
       setValue(chatVar.value)
-      setDes(chatVar.description)
+      setDescription(chatVar.description)
       setObjectValue(getObjectValue())
       if (chatVar.value_type === ChatVarType.ArrayObject) {
         setEditorContent(JSON.stringify(chatVar.value))
@@ -385,9 +385,9 @@ const ChatVariableModal = ({
           <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}
+              value={description}
               placeholder={t('workflow.chatVariable.modal.descriptionPlaceholder') || ''}
-              onChange={e => setDes(e.target.value)}
+              onChange={e => setDescription(e.target.value)}
             />
           </div>
         </div>

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

@@ -22,9 +22,10 @@ const EnvItem = ({
 
   return (
     <div className={cn(
-      'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+      'radius-md group mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
       destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
     )}>
+      <div className='px-2.5 py-2'>
         <div className='flex items-center justify-between'>
           <div className='flex grow items-center gap-1'>
             <Env className='h-4 w-4 text-util-colors-violet-violet-600' />
@@ -47,6 +48,17 @@ const EnvItem = ({
         </div>
         <div className='system-xs-regular truncate text-text-tertiary'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
       </div>
+      {env.description && (
+        <>
+          <div className={'h-[0.5px] bg-divider-subtle'} />
+          <div className={cn('rounded-bl-[8px] rounded-br-[8px] bg-background-default-subtle px-2.5 py-2 group-hover:bg-transparent',
+            destructive && 'bg-state-destructive-hover hover:bg-state-destructive-hover',
+          )}>
+            <div className='system-xs-regular truncate text-text-tertiary'>{env.description}</div>
+          </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 [description, setDescription] = React.useState<string>('')
 
   const checkVariableName = (value: string) => {
     const { isValid, errorMessageKey } = checkKeys([value], false)
@@ -67,6 +68,7 @@ const VariableModal = ({
       value_type: type,
       name,
       value: type === 'number' ? Number(value) : value,
+      description,
     })
     onClose()
   }
@@ -76,6 +78,7 @@ const VariableModal = ({
       setType(env.value_type)
       setName(env.name)
       setValue(env.value_type === 'secret' ? envSecrets[env.id] : env.value)
+      setDescription(env.description)
     }
   }, [env, envSecrets])
 
@@ -141,7 +144,7 @@ const VariableModal = ({
           </div>
         </div>
         {/* value */}
-        <div className=''>
+        <div className='mb-4'>
           <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.value')}</div>
           <div className='flex'>
             {
@@ -160,6 +163,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={description}
+              placeholder={t('workflow.env.modal.descriptionPlaceholder') || ''}
+              onChange={e => setDescription(e.target.value)}
+            />
+          </div>
+        </div>
       </div>
       <div className='flex flex-row-reverse rounded-b-2xl p-4 pt-2'>
         <div className='flex gap-2'>

web/app/components/workflow/types.ts

@@ -149,6 +149,7 @@ export type EnvironmentVariable = {
   name: string
   value: any
   value_type: 'string' | 'number' | 'secret'
+  description: string
 }
 
 export type ConversationVariable = {

web/i18n/de-DE/workflow.ts

@@ -129,6 +129,8 @@ const translation = {
       value: 'Wert',
       valuePlaceholder: 'Umgebungswert',
       secretTip: 'Wird verwendet, um sensible Informationen oder Daten zu definieren, wobei DSL-Einstellungen zur Verhinderung von Lecks konfiguriert sind.',
+      description: 'Beschreibung',
+      descriptionPlaceholder: 'Beschreiben Sie die Variable',
     },
     export: {
       title: 'Geheime Umgebungsvariablen exportieren?',

web/i18n/en-US/workflow.ts

@@ -127,6 +127,8 @@ const translation = {
       value: 'Value',
       valuePlaceholder: 'env value',
       secretTip: 'Used to define sensitive information or data, with DSL settings configured for leak prevention.',
+      description: 'Description',
+      descriptionPlaceholder: 'Describe the variable',
     },
     export: {
       title: 'Export Secret environment variables?',

web/i18n/es-ES/workflow.ts

@@ -129,6 +129,8 @@ const translation = {
       value: 'Valor',
       valuePlaceholder: 'valor de env',
       secretTip: 'Se utiliza para definir información o datos sensibles, con configuraciones DSL configuradas para prevenir fugas.',
+      description: 'Descripción',
+      descriptionPlaceholder: 'Describa la variable',
     },
     export: {
       title: '¿Exportar variables de entorno secretas?',

web/i18n/fa-IR/workflow.ts

@@ -129,6 +129,8 @@ const translation = {
       value: 'مقدار',
       valuePlaceholder: 'مقدار متغیر',
       secretTip: 'برای تعریف اطلاعات حساس یا داده‌ها، با تنظیمات DSL برای جلوگیری از نشت پیکربندی شده است.',
+      description: 'توضیحات',
+      descriptionPlaceholder: 'متغیر را توصیف کنید',
     },
     export: {
       title: 'آیا متغیرهای محیطی مخفی را صادر کنید؟',

web/i18n/fr-FR/workflow.ts

@@ -129,6 +129,8 @@ const translation = {
       value: 'valeur',
       valuePlaceholder: 'Valeur de l\'env',
       secretTip: 'Utilisé pour définir des informations ou des données sensibles, avec des paramètres DSL configurés pour la prévention des fuites.',
+      description: 'Description',
+      descriptionPlaceholder: 'Décrivez la variable',
     },
     export: {
       title: 'Exporter des variables d\'environnement secrètes?',

web/i18n/hi-IN/workflow.ts

@@ -132,6 +132,8 @@ const translation = {
       value: 'मान',
       valuePlaceholder: 'पर्यावरण मान',
       secretTip: 'संवेदनशील जानकारी या डेटा को परिभाषित करने के लिए उपयोग किया जाता है, DSL सेटिंग्स लीक रोकथाम के लिए कॉन्फ़िगर की गई हैं।',
+      description: 'विवरण',
+      descriptionPlaceholder: 'चर का वर्णन करें',
     },
     export: {
       title: 'गुप्त पर्यावरण चर निर्यात करें?',

web/i18n/it-IT/workflow.ts

@@ -133,6 +133,8 @@ const translation = {
       value: 'Valore',
       valuePlaceholder: 'valore env',
       secretTip: 'Utilizzato per definire informazioni o dati sensibili, con impostazioni DSL configurate per la prevenzione delle fughe.',
+      description: 'Descrizione',
+      descriptionPlaceholder: 'Descrivi la variabile',
     },
     export: {
       title: 'Esportare variabili d\'ambiente segrete?',

web/i18n/ja-JP/workflow.ts

@@ -127,6 +127,8 @@ const translation = {
       value: '値',
       valuePlaceholder: '変数値を入力',
       secretTip: 'この変数は機密情報やデータを定義するために使用されます。DSL をエクスポートするときに漏洩防止メカニズムを設定されます。',
+      description: '説明',
+      descriptionPlaceholder: '変数の説明を入力',
     },
     export: {
       title: 'シークレット環境変数をエクスポートしますか？',

web/i18n/ko-KR/workflow.ts

@@ -135,6 +135,8 @@ const translation = {
       valuePlaceholder: '환경 값',
       secretTip:
         '민감한 정보나 데이터를 정의하는 데 사용되며, DSL 설정은 유출 방지를 위해 구성됩니다.',
+      description: '설명',
+      descriptionPlaceholder: '변수에 대해 설명하세요',
     },
     export: {
       title: '비밀 환경 변수를 내보내시겠습니까?',

web/i18n/pl-PL/workflow.ts

@@ -129,6 +129,8 @@ const translation = {
       value: 'Wartość',
       valuePlaceholder: 'wartość środowiska',
       secretTip: 'Używane do definiowania wrażliwych informacji lub danych, z ustawieniami DSL skonfigurowanymi do zapobiegania wyciekom.',
+      description: 'Opis',
+      descriptionPlaceholder: 'Opisz zmienną',
     },
     export: {
       title: 'Eksportować tajne zmienne środowiskowe?',

web/i18n/pt-BR/workflow.ts

@@ -129,6 +129,8 @@ const translation = {
       value: 'Valor',
       valuePlaceholder: 'valor da env',
       secretTip: 'Usado para definir informações ou dados sensíveis, com configurações DSL configuradas para prevenção de vazamentos.',
+      description: 'Descrição',
+      descriptionPlaceholder: 'Descreva a variável',
     },
     export: {
       title: 'Exportar variáveis de ambiente secretas?',

web/i18n/ro-RO/workflow.ts

@@ -129,6 +129,8 @@ const translation = {
       value: 'Valoare',
       valuePlaceholder: 'valoare mediu',
       secretTip: 'Utilizat pentru a defini informații sau date sensibile, cu setări DSL configurate pentru prevenirea scurgerilor.',
+      description: 'Descriere',
+      descriptionPlaceholder: 'Descrieți variabila',
     },
     export: {
       title: 'Exportă variabile de mediu secrete?',

web/i18n/ru-RU/workflow.ts

@@ -129,6 +129,8 @@ const translation = {
       value: 'Значение',
       valuePlaceholder: 'Значение переменной среды',
       secretTip: 'Используется для определения конфиденциальной информации или данных, с настройками DSL, настроенными для предотвращения утечки.',
+      description: 'Описание',
+      descriptionPlaceholder: 'Опишите переменную',
     },
     export: {
       title: 'Экспортировать секретные переменные среды?',

web/i18n/sl-SI/workflow.ts

@@ -124,6 +124,8 @@ const translation = {
       type: 'Tip',
       editTitle: 'Uredi okoljsko spremenljivko',
       secretTip: 'Uporablja se za opredelitev občutljivih informacij ali podatkov, s konfiguriranimi nastavitvami DSL za preprečevanje puščanja.',
+      description: 'Opis',
+      descriptionPlaceholder: 'Opisujte spremenljivko',
     },
     export: {
       export: 'Izvozi DSL z skrivnimi vrednostmi',
@@ -143,6 +145,7 @@ const translation = {
       objectKey: 'Ključ',
       valuePlaceholder: 'Privzeta vrednost, pustite prazno, da je ne nastavite',
       description: 'Opis',
+      descriptionPlaceholder: 'Opisujte spremenljivko',
       type: 'Tip',
       value: 'Privzeta vrednost',
       name: 'Ime',
@@ -153,7 +156,6 @@ const translation = {
       objectType: 'Tip',
       oneByOne: 'Dodaj eno po eno',
       objectValue: 'Privzeta vrednost',
-      descriptionPlaceholder: 'Opisujte spremenljivko',
     },
     updatedAt: 'Posodobljeno ob',
     docLink: 'Obiščite našo dokumentacijo, da se naučite več.',

web/i18n/th-TH/workflow.ts

@@ -129,6 +129,8 @@ const translation = {
       value: 'ค่า',
       valuePlaceholder: 'ค่า env',
       secretTip: 'ใช้เพื่อกําหนดข้อมูลหรือข้อมูลที่ละเอียดอ่อน โดยมีการตั้งค่า DSL ที่กําหนดค่าไว้เพื่อป้องกันการรั่วไหล',
+      description: 'คำอธิบาย',
+      descriptionPlaceholder: 'อธิบายตัวแปร',
     },
     export: {
       title: 'ส่งออกตัวแปรสภาพแวดล้อม Secret หรือไม่',

web/i18n/tr-TR/workflow.ts

@@ -129,6 +129,8 @@ const translation = {
       value: 'Değer',
       valuePlaceholder: 'env değeri',
       secretTip: 'Hassas bilgileri veya verileri tanımlamak için kullanılır, bilgi sızıntısını önlemek için DSL ayarları yapılandırılmıştır.',
+      description: 'Açıklama',
+      descriptionPlaceholder: 'Değişkeni açıklayın',
     },
     export: {
       title: 'Gizli çevre değişkenleri dışa aktarılsın mı?',

web/i18n/uk-UA/workflow.ts

@@ -129,6 +129,8 @@ const translation = {
       value: 'Значення',
       valuePlaceholder: 'значення середовища',
       secretTip: 'Використовується для визначення конфіденційної інформації або даних, з налаштуваннями DSL, сконфігурованими для запобігання витоку.',
+      description: 'Опис',
+      descriptionPlaceholder: 'Опишіть змінну',
     },
     export: {
       title: 'Експортувати секретні змінні середовища?',

web/i18n/vi-VN/workflow.ts

@@ -129,6 +129,8 @@ const translation = {
       value: 'Giá trị',
       valuePlaceholder: 'giá trị môi trường',
       secretTip: 'Được sử dụng để xác định thông tin hoặc dữ liệu nhạy cảm, với cài đặt DSL được cấu hình để ngăn chặn rò rỉ.',
+      description: 'Mô tả',
+      descriptionPlaceholder: 'Mô tả biến',
     },
     export: {
       title: 'Xuất biến môi trường bí mật?',

web/i18n/zh-Hans/workflow.ts

@@ -127,6 +127,8 @@ const translation = {
       value: '值',
       valuePlaceholder: '变量值',
       secretTip: '用于定义敏感信息或数据，导出 DSL 时设置了防泄露机制。',
+      description: '描述',
+      descriptionPlaceholder: '变量的描述',
     },
     export: {
       title: '导出 Secret 类型环境变量？',

web/i18n/zh-Hant/workflow.ts

@@ -129,6 +129,8 @@ const translation = {
       value: '值',
       valuePlaceholder: '環境值',
       secretTip: '用於定義敏感信息或數據，DSL 設置配置為防止洩露。',
+      description: '描述',
+      descriptionPlaceholder: '描述此變數',
     },
     export: {
       title: '導出機密環境變數？',