public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[v9.4.x] Plugins doc review chunk 2 (#68411)

Browse Source 
Plugins doc review chunk 2 (#67691)

* Doc style edit for 7 topics

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Proofread topics

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Prettier

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Doc fix

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Update docs/sources/developers/plugins/add-query-editor-help.md

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>

* Doc fixes

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Changes from doc review

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Incorporate review feedback

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* More fixes

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* More doc fixes

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

---------

Signed-off-by: Joe Perez <joseph.perez@grafana.com>
Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
(cherry picked from commit 49a18bc8e2)

Co-authored-by: Joseph Perez <45749060+josmperez@users.noreply.github.com>
This commit is contained in:
Grot (@grafanabot)
2023-05-12 20:00:40 +01:00
committed by GitHub
parent b3b956b01e
commit ec973b648a
7 changed files with 383 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/sources/developers/plugins/add-query-editor-help.md
+5 -5
View File
@@ -2,11 +2,11 @@
title: Add query editor help
---
# Add a query editor help component
# Add query editor help
By adding a help component to your plugin, you can for example create "cheat sheets" with commonly used queries. When the user clicks on one of the examples, it automatically updates the query editor. It's a great way to increase productivity for your users.
Query editors support the addition of a help component to display examples of potential queries. When the user clicks on one of the examples, the query editor is automatically updated. This helps the user to make faster queries.
1. Create a file `QueryEditorHelp.tsx` in the `src` directory of your plugin, with the following content:
1. In the `src` directory of your plugin, create a file `QueryEditorHelp.tsx` with the following content:
```ts
import React from 'react';
@@ -17,7 +17,7 @@ By adding a help component to your plugin, you can for example create "cheat she
};
```
1. Configure the plugin to use the `QueryEditorHelp`.
1. Configure the plugin to use `QueryEditorHelp`:
```ts
import QueryEditorHelp from './QueryEditorHelp';
@@ -30,7 +30,7 @@ By adding a help component to your plugin, you can for example create "cheat she
.setQueryEditorHelp(QueryEditorHelp);
```
1. Create a few examples.
1. Create a few examples of potential queries:
```ts
import React from 'react';