### **Context**

We are currently working on creating a Rails/ViewComponent version of Primer&#39;s Treeview: <mention class="mention" data-id="62667" data-type="work_package" data-text="###62667">###62667</mention>&nbsp;

Whilst useful, the TreeView&#39;s limitations make it unsuitable for user in places like the &#39;Include projects&#39; drop-down, which requires hierarchy _and_ multi-select. The [Select panel](https://primer.style/components/selectpanel) would solve this problem if it supported hierarchies, but it doesn&#39;t.

### **Acceptance criteria**

* Create a new Primer component Begin of the insertionwill be constructed with:End of the insertion Begin of the deletion that affords:End of the deletion

* Begin of the insertionA container like the Select panel, but

* The ActionList replaced byEnd of the insertion Begin of the deletion Displaying items inEnd of the deletion a Begin of the insertionTreeView

* The list:

* Should look and behave like a TreeView 🌳End of the insertion Begin of the deletion listEnd of the deletion

* Begin of the insertionTheEnd of the insertion Begin of the deletion Organise theEnd of the deletion list Begin of the insertionshould support atEnd of the insertion Begin of the deletion into hierarchies (atEnd of the deletion least Begin of the insertion5 levels of hierarchyEnd of the insertion Begin of the deletion n levels)End of the deletion

* _\[open\] Begin of the insertionpossibly unlimited?_End of the insertion Begin of the deletion Should there be a limit?_End of the deletion

* Begin of the insertionShould allow selectingEnd of the insertion Begin of the deletion SelectingEnd of the deletion multiple items Begin of the insertion

* Each individual nodeEnd of the insertion in Begin of the insertionthe TreeView will also have a leading checkbox to select/deselect the component

End of the insertion Begin of the deletion that list

End of the deletion * Begin of the insertionThe component should require the user to explicitly executeEnd of the insertion Begin of the deletion ExecutingEnd of the deletion an action on that list Begin of the insertion(eg. &quot;Submit&quot;)

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertion_\[open\]End of the insertion The Begin of the insertioncomponent allows two loading 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), filtering will send a new request to the server to populate the results_

* _If there is a lot content (eg. over 25 objects, regardless of if this is a parent or the result node), only 25 will be visible and there will be a &#39;Show more&#39; action._

* _Clicking on the show more will append the additional content to the list._

* _If a match concerns a parent node and the n+60 child, it is possible to first only see the parent and have the child hidden beind a single or multiple &#39;Show more&#39; clicks_

* TheEnd of the insertion nodes in the list can be expanded/collapsed

* _\[open\] Iterate and add this in v2?_


#### **Additonal considerations**

These additional features or options are worth considering but might not have to be a part of the component itself:

* A filter-by-text (search) bar

* A segmented control to filter the view (eg. &#39;All | Favourites&#39;)

* An additional action that acts on the whole list (eg. &#39;Select all&#39; / &#39;Clear selection&#39;)


Begin of the insertion**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 &#39;show more&#39;, 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


End of the insertion #### **Use cases**

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="vertical-align:top;width:100px;"><p class="op-uc-p"><strong>Use case</strong></p></td><td class="op-uc-table--cell" style="vertical-align:top;width:500px;"><p class="op-uc-p"><strong>Dominic's original notes</strong></p></td><td class="op-uc-table--cell" style="vertical-align:top;"><p class="op-uc-p"><strong>Remarks</strong></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="vertical-align:top;width:100px;"><p class="op-uc-p"><strong>Include projects</strong></p></td><td class="op-uc-table--cell" style="vertical-align:top;"><p class="op-uc-p">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.</p><p class="op-uc-p"><strong>Functionality</strong></p><ul class="op-uc-list"><li class="op-uc-list--item"><p class="op-uc-p">Shows all projects available to the user in a hierarchical structure</p></li><li class="op-uc-list--item"><p class="op-uc-p">User can enable one or more projects (checkbox)</p></li><li class="op-uc-list--item"><p class="op-uc-p">"Only selected"-filter to allow user an overview of the selected items</p></li><li class="op-uc-list--item"><p class="op-uc-p">"Include all sub-projects"-option to enable all sub-projects when a project is enabled.</p></li><li class="op-uc-list--item"><p class="op-uc-p">Deselect all projects</p></li></ul><p class="op-uc-p"><img class="image_resized op-uc-image op-uc-image_inline" style="width:295px;" src="/api/v3/attachments/415033/content"></p></td><td class="op-uc-table--cell" style="vertical-align:top;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="vertical-align:top;width:100px;"><p class="op-uc-p"><strong>Project selector to activate eg. storages</strong></p></td><td class="op-uc-table--cell" style="vertical-align:top;"><p class="op-uc-p">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</p><p class="op-uc-p"><strong>Functionality</strong></p><ul class="op-uc-list"><li class="op-uc-list--item"><p class="op-uc-p">Shows all projects available to the user in a hierarchical structure</p></li><li class="op-uc-list--item"><p class="op-uc-p">User can add projects one by one or include all sub-projects</p></li><li class="op-uc-list--item"><p class="op-uc-p">Projects that already have this storage activated are disabled</p></li></ul><p class="op-uc-p"><img class="image_resized op-uc-image op-uc-image_inline" style="width:511px;" src="/api/v3/attachments/415096/content"></p></td><td class="op-uc-table--cell" style="vertical-align:top;"><ul class="op-uc-list"><li class="op-uc-list--item"><p class="op-uc-p">We already have a fully-functioning auto-completor with project selector (Angular).</p></li><li class="op-uc-list--item"><p class="op-uc-p">Same as include project: Select panel with multi-level would be more useful (can input names)</p></li></ul></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="vertical-align:top;width:100px;"><p class="op-uc-p"><strong>Selector for custom field of type hierarchy</strong></p></td><td class="op-uc-table--cell" style="vertical-align:top;"><p class="op-uc-p">A user wants to select one or more items of a hierarchy.</p><ul class="op-uc-list"><li class="op-uc-list--item"><p class="op-uc-p">Work package table<br><img class="image_resized op-uc-image op-uc-image_inline" style="width:316px;" src="/api/v3/attachments/415073/content"></p></li><li class="op-uc-list--item"><p class="op-uc-p">Work package details view<br><img class="image_resized op-uc-image op-uc-image_inline" style="width:394px;" src="/api/v3/attachments/415068/content"></p></li><li class="op-uc-list--item"><p class="op-uc-p">Project attribute of type Hierarchy - not implemented yet<br><img class="image_resized op-uc-image op-uc-image_inline" style="width:418px;" src="/api/v3/attachments/415076/content"></p></li><li class="op-uc-list--item"><p class="op-uc-p">Work package field in copy form - not implemented yet<br><img class="image_resized op-uc-image op-uc-image_inline" style="width:382px;" src="/api/v3/attachments/415075/content"></p><p class="op-uc-p"><br><br><br><br><br><br><br><br>&nbsp;</p></li></ul></td><td class="op-uc-table--cell" style="vertical-align:top;"><p class="op-uc-p">Similar to include projects (Select panel with hierarchy)</p></td></tr></tbody></table></figure>

**Figma mockups**

* To be defined


**Technical notes**

* <br>


**Permissions and visibility considerations**

* _None_


**Translation considerations**

* _None_


**Out of scope**

* tbd