**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

## **Acceptance criteria**

#### **Type representations:**

* The new workspace types are differentiated by icons:

* Project: `project`

* Program: `versions`

* Portfolio: `briefcase`


#### Begin of the insertion**ProjectsEnd of the insertion Begin of the deletion **WorkspacesEnd of the deletion list:**

* The `project list` module is Begin of the insertionkeeping the name `Projects`End of the insertion Begin of the deletion renamed to `Workspaces`End of the deletion

* Begin of the insertionFor portfolios and programs in theEnd of the insertion Begin of the deletion ItsEnd of the deletion table will to will have a Begin of the insertionlabel atEnd of the insertion Begin of the deletion new column, `Type` whereEnd of the deletion the Begin of the insertionend of the nameEnd of the insertion Begin of the deletion workspace typeEnd of the deletion with an icon and label will be displayed.

* The Begin of the insertionname of the projectsEnd of the insertion Begin of the deletion columnEnd of the deletion should be Begin of the insertiontruncated at the end of the modal preserving always visible, if present, the type labelEnd of the insertion Begin of the deletion filterableEnd of the deletion and Begin of the insertionicon.End of the insertion Begin of the deletion sortable.End of the deletion

* The button Begin of the deletion toEnd of the deletion `+ Project` is now renamed `+ Add` and opens a dropdown with all three options of Begin of the deletion workspaceEnd of the deletion creation Begin of the insertion(portfolio, program, and project)End of the insertion with each icon represented.


#### Begin of the insertionProjectsEnd of the insertion Begin of the deletion WorkspacesEnd of the deletion dropdown:

* The new dropdown should open the hierarchy containing all the three types of Begin of the insertionproject types.End of the insertion Begin of the deletion workspaces.End of the deletion

* The new dropdown modal should take a bigger width of `640px`.

* The 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.

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

* The star to indicate favorite Begin of the insertionproject typesEnd of the insertion Begin of the deletion workspacesEnd of the deletion 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.

* The `+ Project` button in the dropdown and the `Project lists` button in the footer should be removed. Begin of the insertion


End of the insertion Begin of the deletion

* _\[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?_


End of the deletion #### 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.


## **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


## **Technical notes**

* Begin of the insertionThe list and autocomplete of needs to be maintained in Angular for now until the TreeView is not ready.

* Until the TreView is not optimised for loading all projects.End of the insertion Begin of the deletion _none_End of the deletion


## **Permissions and visibility considerations**

* _none_


## **Translation considerations**

* _none_


## **Out of scope**

Begin of the insertion* The project dropdown is not going to be Primarised using Turbo until the TreeView is ready.

End of the insertion * Replacing the project dropdown (for navigation) by a filterable tree view.

* Same is true for other project dropdown