TreeViewList searching bug and simplified interface

[syedsalehinipg]

Contributes to TD-2030

Changes

This PR fixes a bug with the searching logic in the TreeViewList component introduced in v5.12.0 and also simplifies and tidies up the component interface to closer align with the core MUI components that are being wrapped.

• Previously the component accepted a searchTerm string but didn't actually provide the search box. This then meant that each consuming component would need to implement the same search box and pass along this prop. All of our current usecases include the search so we have decided to now include the search component directly in this component. It's optional and the default is not to show the search box. The search box is enabled with the enableSearch prop.
• The previously named expandSearchTerm prop has been renamed to expandSearchResults to provide clarity over the functionality. This can be set to true to expand all nodes in the tree when a search term is active. Default is false. This can be useful a UX improvement to help users quickly narrow down to an item without having to manually expand nodes.
• The defaultExpanded prop has been removed. We don't currently have a usecase for this.
• The onSelectionChange prop has been renamed to onNodeSelect to directly match the underlying MUI prop.
• A new onNodeToggle prop has been added so consumers can listen to expand/collapse events as well as selection events. VIRTO.BUILD will need this.
• The items prop has been re-typed and simplified a lot. You now pass label and nodeId which directly align with the underlying MUI props. You can provide optional props for disabled to disable a node and tooltip to show a tooltip on hover.
• Simplified logic that builds the tree nodes and fixed typescript issues. Previosuly we were trying to pass a generic but then making assumptions in the code based on specific props which could have lead to errors. The items prop is now explicitly typed as describe aboved.
• The tooltip component has been moved to a standalone component rather than a nested component to avoid re-renders.
• Fixed the logic that takes a search term or terms and filters the list of nodes displayed in the tree. It was previously displaying nodes that didn't match the search. Multiple search terms can be separated by a space. Each term must match a node or one of it's children for it to be displayed in the tree. Multiple terms are logical AND, i.e. all terms must match.
• Added a new story to storybook to show the optional tree with search.
• Fixed an issue where the width prop wasn't being used correctly. The width was being set but the component was still allowed to overflow. Now the tree and search (when shown) are wrapped in a container that correctly sets the width. Defeault is 100%.
• Renamed and shortened the example data used to populate the items in storybook. Previously we were passing every item from DATA which was hard to maintain. The new dataset provides enough variety to showcase all functionality and allow searching on multiple terms to filter down.

UI/UX

Tree component with optional search.

Searching for single search term

Searching for multiple search terms to further narrow down

Testing notes

Author checklist before assigning a reviewer

• Reviewed my own code-diff.
• Branch has been run in docker.
• PR assigned to me or an appropriate delegate.
• Relevant labels added to the PR.
• Appropriate tests have been added.
• Lint and test workflows pass.

[dmbarry86]

Handing this back over to @syedsalehinipg to tidy up the tests and PR description etc. It should be reviewed by somebody else as we have now both contributed.

[Skoob1905]

Just one small doc change but other than that, looks pretty good.