Migrate query editor to react (#1520)

* Initial react query editor

* CI: run checks on all branches

* Update react packages

* Initial metric picker

* Load metrics

* Tweak styles

* Add variables to metric options

* Tweak styles

* Filtering and keyboard navigation

* Open menu with keyboard

* Update function editor

* Move functions in editor

* Add function component

* Edit func params

* Push alias functions to the end

* Tweak labels size

* Fix menu position

* Metric options editor

* Fix css styles building

* More work on query options

* Fix tests

* Refactor: extract metrics query editor and functions editor

* Refactor: move things around

* Text metrics editor

* Problems query editor

* Problems mode options

* Item id query editor

* IT services query editor

* Triggers query editor

* Refactor: remove unused

* remove derprecated theme usage

* Load proxy options

* Fetch metric options on variable change

* Remove angular query editor

* Migrate annotations editor to react

* Fix tests

src/datasource-zabbix/components/FunctionEditor/helpers.ts

@@ -0,0 +1,58 @@
+import { SelectableValue } from '@grafana/data';
+import { MetricFunc } from '../../types';
+
+export type ParamDef = {
+  name: string;
+  type: string;
+  options?: Array<string | number>;
+  multiple?: boolean;
+  optional?: boolean;
+  version?: string;
+};
+
+export type EditableParam = {
+  name: string;
+  value: string;
+  optional: boolean;
+  multiple: boolean;
+  options: Array<SelectableValue<string>>;
+};
+
+function createEditableParam(paramDef: ParamDef, additional: boolean, value?: string | number): EditableParam {
+  return {
+    name: paramDef.name,
+    value: value?.toString() || '',
+    optional: !!paramDef.optional || additional, // only first param is required when multiple are allowed
+    multiple: !!paramDef.multiple,
+    options:
+      paramDef.options?.map((option: string | number) => ({
+        value: option.toString(),
+        label: option.toString(),
+      })) ?? [],
+  };
+}
+
+/**
+ * Create a list of params that can be edited in the function editor.
+ */
+export function mapFuncInstanceToParams(func: MetricFunc): EditableParam[] {
+  // list of required parameters (from func.def)
+  const params: EditableParam[] = func.def.params.map((paramDef: ParamDef, index: number) =>
+    createEditableParam(paramDef, false, func.params[index])
+  );
+
+  // list of additional (multiple or optional) params entered by the user
+  while (params.length < func.params.length) {
+    const paramDef = func.def.params[func.def.params.length - 1];
+    const value = func.params[params.length];
+    params.push(createEditableParam(paramDef, true, value));
+  }
+
+  // extra "fake" param to allow adding more multiple values at the end
+  if (params.length && params[params.length - 1].value && params[params.length - 1]?.multiple) {
+    const paramDef = func.def.params[func.def.params.length - 1];
+    params.push(createEditableParam(paramDef, true, ''));
+  }
+
+  return params;
+}