-
Type:
Epic
-
Status: Closed
-
Priority:
Minor
-
Resolution: Completed
-
Affects Version/s: None
-
Fix Version/s: 7.4.3.5 CE GA5
-
Component/s: Clay
-
Epic/Theme:
-
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
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 |
- is demanded by
-
LPS-110248 As a Page Creator I would like to navigate through menus and item display pages from the page tree
-
- Closed
-
-
LPS-132177 Find a solution to improve the performance of the category selection tree for cases where it contains a large number of items
-
- Completed
-
- mentioned in
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...