refactor(component): adjust confirm modal api (#7589)

packages/frontend/component/src/components/disable-public-link/index.tsx

@@ -11,10 +11,10 @@ export const PublicLinkDisableModal = (props: ConfirmModalProps) => {
       title={t['com.affine.publicLinkDisableModal.title']()}
       description={t['com.affine.publicLinkDisableModal.description']()}
       cancelText={t['com.affine.publicLinkDisableModal.button.cancel']()}
+      confirmText={t['com.affine.publicLinkDisableModal.button.disable']()}
       confirmButtonOptions={{
         type: 'error',
         ['data-testid' as string]: 'confirm-enable-affine-cloud-button',
-        children: t['com.affine.publicLinkDisableModal.button.disable'](),
       }}
       {...props}
     />

packages/frontend/component/src/components/member-components/invite-modal.tsx

@@ -57,11 +57,11 @@ export const InviteModal = ({
           padding: '20px 26px',
         },
       }}
+      confirmText={t['Invite']()}
       confirmButtonOptions={{
         loading: isMutating,
         type: 'primary',
         ['data-testid' as string]: 'confirm-enable-affine-cloud-button',
-        children: t['Invite'](),
       }}
       onConfirm={handleConfirm}
     >

packages/frontend/component/src/components/member-components/member-limit-modal.tsx

@@ -38,14 +38,13 @@ export const MemberLimitModal = ({
           : 'com.affine.payment.member-limit.pro.description'
       ]({ planName: plan, quota: quota })}
       cancelButtonOptions={{ style: { display: isFreePlan ? '' : 'none' } }}
+      confirmText={t[
+        isFreePlan
+          ? 'com.affine.payment.member-limit.free.confirm'
+          : 'com.affine.payment.member-limit.pro.confirm'
+      ]()}
       confirmButtonOptions={{
         type: 'primary',
-        children:
-          t[
-            isFreePlan
-              ? 'com.affine.payment.member-limit.free.confirm'
-              : 'com.affine.payment.member-limit.pro.confirm'
-          ](),
       }}
       onConfirm={handleConfirm}
     ></ConfirmModal>

packages/frontend/component/src/ui/modal/confirm-modal.stories.tsx

@@ -22,9 +22,7 @@ export const UsingHook = () => {
   const showConfirm = () => {
     openConfirmModal({
       cancelText: 'Cancel',
-      confirmButtonOptions: {
+      confirmText: 'Confirm',
-        children: 'Confirm',
-      },
       title: 'Confirm Modal',
       children: 'Are you sure you want to confirm?',
       onConfirm,
@@ -43,9 +41,7 @@ export const AutoClose = () => {
   const onConfirm = () => {
     openConfirmModal({
       cancelText: 'Cancel',
-      confirmButtonOptions: {
+      confirmText: 'Confirm',
-        children: 'Confirm',
-      },
       title: 'Confirm Modal',
       children: 'Are you sure you want to confirm?',
       onConfirm: () => console.log('Confirmed'),

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -10,11 +10,12 @@ import { Modal } from './modal';
 import * as styles from './styles.css';
 
 export interface ConfirmModalProps extends ModalProps {
-  confirmButtonOptions?: ButtonProps;
+  confirmButtonOptions?: Omit<ButtonProps, 'children'>;
   onConfirm?: (() => void) | (() => Promise<void>);
   onCancel?: () => void;
-  cancelText?: string;
+  confirmText?: React.ReactNode;
-  cancelButtonOptions?: ButtonProps;
+  cancelText?: React.ReactNode;
+  cancelButtonOptions?: Omit<ButtonProps, 'children'>;
   reverseFooter?: boolean;
 }
 
@@ -22,6 +23,7 @@ export const ConfirmModal = ({
   children,
   confirmButtonOptions,
   // FIXME: we need i18n
+  confirmText,
   cancelText = 'Cancel',
   cancelButtonOptions,
   reverseFooter,
@@ -64,7 +66,9 @@ export const ConfirmModal = ({
             {cancelText}
           </Button>
         </DialogTrigger>
-        <Button onClick={onConfirmClick} {...confirmButtonOptions}></Button>
+        <Button onClick={onConfirmClick} {...confirmButtonOptions}>
+          {confirmText}
+        </Button>
       </div>
     </Modal>
   );

packages/frontend/component/src/ui/modal/modal.stories.tsx

@@ -58,10 +58,10 @@ const ConfirmModalTemplate: StoryFn<ConfirmModalProps> = () => {
         onConfirm={handleConfirm}
         title="Modal Title"
         description="Modal description"
+        confirmText="Confirm"
         confirmButtonOptions={{
           loading: loading,
           type: 'primary',
-          children: 'Confirm',
         }}
       >
         <Input placeholder="input someting" status={inputStatus} />

packages/frontend/core/src/components/admin-panel/admin-panel-header.tsx

@@ -39,8 +39,8 @@ export const AdminPanelHeader = ({
               title: 'Save Runtime Configurations ?',
               description:
                 'Are you sure you want to save the following changes?',
+              confirmText: 'Save',
               confirmButtonOptions: {
-                children: 'Save',
                 type: 'primary',
               },
               onConfirm: onConfirm,

packages/frontend/core/src/components/affine/auth/ai-login-required.tsx

@@ -25,8 +25,8 @@ export const AiLoginRequiredModal = () => {
           setOpen(false);
           openSignIn();
         },
+        confirmText: t['com.affine.ai.login-required.dialog-confirm'](),
         confirmButtonOptions: {
-          children: t['com.affine.ai.login-required.dialog-confirm'](),
           type: 'primary',
         },
         cancelText: t['com.affine.ai.login-required.dialog-cancel'](),

packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx

@@ -104,11 +104,11 @@ const NameWorkspaceContent = ({
       title={t['com.affine.nameWorkspace.title']()}
       description={t['com.affine.nameWorkspace.description']()}
       cancelText={t['com.affine.nameWorkspace.button.cancel']()}
+      confirmText={t['com.affine.nameWorkspace.button.create']()}
       confirmButtonOptions={{
         type: 'primary',
         disabled: !workspaceName || loading,
         ['data-testid' as string]: 'create-workspace-create-button',
-        children: t['com.affine.nameWorkspace.button.create'](),
       }}
       closeButtonOptions={{
         ['data-testid' as string]: 'create-workspace-close-button',

packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx

@@ -478,10 +478,10 @@ const PageHistoryManager = ({
         ['data-testid' as string]: 'confirm-restore-history-modal',
         style: { padding: '20px 26px' },
       },
+      confirmText: t['com.affine.history.confirm-restore-modal.restore'](),
       confirmButtonOptions: {
         type: 'primary',
         ['data-testid' as string]: 'confirm-restore-history-button',
-        children: t['com.affine.history.confirm-restore-modal.restore'](),
       },
       onConfirm: handleRestore,
     });

packages/frontend/core/src/components/affine/page-properties/confirm-delete-property-modal.tsx

@@ -44,13 +44,13 @@ export const ConfirmDeletePropertyModal = ({
           removed from count doc(s). This action cannot be undone.
         </Trans>
       }
+      confirmText={t['Confirm']()}
       onConfirm={onConfirm}
       cancelButtonOptions={{
         onClick: onCancel,
       }}
       confirmButtonOptions={{
         type: 'error',
-        children: t['Confirm'](),
       }}
     />
   );

packages/frontend/core/src/components/affine/quota-reached-modal/cloud-quota-modal.tsx

@@ -108,11 +108,11 @@ export const CloudQuotaModal = () => {
         hidden: !isFreePlanOwner,
       }}
       onConfirm={handleUpgradeConfirm}
+      confirmText={
+        isFreePlanOwner ? t['com.affine.payment.upgrade']() : t['Got it']()
+      }
       confirmButtonOptions={{
         type: 'primary',
-        children: isFreePlanOwner
-          ? t['com.affine.payment.upgrade']()
-          : t['Got it'](),
       }}
     />
   );

packages/frontend/core/src/components/affine/quota-reached-modal/local-quota-modal.tsx

@@ -35,9 +35,9 @@ export const LocalQuotaModal = () => {
         hidden: true,
       }}
       onConfirm={onConfirm}
+      confirmText={t['Got it']()}
       confirmButtonOptions={{
         type: 'primary',
-        children: t['Got it'](),
       }}
     />
   );

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/cancel.tsx

@@ -33,9 +33,9 @@ export const AICancel = ({ ...btnProps }: AICancelProps) => {
       description:
         t['com.affine.payment.ai.action.cancel.confirm.description'](),
       reverseFooter: true,
+      confirmText:
+        t['com.affine.payment.ai.action.cancel.confirm.confirm-text'](),
       confirmButtonOptions: {
-        children:
-          t['com.affine.payment.ai.action.cancel.confirm.confirm-text'](),
         type: 'default',
       },
       cancelText:

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/resume.tsx

@@ -38,9 +38,9 @@ export const AIResume = ({ ...btnProps }: AIResumeProps) => {
       title: t['com.affine.payment.ai.action.resume.confirm.title'](),
       description:
         t['com.affine.payment.ai.action.resume.confirm.description'](),
+      confirmText:
+        t['com.affine.payment.ai.action.resume.confirm.confirm-text'](),
       confirmButtonOptions: {
-        children:
-          t['com.affine.payment.ai.action.resume.confirm.confirm-text'](),
         type: 'primary',
       },
       cancelText:

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/modals.tsx

@@ -46,9 +46,9 @@ export const ConfirmLoadingModal = ({
     <ConfirmModal
       title={title}
       cancelText={cancelText}
+      confirmText={confirmText}
       confirmButtonOptions={{
         type: 'primary',
-        children: confirmText,
         loading,
       }}
       open={open}

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx

@@ -36,11 +36,11 @@ export const WorkspaceDeleteModal = ({
     <ConfirmModal
       title={`${t['com.affine.workspaceDelete.title']()}?`}
       cancelText={t['com.affine.workspaceDelete.button.cancel']()}
+      confirmText={t['com.affine.workspaceDelete.button.delete']()}
       confirmButtonOptions={{
         type: 'error',
         disabled: !allowDelete,
         ['data-testid' as string]: 'delete-workspace-confirm-button',
-        children: t['com.affine.workspaceDelete.button.delete'](),
       }}
       {...props}
     >

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/index.tsx

@@ -134,9 +134,9 @@ export const DeleteLeaveWorkspace = () => {
           onOpenChange={setShowLeave}
           title={`${t['com.affine.deleteLeaveWorkspace.leave']()}?`}
           description={t['com.affine.deleteLeaveWorkspace.leaveDescription']()}
+          confirmText={t['Leave']()}
           confirmButtonOptions={{
             type: 'warning',
-            children: t['Leave'](),
           }}
         />
       )}

packages/frontend/core/src/components/affine/sign-out-modal/index.tsx

@@ -10,7 +10,7 @@ type SignOutConfirmModalI18NKeys =
   | 'confirm';
 
 export const SignOutModal = ({ ...props }: ConfirmModalProps) => {
-  const { title, description, cancelText, confirmButtonOptions = {} } = props;
+  const { title, description, cancelText, confirmText } = props;
   const t = useI18n();
 
   const defaultTexts = useMemo(() => {
@@ -30,10 +30,10 @@ export const SignOutModal = ({ ...props }: ConfirmModalProps) => {
       title={title ?? defaultTexts.title}
       description={description ?? defaultTexts.description}
       cancelText={cancelText ?? defaultTexts.cancelText}
+      confirmText={confirmText ?? defaultTexts.children}
       confirmButtonOptions={{
         type: 'error',
         ['data-testid' as string]: 'confirm-sign-out-button',
-        children: confirmButtonOptions.children ?? defaultTexts.children,
       }}
       contentOptions={{
         ['data-testid' as string]: 'confirm-sign-out-modal',

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx

@@ -130,8 +130,8 @@ export function patchNotificationService(
           openConfirmModal({
             title: toReactNode(title),
             description: toReactNode(message),
+            confirmText,
             confirmButtonOptions: {
-              children: confirmText,
               type: 'primary',
             },
             cancelText,
@@ -173,13 +173,11 @@ export function patchNotificationService(
           openConfirmModal({
             title: toReactNode(title),
             description: description,
+            confirmText: confirmText ?? 'Confirm',
             confirmButtonOptions: {
-              children: confirmText ?? 'Confirm',
               type: 'primary',
             },
-            cancelButtonOptions: {
+            cancelText: cancelText ?? 'Cancel',
-              children: cancelText ?? 'Cancel',
-            },
             onConfirm: () => {
               resolve(value);
             },

packages/frontend/core/src/components/page-list/docs/page-list-header.tsx

@@ -123,9 +123,9 @@ export const CollectionPageListHeader = ({
         title: t['com.affine.collection.add-doc.confirm.title'](),
         description: t['com.affine.collection.add-doc.confirm.description'](),
         cancelText: t['Cancel'](),
+        confirmText: t['Confirm'](),
         confirmButtonOptions: {
           type: 'primary',
-          children: t['Confirm'](),
         },
         onConfirm: () => createAndAddDocument(createDocumentFn),
       });

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -269,9 +269,9 @@ export const TrashOperationCell = ({
       title: `${t['com.affine.trashOperation.deletePermanently']()}?`,
       description: t['com.affine.trashOperation.deleteDescription'](),
       cancelText: t['Cancel'](),
+      confirmText: t['com.affine.trashOperation.delete'](),
       confirmButtonOptions: {
         type: 'error',
-        children: t['com.affine.trashOperation.delete'](),
       },
       onConfirm: onPermanentlyDeletePage,
     });
@@ -384,9 +384,9 @@ export const CollectionOperationCell = ({
       title: t['com.affine.collection.add-doc.confirm.title'](),
       description: t['com.affine.collection.add-doc.confirm.description'](),
       cancelText: t['Cancel'](),
+      confirmText: t['Confirm'](),
       confirmButtonOptions: {
         type: 'primary',
-        children: t['Confirm'](),
       },
       onConfirm: createAndAddDocument,
     });

packages/frontend/core/src/components/page-list/operation-menu-items/move-to-trash.tsx

@@ -46,10 +46,10 @@ const MoveToTrashConfirm = ({
       title={title}
       description={description}
       cancelText={t['com.affine.confirmModal.button.cancel']()}
+      confirmText={t.Delete()}
       confirmButtonOptions={{
         ['data-testid' as string]: 'confirm-delete-page',
         type: 'error',
-        children: t.Delete(),
       }}
       {...confirmModalProps}
     />

packages/frontend/core/src/components/page-list/virtualized-trash-list.tsx

@@ -73,9 +73,9 @@ export const VirtualizedTrashList = () => {
       title: `${t['com.affine.trashOperation.deletePermanently']()}?`,
       description: t['com.affine.trashOperation.deleteDescription'](),
       cancelText: t['Cancel'](),
+      confirmText: t['com.affine.trashOperation.delete'](),
       confirmButtonOptions: {
         type: 'error',
-        children: t['com.affine.trashOperation.delete'](),
       },
       onConfirm: handleMultiDelete,
     });

packages/frontend/core/src/components/pure/trash-page-footer/index.tsx

@@ -79,9 +79,9 @@ export const TrashPageFooter = () => {
         title={t['com.affine.trashOperation.delete.title']()}
         cancelText={t['com.affine.confirmModal.button.cancel']()}
         description={t['com.affine.trashOperation.delete.description']()}
+        confirmText={t['com.affine.trashOperation.delete']()}
         confirmButtonOptions={{
           type: 'error',
-          children: t['com.affine.trashOperation.delete'](),
         }}
         open={open}
         onConfirm={onConfirmDelete}

packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx

@@ -129,9 +129,9 @@ export const CollectionSidebarNavItem = ({
       title: t['com.affine.collection.add-doc.confirm.title'](),
       description: t['com.affine.collection.add-doc.confirm.description'](),
       cancelText: t['Cancel'](),
+      confirmText: t['Confirm'](),
       confirmButtonOptions: {
         type: 'primary',
-        children: t['Confirm'](),
       },
       onConfirm: createAndAddDocument,
     });

packages/frontend/core/src/hooks/affine/use-enable-cloud.tsx

@@ -84,13 +84,13 @@ export const useEnableCloud = () => {
           title: t['Enable AFFiNE Cloud'](),
           description: t['Enable AFFiNE Cloud Description'](),
           cancelText: t['com.affine.enableAffineCloudModal.button.cancel'](),
+          confirmText:
+            loginStatus === 'authenticated'
+              ? t['Enable']()
+              : t['Sign in and Enable'](),
           confirmButtonOptions: {
             type: 'primary',
             ['data-testid' as string]: 'confirm-enable-affine-cloud-button',
-            children:
-              loginStatus === 'authenticated'
-                ? t['Enable']()
-                : t['Sign in and Enable'](),
           },
           onConfirm: async () =>
             await signInOrEnableCloud(ws, {

packages/frontend/core/src/modules/tag/view/delete-tag-modal.tsx

@@ -54,9 +54,9 @@ export const DeleteTagConfirmModal = ({
           })
         )
       }
+      confirmText={t['Delete']()}
       confirmButtonOptions={{
         type: 'warning',
-        children: t['Delete'](),
       }}
       onConfirm={handleDelete}
     />