Migrate to create-plugin tool

[andresmgot]

The goal of this PR is migrate the plugin to use the tool @grafana/create-plugin.

Note that now the command yarn watch has been replaced with yarn dev.

All the changes here are the result of executing the migration steps except the following:

• The grafana dependencies has been updated to the latest versions
• The tsconfig configuration has been adapted to the plugin
• Some minor lint fix in the plugin code

Draft notes

• dacc7fe includes the unmodified changes after running the tool
• d853b69 some additional changes I needed for jest to properly import things with a path relative to rootdir and CSS files
• 1be1942 upgraded grafana dependencies since by default the tool sets 9.1.2

From there, now webpack is crashing hard with different kind of errors I am having trouble to fix:

SOLVED 1. Failed to import a css file. This is the same error I found with jest:

../node_modules/prismjs/themes/prism-tomorrow.min.css 1.28 KiB [built] [1 error]

ERROR in ../node_modules/prismjs/themes/prism-tomorrow.min.css 1:10
Module parse failed: Unexpected token (1:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}

SOLVED 2. Failed to import files with a path relative to the rootdir. Again, I fixed this in jest but I am not sure how to fix it for webpack:

ERROR in ./components/QueryEditor/QueryEditor.tsx 69:0-67
Module not found: Error: Can't resolve 'migrations/query' in '/home/andres/projects/src/github.com/grafana/azure-data-explorer-datasource/src/components/QueryEditor'
 @ ./components/QueryEditor/index.tsx 17:0-62 20:82-96
 @ ./module.ts 34:0-55 37:134-145

SOLVED 3. Multiple typescript errors. Not sure if we should fix them or modify the TS config to allow them:

Type-checking in progress...
ERROR in ./src/components/ConfigEditor/DatabaseConfig.tsx:27:29
TS7006: Parameter 'mapping' implicitly has an 'any' type.

You can reproduce the errors above with yarn build or yarn dev.

I am not an webpack expert so can we get some guidance here @jackw @academo? Thanks!

Fixes #489

[jackw]

@andresmgot thanks for the ping. I've gone ahead and opened a bug report in https://github.com/grafana/plugin-tools to fix some of the issues reported here.

[academo]

Hi @andresmgot regarding error 3 the configuration that comes with create-plugin doesn't allow for implicity any.

You can change this by modifying your tsconfig.json file and adding "noImplicitAny": false, to the compilerOptions. If you haven't modified that file yet it will look like this

  "extends": "./.config/tsconfig.json",
  "compilerOptions": {
    "noImplicitAny": false
  }
}

Jack is looking into the CSS issue and I'll see for error 2.

[academo]

I created a but report for the second issue grafana/plugin-tools#101

[jackw]

Have opened PRs to address issues 1 and 2.

grafana/plugin-tools#103
grafana/plugin-tools#104

[andresmgot]

Thanks for the quick response and fixes!

Another thing that we need to adapt is drone: https://drone.grafana.net/grafana/azure-data-explorer-datasource/595/1/5 it expects plugins to have grafana-toolkit 🤔

[github-actions]

Levitate is-compatible report:

🔍 Resolving @grafana/data@latest...
🔍 Resolving @grafana/ui@latest...
🔍 Resolving @grafana/runtime@latest...
🔍 Resolving @grafana/e2e-selectors@latest...

🔬 Checking compatibility between ./src/module.ts and @grafana/data@9.2.3...
✔ Found @grafana/data version 9.2.1 locally

🔬 Checking compatibility between ./src/module.ts and @grafana/ui@9.2.3...
✔ Found @grafana/ui version 9.2.1 locally

🔬 Checking compatibility between ./src/module.ts and @grafana/runtime@9.2.3...
✔ Found @grafana/runtime version 9.2.1 locally

🔬 Checking compatibility between ./src/module.ts and @grafana/e2e-selectors@9.2.3...
✔ Found @grafana/e2e-selectors version 9.1.2 locally

✔️ ./src/module.ts appears to be compatible with @grafana/data,@grafana/ui,@grafana/runtime,@grafana/e2e-selectors

[github-actions]

Backend code coverage report for PR #499
No changes

[github-actions]

Frontend code coverage report for PR #499

Plugin	Main	PR	Difference
src	78.79%	80.36%	1.57%

[aangelisc]

Nice work! Only question from me is if it'd be worth updating CONTRIBUTING.md to provide some more info on how to develop this plugin using the new toolkit. I don't think it's necessary but could be nice to have.

[andresmgot]

Nice work! Only question from me is if it'd be worth updating CONTRIBUTING.md to provide some more info on how to develop this plugin using the new toolkit. I don't think it's necessary but could be nice to have.

not much is different (basically you don't need to interact with the new tool, it's just for bootstraping the plugin)

[asimpson]

Forgot to approve this 🙈

Looks good!