admin/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/app/annotation/add-annotation-modal/index.tsx
View File

@@ -105,7 +105,7 @@ const AddAnnotationModal: FC<Props> = ({
</div>
<div className='mt-2 flex space-x-2'>
<Button className='!h-7 !text-xs !font-medium' onClick={onHide}>{t('common.operation.cancel')}</Button>
<Button className='!h-7 !text-xs !font-medium' type='primary' onClick={handleSave} loading={isSaving} disabled={isAnnotationFull}>{t('common.operation.add')}</Button>
<Button className='!h-7 !text-xs !font-medium' variant='primary' onClick={handleSave} loading={isSaving} disabled={isAnnotationFull}>{t('common.operation.add')}</Button>
</div>
</div>
</div>

2
web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
View File

@@ -110,7 +110,7 @@ const BatchModal: FC<IBatchModalProps> = ({
</Button>
<Button
className='text-sm font-medium'
type="primary"
variant="primary"
onClick={handleSend}
disabled={isAnnotationFull || !currentCSV}
loading={importStatus === ProcessStatus.PROCESSING || importStatus === ProcessStatus.WAITING}

2
web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
View File

@@ -119,7 +119,7 @@ const EditItem: FC<Props> = ({
autoFocus
/>
<div className='mt-2 flex space-x-2'>
<Button className='!h-7 !text-xs !font-medium' type='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
<Button className='!h-7 !text-xs !font-medium' variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
<Button className='!h-7 !text-xs !font-medium' onClick={handleCancel}>{t('common.operation.cancel')}</Button>
</div>
</div>

2
web/app/components/app/annotation/header-opts/index.tsx
View File

@@ -135,7 +135,7 @@ const HeaderOptions: FC<Props> = ({
return (
<div className='flex space-x-2'>
<Button type='primary' onClick={() => setShowAddModal(true)} className='flex items-center !h-8 !px-3 !text-[13px] space-x-2'>
<Button variant='primary' onClick={() => setShowAddModal(true)} className='flex items-center !h-8 !px-3 !text-[13px] space-x-2'>
<Plus className='w-4 h-4' />
<div>{t('appAnnotation.table.header.addAnnotation')}</div>
</Button>

4
web/app/components/app/app-publisher/index.tsx
View File

@@ -119,7 +119,7 @@ const AppPublisher = ({
>
<PortalToFollowElemTrigger onClick={handleTrigger}>
<Button
type='primary'
variant='primary'
className={`
pl-3 pr-2 py-0 h-8 text-[13px] font-medium
${disabled && 'cursor-not-allowed opacity-50'}
@@ -168,7 +168,7 @@ const AppPublisher = ({
)
: (
<Button
type='primary'
variant='primary'
className={classNames(
'mt-3 px-3 py-0 w-full h-8 border-[0.5px] border-primary-700 rounded-lg text-[13px] font-medium',
(publishDisabled || published) && 'border-transparent',

2
web/app/components/app/app-publisher/publish-with-multiple-model.tsx
View File

@@ -68,7 +68,7 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
>
<PortalToFollowElemTrigger className='w-full' onClick={handleToggle}>
<Button
type='primary'
variant='primary'
disabled={!validModelConfigs.length}
className='mt-3 px-3 py-0 w-full h-8 border-[0.5px] border-primary-700 rounded-lg text-[13px] font-medium'
>

2
web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
View File

@@ -20,7 +20,7 @@ const FormattingChanged: FC<IFormattingChangedProps> = ({
description={t('appDebug.feature.dataSet.queryVariable.unableToQueryDataSetTip')}
footer={
<div className='flex space-x-2'>
<Button type='primary' className='flex items-center justify-start !h-8 !w-[96px]' onClick={onConfirm}>
<Button variant='primary' className='flex items-center justify-start !h-8 !w-[96px]' onClick={onConfirm}>
<span className='text-[13px] font-medium'>{t('appDebug.feature.dataSet.queryVariable.ok')}</span>
</Button>
</div>

2
web/app/components/app/configuration/base/warning-mask/formatting-changed.tsx
View File

@@ -28,7 +28,7 @@ const FormattingChanged: FC<IFormattingChangedProps> = ({
description={t('appDebug.formattingChangedText')}
footer={
<div className='flex space-x-2'>
<Button type='primary' className='flex items-center space-x-2' onClick={onConfirm}>
<Button variant='primary' className='flex items-center space-x-2' onClick={onConfirm}>
{icon}
<span>{t('common.operation.refresh')}</span>
</Button>

2
web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx
View File

@@ -28,7 +28,7 @@ const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({
title={isTrailFinished ? t('appDebug.notSetAPIKey.trailFinished') : t('appDebug.notSetAPIKey.title')}
description={t('appDebug.notSetAPIKey.description')}
footer={
<Button type='primary' className='flex items-center space-x-2' onClick={onSetting}>
<Button variant='primary' className='flex items-center space-x-2' onClick={onSetting}>
<span>{t('appDebug.notSetAPIKey.settingBtn')}</span>
{icon}
</Button>}

2
web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
View File

@@ -63,7 +63,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
</div>
<div className='mt-7 flex justify-end space-x-2'>
<Button className='w-20 h-8 !text-[13px]' onClick={onCancel}>{t('common.operation.cancel')}</Button>
<Button className='w-20 h-8 !text-[13px]' type='primary' onClick={onConfrim}>{t('common.operation.add')}</Button>
<Button className='w-20 h-8 !text-[13px]' variant='primary' onClick={onConfrim}>{t('common.operation.add')}</Button>
</div>
</div>

2
web/app/components/app/configuration/config-prompt/conversation-histroy/edit-modal.tsx
View File

@@ -49,7 +49,7 @@ const EditModal: FC<Props> = ({
<div className='mt-10 flex justify-end'>
<Button className='mr-2 flex-shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
<Button type='primary' className='flex-shrink-0' onClick={() => onSave(tempData)} loading={saveLoading}>{t('common.operation.save')}</Button>
<Button variant='primary' className='flex-shrink-0' onClick={() => onSave(tempData)} loading={saveLoading}>{t('common.operation.save')}</Button>
</div>
</Modal>
)

2
web/app/components/app/configuration/config-var/modal-foot.tsx
View File

@@ -17,7 +17,7 @@ const ModalFoot: FC<IModalFootProps> = ({
return (
<div className='flex justify-end gap-2'>
<Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
<Button type='primary' onClick={onConfirm}>{t('common.operation.save')}</Button>
<Button variant='primary' onClick={onConfirm}>{t('common.operation.save')}</Button>
</div>
)
}

2
web/app/components/app/configuration/config/agent/agent-setting/index.tsx
View File

@@ -142,7 +142,7 @@ const AgentSetting: FC<Props> = ({
{t('common.operation.cancel')}
</Button>
<Button
type='primary'
variant='primary'
className='text-sm font-medium'
onClick={handleSave}
>

2
web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
View File

@@ -209,7 +209,7 @@ const SettingBuiltInTool: FC<Props> = ({
{!readonly && !isInfoActive && (
<div className='mt-2 shrink-0 flex justify-end py-4 px-6 space-x-2 rounded-b-[10px] bg-gray-50 border-t border-black/5'>
<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' disabled={!isValid} onClick={() => onSave?.(addDefaultValue(tempSetting, formSchemas))}>{t('common.operation.save')}</Button>
<Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' disabled={!isValid} onClick={() => onSave?.(addDefaultValue(tempSetting, formSchemas))}>{t('common.operation.save')}</Button>
</div>
)}
</div>)}

4
web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
View File

@@ -155,7 +155,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
<div className='mt-6 flex justify-end'>
<Button
className='flex space-x-2 items-center !h-8'
type='primary'
variant='primary'
onClick={onGenerate}
disabled={isLoading}
>
@@ -198,7 +198,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
<div className='sticky bottom-0 flex justify-end right-0 py-4 bg-white'>
<Button onClick={onClose}>{t('common.operation.cancel')}</Button>
<Button type='primary' className='ml-2' onClick={() => {
<Button variant='primary' className='ml-2' onClick={() => {
setShowConfirmOverwrite(true)
}}>{t('appDebug.automatic.apply')}</Button>
</div>

4
web/app/components/app/configuration/ctrl-btn-group/index.tsx
View File

@@ -15,8 +15,8 @@ const ContrlBtnGroup: FC<IContrlBtnGroupProps> = ({ onSave, onReset }) => {
return (
<div className="fixed left-[224px] bottom-0 w-[519px] h-[64px]">
<div className={`${s.ctrlBtn} flex items-center h-full pl-4 gap-2 bg-white`}>
<Button type='primary' onClick={onSave}>{t('appDebug.operation.applyConfig')}</Button>
<Button type='default' onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button>
<Button variant='primary' onClick={onSave}>{t('appDebug.operation.applyConfig')}</Button>
<Button variant='default' onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button>
</div>
</div>
)

2
web/app/components/app/configuration/dataset-config/params-config/index.tsx
View File

@@ -95,7 +95,7 @@ const ParamsConfig: FC = () => {
<Button className='mr-2 flex-shrink-0' onClick={() => {
setOpen(false)
}}>{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>
</Modal>
)

2
web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
View File

@@ -156,7 +156,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
</div>
<div className='flex space-x-2'>
<Button className='!w-24 !h-9' onClick={onClose}>{t('common.operation.cancel')}</Button>
<Button className='!w-24 !h-9' type='primary' onClick={handleSelect} disabled={hasNoData}>{t('common.operation.add')}</Button>
<Button className='!w-24 !h-9' variant='primary' onClick={handleSelect} disabled={hasNoData}>{t('common.operation.add')}</Button>
</div>
</div>
)}

2
web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
View File

@@ -280,7 +280,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
{t('common.operation.cancel')}
</Button>
<Button
type='primary'
variant='primary'
className='text-sm font-medium'
disabled={loading}
onClick={handleSave}

2
web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
View File

@@ -132,7 +132,7 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
isFocus ? (
<div className='flex items-center space-x-1'>
<div className='px-3 leading-[18px] text-xs font-medium text-gray-700 cursor-pointer' onClick={handleCancel}>{t('common.operation.cancel')}</div>
<Button className='!h-8 !px-3 text-xs' onClick={handleConfirm} type="primary">{t('common.operation.save')}</Button>
<Button className='!h-8 !px-3 text-xs' onClick={handleConfirm} variant="primary">{t('common.operation.save')}</Button>
</div>
) : (
<OperationBtn type='edit' actionName={hasValue ? '' : t('appDebug.openingStatement.writeOpener') as string} onClick={handleEdit} />

2
web/app/components/app/configuration/prompt-value-panel/index.tsx
View File

@@ -62,7 +62,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
const renderRunButton = () => {
return (
<Button
type="primary"
variant="primary"
disabled={canNotRun}
onClick={() => onSend && onSend()}
className="w-[80px] !h-8">

2
web/app/components/app/configuration/toolbox/annotation/config-param-modal.tsx
View File

@@ -125,7 +125,7 @@ const ConfigParamModal: FC<Props> = ({
<div className='mt-6 flex gap-2 justify-end'>
<Button className='!text-sm' onClick={onHide}>{t('common.operation.cancel')}</Button>
<Button
type='primary'
variant='primary'
onClick={handleSave}
className='flex items-center border-[0.5px] !text-sm'
loading={isLoading}

4
web/app/components/app/configuration/toolbox/moderation/moderation-setting-modal.tsx
View File

@@ -259,7 +259,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
onClick={() => handleDataTypeChange(provider.key)}
>
<div className={`
mr-2 w-4 h-4 rounded-full border
mr-2 w-4 h-4 rounded-full border
${localeData.type === provider.key ? 'border-[5px] border-primary-600' : 'border border-gray-300'}`} />
{provider.name}
</div>
@@ -359,7 +359,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
{t('common.operation.cancel')}
</Button>
<Button
type='primary'
variant='primary'
className='text-sm font-medium'
onClick={handleSave}
disabled={localeData.type === 'openai_moderation' && !openaiProviderConfiged}

2
web/app/components/app/configuration/tools/external-data-tool-modal.tsx
View File

@@ -276,7 +276,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
{t('common.operation.cancel')}
</Button>
<Button
type='primary'
variant='primary'
className='text-sm font-medium'
onClick={handleSave}
>

8
web/app/components/app/create-app-modal/index.tsx
View File

@@ -85,7 +85,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
overflowVisible
className='!p-0 !max-w-[720px] !w-[720px] rounded-xl'
isShow={show}
onClose={() => {}}
onClose={() => { }}
>
{/* Heading */}
<div className='shrink-0 flex flex-col h-full bg-white rounded-t-xl'>
@@ -208,7 +208,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
'hidden z-20 absolute left-[327px] top-[-158px] w-[376px] rounded-xl bg-white border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-lg group-hover:block',
)}
>
<div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl', s.basicPic)}/>
<div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl', s.basicPic)} />
<div className='px-4 pb-2'>
<div className='flex items-center justify-between'>
<div className='text-gray-700 text-md leading-6 font-semibold'>{t('app.newApp.basic')}</div>
@@ -242,7 +242,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
'hidden z-20 absolute right-[26px] top-[-158px] w-[376px] rounded-xl bg-white border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-lg group-hover:block',
)}
>
<div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl', s.advancedPic)}/>
<div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl', s.advancedPic)} />
<div className='px-4 pb-2'>
<div className='flex items-center justify-between'>
<div className='flex items-center'>
@@ -302,7 +302,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
)}
<div className='px-8 py-6 flex justify-end'>
<Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
<Button className='text-sm font-medium' disabled={isAppsFull || !name} type="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
<Button className='text-sm font-medium' disabled={isAppsFull || !name} variant="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
</div>
<div className='absolute right-6 top-6 p-2 cursor-pointer z-20' onClick={onClose}>
<XClose className='w-4 h-4 text-gray-500' />

4
web/app/components/app/create-from-dsl-modal/index.tsx
View File

@@ -80,7 +80,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose }: CreateFromDSLModalProp
<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('app.createFromConfigFile')}</div>
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
@@ -93,7 +93,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose }: CreateFromDSLModalProp
{isAppsFull && <AppsFull loc='app-create-dsl' />}
<div className='pt-6 flex justify-end'>
<Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
<Button className='text-sm font-medium' disabled={isAppsFull || !currentFile} type="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
<Button className='text-sm font-medium' disabled={isAppsFull || !currentFile} variant="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
</div>
</Modal>
)

2
web/app/components/app/duplicate-modal/index.tsx
View File

@@ -75,7 +75,7 @@ const DuplicateAppModal = ({
{isAppsFull && <AppsFull loc='app-duplicate-create' />}
</div>
<div className='flex flex-row-reverse'>
<Button disabled={isAppsFull} className='w-24 ml-2' type='primary' onClick={submit}>{t('app.duplicate')}</Button>
<Button disabled={isAppsFull} className='w-24 ml-2' variant='primary' onClick={submit}>{t('app.duplicate')}</Button>
<Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
</div>
</Modal>

2
web/app/components/app/overview/apikey-info-panel/index.tsx
View File

@@ -44,7 +44,7 @@ const APIKeyInfoPanel: FC = () => {
<div className='mt-1 text-sm text-gray-600 font-normal'>{t(`appOverview.apiKeyInfo.cloud.${'trial'}.description`)}</div>
)}
<Button
type='primary'
variant='primary'
className='space-x-2'
onClick={() => setShowAccountSettingModal({ payload: 'provider' })}
>

2
web/app/components/app/overview/settings/index.tsx
View File

@@ -173,7 +173,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
</>}
<div className='mt-10 flex justify-end'>
<Button className='mr-2 flex-shrink-0 !text-sm' onClick={onHide}>{t('common.operation.cancel')}</Button>
<Button type='primary' className='flex-shrink-0 !text-sm' onClick={onClickSave} loading={saveLoading}>{t('common.operation.save')}</Button>
<Button variant='primary' className='flex-shrink-0 !text-sm' onClick={onClickSave} loading={saveLoading}>{t('common.operation.save')}</Button>
</div>
{showEmojiPicker && <EmojiPicker
onSelect={(icon, icon_background) => {

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

@@ -89,7 +89,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
<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' />
@@ -133,7 +133,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
</div>
<div className='flex items-center'>
<Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
<Button className='text-sm font-medium border-red-700 border-[0.5px]' disabled={isAppsFull || !name} type="warning" onClick={goStart}>{t('app.switchStart')}</Button>
<Button className='text-sm font-medium border-red-700 border-[0.5px]' disabled={isAppsFull || !name} variant="warning" onClick={goStart}>{t('app.switchStart')}</Button>
</div>
</div>
</Modal>