Admin UI blank state banner

Review Request #10873 — Created Feb. 1, 2020 and updated

hxqlin
Review Board
master
4dab5d0...
reviewboard

This RB creates the new component for improving usability of the admin
page. Currently, it's not very clear what new users need to do when they
come to the admin UI for the first time.

This banner displays the various steps that an admin needs to complete
in order to start using their Review Board instance with links to the
corresponding setting and documentation. The banner can be dismissed
using the 'x' in the top right corner and the user can view different
slides by clicking on the corresponding pagination dot or using the
'previous' and 'next' arrows. Once a slide is viewed, the corresponding
dot becomes checked. For the slide currently being viewed, the dot is
filled in.

When user navigates to another page after having interacted with the
banner, the state of the banner is preserved. That is, the banner will
show the slide that the user left on and whether other slides were
viewed. The state of the banner is reset if the banner is dismissed.

Finally, users can toggle showing or hiding the banner by going to the
Support setting in the administration page.

Asana link: https://app.asana.com/0/1157742969496494/1156047935486230/f

Manual testing only so far; will write unit & integration tests once
the component's behavior and implementation are finalized.

Loading file attachments...

Description From Last Updated

Col: 32 Missing semicolon.

reviewbotreviewbot

E501 line too long (83 > 79 characters)

reviewbotreviewbot

Col: 11 Missing semicolon.

reviewbotreviewbot

E302 expected 2 blank lines, found 1

reviewbotreviewbot

E501 line too long (80 > 79 characters)

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

JSHint

hxqlin
hxqlin
hxqlin
hxqlin
  1. 
      
  2. Some thinking points for reviewers:

    1. Should authentication settings and inviting team members be combined? From the documentation, they're related.
    2. Should we even show checkmarks at all? Not all the steps will have them and it might be confusing if we show them on some but not others.
    3. The documentation says enabling logging is part of the minimum steps for setup so I added a slide for that. However, the docs also said that it's disabled by default but I don't think I enabled it on my local instance and it was already enabled. Not sure if that slide is needed or not.
    4. Default reviewers is a recommended step in the documentation and seems to be about the same importance as review groups. Should that also be a slide?
    5. It feels like there's a lot of slides. Do we need to cut down and if so, where?
    6. Not all the descriptions for the steps take up the same number of lines so the height of the banner and position of the nav buttons moves slightly. Is this an issue and if so, how should we address it? (I'm thinking we'd set the description container to a fixed height?)
    1. Hi Hannah, the banner looks really good!

      I do have some feedback to share:

      1. Like Christian mentioned on Slack, it would be nice to see how many steps are in the banner, as well as to see what step the user is currently on. This will give users an idea of where they are so that they won't feel lost.

      2. Also like Christian mentioned, I think it would be better having the close button at the top right. Also, keep in mind that if the user accidentally clicks Dismiss instead of Next, they'll end up closing the banner :(

      3. I'm not sure about having "You're almost ready to start using Review Board!" appearing after the second recommended step. I think it would be cool to mention this in step 5 instead.

      4. About your question for the fixed height for the description, I think that would be nice to do to ensure the design stays consistent (assuming the descriptions are not long and will for sure not overflow off the container :P)

      5. I think it would be nice to keep the logging step, however I can also see that it might be confusing if the user already has logging enabled. Perhaps we can do a check for whether or not logging is enabled, and then hide or checkmark the step if it is enabled? (Just an idea; don't feel obligated to follow it :P)

      6. About review groups and default users, would it be possible to mention both as one step? Not sure though if all the information can fit into the banner (unless we find a way to make a short, yet informative description).

    2. Hi Hannah, the video looks great! 👍

      1. [For question 6] I also think we should fix the height for the description as Katherine mentioned above. I think you may give the container a fixed height and may use !important in css to address this is important.
      2. I think it would be great if we are able to restart this guidline after the user close/dismiss the guildline. I think sometime, as users, they may want to go over again after using the app a while. This is just my thought. :P
      3. [For question 5] I think we can split it into 2 main sections (one is set-up steps, another is recommendations), by changing the background colors. It will tell users that the following slides referring our recommendations.
      4. [For question 2] Instead of checkmarks, we can definitely show how many steps we left. But my ideas is to show numbers(for set-up steps) and some dots buttons (for recommendations) at the center of the container (top or bottom). The numbers and dots buttons are clikable and can jump to corresponding pages. For the current stages, we may have:
        1 2 3 4 5 * * * * *
        I know it may not be consistent, but I do think have 10 steps for the guidline which would be too much. I think if we use numbers and dots buttons, we can tell users which parts would be slightly more important than another.
  3. 
      
hxqlin
hxqlin
hxqlin
Review request changed

Change Summary:

Implement ability to toggle setting to hide/show the banner and add checkmarks for viewed slides in the pagination dots.

Commit:

-15e71e57723df069b2b685c46d428556cb09114d
+01739a3a9240798466f57e67e715621c86741f28

Diff:

Revision 6 (+396 -3)

Show changes

Checks run (2 failed)

flake8 failed.
JSHint failed.

flake8

JSHint

hxqlin
hxqlin
hxqlin
Review request changed

Change Summary:

Refactor template; separated review groups & default reviewers slides.

Commit:

-11512076e5255a29ac4f7110ff48dda1e209c0d7
+c679c3598fcce8fdb4621d00f5c8c01bbac72af5

Diff:

Revision 8 (+427 -3)

Show changes

Added Files:

Checks run (1 failed, 1 succeeded)

flake8 failed.
JSHint passed.

flake8

hxqlin
Review request changed
Loading...