@opensumi/ide-workspace-edit 2.21.13 → 2.22.0

package/src/browser/refactor-preview.service.tsx

@@ -0,0 +1,151 @@
+import { observable, action } from 'mobx';
+import React from 'react';
+
+import { Injector, Injectable, Autowired, INJECTOR_TOKEN } from '@opensumi/di';
+import { Deferred, localize, MessageType } from '@opensumi/ide-core-common';
+import { IMainLayoutService } from '@opensumi/ide-main-layout';
+import { IDialogService } from '@opensumi/ide-overlay';
+import { ResourceEdit } from '@opensumi/monaco-editor-core/esm/vs/editor/browser/services/bulkEditService';
+import type {
+  IWorkspaceFileEdit,
+  IWorkspaceTextEdit,
+} from '@opensumi/monaco-editor-core/esm/vs/editor/common/languages';
+
+import { RefactorPreview } from './refactor-preview';
+
+export const PreviewViewId = 'RefactorPreview';
+
+export interface IRefactorPreviewService {
+  edits: Array<IWorkspaceTextEdit | IWorkspaceFileEdit>;
+  selectedFileOrTextEdits: Set<IWorkspaceTextEdit | IWorkspaceFileEdit>;
+
+  previewEdits(edit: ResourceEdit[]): Promise<ResourceEdit[]>;
+
+  filterEdit(edit: IWorkspaceTextEdit | IWorkspaceFileEdit, checked: boolean): void;
+
+  applyEdits(): void;
+
+  clearAllEdits(): void;
+}
+
+export const IRefactorPreviewService = Symbol('IRefactorPreviewService');
+
+@Injectable()
+export class RefactorPreviewServiceImpl implements IRefactorPreviewService {
+  @observable.shallow
+  public edits: Array<IWorkspaceTextEdit | IWorkspaceFileEdit> = [];
+
+  public selectedFileOrTextEdits = observable.set<IWorkspaceTextEdit | IWorkspaceFileEdit>([], { deep: false });
+
+  @Autowired(IMainLayoutService)
+  protected readonly mainLayout: IMainLayoutService;
+
+  @Autowired(IDialogService)
+  protected readonly dialogService: IDialogService;
+
+  @Autowired(INJECTOR_TOKEN)
+  protected readonly injector: Injector;
+
+  private previewDeferred: Deferred<Array<IWorkspaceTextEdit | IWorkspaceFileEdit>> | null;
+
+  private clear() {
+    this.togglePreviewView(false);
+    this.edits = [];
+    this.previewDeferred = null;
+    this.selectedFileOrTextEdits.clear();
+  }
+
+  private registerRefactorPreviewView() {
+    const handler = this.mainLayout.getTabbarHandler(PreviewViewId);
+    if (handler) {
+      return;
+    }
+
+    this.mainLayout.collectTabbarComponent(
+      [
+        {
+          component: RefactorPreview,
+          id: PreviewViewId,
+        },
+      ],
+      {
+        title: localize('refactor-preview.title', 'REFACTOR PREVIEW'),
+        containerId: PreviewViewId,
+        hidden: true,
+      },
+      'bottom',
+    );
+  }
+
+  private togglePreviewView(show: boolean) {
+    const handler = this.mainLayout.getTabbarHandler(PreviewViewId);
+    if (show) {
+      handler?.show();
+      handler?.activate();
+    } else {
+      handler?.hide();
+      handler?.deactivate();
+    }
+  }
+
+  async previewEdits(edits: ResourceEdit[]): Promise<ResourceEdit[]> {
+    this.registerRefactorPreviewView();
+
+    if (this.previewDeferred) {
+      const continued = await this.dialogService.open(
+        <div>
+          {localize('refactor-preview.overlay.title')}
+          <p>{localize('refactor-preview.overlay.detail')}</p>
+        </div>,
+        MessageType.Warning,
+        [localize('refactor-preview.overlay.cancel'), localize('refactor-preview.overlay.continue')],
+      );
+
+      if (continued === localize('refactor-preview.overlay.cancel')) {
+        return [];
+      }
+    }
+
+    this.togglePreviewView(true);
+
+    this.edits = edits;
+    // 默认全选
+    edits.forEach((edit) => {
+      this.selectedFileOrTextEdits.add(edit);
+    });
+
+    this.previewDeferred = new Deferred();
+
+    return this.previewDeferred.promise;
+  }
+
+  @action
+  filterEdit(edit: IWorkspaceTextEdit | IWorkspaceFileEdit, checked: boolean) {
+    if (checked) {
+      this.selectedFileOrTextEdits.add(edit);
+    } else {
+      this.selectedFileOrTextEdits.delete(edit);
+    }
+  }
+
+  applyEdits(): void {
+    if (!this.previewDeferred) {
+      // it's can not be happened
+      return;
+    }
+
+    const candidate = this.edits.filter((edit: IWorkspaceTextEdit) => this.selectedFileOrTextEdits.has(edit));
+
+    this.previewDeferred.resolve(candidate);
+    this.clear();
+  }
+
+  clearAllEdits(): void {
+    if (!this.previewDeferred) {
+      return;
+    }
+
+    this.previewDeferred.resolve([]);
+    this.clear();
+  }
+}

