**Context**

An extension of the work done in <mention class="mention" data-id="66122" data-type="work_package" data-text="##66122">##66122</mention>.

**Acceptance criteria**

* Replace contents of the project status with Primer components:

* StatusButton, with a dropdown (similar to meetings)

* Description (long text)

* Begin of the insertionOn the **overview** tab, there is a pencil icon in the header which is an invisible icon button

* When clicking that, the status description will switch to CKEditor edit mode (similar to meeting notes), with two actions:

* Save (primary)

* Cancel (secondary)

* On the **dashboard** tab, there is a three dots menu.

* End of the insertion Clicking on the three dots, will open a menu Begin of the insertionwith:

* End of the insertion Begin of the deletion withEnd of the deletion an option to edit the status Begin of the insertiondescription

End of the insertion Begin of the deletion description:

End of the deletion * Begin of the deletion Label: tbd

* End of the deletion When clicking that, the status description will switch to CKEditor edit Begin of the insertionmode (similarEnd of the insertion Begin of the deletion mode, similarEnd of the deletion to meeting Begin of the insertionnotes)End of the insertion Begin of the deletion notes,End of the deletion with two actions: Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Save (primary) Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Cancel (secondary) Begin of the insertion

* an optionEnd of the insertion Begin of the deletion


<br>

**Screens**

Display (non-edit) mode; the user does not have permissionEnd of the deletion to Begin of the insertionremove the widget

End of the insertion Begin of the deletion change status:

<img class="image_resized op-uc-image op-uc-image_inline" style="width:457px;" src="/api/v3/attachments/779558/content">

Display (edit) mode:

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

tbd

**Technical notes**

End of the deletion * Begin of the insertionWhen lacking the permission:

End of the insertion Begin of the deletion <br>


**Permissions and visibility considerations**

End of the deletion * Begin of the insertiontheEnd of the insertion Begin of the deletion TheEnd of the deletion StatusButton button can be read-only to some users (no dropdown) Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertiontheEnd of the insertion Begin of the deletion TheEnd of the deletion description text can also be read-only to some users (no Begin of the insertionpencil button or option in the menu)


**Screens**End of the insertion Begin of the deletion three dots menu).&nbsp;


**Translation considerations**End of the deletion

Begin of the insertionDisplay mode on the dashboard tab:

<img class="image_resized op-uc-image op-uc-image_inline" style="width:457px;" src="/api/v3/attachments/779558/content">

Edit edit modeEnd of the insertion Begin of the deletion * _\-_


**OutEnd of the deletion of Begin of the insertionthe description field:End of the insertion Begin of the deletion scope**End of the deletion

Begin of the insertion<figure class="image image_resized op-uc-figure" style="width:281px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/785764/content"></div></figure>

<br>End of the insertion Begin of the deletion * \-End of the deletion