estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: refactor the button component using forwardRef (#4379)

Browse Source 
Co-authored-by: KVOJJJin <jzongcode@gmail.com>
This commit is contained in:
TinsFox
2024-06-19 14:13:16 +08:00
committed by GitHub
parent bb33ffc332
commit a3bd5eba02
100 changed files with 218 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/app/components/tools/add-tool-modal/index.tsx
View File

@@ -174,15 +174,15 @@ const AddToolModal: FC<Props> = ({
<div className='sticky top-0 left-0 right-0'>
<div className='sticky top-0 left-0 right-0 px-5 py-3 text-md font-semibold text-gray-900'>{t('tools.addTool')}</div>
<div className='px-3 pt-2 pb-4'>
<Button type='primary' className='w-[176px] text-[13px] leading-[18px] font-medium' onClick={() => setIsShowEditCustomCollectionModal(true)}>
<Plus className='w-4 h-4 mr-1'/>
<Button variant='primary' className='w-[176px] text-[13px] leading-[18px] font-medium' onClick={() => setIsShowEditCustomCollectionModal(true)}>
<Plus className='w-4 h-4 mr-1' />
{t('tools.createCustomTool')}
</Button>
</div>
</div>
<div className='px-2 py-1'>
<Type value={currentType} onSelect={setCurrentType}/>
<Category value={currentCategory} onSelect={setCurrentCategory}/>
<Type value={currentType} onSelect={setCurrentType} />
<Category value={currentCategory} onSelect={setCurrentCategory} />
</div>
</div>
<div className='relative grow bg-white rounded-r-xl overflow-y-auto'>

10
web/app/components/tools/add-tool-modal/tools.tsx
View File

@@ -99,23 +99,23 @@ const Blocks = ({
<div className={cn('grow text-sm text-gray-900 truncate', needAuth && 'opacity-30')}>{tool.label[language]}</div>
{!needAuth && added && (
<div className='flex items-center gap-1 rounded-[6px] border border-gray-100 px-2 py-[3px] bg-white text-gray-300 text-xs font-medium leading-[18px]'>
<Check className='w-3 h-3'/>
<Check className='w-3 h-3' />
{t('tools.addToolModal.added').toLocaleUpperCase()}
</div>
)}
{!needAuth && !added && addable && (
<Button
type='default'
variant='default'
className={cn('hidden shrink-0 items-center !h-6 px-2 py-1 bg-white text-xs font-medium leading-[18px] text-primary-600 group-hover/item:flex')}
onClick={() => onSelect(toolWithProvider, tool)}
>
<Plus className='w-3 h-3'/>
<Plus className='w-3 h-3' />
{t('tools.addToolModal.add').toLocaleUpperCase()}
</Button>
)}
{needAuth && (
<Button
type='default'
variant='default'
className={cn('hidden shrink-0 items-center !h-6 px-2 py-1 bg-white text-xs font-medium leading-[18px] text-primary-600 group-hover/item:flex')}
onClick={() => onAuthSetup(toolWithProvider)}
>{t('tools.auth.setup')}</Button>
@@ -135,7 +135,7 @@ const Blocks = ({
)}
{!tools.length && showWorkflowEmpty && (
<div className='pt-[280px]'>
<Empty/>
<Empty />
</div>
)}
{!!tools.length && tools.map(renderGroup)}

4
web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
View File

@@ -117,7 +117,7 @@ const ConfigCredential: FC<Props> = ({
</div>
}
>
<HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400'/>
<HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
</Tooltip>
</div>
<input
@@ -142,7 +142,7 @@ const ConfigCredential: FC<Props> = ({
<div className='mt-4 shrink-0 flex justify-end space-x-2 py-4'>
<Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onHide}>{t('common.operation.cancel')}</Button>
<Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' type='primary' onClick={() => {
<Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={() => {
onChange(tempCredential)
onHide()
}}>{t('common.operation.save')}</Button>

2
web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
View File

@@ -74,7 +74,7 @@ const GetSchema: FC<Props> = ({
/>
<Button
className='absolute top-1 right-1 !h-6 !px-2 text-xs font-medium'
type='primary'
variant='primary'
disabled={!importUrl}
onClick={handleImportFromUrl}
loading={isParsing}

2
web/app/components/tools/edit-custom-collection-modal/index.tsx
View File

@@ -307,7 +307,7 @@ const EditCustomCollectionModal: FC<Props> = ({
}
<div className='flex space-x-2 '>
<Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700 bg-white' onClick={onHide}>{t('common.operation.cancel')}</Button>
<Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' type='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
<Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
</div>
</div>
</div>

2
web/app/components/tools/edit-custom-collection-modal/test-api.tsx
View File

@@ -107,7 +107,7 @@ const TestApi: FC<Props> = ({
</div>
</div>
<Button type='primary' className=' mt-4 w-full h-10 !text-[13px] leading-[18px] font-medium' onClick={handleTest}>{t('tools.test.title')}</Button>
<Button variant='primary' className=' mt-4 w-full h-10 !text-[13px] leading-[18px] font-medium' onClick={handleTest}>{t('tools.test.title')}</Button>
<div className='mt-6'>
<div className='flex items-center space-x-3'>
<div className='leading-[18px] text-xs font-semibold text-gray-500'>{t('tools.test.testResult')}</div>

8
web/app/components/tools/provider/detail.tsx
View File

@@ -197,7 +197,7 @@ const ProviderDetail = ({
<div className='flex items-center py-1 gap-2'>
<div className='relative shrink-0'>
{typeof collection.icon === 'string' && (
<div className='w-8 h-8 bg-center bg-cover bg-no-repeat rounded-md' style={{ backgroundImage: `url(${collection.icon})` }}/>
<div className='w-8 h-8 bg-center bg-cover bg-no-repeat rounded-md' style={{ backgroundImage: `url(${collection.icon})` }} />
)}
{typeof collection.icon !== 'string' && (
<AppIcon
@@ -217,7 +217,7 @@ const ProviderDetail = ({
<div className='flex gap-1 border-b-[0.5px] border-black/5'>
{(collection.type === CollectionType.builtIn) && needAuth && (
<Button
type={isAuthed ? 'default' : 'primary'}
variant={isAuthed ? 'default' : 'primary'}
className={cn('shrink-0 my-3 w-full flex items-center', isAuthed && 'bg-white')}
onClick={() => {
if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
@@ -243,7 +243,7 @@ const ProviderDetail = ({
{collection.type === CollectionType.workflow && !isDetailLoading && customCollection && (
<>
<Button
type='primary'
variant='primary'
className={cn('shrink-0 my-3 w-[183px] flex items-center')}
>
<a className='flex items-center text-white' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
@@ -263,7 +263,7 @@ const ProviderDetail = ({
</div>
{/* Tools */}
<div className='pt-3'>
{isDetailLoading && <div className='flex h-[200px]'><Loading type='app'/></div>}
{isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>}
{!isDetailLoading && (
<div className='text-xs font-medium leading-6 text-gray-500'>
{collection.type === CollectionType.workflow && <span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span>}

2
web/app/components/tools/setting/build-in/config-credentials.tsx
View File

@@ -91,7 +91,7 @@ const ConfigCredential: FC<Props> = ({
}
< div className='flex space-x-2'>
<Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700 bg-white' onClick={onCancel}>{t('common.operation.cancel')}</Button>
<Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' type='primary' onClick={() => onSaved(tempCredential)}>{t('common.operation.save')}</Button>
<Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={() => onSaved(tempCredential)}>{t('common.operation.save')}</Button>
</div>
</div>
</>

4
web/app/components/tools/workflow-tool/confirm-modal/index.tsx
View File

@@ -21,7 +21,7 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
<Modal
className={cn('p-8 max-w-[600px] w-[600px]', s.bg)}
isShow={show}
onClose={() => {}}
onClose={() => { }}
>
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
<XClose className='w-4 h-4 text-gray-500' />
@@ -36,7 +36,7 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
<div className='pt-6 flex justify-end items-center'>
<div className='flex items-center'>
<Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('common.operation.cancel')}</Button>
<Button className='text-sm font-medium border-red-700 border-[0.5px]' type="warning" onClick={onConfirm}>{t('common.operation.confirm')}</Button>
<Button className='text-sm font-medium border-red-700 border-[0.5px]' variant="warning" onClick={onConfirm}>{t('common.operation.confirm')}</Button>
</div>
</div>
</Modal>

4
web/app/components/tools/workflow-tool/index.tsx
View File

@@ -208,7 +208,7 @@ const WorkflowToolAsModal: FC<Props> = ({
</div>
)}
{item.name !== '__image' && (
<MethodSelector value={item.form} onChange={value => handleParameterChange('form', value, index)}/>
<MethodSelector value={item.form} onChange={value => handleParameterChange('form', value, index)} />
)}
</td>
<td className="p-2 pl-3 text-gray-500 w-[236px]">
@@ -246,7 +246,7 @@ const WorkflowToolAsModal: FC<Props> = ({
)}
<div className='flex space-x-2 '>
<Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onHide}>{t('common.operation.cancel')}</Button>
<Button disabled={!label || !name || !isNameValid(name)} className='flex items-center h-8 !px-3 !text-[13px] font-medium' type='primary' onClick={() => {
<Button disabled={!label || !name || !isNameValid(name)} className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={() => {
if (isAdd)
onConfirm()
else