(feat) O3-2261: Add a back button to the location picker page

[usamaidrsk]

Requirements

• This PR has a title that briefly describes the work done including the ticket number. Ensure your PR title includes a conventional commit label (such as feat, fix, or chore, among others). See existing PR titles for inspiration.

For changes to apps

• My work conforms to the O3 Styleguide and design documentation.

If applicable

• My work includes tests or is validated by existing tests.
• I have updated the esm-framework mock to reflect any API changes I have made.

Summary

This PR adds a back button on change location screen, for a user to go back to previous page if they want to cancel the operation

Screenshots

cancel-btn-change-location.mp4

Related Issue

O3-2261

Other

[denniskigen]

Nicely done, @usamaidrsk. LGTM.

[ibacher]

Thanks @usamaidrsk. Couple of small things, but I think this basically looks good.

[mseaton]

Functionally this looks good in that it provides what is missing. Is this really the UI guideline that carbon advocates for this? I have the same question about the existing "Back" link on the password page that takes you back to the login page, with this odd link at the top of the url for this.

I would have thought things would look at lot more consistent to do this via a button alongside the main save button - eg. a Cancel button that would serve to take you back to the previous step.

For example, we have this pattern on the registration form:

We have this pattern on the cancel dialog:

Aside from these clear inconsistencies, it does seem like a styled button is a better UI than an unstyled link thrown at the top of the form.

Anyone else feel this way?

[rbuisson]

I see what @mseaton means here.

I think the <- Back button works well when you're within a multi-step flow of a "single page" (where screens come directly after one another though you don't feel you're moving away). Which is the case for the login page.

However, in the Location picker here, when opened outside of the login flow, the Back button is less intuitive. We're just leaving the home page to open a new 'full size' page. Therefore, a 'Discard/Confirm' button might make more sense.

@usamaidrsk , would you be able to go through both the OpenMRS style guide and designs to find examples or guidelines, as well as Carbon official documentation?

[usamaidrsk]

@rbuisson I do get it now.
I think I can as well consult from ux-design-advisory

[vasharma05]

Hi @mseaton @rbuisson,
I see @usamaidrsk didn't update the PR, we had a connect with Paul and he shared the new designs for the location picker (ticket O3-2951). Since the new implementation might take time, can we move ahead with the changes from @usamaidrsk or wait for the new location picker implementation only?
Thanks!

[rbuisson]

@vasharma05 @usamaidrsk , from my message on Slack, I still suggest:

In that case, if we are already differentiating the 2 cases of (1) location selection right after login VS (2) location selection from the home page, then I would suggest to replace the Back button with a standard discard/confirm button for case 2.

So let's just change to a standard button and merge that, while we can work on the new location picker later.

[usamaidrsk]

So let's just change to a standard button and merge that, while we can work on the new location picker later.

@rbuisson @vasharma05 @denniskigen I have updated this PR as per the suggestions.
Thanks

[rbuisson]

@usamaidrsk , you did put Confirm and Cancel one under the other, as opposed to one next the other.
Is this taken from an existing similar design?

Carbon suggests the latter for modals (I know it's not exactly a modal here, but it looks like one)

[vasharma05]

A small nit, but all good to go.
Thanks @usamaidrsk!

[vasharma05]

Hi @ibacher!
Can you please re-review this PR?
Thanks!

[ibacher]

Couple of small things, but generally looks good.