COMPASS-419: Expand all/collapse all in document

[durran]

Didn't know exactly how to handle this from a design perspective, so I added 2 buttons, an "expand all" button and "collapse all" button next to the other document actions that appear on hover of the document. I used font awesome's Double Angle Down and Double Angle Up icons.

cc/ @fredtruman @Sean-Oh

Here's the behaviour:

[Sean-Oh]

This mostly LGTM.
I changed the caret icons to the following:

One recommendation: Is it possible to have only one button at a time that toggles between collapse and expand functions? Maybe we can switch the IconButtons depending on the state of expandAll.

[rueckstiess]

Agree with Sean one button that changes its icon from down-arrow (expanded) to side-arrow (collapsed, note: not up-arrow!) would probably suffice. If we add multiple buttons to the toolbar for such small features we will quickly look like Microsoft Word :-)

[Sean-Oh]

Good catch! Definitely should be a side-arrow to collapse and a down-arrow to expand.

[fredtruman]

Maybe since Durran is out, do you guys think we can merge as is and address with separate tickets for style pass?

[samweaver-zz]

+1 on single button. Does it require any more eng work or can it be done in a style pass?

…

On 6 December 2016 at 11:12, Fred Truman ***@***.***> wrote: Maybe since Durran is out, do you guys think we can merge as is and address with separate tickets for style pass? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#663 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA-E-zV3cexqBOuvhTbtnSmGW_0ggl2Iks5rFYmKgaJpZM4LDoZp> .

-- *{* name : "*Sam Weaver*", title : "Product Manager", phone : "+447549938422", location : ["New York City, NY", "London, UK"], twitter : ["@Samuel_Weaver <https://www.twitter.com/samuel_weaver>", " @mongodb <https://www.twitter.com/mongodb>"], facebook : "MongoDB <https://www.facebook.com/mongodb>" *}*

[Sean-Oh]

I took a stab at it last night, but couldn't figure out how to get the expandAll state values to pass down properly. I'm not very good with react haha. An engineer could probably do this very quickly though.

[samweaver-zz]

Then let's not merge the work and wait for Durran to get back to help.

…

On 6 December 2016 at 16:52, Sean Oh ***@***.***> wrote: I took a stab at it last night, but couldn't figure out how to get the expandAll state values to pass down properly. I'm not very good with react haha. An engineer could probably do this very quickly though. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#663 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA-E-1edm6GgCnkWY0gLjTLFwJnv9ilyks5rFdkOgaJpZM4LDoZp> .

-- *{* name : "*Sam Weaver*", title : "Product Manager", phone : "+447549938422", location : ["New York City, NY", "London, UK"], twitter : ["@Samuel_Weaver <https://www.twitter.com/samuel_weaver>", " @mongodb <https://www.twitter.com/mongodb>"], facebook : "MongoDB <https://www.facebook.com/mongodb>" *}*

[fredtruman]

Sounds good

[durran]

Using 1 button increases the scope of this feature tremendously and also would come with potential performance implications on deeply nested documents. Consider the situation:

User clicks the expand all button. All the elements in the document are expanded. The icon switches to collapse all. The user manually collapses each nested field one by one. Now they want to expand them all again.

If we want the button to be intuitive, then which icon it displays depends on the state of all expandable elements all the way down the tree of the document. It would need to track this state and adds a level of complexity here that I think is unnecessary.

If we don't care, then it can be simple and simply toggle back and forth between the two. The case above would be that the user would have to click the button twice (once to collapse all, even though they have already collapsed them all) and then once again to expand all.

[rueckstiess]

If we don't care, then it can be simple and simply toggle back and forth between the two. The case above would be that the user would have to click the button twice (once to collapse all, even though they have already collapsed them all) and then once again to expand all.

I think that's ok. This is a common pattern. The button just has two states and toggles between them. Even if the user manually starts collapsing fields we don't track or measure that. The button just switches between expandAll and collapseAll. You can always click twice to get to the desired state.

[durran]

@fredtruman @Sean-Oh @rueckstiess Updated to use just one button: