Merge pull request #1743 from grafana/gareth/legacy-forms

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

src/panel-triggers/components/AckModal.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { cx, css } from '@emotion/css';
+import { css } from '@emotion/css';
 import {
   ZBX_ACK_ACTION_ADD_MESSAGE,
   ZBX_ACK_ACTION_ACK,
@@ -17,6 +17,7 @@ import {
   withTheme,
   Themeable,
   TextArea,
+  ButtonGroup,
 } from '@grafana/ui';
 import { FAIcon } from '../../components';
 import { GrafanaTheme } from '@grafana/data';
@@ -200,63 +201,49 @@ export class AckModalUnthemed extends PureComponent<Props, State> {
 
   render() {
     const { theme } = this.props;
-
     const styles = getStyles(theme);
-    const modalClass = cx(styles.modal);
-    const modalTitleClass = cx(styles.modalHeaderTitle);
-    const inputGroupClass = cx('gf-form', styles.inputGroup);
-    const inputClass = cx(this.state.error && styles.input);
-    const inputHintClass = cx('gf-form-hint-text', styles.inputHint);
-    const inputErrorClass = cx('gf-form-hint-text', styles.inputError);
 
     return (
       <Modal
         isOpen={true}
         onDismiss={this.dismiss}
-        className={modalClass}
+        className={styles.modal}
         title={
-          <div className={modalTitleClass}>
+          <div className={styles.modalHeaderTitle}>
             {this.state.loading ? <Spinner size={18} /> : <FAIcon icon="reply-all" />}
-            <span className="p-l-1">Acknowledge Problem</span>
+            Acknowledge Problem
           </div>
         }
       >
-        <div className={inputGroupClass}>
-          <label className="gf-form-hint">
-            <TextArea
-              className={inputClass}
-              type="text"
-              name="message"
-              placeholder="Message"
-              autoComplete="off"
-              autoFocus={true}
-              value={this.state.value}
-              onChange={this.handleChange}
-              onKeyDown={this.handleKeyPress}
-            ></TextArea>
-            <small className={inputHintClass}>Press Enter to submit</small>
-            {this.state.error && <small className={inputErrorClass}>{this.state.errorMessage}</small>}
-          </label>
+        <div className={styles.inputGroup}>
+          <TextArea
+            className={this.state.error && styles.input}
+            type="text"
+            name="message"
+            placeholder="Message"
+            autoComplete="off"
+            autoFocus={true}
+            value={this.state.value}
+            onChange={this.handleChange}
+            onKeyDown={this.handleKeyPress}
+          />
+          <small className={styles.inputHint}>Press Enter to submit</small>
+          {this.state.error && <small className={styles.inputError}>{this.state.errorMessage}</small>}
         </div>
 
-        <div className="gf-form">
-          <VerticalGroup>{this.renderActions()}</VerticalGroup>
-        </div>
+        <VerticalGroup>{this.renderActions()}</VerticalGroup>
 
-        {this.state.ackError && (
-          <div className="gf-form ack-request-error">
-            <span className={styles.ackError}>{this.state.ackError}</span>
-          </div>
-        )}
+        {this.state.ackError && <span className={styles.ackError}>{this.state.ackError}</span>}
 
-        <div className="gf-form-button-row text-center">
+        <ButtonGroup className={styles.buttonGroup}>
           <Button variant="primary" onClick={this.submit}>
             Update
           </Button>
+
           <Button variant="secondary" onClick={this.dismiss}>
             Cancel
           </Button>
-        </div>
+        </ButtonGroup>
       </Modal>
     );
   }
@@ -297,6 +284,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     ackError: css`
       color: ${red};
     `,
+    buttonGroup: css`
+      justify-content: center;
+      gap: ${theme.spacing.sm};
+      margin-top: ${theme.spacing.md};
+    `,
   };
 });