# **Acceptance criteria**

* There is a `Primer::OpenProject::TreeView` component within our Primer repo

* In general, the component follows the specification of the Primer team: [https://primer.style/product/components/tree-view/guidelines/](https://primer.style/product/components/tree-view/guidelines/) . We will repeat the most relevant parts in the following specification:


## Anatomy

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/407484/content"></div></figure>

1. **Parent node**: Expands/collapses to show/hide child nodes.

2. **End node**: A node with no children

3. **Chevron**: Expands/collapses a parent node and indicates expanded/collapsed state.

4. **Nesting level indicator lines**: Each line represents a level of nesting depth

5. **Leading action (optional)**: An IconButton to allow interaction with the node besides activating or expanding.

6. **Leading visual (optional)**: A visual cue for additional context

7. **Node label**: The text label for the node

8. **Trailing visual (optional)**: Same as a leading visual, but at the end


## Behaviour

**Expanding/Collapsing**

* \[OPEN\] Keyboard users can expand or collapse nodes without activating them by using the left and right arrow keys.

* For cursor users, there are two click areas:

* clicking the chevron only expands or collapses the node Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertion\[OPEN\] should that fire an event so that we can react to it?

* End of the insertion clicking anywhere else will activate the node Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * \[OPEN\] Begin of the insertionWhat does &quot;activating&quot; mean? SendEnd of the insertion Begin of the deletion technically both (toggling and activatingEnd of the deletion a Begin of the insertionrequestEnd of the insertion Begin of the deletion node) hasEnd of the deletion to Begin of the deletion fireEnd of the deletion an Begin of the insertionhref?

End of the insertion Begin of the deletion event so that we can react to it

End of the deletion * If the node cannot be activated, clicking anywhere on the node will expand it.

* When a child node is active, all of it&#39;s parent nodes should be expanded.

* If a user expands nested parent nodes and then collapses a parent node higher in the hierarchy, persist the expanded parent nodes lower in the hierarchy.


**Loading strategies**

* There are tow loading strategies:

* static

* dynamically with a loading indicator

* When no items can be loaded, there is a message shown &quot;No items found&quot; (Text might be adapted later)

* \[OPEN\] When the load fails, there is a simple error message inside the tree (Note, that this is contrary to what Primer does, see section &quot;Out of scope&quot;). Further, there is a small button to re-fetch the items.


<br>

## Out of scope

* \[OPEN\] If non-end nodes are in the ancestry and the parent nodes cannot be activated, you may combine parent nodes into a single parent node to reduce the levels of nesting.


<figure class="image image_resized op-uc-figure" style="width:389px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/407498/content"></div></figure>

* Inform users why the data cannot be retrieved and give them a path to resolve it. The error message cannot appear in the TreeView because it is not semantically a node in the tree. Instead, the error message should appear in a [Dialog](https://primer.style/product/components/dialog/) with an optional call-to-action that can resolve the error.


<br>

##

# **Open questions**

* Do we want to get it merged upstream?

* Do we need own visuals or is the component definition of Primer enough?

* How much accessibility support do we require in the first iteration? See [https://primer.style/product/components/tree-view/accessibility/](https://primer.style/product/components/tree-view/accessibility/)&nbsp;


# **Potential usage**

* File picker (when having for example a Nextcloud instance connected)

* Hierachy Custom field selector


# Visuals

TBD