Fix building after update to Grafana 8 components

src/components/ActionButton/ActionButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { stylesFactory, useTheme } from '@grafana/ui';
 import { GrafanaTheme, GrafanaThemeType } from '@grafana/data';
 import { FAIcon } from '../FAIcon/FAIcon';

src/components/ConfigProvider/ConfigProvider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { config, GrafanaBootConfig } from '@grafana/runtime';
-import { ThemeContext, getTheme } from '@grafana/ui';
-import { GrafanaThemeType } from '@grafana/data';
+import { ThemeContext } from '@grafana/ui';
+import { createTheme } from '@grafana/data';
 
 export const ConfigContext = React.createContext<GrafanaBootConfig>(config);
 export const ConfigConsumer = ConfigContext.Consumer;
@@ -14,10 +14,11 @@ export const provideConfig = (component: React.ComponentType<any>) => {
   return ConfigProvider;
 };
 
-export const getCurrentThemeName = () =>
-  config.bootData.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark;
-
-export const getCurrentTheme = () => getTheme(getCurrentThemeName());
+export const getCurrentTheme = () => createTheme({
+  colors: {
+    mode: config.bootData.user.lightTheme ? 'light' : 'dark',
+  },
+});
 
 export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
   return (

src/components/FAIcon/FAIcon.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 interface Props {
   icon: string;

src/components/GFHeartIcon/GFHeartIcon.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 interface Props {
   status: 'critical' | 'warning' | 'online' | 'ok' | 'problem';

src/components/Tooltip/Popper.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
 import Transition from 'react-transition-group/Transition';
 import { stylesFactory } from '@grafana/ui';

src/datasource-zabbix/components/ZabbixInput.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { EventsWithValidation, ValidationEvents, useTheme } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { isRegex, variableRegex } from '../utils';

src/datasource-zabbix/utils.ts

@@ -457,10 +457,12 @@ export function getValueMapping(item, valueMappings: any[]): ValueMapping[] | nu
 
   return (mapping.mappings as any[]).map((m, i) => {
     const valueMapping: ValueMapping = {
-      id: i,
+      // id: i,
       type: MappingType.ValueToText,
-      value: m.value,
-      text: m.newvalue,
+      options: {
+        value: m.value,
+        text: m.newvalue,
+      }
     };
     return valueMapping;
   });

src/panel-triggers/components/AckModal.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { ZBX_ACK_ACTION_ADD_MESSAGE, ZBX_ACK_ACTION_ACK, ZBX_ACK_ACTION_CHANGE_SEVERITY, ZBX_ACK_ACTION_CLOSE } from '../../datasource-zabbix/constants';
 import { Button, VerticalGroup, Spinner, Modal, Input, Checkbox, RadioButtonGroup, stylesFactory, withTheme, Themeable, TextArea } from '@grafana/ui';
 import { FAIcon } from '../../components';

src/panel-triggers/components/AlertList/AlertIcon.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { GFHeartIcon } from '../../../components';
 import { ProblemDTO } from '../../../datasource-zabbix/types';
 

src/panel-triggers/components/ExecScriptModal.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
 import { Button, Spinner, Modal, Select, stylesFactory, withTheme, Themeable } from '@grafana/ui';
 import { ZBXScript, APIExecuteScriptResponse } from '../../datasource-zabbix/zabbix/connectors/zabbix_api/types';

src/panel-triggers/components/Problems/AckCell.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { RTCell } from '../../types';
 import { ProblemDTO } from '../../../datasource-zabbix/types';
 import { FAIcon } from '../../../components';