Unified tree view PoC

[alexweininger]

Goal: Quickly implement a unified tree view using the Resource Groups extension. And look for technical challenges and design decisions that need discussion.

In the unified tree view users will be able to drill into the individual resources as they would normally in the resource specific extension, but all together in the Resource Groups view.

Example:

[alexweininger]

I now have a basic implementation working with SWA and Functions displaying in the tree. 🌴

Implementation

Note: not much effort was put into naming

Each extension implements and exports AzExtTreeItemProvider. Adding a function like this to the API: getTreeItemProvider: () => new TreeItemProvider()

export interface AzExtTreeItemProvider {
    getTreeItem(resourceGroupName: string, name: string, treeItem: AzExtParentTreeItem): Promise<AzExtTreeItem>;
}

In resource groups, I added a method getTreeItemProvider(): Promise<AzExtTreeItemProvider | undefined> to AzExtWrapper.

From there it's as simple as checking if the extension for a given resource exports this function, and calling it.

Snippet from loadMoreChildrenImpl of ResourceGroupTreeItem:

const azExt: AzExtWrapper | undefined = extensions.find((azExt) => azExt.matchesResourceType(resource));
if (azExt) {
    const provider = await azExt.getTreeItemProvider();
    if (provider) {
        return provider?.getTreeItem(this.name, resource.name!, this);
    }
}

Questions

A. When should the full details of a resource be loaded?

Options:

1. When the resource item is expanded
   • Complexity of proxying the actual tree item through the resource tree item
2. When the resource group item is expanded
   • Longer load times if resource group has many resources (as well as many kinds of resources)

B. How do we handle loading more items while maintaining sorting/grouping?

Ex: If we load and sort 25/100 resources, how do we handle loading additional resources?

1. Sort immediately. -> Might be disruptive/jarring.
2. Keep them separate from already sorted resources and sort them as their own list, allowing users to hit refresh to merge the two. -> More complex UX, more complex (relative to option 1) to implement.

C. What is the best way to display the grouping, sorting, and filtering options available to users?

• Toggle button that can toggle between two grouping options. User can customize primary/secondary.

D. Where will the local project tree items be? How will the design of this API be different from the resources?