Increase the size of the CodeEditor used for additionalJsonData

[PhilippHeuer]

This pr should fix #125, those values felt like a good default to make the window a little bigger.

I didn't have time to test how it looks / if it works yet - i will be able to test that tomorrow, so i will leave it as a draft for now.

[simPod]

Cool, can you please add a screenshot of the final look?

[PhilippHeuer]

I had to make one more change to adjust the sizes of the parent div gf-form and a div that was wrapped around the codeeditor by the grafana component, so i added a css file for that.

The final result looks like this:

[gjask]

Shouldn't (or could not) height also be dynamic?

[simPod]

Dynamic would be certainly nice

[PhilippHeuer]

This was my initial idea aswell, but this didn't seem so simple to achieve.

I did investigate this a bit, this is the code in grafana/ui for the codeEditor which also shows the div thats wrapping the editor: https://github.com/grafana/grafana/blob/master/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx#L92-L104

which led me to the MonacoEditor:
https://github.com/react-monaco-editor/react-monaco-editor/blob/master/src/editor.tsx

and then ended up on this open issue: microsoft/monaco-editor#794 (comment)
All of the suggestions propose to use editor.onDidChangeModelDecorations, but we can't access that when using the grafana/ui CodeEditor.

So imo. we would need a pr to grafana/ui CodeEditor first to add one of the workarounds from the issue above, ie. when height: auto is set or by adding a new property to toggle it. Without this i don't think that we can have a auto growing code editor.

But i can give it a try and see if i can apply the workaround locally in node_modules for a local build. But the PR to grafana + waiting for the next release will take a while - so this could be a intermediate solution.

[simPod]

Thanks!