[tree view] Allow to add, update and delete items

[noraleonte]

Follow-up on #19751

Explore a way to create/update/delete items in the tree view and optimize the behavior for all the existing features - lazy loading included.

Part 1 - expose API methods to add / update / remove items

• Item creation: [tree-view] Add API support for inline row addition in Tree components #19751
• Item updates ✅ setIsItemDisabled, updateItemLabel (but right now we never update the actual label because we don't know how to do it when the user uses custom properties. We can wait for users feedback here)
• Removing items: need to expose a method

Part 2 - update the data source to allow users to register the changes in the Tree View

export type DataSource<R extends {}> = {
  getChildrenCount: (item: R) => number;
  getTreeItems: (parentId?: TreeViewItemId) => Promise<R[]>;
  updateTreeItems: (UpdateTreeItemsParameters) => Promise<void>;
};

interface UpdateTreeItemsParameters {
  added: R[];
  updated: R[];
  deleted: TreeViewItemId[];
}

[flaviendelangle]

One potential solution is to allow users to pass a list of newly added items, updated items and deleted items to an API method.

I was more thinking about the data source.

You have two side to this feature:

How to tell to the Tree View to add / update / remove items

This can be a built in UI.
But if we don't want to provide it, then we indeed a set of API methods.
For item creation, we have #19751
For item update, we have several methods (setIsItemDisabled, updateItemLabel but right now we never update the actual label because we don't know how to do it when the user uses custom properties. We can wait for users feedback here).
For item deletion, we need a removeItems method or something similar.

How to store those updates when using lazy loading.

That's what I had in mind for this issue.
Right now, we can update the item internally but there is no way to forward this change to the server when using lazy loading.
I'm surprised nobody complained for lazy loading + label editing.
But with #19751 the problem will become even bigger.

I'm proposing to add a new method to the data source as follow (exact API to discuss and to test in depth):

export type DataSource<R extends {}> = {
  getChildrenCount: (item: R) => number;
  getTreeItems: (parentId?: TreeViewItemId) => Promise<R[]>;
  updateTreeItems: (UpdateTreeItemsParameters) => Promise<void>;
};

interface UpdateTreeItemsParameters {
  added: R[];
  updated: R[];
  deleted: TreeViewItemId[];
}

This can be done incrementally:

1. [tree-view] Add API support for inline row addition in Tree components #19751
2. Add the updateTreeItems method to the data source but only with the added property
3. Add a way to update the actual items in state when running isItemDisabled, updateItemLabel etc... (probably need a new prop to let people apply the update on the item object, similar to the valueSetter on the grid)
4. Add the updated property to the updateTreeItems data source method
5. Add a new deleteItem api method
6. Add the deleted property to the updateTreeItems data source method

[noraleonte]

Thank you for detailing the proposal!

The incremental approach sounds good.

This can be a built in UI.
But if we don't want to provide it, then we indeed a set of API methods.

Not sure we should rely on a built in UI - can be opinionated and there are lots of ways to do it. I would expose API methods + examples in the docs.

[noraleonte]

Updated issue description ✅

[flaviendelangle]

Not sure we should rely on a built in UI - can be opinionated and there are lots of ways to do it. I would expose API methods + examples in the docs.

I agree, I think we can start by focusing only on the headless part, and if the UI has some value we can add it later on.