| | |
| | | return |
| | | if (!value) |
| | | return notify({ type: 'error', message: 'value can not be empty' }) |
| | | |
| | | // Add check for duplicate name when editing |
| | | if (env && env.name !== name && envList.some(e => e.name === name)) |
| | | if (!env && envList.some(env => env.name === name)) |
| | | return notify({ type: 'error', message: 'name is existed' }) |
| | | // Original check for create new variable |
| | | if (!env && envList.some(e => e.name === name)) |
| | | return notify({ type: 'error', message: 'name is existed' }) |
| | | |
| | | onSave({ |
| | | id: env ? env.id : uuid4(), |
| | | value_type: type, |
| | |
| | | |
| | | return ( |
| | | <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')} |
| | | className={cn('flex flex-col w-[360px] bg-components-panel-bg rounded-2xl h-full border-[0.5px] border-components-panel-border shadow-2xl')} |
| | | > |
| | | <div className='system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'> |
| | | <div className='shrink-0 flex items-center justify-between mb-3 p-4 pb-0 text-text-primary system-xl-semibold'> |
| | | {!env ? t('workflow.env.modal.title') : t('workflow.env.modal.editTitle')} |
| | | <div className='flex items-center'> |
| | | <div |
| | | className='flex h-6 w-6 cursor-pointer items-center justify-center' |
| | | className='flex items-center justify-center w-6 h-6 cursor-pointer' |
| | | onClick={onClose} |
| | | > |
| | | <RiCloseLine className='h-4 w-4 text-text-tertiary' /> |
| | | <RiCloseLine className='w-4 h-4 text-text-tertiary' /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <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='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{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', |
| | | 'w-[106px] flex items-center justify-center p-2 radius-md bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary system-sm-regular cursor-pointer hover:shadow-xs hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover', |
| | | type === 'string' && 'text-text-primary system-sm-medium border-[1.5px] shadow-xs bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border 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', |
| | | 'w-[106px] flex items-center justify-center p-2 radius-md bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary system-sm-regular cursor-pointer hover:shadow-xs hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover', |
| | | type === 'number' && 'text-text-primary font-medium border-[1.5px] shadow-xs bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border hover:border-components-option-card-option-selected-border', |
| | | )} onClick={() => { |
| | | setType('number') |
| | | if (!(/^\d$/).test(value)) |
| | | if (!(/^[0-9]$/).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', |
| | | 'w-[106px] flex items-center justify-center p-2 radius-md bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary system-sm-regular cursor-pointer hover:shadow-xs hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover', |
| | | type === 'secret' && 'text-text-primary font-medium border-[1.5px] shadow-xs bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border hover:border-components-option-card-option-selected-border', |
| | | )} onClick={() => setType('secret')}> |
| | | <span>Secret</span> |
| | | <Tooltip |
| | |
| | | </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='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.env.modal.name')}</div> |
| | | <div className='flex'> |
| | | <Input |
| | | placeholder={t('workflow.env.modal.namePlaceholder') || ''} |
| | |
| | | </div> |
| | | {/* value */} |
| | | <div className=''> |
| | | <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.value')}</div> |
| | | <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.env.modal.value')}</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 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" |
| | | /> |
| | | } |
| | | <Input |
| | | placeholder={t('workflow.env.modal.valuePlaceholder') || ''} |
| | | value={value} |
| | | onChange={e => setValue(e.target.value)} |
| | | type={type !== 'number' ? 'text' : 'number'} |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div className='flex flex-row-reverse rounded-b-2xl p-4 pt-2'> |
| | | <div className='p-4 pt-2 flex flex-row-reverse rounded-b-2xl'> |
| | | <div className='flex gap-2'> |
| | | <Button onClick={onClose}>{t('common.operation.cancel')}</Button> |
| | | <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button> |