Add decoration provider for decorating treeView items with modified status (#1035)

## Changes

![image](https://github.com/databricks/databricks-vscode/assets/88345179/867554b0-270a-4f6a-b5a1-70ffc56cf70b)
## Tests
<!-- How is this tested? -->

Author: kartikgupta-db

packages/databricks-vscode/src/configuration/ui/ClusterComponent.ts

@@ -10,7 +10,7 @@ import {
 import {ConfigurationTreeItem} from "./types";
 import {Cluster} from "../../sdk-extensions";
 import {onError} from "../../utils/onErrorDecorator";
-import {LabelUtils} from "../../ui/bundle-resource-explorer/utils";
+import {DecorationUtils} from "../../ui/bundle-resource-explorer/utils";
 
 const TREE_ICON_ID = "CLUSTER";
 function getContextValue(key: string) {
@@ -120,13 +120,17 @@ export class ClusterComponent extends BaseComponent {
         const url = await cluster.url;
         return [
             {
-                label: url
-                    ? "Cluster"
-                    : LabelUtils.addModifiedTag("Cluster", "created"),
+                label: "Cluster",
                 tooltip: url ? undefined : "Created after deploy",
                 description: cluster.name,
                 collapsibleState: TreeItemCollapsibleState.Expanded,
                 contextValue: url ? `${contextValue}.has-url` : contextValue,
+                resourceUri: url
+                    ? undefined
+                    : DecorationUtils.getModifiedStatusDecoration(
+                          TREE_ICON_ID,
+                          "created"
+                      ),
                 iconPath: icon,
                 id: TREE_ICON_ID,
                 url,

packages/databricks-vscode/src/configuration/ui/SyncDestinationComponent.ts

@@ -5,7 +5,7 @@ import {ConnectionManager} from "../ConnectionManager";
 import {BaseComponent} from "./BaseComponent";
 import {ConfigurationTreeItem} from "./types";
 import {TreeItemCollapsibleState, ThemeIcon, ThemeColor} from "vscode";
-import {LabelUtils} from "../../ui/bundle-resource-explorer/utils";
+import {DecorationUtils} from "../../ui/bundle-resource-explorer/utils";
 
 const TREE_ICON_ID = "WORKSPACE";
 function getContextValue(key: string) {
@@ -101,14 +101,18 @@ export class SyncDestinationComponent extends BaseComponent {
 
         return [
             {
-                label: url
-                    ? "Sync"
-                    : LabelUtils.addModifiedTag("Sync", "created"),
+                label: "Sync",
                 tooltip: url ? undefined : "Created after deploy",
                 description: posix.basename(posix.dirname(config)),
                 collapsibleState: TreeItemCollapsibleState.Expanded,
                 contextValue: url ? `${contextValue}.has-url` : contextValue,
                 iconPath: icon,
+                resourceUri: url
+                    ? undefined
+                    : DecorationUtils.getModifiedStatusDecoration(
+                          TREE_ICON_ID,
+                          "created"
+                      ),
                 id: TREE_ICON_ID,
                 url: url,
             },

packages/databricks-vscode/src/extension.ts

@@ -62,6 +62,7 @@ import {BundleCommands} from "./ui/bundle-resource-explorer/BundleCommands";
 import {BundleRunTerminalManager} from "./bundle/run/BundleRunTerminalManager";
 import {BundleRunStatusManager} from "./bundle/run/BundleRunStatusManager";
 import {BundleProjectManager} from "./bundle/BundleProjectManager";
+import {TreeItemDecorationProvider} from "./ui/bundle-resource-explorer/DecorationProvider";
 import {BundleInitWizard} from "./bundle/BundleInitWizard";
 
 const customWhenContext = new CustomWhenContext();
@@ -550,10 +551,16 @@ export async function activate(
         bundleRunStatusManager,
         bundleValidateModel
     );
+    const decorationProvider = new TreeItemDecorationProvider(
+        bundleResourceExplorerTreeDataProvider,
+        configurationDataProvider
+    );
     context.subscriptions.push(
         bundleResourceExplorerTreeDataProvider,
         bundleCommands,
         bundleRunTerminalManager,
+        decorationProvider,
+        window.registerFileDecorationProvider(decorationProvider),
         window.registerTreeDataProvider(
             "dabsResourceExplorerView",
             bundleResourceExplorerTreeDataProvider

packages/databricks-vscode/src/ui/bundle-resource-explorer/DecorationProvider.ts

@@ -0,0 +1,57 @@
+import {
+    Event,
+    FileDecoration,
+    FileDecorationProvider,
+    ProviderResult,
+    Uri,
+    EventEmitter,
+    Disposable,
+} from "vscode";
+import {BundleResourceExplorerTreeDataProvider} from "./BundleResourceExplorerTreeDataProvider";
+import {ConfigurationDataProvider} from "../../configuration/ui/ConfigurationDataProvider";
+
+const SCHEME = "databricks-view-item";
+export class TreeItemDecorationProvider implements FileDecorationProvider {
+    private readonly disposables: Disposable[] = [];
+    private onDidChangeFileDecorationsEmitter: EventEmitter<
+        Uri | Uri[] | undefined
+    > = new EventEmitter();
+    onDidChangeFileDecorations: Event<Uri | Uri[] | undefined> =
+        this.onDidChangeFileDecorationsEmitter.event;
+    constructor(
+        private readonly bundleResourceExplorerTreeDataProvider: BundleResourceExplorerTreeDataProvider,
+        private readonly configrationViewTreeDataProvider: ConfigurationDataProvider
+    ) {
+        this.disposables.push(
+            this.bundleResourceExplorerTreeDataProvider.onDidChangeTreeData(
+                () => {
+                    this.onDidChangeFileDecorationsEmitter.fire(undefined);
+                }
+            ),
+            this.configrationViewTreeDataProvider.onDidChangeTreeData(() => {
+                this.onDidChangeFileDecorationsEmitter.fire(undefined);
+            })
+        );
+    }
+
+    provideFileDecoration(uri: Uri): ProviderResult<FileDecoration> {
+        if (uri.scheme !== SCHEME) {
+            return undefined;
+        }
+        return uri.query
+            ? (JSON.parse(uri.query) as FileDecoration)
+            : undefined;
+    }
+
+    dispose() {
+        this.disposables.forEach((d) => d.dispose());
+    }
+}
+
+export function asDecorationResourceUri(id: string, data: FileDecoration) {
+    return Uri.from({
+        scheme: SCHEME,
+        authority: id,
+        query: JSON.stringify(data),
+    });
+}

packages/databricks-vscode/src/ui/bundle-resource-explorer/JobTreeNode.ts

@@ -6,7 +6,7 @@ import {
     BundleResourceExplorerTreeNode,
 } from "./types";
 import {BundleRunStatusManager} from "../../bundle/run/BundleRunStatusManager";
-import {ContextUtils} from "./utils";
+import {ContextUtils, DecorationUtils} from "./utils";
 import {ConnectionManager} from "../../configuration/ConnectionManager";
 import {JobRunStatusTreeNode} from "./JobRunStatusTreeNode";
 import {JobRunStatus} from "../../bundle/run/JobRunStatus";
@@ -50,6 +50,10 @@ export class JobTreeNode implements BundleResourceExplorerTreeNode {
                 hasUrl: this.url !== undefined,
                 nodeType: this.type,
             }),
+            resourceUri: DecorationUtils.getModifiedStatusDecoration(
+                this.resourceKey,
+                this.data.modified_status
+            ),
             collapsibleState: isRunning
                 ? TreeItemCollapsibleState.Collapsed
                 : TreeItemCollapsibleState.Expanded,

packages/databricks-vscode/src/ui/bundle-resource-explorer/PipelineTreeNode.ts

@@ -6,7 +6,7 @@ import {
     BundleResourceExplorerTreeNode,
 } from "./types";
 import {BundleRunStatusManager} from "../../bundle/run/BundleRunStatusManager";
-import {ContextUtils} from "./utils";
+import {ContextUtils, DecorationUtils} from "./utils";
 import {ConnectionManager} from "../../configuration/ConnectionManager";
 import {PipelineRunStatus} from "../../bundle/run/PipelineRunStatus";
 import {TreeItemTreeNode} from "./TreeItemTreeNode";
@@ -48,6 +48,10 @@ export class PipelineTreeNode implements BundleResourceExplorerTreeNode {
                 hasUrl: this.url !== undefined,
                 nodeType: this.type,
             }),
+            resourceUri: DecorationUtils.getModifiedStatusDecoration(
+                this.resourceKey,
+                this.data.modified_status
+            ),
             collapsibleState: isRunning
                 ? TreeItemCollapsibleState.Expanded
                 : TreeItemCollapsibleState.Collapsed,

packages/databricks-vscode/src/ui/bundle-resource-explorer/utils/DecorationUtils.ts

@@ -0,0 +1,33 @@
+import {BundleResourceModifiedStatus} from "../../../bundle/models/BundleRemoteStateModel";
+import {asDecorationResourceUri} from "../DecorationProvider";
+import {ThemeColor} from "vscode";
+
+export function getModifiedStatusDecoration(
+    id: string,
+    modifiedStatus?: BundleResourceModifiedStatus
+) {
+    switch (modifiedStatus) {
+        case "created":
+            return asDecorationResourceUri(id, {
+                badge: "C",
+                color: new ThemeColor("gitDecoration.addedResourceForeground"),
+                tooltip: "Created after deploy",
+            });
+        case "deleted":
+            return asDecorationResourceUri(id, {
+                badge: "D",
+                color: new ThemeColor(
+                    "gitDecoration.deletedResourceForeground"
+                ),
+                tooltip: "Deleted after deploy",
+            });
+        case "updated":
+            return asDecorationResourceUri(id, {
+                badge: "U",
+                color: new ThemeColor(
+                    "gitDecoration.modifiedResourceForeground"
+                ),
+                tooltip: "Updated after deploy",
+            });
+    }
+}

packages/databricks-vscode/src/ui/bundle-resource-explorer/utils/index.ts

@@ -2,3 +2,4 @@ export * as JobRunStateUtils from "./JobRunStateUtils";
 export * as RunStateUtils from "./RunStateUtils";
 export * as ContextUtils from "./ContextUtils";
 export * as LabelUtils from "./LabelUtils";
+export * as DecorationUtils from "./DecorationUtils";