[B5] settings: API keys page

[orangejenny]

Product Description

This is the last view in settings.

It adds datepickers to our tempus dominus library, and it migrates the base CRUD page that's used in a few parts of HQ.

before

after

Safety Assurance

Safety story

UI changes, risk is pretty well limited to this page.

Automated test coverage

Not much if any at the UI level.

QA Plan

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

Rollback instructions

• 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

[jingcheng16]

Hi Jenny, I don't have enough knowledge to review the js changes you made in this PR. But left two questions for html changes.

[millerdev]

Aside, and not a criticism of this PR: maybe it's a sign that I'm old, but I find the new inline labels and fields layout to be harder to read than the two-column layout on a large screen. I think it was changed to accommodate mobile devices, and if that's true I think it's a place where responsive design might be nice (use columns on large screen, inline on small).

[biyeun]

@orangejenny @millerdev I think the form might be harder to follow now due to lack of whitespace. usually the fields should be wrapped in mb-3 to add a margin at the bottom.

[orangejenny]

@biyeun Good eye. #34592 affected crispy rendering in some way such that the mb-3 spacing wasn't being added. Fixed in f9e382a, and the form does now have a bit more breathing room.

[jingcheng16]

Just curious, (if the two column layout refers to left column being label and right column being input field ), why the two column layout becomes one column in this PR? I cannot identify the related code changes...

[orangejenny]

@jingcheng16 It's almost invisible. Because the form on this page uses crispy forms, adding the use_bootstrap5 decorator is enough to do the layout switch. Code like this template in our crispy3to5 repo checks the B5 flag to determine what kind of layout to display.

There are also places that key off the containing form_class CSS class, like this. Those made it necessary to make the change in f9e382a which removes the form-horizontal class for B5 forms (the crispy.py change specifically, which overrides this line earlier in HQFormHelper).

[jingcheng16]

@orangejenny I see.Thank you for the explanation and all the links! ❤️