Make database plugin query textarea resizable (#760)

Summary:
In the database plugin, make the SQL text entry box vertically-resizable to improve UX when working with longer queries.

I had wanted to make it a horizontal drag-to-resize divider like in DB Browser for SQLite (see below) as that feels like more what I'd expect to find for this use-case, but it seems to be [non-trivial in HTML and CSS](https://stackoverflow.com/questions/38983039/how-to-create-vertical-drag-to-resize-divider).

![image](https://user-images.githubusercontent.com/7407345/73128656-75c4d900-3fca-11ea-966d-d02e55eee1ad.png)

Side-note, is there any good existing component (in React or Flipper itself) for doing query tabs like in the above screenshot?

## Changelog

Make the database SQL text box vertically-resizable
Pull Request resolved: https://github.com/facebook/flipper/pull/760

Test Plan:
I wrote out a long query and was able to resize the text box to view the whole thing at once
![image](https://user-images.githubusercontent.com/7407345/73128460-b111d880-3fc7-11ea-8441-a83409364b00.png)

Reviewed By: jknoxville

Differential Revision: D19622361

Pulled By: mweststrate

fbshipit-source-id: 2be6884fda24e46c44c7d4c73ecff14571cf10ca
This commit is contained in:
Angus Holder
2020-01-31 06:31:02 -08:00
committed by Facebook Github Bot
parent 3f45414846
commit ed1d73d03c

View File

@@ -1311,6 +1311,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
marginLeft: 16,
marginTop: '1%',
marginBottom: '1%',
resize: 'vertical',
}}
onChange={this.onQueryChanged.bind(this)}
onKeyPress={this.onQueryTextareaKeyPress}