Build plugin with grafana toolkit (#1539)

* Use grafana toolkit template for building plugin

* Fix linter and type errors

* Update styles building

* Fix sass deprecation warning

* Remove empty js files produced by webpack building sass

* Fix signing script

* Replace classnames with cx

* Fix data source config page

* Use custom webpack config instead of overriding original one

* Use gpx_ prefix for plugin executable

* Remove unused configs

* Roll back react hooks dependencies usage

* Move plugin-specific ts config to root config file

* Temporary do not use rst2html for function description tooltip

* Remove unused code

* remove unused dependencies

* update react table dependency

* Migrate tests to typescript

* remove unused dependencies

* Remove old webpack configs

* Add sign target to makefile

* Add magefile

* Update CI test job

* Update go packages

* Update build instructions

* Downgrade go version to 1.18

* Fix go version in ci

* Fix metric picker

* Add comment to webpack config

* remove angular mocks

* update bra config

* Rename datasource-zabbix to datasource (fix mage build)

* Add instructions for building backend with mage

* Fix webpack targets

* Fix ci backend tests

* Add initial e2e tests

* Fix e2e ci tests

* Update docker compose for cypress tests

* build grafana docker image

* Fix docker stop task

* CI: add Grafana compatibility check

src/components/ExploreButton/ExploreButton.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react';
 import { locationService } from '@grafana/runtime';
 import { ExploreUrlState, TimeRange, urlUtil } from '@grafana/data';
-import { MODE_ITEMID, MODE_METRICS } from '../../datasource-zabbix/constants';
+import { MODE_ITEMID, MODE_METRICS } from '../../datasource/constants';
 import { ActionButton } from '../ActionButton/ActionButton';
-import { expandItemName } from '../../datasource-zabbix/utils';
-import { ProblemDTO } from '../../datasource-zabbix/types';
+import { expandItemName } from '../../datasource/utils';
+import { ProblemDTO } from '../../datasource/types';
 
 interface Props {
   problem: ProblemDTO;

src/components/MetricPicker/MetricPicker.tsx

@@ -1,14 +1,14 @@
 import { css, cx } from '@emotion/css';
 import React, { FormEvent, useCallback, useEffect, useState, useRef } from 'react';
-import { ClickOutsideWrapper, Icon, Input, Spinner, useStyles2 } from '@grafana/ui';
+import { ClickOutsideWrapper, Input, Spinner, useStyles2 } from '@grafana/ui';
 import { MetricPickerMenu } from './MetricPickerMenu';
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { isRegex } from '../../datasource-zabbix/utils';
+import { isRegex } from '../../datasource/utils';
 
 export interface Props {
   value: string;
   isLoading?: boolean;
-  options: SelectableValue<string>[];
+  options: Array<SelectableValue<string>>;
   width?: number;
   onChange: (value: string) => void;
 }
@@ -18,7 +18,7 @@ export const MetricPicker = ({ value, options, isLoading, width, onChange }: Pro
   const [query, setQuery] = useState(value);
   const [filteredOptions, setFilteredOptions] = useState(options);
   const [selectedOptionIdx, setSelectedOptionIdx] = useState(-1);
-  const [offset, setOffset] = useState({ vertical: 0, horizontal: 0 });
+  const [offset] = useState({ vertical: 0, horizontal: 0 });
   const ref = useRef<HTMLDivElement>(null);
   const customStyles = useStyles2(getStyles);
 
@@ -50,7 +50,7 @@ export const MetricPicker = ({ value, options, isLoading, width, onChange }: Pro
     const newQuery = v?.currentTarget?.value;
     if (newQuery) {
       setQuery(newQuery);
-      if (value != newQuery) {
+      if (value !== newQuery) {
         const filtered = options.filter(
           (option) =>
             option.value?.toLowerCase().includes(newQuery.toLowerCase()) ||
@@ -74,10 +74,7 @@ export const MetricPicker = ({ value, options, isLoading, width, onChange }: Pro
   };
 
   const onBlurInternal = () => {
-    if (!isOpen) {
-      // Only call if menu isn't opened
-      onChange(query);
-    }
+    onChange(query);
   };
 
   const onKeyDown = (e: React.KeyboardEvent) => {

src/components/MetricPicker/MetricPickerMenu.tsx

@@ -5,7 +5,7 @@ import { CustomScrollbar, getSelectStyles, Icon, Tooltip, useStyles2, useTheme2
 import { MENU_MAX_HEIGHT } from './constants';
 
 interface Props {
-  options: SelectableValue<string>[];
+  options: Array<SelectableValue<string>>;
   onSelect: (option: SelectableValue<string>) => void;
   offset: { vertical: number; horizontal: number };
   minWidth?: number;