Improve Source Interface /lookup UX #5096

DrGFreeman · 2020-01-15T02:09:23Z

Status

Ready for review.

Description of Changes

Fixes #5080.

Changes proposed in this pull request:

Implement source interface UX changes on /lookup as per #5080:

Move codename hint section to top of page.
Adjust codename hint section width and make responsive.
Increase vertical space between codename and "Submit" h2.
Set empty replies area backgroud to light grey.
Increase height of empty replies area.
Change empty replies text to "- No Messages -".
Change empty replies text p to h4.
Change empty replies text color to grey.

Testing

With the exception of reordering and moving element in the templates, there are not changes to the application logic. No changes in behaviour are therefore expected. The following tests are nevertheless recommended:

Codename hint position and visibility on subsequent logins

Access /lookup as a new source.
Check the codename hint is visible at the top of the panel, left of the "LOGOUT" button as per the screenshots below.
Check that the "Show" / "Hide" links in the codename hint work as expected.
Submit a document or message.
Check that the "Forgot your codename?" link in the flash message makes the codename hint visible.
Logout.
Login as the same source.
Check that the codename hint is not visible any more.

Read Replies section

Access /lookup as a source.
Check the "- No Messages -" item displays as per the screenshot below.
Logout.
Login to the Journalist Interface.
Reply to the source.
Log back in as the same source as in 1.
Check that the reply displays as expected in the "Read Replies" section.
Delete the reply.
Check that the "- No Messages -" item displays as per the screenshot below.

Deployment

Any special considerations for deployment? Consider both:

Upgrading existing production instances.
New installs.

N/A.

Checklist

If you made changes to the server application code:

Linting (make lint) and tests (make test) pass in the development container

If you made changes to `securedrop-admin`:

Linting and tests (make -C admin test) pass in the admin development container
N/A.

If you made changes to the system configuration:

Configuration tests pass
N/A.

If you made non-trivial code changes:

I have written a test plan and validated it for this PR
N/A.

If you made changes to documentation:

Doc linting (make docs-lint) passed locally
N/A.

If you added or updated a code dependency:

Choose one of the following:

I have performed a diff review and pasted the contents to the packaging wiki
I would like someone else to do the diff review
N/A.

Implement source interface UX changes on /lookup as per freedomofpress#5080: - Move codename hint section to top of page. - Adjust codename hint section width and make responsive. - Increase vertical space between codename and "Submit" H2. - Set empty replies area backgroud to light grey. - Increase height of empty replies area. - Change empty replies text to "- No Messages -". - Change empty replies text p to h4. - Change empty replies text color to grey.

DrGFreeman · 2020-01-15T02:25:13Z

Screenshots

Full page, default Tor Browser width (1000px)

Codename visible, width = 1000px

width > 880px (cross-over point to full width)

Codename visible, width > 880px (cross-over point to full width)

width <= 880px (cross-over point to full width)

Comments

I added a small margin on top of the codename hint so that it is vertically centered with the logout button (as it seems to be in the right mockup from @ninavizz). When the codename is visible, it looks a bit off as visible in screenshot above. I could remove the margin so it aligns with the top of the logout button.
I used the colors defined in securedrop/sass/_variables.sass. These do not exactly match those in the mockup. I can use custom colors to match the mockup exactly.

ninavizz · 2020-01-21T05:07:14Z

This looks great Dr G, thank you!

I like the margin—it should look "less broken" when closed (most of the time), than when open (infrequently).
Thanks for the nudge on the mockup colors not matching. As with the above, your gut was correct and I appreciate you using the defined colors in the SASS.

I'm happy to give this my thumbs-up, for the issue as spec'd.

DrGFreeman · 2020-01-21T17:45:51Z

@ninavizz, Thanks for the feedback!

Knowing you're satisfied with the layout, I'll do some more manual testing to ensure I haven't introduced any unwanted behavior (lesson learned from previous PRs) and switch the PR to "Ready for Review" when done.

DrGFreeman · 2020-01-22T02:42:37Z

@eloquence, @zenmonkeykstop, FYI, I changed the PR status from Work in progress to Ready for review and filled testing & checklist. This is ready for your review.

zenmonkeykstop · 2020-01-22T20:19:39Z

@DrGFreeman just FYI, I got into the weeds on test docs for the Qubes-based workstation today, but will be taking a spin through this PR tomorrow at the latest. Apologies for the delay!

zenmonkeykstop

Ran through test plan as follows:

Codename hint position and visibility on subsequent logins

