Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-133328

Design and implement scalability improvements in the TreeView component

    Details

      Description

      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  

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              daniel.sanz Daniel Sanz
              Reporter:
              bruno.fernandez Bruno Fernández
              Recent user:
              Summer Zhang
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package
                  7.4.3.5 CE GA5