feat: show title head info & implement the apply actions (#2095)

* feat: implement title head & fix scroll & keep view state

* feat: implement apply action

* fix: time machine record

* docs: apply button i18n

* chore: improve code

Author: Ricbet

packages/core-browser/src/monaco/merge-editor-widget.ts

@@ -8,14 +8,20 @@ export interface IMergeEditorEditor extends IEditor {
   getResultEditor(): ICodeEditor;
   getTheirsEditor(): ICodeEditor;
   open(openMergeEditorArgs: IOpenMergeEditorArgs): Promise<void>;
-  compare(): Promise<void>;
 }
 
-export class MergeEditorInputData {
+export interface IMergeEditorInputData {
+  uri: URI;
+  title?: string;
+  detail?: string; // 分支名
+  description?: string; // commit
+}
+
+export class MergeEditorInputData implements IMergeEditorInputData {
   static from(data: string): MergeEditorInputData {
     try {
       const obj: MergeEditorInputData = JSON.parse(data);
-      return new MergeEditorInputData(obj.uri, obj.detail, obj.description);
+      return new MergeEditorInputData(obj.uri, obj.title, obj.detail, obj.description);
     } catch (error) {
       throw Error('invalid MergeEditorInputData parse');
     }
@@ -26,11 +32,26 @@ export class MergeEditorInputData {
     return this._textModel;
   }
 
-  constructor(readonly uri: URI, readonly detail?: string | undefined, readonly description?: string | undefined) {}
+  constructor(
+    readonly uri: URI,
+    readonly title?: string,
+    readonly detail?: string | undefined,
+    readonly description?: string | undefined,
+  ) {}
+
+  public getRaw(): IMergeEditorInputData {
+    return {
+      uri: this.uri,
+      title: this.title,
+      detail: this.detail,
+      description: this.description,
+    };
+  }
 
   public toString(): string {
     return JSON.stringify({
       uri: this.uri.toString(),
+      title: this.title,
       detail: this.detail,
       description: this.description,
     });
@@ -71,8 +92,14 @@ export namespace IRelaxedOpenMergeEditorArgs {
     const obj = args as IValidateOpenArgs;
     const ancestor = toUri(obj.ancestor);
     const output = toUri(obj.output);
-    const input1 = toInputData(obj.input1);
-    const input2 = toInputData(obj.input2);
+    const input1 = toInputData({
+      ...obj.input1,
+      title: obj.input1.title ?? 'Current',
+    });
+    const input2 = toInputData({
+      ...obj.input2,
+      title: obj.input2.title ?? 'Incoming',
+    });
     return { ancestor, input1, input2, output };
   };
 
@@ -89,21 +116,22 @@ export namespace IRelaxedOpenMergeEditorArgs {
 
   const toInputData = (args: unknown): MergeEditorInputData => {
     if (typeof args === 'string') {
-      return new MergeEditorInputData(URI.parse(args), undefined, undefined);
+      return new MergeEditorInputData(URI.parse(args));
     }
     if (!args || typeof args !== 'object') {
       throw new TypeError('invalid argument');
     }
 
     if (isUriComponents(args)) {
-      return new MergeEditorInputData(URI.from(args), undefined, undefined);
+      return new MergeEditorInputData(URI.from(args));
     }
 
     const obj = args as MergeEditorInputData;
     const uri = toUri(obj.uri);
+    const title = obj.title;
     const detail = obj.detail;
     const description = obj.description;
-    return new MergeEditorInputData(uri, detail, description);
+    return new MergeEditorInputData(uri, title, detail, description);
   };
 
   const toUri = (args: unknown): URI => {

packages/i18n/src/common/en-US.lang.ts

@@ -1014,6 +1014,11 @@ export const localizationBundle = {
 
     // #region merge editor
     'mergeEditor.workbench.tab.name': 'Merging: {0}',
+    'mergeEditor.conflict.action.apply.confirm.title':
+      'The file has unresolved conflicts or changes, whether to apply and save the changes?',
+    'mergeEditor.conflict.action.apply.confirm.continue': 'Continue Merge',
+    'mergeEditor.conflict.action.apply.confirm.complete': 'Apply Changes',
+    'mergeEditor.button.apply': 'Apply',
     // #endregion merge editor
     ...browserViews,
   },

packages/i18n/src/common/zh-CN.lang.ts

@@ -1056,6 +1056,10 @@ export const localizationBundle = {
 
     // #region merge editor
     'mergeEditor.workbench.tab.name': '正在合并: {0}',
+    'mergeEditor.conflict.action.apply.confirm.title': '当前文件还有未处理的冲突或变更，是否应用并保存更改？',
+    'mergeEditor.conflict.action.apply.confirm.continue': '继续合并',
+    'mergeEditor.conflict.action.apply.confirm.complete': '确认保存并更改',
+    'mergeEditor.button.apply': '应用更改',
     // #endregion merge editor
     ...browserViews,
   },

packages/monaco/package.json

@@ -20,6 +20,7 @@
   "devDependencies": {
     "@opensumi/ide-dev-tool": "^1.3.1",
     "@opensumi/ide-file-service": "2.21.8",
+    "@opensumi/ide-overlay": "2.21.8",
     "@opensumi/ide-theme": "2.21.8",
     "@opensumi/ide-workspace": "2.21.8"
   }

packages/monaco/src/browser/contrib/merge-editor/mapping-manager.service.ts

@@ -100,6 +100,11 @@ export class MappingManagerService extends Disposable {
     this.revokeActionsFactory(EDiffRangeTurn.MODIFIED)(oppositeRange);
   }
 
+  public clearMapping(): void {
+    this.documentMappingTurnLeft.clear();
+    this.documentMappingTurnRight.clear();
+  }
+
   /**
    * 分别找出离目标 lineRange 最近的 documentMappingTurnLeft 和 documentMappingTurnRight 里的 lineRange
    * 其中 target 只能是 result view 视图中的 range

packages/monaco/src/browser/contrib/merge-editor/merge-editor-widget.tsx

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import { Injectable, Autowired } from '@opensumi/di';
 import { AppConfig, ConfigProvider } from '@opensumi/ide-core-browser';
 import { IMergeEditorEditor, IOpenMergeEditorArgs } from '@opensumi/ide-core-browser/lib/monaco/merge-editor-widget';
-import { Disposable, IRange, ISelection } from '@opensumi/ide-core-common';
+import { Disposable, IRange, ISelection, URI } from '@opensumi/ide-core-common';
 import { Selection } from '@opensumi/monaco-editor-core';
 import { IDisposable } from '@opensumi/monaco-editor-core/esm/vs/base/common/lifecycle';
 import { IDimension } from '@opensumi/monaco-editor-core/esm/vs/editor/common/core/dimension';
@@ -21,6 +21,7 @@ import { ICodeEditor, IDiffEditorOptions, IEditorOptions, IModelDeltaDecoration
 import { IPosition, Position } from '../../monaco-api/types';
 
 import { MergeEditorService } from './merge-editor.service';
+import { EditorViewType, IMergeEditorViewState } from './types';
 import { Grid } from './view/grid';
 
 export interface IMergeEditorModel {
@@ -43,6 +44,8 @@ export class MergeEditorWidget extends Disposable implements IMergeEditorEditor
   private readonly mergeEditorService: MergeEditorService;
 
   private readonly _id: number;
+  private readonly viewStateMap: Map<string, IMergeEditorViewState> = new Map();
+  private outputUri: URI | undefined;
 
   constructor(
     private readonly rootHtmlElement: HTMLElement,
@@ -56,23 +59,35 @@ export class MergeEditorWidget extends Disposable implements IMergeEditorEditor
     this.layout();
   }
 
-  open({ ancestor, input1, input2 }: IOpenMergeEditorArgs): Promise<void> {
+  async open(args: IOpenMergeEditorArgs): Promise<void> {
+    const { ancestor, input1, input2, output } = args;
+    this.mergeEditorService.setNutritionAndLaunch(args);
+
+    // 保存上一次状态
+    this.saveViewState(this.outputUri);
+
+    this.outputUri = output.uri;
+    const uniqueKey = this.outputUri.toString();
+
     this.setModel({
       ours: input1.textModel as ITextModel,
       result: ancestor.textModel as ITextModel,
       theirs: input2.textModel as ITextModel,
     });
 
-    this.compare();
+    if (this.viewStateMap.has(uniqueKey)) {
+      const state = this.viewStateMap.get(uniqueKey)!;
+      this.restoreViewState(state);
+      const { turnLeft, turnRight } = state;
+      await this.mergeEditorService.compare(turnLeft, turnRight);
+    } else {
+      await this.mergeEditorService.compare();
+    }
 
-    this.mergeEditorService.updateOptions(this.options);
+    this.updateOptions(this.options);
     return Promise.resolve();
   }
 
-  compare(): Promise<void> {
-    return this.mergeEditorService.compare();
-  }
-
   getOursEditor(): ICodeEditor {
     return this.mergeEditorService.getCurrentEditor()!;
   }
@@ -101,7 +116,9 @@ export class MergeEditorWidget extends Disposable implements IMergeEditorEditor
     return 'MERGE_EDITOR_DIFF';
   }
 
-  updateOptions(newOptions: IEditorOptions): void {}
+  updateOptions(newOptions: IEditorOptions): void {
+    this.mergeEditorService.updateOptions(newOptions);
+  }
 
   onVisible(): void {}
 
@@ -126,11 +143,33 @@ export class MergeEditorWidget extends Disposable implements IMergeEditorEditor
     return [];
   }
 
-  saveViewState(): IEditorViewState | null {
+  saveViewState(uri?: URI): IEditorViewState | null {
+    if (!uri) {
+      return null;
+    }
+
+    const key = uri.toString();
+    this.viewStateMap.set(key, {
+      [EditorViewType.CURRENT]: this.getOursEditor().saveViewState(),
+      [EditorViewType.RESULT]: this.getResultEditor().saveViewState(),
+      [EditorViewType.INCOMING]: this.getTheirsEditor().saveViewState(),
+      turnLeft: this.mergeEditorService.getTurnLeftRangeMapping(),
+      turnRight: this.mergeEditorService.getTurnRightRangeMapping(),
+    });
     return null;
   }
 
-  restoreViewState(state: IEditorViewState | null): void {}
+  restoreViewState(state: IMergeEditorViewState | IEditorViewState | null): void {
+    const {
+      [EditorViewType.CURRENT]: current,
+      [EditorViewType.RESULT]: result,
+      [EditorViewType.INCOMING]: incoming,
+    } = state as IMergeEditorViewState;
+
+    this.getOursEditor().restoreViewState(current);
+    this.getResultEditor().restoreViewState(result);
+    this.getTheirsEditor().restoreViewState(incoming);
+  }
 
   getVisibleColumnFromPosition(position: IPosition): number {
     return 1;