feat: the tree in Problems panel supports onSelect event (#712)

Author: kiwiwong

src/controller/__tests__/problems.test.ts

@@ -1,4 +1,4 @@
-import { Float } from 'mo/model';
+import { Float, IProblemsTreeNode } from 'mo/model';
 import { MonacoService } from 'mo/monaco/monacoService';
 import {
     PanelService,
@@ -10,6 +10,7 @@ import { constants, modules } from 'mo/services/builtinService/const';
 import 'reflect-metadata';
 import { container } from 'tsyringe';
 import { ProblemsController } from '../problems';
+import { expectFnCalled } from '@test/utils';
 
 const problemsController = container.resolve(ProblemsController);
 const panelService = container.resolve(PanelService);
@@ -88,4 +89,11 @@ describe('The problems controller', () => {
         );
         monacoService.commandService.executeCommand = original;
     });
+
+    test('Should support to execute onSelect', () => {
+        expectFnCalled((fn) => {
+            problemsService.onSelect(fn);
+            problemsController.onSelect({} as IProblemsTreeNode);
+        });
+    });
 });

src/controller/problems.tsx

@@ -1,6 +1,11 @@
 import 'reflect-metadata';
 import React from 'react';
-import { Float, IStatusBarItem } from 'mo/model';
+import {
+    Float,
+    IStatusBarItem,
+    ProblemsEvent,
+    IProblemsTreeNode,
+} from 'mo/model';
 import { Controller } from 'mo/react/controller';
 import {
     IPanelService,
@@ -20,6 +25,7 @@ import { ProblemsPaneView, ProblemsStatusBarView } from 'mo/workbench/problems';
 import { connect } from 'mo/react';
 export interface IProblemsController extends Partial<Controller> {
     onClick?: (e: React.MouseEvent, item: IStatusBarItem) => void;
+    onSelect?: (node: IProblemsTreeNode) => void;
 }
 @singleton()
 export class ProblemsController
@@ -82,7 +88,9 @@ export class ProblemsController
                 ProblemsPaneView
             );
             const problemsPanel = builtInPanelProblems;
-            problemsPanel.renderPane = () => <ProblemsView />;
+            problemsPanel.renderPane = () => (
+                <ProblemsView onSelect={this.onSelect} />
+            );
 
             this.panelService.add(problemsPanel);
             this.panelService.setActive(problemsPanel.id);
@@ -96,4 +104,8 @@ export class ProblemsController
             name: PROBLEM_MODEL_NAME,
         });
     }
+
+    public onSelect = (node: IProblemsTreeNode) => {
+        this.emit(ProblemsEvent.onSelect, node);
+    };
 }

src/model/problems.tsx

@@ -7,6 +7,11 @@ export enum MarkerSeverity {
     Warning = 4,
     Error = 8,
 }
+
+export enum ProblemsEvent {
+    onSelect = 'problems.onSelect',
+}
+
 export interface IRelatedInformation {
     code: string;
     message: string;
@@ -21,11 +26,17 @@ export interface IProblemsItem<T = any> extends ITreeNodeItemProps {
     children: IProblemsItem[];
 }
 
+export interface IProblemsTreeNode<T = any> extends ITreeNodeItemProps {
+    value?: IRelatedInformation;
+    children?: IProblemsTreeNode[];
+}
+
 export interface IProblems<T = any> {
     id: UniqueId;
     name: string;
     data: IProblemsItem<T>[];
     show?: boolean;
+    onSelect?: (node: IProblemsTreeNode) => void;
 }
 
 export class ProblemsModel<T> implements IProblems<T> {

src/services/problemsService.ts

@@ -4,6 +4,8 @@ import {
     IProblemsItem,
     ProblemsModel,
     MarkerSeverity,
+    IProblemsTreeNode,
+    ProblemsEvent,
 } from 'mo/model/problems';
 import { IStatusBarItem } from 'mo/model/workbench/statusBar';
 import {
@@ -42,6 +44,11 @@ export interface IProblemsService extends Component<IProblems> {
      * Toggle the Problems view between display or hidden
      */
     toggleProblems(): void;
+    /**
+     * Listen to select a problem tree node
+     * @param callback
+     */
+    onSelect(callback: (node: IProblemsTreeNode) => void): void;
 }
 
 @singleton()
@@ -147,6 +154,10 @@ export class ProblemsService
         }
     }
 
+    public onSelect(callback: (node: IProblemsTreeNode) => void) {
+        this.subscribe(ProblemsEvent.onSelect, callback);
+    }
+
     private updateStatusBar<T>(): void {
         const { data = [] } = this.state;
         const markersData = this.getProblemsMarkers(data);

src/workbench/problems/paneView/index.tsx

@@ -13,7 +13,7 @@ const treeLeafClassName = getBEMElement(treeClassName, 'treeLeaf');
 const treeLeafSubInfoClassName = getBEMElement(treeLeafClassName, 'subInfo');
 
 function ProblemsPaneView(props: IProblems) {
-    const { data } = props;
+    const { data, onSelect } = props;
     if (!data?.length) {
         return (
             <div style={{ margin: '0 18px', userSelect: 'none' }}>
@@ -70,6 +70,7 @@ function ProblemsPaneView(props: IProblems) {
                             </span>
                         );
                     }}
+                    onSelect={onSelect}
                 />
             </div>
         </Scrollable>