package/src/browser/refactor-preview.tsx

@@ -0,0 +1,194 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { CheckBox } from '@opensumi/ide-components/lib/checkbox';
+import { RecycleList } from '@opensumi/ide-components/lib/recycle-list';
+import { ViewState } from '@opensumi/ide-core-browser/lib/layout';
+import { useInjectable } from '@opensumi/ide-core-browser/lib/react-hooks';
+import { LabelService } from '@opensumi/ide-core-browser/lib/services/label-service';
+import { URI, Uri, path } from '@opensumi/ide-core-common';
+import { localize } from '@opensumi/ide-core-common/lib/localize';
+import { IEditorDocumentModelService } from '@opensumi/ide-editor/lib/browser/doc-model/types';
+import { ITextModel } from '@opensumi/ide-monaco/lib/browser/monaco-api/types';
+import type {
+  ResourceFileEdit,
+  ResourceTextEdit,
+} from '@opensumi/monaco-editor-core/esm/vs/editor/browser/services/bulkEditService';
+import type { IRange } from '@opensumi/monaco-editor-core/esm/vs/editor/common/core/range';
+import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
+
+import { IRefactorPreviewService } from './refactor-preview.service';
+import styles from './refactor_preview.module.less';
+import { isResourceFileEdit } from './utils';
+
+interface IRefactorNodeProps {
+  data: ResourceTextEdit | ResourceFileEdit;
+  onClick: (item: ResourceTextEdit | ResourceFileEdit) => void;
+}
+
+interface ITextEditNodeProps {
+  data: ResourceTextEdit;
+  onClick: (item: ResourceTextEdit) => void;
+}
+
+interface IFileEditNodeProps {
+  data: ResourceFileEdit;
+  onClick: (item: ResourceFileEdit) => void;
+}
+
+/**
+ * @param range
+ * @param textModel
+ * @example
+ * ```ts
+ * const str = `import path from 'path'`;
+ *
+ * const {
+ *  leftPad,  // import * as
+ *  base,     // path
+ *  rightPad, // from 'path';
+ * } = splitLeftAndRightPadInTextModel(range\/** path range *\/, model);
+ * ```
+ */
+function splitLeftAndRightPadInTextModel(range: IRange, textModel: ITextModel) {
+  const lineContent = textModel.getLineContent(range.startLineNumber);
+  const base = textModel.getValueInRange(range);
+
+  const leftPadRange = new monaco.Range(range.startLineNumber, 0, range.startLineNumber, range.startColumn);
+  const rightPadRange = new monaco.Range(
+    range.endLineNumber,
+    range.startColumn + base.length,
+    range.endLineNumber,
+    lineContent.length + 1,
+  );
+
+  const leftPad = textModel.getValueInRange(leftPadRange);
+  const rightPad = textModel.getValueInRange(rightPadRange);
+
+  return {
+    leftPad,
+    rightPad,
+    base,
+  };
+}
+
+const ResourceIcon: React.FC<{ uri: Uri }> = (props) => {
+  const labelService = useInjectable<LabelService>(LabelService);
+  const iconClass = labelService.getIcon(URI.from(props.uri));
+  return <span className={`file-icon ${iconClass}`} />;
+};
+
+const TextEditNode = observer<ITextEditNodeProps>(({ data: item }) => {
+  const modelService = useInjectable<IEditorDocumentModelService>(IEditorDocumentModelService);
+  const refactorPreviewService = useInjectable<IRefactorPreviewService>(IRefactorPreviewService);
+
+  const renderTextEditDiff = () => {
+    const model = modelService.getModelReference(URI.from(item.resource));
+    if (!model) {
+      return <div className={styles.refactor_preview_node_wrapper}>{item.textEdit.text}</div>;
+    }
+
+    const textModel = model.instance.getMonacoModel();
+    const { leftPad, base, rightPad } = splitLeftAndRightPadInTextModel(item.textEdit.range, textModel);
+
+    return (
+      <div className={styles.refactor_preview_node_wrapper}>
+        {leftPad}
+        <span className={styles.refactor_preview_node_base}>{base}</span>
+        <span className={styles.refactor_preview_node_new}>{item.textEdit.text}</span>
+        {rightPad}
+      </div>
+    );
+  };
+
+  return (
+    <div className={styles.resource_node} data-workspace-edit-type='text'>
+      <CheckBox
+        checked={refactorPreviewService.selectedFileOrTextEdits.has(item)}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          refactorPreviewService.filterEdit(item, event.target.checked);
+        }}
+      />
+      <ResourceIcon uri={item.resource as unknown as Uri /* monaco#Uri */} />
+      {renderTextEditDiff()}
+      <span className={styles.resource_node_path}>{item.resource.path}</span>
+    </div>
+  );
+});
+
+function mapDescForFileEdit(edit: ResourceFileEdit) {
+  if (edit.newResource && edit.oldResource) {
+    // rename
+    return {
+      uri: edit.newResource,
+      desc: localize('refactor-preview.file.move'),
+    };
+  }
+  if (edit.newResource && !edit.oldResource) {
+    // create
+    return {
+      uri: edit.newResource,
+      desc: localize('refactor-preview.file.create'),
+    };
+  }
+  if (!edit.newResource && edit.oldResource) {
+    return {
+      uri: edit.oldResource,
+      desc: localize('refactor-preview.file.delete'),
+    };
+  }
+  return undefined;
+}
+
+const FileEditNode = observer<IFileEditNodeProps>(({ data: item }) => {
+  const refactorPreviewService = useInjectable<IRefactorPreviewService>(IRefactorPreviewService);
+
+  const editDesc = mapDescForFileEdit(item);
+  if (editDesc === undefined) {
+    return null;
+  }
+
+  const filename = path.basename(editDesc.uri.fsPath);
+  const dirname = path.dirname(editDesc.uri.fsPath);
+
+  return (
+    <div className={styles.resource_node} data-workspace-edit-type='file'>
+      <CheckBox
+        checked={refactorPreviewService.selectedFileOrTextEdits.has(item)}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          refactorPreviewService.filterEdit(item, event.target.checked);
+        }}
+      />
+      <ResourceIcon uri={editDesc.uri as unknown as Uri /* monaco#Uri */} />
+      <span className={styles.refactor_preview_node_wrapper}>{filename}</span>
+      <span className={styles.resource_node_path}>
+        {dirname} ({editDesc.desc})
+      </span>
+    </div>
+  );
+});
+
+const RefactorNode = observer<IRefactorNodeProps>(({ data, ...restProps }) => {
+  if (isResourceFileEdit(data)) {
+    return <FileEditNode data={data} {...restProps} />;
+  }
+  return <TextEditNode data={data} {...restProps} />;
+});
+
+export const RefactorPreview = observer(({ viewState }: React.PropsWithChildren<{ viewState: ViewState }>) => {
+  const refactorPreviewService = useInjectable<IRefactorPreviewService>(IRefactorPreviewService);
+
+  return (
+    <div>
+      {refactorPreviewService.edits.length > 0 && (
+        <RecycleList
+          itemHeight={23}
+          width={viewState.width}
+          height={viewState.height}
+          data={refactorPreviewService.edits}
+          template={RefactorNode}
+        />
+      )}
+    </div>
+  );
+});

