Display Parties Contact Information

[tuckerzp]

This adds a Contact dialog box to metadata parties. When clicked, it opens a dialog displaying all the parties contact information. This also rewrites the tests a bit to no longer have parent components of OSCALMetadata test functionality.

Testing file

https://raw.githubusercontent.com/EasyDynamics/oscal-demo-content/f03073fddf33b0d65d3d0e84a7ad76c74e7be6c9/system-security-plans/ssp-example.json gives a good example of party contact info to view

Reviewing / Things to look for

This pr seems a bit more complex than it actually is upon further investigation. Here is a list of what changes have been made for reviewing.

• OSCALMetadata has new sub components being used to display part contact information.
• The tests have been expanded upon, they are more imperative and verbose now.
• The storybook has additional components. This is fairly repetitive. Running npm run build-storybook && npm run storybook will let you view it locally.
• New sample data has been added to be used in the tests / storybook.

closes #405

[Bronstrom]

Looks like you got a good start to this issue!

I think Card works well here to organize the parties. When given multiple parties, the outlines around the Cards look a little wonky. I would suggest to remove the outlines.

I like the idea of using CardActions for more information — I think it would make sense to wrap all Card content for a party in one. When looking at one of our OSCALCatalog examples, it looks like most of the metadata is displaying underneath the party title and Avatar with some "undefined" values. Make sure to validate this info, and hide what's undefined.

Also, I think we should still display the secondary information, which I believe was the role title, we had previously underneath the party name at all times, while the additional metadata appears after selecting the Cards "action" area.

[kylelaker]

Make sure to validate this info, and hide what's undefined

For consistency in the UI, I'd rather not hide sections. I think having "This contact has no phone numbers" or whatever (with better wording) would be good. And I think if there aren't any contact details, then we just don't provide the button.

See https://material.io/design/communication/empty-states.html. I am not sure if MUI provides helpers for this; however, it's still something we can work on building.

[tuckerzp]

@Bronstrom

I think the contact type (Addresses, Phone, and Email) would look nice if center aligned.

I am not sure how great it looks.

[kylelaker]

This looks really good and is so cool! At some point, we should support location-uuids (or whatever that field is called) but I think that can be in another ticket (can you work on writing one up).

Thank you!!!

All requested changes were specific, not structural. Dismissing to allow future approvals to advance the PR.

[Bronstrom]

Like the choices that were made to the structure and the Contact Dialog box looks pretty slick!