feat: extension treeview support decorations

packages/extension/src/browser/components/extension-tree-view-node.tsx

@@ -6,6 +6,9 @@ import { Loading } from '@opensumi/ide-components';
 import { getIcon } from '@opensumi/ide-core-browser';
 import { TitleActionList } from '@opensumi/ide-core-browser/lib/components/actions';
 import { MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
+import { useInjectable } from '@opensumi/ide-core-browser/lib/react-hooks/injectable-hooks';
+import { IDecorationsService } from '@opensumi/ide-decoration/lib/common/decorations';
+import { IThemeService } from '@opensumi/ide-theme/lib/common/theme.service';
 
 import styles from '../vscode/api/tree-view/tree-view-node.module.less';
 import { ExtensionTreeNode, ExtensionCompositeTreeNode } from '../vscode/api/tree-view/tree-view.node.defined';
@@ -27,6 +30,7 @@ export interface ITreeViewNodeProps {
     item: ExtensionTreeNode | ExtensionCompositeTreeNode,
     type: TreeNodeType,
   ) => void;
+  decorationService: IDecorationsService;
 }
 
 export type TreeViewNodeRenderedProps = ITreeViewNodeProps & INodeRendererProps;
@@ -41,7 +45,23 @@ export const TreeViewNode: React.FC<TreeViewNodeRenderedProps> = ({
   decorations,
   defaultLeftPadding = 8,
   treeViewId,
+  decorationService,
 }: TreeViewNodeRenderedProps) => {
+  const [decoration, setDecoration] = React.useState(item.uri && decorationService.getDecoration(item.uri, false));
+
+  React.useEffect(() => {
+    const disposable = decorationService.onDidChangeDecorations((e) => {
+      if (item.uri && e.affectsResource(item.uri)) {
+        setDecoration(decorationService.getDecoration(item.uri, false));
+      }
+    });
+    return () => {
+      disposable.dispose();
+    };
+  }, []);
+
+  const themeService = useInjectable<IThemeService>(IThemeService);
+
   const handleClick = (ev: React.MouseEvent) => {
     if (itemType === TreeNodeType.TreeNode || itemType === TreeNodeType.CompositeTreeNode) {
       onClick(ev, item, itemType);
@@ -173,6 +193,21 @@ export const TreeViewNode: React.FC<TreeViewNodeRenderedProps> = ({
     </div>
   );
 
+  const renderDecos = () => {
+    if (!decoration) {
+      return null;
+    }
+
+    const badge = decoration.badge || '';
+    const kolor = decoration.color;
+    const color = kolor && themeService.getColor({ id: kolor });
+    return (
+      <div className={styles.tree_view_node_tail} style={{ color }}>
+        {badge.slice()}
+      </div>
+    );
+  };
+
   return (
     <div
       key={item.id}
@@ -192,6 +227,7 @@ export const TreeViewNode: React.FC<TreeViewNodeRenderedProps> = ({
           {renderDescription(item)}
         </div>
         {renderStatusTail()}
+        {renderDecos()}
       </div>
     </div>
   );

packages/extension/src/browser/components/extension-tree-view.tsx

@@ -6,6 +6,7 @@ import { RecycleTree, INodeRendererProps, IRecycleTreeHandle, TreeNodeType } fro
 import { ViewState } from '@opensumi/ide-core-browser';
 import { isOSX, useInjectable } from '@opensumi/ide-core-browser';
 import { ProgressBar } from '@opensumi/ide-core-browser/lib/components/progressbar';
+import { IDecorationsService } from '@opensumi/ide-decoration';
 import { WelcomeView } from '@opensumi/ide-main-layout/lib/browser/welcome.view';
 import { IMainLayoutService } from '@opensumi/ide-main-layout/lib/common/main-layout.definition';
 
@@ -29,6 +30,7 @@ export const ExtensionTabBarTreeView = observer(
     const [isReady, setIsReady] = React.useState<boolean>(false);
     const [isEmpty, setIsEmpty] = React.useState(dataProvider.isTreeEmpty);
     const layoutService = useInjectable<IMainLayoutService>(IMainLayoutService);
+    const decorationService = useInjectable<IDecorationsService>(IDecorationsService);
     const accordionService = React.useMemo(() => layoutService.getViewAccordionService(treeViewId), []);
 
     const isVisible = React.useMemo(() => {
@@ -175,6 +177,7 @@ export const ExtensionTabBarTreeView = observer(
           handlerContextMenu={handlerContextMenu}
           treeViewId={treeViewId}
           model={model}
+          decorationService={decorationService}
         />
       </div>
     );
@@ -195,6 +198,7 @@ interface TreeViewProps {
   ): void;
   handleTwistierClick(ev: React.MouseEvent, item: ExtensionCompositeTreeNode): void;
   handlerContextMenu(ev: React.MouseEvent, node: ExtensionTreeNode | ExtensionCompositeTreeNode): void;
+  decorationService: IDecorationsService;
 }
 
 function isTreeViewPropsEqual(prevProps: TreeViewProps, nextProps: TreeViewProps) {
@@ -218,6 +222,7 @@ const TreeView = React.memo(
     handleItemClicked,
     handleTwistierClick,
     handlerContextMenu,
+    decorationService,
   }: TreeViewProps) => {
     const renderTreeNode = React.useCallback(
       (props: INodeRendererProps) => (
@@ -231,6 +236,7 @@ const TreeView = React.memo(
           defaultLeftPadding={8}
           leftPadding={8}
           treeViewId={treeViewId}
+          decorationService={decorationService}
         />
       ),
       [model.treeModel],

packages/extension/src/browser/vscode/api/main.thread.treeview.ts

@@ -364,6 +364,7 @@ export class TreeViewDataProvider extends Tree {
       actions,
       item.accessibilityInformation,
       expanded,
+      item.resourceUri,
     );
     return node;
   }
@@ -384,6 +385,7 @@ export class TreeViewDataProvider extends Tree {
       item.id,
       actions,
       item.accessibilityInformation,
+      item.resourceUri,
     );
     return node;
   }

packages/extension/src/browser/vscode/api/tree-view/tree-view.node.defined.ts

@@ -1,6 +1,6 @@
 import { TreeNode, CompositeTreeNode, ITree } from '@opensumi/ide-components';
 import { MenuNode } from '@opensumi/ide-core-browser/lib/menu/next';
-import { IAccessibilityInformation, isObject, isString } from '@opensumi/ide-core-common';
+import { IAccessibilityInformation, isObject, isString, Uri, UriComponents } from '@opensumi/ide-core-common';
 
 import { ITreeItemLabel } from '../../../../common/vscode';
 import { ICommand } from '../../../../common/vscode/models';
@@ -45,6 +45,7 @@ export class ExtensionCompositeTreeNode extends CompositeTreeNode {
   private _command?: ICommand;
   private _tooltip?: string;
   private _resolved = false;
+  private sourceUri?: UriComponents;
 
   constructor(
     tree: TreeViewDataProvider,
@@ -59,9 +60,11 @@ export class ExtensionCompositeTreeNode extends CompositeTreeNode {
     public actions: MenuNode[],
     private _accessibilityInformation?: IAccessibilityInformation,
     expanded?: boolean,
+    sourceUri?: UriComponents,
   ) {
     super(tree, parent, undefined, { name: treeItemId });
     this.isExpanded = expanded || false;
+    this.sourceUri = sourceUri;
     this._command = command;
     this._tooltip = tooltip;
     if (isString(label)) {
@@ -100,6 +103,10 @@ export class ExtensionCompositeTreeNode extends CompositeTreeNode {
     return this._strikethrough;
   }
 
+  get uri(): Uri | undefined {
+    return this.sourceUri && Uri.from(this.sourceUri);
+  }
+
   get highlights() {
     return this._hightlights;
   }
@@ -140,6 +147,7 @@ export class ExtensionTreeNode extends TreeNode {
     public treeItemId: string = '',
     public actions: MenuNode[],
     private _accessibilityInformation?: IAccessibilityInformation,
+    private sourceUri?: UriComponents,
   ) {
     super(tree as ITree, parent, undefined, { name: treeItemId });
     if (isString(label)) {
@@ -159,6 +167,10 @@ export class ExtensionTreeNode extends TreeNode {
     return this._command;
   }
 
+  get uri(): Uri | undefined {
+    return this.sourceUri && Uri.from(this.sourceUri);
+  }
+
   get tooltip() {
     return this._tooltip;
   }