Create a dynamic modal

[michho8]

Ticket Link

Ticket 1802

List of squashed commits

• Create dynamic modal with an example of how to call it in navbar
• Allow dynamic number of buttons with example in navbar
• Started testing, issues with body contents
• Add tests and remove from navbar
• Make buttons parameter optional

Test Checklist

• Unit Tests Passed
• Integration Tests Passed
• General Visual Inspection

[JorWo]

Any plans to create a useModal hook?

[michho8]

Any plans to create a useModal hook?

I use a hook in the file itself, planning to let the parent only call the modal when a certain condition is met. This way the parent components wouldn't have different hooks but rather a boolean (possibly returned from a function) to be toggled in the event of something making a modal pop-up.

If you're talking about actually calling an instance of this dynamic modal, we would need this when we know when we are calling the dynamic modal(s). Each one will have its own conditional clause because they'll depend on different logic. As I looked through the AngularJS UI, I may implement the departmental icon and call the dynamic modal to show the warning message here. I have another ticket that also wants the ApiErrorModal to be replaced with the dynamic modal which I wanted to use as a mentor/mentee ticket.

There's also the option of this boolean hook but I feel strongly for only calling the modal if a conditional statement is met and passing in a boolean value. The dynamic modal should only be opened once when a condition is met and will close using its own hook and not the parent's.

[JorWo]

Any plans to create a useModal hook?

I use a hook in the file itself, planning to let the parent only call the modal when a certain condition is met. This way the parent components wouldn't have different hooks but rather a boolean (possibly returned from a function) to be toggled in the event of something making a modal pop-up.

If you're talking about actually calling an instance of this dynamic modal, we would need this when we know when we are calling the dynamic modal(s). Each one will have its own conditional clause because they'll depend on different logic. As I looked through the AngularJS UI, I may implement the departmental icon and call the dynamic modal to show the warning message here. I have another ticket that also wants the ApiErrorModal to be replaced with the dynamic modal which I wanted to use as a mentor/mentee ticket.

There's also the option of this boolean hook but I feel strongly for only calling the modal if a conditional statement is met and passing in a boolean value. The dynamic modal should only be opened once when a condition is met and will close using its own hook and not the parent's.

That's a good point, the close button is only needed to be pressed once. I thought it would be useful to have a useModal like this:

const { open, close } = useModal({
    modal: <DynamicModal />,
    open: true, 
    onClose:  () => {}
} );

Anyway a useModal hook is not completely needed, but I noticed that you need to provide your own useState hook to control whether it is open or not, which can be a lot of code repitition. Using a hook, you can extract open and close functions. Definitely something to consider in another ticket.

[JorWo]

Looks good.