**As** a user
**I want to** see different representations for "Program", "Portfolio" and "Project" in dropdowns and lists
**so that** I can easily distinguish between the three

Begin of the insertion##End of the insertion **Acceptance criteria**

Begin of the insertion#### **Type representations:**

End of the insertion * Begin of the insertionThe newEnd of the insertion Begin of the deletion the differentEnd of the deletion workspace types are differentiated by icons:

* Project: `project`

* Program: `versions`

* Portfolio: `briefcase` Begin of the insertion


#### **Workspaces list:**

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertionThe `project list` module is renamed to `Workspaces`

* Its table will to will have a new column, `Type` whereEnd of the insertion the Begin of the insertionworkspace type with an icon and label will be displayed.End of the insertion Begin of the deletion icons are present in:End of the deletion

* The Begin of the insertioncolumn should be filterable and sortable.

* TheEnd of the insertion Begin of the deletion creationEnd of the deletion button Begin of the insertionto `+ Project` is now renamed `+ Add` and opens aEnd of the insertion dropdown Begin of the insertionwith all three options of workspace creation with each icon represented.


#### Workspaces dropdown:

End of the insertion Begin of the deletion

End of the deletion * The Begin of the insertionnewEnd of the insertion Begin of the deletion projectEnd of the deletion dropdown Begin of the insertionshould open the hierarchy containing all the three types of workspaces.

End of the insertion Begin of the deletion

End of the deletion * The Begin of the insertionnew dropdown modal should take a bigger width of `640px`.

End of the insertion Begin of the deletion project list

End of the deletion * Begin of the insertionThe name of the projects should be truncated at the end of the modal preserving always visible, if present, the favorite star and the type label.End of the insertion Begin of the deletion dropdowns for project selection (e.g. parent projects)End of the deletion

* The Begin of the insertiondropdown header is removed and the search bar and `All | Favorite` toggle switch are now in a single line.

* The star to indicate favorite workspaces is maintained.

* The icon and label to indicate Portfolios and Programs is added in the latest position after the name of the workspace and star (if present).

* The projects don't have icon or label indicator.

* TheEnd of the insertion `+ Project` button in the Begin of the deletion projectEnd of the deletion dropdown Begin of the insertionandEnd of the insertion Begin of the deletion (now used for all workspaces) should be removed together withEnd of the deletion the `Project lists` Begin of the insertionbutton in the footer should be removed.

* _\[open\] Why not using turbo directly to update this component without using the TreeView component? Loading times are too high?_

* _\[open\] If angular is kept, can we update the search bar and toggle switch to look like primer?_


#### Others:

* The dropdown for project selection, like parent projects… (excluding type project) should also contain the information of the workspace type as done in the workspaces' dropdown.End of the insertion Begin of the deletion button.End of the deletion


Begin of the insertion## **Figma**

* Workspaces lists: https://www.figma.com/design/bDgY4i9P5Bp2wAjNV0yeU0/Portfolios-module?node-id=194-7536

* Workspaces dropdown: https://www.figma.com/design/bDgY4i9P5Bp2wAjNV0yeU0/Portfolios-module?node-id=1-20105


##End of the insertion **Technical notes**

* Begin of the insertion_none_End of the insertion Begin of the deletion <br>End of the deletion


Begin of the insertion##End of the insertion **Permissions and visibility considerations**

* Begin of the insertion_none_End of the insertion Begin of the deletion noneEnd of the deletion


Begin of the insertion##End of the insertion **Translation considerations**

* _none_


Begin of the insertion##End of the insertion **Out of scope**

* Begin of the insertionReplacingEnd of the insertion Begin of the deletion replacingEnd of the deletion the project dropdown (for navigation) by a filterable tree view.

* Begin of the insertionSameEnd of the insertion Begin of the deletion sameEnd of the deletion is true for other project Begin of the insertiondropdownEnd of the insertion Begin of the deletion dropdowns 


_Set the_ **To be informed/consulted teams** _field to include all teams necessary to be informed of the changes._End of the deletion