Enhance the review request blank state user experience

Review Request #10928 — Created Feb. 29, 2020 and updated — Latest diff uploaded


Review Board


The review request page when the user creates a new draft to publish their changes
is empty at first unless some fields have been populated by RB Tools such as
the commit summary and description. However, not always these fields are populated
and the user is subjected to a mostly empty page. This can be a confusing user
experience where one may not know which fields are required to post a change,
what kind of content is needed for the different inputs, and where to add new files
to the request. These changes will help clarify the user experience on this page
to make it more friendly, and easier to understand what changes are needed to make
on this request before posting their work.

These changes include,
- The addition of a edit icon to the file attachment area and to make it render by
default on review request drafts
- Creating a file attachment box area where users can click a button or drag and
drop a file into, making it easier to figure out where/how to add files to a request
- Changing the banner to include a checkbox group that holds all the required fields
that need to be filled out before posting a change
- Disabling the publish button until all the required checkboxes have been checked off
- Randomizing of placeholder texts from the Python backend
- Rendering of placeholder texts on various configured review request fields so the
user can understand what kind of input they need to make into a field

Refer to the screenshot (version 2) for what it looks like so far.

Manual Tests
- Using rbt post, check if the review request page renders properly with the
placeholder text, checkbox banner group, and file attachment areas shown
- Using the new review request page, check the same above scenario
- Placeholder text is rendered with a gray font color if the page is editable
by the user and if there is no previously saved value
- If there is a previously saved value, it renders with the blank font color
- Checkbox group in the draft banner has all the required fields from the
review request page
- Publish button stays disabled until the user has checked off all the required
check boxes
- Publish button renders disabled at first even when the page first renders if the
review request is not public yet and if the request is being edited on first save
- Placeholder text is randomly being changed from the python backend
- Placeholder text is being rendered if there is no previously saved value
- File attachment area is shown be default if the request is editable
- File attachment area is responsive on mobile even after adding/deleting files
- File attachment area is hidden if the request is not editable and if no files
exist for the review request
- All fields are keyboard accessible

Unit Tests
- Publish button is disabled when all required checkboxes are not checked off
- Publish button is enabled when all required checkboxes are checked off or
there are no required fields in the page
- File attachment area is shown by default if the review request is editable
- File attachment area is hidden if there are no attachments and the review
request is non-editable
- Python backend returns the proper required fields from RB default settings
- Placeholder text is rendered if there is no previously saved text
- Placeholder text is not rendered if there is previously saved text