wgu-opensource / osmt

OSMT is the Open Skills Management Tool
https://osmt.io
Other
45 stars 8 forks source link

Fix select page in collection skill search #392

Open manuel-delvillar opened 1 year ago

manuel-delvillar commented 1 year ago

To reproduce this in local

  1. Go to any collection
  2. Click on "Add RSDs to This Collection"
  3. Do a search (we need more results than the size of the pagination)
  4. Try to add only all in the current page
ottonomy commented 1 year ago

Let me see if iI'm correctly summarizing some issues here. It looks like prior to your fix:

Some stuff that happens when requests are submitted:

If "select all (108)" is selected, what gets requested to the server is actually a query-based change order:

{
    "add": {
        "query": "a"
    }
}

But if you then go back and select individual items and submit again without refreshing, the same thing is sent again, there might be some bugs here to investigate.

After refreshing and selecting only two skills, I got a different payload sent to server

{
    "add": {
        "uuids": [
            "21901b21-233e-45b7-be5d-8fbf93ea5aeb",
            "75b895ac-7a47-4113-a43e-b9a3d14a977b"
        ]
    }
}

So, the UX needs to be made consistent. The user needs to understand that the select all control is different from the list of checkboxes in the table in purpose. And importantly, that means that when the "select all (108)" box is selected, the in-table controls should be checked disabled.

If then you wanted to add a separate "select page (50)" control (disabled when "select all (108)" is selected though), that would be a fine complement.

Ok, so the new UX in this PR:

Screenshot 2023-04-27 at 5 16 38 PM

Recommendation: If you just set all the row level checkboxes to be disabled when the select all box at the top is selected, then this checks all the boxes for good UX I think.

A11y recommendation: I recommend testing the keyboard nav and screen reader experience + keyboard nav experience. The "select " control doesn't have the right visual focus indicated when keyboard navigating.