legacy form migration

src/datasource/components/QueryEditor.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
-import { InlineField, InlineFieldRow, Select } from '@grafana/ui';
+import { InlineField, Select } from '@grafana/ui';
 import * as c from '../constants';
 import { migrate, DS_QUERY_SCHEMA } from '../migrations';
 import { ZabbixDatasource } from '../datasource';
@@ -14,6 +14,7 @@ import { ItemIdQueryEditor } from './QueryEditor/ItemIdQueryEditor';
 import { ServicesQueryEditor } from './QueryEditor/ServicesQueryEditor';
 import { TriggersQueryEditor } from './QueryEditor/TriggersQueryEditor';
 import { UserMacrosQueryEditor } from './QueryEditor/UserMacrosQueryEditor';
+import { QueryEditorRow } from './QueryEditor/QueryEditorRow';
 
 const zabbixQueryTypeOptions: Array<SelectableValue<string>> = [
   {
@@ -197,7 +198,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: ZabbixQ
 
   return (
     <>
-      <InlineFieldRow>
+      <QueryEditorRow>
         <InlineField label="Query type" labelWidth={12}>
           <Select
             isSearchable={false}
@@ -207,10 +208,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: ZabbixQ
             onChange={onPropChange('queryType')}
           />
         </InlineField>
-        <div className="gf-form gf-form--grow">
-          <div className="gf-form-label gf-form-label--grow" />
-        </div>
-      </InlineFieldRow>
+      </QueryEditorRow>
       {queryType === c.MODE_METRICS && renderMetricsEditor()}
       {queryType === c.MODE_ITEMID && renderItemIdsEditor()}
       {queryType === c.MODE_TEXT && renderTextMetricsEditor()}

src/datasource/components/QueryEditor/QueryEditorRow.tsx

@@ -1,13 +1,24 @@
 import React from 'react';
-import { InlineFieldRow } from '@grafana/ui';
+import { InlineFieldRow, InlineFormLabel } from '@grafana/ui';
+import { css } from '@emotion/css';
 
 export const QueryEditorRow = ({ children }: React.PropsWithChildren<{}>) => {
+  const styles = getStyles();
+
   return (
     <InlineFieldRow>
       {children}
-      <div className="gf-form gf-form--grow">
-        <div className="gf-form-label gf-form-label--grow" />
-      </div>
+      <InlineFormLabel className={styles.rowTerminator}>
+        <></>
+      </InlineFormLabel>
     </InlineFieldRow>
   );
 };
+
+const getStyles = () => {
+  return {
+    rowTerminator: css({
+      flexGrow: 1,
+    }),
+  };
+};

src/datasource/components/VariableQueryEditor.tsx

@@ -3,7 +3,7 @@ import { parseLegacyVariableQuery } from '../utils';
 import { SelectableValue } from '@grafana/data';
 import { VariableQuery, VariableQueryData, VariableQueryProps, VariableQueryTypes } from '../types';
 import { ZabbixInput } from './ZabbixInput';
-import { InlineFormLabel, Input, Select } from '@grafana/ui';
+import { InlineField, InlineFieldRow, InlineFormLabel, Input, Select } from '@grafana/ui';
 
 export class ZabbixVariableQueryEditor extends PureComponent<VariableQueryProps, VariableQueryData> {
   queryTypes: Array<SelectableValue<VariableQueryTypes>> = [
@@ -94,81 +94,95 @@ export class ZabbixVariableQueryEditor extends PureComponent<VariableQueryProps,
 
     return (
       <>
-        <div className="gf-form max-width-21">
-          <InlineFormLabel width={10}>Query Type</InlineFormLabel>
-          <Select
-            width={11}
-            value={selectedQueryType}
-            options={this.queryTypes}
-            onChange={this.handleQueryTypeChange}
-          />
-        </div>
-        <div className="gf-form-inline">
-          <div className="gf-form max-width-30">
-            <InlineFormLabel width={10}>Group</InlineFormLabel>
+        <InlineFieldRow>
+          <InlineField label="Query Type" labelWidth={16}>
+            <Select
+              width={30}
+              value={selectedQueryType}
+              options={this.queryTypes}
+              onChange={this.handleQueryTypeChange}
+            />
+          </InlineField>
+        </InlineFieldRow>
+
+        <InlineFieldRow>
+          <InlineField label="Group" labelWidth={16}>
             <ZabbixInput
+              width={30}
               value={group}
               onChange={(evt) => this.handleQueryUpdate(evt, 'group')}
               onBlur={this.handleQueryChange}
             />
-          </div>
-          {selectedQueryType.value !== VariableQueryTypes.Group && (
-            <div className="gf-form max-width-30">
-              <InlineFormLabel width={10}>Host</InlineFormLabel>
+          </InlineField>
+        </InlineFieldRow>
+
+        {selectedQueryType.value !== VariableQueryTypes.Group && (
+          <InlineFieldRow>
+            <InlineField label="Host" labelWidth={16}>
               <ZabbixInput
+                width={30}
                 value={host}
                 onChange={(evt) => this.handleQueryUpdate(evt, 'host')}
                 onBlur={this.handleQueryChange}
               />
-            </div>
-          )}
-        </div>
+            </InlineField>
+          </InlineFieldRow>
+        )}
+
         {(selectedQueryType.value === VariableQueryTypes.Application ||
           selectedQueryType.value === VariableQueryTypes.ItemTag ||
           selectedQueryType.value === VariableQueryTypes.Item ||
           selectedQueryType.value === VariableQueryTypes.ItemValues) && (
-          <div className="gf-form-inline">
+          <>
             {supportsItemTags && (
-              <div className="gf-form max-width-30">
-                <InlineFormLabel width={10}>Item tag</InlineFormLabel>
-                <ZabbixInput
-                  value={itemTag}
-                  onChange={(evt) => this.handleQueryUpdate(evt, 'itemTag')}
-                  onBlur={this.handleQueryChange}
-                />
-              </div>
+              <InlineFieldRow>
+                <InlineField label="Item Tag" labelWidth={16}>
+                  <ZabbixInput
+                    width={30}
+                    value={itemTag}
+                    onChange={(evt) => this.handleQueryUpdate(evt, 'itemTag')}
+                    onBlur={this.handleQueryChange}
+                  />
+                </InlineField>
+              </InlineFieldRow>
             )}
+
             {!supportsItemTags && (
-              <div className="gf-form max-width-30">
-                <InlineFormLabel width={10}>Application</InlineFormLabel>
-                <ZabbixInput
-                  value={application}
-                  onChange={(evt) => this.handleQueryUpdate(evt, 'application')}
-                  onBlur={this.handleQueryChange}
-                />
-              </div>
+              <InlineFieldRow>
+                <InlineField label="Application" labelWidth={16}>
+                  <ZabbixInput
+                    width={30}
+                    value={application}
+                    onChange={(evt) => this.handleQueryUpdate(evt, 'application')}
+                    onBlur={this.handleQueryChange}
+                  />
+                </InlineField>
+              </InlineFieldRow>
             )}
+
             {(selectedQueryType.value === VariableQueryTypes.Item ||
               selectedQueryType.value === VariableQueryTypes.ItemValues) && (
-              <div className="gf-form max-width-30">
-                <InlineFormLabel width={10}>Item</InlineFormLabel>
-                <ZabbixInput
-                  value={item}
-                  onChange={(evt) => this.handleQueryUpdate(evt, 'item')}
-                  onBlur={this.handleQueryChange}
-                />
-              </div>
+              <InlineFieldRow>
+                <InlineField label="Item" labelWidth={16}>
+                  <ZabbixInput
+                    width={30}
+                    value={item}
+                    onChange={(evt) => this.handleQueryUpdate(evt, 'item')}
+                    onBlur={this.handleQueryChange}
+                  />
+                </InlineField>
+              </InlineFieldRow>
             )}
-          </div>
+          </>
         )}
 
         {legacyQuery && (
-          <div className="gf-form">
+          <>
             <InlineFormLabel width={10} tooltip="Original query string, read-only">
               Legacy Query
             </InlineFormLabel>
             <Input value={legacyQuery} readOnly={true} />
-          </div>
+          </>
         )}
       </>
     );

src/datasource/components/ZabbixInput.tsx

@@ -5,7 +5,7 @@ import { GrafanaTheme2 } 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 Input = (grafanaUi as any).Input || (grafanaUi as any).LegacyForms?.Input;
 
 const variablePattern = RegExp(`^${variableRegex.source}`);