@grafana/ui Segment Usage Guidance

Grafana Plugin Development
1

Hi there,

I have been working on a custom backend datasource and have been using the CloudWatch and StackDriver frontend implementations as a guide for React development. After overcoming a number of build related issues I find myself struggling to make a simple UI dropdown component operational. My approach is as per the aforementioned frontend implementations using a component called Segment from grafana/ui. I have a class-based QueryEditor component where in the render function I have code as follows:

<QueryInlineField label="Metric">
  <Segment
     value={query.metric}
     options={metric.map(toOption)}
     placeholder="Select Metric"
     allowCustomValue
     onChange={(item) => {
       console.log(item);
       }}
  />

According to the implementation of Segment I would be expecting item to be of the type SelectableValue<T> (where T is a string in my case). What I am seeing when I log to the console is that item is just the string value of the selection and not a SelectableValue<string> which would have properties value and label. This is problematic as I am trying to use code like onChange={({ value: metric }) => onQueryChange({ ...query, metric })} as per the CloudWatch and StackDriver implementations but value is always undefined.

I am most certainly nothing more than a hacker when it comes to frontend but this sure seems a lot harder than it should be. If I could get any pointers on what I am doing wrong here it would be greatly appreciated.

For the record I am using v6.6.0 of @grafana/ui

2

Upgrading to devDependencies to

    "@grafana/toolkit": "6.7.3",
    "@grafana/ui": "6.7.3",
    "@grafana/data": "6.7.3"

seemed to do the trick.