React Dropdowns and Checkboxes for Grafana DS Plugin

Hi everyone,

Since Grafana is migrating from Angular to ReactJS, I have been tasked to rewrite the datasource plugin of the company I work in to also use React elements. To do the task, I decided to use the grafana-toolkit as a base.

I noticed that instead of using the HTML input tag for string inputs, the toolkit offers the FormField element located in node_modules/@grafana/ui/components folder. In our old plugin, we used Angular along with the gf-form-checkbox and gf-form-dropdown tags.

Here is my question:
Currently, are there any Grafana elements that replace gf-form-checkbox and gf-form-dropdown in the same way FormField replaces input? I tried searching the ui/components folder, but without success (or at least without recognising them).

Hello @alistairv,

Please take a look at:

it may give you an idea on available components.

For example, Select:

Regards,
V.

Hello @vsergeyev ,

thank you very much for the answer! The MetricSelect element fulfills the role of a gf-form-dropdown really well.

As far as I saw, the Select folder you shared contains maily menu-esque elements (hence the name, I guess). Do you also happen to know a gf-form-checkbox substitute? I suppose I could modify an input field somehow, but that’d be a downgrade from the current state.

Kind regards,
A.

Hi!

If you look in your package.json, which version of @grafana/ui do you have?

We’re currently working on preparing @grafana/ui for 7.0, and we have a lot of new components avilable here https://developers.grafana.com/ui/canary/index.html?path=/story/forms-checkbox--controlled. If you want to experiment with the, try either latest or next version (https://www.npmjs.com/package/@grafana/ui)

They are under heavy development right now - so next is very unstable.

/Tobias Skarhed

Hi,

the @grafana/ui is already set to next. I just ran a fresh yarn install and was able to find the Forms constant with all the elements it offers, it was just what I needed. Thanks for the help, and for the Docs Overview in the link, it is really convenient for checking usages and elements without having to manually try them inside the project :slight_smile:

A.

Awesome! If you use next you will have issues, as we are currently moving elements from the Forms constant. latest is preferred until 7.0