Add multiselect options ui (#31501)

* add multiselect options ui

* Change import

* Add addMultiSelect method to ui builder

packages/grafana-data/src/utils/OptionsUIBuilders.ts

@@ -181,6 +181,16 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     });
   }
 
+  addMultiSelect<TOption, TSettings extends SelectFieldConfigSettings<TOption>>(
+    config: PanelOptionsEditorConfig<TOptions, TSettings, TOption>
+  ) {
+    return this.addCustomEditor({
+      ...config,
+      id: config.path,
+      editor: standardEditorsRegistry.get('multi-select').editor as any,
+    });
+  }
+
   addRadio<TOption, TSettings extends SelectFieldConfigSettings<TOption>>(
     config: PanelOptionsEditorConfig<TOptions, TSettings, TOption>
   ) {

packages/grafana-ui/src/components/OptionsUI/multiSelect.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { FieldConfigEditorProps, SelectFieldConfigSettings, SelectableValue } from '@grafana/data';
+import { MultiSelect } from '../Select/Select';
+
+interface State<T> {
+  isLoading: boolean;
+  options: Array<SelectableValue<T>>;
+}
+
+type Props<T> = FieldConfigEditorProps<T[], SelectFieldConfigSettings<T>>;
+
+export class MultiSelectValueEditor<T> extends React.PureComponent<Props<T>, State<T>> {
+  state: State<T> = {
+    isLoading: true,
+    options: [],
+  };
+
+  componentDidMount() {
+    this.updateOptions();
+  }
+
+  componentDidUpdate(oldProps: Props<T>) {
+    const old = oldProps.item?.settings;
+    const now = this.props.item?.settings;
+    if (old !== now) {
+      this.updateOptions();
+    } else if (now?.getOptions) {
+      const old = oldProps.context?.data;
+      const now = this.props.context?.data;
+      if (old !== now) {
+        this.updateOptions();
+      }
+    }
+  }
+
+  updateOptions = async () => {
+    const { item } = this.props;
+    const { settings } = item;
+    let options: Array<SelectableValue<T>> = item.settings?.options || [];
+    if (settings?.getOptions) {
+      options = await settings.getOptions(this.props.context);
+    }
+    if (this.state.options !== options) {
+      this.setState({
+        isLoading: false,
+        options,
+      });
+    }
+  };
+
+  render() {
+    const { options, isLoading } = this.state;
+    const { value, onChange, item } = this.props;
+
+    const { settings } = item;
+    return (
+      <MultiSelect<T>
+        isLoading={isLoading}
+        value={value}
+        defaultValue={value}
+        allowCustomValue={settings?.allowCustomValue}
+        onChange={(e) => {
+          onChange(e.map((v) => v.value).flatMap((v) => (v !== undefined ? [v] : [])));
+        }}
+        options={options}
+      />
+    );
+  }
+}

packages/grafana-ui/src/components/index.ts

@@ -129,6 +129,7 @@ export { StringArrayEditor } from './OptionsUI/strings';
 export { NumberValueEditor } from './OptionsUI/number';
 export { SliderValueEditor } from './OptionsUI/slider';
 export { SelectValueEditor } from './OptionsUI/select';
+export { MultiSelectValueEditor } from './OptionsUI/multiSelect';
 
 // Next-gen forms
 export { Form } from './Forms/Form';

packages/grafana-ui/src/utils/standardEditors.tsx

@@ -32,6 +32,7 @@ import {
   StringValueEditor,
   StringArrayEditor,
   SelectValueEditor,
+  MultiSelectValueEditor,
   TimeZonePicker,
 } from '../components';
 import { ValueMappingsValueEditor } from '../components/OptionsUI/mappings';
@@ -271,6 +272,13 @@ export const getStandardOptionEditors = () => {
     editor: SelectValueEditor as any,
   };
 
+  const multiSelect: StandardEditorsRegistryItem<any> = {
+    id: 'multi-select',
+    name: 'Multi select',
+    description: 'Allows for multiple option selection',
+    editor: MultiSelectValueEditor as any,
+  };
+
   const radio: StandardEditorsRegistryItem<any> = {
     id: 'radio',
     name: 'Radio',
@@ -354,5 +362,6 @@ export const getStandardOptionEditors = () => {
     timeZone,
     fieldColor,
     color,
+    multiSelect,
   ];
 };