refactor: replace DeprecatedRecycleTree on Search view (#2102)

* refactor: replace DeprecatedRecycleTree on Search view

* feat: support inline actions

* feat: support contextmenu

* chore: update search contextkey

* test: add search service test

* chore: fix node test

* chore: fix focus

* chore: fixe typo

Author: erha19

packages/components/src/recycle-tree/types/watcher.ts

@@ -110,7 +110,7 @@ export interface ITreeWatcher {
   // 监听watcheEvent事件，如节点移动，新建，删除
   onWatchEvent(path: string, callback: IWatcherCallback): IWatchTerminator;
   // 监听所有事件
-  on(event: TreeNodeEvent, callback: any);
+  on(event: TreeNodeEvent, callback: any): IDisposable;
 
   // 事件分发
 

packages/core-browser/src/common/common.command.ts

@@ -681,13 +681,6 @@ export namespace SEARCH_COMMANDS {
     category: CATEGORY,
   };
 
-  export const FOLD: Command = {
-    id: 'file-search.fold',
-    label: 'fold search',
-    iconClass: getIcon('collapse-all'),
-    category: CATEGORY,
-  };
-
   export const GET_RECENT_SEARCH_WORD: Command = {
     id: 'search.getRecentSearchWordCmd',
     category: CATEGORY,
@@ -733,6 +726,16 @@ export namespace SEARCH_COMMANDS {
     category: CATEGORY,
     label: '%file.copy.path%',
   };
+
+  export const REPLACE: Command = {
+    id: 'search.replace',
+    category: CATEGORY,
+  };
+
+  export const CLOSE: Command = {
+    id: 'search.close',
+    category: CATEGORY,
+  };
 }
 
 export namespace OUTLINE_COMMANDS {

packages/core-browser/src/contextkey/search.ts

@@ -0,0 +1,30 @@
+import { RawContextKey } from '../raw-context-key';
+
+// https://github.com/microsoft/vscode/blob/9318bcc5183dbbc49cea8843859cbdeb59b94eaf/src/vs/workbench/contrib/search/common/constants.ts
+export const SearchViewFocusedKey = new RawContextKey<boolean>('searchViewletFocus', false);
+export const SearchInputBoxFocusedKey = new RawContextKey<boolean>('searchInputBoxFocus', false);
+export const ReplaceInputBoxFocusedKey = new RawContextKey<boolean>('replaceInputBoxFocus', false);
+export const HasSearchResults = new RawContextKey<boolean>('hasSearchResult', false);
+
+// not impliments
+export const SearchViewVisibleKey = new RawContextKey<boolean>('searchViewletVisible', true);
+export const InputBoxFocusedKey = new RawContextKey<boolean>('inputBoxFocus', false);
+export const PatternIncludesFocusedKey = new RawContextKey<boolean>('patternIncludesInputBoxFocus', false);
+export const PatternExcludesFocusedKey = new RawContextKey<boolean>('patternExcludesInputBoxFocus', false);
+export const ReplaceActiveKey = new RawContextKey<boolean>('replaceActive', false);
+export const FirstMatchFocusKey = new RawContextKey<boolean>('firstMatchFocus', false);
+export const FileMatchOrMatchFocusKey = new RawContextKey<boolean>('fileMatchOrMatchFocus', false); // This is actually, Match or File or Folder
+export const FileMatchOrFolderMatchFocusKey = new RawContextKey<boolean>('fileMatchOrFolderMatchFocus', false);
+export const FileMatchOrFolderMatchWithResourceFocusKey = new RawContextKey<boolean>(
+  'fileMatchOrFolderMatchWithResourceFocus',
+  false,
+); // Excludes "Other files"
+export const FileFocusKey = new RawContextKey<boolean>('fileMatchFocus', false);
+export const FolderFocusKey = new RawContextKey<boolean>('folderMatchFocus', false);
+export const ResourceFolderFocusKey = new RawContextKey<boolean>('folderMatchWithResourceFocus', false);
+export const MatchFocusKey = new RawContextKey<boolean>('matchFocus', false);
+export const ViewHasSearchPatternKey = new RawContextKey<boolean>('viewHasSearchPattern', false);
+export const ViewHasReplacePatternKey = new RawContextKey<boolean>('viewHasReplacePattern', false);
+export const ViewHasFilePatternKey = new RawContextKey<boolean>('viewHasFilePattern', false);
+export const ViewHasSomeCollapsibleKey = new RawContextKey<boolean>('viewHasSomeCollapsibleResult', false);
+export const InTreeViewKey = new RawContextKey<boolean>('inTreeView', false);

packages/debug/src/browser/view/console/debug-console-tree.model.service.ts

@@ -235,18 +235,21 @@ export class DebugConsoleModelService {
 
   listenTreeViewChange() {
     this.disposeTreeModel();
+    if (!this.treeModel) {
+      return;
+    }
     this.treeModelDisposableCollection.push(
-      this.treeModel?.root.watcher.on(TreeNodeEvent.WillResolveChildren, (target) => {
+      this.treeModel.root.watcher.on(TreeNodeEvent.WillResolveChildren, (target) => {
         this.loadingDecoration.addTarget(target);
       }),
     );
     this.treeModelDisposableCollection.push(
-      this.treeModel?.root.watcher.on(TreeNodeEvent.DidResolveChildren, (target) => {
+      this.treeModel.root.watcher.on(TreeNodeEvent.DidResolveChildren, (target) => {
         this.loadingDecoration.removeTarget(target);
       }),
     );
     this.treeModelDisposableCollection.push(
-      this.treeModel!.onWillUpdate(() => {
+      this.treeModel.onWillUpdate(() => {
         // 更新树前更新下选中节点
         if (this.selectedNodes.length !== 0) {
           // 仅处理一下单选情况

packages/debug/src/browser/view/variables/debug-variables-tree.model.service.ts

@@ -239,18 +239,21 @@ export class DebugVariablesModelService {
 
   listenTreeViewChange() {
     this.dispose();
+    if (!this.treeModel) {
+      return;
+    }
     this.disposableCollection.push(
-      this.treeModel?.root.watcher.on(TreeNodeEvent.WillResolveChildren, (target) => {
+      this.treeModel.root.watcher.on(TreeNodeEvent.WillResolveChildren, (target) => {
         this.loadingDecoration.addTarget(target);
       }),
     );
     this.disposableCollection.push(
-      this.treeModel?.root.watcher.on(TreeNodeEvent.DidResolveChildren, (target) => {
+      this.treeModel.root.watcher.on(TreeNodeEvent.DidResolveChildren, (target) => {
         this.loadingDecoration.removeTarget(target);
       }),
     );
     this.disposableCollection.push(
-      this.treeModel!.onWillUpdate(() => {
+      this.treeModel.onWillUpdate(() => {
         // 更新树前更新下选中节点
         if (this.selectedNodes.length !== 0) {
           // 仅处理一下单选情况

packages/debug/src/browser/view/watch/debug-watch-tree.model.service.ts

@@ -212,18 +212,21 @@ export class DebugWatchModelService {
 
   listenTreeViewChange() {
     this.dispose();
+    if (!this.treeModel) {
+      return;
+    }
     this.disposableCollection.push(
-      this.treeModel?.root.watcher.on(TreeNodeEvent.WillResolveChildren, (target) => {
+      this.treeModel.root.watcher.on(TreeNodeEvent.WillResolveChildren, (target) => {
         this.loadingDecoration.addTarget(target);
       }),
     );
     this.disposableCollection.push(
-      this.treeModel?.root.watcher.on(TreeNodeEvent.DidResolveChildren, (target) => {
+      this.treeModel.root.watcher.on(TreeNodeEvent.DidResolveChildren, (target) => {
         this.loadingDecoration.removeTarget(target);
       }),
     );
     this.disposableCollection.push(
-      this.treeModel!.onWillUpdate(() => {
+      this.treeModel.onWillUpdate(() => {
         // 更新树前更新下选中节点
         if (this.selectedNodes.length !== 0) {
           // 仅处理一下单选情况

packages/file-tree-next/src/browser/file-tree.tsx

@@ -116,19 +116,16 @@ export const FileTree = ({ viewState }: PropsWithChildren<{ viewState: ViewState
     [],
   );
 
-  const handleItemDoubleClicked = useCallback(
-    (event: MouseEvent, item: File | Directory, type: TreeNodeType, activeUri?: URI) => {
-      // 阻止点击事件冒泡
-      event.stopPropagation();
+  const handleItemDoubleClicked = useCallback((event: MouseEvent, item: File | Directory, type: TreeNodeType) => {
+    // 阻止点击事件冒泡
+    event.stopPropagation();
 
-      const { handleItemDoubleClick } = fileTreeModelService;
-      if (!item) {
-        return;
-      }
-      handleItemDoubleClick(item, type, activeUri);
-    },
-    [],
-  );
+    const { handleItemDoubleClick } = fileTreeModelService;
+    if (!item) {
+      return;
+    }
+    handleItemDoubleClick(item, type);
+  }, []);
 
   const handleTwistierClick = useCallback((ev: MouseEvent, item: Directory) => {
     // 阻止点击事件冒泡

packages/file-tree-next/src/browser/services/file-tree-model.service.ts

@@ -30,11 +30,9 @@ import {
   Emitter,
   Deferred,
   CommandService,
-  IApplicationService,
   FILE_COMMANDS,
   path,
   IClipboardService,
-  AppConfig,
 } from '@opensumi/ide-core-browser';
 import { ResourceContextKey } from '@opensumi/ide-core-browser/lib/contextkey/resource';
 import { AbstractContextMenuService, MenuId, ICtxMenuRenderer } from '@opensumi/ide-core-browser/lib/menu/next';
@@ -860,7 +858,7 @@ export class FileTreeModelService {
     }
   };
 
-  handleItemDoubleClick = (item: File | Directory, type: TreeNodeType, activeUri?: URI) => {
+  handleItemDoubleClick = (item: File | Directory, type: TreeNodeType) => {
     // 双击事件触发前，会先触发 handleItemClick 方法装饰文件
     if (type === TreeNodeType.TreeNode) {
       // 双击的时候，不管 workbench.list.openMode 为单击还是双击，都以非预览模式打开文件

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

@@ -209,7 +209,7 @@ export const localizationBundle = {
     'search.includes.description': 'Enter the file name or folder name, multiple separated by ","',
     'search.excludes': 'Files to exclude',
     'search.excludes.default.enable': 'Enable default exclusions',
-    'search.replaceAll.label': 'Replace all',
+    'search.replaceAll.label': 'Replace All',
     'search.replace.label': 'Replace',
     'search.files.result': '{0} results found in {1} files',
     'search.CollapseDeepestExpandedLevelAction.label': 'Collapse All',
@@ -219,7 +219,7 @@ export const localizationBundle = {
     'search.removeAll.occurrences.files.confirmation.message': 'Are you sure to replace {0} of the {1} files',
     'search.removeAll.occurrences.file.confirmation.message': 'Are you sure to replace the {0} results in this file?',
     'search.result.hide': 'Hide',
-    'search.menu.copyAll': 'Copy all',
+    'search.menu.copyAll': 'Copy All',
     'search.help.showIncludeRule': 'View syntax rules',
     'search.help.supportRule': 'Support the following syntax rules:',
     'search.help.excludeList': 'Excluded items include:',

packages/outline/src/browser/services/outline-model.service.ts

@@ -93,8 +93,6 @@ export class OutlineModelService {
   // 选中态的节点
   private _selectedNodes: (OutlineCompositeTreeNode | OutlineTreeNode)[] = [];
 
-  private preContextMenuFocusedNode: OutlineCompositeTreeNode | OutlineTreeNode | null;
-
   private disposableCollection: DisposableCollection = new DisposableCollection();
 
   private onDidRefreshedEmitter: Emitter<void> = new Emitter();
@@ -354,11 +352,6 @@ export class OutlineModelService {
 
   // 清空其他选中/焦点态节点，更新当前焦点节点
   activeNodeDecoration = (target: OutlineCompositeTreeNode | OutlineTreeNode, dispatch = true) => {
-    if (this.preContextMenuFocusedNode) {
-      this.focusedDecoration.removeTarget(this.preContextMenuFocusedNode);
-      this.selectedDecoration.removeTarget(this.preContextMenuFocusedNode);
-      this.preContextMenuFocusedNode = null;
-    }
     if (target) {
       for (const target of this.selectedDecoration.appliedTargets.keys()) {
         this.selectedDecoration.removeTarget(target);
@@ -378,9 +371,6 @@ export class OutlineModelService {
 
   // 清空其他选中/焦点态节点，更新当前选中节点
   selectNodeDecoration = (target: OutlineCompositeTreeNode | OutlineTreeNode, dispatch = true) => {
-    if (this.preContextMenuFocusedNode) {
-      this.focusedDecoration.removeTarget(this.preContextMenuFocusedNode);
-    }
     if (target) {
       if (this.selectedNodes.length > 0) {
         this.selectedNodes.forEach((node) => {
@@ -407,16 +397,11 @@ export class OutlineModelService {
     if (this.focusedNode !== target) {
       if (removePreFocusedDecoration) {
         // 当存在上一次右键菜单激活的文件时，需要把焦点态的文件节点的装饰器全部移除
-        if (this.preContextMenuFocusedNode) {
-          this.focusedDecoration.removeTarget(this.preContextMenuFocusedNode);
-          this.selectedDecoration.removeTarget(this.preContextMenuFocusedNode);
-        } else if (this.focusedNode) {
+        if (this.focusedNode) {
           // 多选情况下第一次切换焦点文件
           this.focusedDecoration.removeTarget(this.focusedNode);
         }
-        this.preContextMenuFocusedNode = target;
       } else if (this.focusedNode) {
-        this.preContextMenuFocusedNode = null;
         this.focusedDecoration.removeTarget(this.focusedNode);
       }
       if (target) {