Improve Catalog Control Group Navigation

[tuckerzp]

This uses Tabs from material ui to make a vertical menu to navigate catalog control groups. It also extracts sub groups to its own function.

closes #88

[kylelaker]

I think we're pretty significantly missing a design for groups in groups in groups. And we're possibly changing the behavior of a control in a control.

The names of these components are also starting to imply that maybe we're losing a little insight into the spec. Remember that it's also possible to have controls without groups (in additions to just layers of groups all the way down).

[tuckerzp]

I think we're pretty significantly missing a design for groups in groups in groups

I do not think we have ever tested that so I created https://raw.githubusercontent.com/EasyDynamics/oscal-demo-content/nested-groups/catalogs/NIST_SP-800-53_rev4_catalog.json. Things do get very broken. Although I also do not like how the OSCALControlParamLegend is displayed for each group on our current viewer. I will rework this to accommodate multiple groups.

[kylelaker]

Really good progress here! Thanks! I think there are just a few more things I'd like to try to implement before merging this.

[kylelaker]

@tuckerzp Do you think that you can provide a summary of the status of this PR? Is it ready for review again or are there additional things that need to be completed?

[hreineck]

Thanks for your work on this! Just tested it locally and the new UI works great.

[tuckerzp]

@kylelaker

provide a summary of the status of this PR?

I think functionality wise, everything is good to go. It is mostly stylistic issues brought up I need to address.

Try and to text-alight: left or something else reasonable (this may require padding/margin)

I know that the issue has this happening, but I am now not sure if that would be best. I just realized that after clicking on a tab and then using the up/down arrow keys, the currently selected box gets a really neat highlight feature. It is highlighted on the center of the tab, so I feel like having the text centered makes sense.

Any reason we can't use a counter? Or set the key to equal the title itself?

I got rid of groupKey completely.

Have line in the middle go all the way down

The issue I am having here is that sometimes the tabs are longer and sometimes the content is longer. Currently the line is a borderRight of the tabs. I tried adding a borderLeft and it does fix the issue when the content is longer. The issue is that these two lines render slightly differently, meaning I cant use both.

[kylelaker]

While I don't think that this necessarily handles every edge case that we could throw at it, I do think it's a pretty nifty start. Thanks @tuckerzp. I am content with the design and the structure. You've put a lot of good effort into this and I appreciate it!

The specific issue highlighted has been addressed and "Request Changes" will block another review from approving/merging.

[nuttercd]

@tuckerzp This is really good work! I think the currently selected box highlighting feature is very cool.