Variable editor: fix styles in Grafana 7

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>> = [

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);