Add collapse to sidebar

[haivp3010]

This pull request targets issue #317.
A collapse bar is put just to the left of the sidebar, making use of the space between the sidebar and the window border.

[maxcnunes]

The code looks good to me. I will test it properly later this week though.

[maxcnunes]

Sorry @haivp3010, I have been traveling and I have not been having free time to review it. I will try to find someone else who can do it.
Could someone (@BornaP @s-kem) review it, please?

[BornaP]

I'll take a look

[BornaP]

Hey @haivp3010 thanks for Pull requests. There's an issue though. When you execute some query and collapse menu afterwards, part of the table is whitened out:

Could you please take a look :)

[haivp3010]

I think the problem is with window resize itself, so maybe it needs a separate issue/PR. I will look into that and confirm later today.

[s-kem]

@haivp3010 I'm seeing a couple things here...

query-result-table ends up inheriting props.widthOffset from query-browser's state.sideBarWidth. Even when the sidebar is collapsed, the state is still the actual width of the sidebar, so it's still offsetting by that value.

A ternary around line 514 on the widthOffset prop sent to Query fixes it -- widthOffset={this.state.sidebarCollapsed ? 0 : this.state.sideBarWidth}

Simply setting sideBarWidth to 0 on onCollapseClick seems to disable your collapsing, I assume due to your use of negative margin.

However this only works when you collapse the sidebar first and then execute the query. It appears there's also an overall re-rendering issue in query-result-table not re-rendering when props.widthOffset changes. I'm noticing the table not resizing when I drag resize the sidebar.

[s-kem]

I made a PR, #395 that solves the re-render issue. As long as you're passing a 0 offset down when collapsing the sidebar it should cause either a re-render or a recompute of the grid size to happen.

[BornaP]

Cool. I'll check it today or tomorrow afternoon (European time ;) )

[BornaP]

Since @s-kem has resolved re-rendering issue, I'll merge this PR. Thank you @haivp3010 👏