package/src/browser/refactor_preview.module.less

@@ -0,0 +1,49 @@
+.refactor_preview {
+  display: flex;
+}
+
+.resource_node {
+  display: flex;
+  height: 23px;
+  line-height: 23px;
+  padding: 0px 10px;
+  cursor: pointer;
+
+  .resource_clickable {
+    display: flex;
+    height: 23px;
+    line-height: 23px;
+  }
+
+  &:hover {
+    background-color: var(--editor-selectionBackground);
+  }
+
+  .resource_node_path {
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--descriptionForeground);
+  }
+}
+
+.refactor_preview_node_wrapper {
+  display: inline-block;
+  padding: 0px;
+  margin: 0px 10px 0px 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  .refactor_preview_node_base {
+    height: 16px;
+    text-decoration: line-through;
+    background-color: var(--diffEditor-removedTextBackground);
+  }
+
+  .refactor_preview_node_new {
+    height: 16px;
+    background-color: var(--diffEditor-insertedTextBackground);
+  }
+}

package/src/browser/utils.ts

@@ -0,0 +1,16 @@
+import { isObject } from '@opensumi/ide-core-common';
+import type {
+  ResourceFileEdit,
+  ResourceTextEdit,
+} from '@opensumi/monaco-editor-core/esm/vs/editor/browser/services/bulkEditService';
+import { Uri } from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
+
+export function isResourceFileEdit(thing: any): thing is ResourceFileEdit {
+  return isObject(thing) && (Boolean(thing.newResource) || Boolean(thing.oldResource));
+}
+
+export function isResourceTextEdit(thing: any): thing is ResourceTextEdit {
+  // 重写的原因是因为直接用 monaco 存在 Uri.isUri 情况
+  // 我们的 Uri 并未 monaco 的 Uri 的 instance
+  return isObject(thing) && Uri.isUri(thing.resource) && isObject(thing.textEdit);
+}