[B5] Web Apps #34682

orangejenny · 2024-05-28T18:03:23Z

Product Description

Turn on bootstrap 5 for web apps. Side by side comparisons are here, but the high level summary is: not much changed. Colors are a little brighter, borders are a little lighter, buttons are a little bigger.

Technical Summary

Review by commit. Most commits are small, except the cleanup commits, which are mechanical. Most of this work has been merged already, what remains in this PR is three major changes:

Updating the python views to use the B5 decorators and templates
Javascript changes that either depend on B5 libraries (bootstrap js or tempus dominus) or were annoying to wrap behind a window.USE_BOOTSTRAP5 check.
Deleting the B3 templates and diff files.

Safety Assurance

Safety story

High risk, as this is a high visibility area, there are a lot of changes (including changes made in previous PRs that will go live when this is merged), and our test coverage at the UI level is limited. We'll be going through the same QA/safety approach as for the web apps requirejs migration.

Automated test coverage

Not a whole lot.

QA Plan

https://dimagi.atlassian.net/browse/QA-6550

Rollback instructions

This can be rolled back if needed. Due to its size, it may get difficult to automatically roll back relatively soon, although it looks like there hasn't been that much activity in the web apps front end in the past few weeks.

Sentry can be monitored for javascript errors using this filter.

This PR can be reverted after deploy with no further considerations

Labels & Review

Risk label is set correctly
The set of people pinged as reviewers is appropriate for the level of risk of the change

corehq/apps/cloudcare/static/cloudcare/js/utils.js

MartinRiese · 2024-05-28T18:17:09Z

...ta/bootstrap5_diffs/stylesheets/formplayer-common_grid.formplayer-common_grid.style.diff.txt

@@ -0,0 +1,7 @@
+--- 
+++ 


why are these not unsplit?

They're still used here:

commcare-hq/corehq/apps/integration/templates/integration/base_cloudcare_template.html

Lines 23 to 34 in 75d6299

<link type="text/less"

rel="stylesheet"

media="all"

href="{% static 'cloudcare/less/font-formplayer.less' %}" />

<link type="text/less"

rel="stylesheet"

media="all"

href="{% static 'cloudcare/less/formplayer-common.less' %}"/>

<link type="text/less"

rel="stylesheet"

media="all"

href="{% static 'cloudcare/less/formplayer-webapp.less' %}"/>

This is basically the result of running the bootstrap migration tool.

Followup for ee098af

- dateTimePickerTooltips are already handled by by defaultTranslations in the HQ tempus dominus module - Several callbacks/handlers were no longer needed - It's annoying that showing the clear button is handled through initial page data, but updating that is out of scope

This finishes up a43a527

The migration tool doesn't check js files for CSS class names, and some of these aren't greppable anyway.

This completes changes that were started in 845d9ff

Just following bootstrap convention here

In Bootstrap 3 we were able to have and intermediate tag as parent of the apps. This is not allowed anymore in Bootstrap 5. The order classes previously used only change the visual order, not the tab order. Adding a hidden reference div and inserting the apps before it results in the right order that also keeps the tab order in place.

nospame · 2024-07-08T23:03:37Z

corehq/apps/cloudcare/static/cloudcare/js/formplayer/apps/views.js

+        attachHtml: function attachHtml(els, $container) {
+            let childElement = $container.find("#put-apps-here");
+            $container[0].insertBefore(els, childElement[0]);
+        },


I don't love this solution but I looked at it for a while and couldn't come up with anything better.

The relative position is needed to place the hover circle around the delete/audio icon correctly. But it interfers with the focus outline of the row. * Remove it from the row related class * Add bootstrap class to add the property to the direct parent of the icon * Add separate column for icons to improve the code structure.

* Button bar should be there independent of screen size * break point for SSCS is lg not md

…jls/b5-web-apps

nospame

Just reviewed the changes since last review of "new changes look good". Couple clarifying questions, looks good on the whole.

nospame · 2024-07-10T15:17:20Z

corehq/apps/cloudcare/templates/cloudcare/partials/users/user_row.html

@@ -4,7 +4,7 @@
      <i class="fa fa-user module-icon" aria-hidden="true"></i>
    </div>
  </td>
-  <td class="module-column">
+  <td class="module-column module-column-name">


The module-column-name class gets added here but it looks like the css class was removed, is that right? Or does it serve some other purpose as well?

I had removed it to get rid of the relative positioning that caused issues. With this commit I am adding it back in because it missing caused some other issue in app preview. Instead I removed the property from the css class and added it to the direct parent of the icon tags that needed the relative position.

