Update UX of binding selector disable/enable mass action

kiahna-tucker commented 5 months ago

Issues

The issues directly below are advanced by this PR: https://github.com/estuary/ui/issues/972 https://github.com/estuary/ui/issues/744

Changes

972

The following features are included in this PR:

Update the styling of the binding selector enable/disable scope menu items.
Convert the menu items of the binding selector enable/disable scope menu to a radio button group.
Add explicit actions to the binding selector enable/disable scope menu. The secondary, Apply button will cause the selected action (e.g., enable all, enable page, etc.) to take affect. The tertiary, Cancel button equips the user with a clear means to close the menu.
Make the binding selector enable/disable mass action sensitive to changes in the disable status of individual bindings.

Tests

Manually tested

Approaches to testing are as follows:

Validate that the binding selector enable/disable mass action presents a menu with enable options when at least one of the bindings are disabled.
Validate that the Disable/Enable All menu options appropriately affect all bindings.
Validate that the Disable/Enable Page menu options appropriately affect the filtered and/or paginated subset of bindings.

NOTE: Testing was largely performed in materialization workflows.

Automated tests

N/A

Screenshots

Disable button

pr_screenshot-1130-binding_mass_action-disable_label

Disable menu

Enable button

pr_screenshot-1130-binding_mass_action-enable_label

Enable menu

kiahna-tucker commented 5 months ago

The set of enable options (i.e., enable all or enable page) can be shown when at least one binding is disabled; or the set of disable options can be shown when at least one binding is enabled. What is your preferred UX, @dyaffe?

kiahna-tucker commented 5 months ago

Can you look into trying to get this working with keyboard?

The menu is partially accessible. The radio button group and actions buttons can be accessed separately but tabbing out of either one will call the onClose Menu property. Unfortunately, this property is improperly typed so there is not a way to override this behavior. Looking to see if there is an issue open for this problem.

estuary / ui