feat: support MessageOptions.detail (#4135)

* feat: support MessageOptions.detail * feat: change the message open method to an object parameter * chore: optimized code * style: adjust the dialog-content font size --------- Co-authored-by: hacke2 <[email protected]>
opensumi · Nov 4, 2024 · c24cd87 · c24cd87 · opensumi · Nov 4, 2024
1 parent b47d8ed
commit c24cd87
Show file tree

Hide file tree

Showing 17 changed files with 116 additions and 92 deletions.
diff --git a/packages/components/src/dialog/index.tsx b/packages/components/src/dialog/index.tsx
@@ -24,6 +24,7 @@ export interface IDialogProps extends IOverlayProps {
   type?: ModalType;
   icon?: IconDesc;
   message: string | React.ReactNode;
+  detail?: string;
   buttons?: JSX.Element[] | JSX.Element;
   closable?: boolean;
   onOk?: () => void;
@@ -46,11 +47,11 @@ const DefaultButtons = ({ onCancel, onOk, cancelText, okText }) => (
 export const DialogContent: React.FC<IDialogProps> = ({
   onClose,
   closable,
+  type = 'confirm',
   messageType = MessageType.Info,
   icon,
   message,
   buttons,
-  type = 'confirm',
   title,
   onOk,
   onCancel,
@@ -69,8 +70,8 @@ export const DialogContent: React.FC<IDialogProps> = ({
           />
         )}
         <div className={'kt-dialog-content_area'}>
-          {type !== 'basic' && title && <p className={'kt-dialog-content_title'}>{title}</p>}
-          <span className={'kt-dialog-message'}>{message}</span>
+          <p className={'kt-dialog-content_title'}>{title}</p>
+          {message && <span className={'kt-dialog-message'}>{message}</span>}
         </div>
         {closable && type !== 'basic' && (
           <button className={cls('kt-dialog-closex', getIcon('close'))} onClick={onClose}></button>
@@ -97,6 +98,7 @@ export const Dialog: React.FC<IDialogProps> = ({
   messageType,
   icon,
   message,
+  detail,
   buttons,
   type = 'confirm',
   title,
@@ -123,6 +125,6 @@ export const Dialog: React.FC<IDialogProps> = ({
     afterClose={afterClose}
     {...restProps}
   >
-    <DialogContent message={message} buttons={buttons} visible={visible} {...restProps}></DialogContent>
+    <DialogContent title={message} message={detail} buttons={buttons} visible={visible} icon={icon} {...restProps} />
   </Overlay>
 );
diff --git a/packages/components/src/dialog/styles.less b/packages/components/src/dialog/styles.less
@@ -36,7 +36,7 @@
 
     .@{prefix}-dialog-content_title {
       line-height: 22px;
-      font-size: 14px;
+      font-size: 15px;
       margin: 0px 0px 8px 0px;
     }
   }

diff --git a/packages/editor/src/browser/fs-resource/fs-resource.ts b/packages/editor/src/browser/fs-resource/fs-resource.ts
@@ -234,11 +234,11 @@ export class FileSystemResourceProvider extends WithEventBus implements IResourc
       [localize('file.prompt.save', 'Save')]: AskSaveResult.SAVE,
       [localize('file.prompt.cancel', 'Cancel')]: AskSaveResult.CANCEL,
     };
-    const selection = await this.dialogService.open(
-      formatLocalize('saveChangesMessage', resource.name),
-      MessageType.Info,
-      Object.keys(buttons),
-    );
+    const selection = await this.dialogService.open({
+      message: formatLocalize('saveChangesMessage', resource.name),
+      type: MessageType.Info,
+      buttons: Object.keys(buttons),
+    });
     const result = buttons[selection!];
     return this.close(resource, result);
   }

diff --git a/packages/editor/src/browser/untitled-resource.ts b/packages/editor/src/browser/untitled-resource.ts
@@ -211,11 +211,11 @@ export class UntitledSchemeResourceProvider extends WithEventBus implements IRes
       [localize('file.prompt.save', 'Save')]: AskSaveResult.SAVE,
       [localize('file.prompt.cancel', 'Cancel')]: AskSaveResult.CANCEL,
     };
-    const selection = await this.dialogService.open(
-      formatLocalize('saveChangesMessage', resource.name),
-      MessageType.Info,
-      Object.keys(buttons),
-    );
+    const selection = await this.dialogService.open({
+      message: formatLocalize('saveChangesMessage', resource.name),
+      type: MessageType.Info,
+      buttons: Object.keys(buttons),
+    });
     return await this.close(resource, buttons[selection!]);
   }
 }
diff --git a/packages/editor/src/browser/workbench-editor.service.ts b/packages/editor/src/browser/workbench-editor.service.ts
@@ -563,11 +563,11 @@ export class WorkbenchEditorServiceImpl extends WithEventBus implements Workbenc
         filesDetail += formatLocalize('file.prompt.more.number', toClose.length - MAX_CONFIRM_RESOURCES);
       }
     }
-    const selection = await this.dialogService.open(
-      toMarkdown(formatLocalize('saveNFilesChangesMessage', toClose.length, filesDetail), this.openner),
-      MessageType.Info,
-      Object.keys(buttons),
-    );
+    const selection = await this.dialogService.open({
+      message: toMarkdown(formatLocalize('saveNFilesChangesMessage', toClose.length, filesDetail), this.openner),
+      type: MessageType.Info,
+      buttons: Object.keys(buttons),
+    });
     const result = buttons[selection!];
     if (result === AskSaveResult.SAVE) {
       await Promise.all(toClose.map((v) => this.resourceService.close?.(v.resource, AskSaveResult.SAVE)));

diff --git a/packages/extension/src/browser/vscode/api/main.thread.file-system-event.ts b/packages/extension/src/browser/vscode/api/main.thread.file-system-event.ts
@@ -199,7 +199,7 @@ export class MainThreadFileSystemEvent extends Disposable {
           localize('refactoring-changes.msg.skipChanges'),
         ];
         // edit#metadata.needsConfirmation#true --> show dialog
-        const answer = await this.dialogService.open(message, MessageType.Info, choices);
+        const answer = await this.dialogService.open({ message, type: MessageType.Info, buttons: choices });
         showPreview = 'show';
         if (answer === choices[1]) {
           // Skip changes
@@ -211,7 +211,7 @@ export class MainThreadFileSystemEvent extends Disposable {
           localize('refactoring-changes.msg.skipChanges'),
           localize('component.modal.okText'),
         ];
-        const answer = await this.dialogService.open(message, MessageType.Info, choices);
+        const answer = await this.dialogService.open({ message, type: MessageType.Info, buttons: choices });
         if (answer === choices[1]) {
           // Skip changes
           return;

diff --git a/packages/extension/src/browser/vscode/api/main.thread.message.ts b/packages/extension/src/browser/vscode/api/main.thread.message.ts
@@ -31,8 +31,8 @@ export class MainThreadMessage implements IMainThreadMessage {
     from,
   ): Promise<number | undefined> {
     const action = options.modal
-      ? await this.dialogService.open(message, type, actions)
-      : await this.messageService.open(message, type, actions, true, from);
+      ? await this.dialogService.open({ message, type, buttons: actions, options })
+      : await this.messageService.open({ message, type, buttons: actions, closable: true, from });
     return action ? actions.indexOf(action) : undefined;
   }
 }
diff --git a/packages/extension/src/hosted/api/vscode/ext.host.message.ts b/packages/extension/src/hosted/api/vscode/ext.host.message.ts
@@ -43,6 +43,10 @@ export class ExtHostMessage implements IExtHostMessage {
       } else {
         if ('modal' in optionsOrFirstItem) {
           options.modal = optionsOrFirstItem.modal;
+
+          if ('detail' in optionsOrFirstItem) {
+            options.detail = optionsOrFirstItem.detail;
+          }
         }
       }
     }

diff --git a/packages/file-tree-next/src/browser/dialog/window-dialog.service.tsx b/packages/file-tree-next/src/browser/dialog/window-dialog.service.tsx
@@ -130,14 +130,13 @@ export class WindowDialogServiceImpl implements IWindowDialogService {
       }
       await fileTreeDialogService.whenReady;
       const model = FileTreeDialogModel.createModel(this.injector, fileTreeDialogService);
-      const res = await this.dialogService.open<string[]>(
-        <FileDialog model={model} options={{ ...defaultOptions, ...options }} isOpenDialog={true} />,
-        MessageType.Empty,
-        [],
-        true,
-        undefined,
-        { className: styles.file_dialog_wrapper },
-      );
+      const res = await this.dialogService.open<string[]>({
+        message: <FileDialog model={model} options={{ ...defaultOptions, ...options }} isOpenDialog={true} />,
+        type: MessageType.Empty,
+        buttons: [],
+        closable: true,
+        props: { className: styles.file_dialog_wrapper },
+      });
       this.dialogService.reset();
       if (res && res.length > 0) {
         const files = res.map((r) => URI.file(r));
@@ -180,14 +179,13 @@ export class WindowDialogServiceImpl implements IWindowDialogService {
       }
       await fileTreeDialogService.whenReady;
       const model = FileTreeDialogModel.createModel(this.injector, fileTreeDialogService);
-      const res = await this.dialogService.open<string[]>(
-        <FileDialog model={model} options={options} isOpenDialog={false} />,
-        MessageType.Empty,
-        [],
-        true,
-        undefined,
-        { className: styles.file_dialog_wrapper },
-      );
+      const res = await this.dialogService.open<string[]>({
+        message: <FileDialog model={model} options={options} isOpenDialog={false} />,
+        type: MessageType.Empty,
+        buttons: [],
+        closable: true,
+        props: { className: styles.file_dialog_wrapper },
+      });
       this.dialogService.reset();
       if (res && res.length > 0) {
         const file = URI.file(res[0]);

diff --git a/packages/overlay/src/browser/dialog.service.ts b/packages/overlay/src/browser/dialog.service.ts
@@ -1,7 +1,7 @@
 import { Autowired, Injectable } from '@opensumi/di';
 import { Deferred, Emitter, MessageType } from '@opensumi/ide-core-common';
 
-import { AbstractMessageService, IDialogService, Icon } from '../common';
+import { AbstractMessageService, IDialogService, Icon, OpenMessageOptions } from '../common';
 
 import { DialogContextKey } from './dialog.contextkey';
 
@@ -18,6 +18,8 @@ export class DialogService extends AbstractMessageService implements IDialogServ
 
   protected message: string | React.ReactNode = '';
 
+  protected detail: string | undefined;
+
   protected title = '';
 
   public closable = true;
@@ -36,17 +38,18 @@ export class DialogService extends AbstractMessageService implements IDialogServ
     return this._visible;
   }
 
-  open<T = string>(
-    message: string | React.ReactNode,
-    type: MessageType,
-    buttons?: any[],
+  open<T = string>({
+    message,
+    type,
+    buttons,
+    options,
     closable = true,
-    _?: string,
-    props?: Record<string, any>,
-  ): Promise<T | undefined> {
+    props,
+  }: OpenMessageOptions): Promise<T | undefined> {
     this.deferred = new Deferred<string>();
     this.type = type;
     this.message = message;
+    this.detail = options?.detail;
     this._visible = true;
     this.closable = closable;
     this.props = props ?? {};
@@ -75,6 +78,10 @@ export class DialogService extends AbstractMessageService implements IDialogServ
     return this.message;
   }
 
+  getDetail(): string | undefined {
+    return this.detail;
+  }
+
   getType(): MessageType | undefined {
     return this.type;
   }

diff --git a/packages/overlay/src/browser/dialog.view.tsx b/packages/overlay/src/browser/dialog.view.tsx
@@ -9,6 +9,7 @@ export const Dialog: FC = () => {
   const dialogService = useInjectable<IDialogService>(IDialogService);
   const icon = dialogService.getIcon();
   const message = dialogService.getMessage();
+  const detail = dialogService.getDetail();
   const buttons = dialogService.getButtons();
   const type = dialogService.getType();
 
@@ -48,6 +49,7 @@ export const Dialog: FC = () => {
       closable={dialogService.closable ?? true}
       afterClose={afterClose}
       message={message}
+      detail={detail}
       type='confirm'
       messageType={type}
       icon={icon}

diff --git a/packages/overlay/src/browser/message.service.tsx b/packages/overlay/src/browser/message.service.tsx
@@ -6,7 +6,9 @@ import { parseWithoutEscape } from '@opensumi/ide-components/lib/utils';
 import { IOpenerService, toMarkdown } from '@opensumi/ide-core-browser';
 import { MayCancelablePromise, MessageType, localize, uuid } from '@opensumi/ide-core-common';
 
-import { AbstractMessageService, IMessageService, MAX_MESSAGE_LENGTH } from '../common';
+import { AbstractMessageService, IMessageService, MAX_MESSAGE_LENGTH, OpenMessageOptions } from '../common';
+
+import type vscode from 'vscode';
 
 @Injectable()
 export class MessageService extends AbstractMessageService implements IMessageService {
@@ -37,13 +39,13 @@ export class MessageService extends AbstractMessageService implements IMessageSe
    * @param closable true | false
    * @param from from extension
    */
-  open<T = string>(
-    rawMessage: string | React.ReactNode,
-    type: MessageType,
-    buttons?: string[],
+  open<T = string>({
+    type,
+    buttons,
+    from,
     closable = true,
-    from?: string,
-  ): MayCancelablePromise<T | undefined> {
+    message: rawMessage,
+  }: OpenMessageOptions): MayCancelablePromise<T | undefined> {
     if (!rawMessage) {
       return Promise.resolve(undefined);
     }

diff --git a/packages/overlay/src/common/index.ts b/packages/overlay/src/common/index.ts
@@ -2,8 +2,19 @@ import React from 'react';
 
 import { Event, MayCancelablePromise, MessageType, URI } from '@opensumi/ide-core-common';
 
+import type vscode from 'vscode';
+
 export const IMessageService = Symbol('IMessageService');
 
+export interface OpenMessageOptions {
+  message: string | React.ReactNode;
+  type: MessageType;
+  buttons?: any[];
+  options?: vscode.MessageOptions;
+  closable?: boolean;
+  from?: string;
+  props?: Record<string, any>;
+}
 export interface IMessageService {
   info(
     message: string | React.ReactNode,
@@ -23,14 +34,7 @@ export interface IMessageService {
     closable?: boolean,
     props?: Record<string, any>,
   ): MayCancelablePromise<string | undefined>;
-  open<T = string>(
-    message: string | React.ReactNode,
-    type: MessageType,
-    buttons?: string[],
-    closable?: boolean,
-    from?: string,
-    props?: Record<string, any>,
-  ): MayCancelablePromise<T | undefined>;
+  open<T = string>(options: OpenMessageOptions): MayCancelablePromise<T | undefined>;
   hide<T = string>(value?: T): void;
 }
 
@@ -47,6 +51,7 @@ export interface IDialogService extends IMessageService {
   visible: boolean;
   onDidDialogVisibleChange: Event<boolean>;
   getMessage(): string | React.ReactNode;
+  getDetail(): string | undefined;
   getIcon(): Icon | undefined;
   getButtons(): string[] | undefined;
   getType(): MessageType | undefined;
@@ -61,7 +66,7 @@ export abstract class AbstractMessageService implements IMessageService {
     closable?: boolean,
     props?: Record<string, any>,
   ): Promise<string | undefined> {
-    return this.open(message, MessageType.Info, buttons, closable, undefined, props);
+    return this.open({ message, type: MessageType.Info, buttons, closable, props });
   }
 
   warning(
@@ -70,7 +75,7 @@ export abstract class AbstractMessageService implements IMessageService {
     closable?: boolean,
     props?: Record<string, any>,
   ): Promise<string | undefined> {
-    return this.open(message, MessageType.Warning, buttons, closable, undefined, props);
+    return this.open({ message, type: MessageType.Warning, buttons, closable, props });
   }
 
   error(
@@ -79,16 +84,9 @@ export abstract class AbstractMessageService implements IMessageService {
     closable?: boolean,
     props?: Record<string, any>,
   ): Promise<string | undefined> {
-    return this.open(message, MessageType.Error, buttons, closable, undefined, props);
+    return this.open({ message, type: MessageType.Error, buttons, closable, props });
   }
-  abstract open<T = string>(
-    message: string | React.ReactNode,
-    type: MessageType,
-    buttons?: any[],
-    closable?: boolean,
-    from?: string,
-    props?: Record<string, any>,
-  ): Promise<T | undefined>;
+  abstract open<T = string>(options: OpenMessageOptions): Promise<T | undefined>;
   abstract hide<T = string>(value?: T): void;
 }
 

diff --git a/packages/search/src/browser/replace.ts b/packages/search/src/browser/replace.ts
@@ -27,16 +27,16 @@ export async function replaceAll(
       [localize('search.replace.buttonCancel')]: false,
       [localize('search.replace.buttonOK')]: true,
     };
-    const selection = await dialogService!.open(
-      formatLocalize(
+    const selection = await dialogService!.open({
+      message: formatLocalize(
         'search.removeAll.occurrences.files.confirmation.message',
         String(resultTotal.resultNum),
         String(resultTotal.fileNum),
         replaceText,
       ),
-      MessageType.Warning,
-      Object.keys(buttons),
-    );
+      type: MessageType.Warning,
+      buttons: Object.keys(buttons),
+    });
     if (!buttons[selection!]) {
       return buttons[selection!];
     }