@grafana/create-plugin 1.0.0-canary.193.7528d7d.0 → 1.0.0

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+# v1.0.0 (Fri Feb 03 2023)
+
+#### 💥 Breaking Change
+
+- Introduce version commands [#193](https://github.com/grafana/plugin-tools/pull/193) ([@jackw](https://github.com/jackw))
+
+#### Authors: 1
+
+- Jack Westbrook ([@jackw](https://github.com/jackw))
+
+---
+
+# v0.11.0 (Fri Feb 03 2023)
+
+:tada: This release contains work from a new contributor! :tada:
+
+Thank you, Isabella Siu ([@iwysiu](https://github.com/iwysiu)), for all your work!
+
+#### 🚀 Enhancement
+
+- Update datasource plugin template [#172](https://github.com/grafana/plugin-tools/pull/172) ([@iwysiu](https://github.com/iwysiu) [@jackw](https://github.com/jackw))
+
+#### Authors: 2
+
+- Isabella Siu ([@iwysiu](https://github.com/iwysiu))
+- Jack Westbrook ([@jackw](https://github.com/jackw))
+
+---
+
+# v0.10.0 (Thu Feb 02 2023)
+
+#### 🚀 Enhancement
+
+- CreatePlugin: Change default docker image to grafana-enterprise [#197](https://github.com/grafana/plugin-tools/pull/197) ([@mckn](https://github.com/mckn))
+
+#### Authors: 1
+
+- Marcus Andersson ([@mckn](https://github.com/mckn))
+
+---
+
 # v0.9.1 (Thu Feb 02 2023)
 
 #### 🐛 Bug Fix

package/README.md

@@ -12,13 +12,13 @@ Create Grafana plugins with ease.
       - [`npx`](#npx)
       - [`npm`](#npm)
   - [Migrate your existing plugin](#migrate-your-existing-plugin)
-    - [Things to check after migration](#things-to-check-after-migration)
   - [Update your plugin build config](#update-your-plugin-build-config)
   - [Customizing or extending the basic configs](#customizing-or-extending-the-basic-configs)
   - [Contributing](#contributing)
 
 **Links**
 
+- [Plugin Tools docs](https://grafana.github.io/plugin-tools/)
 - [Plugin developer docs](https://grafana.com/docs/grafana/latest/developers/plugins/)
 - [Plugin migration guide](https://grafana.com/docs/grafana/latest/developers/plugins/migration-guide/)
 
@@ -61,6 +61,7 @@ npm init @grafana/plugin
 ---
 
 ## Migrate your existing plugin
+
 :warning: We [do not support](https://grafana.com/docs/grafana/latest/developers/angular_deprecation/) plugins written in `angular`
 
 In case you have an existing plugin previously created using the `@grafana/toolkit` you can use the
@@ -73,11 +74,7 @@ cd ./my-plugin
 npx @grafana/create-plugin migrate
 ```
 
-### Things to check after migration
-
-- If you have a custom webpack configuration you might need to migrate it. You can read more about customizing or extending the basic configuration [here](templates/common/.config/README.md)
-- Build your plugin. Run `yarn build` to check your plugin builds as intended.
-- Test your plugin. Test your plugin inside grafana to confirm it is working as intended.
+For more information see [here](https://grafana.github.io/plugin-tools/docs/migrating-from-toolkit)
 
 ---
 
@@ -96,11 +93,13 @@ cd ./my-plugin
 npx @grafana/create-plugin update
 ```
 
+For more information see [here](https://grafana.github.io/plugin-tools/docs/updating-to-new-releases)
+
 ---
 
 ## Customizing or extending the basic configs
 
-You can read more about customizing or extending the basic configuration [here](templates/common/.config/README.md)
+You can read more about customizing or extending the basic configuration [here](https://grafana.github.io/plugin-tools/docs/advanced-configuration/)
 
 ## Contributing
 

package/dist/constants.js

@@ -80,7 +80,7 @@ exports.TEXT = {
     updateNpmScriptsSuccess: 'NPM scripts updated successfully.',
     updateNpmScriptsAborted: 'No NPM scripts have been added or updated.',
     migrationCommandWarning: '**⚠️  Warning!**\nThis is going to change files in your current project to make it up-to-date with the latest plugin configuration.\nPlease make sure that you have backed up your changes.',
-    migrationCommandSuccess: "\n## What's next?\n * Run `yarn install` to install the latest dependencies.\n * Check your tsconfig.json. You might need to update if you had a custom configuration.\n * If you have a custom webpack configuration you might need to update it too.\n * Run `yarn build` and observe the output for any errors.\n * Test your plugin in grafana and make sure everything works as expected.\n\nSee instructions on how to customize your configuration here https://github.com/grafana/plugin-tools/blob/main/packages/create-plugin/templates/common/.config/README.md\n  ",
+    migrationCommandSuccess: "\n## What's next?\n * Run `yarn install` to install the latest dependencies.\n * Check your tsconfig.json. You might need to update if you had a custom configuration.\n * If you have a custom webpack configuration you might need to update it too.\n * Run `yarn build` and observe the output for any errors.\n * Test your plugin in grafana and make sure everything works as expected.\n\nSee instructions on how to customize your configuration here https://grafana.github.io/plugin-tools/docs/advanced-configuration/\n  ",
     updateCommandWarning: '**⚠️  Warning!**\nThis is going to update files under the `.config/` folder.\nMake sure to commit your changes before running this script.',
     updateCommandSuccess: '**Done.**\nIf you have any questions please open an issue/discussion in https://github.com/grafana/plugin-tools.'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "1.0.0-canary.193.7528d7d.0",
+  "version": "1.0.0",
   "main": "index.js",
   "repository": {
     "directory": "packages/create-plugin",
@@ -60,5 +60,5 @@
   "engines": {
     "node": ">=16"
   },
-  "gitHead": "7528d7d77de610d16aedb4cfd5a80fef1222016f"
+  "gitHead": "1b6746b0c95271772741cf1a8cba405919f53874"
 }

package/src/constants.ts

@@ -115,7 +115,7 @@ export const TEXT = {
  * Run \`yarn build\` and observe the output for any errors.
  * Test your plugin in grafana and make sure everything works as expected.
 
-See instructions on how to customize your configuration here https://github.com/grafana/plugin-tools/blob/main/packages/create-plugin/templates/common/.config/README.md
+See instructions on how to customize your configuration here https://grafana.github.io/plugin-tools/docs/advanced-configuration/
   `,
 
   updateCommandWarning: '**⚠️  Warning!**\nThis is going to update files under the `.config/` folder.\nMake sure to commit your changes before running this script.',

package/templates/backend/pkg/plugin/datasource.go

@@ -3,6 +3,7 @@ package plugin
 import (
 	"context"
 	"encoding/json"
+	"fmt"
 	"math/rand"
 	"time"
 
@@ -73,10 +74,12 @@ func (d *Datasource) query(_ context.Context, pCtx backend.PluginContext, query
 
 	err := json.Unmarshal(query.JSON, &qm)
 	if err != nil {
-		return backend.ErrDataResponse(backend.StatusBadRequest, "json unmarshal: " + err.Error())
+		return backend.ErrDataResponse(backend.StatusBadRequest, fmt.Sprintf("json unmarshal: %v", err.Error()))
 	}
 
 	// create data frame response.
+	// For an overview on data frames and how grafana handles them:
+	// https://grafana.com/docs/grafana/latest/developers/plugins/data-frames/
 	frame := data.NewFrame("response")
 
 	// add fields.

package/templates/common/.config/.eslintrc

@@ -1,7 +1,8 @@
 /*
  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
  *
- * In order to extend the configuration follow the steps in .config/README.md
+ * In order to extend the configuration follow the steps in
+ * https://grafana.github.io/plugin-tools/docs/advanced-configuration#extending-the-eslint-config
  */
  {
   "extends": ["@grafana/eslint-config"],

package/templates/common/.config/Dockerfile

@@ -1,6 +1,7 @@
 ARG grafana_version=latest
+ARG grafana_image=grafana-enterprise
 
-FROM grafana/grafana:${grafana_version}
+FROM grafana/${grafana_image}:${grafana_version}
 
 # Make it as simple as possible to access the grafana instance for development purposes
 # Do NOT enable these settings in a public facing / production grafana instance

package/templates/common/.config/README.md

@@ -139,3 +139,26 @@ We need to update the `scripts` in the `package.json` to use the extended Webpac
 -"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
 +"dev": "webpack -w -c ./webpack.config.ts --env development",
 ```
+
+### Configure grafana image to use when running docker
+
+By default `grafana-enterprise` will be used as the docker image for all docker related commands. If you want to override this behaviour simply alter the `docker-compose.yaml` by adding the following build arg `grafana_image`. 
+
+**Example:**
+
+```yaml
+version: '3.7'
+
+services:
+  grafana:
+    container_name: 'myorg-basic-app'
+    build:
+      context: ./.config
+      args:
+        grafana_version: ${GRAFANA_VERSION:-9.1.2}
+        grafana_image: ${GRAFANA_IMAGE:-grafana}
+```
+
+In this example we are assigning the environment variable `GRAFANA_IMAGE` to the build arg `grafana_image` with a default value of `grafana`. This will give you the possibility to set the value while running the docker-compose commands which might be convinent in some scenarios.
+
+---

package/templates/common/.config/jest-setup.js

@@ -1,7 +1,8 @@
 /*
  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
  *
- * In order to extend the configuration follow the steps in .config/README.md
+ * In order to extend the configuration follow the steps in
+ * https://grafana.github.io/plugin-tools/docs/advanced-configuration#extending-the-jest-config
  */
 
 import '@testing-library/jest-dom';

package/templates/common/.config/jest.config.js

@@ -1,7 +1,8 @@
 /*
  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
  *
- * In order to extend the configuration follow the steps in .config/README.md
+ * In order to extend the configuration follow the steps in
+ * https://grafana.github.io/plugin-tools/docs/advanced-configuration#extending-the-jest-config
  */
 
 const path = require('path');

package/templates/common/.config/tsconfig.json

@@ -1,7 +1,8 @@
 /*
  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
  *
- * In order to extend the configuration follow the steps in .config/README.md
+ * In order to extend the configuration follow the steps in
+ * https://grafana.github.io/plugin-tools/docs/advanced-configuration#extending-the-typescript-config
  */
  {
   "compilerOptions": {

package/templates/common/.config/webpack/webpack.config.ts

@@ -1,7 +1,8 @@
 /*
  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
  *
- * In order to extend the configuration follow the steps in .config/README.md
+ * In order to extend the configuration follow the steps in
+ * https://grafana.github.io/plugin-tools/docs/advanced-configuration#extending-the-webpack-config
  */
 
 import CopyWebpackPlugin from 'copy-webpack-plugin';

package/templates/datasource/src/components/ConfigEditor.tsx

@@ -1,17 +1,13 @@
-import React, { ChangeEvent, PureComponent } from 'react';
-import { LegacyForms } from '@grafana/ui';
+import React, { ChangeEvent } from 'react';
+import { InlineField, Input, SecretInput } from '@grafana/ui';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { MyDataSourceOptions, MySecureJsonData } from '../types';
 
-const { SecretFormField, FormField } = LegacyForms;
-
 interface Props extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions> {}
 
-interface State {}
-
-export class ConfigEditor extends PureComponent<Props, State> {
-  onPathChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onOptionsChange, options } = this.props;
+export function ConfigEditor(props: Props) {
+  const { onOptionsChange, options } = props;
+  const onPathChange = (event: ChangeEvent<HTMLInputElement>) => {
     const jsonData = {
       ...options.jsonData,
       path: event.target.value,
@@ -20,8 +16,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
   };
 
   // Secure field (only sent to the backend)
-  onAPIKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onOptionsChange, options } = this.props;
+  const onAPIKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
     onOptionsChange({
       ...options,
       secureJsonData: {
@@ -30,8 +25,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
     });
   };
 
-  onResetAPIKey = () => {
-    const { onOptionsChange, options } = this.props;
+  const onResetAPIKey = () => {
     onOptionsChange({
       ...options,
       secureJsonFields: {
@@ -45,39 +39,29 @@ export class ConfigEditor extends PureComponent<Props, State> {
     });
   };
 
-  render() {
-    const { options } = this.props;
-    const { jsonData, secureJsonFields } = options;
-    const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData;
-
-    return (
-      <div className="gf-form-group">
-        <div className="gf-form">
-          <FormField
-            label="Path"
-            labelWidth={6}
-            inputWidth={20}
-            onChange={this.onPathChange}
-            value={jsonData.path || ''}
-            placeholder="json field returned to frontend"
-          />
-        </div>
+  const { jsonData, secureJsonFields } = options;
+  const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData;
 
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <SecretFormField
-              isConfigured={(secureJsonFields && secureJsonFields.apiKey) as boolean}
-              value={secureJsonData.apiKey || ''}
-              label="API Key"
-              placeholder="secure json field (backend only)"
-              labelWidth={6}
-              inputWidth={20}
-              onReset={this.onResetAPIKey}
-              onChange={this.onAPIKeyChange}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
+  return (
+    <div className="gf-form-group">
+      <InlineField label="Path" labelWidth={12}>
+        <Input
+          onChange={onPathChange}
+          value={jsonData.path || ''}
+          placeholder="json field returned to frontend"
+          width={40}
+        />
+      </InlineField>
+      <InlineField label="API Key" labelWidth={12}>
+        <SecretInput
+          isConfigured={(secureJsonFields && secureJsonFields.apiKey) as boolean}
+          value={secureJsonData.apiKey || ''}
+          placeholder="secure json field (backend only)"
+          width={40}
+          onReset={onResetAPIKey}
+          onChange={onAPIKeyChange}
+        />
+      </InlineField>
+    </div>
+  );
 }

package/templates/datasource/src/components/QueryEditor.tsx

@@ -1,47 +1,32 @@
-import React, { ChangeEvent, PureComponent } from 'react';
-import { LegacyForms } from '@grafana/ui';
+import React, { ChangeEvent } from 'react';
+import { InlineField, Input } from '@grafana/ui';
 import { QueryEditorProps } from '@grafana/data';
 import { DataSource } from '../datasource';
 import { MyDataSourceOptions, MyQuery } from '../types';
 
-const { FormField } = LegacyForms;
-
 type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
 
-export class QueryEditor extends PureComponent<Props> {
-  onQueryTextChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onChange, query } = this.props;
+export function QueryEditor({ query, onChange, onRunQuery }: Props) {
+  const onQueryTextChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange({ ...query, queryText: event.target.value });
   };
 
-  onConstantChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onChange, query, onRunQuery } = this.props;
+  const onConstantChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange({ ...query, constant: parseFloat(event.target.value) });
     // executes the query
     onRunQuery();
   };
 
-  render() {
-    const { queryText, constant } = this.props.query;
+  const { queryText, constant } = query;
 
-    return (
-      <div className="gf-form">
-        <FormField
-          width={4}
-          value={constant}
-          onChange={this.onConstantChange}
-          label="Constant"
-          type="number"
-          step="0.1"
-        />
-        <FormField
-          labelWidth={8}
-          value={queryText || ''}
-          onChange={this.onQueryTextChange}
-          label="Query Text"
-          tooltip="Not used yet"
-        />
-      </div>
-    );
-  }
+  return (
+    <div className="gf-form">
+      <InlineField label="Constant">
+        <Input onChange={onConstantChange} value={constant} width={8} type="number" step="0.1" />
+      </InlineField>
+      <InlineField label="Query Text" labelWidth={16} tooltip="Not used yet">
+        <Input onChange={onQueryTextChange} value={queryText || ''} />
+      </InlineField>
+    </div>
+  );
 }