Enhance the review request blank state user experience

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

bui1
Review Board
master
reviewboard

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

Summary Author
Enhance the review request blank state user experience
bui1@ualberta.ca
Loading file attachments...

Description From Last Updated

There's some hilarious irony in these placeholders recommending limiting to 50 characters and wrapping to 72, then blasting past those ...

daviddavid

I think the placeholder for new items should go at the end of the list. This is where new items ...

daviddavid

E501 line too long (93 > 79 characters)

reviewbotreviewbot

E501 line too long (93 > 79 characters)

reviewbotreviewbot

E501 line too long (84 > 79 characters)

reviewbotreviewbot

E501 line too long (93 > 79 characters)

reviewbotreviewbot

E114 indentation is not a multiple of four (comment)

reviewbotreviewbot

E501 line too long (84 > 79 characters)

reviewbotreviewbot

E501 line too long (93 > 79 characters)

reviewbotreviewbot

E114 indentation is not a multiple of four (comment)

reviewbotreviewbot

E501 line too long (83 > 79 characters)

reviewbotreviewbot

E502 the backslash is redundant between brackets

reviewbotreviewbot

E502 the backslash is redundant between brackets

reviewbotreviewbot

E502 the backslash is redundant between brackets

reviewbotreviewbot

E501 line too long (83 > 79 characters)

reviewbotreviewbot

E501 line too long (83 > 79 characters)

reviewbotreviewbot

E502 the backslash is redundant between brackets

reviewbotreviewbot

E502 the backslash is redundant between brackets

reviewbotreviewbot

E502 the backslash is redundant between brackets

reviewbotreviewbot

E502 the backslash is redundant between brackets

reviewbotreviewbot

E502 the backslash is redundant between brackets

reviewbotreviewbot

E501 line too long (83 > 79 characters)

reviewbotreviewbot

E501 line too long (80 > 79 characters)

reviewbotreviewbot

E501 line too long (83 > 79 characters)

reviewbotreviewbot

E502 the backslash is redundant between brackets

reviewbotreviewbot

E502 the backslash is redundant between brackets

reviewbotreviewbot

E502 the backslash is redundant between brackets

reviewbotreviewbot

E502 the backslash is redundant between brackets

reviewbotreviewbot

E502 the backslash is redundant between brackets

reviewbotreviewbot

E501 line too long (83 > 79 characters)

reviewbotreviewbot

E501 line too long (80 > 79 characters)

reviewbotreviewbot

E127 continuation line over-indented for visual indent

reviewbotreviewbot

E127 continuation line over-indented for visual indent

reviewbotreviewbot

E127 continuation line over-indented for visual indent

reviewbotreviewbot

E127 continuation line over-indented for visual indent

reviewbotreviewbot

E127 continuation line over-indented for visual indent

reviewbotreviewbot

E127 continuation line over-indented for visual indent

reviewbotreviewbot

E999 SyntaxError: invalid syntax

reviewbotreviewbot

E113 unexpected indentation

reviewbotreviewbot

E113 unexpected indentation

reviewbotreviewbot

can we use BEM for the class name?

hxqlinhxqlin

is it possible to use one of the greys from reviewboard/static/rb/css/ui/colors.less ?

hxqlinhxqlin

i think this class should follow the BEM naming conventions and maybe be clearer about what it's used for eg. ...

hxqlinhxqlin

from the screenshot, the container looks about the same size as the thumbnails and might share some of the same ...

hxqlinhxqlin

i think we should be using BEM here for the class names too

hxqlinhxqlin

i think the padding should use variables like in reviewboard/static/rb/css/ui/page-sidebar.less

hxqlinhxqlin

missing documentation for this function

hxqlinhxqlin

missing documentation

hxqlinhxqlin

getting the element by appending the target value to the id selector and using jQuery to search for that feels ...

hxqlinhxqlin

What about discarding "Fill out the" in the label? It seems kinda repetitive when every item in the list has ...

LittleGreyLittleGrey

should value be "Click to browse"? (ie. first letter capitalized)

hxqlinhxqlin

i think this would be better named as this._$editButton because it can be clicked and its role is button

hxqlinhxqlin

i think this could just be called this._$editIcon since it's actually referring to the icon

hxqlinhxqlin

from the other variables defined before this one, i think the id should be suffixed with -action to be consistent

hxqlinhxqlin

i think this.$el.removeClass('placeholder-text') would be clearer

hxqlinhxqlin

i think this.$el.addClass('placeholder-text') would be clearer

hxqlinhxqlin

