#696 create risk log visuals

[z-roth]

Changes

• Added UI components for risk log feature (display risks, delete completed risk, create change request for risk, add new risk)

Notes

• One of the tests that checks that the Convert to CR button renders doesn't work for some strange reason, but commented it out
• Doesn't like to work with dark mode, not sure how to implement that yet

Test Cases

CheckList

• Renders pageblock with given title and header right
• Renders correct buttons for both resolved and unresolved risks (delete, convert to CR)
• Checkboxes that are marked as checked in the data are checked

RiskLog

• Renders the Risk Log title
• Renders all risks

Screenshots (if applicable)

Checklist

It can be helpful to check the Checks and Files changed tabs. Please review the contributor guide and reach out to your squad if anything is unclear. Please request reviewers and ping on slack only after you've gone through this whole checklist.

• [x] All commits are tagged with the ticket number
• [x] No linting errors
• [x] No newline at end of file warnings
• [x] All code follows repository-configured prettier formatting
• [x] No merge conflicts
• [x] All checks passing
• [x] Screenshots of UI changes (if applicable)
• [x] Remove any not-applicable sections
• [x] Assign the PR to yourself
• [x] PR is linked to the ticket
• [x] No package-lock.json changes (unless dependencies have changed)
• [x] Request reviewers & ping on Slack

Closes #696

[anthonybernardi]

The code looks good but I'll do a full code review when everything is more finalized. As far as design goes, I'd prefer:

1. each risk row to be thinner. The whole thing is very large rn
2. i also might want a way to make adding them harder. not sure what the best design for that would be
3. for dark mode, you're gonna have to mess with choosing a class for listgroupitem based off of the useTheme hook and stuff or something idk

[jamescd18]

Making it harder to create could be as simple as putting it in a modal.

Also you might wanna do away with dividing lines and background on each Risk. Different bootstrap component (or just a divs) might help with this.

Also if you wanna get fancier with UI, you make the right side buttons be icons instead, only show on hover, and maybe add tooltips to say their function after mouse hovers for 2 seconds. This is very justifiable because rn as buttons, you're calling more attention to them than they really deserve. The number of primary buttons on a page at a given time should be kept meaningfully minimal.

[z-roth]

Changed around a few things:

• Removed ListGroup and ListGroupItem and replaced with divs for cleaner look, also works fine now with dark mode
• Removed input text box and added pop-up modal that prompts user for risk input

Going to look into how to add some icons and tooltips.

[z-roth]

@jamescd18 are there any pre-existing examples of the use of icons and tooltips that I can look at to implement those UI improvements?

[RChandler234]

@jamescd18 are there any pre-existing examples of the use of icons and tooltips that I can look at to implement those UI improvements?

There should be an example of tooltips on the implemented changes section of the change request detail page. Not sure about making the button an icon, I'd look up a react-bootstrap example or smthn

[anthonybernardi]

i'm good with this from a visual standpoint. I'll leave it to Reid for the nitty gritty of the code

[RChandler234]

This looks a lot cleaner! There might be some stuff we wanna change/ add to the checklist component later, but for the purpose of this ticket this is awesome. Gonna go ahead and approve.

[z-roth]

lgtm !!