[#2159] Display the Approve Partner button on the top with a tooltip #2163

rhian-cs · 2021-02-19T13:49:12Z

Resolves #2159

Description

In the Approve Partner screen, the Approve Partner button was at the bottom of the page.
Since the page is quite long, it would be interesting if the user could see the button either at the top or while they're scrolling the page.

Two options were suggested by @edwinthinks. The first is placing the button at the top of the page, beside the "Application Details" header. However, this may encourage the user to not read the application instead and just click Approve. The other option would be to add a fixed button that scrolls with the user, which is what I did.

To test the changes I also added a fixture to help mock the Partner API.

Type of change

Minor adjustment (non-breaking change which fixes an non-bug issue)

How Has This Been Tested?

Manual testing:

After setting up both Diaper and Partner, log in Diaper, go to Partner Agencies
Add two Partner agencies and invite both of them
Log in the Partner app with one of the partners and request a review
In the Diaper app, there should be at least two Partners now: one invited and one awaiting review, both of which should have the "Review Application" action available
Click on the Review Application button of the "invited" partner. The Approve Partner button should be visible but disabled, and it should show a tooltip informing the user what to do.
Go back and click on the Review Application of the "awaiting review" partner. The Approve Partner button should be visible, enabled and should display no tooltip.

Automated testing:

For each of the partners above (one invited and one awaiting review) I added the following tests:

Test if the Approve Partner button is always visible
Test if the button is enabled for the "awaiting review" partner, but disabled for the "invited" partner
Test if the button displays a tooltip for the "invited" partner, but shows no tooltip for the "awaiting review" partner

Screenshots

Before changes

The Approve Partner button was at the bottom of the page, only visible and enabled for "awaiting review" partners and had no tooltip.

The button was never visible when the user was at the top of the page.

In case the user scrolled down, viewing a "invited" partner, the button was not visible:

In case the user scrolled down, viewing an "awaiting review" partner, the button was visible:

After changes

The button is now at a fixed position at the bottom right of the screen. The button is always visible, but disabled for "invited" partners. It also displays a tooltip for "invited" partners.

Desktop view:

When scrolling to the bottom of the page:

Mobile view:

Tooltip:

…lication Details' text

…parnter in question hasn't yet made a request for an approval, whilst showing a tooltip in the latter case

…f the screen

…ocking Partner API

edwinthinks · 2021-02-19T14:21:13Z

@rhian-cs thanks for the PR! I've got a few suggestions now that I see the snapshots.

Could we add a background to the container of the button? That way it doesn't seem like a floating button but rather a bar on the bottom /w a button on it?
Could we move the button the bottom left instead? I realize the users are already accustomed to it being on the bottom left and putting it on the bottom right might cause a bit of confusions.

Otherwise I think this is looking great!

… to the container

rhian-cs · 2021-02-19T17:20:16Z

Hello, all changes were successfully added.

Desktop view at the middle of the page

Desktop view at the bottom of the page (unfortunately covers "built with ❤" text)

Mobile view at the middle of the page

I took the liberty of centering the button, but if that is undesirable, please let me know.

Mobile view at the bottom of the page

edwinthinks · 2021-02-21T14:40:37Z

app/views/partners/approve_partner.html.erb

-          </div>
+        </div>
+        <div id="approve-application-button">
+          <% tooltip_message = "Partner has not requested approval yet. Partners are able to request approval going into 'My Organization' and clicking 'Request Approval' button" %>


Suggested change

<% tooltip_message = "Partner has not requested approval yet. Partners are able to request approval going into 'My Organization' and clicking 'Request Approval' button" %>

<% tooltip_message = "Partner has not requested approval yet. Partners are able to request approval by going into 'My Organization' and clicking 'Request Approval' button." %>

edwinthinks

This looks good and I really like the specs you've added.

However, I would hold off until we deprecate the API calls as mentioned in one of my comments.

edwinthinks · 2021-02-21T14:46:12Z

spec/system/partner_system_spec.rb

+def stub_get_partner_request(partner_id)
+  allow(ENV).to receive(:[]).and_return(ENV)
+  allow(ENV).to receive(:[]).with("PARTNER_REGISTER_URL").and_return("https://partner-register.com")
+  allow(ENV).to receive(:[]).with("PARTNER_BASE_URL").and_return("https://partner-register.com")
+  allow(ENV).to receive(:[]).with("PARTNER_KEY").and_return("partner-key")
+
+  partner_response = File.read("spec/fixtures/partner_api/partner.json")
+
+  stub_request(:get, "https://partner-register.com/#{partner_id}")
+    .to_return(status: 200, body: partner_response, headers: {})
+end


This might be deprecated very soon as the update to main to merge the two applications has been merged in. That means, we won't need to make this API call once we've updated the controller to directly retrieve from the partner's database rather than go through the API.

I think we can hold off on this until that change which should be coming soon

…test for that change

edwinthinks · 2021-03-06T20:14:31Z

@rhian-cs hey there -- I've just merged in code to avoid needing to do the API calls in here. Could you update this code in accordance to the changes made in that PR? Thanks!

…ltip

rhian-cs · 2021-03-09T16:51:18Z

Hello there!
I've updated the specs.
The tests took some hours to finish on my machine, so I tested only the individual files when making the changes.

…stable without hovering the button

edwinthinks · 2021-03-09T23:38:29Z

@rhian-cs nice work! LGTM

The tests took some hours to finish on my machine, so I tested only the individual files when making the changes.

Yeh, it is a pretty large test suite. I personally just push up code and see if the CI can do it faster for me :)

