# Feature DREAM-266 - Create new component: TreeViewSelectPanel Project: Stream Design System Status: in specification URL: https://community.openproject.org/work_packages/DREAM-266 ## Planning | Attribute | Value | | --- | --- | | Date | | | Priority | Medium | | Target versions | Product Backlog | | Sprint | | | Backlog bucket | | | Votes | | | List | | | Roadmap | | | Relevance | | ## OPEN POINTS / FEEDBACK _No work packages_ ## Features and Chunks _No work packages_ ## Bugs and other work packages _No work packages_ ## Technical Details | Attribute | Value | | --- | --- | | Module | Frontend components and Primer design system | | Feature Flag | | | Requires doc change | No | | Enterprise plan | | ## Details | Attribute | Value | | --- | --- | | Pull preview | | | Mockups | | | Accessibility | No | ## People | Attribute | Value | | --- | --- | | Assignee | | | Accountable | Henriette Darge | | Product manager | | | Developers | Cameron Dutro | | Designer | Parimal Satyal | | Ordered by | | | Signed off by | | | Interest by | | ## Estimates and progress | Attribute | Value | | --- | --- | | PD (min) | | | PD (max) | | | Work | | | Labor costs | | ## Description ### **Context** We implemented a Rails/ViewComponent version of Primer's Treeview: \#\#\#62667 ,  as well as a FilterableTreeView component (###63717) Whilst useful, there are places like the 'Include projects' drop-down, which requires the FilterableTreeView to be shown inside an inplace dialog. The [Select panel](https://primer.style/components/selectpanel) would solve this problem if it supported hierarchies, but it doesn't. ### **Acceptance criteria** - Create a new Primer component will be constructed with: - A container like the Select panel but - The ActionList replaced by a FilterableTreeView - triggered by a button - The **container** should - be wide enough to comfortably display at least 5 levels of hierarchy - rendered next to the triggering button - The **list** should look and behave like a FilterableTreeView 🌳 including - a text field to filter - a segmented control with defaults "All"|"Selected" - a checkbox to include all sub-items at once - allow selecting only one or multiple items - The nodes in the list can be expanded/collapsed - The list should support unlimited levels of hierarchy - The **button** shows a counter indicating how many items are selected (given the selec\_strategy is multiselect). This counter is updated only on save - The component should require the user to explicitly execute an action on that list (eg. "Apply") - That button is fixed at the bottom, so that it does not have to be scrolled to - Accessibility: - Ideally, we'd benefit from Primer's SelectPanel accessibillity consideration #### **Additonal considerations** These additional features or options are worth considering but might not have to be a part of the component itself: - An additional action that acts on the whole list (eg. 'Select all' / 'Clear selection') #### **Use cases**

Use case

Dominic's original notes

Remarks

Include projects

In work package list a user usually only sees work packages of the current project. But if wanted, the user can include work packages of other projects with the "include projects" selector.

Functionality

  • Shows all projects available to the user in a hierarchical structure

  • User can enable one or more projects (checkbox)

  • "Only selected"-filter to allow user an overview of the selected items

  • "Include all sub-projects"-option to enable all sub-projects when a project is enabled.

  • Deselect all projects


Project selector to activate eg. storages

User can select multiple projects to activate a project attribute, a work package type, a storage or other objects that can be added per project

Functionality

  • Shows all projects available to the user in a hierarchical structure

  • User can add projects one by one or include all sub-projects

  • Projects that already have this storage activated are disabled

  • We already have a fully-functioning auto-completor with project selector (Angular).

  • Same as include project: Select panel with multi-level would be more useful (can input names)

Selector for custom field of type hierarchy

A user wants to select one or more items of a hierarchy.

  • Work package table

  • Work package details view

  • Project attribute of type Hierarchy - not implemented yet

  • Work package field in copy form - not implemented yet









     

Similar to include projects (Select panel with hierarchy)

Project selector for admin settings requireing the selection of projects (Eg. Project attributes)

Places with the 'Project' tab, eg. File storages.

Today in a dialog but perhaps this is not necessary once we have this component.

Replace modal but with a way to select project by traversing the hierarchy. With an option of course to include all sub-projecs.

Wiki page management


For actions like bulk delete or bulk move. Might need draggable. 

Wiki is not the biggest priority right now.

\-------------------------------- **Initial thoughts from meeting with Cameron:** - But we can start with a static list for v1 and then iterate and write scenarios. - We *could* potentially, at a component level, apply the same filter criteria to the server results. Let the feature deal with it. - An alternate approach is, instead of 'show more', require the search to be more specific and afford ways for the user to be more specific. Worth considering. - Select panel has three fetch strategies: - local/static - eventually local / lazylocal - remote **Old considerations regarding async loading** - *\[open\] The component allows two filtering stategies.* - *Static: only if the underlying TreeView itself is static* - *filtering is done at browser-level (no server calls required)* - *Dynamic: if the underlying TreeView is dynamic (additional async calls can be made) (?? Open: Could probably also be used if the underlying TreeView is static)* - *filtering will send a new request to the server to populate **all** results that match the given string,* - *If there is a lot content (eg. over 25 objects, regardless of if this is a parent or the result node):* - *The component display only the first 25 items and there will be a 'Show more' action at the very bottom. This includes both nodes and leaves in the hierarchy.* - *Clicking on the show more will append the next 25 items to the list.* - *\[Open\] Does that mean that with the dynamic loading strategy we also only show 25 items when opening the component (so before anything was filtered)* - *The logic to decide which items to show is as follows:* - ***Start at the top level**: Begin with the first top-level node and expand it.* - ***Load children**: Display the children of the first node until the 25-item limit is reached.* - ***Nested nodes**: If the first node contains child nodes (i.e., nested nodes), the **first child node should be expanded first**, and its children should be displayed with priority (e.g., 1 child node + 23 of its children = 24 + 1 top-level node = 25).* - ***Expand additional nodes**:* *If the first node has fewer than 24 children (including child nodes), the next top-level node is expanded, and its children are displayed until the total of 25 visible elements is reached*