As a Project Coordinator, I want to see a Task list when I create or edit a project, so that I can complete forms in any order

[matthieu-foucault]

Description:

When creating or editing a project, i.e. when creating a project revision, a large number of fields may be edited. To follow UX best practices, those fields should be divided in multiple forms: Overview, Managers, Contacts, Attachments, and a form for the different schedules. When multiple forms have to be filled, one possible UI pattern is the task list.

This user story would add a task list as shown below in the left side of the page when creating a project revision.

See the CIF Workflow Co-design for more examples.

A ProjectRevision component needs to be created to control the transitions between the different forms, and whether the task list will show a link to a page with a "Submit" button (later to be replaced to a link to the "Check Answers" page, see #226)

Acceptance Criteria:

Given that I clicked the button to start a project When I am redirected to the project overview form, at /cif/project-revision/<id>/form/overview Then I see the task list on the left, and the project overview form on the right And the status of the "Project Overview" from is "Not started" And the "Project Overview" form is highlighted in the task list.

Given that I filled the project overview form and it is valid When I click the "Submit Project Overview" button Then I am redirected to /cif/project-revision/<id>/check-answers And the project overview form status is changed to staged/"Complete"

Given that I am viewing the /cif/project-revision/<id>/check-answers page When I click the submit button Then the project revision is submitted and I am redirected to the project list check answers page is very simple with just a submit button, nothing else. To be completed in #226

Given that I am viewing the overview form When I click on the "Add projects managers" link Then I am redirected to /cif/project-revision/<id>/form/managers

When I click on the "Add projects contacts" link Then I am redirected to /cif/project-revision/<id>/form/contacts

When I click on the "Add attachments" link Then I am redirected to /cif/project-revision/<id>/form/attachments

Given that I am opening a form with a status of "Not Started" Then the Submit <form name> and "Undo Changes" buttons are disabled

When I change a form input Then the Submit <form name> and "Undo Changes" buttons are enabled, and the form status is changed to "In Progress"

Given that I am viewing a form with a status of "In Progress" and that one or several of the inputs are invalid When I click the Submit <form name> button Then the validation errors are displayed and the form status changes to "Attention Required" errors can be displayed using the default rjsf/core and later refined in #200

Skip button and Discard Project revision to be covered in separate user stories

Development Checklist:

• [ ] When starting a project revision, form_change records should only be created on the first edit
• [ ] Add a new state for form_change records: staged
• [ ]
• [ ] Meets the DOD

Notes:

-

Personas:

Operations Team

[matthieu-foucault]

Hey team! Please add your planning poker estimate with ZenHub @AlexZorkin @dleard @pbastia

[pbastia]

We will be breaking down the work in separate pull requests: the routing, the component styling, ...

[matthieu-foucault]

@suhafa you can find more wireframes in our workflow co-design Miro board, in the frame titled "#225: Support multiple forms using a task list"

[matthieu-foucault]

Closing this, in favor of multiple, smaller user stories under a task list epic

[suhafa]

(uploading just for reference)

• Edited the position of buttons
• Suggestion: Have 'optional' fields or not applicable categories under task list be collapsible dropdown, and have them collapsed if not relevant at that phase of the project to reduce visual load and direct user to focus on what tasks are important.