Grid column and action menu config dropdowns should allow multiple changes at once

[Stephanie Leary]

Under Grid Options, the interfaces for Manage Columns and Manage Action Menus use standard Bootstrap dropdown buttons for each option that can be toggled. Since these buttons close the dropdown when pressed, the user has to re-open the dropdown for each column or menu action they want to toggle. This is an accessibility issue for keyboard / screen reader users.

It should be possible to select / de-select multiple options at once using checkboxes.

[Stephanie Leary (stephanieleary)]

Here is a branch that changes the green check / yellow X toggle buttons to checkboxes: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP2057692-grid-config-checkboxes

In the grid options dropdown, the order of the columns is now different. Visible columns are shown first, in the order they appear in the grid. Hidden columns are listed after the visible columns, in alphabetical order. (There is no divider between the two, because the underlying code returns a single array of columns.)

This branch also revises the grid column config modal for various accessibility improvements. Among other things, it turns the up/down buttons into a single drag and drop handle that has keyboard support for the up and down arrow keys.

Testing the grid column chooser:

1. Visit any grid that has configuration options for the columns and the actions menu. (I'm using a bib record's Record Notes tab in the attached screenshot.)
2. Click the gear icon ("Show Grid Options"). Below the divider line, you should see a "Columns" heading followed by checkboxes instead of the green check / yellow X badges.
3. Verify that the visible columns appear in order with their checkboxes checked, and hidden columns are listed alphabetically afterward with unchecked boxes.
4. Uncheck a box. The column should immediately disappear from the grid, and the dropdown menu should remain open until you click outside it.
5. Check a hidden column. Its name should move up into the checked-box list of visible columns, and (if you can see it behind the dropdown) the column should be immediately visible in the grid.
6. Click outside the dropdown to close it, or press the gear icon again.

Testing the grid config modal:

1. Click the gear icon and choose "Manage Columns."
2. Verify that the column names appear in the expected order, and that their checkboxes accurately reflect their visibility.
3. Use the four-way arrow icon button to drag a column elsewhere.
4. Close the modal and verify that the column moved where you expected it to.
5. Open the modal again and press the "Save" button at the bottom. Navigate to another page, then come back. The changes you made to the column order and visibility should be preserved.

Testing the grid actions menu:

1. Click the gear icon and choose "Manage Actions Menu."
2. Verify that the actions' checkboxes accurately reflect their visibility.
3. Uncheck an action and close the modal.
4. Open the grid actions menu. Verify that the option you unchecked is no longer listed.

[Galen Charlton (gmc)]

Some initial feedback:

[1] The column visibility checkboxes work for me.
[2] Changing the column order via keyboard or mouse works for me.
[3] The checkboxes for action menu items works for me
[4] ng lint reports issues
[5] npm run test fails (for a reason discussed in the next point)
[6] the grid width component is removed from the grid TS but not the grid HTML, and is not replaced with anything - this also causes a test to fail
[7] How and when the grid config is saved should be discussed. Having the new Save button in the grid columns config modal save the config might be the right call, I think, but that behavior is not consistent with other parts of the grid config. For example, if you edit the actions menu, the change doesn't stick unless you also invoke the save config action.
[8] And actually, whether to automatically save the grid config from the column config modal might be debatable - I don't know the frequency with which users may make temporary changes the grid config that they _don't_ to persist unless explicitly saved.
[9] there are a bunch of whitespace-only changes to the CSS that are not pertinent to the goal of the patch and (IMO) decrease readability by removing indentation.

[Stephanie Leary (stephanieleary)]

The new tables (bug 1615781) include all of these changes for 3.13. Do we want a backport branch of the dropdown checkboxes, since that piece is relatively small and portable?