Design and implement scalability improvements in the TreeView component

• Type: Epic
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: 7.4.3.5 CE GA5
• Component/s: Clay
• Labels:
  • 7.4-portal-ga5
  • fc_21_06
  • fi-s-clay
  • team_fi_epic_category_frontend_components
• Epic/Theme:
  • FI_Platform_Evolution
• Epic Status: To Do

TreeView is an important component in many internal DXP products, such as Asset Categories, Web Content Folder, Page Editor Structure Tree, Master Page Template, Product Menu Page Tree, Style Book… and there are two different implementations for this component with different Design and performance issues, an AUI implementation and a TreeView component that was written in React.js.

The new TreeView component must be implemented with performance in mind to be able to render a large list of data without too many bottlenecks.

The component should follow the new TreeView implementation built by the Lexicon team, considering some implementations in mind:

• Flexible
• Allow checkbox
• Allow actions
• Allow sort
• Allow remove

We should consider implementing asynchronous Node loading to help alleviate the performance bottleneck present in TreeViews implemented in DXP.

The component should be able to render a large amount of data without affecting the initial rendering and be able to do minimal operations without affecting too much performance like expanding Node and selecting.

Acceptance Criteria

• Expandable
• Async Node
• Actions
• Checkable
• Orderable (Drag and Drop)
• Remove node
• Shortcuts

Additional Resources

• LPS-133328 Scalability improvements in the TreeView component
• Lexicon TreeView docs

Test Scenarios:

Test Scenarios	Covered by frontend/backend Unit Test?	Test Priority (business impact)	Chrome Pass/Fail
Given: A TreeView that enable DnD When: Drag and drop a node Then: Assert that the node can be drag and drop	no	5-critical
Given: A TreeView that disable DnD When: Drag and drop a node Then: Assert that the node cannot be drag and drop	no	4-major
Given: A TreeView that support Multiple selection When: Click checkbox of some nodes Then: Assert that multiple nodes can be selected	no	5-critical
Given: A TreeView that support Multiple selection When: A node with children is collapsed, select the node Then: Assert that the children are also selected	no	4-major
Given: A TreeView with enough nodes so Load more option is available When: Click Load more Then: Assert all nodes displays only after clicking Load more.	no	4-major
Given: A TreeView with actions for node When: Click ellipsis icon of one node Then: Assert drop down menu displays and all options work as expected	no	4-major

Exploratory testing to consider:

Test Case	Test Priority (business impact)	Pass/Fail
Exploratory test: Test TreeView in Chrome / FF / EDGE / SAFARI	2-low
Exploratory test: Test TreeView in the mobile device (smart phone, tablet)	2-low
Given: A Treeview When: Use keyboard only Then: Able to access all interactible elements Reference: https://docs.google.com/document/d/1fggZBRGAIkGPbnkRrGEUOT0hHpkF-YjFmREee0XCoI0/edit#heading=h.5zm374rdzhh	3-medium
Given: A Treeview When: using a screenreader Then: identifies all aspects of actions and sections	2-low
Given: A Treeview When: Use AXE chrome extension Then: No issues related to WCAG AA and A	2-low