UI: Segment fixes (#20947)

* Add support for primitive values/onchange

* Fix segment clickaway bug

* Fix onchange

* Use primitive in cloudwatch

* Add placeholder

* Use placeholder in cloudwatch editor

* Fix lint error

* Fix lodash import

* Use new component story format

* Add support for autofocus

* Use selectable value for onchange event

* Fix lint error

public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx

@@ -34,15 +34,13 @@ export const Dimensions: FunctionComponent<Props> = ({ dimensions, loadValues, l
     return options.filter(({ value }) => !Object.keys(data).includes(value));
   };
 
-  const toOption = (value: any) => ({ label: value, value });
-
   return (
     <>
       {Object.entries(data).map(([key, value], index) => (
         <Fragment key={index}>
           <SegmentAsync
             allowCustomValue
-            value={toOption(key)}
+            value={key}
             loadOptions={() => loadKeys().then(keys => [removeOption, ...excludeUsedKeys(keys)])}
             onChange={({ value: newKey }) => {
               const { [key]: value, ...newDimensions } = data;
@@ -56,7 +54,8 @@ export const Dimensions: FunctionComponent<Props> = ({ dimensions, loadValues, l
           <label className="gf-form-label query-segment-operator">=</label>
           <SegmentAsync
             allowCustomValue
-            value={toOption(value || 'select dimension value')}
+            value={value}
+            placeholder="select dimension value"
             loadOptions={() => loadValues(key)}
             onChange={({ value: newValue }) => setData({ ...data, [key]: newValue })}
           />

public/app/plugins/datasource/cloudwatch/components/QueryEditor.tsx

@@ -112,7 +112,8 @@ export class QueryEditor extends PureComponent<Props, State> {
       <>
         <QueryInlineField label="Region">
           <Segment
-            value={this.toOption(query.region || 'Select region')}
+            value={query.region}
+            placeholder="Select region"
             options={regions}
             allowCustomValue
             onChange={({ value: region }) => this.onChange({ ...query, region })}
@@ -123,7 +124,8 @@ export class QueryEditor extends PureComponent<Props, State> {
           <>
             <QueryInlineField label="Namespace">
               <Segment
-                value={this.toOption(query.namespace || 'Select namespace')}
+                value={query.namespace}
+                placeholder="Select namespace"
                 allowCustomValue
                 options={namespaces}
                 onChange={({ value: namespace }) => this.onChange({ ...query, namespace })}
@@ -132,7 +134,8 @@ export class QueryEditor extends PureComponent<Props, State> {
 
             <QueryInlineField label="Metric Name">
               <SegmentAsync
-                value={this.toOption(query.metricName || 'Select metric name')}
+                value={query.metricName}
+                placeholder="Select metric name"
                 allowCustomValue
                 loadOptions={this.loadMetricNames}
                 onChange={({ value: metricName }) => this.onChange({ ...query, metricName })}

public/app/plugins/datasource/cloudwatch/components/Stats.tsx

@@ -12,7 +12,6 @@ export interface Props {
 
 const removeText = '-- remove stat --';
 const removeOption: SelectableValue<string> = { label: removeText, value: removeText };
-const toOption = (value: any) => ({ label: value, value });
 
 export const Stats: FunctionComponent<Props> = ({ stats, values, onChange, variableOptionGroup }) => (
   <>
@@ -21,7 +20,7 @@ export const Stats: FunctionComponent<Props> = ({ stats, values, onChange, varia
         <Segment
           allowCustomValue
           key={value + index}
-          value={toOption(value)}
+          value={value}
           options={[removeOption, ...stats, variableOptionGroup]}
           onChange={({ value }) =>
             onChange(