Merge remote-tracking branch 'myori/main' into feat/collaboration2

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

@@ -1,10 +1,10 @@
-import { memo, useState } from 'react'
-import { capitalize } from 'lodash-es'
+import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import { RiDeleteBinLine, RiEditLine, RiLock2Line } from '@remixicon/react'
+import { capitalize } from 'es-toolkit/string'
+import { memo, useState } from 'react'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
-import type { EnvironmentVariable } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type EnvItemProps = {
   env: EnvironmentVariable
@@ -24,37 +24,36 @@ const EnvItem = ({
     <div className={cn(
       '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' />
-            <div className='system-sm-medium text-text-primary'>{env.name}</div>
-            <div className='system-xs-medium text-text-tertiary'>{capitalize(env.value_type)}</div>
-            {env.value_type === 'secret' && <RiLock2Line className='h-3 w-3 text-text-tertiary' />}
+    )}
+    >
+      <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" />
+            <div className="system-sm-medium text-text-primary">{env.name}</div>
+            <div className="system-xs-medium text-text-tertiary">{capitalize(env.value_type)}</div>
+            {env.value_type === 'secret' && <RiLock2Line className="h-3 w-3 text-text-tertiary" />}
           </div>
-          <div className='flex shrink-0 items-center gap-1 text-text-tertiary'>
-            <div className='radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary'>
-              <RiEditLine className='h-4 w-4' onClick={() => onEdit(env)}/>
+          <div className="flex shrink-0 items-center gap-1 text-text-tertiary">
+            <div className="radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary">
+              <RiEditLine className="h-4 w-4" onClick={() => onEdit(env)} />
             </div>
             <div
-              className='radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive'
+              className="radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive"
               onMouseOver={() => setDestructive(true)}
               onMouseOut={() => setDestructive(false)}
             >
-              <RiDeleteBinLine className='h-4 w-4' onClick={() => onDelete(env)} />
+              <RiDeleteBinLine className="h-4 w-4" onClick={() => onDelete(env)} />
             </div>
           </div>
         </div>
-        <div className='system-xs-regular truncate text-text-tertiary'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</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 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>
         </>
       )}

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

@@ -1,23 +1,22 @@
+import type {
+  EnvironmentVariable,
+} from '@/app/components/workflow/types'
+import { RiCloseLine } from '@remixicon/react'
 import {
   memo,
   useCallback,
   useState,
 } from 'react'
-import { RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { useStore } from '@/app/components/workflow/store'
-import VariableTrigger from '@/app/components/workflow/panel/env-panel/variable-trigger'
-import EnvItem from '@/app/components/workflow/panel/env-panel/env-item'
-import type {
-  EnvironmentVariable,
-} from '@/app/components/workflow/types'
-import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
-import cn from '@/utils/classnames'
 import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
-import { useStore as useWorkflowStore } from '@/app/components/workflow/store'
-import { updateEnvironmentVariables } from '@/service/workflow'
 import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
+import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
+import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import EnvItem from '@/app/components/workflow/panel/env-panel/env-item'
+import VariableTrigger from '@/app/components/workflow/panel/env-panel/variable-trigger'
+import { useStore } from '@/app/components/workflow/store'
+import { updateEnvironmentVariables } from '@/service/workflow'
+import { cn } from '@/utils/classnames'
 
 const EnvPanel = () => {
   const { t } = useTranslation()
@@ -27,7 +26,7 @@ const EnvPanel = () => {
   const envSecrets = useStore(s => s.envSecrets)
   const updateEnvList = useStore(s => s.setEnvironmentVariables)
   const setEnvSecrets = useStore(s => s.setEnvSecrets)
-  const appId = useWorkflowStore(s => s.appId) as string
+  const appId = useStore(s => s.appId) as string
 
   const [showVariableModal, setShowVariableModal] = useState(false)
   const [currentVar, setCurrentVar] = useState<EnvironmentVariable>()
@@ -223,19 +222,19 @@ const EnvPanel = () => {
         'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
       )}
     >
-      <div className='system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
-        {t('workflow.env.envPanelTitle')}
-        <div className='flex items-center'>
+      <div className="system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary">
+        {t('env.envPanelTitle', { ns: 'workflow' })}
+        <div className="flex items-center">
           <div
-            className='flex h-6 w-6 cursor-pointer items-center justify-center'
+            className="flex h-6 w-6 cursor-pointer items-center justify-center"
             onClick={() => setShowEnvPanel(false)}
           >
-            <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
           </div>
         </div>
       </div>
-      <div className='system-sm-regular shrink-0 px-4 py-1 text-text-tertiary'>{t('workflow.env.envDescription')}</div>
-      <div className='shrink-0 px-4 pb-3 pt-2'>
+      <div className="system-sm-regular shrink-0 px-4 py-1 text-text-tertiary">{t('env.envDescription', { ns: 'workflow' })}</div>
+      <div className="shrink-0 px-4 pb-3 pt-2">
         <VariableTrigger
           open={showVariableModal}
           setOpen={setShowVariableModal}
@@ -244,7 +243,7 @@ const EnvPanel = () => {
           onClose={() => setCurrentVar(undefined)}
         />
       </div>
-      <div className='grow overflow-y-auto rounded-b-2xl px-4'>
+      <div className="grow overflow-y-auto rounded-b-2xl px-4">
         {envList.map(env => (
           <EnvItem
             key={env.id}

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

@@ -1,15 +1,16 @@
-import React, { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { v4 as uuid4 } from 'uuid'
+import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import { RiCloseLine } from '@remixicon/react'
+import * as React from 'react'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import { v4 as uuid4 } from 'uuid'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
-import Tooltip from '@/app/components/base/tooltip'
 import { ToastContext } from '@/app/components/base/toast'
+import Tooltip from '@/app/components/base/tooltip'
 import { useStore } from '@/app/components/workflow/store'
-import type { EnvironmentVariable } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
 
 export type ModalPropsType = {
@@ -36,7 +37,7 @@ const VariableModal = ({
     if (!isValid) {
       notify({
         type: 'error',
-        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: t('workflow.env.modal.name') }),
+        message: t(`varKeyError.${errorMessageKey}`, { ns: 'appDebug', key: t('env.modal.name', { ns: 'workflow' }) }),
       })
       return false
     }
@@ -86,100 +87,118 @@ const VariableModal = ({
     <div
       className={cn('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl')}
     >
-      <div className='system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
-        {!env ? t('workflow.env.modal.title') : t('workflow.env.modal.editTitle')}
-        <div className='flex items-center'>
+      <div className="system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary">
+        {!env ? t('env.modal.title', { ns: 'workflow' }) : t('env.modal.editTitle', { ns: 'workflow' })}
+        <div className="flex items-center">
           <div
-            className='flex h-6 w-6 cursor-pointer items-center justify-center'
+            className="flex h-6 w-6 cursor-pointer items-center justify-center"
             onClick={onClose}
           >
-            <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
           </div>
         </div>
       </div>
-      <div className='px-4 py-2'>
+      <div className="px-4 py-2">
         {/* type */}
-        <div className='mb-4'>
-          <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.type')}</div>
-          <div className='flex gap-2'>
-            <div className={cn(
-              'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-              type === 'string' && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
-            )} onClick={() => setType('string')}>String</div>
-            <div className={cn(
-              'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-              type === 'number' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
-            )} onClick={() => {
-              setType('number')
-              if (!(/^\d$/).test(value))
-                setValue('')
-            }}>Number</div>
-            <div className={cn(
-              'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-              type === 'secret' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
-            )} onClick={() => setType('secret')}>
+        <div className="mb-4">
+          <div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('env.modal.type', { ns: 'workflow' })}</div>
+          <div className="flex gap-2">
+            <div
+              className={cn(
+                'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                type === 'string' && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
+              )}
+              onClick={() => setType('string')}
+            >
+              String
+            </div>
+            <div
+              className={cn(
+                'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                type === 'number' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
+              )}
+              onClick={() => {
+                setType('number')
+                if (!(/^\d$/).test(value))
+                  setValue('')
+              }}
+            >
+              Number
+            </div>
+            <div
+              className={cn(
+                'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                type === 'secret' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
+              )}
+              onClick={() => setType('secret')}
+            >
               <span>Secret</span>
               <Tooltip
-                popupContent={
-                  <div className='w-[240px]'>
-                    {t('workflow.env.modal.secretTip')}
+                popupContent={(
+                  <div className="w-[240px]">
+                    {t('env.modal.secretTip', { ns: 'workflow' })}
                   </div>
-                }
-                triggerClassName='ml-0.5 w-3.5 h-3.5'
+                )}
+                triggerClassName="ml-0.5 w-3.5 h-3.5"
               />
             </div>
           </div>
         </div>
         {/* name */}
-        <div className='mb-4'>
-          <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.name')}</div>
-          <div className='flex'>
+        <div className="mb-4">
+          <div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('env.modal.name', { ns: 'workflow' })}</div>
+          <div className="flex">
             <Input
-              placeholder={t('workflow.env.modal.namePlaceholder') || ''}
+              placeholder={t('env.modal.namePlaceholder', { ns: 'workflow' }) || ''}
               value={name}
               onChange={handleVarNameChange}
               onBlur={e => checkVariableName(e.target.value)}
-              type='text'
+              type="text"
             />
           </div>
         </div>
         {/* value */}
-        <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'>
+        <div className="mb-4">
+          <div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('env.modal.value', { ns: 'workflow' })}</div>
+          <div className="flex">
             {
-              type !== 'number' ? <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={value}
-                placeholder={t('workflow.env.modal.valuePlaceholder') || ''}
-                onChange={e => setValue(e.target.value)}
-              />
-                : <Input
-                  placeholder={t('workflow.env.modal.valuePlaceholder') || ''}
-                  value={value}
-                  onChange={e => setValue(e.target.value)}
-                  type="number"
-                />
+              type !== 'number'
+                ? (
+                    <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={value}
+                      placeholder={t('env.modal.valuePlaceholder', { ns: 'workflow' }) || ''}
+                      onChange={e => setValue(e.target.value)}
+                    />
+                  )
+                : (
+                    <Input
+                      placeholder={t('env.modal.valuePlaceholder', { ns: 'workflow' }) || ''}
+                      value={value}
+                      onChange={e => setValue(e.target.value)}
+                      type="number"
+                    />
+                  )
             }
           </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'>
+        <div className="">
+          <div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('env.modal.description', { ns: 'workflow' })}</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'
+              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') || ''}
+              placeholder={t('env.modal.descriptionPlaceholder', { ns: 'workflow' }) || ''}
               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'>
-          <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
-          <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+      <div className="flex flex-row-reverse rounded-b-2xl p-4 pt-2">
+        <div className="flex gap-2">
+          <Button onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
+          <Button variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
         </div>
       </div>
     </div>

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

@@ -1,15 +1,15 @@
 'use client'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
+import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import { RiAddLine } from '@remixicon/react'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import VariableModal from '@/app/components/workflow/panel/env-panel/variable-modal'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import VariableModal from '@/app/components/workflow/panel/env-panel/variable-modal'
 
 type Props = {
   open: boolean
@@ -36,7 +36,7 @@ const VariableTrigger = ({
         if (open)
           onClose()
       }}
-      placement='left-start'
+      placement="left-start"
       offset={{
         mainAxis: 8,
         alignmentAxis: -104,
@@ -46,13 +46,14 @@ const VariableTrigger = ({
         setOpen(v => !v)
         if (open)
           onClose()
-      }}>
-        <Button variant='primary'>
-          <RiAddLine className='mr-1 h-4 w-4' />
-          <span className='system-sm-medium'>{t('workflow.env.envPanelButton')}</span>
+      }}
+      >
+        <Button variant="primary">
+          <RiAddLine className="mr-1 h-4 w-4" />
+          <span className="system-sm-medium">{t('env.envPanelButton', { ns: 'workflow' })}</span>
         </Button>
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-[11]'>
+      <PortalToFollowElemContent className="z-[11]">
         <VariableModal
           env={env}
           onSave={onSave}