Plugins: Update plugins list bulk management headers

[johnHackworth]

fixes #912

This PR changes the way we bulk manage plugins in the plugins list. Until now, the plugins list header showed a "manage" button, that once clicked, it would change the view to edition mode and add a second level bar with the available actions for the selected plugins.

That secondary actions bar dissapears and the 'manage' button is now integrated in a component that is always shown on top of the differnt lists of plugins. The actions are also embed in there.

Before:

After:

[johnHackworth]

@rickybanister @MichaelArestad It would be great if you could take a look at this. There are several points that I have not a clear image about how to proceed:

1. The amount of actions in the bar when you have several plugins selected is too large. When you are in <800px the buttons pile uglily.
2. What should we do when the user is in "all my sites" and we have two different plugin lists? Right now I'm only showing the 'bulk edit' button in the Jetpack plugins list, because it was weird having two bulk edit buttons that did exactly the same (put both lists in edit mode and get refreshed when any of the plugins in any of the lists is selected). The idea in this case would be to have those two lists behave separatedly? like with own controls, own 'selected list', etc? because that would need a major change in most of the internal data structures.
   
3. In the previous design we had the 'bulk select' component in the top left, but now that place is occupied by the list name. Should we drop the name when we are in bulk edit mode and keep that bulk select component up there?

[mtias]

This one should be deprecated by now in favour of just using components/button.

[johnHackworth]

oops, I missed that! thanks!

[mtias]

No pasa nada ;)

[johnHackworth]

I've added button-groups, updated the code to stop using SectionHeaderButtons and added the 'update all' button here too:

[mtias]

Can we align that checkbox?

[johnHackworth]

@mtias That's not a side effect of this PR, it has been like that for some time (I thought that intendendedly). This is prod:

I'll create an issue to align it

[rickybanister]

@johnHackworth, a few answers for you:

The amount of actions in the bar when you have several plugins selected is too large. When you are in <800px the buttons pile uglily.

We should collapse them to a dropdown, just like the section-nav if there isn't enough room.

What should we do when the user is in "all my sites" and we have two different plugin lists? Right now I'm only showing the 'bulk edit' button in the Jetpack plugins list, because it was weird having two bulk edit buttons that did exactly the same (put both lists in edit mode and get refreshed when any of the plugins in any of the lists is selected). The idea in this case would be to have those two lists behave separatedly? like with own controls, own 'selected list', etc? because that would need a major change in most of the internal data structures.

I think we should have a button in each. I think it's ok if they both trigger bulk edit across both lists in an interconnected way.

And finally, as you shared in a later comment, we should hide the list title when bulk editing and display the multiselect checkbox.

[rickybanister]

A couple notes from our zoom:

• let's switch the order of things to be like so:

( activate | deactivate ) ( autoupdate | disable autoupdates ) ( remove )

• DONE should be the search component's X
• Let's show the buttons as soon as you enter bulk edit mode, but disable them until a selection has been made
• Mobile-first SelectDropdown component that gets hidden when there's room for all the options to be seen. Let's start by using the full-size dropdown, but if it doesn't fit we will create an is-compact version.
• Remove button and dropdown option should have the is-scary prop to make the text label red.

[rickybanister]

Here's an updated design of the options:

[johnHackworth]

First two checks done:

(it's just me or the default 24px padding of section-header feels weird with the right side buttons / X ?)

[rickybanister]

@johnHackworth let's do a scrub of SectionHeader tomorrow, we may be able to address the X in doing that.

Currently the section-nav's search close X is using a noticon and is centered within a 60px span, giving it a 22px right margin. So perhaps we can get both things moved to a gridicon, and have some standardized padding (probably the same 24/16 we're using everywhere else, standardizing will likely make it feel less weird.)

[johnHackworth]

I've added the dropdown for the mobile-resolutions, and removed the border because it looked weird:

Not it looks weird when the dropdown is open:

maybe a compact version of SelectDropdown (which currently doesn't exist, I think) would work better

[rickybanister]

@johnHackworth yeah, I agree, unless we make it more custom like the section-nav dropdown it seems like we'll need to find another solution.

Also having Actions as the default selection feels a little weird. I'd want it to not be selected by default if we need to have a default option. Can it be disabled?

[johnHackworth]

@rickybanister sure! today it's already a little late here, but let's do a hangout next monday and go over all this stuff... funcionality-wise this is ready, we only need to figure out which styles works well (specially for the dropdown)

[enejb]

Needs a rebase :)

[johnHackworth]

rebased!

[enejb]

As per the previous discussion getPluginsContent => renderPluginContent.

[johnHackworth]

@enejb ooooooops ouch, I would have swear that renamed that one other day...sorry! Fixed now! :)

[rickybanister]

Regarding the breakpoint—I think it's probably best to only support jumping to 16px padding at the 480px breakpoint. There isn't a great benefit to the middle breakpoint changing the padding here—this is likely something we should see about standardizing across sections more.

The only other thing I'd really like to see come back is keeping the plugin icon visible even in bulk edit mode. I believe this might be a one-line change.

That said, I'd be happy if we just merged this and did those two small things in a very tiny PR right after. The world needs bulk edit!

[rickybanister]

Is there a plan for tracking bulk edit events? How many people go through with a bulk edit, which types of actions are most common, etc? I imagine they might already exist from before, but just checking.

[johnHackworth]

@rickybanister I agree with refactoring breakpoints in a tiny PR after this one. About the icon, it's included in this other PR : #1554

If @enejb agrees, I'll merge this tomorrow morning!

[johnHackworth]

and about tracking, all that actions have already tracks & analytics events, so we already should have that info

[johnHackworth]

Since it seems that everybody is agree (except for the search box paddings, which will be addressed in a different PR) and we need this merged to continue with other developments, I've rebased this and Im going to merge it