**As** a project member
**I want to** include to my current view the work packages from another project or subproject that is not the same one that I'm working on
**so that** act upon or verify work packages that might affect or have relations with my current project.

**Acceptance criteria**

* The new action will be included in the top menu toolbar as a dropdown button (2nd level of navigation):

<figure class="image Begin of the insertionop-uc-figure"><divEnd of the insertion Begin of the deletion op-uc-figure" style="width:50%;"><divEnd of the deletion class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24630/content"></div></figure>

* Once the button is clicked a modal dialog will be opened with the hierarchy of projects and sub-projects with a multiple selection checkbox style:

<figure class="image Begin of the insertionop-uc-figure"><divEnd of the insertion Begin of the deletion op-uc-figure" style="width:50%;"><divEnd of the deletion class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/27240/content"></div></figure>



End of the insertion Begin of the deletion src="/api/v3/attachments/24634/content"></div></figure>

* End of the deletion This dialog includes multiple elements: Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * Begin of the insertion**Title with toggle selection:** title &quot;Projects&quot; and a toggle that allows the user to switch between all the projects and the already selected projects. The selected toggle tap also has the number of selected projects (with a minimum of 1 project, the current project).

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

* **Search bar:**End of the insertion Begin of the deletion Search bar:End of the deletion this will allow a search of the project and sub-projects by name. Begin of the insertion
End of the insertion Begin of the deletion In this search bar chips (as we have in the filters) of the already selected projects will be displayed and will be added scrolling to the left leaving space to keep writing.End of the deletion When this search is happening, the &quot;parent&quot; projects are greyed out and are not selectable while the text searched will turn blue in the matched projects or sub-projects.

<figure class="image Begin of the insertionop-uc-figure"><divEnd of the insertion Begin of the deletion op-uc-figure" style="width:50%;"><divEnd of the deletion class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/27241/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/24632/content"></div></figure>End of the deletion

Begin of the deletion <figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24633/content"></div></figure>

End of the deletion * Begin of the insertion**CheckboxEnd of the insertion Begin of the deletion CheckboxEnd of the deletion list Begin of the insertionhierarchy:**End of the insertion Begin of the deletion hierarchy:End of the deletion this is the same list as the top navigation menu on the top left corner but including a checkbox system. The checkboxes can have multiple status:
* Active non-selected: blue empty checkbox with black letters.
* Active selected: blue selected checkbox with black letters.
* Inactive non-selected: grey empty checkbox with black letters. This happens in the search behaviour explained on the top.
* Inactive selected: grey selected checkbox with black letters. This happens with the current project that you are in (in the mock-ups Begin of the insertionAutoliv).End of the insertion Begin of the deletion Autoliv) or when you have the action &quot;Include all sub-projects&quot; selected and you select a parent project (then all sub-projects will be in this status).End of the deletion

<figure class="image Begin of the insertionop-uc-figure"><divEnd of the insertion Begin of the deletion op-uc-figure" style="width:50%;"><divEnd of the deletion class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/27242/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/24635/content"></div></figure>End of the deletion

<figure class="image Begin of the insertionop-uc-figure"><divEnd of the insertion Begin of the deletion op-uc-figure" style="width:50%;"><divEnd of the deletion class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/27243/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/24636/content"></div></figure>End of the deletion

* Begin of the insertion**Hover select sub-projects:** A link button appears on hover thatEnd of the insertion Begin of the deletion Include all sub-projects action: ThisEnd of the deletion allows the user Begin of the insertionon hoverEnd of the insertion to select Begin of the deletion if they want to automatically checkEnd of the deletion all the Begin of the insertionsub-projects fromEnd of the insertion Begin of the deletion sub-project bellowEnd of the deletion a parent Begin of the insertionproject. This hover appears when the mouseEnd of the insertion Begin of the deletion project if thisEnd of the deletion is Begin of the insertionon top of the parent projectEnd of the insertion Begin of the deletion selectedEnd of the deletion or Begin of the insertionall allEnd of the insertion Begin of the deletion inEnd of the deletion the Begin of the deletion contrary select this always manually. The only case where this action doesn&#39;t affect theEnd of the deletion sub-projects Begin of the insertion(excludingEnd of the insertion Begin of the deletion is forEnd of the deletion the Begin of the insertiontop parentEnd of the insertion Begin of the deletion currentEnd of the deletion project Begin of the insertionof the list that only has the hover behaviour on itself).
OnceEnd of the insertion you Begin of the insertionclick the link and all the sub-projectsEnd of the insertion are Begin of the insertionselectedEnd of the insertion Begin of the deletion working on (Autoliv inEnd of the deletion the Begin of the insertionlink change to &quot;unselect all sub-projects&quot; (thisEnd of the insertion Begin of the deletion mockups) as this oneEnd of the deletion will Begin of the insertionswitch back to &quot;select all sub-projects&quot; if manually a sub-project is unselected).

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

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

End of the insertion Begin of the deletion be selected by default but its sub-projects not.
End of the deletion * Begin of the insertion**Action bar:**End of the insertion Begin of the deletion Modal buttons:End of the deletion Two actions, one positive &quot;Apply&quot; to confirm the selected checkboxes and one to &quot;Clear selection&quot;.

Begin of the deletion **Visuals:**

* EMPTY:

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24637/content"></div></figure>

* ALL SUB-PROJECTS NOT SELECTED:

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24638/content"></div></figure>

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24639/content"></div></figure>

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24640/content"></div></figure>

* ALL SUB-PROJECTS SELECTED:

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24641/content"></div></figure>

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24642/content"></div></figure>

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24643/content"></div></figure>

* SEARCH:

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24644/content"></div></figure>

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24645/content"></div></figure>


End of the deletion **Figma Begin of the insertionvisuals:**End of the insertion Begin of the deletion file:**End of the deletion

Begin of the insertionhttps://www.figma.com/file/rddHeKCAkJo2MNI2zktSaR/?node-id=0%3A1End of the insertion Begin of the deletion [https://www.figma.com/file/rddHeKCAkJo2MNI2zktSaR/?node-id=0%3A1](https://www.figma.com/file/rddHeKCAkJo2MNI2zktSaR/?node-id=0%3A1)End of the deletion