From 41e4f812bc8f0af6197634767d5bf8bc678db37d Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Wed, 20 May 2020 18:38:20 +0300
Subject: [PATCH] Variable editor: fix styles in Grafana 7

---
 .../components/VariableQueryEditor.tsx        |  3 ++-
 .../components/ZabbixInput.tsx                | 24 +++++++++----------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/datasource-zabbix/components/VariableQueryEditor.tsx b/src/datasource-zabbix/components/VariableQueryEditor.tsx
index 51830ee..d70d551 100644
--- a/src/datasource-zabbix/components/VariableQueryEditor.tsx
+++ b/src/datasource-zabbix/components/VariableQueryEditor.tsx
@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import { parseLegacyVariableQuery } from '../utils';
-import { Select, Input } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
 import { VariableQuery, VariableQueryTypes, VariableQueryProps, VariableQueryData } from '../types';
 import { ZabbixInput } from './ZabbixInput';
@@ -8,6 +7,8 @@ import { ZabbixInput } from './ZabbixInput';
 // FormLabel was renamed to InlineFormLabel in Grafana 7.0
 import * as grafanaUi from '@grafana/ui';
 const FormLabel = grafanaUi.FormLabel || (grafanaUi as any).InlineFormLabel;
+const Select = (grafanaUi as any).LegacyForms?.Select || (grafanaUi as any).Select;
+const Input = (grafanaUi as any).LegacyForms?.Input || (grafanaUi as any).Input;
 
 export class ZabbixVariableQueryEditor extends PureComponent<VariableQueryProps, VariableQueryData> {
   queryTypes: Array<SelectableValue<VariableQueryTypes>> = [
diff --git a/src/datasource-zabbix/components/ZabbixInput.tsx b/src/datasource-zabbix/components/ZabbixInput.tsx
index ab9ec72..f9e5bce 100644
--- a/src/datasource-zabbix/components/ZabbixInput.tsx
+++ b/src/datasource-zabbix/components/ZabbixInput.tsx
@@ -1,17 +1,20 @@
 import React, { FC } from 'react';
 import { css, cx } from 'emotion';
-import { Themeable, withTheme, Input, EventsWithValidation, ValidationEvents } from '@grafana/ui';
-import { isRegex, variableRegex } from '../utils';
+import { EventsWithValidation, ValidationEvents, useTheme } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
+import { isRegex, variableRegex } from '../utils';
+
+import * as grafanaUi from '@grafana/ui';
+const Input = (grafanaUi as any).LegacyForms?.Input || (grafanaUi as any).Input;
 
 const variablePattern = RegExp(`^${variableRegex.source}`);
 
 const getStyles = (theme: GrafanaTheme) => ({
   inputRegex: css`
-    color: ${theme.colors.orange}
+    color: ${theme.colors.orange || (theme as any).palette.orange}
   `,
   inputVariable: css`
-    color: ${theme.colors.variable}
+    color: ${theme.colors.variable || (theme as any).palette.variable}
   `,
 });
 
@@ -43,17 +46,14 @@ const zabbixInputValidationEvents: ValidationEvents = {
   ],
 };
 
-interface Props extends React.ComponentProps<typeof Input>, Themeable {
-}
-
-const UnthemedZabbixInput: FC<Props> = ({ theme, value, ref, validationEvents, ...restProps }) => {
+export const ZabbixInput: FC<any> = ({ value, ref, validationEvents, ...restProps }) => {
+  const theme = useTheme();
   const styles = getStyles(theme);
 
-  let inputClass;
+  let inputClass = styles.inputRegex;
   if (variablePattern.test(value as string)) {
     inputClass = styles.inputVariable;
-  }
-  if (isRegex(value)) {
+  } else if (isRegex(value)) {
     inputClass = styles.inputRegex;
   }
 
@@ -66,5 +66,3 @@ const UnthemedZabbixInput: FC<Props> = ({ theme, value, ref, validationEvents, .
     />
   );
 };
-
-export const ZabbixInput = withTheme(UnthemedZabbixInput);