CARDS-1741: Add a "PageStart" extension point to the patient UI

[veronikaslc]

To test CARDS-1741 build and run with ./start_cards.sh --demo -P proms. Open http://localhost:8080/Survey to see demo warning banner.

also fixes CARDS-1929, CARDS-1930, CARDS-1931,

[sashaandjic]

The banner is not visible when prems or proms patient logs in.

Also, should we add banner here too?

[sashaandjic]

Steps to reproduce:

• start cards in either proms or prems mode
• login as admin
• create a Patient Info and Visit Info forms --> observe the surveys that are created
• logout and login as patient
• when survey form(s) are opened, notice that the demo banner is present but almost completely covered - only small slices on each end are visible

Please note: if in prems mode, you would need to generate a token to login as patient, as patients can only use links (with token) that are going to be mailed to them.

[marta-]

A couple of layout issues popped up in the Patient UI with the introduction of the Demo banner, and they need to be addressed:

• On a short screen (e.g. on a smartphone or a short desktop browser window) the footer containing the link to the Terms of Use is pushed too high and ends up being displayed above the action button. It should be positioned at the bottom, like it is when there is no banner.
  

• After logging in, when scrolling a survey up, the banner is visible on the sides behind the survey header. It should not be visible at all once the user starts scrolling up.
  
  

• The pagination controls look misplaced when the banner is on:
  

To replicate all of the above:

• start with -P proms --demo
• as admin, create patient info form and visit info form; the latter should have 6012-HC-Congenital Cardiac selected for the Clinic question to make sure there's a paginated survey to fill out
• from Chrome dev tools, switch to emulating a mobile device (the above screenshots are on emulated iPhone SE), then log in and complete surveys as a patient.

[marta-]

1. The absolute positioning of the banners does not work well in the default UI (admin and clinician), as the banners get scrolled up leaving an unsightly gap at the top (see screenshot).
   
   I suggest passing the position as a prop so we can customize it on a case by case basis.
2. All looks good now in the patient UI with one minor exception: the shadow of the banner visible on the sides of the patient ui header looks a bit messy. I suggest we get rid of that shadow from all banners.
   
3. There is still a screen without a banner:

• In Administration/Patient identification, uncheck the first checkbox ("Patients can answer surveys without a personalized link")
• Sign out and go to /Survey.html: a page displaying the welcome message and informing the user that "To fill out surveys, please follow the personalized link that was emailed to you." is displayed. There is no banner on that page.
  

[sashaandjic]

no banner here too:

[sashaandjic]

Cannot access Admin button on narrow screens (probably out of scope)

[sashaandjic]

Login page looks weird with both demo and maintenance banners:

[marta-]

Cannot access Admin button on narrow screens (probably out of scope)

Indeed it's out of scope.

Login page looks weird with both demo and maintenance banners:

This one is out of scope too, since the login page extension point was developed elsewhere.

These issues should be reported separately.

[marta-]

no banner here too:

The banner is there but it is under the landing page UI. TBH with the current implementation of the landing page it won't be trivial to display it. Additionally, given that the production workflows now exclude staff interacting with the app, this can be considered very low priority and should not condition the merge of this PR. We may even end up redoing the landing page completely, and we'll tackle the banner display then (or after).

[veronikaslc]

All should be fixed except reverting to the fixed position did not seem to fix #1 unsightly gap at the top propblem.

[sashaandjic]

small ui issue -not sure if it is related to this PR

Patient.1._.DATA-PRO.-.Google.Chrome.2022-09-23.09-40-27.mp4

DATA-PRO.-.Google.Chrome.2022-09-23.09-45-24.mp4

[sashaandjic]

On iPad and on cell phone patent cannot access the BEGIN button to start surveys.

DATA-PRO.-.Google.Chrome.2022-09-23.09-48-31.mp4

DATA-PRO.-.Google.Chrome.2022-09-23.09-48-06.mp4

[marta-]

small ui issue -not sure if it is related to this PR

It is related to this PR and I wouldn't call it small. The introduction of Collapse here appears to be the cause.

[sashaandjic]

Unable to access Admin button

Dashboard._.DATA-PRO.-.Google.Chrome.2022-09-26.13-29-37.mp4

[sashaandjic]

Something sticks out from the background and prevents users from editing

[veronikaslc]

Unable to access Admin button

Failing to load DashboardViews is most likely out of the scope as this PR does not seem to alter extension loading or DashboardViews in particular. wdt @marta-

Something stick out from the background and prevent users from editing

By some reason can not reproduce that one on my build

[marta-]

Failing to load DashboardViews is most likely out of the scope as this PR does not seem to alter extension loading or DashboardViews in particular. wdt @marta-

Indeed that's a poorly phrased log message. The cause of it is harmless, we simply don't have custom widgets displayed on the clinic dashboard (and we're not supposed to have them). Please ignore it.

Something stick out from the background and prevent users from editing

By some reason can not reproduce that one on my build

I can't replicate it either, but something did make the ghost element show up there at the bottom in that screenshot so I'll keep investigating.

[sashaandjic]

it turns out that issue with the vertical scroll bar on narrow screen is only happening in this PR 1929

[sashaandjic]

[veronikaslc]

[sashaandjic]

Can this be improved?

DATA-PRO.-.Google.Chrome.2022-09-27.12-17-16.mp4

[sashaandjic]

@veronikaslc this one is only happening in this PR

here is the video from dev branch:

Dashboard._.DATA-PRO.-.Google.Chrome.2022-09-27.12-22-39.mp4

[veronikaslc]

Can this be improved?

DATA-PRO.-.Google.Chrome.2022-09-27.12-17-16.mp4

This should be fixed now.

[sashaandjic]

All reported defects except this one are now fixed:
https://user-images.githubusercontent.com/23243244/192674977-10ffc256-b634-4467-ba02-dc08ce7e8eab.mp4

Related Jira tasks CARDS-1930 and CARDS-1931 are fixed too.

QUESTION: Should the remaining defect be logged separately so we can close this PR?

[veronikaslc]

no banner here too:

The banner is there but it is under the landing page UI. TBH with the current implementation of the landing page it won't be trivial to display it. Additionally, given that the production workflows now exclude staff interacting with the app, this can be considered very low priority and should not condition the merge of this PR. We may even end up redoing the landing page completely, and we'll tackle the banner display then (or after).

The only reply regarding landing page was that one.

[sashaandjic]

tested

The remaining issue is low priority and is reported in CARDS-1934