Skip to content

[RUN-AS-IF-FOSS] POC: Sidebar Assignees Widget

Natalia Tepluhina requested to merge 292035-convert-the-assignees-feature-into-a-widget into master

What does this MR do?

Please keep in mind that in the current state this MR doesn't have any updates on tests as we need to validate the concept first

In this MR, we create a prototype of the sidebar assignees widget. The main requirements for it were:

  • widget should be able to work anywhere we need a list of assignees;
  • widget should be responsible for fetching and rendering a list of assignees, fetching a list of participants to render in the assignee dropdown, handle the user search functionality, perform an API call to update the assignee list, and communicate the changes to the parent component or any external application if necessary;
  • widget should handle errors on updating the list;
  • we should be able to delegate any assignee list updates from any place on the page to the widget.

The main complexity of the task is the fact that assignees and participants are not standalone properties; we fetch them differently depending on the context. The same applies to the mutation to update assignees: there are different mutations for the issue, merge request, and alert. That's why the list of component props is a bit bloated. Hopefully, we can communicate this to backend to check if it would be possible in the future to have a common Issuable type to fetch assignees and participants and update assignees having a unique issuable ID as a parameter.

The functionality is mostly based on BoardAssigneeDropdown component with a few important modifications:

  • widget is not bound anymore to any global state. We pass the current assignees list from the parent component/application as a prop to show initial assignees (mostly for swimlanes boards) but the widget is capable to fetch a list of assignees on itself with the passed query;
  • in order to be flexible, the widget also accepts participants query (with variables) and update assignees mutation (and its variables) from the parent component;
  • widget emits an event with updated assignees list to the parent component on successful update; this helps us to sync up the state with e.g. Swimlanes Vuex state where we also have assignees of issues on the given board;
  • widget exposes a method updateAssignees that accepts a list of assignees and returns a Promise that resolves to a list of updated assignees. This allows up to call the method anywhere on the page and get the latest assignees changes.

Currently, the widget is implemented on Swimlanes sidebar, issue sidebar, and MR sidebar. For demo purposes, I also added a button to the issue note component that calls a method to assign root user to the current issue (and unassign everyone else). In the future, this should give us a possibility to sync up between the notes application and sidebar assignees (we will need to retrieve a new assignees list from the backend as a JSON for this)

Known limitations

On the MR sidebar, we can't show icons to display if the assignee has permission to merge the MR. Should be possible after #299881 (closed) is resolved

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Related to #292035 (closed)

Edited by Natalia Tepluhina

Merge request reports