[WIP] GraphiQL editor and rework usages of MyQuery

[retrodaredevil]

WIP because I'm waiting on graphiql to be updated.

This is all of the changes for getting GraphiQL support. I also went out of my way to rework how we were dealing with MyQuery and which defaults were being used.

• Added .editorconfig. TBH, I added this on accident, but I think it's useful, so if you want to keep it, awesome. If not, let me know and I'll remove it.
• GraphiQL support was pretty simple. Since GraphiQL doesn't support much customization, I had to do customization through CSS, which is not ideal, but it looks good.
  • The query is only saved upon blur of the GraphiQL editor to avoid needless render() calls.
  • Because we have render() being called so frequently when changing other stuff, I "cache" the GraphiQL element in the annotation editor only. I might add this functionality to the other editors before merging.
• I reworked the annotation query editor, which was required so that the GraphiQL react component could be used.
• I reworked how we were using MyQuery. For my own sanity, I wanted to get rid of as much legacy data as possible, and not save any unneeded data, since regular, variable, and annotation queries use different configurations.
  • Yes, the MyQuery definition looks complicated, but that's the best I came up with to make all the common fields always present, and then make all the other disjoint fields possibly undefined.
• When I added annotation support, I removed annotationTitle, annotationText, annotationTags because Grafana actually provides some of that for us now, although it requires that it uses one of the fields already present, which can be convenient, but doesn't allow us to have custom substitutions. This is where additionalTexts comes in. You can add as many custom fields as you want, which you can then select below for title, tags, text, or ID (I don't know what ID is used for).
• When changed the configuration for annotation stuff, I also made it backwards compatible by detecting old configurations, then automatically converting them to the newer format.

If you want any screenshots, let me know. There should be no breaking changes in this.

The dist/ folder is updated with the latest changes, but since Grafana doesn't support unsigned datasources without dev mode enabled, I think we should consider making a decent .gitignore and remove the dist/ folder altogether. That's another discussion, though.

This has a lot of commits, so I would recommend you squashing before merging. Don't merge this yet, this is just in a state where you can look at the changes on your own time, @retzkek.

[retrodaredevil]

I got the CI to pass, but I can't get circleci to pass. I think it needs to be told to use node 16 rather than node 12, like it is using now.

[retzkek]

Very cool, thanks @retrodaredevil! Your changes sound reasonable, thanks for the detailed descriptions. Give me some time to digest this...

[retzkek]

What version of Grafana are you developing and testing this with? Will we have to drop Grafana 7 support?

[retrodaredevil]

What version of Grafana are you developing and testing this with? Will we have to drop Grafana 7 support?

I've been testing this only with Grafana 8, but I don't believe I have used any Grafana 8 specific features. I know the annotation react support stuff was added in Grafana 7.2, so I assume minimum required Grafana version is going to be 7.2. I bumped the Grafana version a few patches to make one of the CI checks pass, which solved a problem described here: grafana/grafana#38561

I can test on Grafana 7 sometime before merging. It might be a while depending on when graphql/graphiql#2291 gets merged.

[retrodaredevil]

@retzkek I'm having trouble getting circle ci to build. I noticed that it's failing in master even right now. Is that something I shouldn't worry about fixing? I'm almost ready to mark this as non-draft, and I've been struggling to get it to work. I got it working for the most part, but it seems to fail around the same time of the current fail on the master branch (I think). I got it working to a point where it's not complaining about an old node version.

[retzkek]

Nah you could even remove circleci if you wanted, or just ignore it and we'll remove it later, we don't need both and it's not worth the trouble.

[retrodaredevil]

Pretty much it's all done now, except for it working on any Grafana 7 version. Grafana 7 uses Webpack 4, which codemirror (graphiql depends on) does not like at all. I'm going to continue to try and get it working on Grafana 7 and see if I can incorporate a workaround for webpack/webpack#5429 and surmon-china/vue-codemirror#86 (although we don't use vue obviously).

In my last commit, I changed the variable config editor to use a class. I tried getting that to work using the functional style, but IMO the functional style is hard to understand if we're trying to cache stuff. It's just easier to use a constructor.

[retrodaredevil]

Finals and final projects for classes are keeping me busy. I'll get back to this eventually lol, but I did not have a good time trying to get it to work on Grafana 7.

[retzkek]

Grafana 9 is going to be released soon, so I'm ok dropping support for 7. Thanks for trying!

[retrodaredevil]

Cool. That will probably end up happening. I just need to test this a bit more because I think there are some bugs in it.