this.$el.removeClass('placeholder-text')

hxqlinhxqlin

this.$el.addClass('placeholder-text')

hxqlinhxqlin

We generally want to use parens for wrapping long things rather than continuation characters: base_placeholder_text = ( '... ' '... ...

daviddavid

Parens instead of \

daviddavid

Parens here too.

daviddavid

We use the name "Base" to indicate that the class will be inherited from. In this case I think "ReviewRequestFieldRequirements" ...

daviddavid

This should have a trailing comma at the end. Please also keep the keys in alphabetical order.

daviddavid

Please put this blank line back.

daviddavid

Should have two blank lines on either side of the top-level block.

daviddavid

Add a blank line here, please.

daviddavid

Since we're changing this, let's take the opportunity to move these to the new colors definitions. @file-attachment-bg: #rb-ns-ui.colors[@white]; @file-attachment-overlay-bg: #rb-ns-ui.colors[@grey-90]; ...

daviddavid

Don't need to add this line.

daviddavid

This should be in the imperative mood rather than passive ("Change the publish..." instead of "Changes")

daviddavid

Please wrap this line to 80 columns.

daviddavid

Please add a blank line between these two. We also like to make sure any jQuery-type variable starts with $, ...

daviddavid

Please use single-quotes instead of double.

daviddavid

This can be a one-liner, and we can also use jQuery's eq method to simplify the selector: this.$buttons.eq(0).prop( 'disabled', this.requiredCheckboxes.length ...

daviddavid

There are a few things in here. First, since we're in ES6, we can use template strings (note the backticks). ...

daviddavid

This line can just be this._changePublishButtonState()

daviddavid

In ES6 files, we have a much better way of formatting text like this: this._$attachments.prepend(dedent` <div class="rb-c-file-upload-container"> <div> <p>Drop file ...

daviddavid

In jQuery calls when creating a new (single) element, you don't need the closing tag.

daviddavid

Wrap to 80 columns please.

daviddavid

Wrap to 80 columns.

daviddavid

Add a blank line in here.

daviddavid

Wrap to 80 columns.

daviddavid

Add a blank line in here.

daviddavid

Wrap to 80 columns.

daviddavid

Perhaps I'm reading this wrong, but won't this actually write the placeholder text to the database? Don't we want to ...

daviddavid

E302 expected 2 blank lines, found 1

reviewbotreviewbot

W292 no newline at end of file

reviewbotreviewbot

E303 too many blank lines (2)

reviewbotreviewbot

E303 too many blank lines (2)

reviewbotreviewbot
Checks run (1 failed, 1 succeeded)
flake8 failed.
JSHint passed.

flake8

bui1
Review request changed

Checks run (1 failed, 1 succeeded)

flake8 failed.
JSHint passed.

flake8

bui1
Review request changed

Summary:

-WIP Explore codebase for the review request blank state project
+WIP Enhance the review request blank state user experience

Description:

~  

Add a edit icon beside the files section title as a way to test out solutions.

  ~
  • Add a edit icon to the file attachment area and made it open by default on review request drafts
  +
  • Created a file attachment box area where users can click a button or drag and drop a file into
  +
  • Changed the banner to include a checkbox group that holds all the required fields that need to be filled out
  +
  • Disabled the publish button until all the checkboxes have been checked off
  +
  • Experimented with how placeholder text is going to work and look like
   
~  

Default Fields are defined in builtin_fields.py, fields.py is defines field behaviour,

~   review_request_box.js gets all the fields in the review request and renders it to the ReviewRequestEditorView.es6.js.
~   review_request_box.html is where the draft review request template page is defined.

  ~

Refer to the screenshot for what it looks like so far

  ~
  ~

TODO

  + - Figure out how to add reviewer group/people to the checkbox group if the field itself isn't required but
  + it's table header (reviewers) is
  + - Fix up file attachment area so the box doesn't stretch when attempting to drag and drop
  + - Finalize placeholder text behaviour and styling
  + - Make sure files attach to the right hand side of the file drop container and not the left
  + - Unit Tests

Commits:

Summary Author
-
WIP Explore codebase for the review request blank state project
bui1@ualberta.ca
+
WIP Explore codebase for the review request blank state project
bui1@ualberta.ca

Diff:

Revision 3 (+402 -44)

Show changes

Added Files:

Checks run (1 failed, 1 succeeded)

flake8 failed.
JSHint passed.

flake8

bui1
Review request changed

Description:

   
  • Add a edit icon to the file attachment area and made it open by default on review request drafts
   
  • Created a file attachment box area where users can click a button or drag and drop a file into
   
  • Changed the banner to include a checkbox group that holds all the required fields that need to be filled out
   
  • Disabled the publish button until all the checkboxes have been checked off
   
  • Experimented with how placeholder text is going to work and look like
   
   

Refer to the screenshot for what it looks like so far

   
   

TODO

    - Figure out how to add reviewer group/people to the checkbox group if the field itself isn't required but
    it's table header (reviewers) is
-   - Fix up file attachment area so the box doesn't stretch when attempting to drag and drop
    - Finalize placeholder text behaviour and styling
-   - Make sure files attach to the right hand side of the file drop container and not the left
    - Unit Tests

Commits:

Summary Author
-
WIP Explore codebase for the review request blank state project
bui1@ualberta.ca
+
WIP Explore codebase for the review request blank state project
bui1@ualberta.ca

Diff:

Revision 4 (+424 -54)

Show changes

Checks run (1 failed, 1 succeeded)

flake8 failed.
JSHint passed.

flake8

bui1
Review request changed

Description:

   
  • Add a edit icon to the file attachment area and made it open by default on review request drafts
   
  • Created a file attachment box area where users can click a button or drag and drop a file into
   
  • Changed the banner to include a checkbox group that holds all the required fields that need to be filled out
   
  • Disabled the publish button until all the checkboxes have been checked off
   
  • Experimented with how placeholder text is going to work and look like
   
   

Refer to the screenshot for what it looks like so far

   
   

TODO

~   - Figure out how to add reviewer group/people to the checkbox group if the field itself isn't required but
~   it's table header (reviewers) is
  ~ - Server side rendering of required fields
  ~ - Fix placeholder text styling in editable/non-editable use cases
-   - Finalize placeholder text behaviour and styling
    - Unit Tests

Commits:

Summary Author
-
WIP Explore codebase for the review request blank state project
bui1@ualberta.ca
+
WIP Explore codebase for the review request blank state project
bui1@ualberta.ca

Diff:

Revision 5 (+484 -52)

Show changes

Removed Files:

Added Files:

Checks run (1 failed, 1 succeeded)

flake8 failed.
JSHint passed.

flake8

bui1
Review request changed

Description:

   
  • Add a edit icon to the file attachment area and made it open by default on review request drafts
   
  • Created a file attachment box area where users can click a button or drag and drop a file into
   
  • Changed the banner to include a checkbox group that holds all the required fields that need to be filled out
   
  • Disabled the publish button until all the checkboxes have been checked off
   
  • Experimented with how placeholder text is going to work and look like
   
   

Refer to the screenshot for what it looks like so far

   
   

TODO

-   - Server side rendering of required fields
    - Fix placeholder text styling in editable/non-editable use cases
    - Unit Tests

Commits:

Summary Author
-
WIP Explore codebase for the review request blank state project
bui1@ualberta.ca
+
WIP Explore codebase for the review request blank state project
bui1@ualberta.ca

Diff:

Revision 6 (+496 -54)

Show changes

Checks run (1 failed, 1 succeeded)

flake8 failed.
JSHint passed.

flake8

bui1
Review request changed

Summary:

-WIP Enhance the review request blank state user experience
+Enhance the review request blank state user experience

Description:

~  
  • Add a edit icon to the file attachment area and made it open by default on review request drafts
~  
  • Created a file attachment box area where users can click a button or drag and drop a file into
~  
  • Changed the banner to include a checkbox group that holds all the required fields that need to be filled out
~  
  • Disabled the publish button until all the checkboxes have been checked off
~  
  • Experimented with how placeholder text is going to work and look like
  ~

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 differnent 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 more easy to understand what changes are needed to make
  + on this request before posting their work.

   
~  

Refer to the screenshot for what it looks like so far

  ~

These changes include,

  + - The addition of a edit icon to the file attachment area and to mkee 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

   
~  

TODO

  ~

Refer to the screenshot for what it looks like so far.

-   - Fix placeholder text styling in editable/non-editable use cases
-   - Unit Tests

Testing Done:

  +

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 defualt 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 Test

  + - WIP after the code changes have been reviewed

Commits:

Summary Author
-
WIP Explore codebase for the review request blank state project
bui1@ualberta.ca
+
Enchance review request blank state user experience
bui1@ualberta.ca

Diff:

Revision 7 (+492 -40)

Show changes

Removed Files:

Added Files:

Checks run (1 failed, 1 succeeded)

flake8 failed.
JSHint passed.

flake8

bui1
bui1
Review request changed

Checks run (1 failed, 1 succeeded)

flake8 failed.
JSHint passed.

flake8

bui1
bui1
Review request changed

Checks run (1 failed, 1 succeeded)

flake8 failed.
JSHint passed.

flake8

bui1
Review request changed

Checks run (1 failed, 1 succeeded)

flake8 failed.
JSHint passed.

flake8

bui1
bui1
LittleGrey
  1. This looks solid to me! Good work! Only one suggestion on the check box label.

  2. What about discarding "Fill out the" in the label? It seems kinda repetitive when every item in the list has this text.

    1. Im just going off of the mockup the mentors and students agreed with. I'll leave it as is unless more people comment on it

  3. 
      
hxqlin
  1. looking good! i think it would be nice to have a more complete screenshot (ie. without cutting off the top navigation bar) so we can get the full effect of the new banner, especially because it adds so much vertical space

  2. can we use BEM for the class name?

  3. is it possible to use one of the greys from reviewboard/static/rb/css/ui/colors.less ?

  4. i think this class should follow the BEM naming conventions and maybe be clearer about what it's used for eg. rb-c-file-upload-container - file-area-container made me think that it's just used for showing a file or something like that

  5. reviewboard/static/rb/css/pages/reviews.less (Diff revision 12)
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    from the screenshot, the container looks about the same size as the thumbnails and might share some of the same properties right? are there constants defined for any of these properties that we can use?

  6. i think we should be using BEM here for the class names too

  7. i think the padding should use variables like in reviewboard/static/rb/css/ui/page-sidebar.less

  8. missing documentation for this function

  9. getting the element by appending the target value to the id selector and using jQuery to search for that feels kind of hacky - is it not possible to get the element from the event itself?

    1. Ended up using event.target based on https://api.jquery.com/event.target/

      Thanks for suggesting that!

  10. should value be "Click to browse"? (ie. first letter capitalized)

  11. i think this would be better named as this._$editButton because it can be clicked and its role is button

  12. i think this could just be called this._$editIcon since it's actually referring to the icon

  13. from the other variables defined before this one, i think the id should be suffixed with -action to be consistent

  14. i think this.$el.removeClass('placeholder-text') would be clearer

  15. i think this.$el.addClass('placeholder-text') would be clearer

  16. this.$el.removeClass('placeholder-text')

  17. this.$el.addClass('placeholder-text')

  18. 
      
bui1
bui1
bui1
david
  1. 
      
  2. There's some hilarious irony in these placeholders recommending limiting to 50 characters and wrapping to 72, then blasting past those limits.

    Rather than suggesting those in the text (while we think they're good ideas, and enforce them for our stuff, not everyone does), let's just show by example what good lengths are.

  3. I think the placeholder for new items should go at the end of the list. This is where new items show up, so it's like you're "filling in" the dashed box with the thing you're uploading.

  4. reviewboard/reviews/builtin_fields.py (Diff revision 14)
     
     
     
     
     

    We generally want to use parens for wrapping long things rather than continuation characters:

    base_placeholder_text = (
        '... '
        '... '
        '...')
    
  5. reviewboard/reviews/builtin_fields.py (Diff revision 14)
     
     
     

    This use of a continuation character is correct, though.

  6. reviewboard/reviews/builtin_fields.py (Diff revision 14)
     
     
     
     
     
     

    Parens instead of \

  7. reviewboard/reviews/builtin_fields.py (Diff revision 14)
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    Parens here too.

  8. reviewboard/reviews/fields.py (Diff revision 14)
     
     
     

    We use the name "Base" to indicate that the class will be inherited from. In this case I think "ReviewRequestFieldRequirements" might be more appropriate.

    But I don't think we even need a new class for this--this isn't Java. A function (get_review_request_required_fields, maybe?) would be better.

    Will need a docstring whichever way you go.

  9. This should have a trailing comma at the end. Please also keep the keys in alphabetical order.

  10. Please put this blank line back.

  11. reviewboard/static/rb/css/pages/reviews.less (Diff revision 14)
     
     
     
     
     
     

    Should have two blank lines on either side of the top-level block.

  12. reviewboard/static/rb/css/pages/reviews.less (Diff revision 14)
     
     
     

    Add a blank line here, please.

  13. reviewboard/static/rb/css/pages/reviews.less (Diff revision 14)
     
     
     
     
     
     

    Since we're changing this, let's take the opportunity to move these to the new colors definitions.

    @file-attachment-bg: #rb-ns-ui.colors[@white];
    @file-attachment-overlay-bg: #rb-ns-ui.colors[@grey-90];
    @file-attachment-overlay-border-color: #rb-ns-ui.colors[@grey-80];
    
    ...
    
    @file-attachment-border-color: #rb-ns-ui.colors[@grey-60];
    
  14. Don't need to add this line.

  15. This should be in the imperative mood rather than passive ("Change the publish..." instead of "Changes")

  16. Please wrap this line to 80 columns.

  17. Please add a blank line between these two.

    We also like to make sure any jQuery-type variable starts with $, so $checkbox for the name.

  18. Please use single-quotes instead of double.

  19. This can be a one-liner, and we can also use jQuery's eq method to simplify the selector:

    this.$buttons.eq(0).prop(
        'disabled',
        this.requiredCheckboxes.length !==
            this.numberOfBoxesChecked);
    
  20. There are a few things in here.

    First, since we're in ES6, we can use template strings (note the backticks).

    We should also not use the name "class", since it's a reserved word.

    Finally, anything inside a call to gettext must be a literal. It can't be computed due to the way the gettext scanner works. Fortunately, there's a formatter we can use:

    id: `${fieldName}-banner-checkbox`,
    className: 'banner-checkbox',
    label: interpolate(gettext('Fill out the %s field'),
                       [fieldName]),
    
  21. This line can just be this._changePublishButtonState()

  22. reviewboard/static/rb/js/views/reviewRequestEditorView.es6.js (Diff revision 14)
     
     
     
     
     
     
     
     

    In ES6 files, we have a much better way of formatting text like this:

    this._$attachments.prepend(dedent`
        <div class="rb-c-file-upload-container">
         <div>
          <p>Drop file attachments here</p>
          <p>or</p>
          <input type="button" id="select-file-for-review-action"
                 value="Click to browse">
         </div>
        </div>
    `);
    

    That said, we should probably also wrap this in _.template and pass all the user-visible text in as variables that are wrapped in gettext() to enable localization of this UI.

  23. In jQuery calls when creating a new (single) element, you don't need the closing tag.

  24. Wrap to 80 columns please.

  25. Add a blank line in here.

  26. Add a blank line in here.

  27. Perhaps I'm reading this wrong, but won't this actually write the placeholder text to the database? Don't we want to write an empty string instead?

    1. If an empty string was written after the user decides to save a response that is empty, the field will be populated with an empty text box removing the placeholder text set there to begin with. I was thinking that if the user ends up leaving a blank response, we could save the placeholder text so the user can come back to it if they wish to do so. I know this technically means the user can submit the review request with the placeholder text instead of any meaningful written changes but wanted your opinion and clarification regarding this behaviour.

      For now I changed the code so it saves the blank string.

  28. 
      
bui1
Review request changed

Description:

   

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 for what it looks like so far.

  ~

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

Commits:

Summary Author
-
Enhance the review request blank state user experience
bui1@ualberta.ca
+
Enhance the review request blank state user experience
bui1@ualberta.ca

Diff:

Revision 15 (+1184 -468)

Show changes

Added Files:

Checks run (1 failed, 1 succeeded)

flake8 failed.
JSHint passed.

flake8

bui1
bui1
Review request changed

Testing Done:

   

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 Test WIP

  ~

Unit Tests WIP

    - 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

  ~ request is non-editable
  + - Python backend returns the proper required fields from RB default settings
  + - WIP Placeholder text is rendered if there is no previously saved text
  + - WIP Placeholder text is not rendered if there is previously saved text

Commits:

Summary Author
-
Enhance the review request blank state user experience
bui1@ualberta.ca
+
Enhance the review request blank state user experience
bui1@ualberta.ca

Diff:

Revision 17 (+1300 -468)

Show changes

Checks run (1 failed, 1 succeeded)

flake8 failed.
JSHint passed.

flake8

bui1
Review request changed

Testing Done:

   

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 WIP

  ~

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
~   - WIP Placeholder text is rendered if there is no previously saved text
~   - WIP Placeholder text is not rendered if there is previously saved text

  ~ - Placeholder text is rendered if there is no previously saved text
  ~ - Placeholder text is not rendered if there is previously saved text

Commits:

Summary Author
-
Enhance the review request blank state user experience
bui1@ualberta.ca
+
Enhance the review request blank state user experience
bui1@ualberta.ca

Diff:

Revision 18 (+1294 -468)

Show changes

Checks run (1 failed, 1 succeeded)

flake8 failed.
JSHint passed.

flake8

bui1
Review request changed

Checks run (2 succeeded)

flake8 passed.
JSHint passed.
Loading...