Access /lookup as a new source.
Check the codename hint is visible at the top of the panel, left of the "LOGOUT" button as per the screenshots below.
Check that the "Show" / "Hide" links in the codename hint work as expected.
Submit a document or message.
Check that the "Forgot your codename?" link in the flash message makes the codename hint visible.
Logout.
Login as the same source.
Check that the codename hint is not visible any more.

Read Replies section

Access /lookup as a source.
Check the "- No Messages -" item displays as per the screenshot below.
Logout.
Login to the Journalist Interface.
Reply to the source.
Log back in as the same source as in 1.
Check that the reply displays as expected in the "Read Replies" section.
Delete the reply.
Check that the "- No Messages -" item displays as per the screenshot below.

Also did a diff review. One concern was the logout button being suppressed on pages other than /lookup (see comment)

zenmonkeykstop · 2020-01-24T02:20:51Z

securedrop/source_templates/base.html

@@ -30,10 +30,6 @@
        {% endblock %}

        <div class="panel selected">
-        {% if 'logged_in' in session %}


The logout button was moved from the base to lookup template as part of the layout changes. One consequence of this is that it no longer appears on other pages that use extend base.html - /why-journalist-key and the error pages being the most likely examples. It might be better to have the logout widget as an include, and include it on pages that may be rendered during an active session.

I actually didn't need to move the logout button, only ensure the HR that follows the button in base.html is not included when the codename hint is displayed in /lookup. The changes in 08edfa2 restores the button while keeping the /lookup layout as desired.

- Restore logout button in base.html so it displays on other pages. - Add conditional in template to prevent HR to display when codename hint is displayed.

zenmonkeykstop

LGTM with restoration of LOGOUT!

DrGFreeman · 2020-01-28T18:06:50Z

LGTM with restoration of LOGOUT!

Great! Thanks @zenmonkeykstop. Sorry you had to review twice.

DrGFreeman requested review from heartsucker, kushaldas and redshiftzero as code owners January 15, 2020 02:09

eloquence added this to Ready for Review in SecureDrop Team Board Jan 17, 2020

zenmonkeykstop self-assigned this Jan 22, 2020

zenmonkeykstop requested changes Jan 24, 2020

View reviewed changes

Restore logout button in base.html

08edfa2

- Restore logout button in base.html so it displays on other pages. - Add conditional in template to prevent HR to display when codename hint is displayed.

zenmonkeykstop approved these changes Jan 28, 2020

View reviewed changes

zenmonkeykstop merged commit e1c80cd into freedomofpress:develop Jan 28, 2020

SecureDrop Team Board automation moved this from Ready for Review to Done Jan 28, 2020

zenmonkeykstop mentioned this pull request Apr 29, 2020

Release SecureDrop 1.3.0 #5205

Closed

22 tasks

rocodes mentioned this pull request May 4, 2020

"Delete Reply?" confirmation dialog needs... work. #5152

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve Source Interface /lookup UX #5096

Improve Source Interface /lookup UX #5096

DrGFreeman commented Jan 15, 2020 •

edited

DrGFreeman commented Jan 15, 2020 •

edited

ninavizz commented Jan 21, 2020

DrGFreeman commented Jan 21, 2020

DrGFreeman commented Jan 22, 2020

zenmonkeykstop commented Jan 22, 2020

zenmonkeykstop left a comment

zenmonkeykstop Jan 24, 2020 •

edited

DrGFreeman Jan 26, 2020

zenmonkeykstop left a comment

DrGFreeman commented Jan 28, 2020

Improve Source Interface /lookup UX #5096

Improve Source Interface /lookup UX #5096

Conversation

DrGFreeman commented Jan 15, 2020 • edited

Status

Description of Changes

Testing

Deployment

Checklist

If you made changes to the server application code:

If you made changes to securedrop-admin:

If you made changes to the system configuration:

If you made non-trivial code changes:

If you made changes to documentation:

If you added or updated a code dependency:

DrGFreeman commented Jan 15, 2020 • edited

Screenshots

Comments

ninavizz commented Jan 21, 2020

DrGFreeman commented Jan 21, 2020

DrGFreeman commented Jan 22, 2020

zenmonkeykstop commented Jan 22, 2020

zenmonkeykstop left a comment

Choose a reason for hiding this comment

zenmonkeykstop Jan 24, 2020 • edited

Choose a reason for hiding this comment

DrGFreeman Jan 26, 2020

Choose a reason for hiding this comment

zenmonkeykstop left a comment

Choose a reason for hiding this comment

DrGFreeman commented Jan 28, 2020

DrGFreeman commented Jan 15, 2020 •

edited

If you made changes to `securedrop-admin`:

DrGFreeman commented Jan 15, 2020 •

edited

zenmonkeykstop Jan 24, 2020 •

edited