nospame · 2024-07-10T15:22:28Z

corehq/apps/cloudcare/static/cloudcare/js/utils.js

@@ -380,7 +380,7 @@ hqDefine('cloudcare/js/utils', [
        let picker = hqTempusDominus.createDatePicker($el.get(0), options);

        $el.attr("placeholder", dateFormat);
-        $el.attr("pattern", "[0-9\-/]+");   // eslint-disable-line no-useless-escape
+        // $el.attr("pattern", "[0-9\-/]+");   // eslint-disable-line no-useless-escape


What was this used for, and why comment out rather than delete?

I think it is used for validation but it caused and error with each validation because it is malformed regex. I was not sure what the correct regex should be. So I commented it out for now.

@esoergel do you have any context on what this is meant to be? I know you did work with the datepicker a while back and it looks like one of your commits moved this pattern here initially.

@nospame changed it to $el.attr("pattern", "\\d{1,2}/\\d{1,2}/\\d{4}"); since the format is hard coded to 'M/D/YYYY'.

I think this is meant to be "integers, dashes, or slashes" - IIRC, users were sometimes typing out "July 1st" or whatever, and this would mark that as an error. The existing datepicker actually accepts string input in a variety of formats, defined here. I believe it starts from left to right and uses the first format that matches:

commcare-hq/corehq/apps/cloudcare/static/cloudcare/js/utils.js

Line 376 in 1a70089

var dateFormats = ['MM/DD/YYYY', 'YYYY-MM-DD', 'M/D/YYYY', 'M/D/YY', 'M-D-YYYY', 'M-D-YY', moment.defaultFormat];

Some more context and discussion on that here: #32738 and here: #32628

that makes more sense. In the HTML it should end up looking like this pattern="[0-9\-\/]+" because we the dash and forward slash are inside the [] we need to escape them. But since we are in JS land we need two \ each to get there. so $el.attr("pattern", "[0-9\\-\\/]+");

nospame

Think it'll be good to find an answer to #34682 (comment) but not considering it blocking. Approving the changes made here by @MartinRiese in the time @orangejenny has been offline.

Was not a thing with B3 either

nospame · 2024-07-12T15:26:27Z

corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/content.scss

@@ -18,12 +18,19 @@ body {
    font-size: 1.5rem;
    text-transform: uppercase;
    color: $cc-neutral-mid;
-    padding-left: 1.5rem;
+    padding-left: 12px;


Is there a relative padding that could be used here instead (e.g. 1rem)?

There's also $spacer, though I'm not certain when you'd use that over rem (I believe $spacer: 2rem)

I used px because because .module-column-icon does too and I did not want to mix two units.

I don't think this needs to block, but another option would be to use a common reference variable, if the two items need to line up. Can you explain the connection between .page-header > h1 and .module-column-icon? I see one is set to 12px and the other to 20px, is there an 8px element in the mix somewhere too?

esoergel

Approving commits since Evan's last approval

orangejenny added awaiting QA QA in progress. Do not merge product/all-users-all-environments Change impacts all users on all environments Risk: High Change affects files that have been flagged as high risk. labels May 28, 2024

orangejenny requested review from a team May 28, 2024 18:03

orangejenny requested review from biyeun, MartinRiese, AddisonDunn, stephherbers, Robert-Costello and Jtang-1 as code owners May 28, 2024 18:03

orangejenny removed the request for review from a team May 28, 2024 18:03

orangejenny requested a review from nospame as a code owner May 28, 2024 18:03

orangejenny requested review from AddisonDunn, minhaminha and Robert-Costello May 28, 2024 18:03

dimagimon added dependencies Pull requests that update a dependency file Risk: Medium Change affects files that have been flagged as medium risk. and removed Risk: High Change affects files that have been flagged as high risk. labels May 28, 2024

MartinRiese reviewed May 28, 2024

View reviewed changes

orangejenny force-pushed the jls/b5-web-apps branch from c8af755 to ffee7a4 Compare May 28, 2024 18:22

orangejenny added 9 commits June 5, 2024 07:15

Switched views to B5

6091b98

Updated javascript dependencies and added TODOs

a35f804

This is basically the result of running the bootstrap migration tool.

Updated modals

2ae03a9

Updated settings OQPS event

76263c6

Followup for ee098af

Updated spinners for clickable icons

eaa5588

Fixed grid layouts not displaying icons inline

49739b7

This finishes up a43a527

Updated CSS classes in javascript

9ef185a

The migration tool doesn't check js files for CSS class names, and some of these aren't greppable anyway.

Finished updating map in case list logic

556e7e1

This completes changes that were started in 845d9ff

Use y instead of tb for top and bottom

96ea036

Just following bootstrap convention here

MartinRiese force-pushed the jls/b5-web-apps branch 2 times, most recently from 41345f6 to 12daf60 Compare July 3, 2024 17:16

MartinRiese force-pushed the jls/b5-web-apps branch from 12daf60 to 517d1cd Compare July 3, 2024 18:33

nospame reviewed Jul 8, 2024

View reviewed changes

MartinRiese and others added 8 commits July 9, 2024 06:52

"Bootstrap 5 Migration - Rebuilt diffs"

0d5c0a0

Fix css for sscs

e428f5e

* Button bar should be there independent of screen size * break point for SSCS is lg not md

"Bootstrap 5 Migration - Rebuilt diffs"

48892db

Hide case-list-menu-header in preview

a0e6b1a

Merge branch 'master' into jls/b5-web-apps

16a19f0

Commenting out invalid validation regex

1dc4e03

Merge branch 'jls/b5-web-apps' of github.com:dimagi/commcare-hq into …

15efe13

…jls/b5-web-apps

nospame reviewed Jul 10, 2024

View reviewed changes

nospame approved these changes Jul 10, 2024

View reviewed changes

MartinRiese added 4 commits July 12, 2024 11:18

Fix regex for date input pattern

a8b301c

Fix page header alignment

bb53865

No hover effect on nested query fields

921504d

Was not a thing with B3 either

"Bootstrap 5 Migration - Rebuilt diffs"

028abf1

nospame reviewed Jul 12, 2024

View reviewed changes

esoergel mentioned this pull request Jul 12, 2024

Persistent Menu Navigation in Web Apps #34872

Merged

3 tasks

Merge branch 'master' into jls/b5-web-apps

acd29ce

MartinRiese removed the awaiting QA QA in progress. Do not merge label Jul 24, 2024

esoergel approved these changes Jul 24, 2024

View reviewed changes

MartinRiese merged commit 3a885ff into master Jul 24, 2024
13 checks passed

MartinRiese mentioned this pull request Jul 26, 2024

Revert "[B5] Web Apps" #34916

Closed

esoergel mentioned this pull request Aug 26, 2024

Remove last usage of webapps B3 stylesheets #35038

Merged

3 tasks

esoergel deleted the jls/b5-web-apps branch August 28, 2024 18:08

orangejenny mentioned this pull request Oct 21, 2024

Restored OK button in web apps unsupported questions popup #35242

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[B5] Web Apps #34682

[B5] Web Apps #34682

orangejenny commented May 28, 2024 •

edited

Loading

MartinRiese May 28, 2024

orangejenny May 28, 2024

nospame Jul 8, 2024

MartinRiese Jul 9, 2024

nospame left a comment •

edited

Loading

nospame Jul 10, 2024

MartinRiese Jul 10, 2024

nospame Jul 10, 2024

MartinRiese Jul 10, 2024

nospame Jul 10, 2024 •

edited

Loading

MartinRiese Jul 11, 2024

esoergel Jul 11, 2024

esoergel Jul 11, 2024 •

edited

Loading

MartinRiese Jul 12, 2024

nospame left a comment •

edited

Loading

nospame Jul 12, 2024

esoergel Jul 12, 2024

MartinRiese Jul 24, 2024

esoergel Jul 24, 2024

esoergel left a comment

	<link type="text/less"
	rel="stylesheet"
	media="all"
	href="{% static 'cloudcare/less/font-formplayer.less' %}" />
	<link type="text/less"
	rel="stylesheet"
	media="all"
	href="{% static 'cloudcare/less/formplayer-common.less' %}"/>
	<link type="text/less"
	rel="stylesheet"
	media="all"
	href="{% static 'cloudcare/less/formplayer-webapp.less' %}"/>

[B5] Web Apps #34682

[B5] Web Apps #34682

Conversation

orangejenny commented May 28, 2024 • edited Loading

Product Description

Technical Summary

Safety Assurance

Safety story

Automated test coverage

QA Plan

Rollback instructions

Labels & Review

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nospame left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nospame Jul 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

esoergel Jul 11, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nospame left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

esoergel left a comment

Choose a reason for hiding this comment

orangejenny commented May 28, 2024 •

edited

Loading

nospame left a comment •

edited

Loading

nospame Jul 10, 2024 •

edited

Loading

esoergel Jul 11, 2024 •

edited

Loading

nospame left a comment •

edited

Loading