UI cleanup work on Config index page

[colinxfleming]

Config improvements via an excellent flag by @lomky in https://github.com/DCAFEngineering/dcaf_case_management/pull/1503#pullrequestreview-185419523 --

As I was poking around in the GUI, I found myself wanting some visual clarity in the Current Options list for hard coded base options vs custom options. There's also some weirdness in the languages display. Ultimately I think those are nice-to-have and probably things to put to a general 'cleanup the configs page' issue. Thoughts?

this is an excellent flag and we should do it!

[colinxfleming]

marking future features since there isn't an obvious Next Step to this / there's a little hashing out to do yet

[colinxfleming]

@emtot22 is taking a design look at this; @colinxfleming owes notes about how configs work with written examples on sandbox

[colinxfleming]

How configs work:

The /configs page is a series of global configurations a fund's case management team director can apply. These generally fall into three categories:

• More dropdown options for case managers: Some, like Voicemail Options and Practical Support Options, expand the list of dropdown options when case managers are logging data. For example, at sandbox.dcabortionfund.org/configs , make a change to Language Options - add some language that isn't there and hit the Update Options for Language button right below it, and then head to sandbox.dcabortionfund.org/patients/42/edit and see your new language in the Preferred Language dropdown. These are also previewed on the Config page itself.

• Resources for case managers: Some, like Fax Service Options and Resources Url Options, add a link to a fund's case manager guidance (usually a googly drive link). For example, you'll see the Resources Url is a link to petfinder, and the 'CM Resources' link in the top nav panel reflects that. (You can edit and play around with this too, and see your changes reflected in the navbar after you save them.)

• Actual backend config: Days to keep all patients and days to keep fulfilled patients let funds determine when patient information gets destroyed; some, like Budget Bar Max Options, remind case managers about money.

There are a few other one-off things but generally things fall into these buckets.

Team Directors look at these relatively rarely and edit them even less. Still, it's important to have this be a relatively safe, validated page, because bad configuration values can potentially break parts of DARIA.

Things I don't like about this page:

• It's an ugly list of form inputs that aren't really grouped by rhyme or reason. This was fine when it was like, three, but now it's 15-16 inputs and we'll probably have to add more as time goes on. I would bet we can do better UX than 'eye bleedingly long list'.

• For everything on this page except dropdowns, it's tough to tell what your config changes actually did. Suggestions on how to preview other changes would be pretty nice.

• Honestly, I'm open to a lot of suggestions here, and I bet you've got good ideas, so I don't want to be too prescriptive. Go wild!

[emtot22]

Awesome, thanks @colinxfleming! This is helpful. I'll dig into it this week and let you know if I have any questions

[emtot22]

Hey @colinxfleming, I took a stab at the Configs page. You can see the new design here: https://www.figma.com/proto/xqY0RFbj86P4dLXiFO0CHw/DCAF?page-id=0%3A1&node-id=1%3A5&viewport=241%2C48%2C0.3&scaling=scale-down-width&starting-point-node-id=1%3A5 The prototype is interactive so you can see how I envision some of the elements working. Hit "R" on your keyboard to go to the "home" screen at any time and hit "z" multiple times to resize.

A couple of notes:

• I grouped form inputs into categories that generally made sense to me, but I'm open to reorganizing them however you think is best. We can also reorganize them in order of priority (i.e. if financial stuff is most important, I'm open to having those at the top of the page).
• I need to brainstorm on some better headings other than "Financial" and "UI" :) I put those as placeholder for now just so you get the idea
• For any of the input fields that involve a number (e.g. days to keep all patients, urgent reset, budget bar), if there's a max limit, we can consider an alternative UI.

Let me know what you think! We can chat about this tomorrow during the Virtual Project night too. Looking forward to it!

• Emilia

[emtot22]

@elimbaum

[colinxfleming]

oh man this is SICK. Outstanding work @emtot22 ! This goes way beyond what I was hoping for and is really thoughtful, and I think does a great job of making this much less of a blorb of options and text and forms.

I will say that the frontend implementation of the dropdown options potentially has a high level of complexity - I think a second opinion on the programming lift there might be good for me, as I'm not much of a frontend-er. But I think we can also push that to the end, since there are so many good ideas in this design.

A few points of feedback:

• Most of the options dropdowns have a couple default options. For example, language always starts with English and Spanish from the system, and you can't remove those options. I'm not sure if that makes a difference to how you're envisioning the dropdowns.
• the groupings of 'Financial' and 'UI' seem pretty reasonable to me.
• A couple of the number ones do have a max and min limit - see #2400 for example. I think this UI will still work fwiw, and we can probably mostly accommodate by including a note in the helper text, but if there's another approach you have in mind already I'm interested.

And the stuff I really love:

• I think the groupings make really intuitive sense here, what a solid idea.
• One of the consistent problems we've had is that it's possible to break daria from this panel, so I particularly love the UI enhancements that make it super hard to wreck something or put in sketch values.

If this sounds good to you, I'll probably break this up into sub-tickets, since I think it's 3-4 components and some of them can be independent of each other. Let me know and thanks much again!

[colinxfleming]

I got a good night of sleep! So if I were gonna break this out into pieces, in rough order of priority, I think I'd do this:

• Group configs into sections
• Number inputs should get number inputs
• string inputs should get normal text inputs
• Enumerated values should get enumerated dropdowns
• (Later, fuzzy) figure out what to do about multi-options like Insurance Options etc

@emtot22 does that seem right to you? If so, I'll write up some tickets for it and start distributing them.

[emtot22]

Hey @colinxfleming - glad to hear you like it! To respond to some of your comments...

• Re: default options: I don't think that changes things too much. I removed the ability to remove English and Spanish in the dropdowns by hiding the X (that's updated in the Figma file). We can also hide the ability to reorder those if you always want English showing up first.
• I changed "UI" to "Daria Layout Settings" because I don't think most people will know what UI is :)
• Re: the max and minimum limits, Eli mentioned this to me too. I think we can definitely include those in the helper text. Another thing I was playing around with was something like this: https://www.figma.com/file/xqY0RFbj86P4dLXiFO0CHw/DCAF?node-id=48%3A2629 If you input a number that's higher than the max or lower than the min, you'd get an error message and the field would turn red

Your ticket breakdown sounds good to me! Let me know if I can help with any of that or if anyone needs me to walk them through the Figma file. I'll be out of town the rest of this week but back next week. And - if there are any other tickets you need help on, feel free to send them my way :) This was a lot of fun to work on.

[colinxfleming]

@emtot22 yeah, let's hide the ability to reorder for now.

@DarthHater I'm tagging you in! The designs we're going off are here: https://www.figma.com/file/xqY0RFbj86P4dLXiFO0CHw/DCAF---Configs-Page?node-id=48%3A2629

Specifically, please rack the following:

• Group configs into sections Patient Data, URLs, Patient Information, Financial, and DARIA Layout Settings
• Change form inputs based on the backing type. For ex, number inputs should get number inputs, string inputs get normal test inputs, booleans should get yes/no. Don't worry about the dropdowns for now.

That should be a good initial chunk and we'll go from there.

[Nubbify]

Hi hi, I'm gonna take a stab at implementing these designs