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

2
web/app/components/datasets/create/embedding-process/index.tsx
View File

@@ -282,7 +282,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
</div>
<RuleDetail sourceData={ruleDetail} />
<div className='flex items-center gap-2 mt-10'>
<Button className='w-fit' type='primary' onClick={navToDocumentList}>
<Button className='w-fit' variant='primary' onClick={navToDocumentList}>
<span>{t('datasetCreation.stepThree.navTo')}</span>
<ArrowRightIcon className='h-4 w-4 ml-2 stroke-current stroke-1' />
</Button>

4
web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
View File

@@ -53,7 +53,7 @@ const EmptyDatasetCreationModal = ({
>
<div className={s.modalHeader}>
<div className={s.title}>{t('datasetCreation.stepOne.modal.title')}</div>
<span className={s.close} onClick={onHide}/>
<span className={s.close} onClick={onHide} />
</div>
<div className={s.tip}>{t('datasetCreation.stepOne.modal.tip')}</div>
<div className={s.form}>
@@ -61,7 +61,7 @@ const EmptyDatasetCreationModal = ({
<Input className='!h-8' value={inputValue} placeholder={t('datasetCreation.stepOne.modal.placeholder') || ''} onChange={setInputValue} />
</div>
<div className='flex flex-row-reverse'>
<Button className='w-24 ml-2' type='primary' onClick={submit}>{t('datasetCreation.stepOne.modal.confirmButton')}</Button>
<Button className='w-24 ml-2' variant='primary' onClick={submit}>{t('datasetCreation.stepOne.modal.confirmButton')}</Button>
<Button className='w-24' onClick={onHide}>{t('datasetCreation.stepOne.modal.cancelButton')}</Button>
</div>
</Modal>

6
web/app/components/datasets/create/step-one/index.tsx
View File

@@ -49,7 +49,7 @@ export const NotionConnector = ({ onSetting }: NotionConnectorProps) => {
<span className={s.notionIcon} />
<div className={s.title}>{t('datasetCreation.stepOne.notionSyncTitle')}</div>
<div className={s.tip}>{t('datasetCreation.stepOne.notionSyncTip')}</div>
<Button className='h-8' type='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
<Button className='h-8' variant='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
</div>
)
}
@@ -197,7 +197,7 @@ const StepOne = ({
<VectorSpaceFull />
</div>
)}
<Button disabled={nextDisabled} className={s.submitButton} type='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
<Button disabled={nextDisabled} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
</>
)}
{dataSourceType === DataSourceType.NOTION && (
@@ -217,7 +217,7 @@ const StepOne = ({
<VectorSpaceFull />
</div>
)}
<Button disabled={isShowVectorSpaceFull || !notionPages.length} className={s.submitButton} type='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
<Button disabled={isShowVectorSpaceFull || !notionPages.length} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
</>
)}
</>

6
web/app/components/datasets/create/step-two/index.tsx
View File

@@ -655,7 +655,7 @@ const StepTwo = ({
</div>
</div>
<div className={s.formFooter}>
<Button type="primary" className={cn(s.button, '!h-8')} onClick={confirmChangeCustomConfig}>{t('datasetCreation.stepTwo.preview')}</Button>
<Button variant="primary" className={cn(s.button, '!h-8')} onClick={confirmChangeCustomConfig}>{t('datasetCreation.stepTwo.preview')}</Button>
<Button className={cn(s.button, 'ml-2 !h-8')} onClick={resetRules}>{t('datasetCreation.stepTwo.reset')}</Button>
</div>
</div>
@@ -891,12 +891,12 @@ const StepTwo = ({
<div className='flex items-center mt-8 py-2'>
<Button onClick={() => onStepChange && onStepChange(-1)}>{t('datasetCreation.stepTwo.previousStep')}</Button>
<div className={s.divider} />
<Button loading={isCreating} type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
<Button loading={isCreating} variant='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
</div>
)
: (
<div className='flex items-center mt-8 py-2'>
<Button loading={isCreating} type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
<Button loading={isCreating} variant='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
<Button className='ml-2' onClick={onCancel}>{t('datasetCreation.stepTwo.cancel')}</Button>
</div>
)}

6
web/app/components/datasets/create/stop-embedding-modal/index.tsx
View File

@@ -30,12 +30,12 @@ const StopEmbeddingModal = ({
onClose={onHide}
className={cn(s.modal, '!max-w-[480px]', 'px-8')}
>
<div className={s.icon}/>
<span className={s.close} onClick={onHide}/>
<div className={s.icon} />
<span className={s.close} onClick={onHide} />
<div className={s.title}>{t('datasetCreation.stepThree.modelTitle')}</div>
<div className={s.content}>{t('datasetCreation.stepThree.modelContent')}</div>
<div className='flex flex-row-reverse'>
<Button className='w-24 ml-2' type='primary' onClick={submit}>{t('datasetCreation.stepThree.modelButtonConfirm')}</Button>
<Button className='w-24 ml-2' variant='primary' onClick={submit}>{t('datasetCreation.stepThree.modelButtonConfirm')}</Button>
<Button className='w-24' onClick={onHide}>{t('datasetCreation.stepThree.modelButtonCancel')}</Button>
</div>
</Modal>

4
web/app/components/datasets/documents/detail/batch-modal/index.tsx
View File

@@ -39,7 +39,7 @@ const BatchModal: FC<IBatchModalProps> = ({
}, [isShow])
return (
<Modal isShow={isShow} onClose={() => {}} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
<Modal isShow={isShow} onClose={() => { }} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
<div className='relative pb-1 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetDocuments.list.batchModal.title')}</div>
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onCancel}>
<XClose className='w-4 h-4 text-gray-500' />
@@ -55,7 +55,7 @@ const BatchModal: FC<IBatchModalProps> = ({
<Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onCancel}>
{t('datasetDocuments.list.batchModal.cancel')}
</Button>
<Button className='text-sm font-medium' type="primary" onClick={handleSend} disabled={!currentCSV}>
<Button className='text-sm font-medium' variant="primary" onClick={handleSend} disabled={!currentCSV}>
{t('datasetDocuments.list.batchModal.run')}
</Button>
</div>

2
web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
View File

@@ -224,7 +224,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
<div className='flex gap-2 justify-end'>
<Button onClick={() => setShowModal(false)}>{t('common.operation.cancel')}</Button>
<Button
type='warning'
variant='warning'
onClick={async () => {
await onDelete?.(id)
}}

4
web/app/components/datasets/documents/detail/completed/index.tsx
View File

@@ -139,7 +139,7 @@ const SegmentDetailComponent: FC<ISegmentDetailProps> = ({
{t('common.operation.cancel')}
</Button>
<Button
type='primary'
variant='primary'
className='!h-7 !px-3 !py-[5px] text-xs font-medium !rounded-md'
onClick={handleSave}
disabled={loading}
@@ -402,7 +402,7 @@ const Completed: FC<ICompletedProps> = ({
onClick={onClickCard}
archived={archived}
/>
<Modal isShow={currSegment.showModal} onClose={() => {}} className='!max-w-[640px] !overflow-visible'>
<Modal isShow={currSegment.showModal} onClose={() => { }} className='!max-w-[640px] !overflow-visible'>
<SegmentDetail
embeddingAvailable={embeddingAvailable}
segInfo={currSegment.segInfo ?? { id: '' }}

2
web/app/components/datasets/documents/detail/embedding/index.tsx
View File

@@ -279,7 +279,7 @@ const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: d
{t('datasetCreation.stepThree.resume')}
</Button>
)}
<Button className='w-fit' type='primary' onClick={navToDocument}>
<Button className='w-fit' variant='primary' onClick={navToDocument}>
<span>{t('datasetCreation.stepThree.navTo')}</span>
<ArrowRightIcon className='h-4 w-4 ml-2 stroke-current stroke-1' />
</Button>

8
web/app/components/datasets/documents/detail/metadata/index.tsx
View File

@@ -208,7 +208,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
})}
</Radio.Group>
{!doc_type && !documentType && (
<Button type='primary'
<Button variant='primary'
onClick={confirmDocType}
disabled={!tempDocType}
>
@@ -216,7 +216,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
</Button>
)}
{documentType && <div className={s.opBtnWrapper}>
<Button onClick={confirmDocType} className={`${s.opBtn} ${s.opSaveBtn}`} type='primary' >{t('common.operation.save')}</Button>
<Button onClick={confirmDocType} className={`${s.opBtn} ${s.opSaveBtn}`} variant='primary' >{t('common.operation.save')}</Button>
<Button onClick={cancelDocType} className={`${s.opBtn} ${s.opCancelBtn}`}>{t('common.operation.cancel')}</Button>
</div>}
</div >
@@ -324,7 +324,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
<Button onClick={onCancel} className={`${s.opBtn} ${s.opCancelBtn}`}>{t('common.operation.cancel')}</Button>
<Button onClick={onSave}
className={`${s.opBtn} ${s.opSaveBtn}`}
type='primary'
variant='primary'
loading={saveLoading}
>
{t('common.operation.save')}
@@ -344,7 +344,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
<TypeIcon iconName={metadataMap[metadataParams.documentType || 'book'].iconName || ''} className={s.iconShow} />
{metadataMap[metadataParams.documentType || 'book'].text}
{editStatus && <div className='inline-flex items-center gap-1 ml-1'>
·
·
<div
onClick={() => { setShowDocTypes(true) }}
className='cursor-pointer hover:text-[#155EEF]'

4
web/app/components/datasets/documents/detail/new-segment-modal.tsx
View File

@@ -110,7 +110,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
}
return (
<Modal isShow={isShow} onClose={() => {}} className='pt-8 px-8 pb-6 !max-w-[640px] !rounded-xl'>
<Modal isShow={isShow} onClose={() => { }} className='pt-8 px-8 pb-6 !max-w-[640px] !rounded-xl'>
<div className={'flex flex-col relative'}>
<div className='absolute right-0 -top-0.5 flex items-center h-6'>
<div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={handleCancel}>
@@ -141,7 +141,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
{t('common.operation.cancel')}
</Button>
<Button
type='primary'
variant='primary'
className='!h-9 !px-4 !py-2 text-sm font-medium !rounded-lg'
onClick={handleSave}
disabled={loading}

2
web/app/components/datasets/documents/index.tsx
View File

@@ -210,7 +210,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
<div className='flex gap-2 justify-center items-center !h-8'>
<RetryButton datasetId={datasetId} />
{embeddingAvailable && (
<Button type='primary' onClick={routeToDocCreate} className='!h-8 !text-[13px] !shrink-0'>
<Button variant='primary' onClick={routeToDocCreate} className='!h-8 !text-[13px] !shrink-0'>
<PlusIcon className='h-4 w-4 mr-2 stroke-current' />
{isDataSourceNotion && t('datasetDocuments.list.addPages')}
{isDataSourceWeb && t('datasetDocuments.list.addUrl')}

2
web/app/components/datasets/documents/list.tsx
View File

@@ -301,7 +301,7 @@ export const OperationAction: FC<{
<div className='flex gap-2 justify-end'>
<Button onClick={() => setShowModal(false)}>{t('common.operation.cancel')}</Button>
<Button
type='warning'
variant='warning'
onClick={() => onOperate('delete')}
className='border-red-700 border-[0.5px]'
>

2
web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
View File

@@ -115,7 +115,7 @@ const ModifyRetrievalModal: FC<Props> = ({
}}
>
<Button className='mr-2 flex-shrink-0' onClick={onHide}>{t('common.operation.cancel')}</Button>
<Button type='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
<Button variant='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
</div>
</div>
)

2
web/app/components/datasets/hit-testing/textarea.tsx
View File

@@ -128,7 +128,7 @@ const TextAreaWithButton = ({
<div>
<Button
onClick={onSubmit}
type="primary"
variant="primary"
loading={loading}
disabled={(!text?.length || text?.length > 200)}
>

4
web/app/components/datasets/rename-modal/index.tsx
View File

@@ -58,7 +58,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
<Modal
className='px-8 py-6 max-w-[520px] w-[520px] rounded-xl'
isShow={show}
onClose={() => {}}
onClose={() => { }}
>
<div className='relative pb-2 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetSettings.title')}</div>
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
@@ -96,7 +96,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
</div>
<div className='pt-6 flex justify-end'>
<Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('common.operation.cancel')}</Button>
<Button className='text-sm font-medium' disabled={loading} type="primary" onClick={onConfirm}>{t('common.operation.save')}</Button>
<Button className='text-sm font-medium' disabled={loading} variant="primary" onClick={onConfirm}>{t('common.operation.save')}</Button>
</div>
</Modal>
)

2
web/app/components/datasets/settings/form/index.tsx
View File

@@ -244,7 +244,7 @@ const Form = () => {
<div className='w-[480px]'>
<Button
className='min-w-24 text-sm'
type='primary'
variant='primary'
onClick={handleSave}
>
{t('datasetSettings.form.save')}