Make Data Requirements Human Readable

[BriannaVH]

Summary

This PR allows users to toggle between two different views for the data requirements of a specified resource: The raw version of the data requirements and a readable version of the data requirements array.

New behavior

The data requirements panel now populates with a Segment Controller mantine component at the top of the panel where the user can manually toggle between two different displays of the data requirements. The panel should always initially start out on the raw data requirements view. If the user manually selects the " readable data requirements" view they will then see a series of data requirement cards. Each card has an icon in the upper right hand corner the user can click to expand/constrict the card. Each card should display specific information of one element from the data requirements array. Specifically, it's fields should include any of it's code filters, dateFilters, extensions, and types. There are some resources for which the raw data requirements should appear but the readable version shouldn’t because the data requirements array doesn’t have any elements. In these instances, the Segment Control component which allows the user to slide between different views should also not appear.

Code changes

<SegmentedControl> —> I use a segmented control component in app/src/pages/repository/[resourceType]/[id].tsx to allow the user to choose between the two different views of the data requirements
app/src/components/DataRequirements.tsx —> Extracts the different data requirements fields and displays them in a card component that it returns
Accordion --> The Accordion component in app/src/components/DataRequirements.tsx is what allows the cards to be collapsible upon a user's click.

Testing guidance

 npm run check:all
 npm run start:all

Navigate to the repository tab and select a library or measure resource. Then request data requirements for the resource. If the data requirements exist the data requirement's tab/panel should appear populated with a segment controller component at the top. The user should initially see the raw data requirements and it should look like the following:

Following this, toggle the segment controller so that "Readable Data Requirements" is now selected and the cards should appear looking like the following:

To make sure they are correct, you can toggle back and forth between the two views to ensure that each of the element's in the data requirements array accurately reflects what each of the card data requirements are displaying.In the raw data requirements tab, the data requirements array should have the exact same number of elements as the readable version has cards. You can also compare the contents of both the cards and each element of the data requirements array to make sure they match, and this should be made easier given that they both are in the same order. Some resources (Library/CumulativeMedicationDurationFHIR4 for instance) should not have readable data requirements, even if they have the raw data requirements. In instances like these, the Segment Controller should not appear for the user to toggle between them.

[sarahmcdougall]

Amazing work on this, especially considering all the unknowns for how we wanted to display the data requirements! The human-readable format is a lot easier to digest compared to the JSON that we get back from the server.

Let me know if you have any questions regarding my suggestions - most of them are TypeScript-specific. As mentioned in one of the in-line comments, I expect that some of the TypeScript type changes will lead to other changes, as other parts of the code will be affected by the type changes. Happy to pair program on those changes if you would like :)

[sarahmcdougall]

Great job implementing the changes I suggested :) I have a few more code suggestions - let me know if you have any questions or want to discuss anything further!

Looks like this branch also needs a rebase - I think the rebase will capture the changes I made for adding the delete button for draft artifacts. So fingers crossed that the rebase is fairly simple since I didn't edit these files for creating the deletion functionality

[sarahmcdougall]

Great changes!!

[elsaperelli]

This is definitely one of the more frustrating things that can come up in frontend tasks...but I noticed there is a bit of an annoying double scrollbar situation:

Try seeing if you can get rid of that and if you are having trouble lmk and I can help!

[elsaperelli]

Another thing I just noticed is that when I pull put the data requirements in a smaller window and then I resize that window, the data requirements stay small! I haven't looked into this a bunch yet, but I imagine it has something to do with the resize window/useEffect :)

[elsaperelli]

I just realized that the scroll bar/window resize issue also occurs in ResourceCards.tsx...which was from me! Oops haha. So don't worry about this for your task- we can add a backlog task or save it as an end of sprint activity :) Good job with this!