fix(recordings): fix recording filters from being cutoff in nested archived recordings tables

[maxcao13]

Fixes #556
Depends on #555

[maxcao13]

Currently investigating how to fix the tests since I added a prop menuAppendTo="parent" instead of "inline" to the Select component inside the []Filter components which appends the select dropdowns to the "parent" component. But the test renderer for the snapshot tests doesn't seem to have a parent.

[tthvo]

Nicee catch! Could you also change the menuAppendTo of DatetimePicker to parent too?

cryostat-web/src/app/Recordings/Filters/DateTimePicker.tsx

Line 83 in b201606

const elementToAppend = document.body;

Look like the toolbar now is in a constrainted container (i.e. recording-table-container) in previous commits now allow parent instead of document.body. This way we can avoid accessibility issue: https://www.patternfly.org/v4/components/select/#appending-document-body-vs-parent

[tthvo]

Also, on this topic, this issue seems to be caused by the table having sticky header as referenced here. Now that all recording tables are wrapped in OuterScrollContainer and InnerScrollContainer, should we make all recording tables "sticky" too?

cryostat-web/src/app/Recordings/RecordingsTable.tsx

Line 125 in b201606

isStickyHeader={props.isNestedTable}

Then, all filters must be checked to avoid being cut-off.

[tthvo]

Looks good! Just another notice about the filter selects:

Looks like the select menu is not scrollable and could go as long as it needs. I think we should allow scrolling. This could be done by setting maxHeight on Select (Reference):

<Select maxHeight={"300px"}>
  {options}
</Select>

What do you think?

[andrewazores]

If that maxHeight prop supports general CSS size units then it would be better to use a relative size (like em or vh) rather than absolute (like px) so that this better supports displays with different sizes and pixel densities.

[andrewazores]

While you're at that, please update these two px uses as well:

src/app/SecurityPanel/Credentials/MatchedTargetsTable.tsx
126:        <InnerScrollContainer style={{ height: '300px' }}>

src/app/app.css
81:  height: 512px; 

[github-actions]

This PR/issue depends on:

• ci(mergify): update config for latest release branch #555
  By Dependent Issues (🤖). Happy coding!

[tthvo]

Looks nicee! Fixed the bug :D