Rhian Moraes added 8 commits February 17, 2021 11:48

Moved Approve Partner button to the top of the page - beside the 'App…

225e2bb

…lication Details' text

Made Approve Partner button always show, but be disabled in case the …

ca45696

…parnter in question hasn't yet made a request for an approval, whilst showing a tooltip in the latter case

[Bonus Round] Made the Approve button stay fixed in the bottom-left o…

30a71ea

…f the screen

Improved readability of the button and its tooltip in the HTML

9c68c19

Added basic test for the button and the tooltip

8c5f1b5

Added test for when partner is awaiting review

7103ae5

Fixed issue regarding environment variables not being accepted when m…

7e381d7

…ocking Partner API

Added test for whether or not the Approve Partner button is disabled

40ad9c5

Changed position of the Approve Partner button and added a background…

ccf22a2

… to the container

edwinthinks reviewed Feb 21, 2021

View reviewed changes

Fixed grammar mistake in Approve Partner button tooltip and adjusted …

20785b3

…test for that change

Rhian Moraes added 2 commits March 8, 2021 16:36

Merge branch 'main' into 2159-display-approve-partner-button-with-too…

1a63d63

…ltip

Updated specs and removed unnecessarry api mocks

a893da3

Removed test for tooltip in partners_requests_spec since it is not te…

6300900

…stable without hovering the button

edwinthinks merged commit 3729b72 into rubyforgood:main Mar 9, 2021

rhian-cs deleted the 2159-display-approve-partner-button-with-tooltip branch May 27, 2021 13:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#2159] Display the Approve Partner button on the top with a tooltip #2163

[#2159] Display the Approve Partner button on the top with a tooltip #2163

rhian-cs commented Feb 19, 2021

edwinthinks commented Feb 19, 2021

rhian-cs commented Feb 19, 2021

edwinthinks Feb 21, 2021

edwinthinks left a comment

edwinthinks Feb 21, 2021

edwinthinks commented Mar 6, 2021

rhian-cs commented Mar 9, 2021 •

edited

Loading

edwinthinks commented Mar 9, 2021

	<% tooltip_message = "Partner has not requested approval yet. Partners are able to request approval going into 'My Organization' and clicking 'Request Approval' button" %>
	<% tooltip_message = "Partner has not requested approval yet. Partners are able to request approval by going into 'My Organization' and clicking 'Request Approval' button." %>

[#2159] Display the Approve Partner button on the top with a tooltip #2163

[#2159] Display the Approve Partner button on the top with a tooltip #2163

Conversation

rhian-cs commented Feb 19, 2021

Description

Type of change

How Has This Been Tested?

Manual testing:

Automated testing:

Screenshots

Before changes

After changes

edwinthinks commented Feb 19, 2021

rhian-cs commented Feb 19, 2021

Desktop view at the middle of the page

Desktop view at the bottom of the page (unfortunately covers "built with ❤" text)

Mobile view at the middle of the page

Mobile view at the bottom of the page

edwinthinks Feb 21, 2021

Choose a reason for hiding this comment

edwinthinks left a comment

Choose a reason for hiding this comment

edwinthinks Feb 21, 2021

Choose a reason for hiding this comment

edwinthinks commented Mar 6, 2021

rhian-cs commented Mar 9, 2021 • edited Loading

edwinthinks commented Mar 9, 2021

rhian-cs commented Mar 9, 2021 •

edited

Loading