Select all feature added.

[biggiebangle]

Description of the Change

Related to #469 and #393
A "Select All" button has been added above the "Search Available Connections" search bar. This "Select All" is disabled after initial page load, if no connections are available for syndication.

Alternate Designs

n/a

Benefits

If there are a large amount of connections to syndicate, time will be saved with the addition of a select all button.

Possible Drawbacks

n/a

Verification Process

Testing scenarios
1.
Select All
-remove some
-send
Select All
-send remaining
2.
Select All
-remove some
-put some back
-send
Select All
-send remaining
3.
Select Some
-send
Select All
-send
4.
Select Some
-remove some
-send
Select All
-send
5.
Select Some
-remove some
-send
Select All
-remove some
-send
Select All
-send

Checklist:

• I have read the CONTRIBUTING document.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests passed.

Applicable Issues

[jeffpaul]

@biggiebangle welcome to Distributor and thanks for the PR! Per the checklist/task item in #393 (include Select all and None link options), could you also look to include a None link option as well to undo someone selecting the Select All link option?

[biggiebangle]

Hello @jeffpaul! Added a None option as requested. Hope this finds you well, and please let me know if you need anything else.

[jeffpaul]

@biggiebangle thanks for the update, we'll get this reviewed and let you know if we have any additional questions or concerns... thanks!

[dkotter]

@biggiebangle Thanks for the PR! Testing this out, works well.

Couple suggestions though. When no connections are selected, can we make the None button have a disabled look? And similarly, when all connections are selected, give the Select All button a disabled state?

Basically just want to give a visual indication that those buttons won't do anything in those states (i.e. if no connections are selected, clicking None won't do anything, so giving that a disabled look makes that more clear). Not exactly sure what this state should look like, could be a normal disabled button look or could also use the secondary-button styling that WordPress core uses.

We would need to add this disabled state to the None button when no connections are selected. So essentially on initial load and then listen for connections to be removed and when the last one is removed, disable the button again.

And same for the Select All. When all connections are selected, disable that button but as soon as one connection is removed, activate it again (this is the trickier one, as we need to determine when all connections are chosen. Maybe comparing the number of items in the available connections list to the ones in the selected list and if they match, that means all are selected?)

And then a bigger issue shows up if you have lots of connections. Right now, if there are more than 5 connections, we add a search input and add scroll overflow on our connections list:

But if you add too many connections to distribute to at once, the selected list doesn't have that overflow scroll, so it can end up breaking the layout:

I think ideally we would constrain the selected list to a certain height and then have an overflow scroll after that point (so you can still scroll through and see all selected connections).

Let me know if you have any questions on any of these. Thanks!

[biggiebangle]

Hello dkotter! I added the CSS that I am using on our child plugin to address this overflow issue. I am out of office for the next few weeks for the holiday, but I will check out the rest of your suggestions then.

[dkotter]

@biggiebangle Hi! I see you've pushed a few code changes since your last update, but just wanted to check in and see if you have more work you're wanting to do here before I review this again? Thanks!

[biggiebangle]

I think we are good to go. Let me know if you need anything else!

[dkotter]

@biggiebangle Thanks! This looks really good. I think this is good to go!