**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 op-uc-figure"><div 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 op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27240/content"></div></figure> Begin of the insertion

End of the insertion Begin of the deletion



End of the deletion This dialog includes multiple elements:

* **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:** this will allow a search of the project and sub-projects by name.
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 op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27241/content"></div></figure>

* **Checkbox list hierarchy:** 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 Autoliv).

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

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

* **Hover select sub-projects:** Begin of the insertionSpecified separately in <mention class="mention" data-id="41135" data-type="work_package" data-text="#41135">#41135</mention> dueEnd of the insertion Begin of the deletion A link button appears on hover that allows the user on hoverEnd of the deletion to Begin of the insertionneedEnd of the insertion Begin of the deletion select all the sub-projects from a parent project. This hover appears when the mouse is on top of the parent project or all all the sub-projects (excluding the top parent project of the list that only has the hover behaviour on itself).
Once you click the link and all the sub-projects are selected the link changeEnd of the deletion to Begin of the insertionclarify edge cases.


End of the insertion Begin of the deletion &quot;unselect all sub-projects&quot; (this will switch 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 deletion * **Action bar:** Two actions, one positive &quot;Apply&quot; to confirm the selected checkboxes and one to &quot;Clear selection&quot;.

**Figma visuals:**

https://www.figma.com/file/rddHeKCAkJo2MNI2zktSaR/?node-id=0%3A1