Filter and sort functionality for Data Management table

[stalgiag]

Overview

This PR adds support for sorting and filtering Test Plans in the Data Management table as outlined in #678 and #648. The design of the UI follows the mockups provided in this comment.

Notes

• The sorting and filtering logic was broken out into custom hooks to avoid dramatically inflating the size of the DataManagement component.
• The APG sortable table example was followed for the creation of the SortableTableHeader component. When testing with VoiceOver for macOS, I noticed that there is no dynamic announcement when thearia-sort attribute of the currently focused header is changed. I believe this is an issue with VoiceOver as the output is identical on the APG example.
• All sorting does primary active sorting first and then alphabetical by title secondarily. The sorting by AT is currently a stub that ends up doubling the behavior of the title sorting. I believe this can be changed once other work lands and test plans do not all have an identical list of ATs.
• This PR relies heavily on string comparison. To avoid problems created by string typos, I added a constants.js file with enums. I did not see this pattern anywhere else in the codebase but in my experience it helps avoid bugs that are difficult to diagnose with string comparison. That said, the source of truth for some of those constants, especially TEST_PLAN_VERSION_PHASES, should likely be on the server once the dust has settled and other work has been merged. Let me know if this pattern is unwelcome or previously decided against, I would be happy to change it.

[howard-e]

@stalgiag this looks super good! I've been super eager to see filters and sorting being included since the initial days of the Test Queue page so thank you! 🙂

I took an initial pass at it, functionality wise and noticed a few things that may need to be addressed first:

In the above screenshot, there are 2 things to note:

• The values being calculated for the filter buttons may need to be checked again? It notes that there are 34 R&D Complete rows but just 1 In Candidate Review row. The screenshot shows I have at least 2 Candidate rows and my database instance during this test has 10 Candidate Test Plan Versions overall.

• This is a fresh load of the page, but it seems the default sort order hasn't been maintained according to:

  Default Table Sort (from Design Missing Test Plan Status Management Functions #648)

  • First sort by overall status descending: recommended plans, then candidate plans, then draft plans, then R&D complete plans.
  • Then sort by test plan name ascending.
  • Then sort by Covered AT ascending

  • Shown in the screenshot is that the initial table rows are:
    • Link Example 1 ... in Candidate, then
    • Action Menu Button Using aria-activedescendant in Candidate, then
    • not in the screenshot is Action Menu Button Example Using element.focus() in R&D, then
    • Alert Example in Candidate
    • ... and so on with mixing of the R&D Candidate rows
  • It does seem the alphabetical order is maintained outside of the first row though

The above screenshot shows the Recommended Plans filter option being selected but there are 0 known results. With no data to show, the column titles of the first 4 columns are intersecting. This could be a consequence of the css doing anything along the lines of using fit-content or auto width or some variation of having the cell's content set the width, with 1 or more of those columns.

I do think a better experience here could be to show a message that there is no data to show, rather than rendering an empty table though.

[stalgiag]

Thanks for checking it out! Looks like I missed most of these issues because of the limited variety present in my local DB which is usually just the blank reseeded default. This likely won't be a problem once I am able to use the migrated production DB but in the meantime I might go ahead and make myself a few different test DBs so I can catch problems like these sooner. Thanks for sending the copy of your DB @howard-e !

• The values being calculated for the filter buttons may need to be checked again? It notes that there are 34 R&D Complete rows but just 1 In Candidate Review row. The screenshot shows I have at least 2 Candidate rows and my database instance during this test has 10 Candidate Test Plan Versions overall.

Interesting. Will modify my DB to reproduce.

This is a fresh load of the page, but it seems the default sort order hasn't been maintained according to ...

The code follows the sort order so I think that is a bug specific to that first Test Plan Version. I'll check it out.

The above screenshot shows the Recommended Plans filter option being selected but there are 0 known results. With no data to show, the column titles of the first 4 columns are intersecting. This could be a consequence of the css doing anything along the lines of using fit-content or auto width or some variation of having the cell's content set the width, with 1 or more of those columns.

I do think a better experience here could be to show a message that there is no data to show, rather than rendering an empty table though.

I agree. Perhaps we should even take it a step further and not show the filter button for a phase with out any test plan versions.

Edit: With the new DB, the issue became apparent. My code doesn't account for multiple test plan versions for a single test plan having different phases. Will fix first thing in the morning!

[stalgiag]

Okay updated the functionality as per our discussion @howard-e . I broke out a lot of logic for sorting by phase and deriving overall phase for a test plan into custom hooks. This could open up some opportunities for refactoring in DataManagementRow but I will leave that code as-is for now.

Note that "All plans" will have a larger number than the sum of the remaining buttons if there are plans that haven't been started yet.

I still want to write new unit tests for the additional hooks and to ensure that instances with multiple versions per test plans are handled correctly but this can be reviewed at any time.

[alflennik]

Damn, nice filtering and sorting!

I went through all the code and I don't have much to comment on, beyond some very minor points below. Here are a couple observations I had from testing it out:

• Minor point: the spacing seems to be greater between the filter buttons than I would expect, I like the spacing between the "Filter" text and the first button, can that spacing be repeated for the following buttons?
• I'm struggling to articulate this, but when I click on the sort buttons it seems like sometimes they go from asc to desc and sometimes they don't. Would it be possible for the first click to activate the sorting for that column without switching from asc to desc and then the second click switch from asc to desc? If that doesn't make sense I can try to articulate it more clearly and possibly record a video of my screen.

[stalgiag]

What do you think about using a (probably hidden) aria-live element instead and updating the content of that when the sort happens?

@howard-e I have taken this approach. I made a generic AriaLiveRegionProvider that can wrap a set of elements and provide access to a hidden live region that can be updated with a polite announcement. Now changes are announced in a similar way to the example you shared with me. I was only able to test on VoiceOver. It is a little verbose but very clear what is happening.

[howard-e]

What do you think about using a (probably hidden) aria-live element instead and updating the content of that when the sort happens?

@howard-e I have taken this approach. I made a generic AriaLiveRegionProvider that can wrap a set of elements and provide access to a hidden live region that can be updated with a polite announcement

Nice!

Now changes are announced in a similar way to the example you shared with me. I was only able to test on VoiceOver. It is a little verbose but very clear what is happening.

I think I prefer it this way. "Test Plans Status Summary Table, now sorted by Test Plans in desecending order" sounds better to me than just clicking it and hearing "sorted by descending", so it feels fine to me! But we'll see what others think and any changes there should be easy enough to make with how AriaLiveRegionProvider works. Thanks!