FieldDisplay: Don't use group ui elements in field editors (#16953)

* FieldDisplay editor - minor refactor not to use panel group ui elements
* FieldPropertiesEditor - minor refactor not to use panel group ui elements

packages/grafana-ui/src/components/SingleStatShared/FieldDisplayEditor.tsx

@@ -2,7 +2,6 @@
 import React, { PureComponent, ChangeEvent } from 'react';
 
 // Components
-import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 import { FormLabel } from '../FormLabel/FormLabel';
 import { FormField } from '../FormField/FormField';
 import { StatsPicker } from '../StatsPicker/StatsPicker';
@@ -28,75 +27,71 @@ const showOptions: Array<SelectOptionItem<boolean>> = [
 ];
 
 export interface Props {
-  options: FieldDisplayOptions;
-  onChange: (valueOptions: FieldDisplayOptions) => void;
   labelWidth?: number;
-  children?: JSX.Element[];
+  value: FieldDisplayOptions;
+  onChange: (value: FieldDisplayOptions, event?: React.SyntheticEvent<HTMLElement>) => void;
 }
 
 export class FieldDisplayEditor extends PureComponent<Props> {
   onShowValuesChange = (item: SelectOptionItem<boolean>) => {
     const val = item.value === true;
-    this.props.onChange({ ...this.props.options, values: val });
+    this.props.onChange({ ...this.props.value, values: val });
   };
 
   onCalcsChange = (calcs: string[]) => {
-    this.props.onChange({ ...this.props.options, calcs });
+    this.props.onChange({ ...this.props.value, calcs });
   };
 
   onDefaultsChange = (value: Partial<Field>) => {
-    this.props.onChange({ ...this.props.options, defaults: value });
+    this.props.onChange({ ...this.props.value, defaults: value });
   };
 
   onLimitChange = (event: ChangeEvent<HTMLInputElement>) => {
     this.props.onChange({
-      ...this.props.options,
+      ...this.props.value,
       limit: toIntegerOrUndefined(event.target.value),
     });
   };
 
   render() {
-    const { options, children } = this.props;
-    const { calcs, values, limit } = options;
+    const { value } = this.props;
+    const { calcs, values, limit } = value;
 
     const labelWidth = this.props.labelWidth || 5;
 
     return (
-      <PanelOptionsGroup title="Display">
-        <>
+      <>
+        <div className="gf-form">
+          <FormLabel width={labelWidth}>Show</FormLabel>
+          <Select
+            options={showOptions}
+            value={values ? showOptions[0] : showOptions[1]}
+            onChange={this.onShowValuesChange}
+          />
+        </div>
+        {values ? (
+          <FormField
+            label="Limit"
+            labelWidth={labelWidth}
+            placeholder={`${DEFAULT_FIELD_DISPLAY_VALUES_LIMIT}`}
+            onChange={this.onLimitChange}
+            value={toNumberString(limit)}
+            type="number"
+          />
+        ) : (
           <div className="gf-form">
-            <FormLabel width={labelWidth}>Show</FormLabel>
-            <Select
-              options={showOptions}
-              value={values ? showOptions[0] : showOptions[1]}
-              onChange={this.onShowValuesChange}
+            <FormLabel width={labelWidth}>Calc</FormLabel>
+            <StatsPicker
+              width={12}
+              placeholder="Choose Stat"
+              defaultStat={ReducerID.mean}
+              allowMultiple={false}
+              stats={calcs}
+              onChange={this.onCalcsChange}
             />
           </div>
-          {values ? (
-            <FormField
-              label="Limit"
-              labelWidth={labelWidth}
-              placeholder={`${DEFAULT_FIELD_DISPLAY_VALUES_LIMIT}`}
-              onChange={this.onLimitChange}
-              value={toNumberString(limit)}
-              type="number"
-            />
-          ) : (
-            <div className="gf-form">
-              <FormLabel width={labelWidth}>Calc</FormLabel>
-              <StatsPicker
-                width={12}
-                placeholder="Choose Stat"
-                defaultStat={ReducerID.mean}
-                allowMultiple={false}
-                stats={calcs}
-                onChange={this.onCalcsChange}
-              />
-            </div>
-          )}
-          {children}
-        </>
-      </PanelOptionsGroup>
+        )}
+      </>
     );
   }
 }

packages/grafana-ui/src/components/SingleStatShared/FieldPropertiesEditor.tsx

@@ -2,7 +2,6 @@
 import React, { PureComponent, ChangeEvent } from 'react';
 
 // Components
-import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 import { FormField } from '../FormField/FormField';
 import { FormLabel } from '../FormLabel/FormLabel';
 import { UnitPicker } from '../UnitPicker/UnitPicker';
@@ -17,43 +16,42 @@ import { VAR_SERIES_NAME, VAR_FIELD_NAME, VAR_CALC, VAR_CELL_PREFIX } from '../.
 const labelWidth = 6;
 
 export interface Props {
-  title: string;
-  options: Partial<Field>;
-  onChange: (fieldProperties: Partial<Field>) => void;
   showMinMax: boolean;
+  value: Partial<Field>;
+  onChange: (value: Partial<Field>, event?: React.SyntheticEvent<HTMLElement>) => void;
 }
 
 export class FieldPropertiesEditor extends PureComponent<Props> {
   onTitleChange = (event: ChangeEvent<HTMLInputElement>) =>
-    this.props.onChange({ ...this.props.options, title: event.target.value });
+    this.props.onChange({ ...this.props.value, title: event.target.value });
 
   // @ts-ignore
   onUnitChange = (unit: SelectOptionItem<string>) => this.props.onChange({ ...this.props.value, unit: unit.value });
 
   onDecimalChange = (event: ChangeEvent<HTMLInputElement>) => {
     this.props.onChange({
-      ...this.props.options,
+      ...this.props.value,
       decimals: toIntegerOrUndefined(event.target.value),
     });
   };
 
   onMinChange = (event: ChangeEvent<HTMLInputElement>) => {
     this.props.onChange({
-      ...this.props.options,
+      ...this.props.value,
       min: toIntegerOrUndefined(event.target.value),
     });
   };
 
   onMaxChange = (event: ChangeEvent<HTMLInputElement>) => {
     this.props.onChange({
-      ...this.props.options,
+      ...this.props.value,
       max: toIntegerOrUndefined(event.target.value),
     });
   };
 
   render() {
-    const { showMinMax, title } = this.props;
-    const { unit, decimals, min, max } = this.props.options;
+    const { showMinMax } = this.props;
+    const { unit, decimals, min, max } = this.props.value;
 
     const titleTooltip = (
       <div>
@@ -68,49 +66,47 @@ export class FieldPropertiesEditor extends PureComponent<Props> {
     );
 
     return (
-      <PanelOptionsGroup title={title}>
-        <>
-          <FormField
-            label="Title"
-            labelWidth={labelWidth}
-            onChange={this.onTitleChange}
-            value={this.props.options.title}
-            tooltip={titleTooltip}
-            placeholder="Auto"
-          />
+      <>
+        <FormField
+          label="Title"
+          labelWidth={labelWidth}
+          onChange={this.onTitleChange}
+          value={this.props.value.title}
+          tooltip={titleTooltip}
+          placeholder="Auto"
+        />
 
-          <div className="gf-form">
-            <FormLabel width={labelWidth}>Unit</FormLabel>
-            <UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
-          </div>
-          {showMinMax && (
-            <>
-              <FormField
-                label="Min"
-                labelWidth={labelWidth}
-                onChange={this.onMinChange}
-                value={toNumberString(min)}
-                type="number"
-              />
-              <FormField
-                label="Max"
-                labelWidth={labelWidth}
-                onChange={this.onMaxChange}
-                value={toNumberString(max)}
-                type="number"
-              />
-            </>
-          )}
-          <FormField
-            label="Decimals"
-            labelWidth={labelWidth}
-            placeholder="auto"
-            onChange={this.onDecimalChange}
-            value={toNumberString(decimals)}
-            type="number"
-          />
-        </>
-      </PanelOptionsGroup>
+        <div className="gf-form">
+          <FormLabel width={labelWidth}>Unit</FormLabel>
+          <UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
+        </div>
+        {showMinMax && (
+          <>
+            <FormField
+              label="Min"
+              labelWidth={labelWidth}
+              onChange={this.onMinChange}
+              value={toNumberString(min)}
+              type="number"
+            />
+            <FormField
+              label="Max"
+              labelWidth={labelWidth}
+              onChange={this.onMaxChange}
+              value={toNumberString(max)}
+              type="number"
+            />
+          </>
+        )}
+        <FormField
+          label="Decimals"
+          labelWidth={labelWidth}
+          placeholder="auto"
+          onChange={this.onDecimalChange}
+          value={toNumberString(decimals)}
+          type="number"
+        />
+      </>
     );
   }
 }

public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx

@@ -10,6 +10,7 @@ import {
   FieldDisplayOptions,
   Field,
   FieldPropertiesEditor,
+  PanelOptionsGroup,
 } from '@grafana/ui';
 
 // Types
@@ -54,7 +55,8 @@ export class BarGaugePanelEditor extends PureComponent<PanelEditorProps<BarGauge
     return (
       <>
         <PanelOptionsGrid>
-          <FieldDisplayEditor onChange={this.onDisplayOptionsChanged} options={fieldOptions} labelWidth={labelWidth}>
+          <PanelOptionsGroup title="Display">
+            <FieldDisplayEditor onChange={this.onDisplayOptionsChanged} value={fieldOptions} labelWidth={labelWidth} />
             <div className="form-field">
               <FormLabel width={labelWidth}>Orientation</FormLabel>
               <Select
@@ -75,14 +77,10 @@ export class BarGaugePanelEditor extends PureComponent<PanelEditorProps<BarGauge
                 value={displayModes.find(item => item.value === options.displayMode)}
               />
             </div>
-          </FieldDisplayEditor>
-
-          <FieldPropertiesEditor
-            title="Field"
-            showMinMax={true}
-            onChange={this.onDefaultsChange}
-            options={fieldOptions.defaults}
-          />
+          </PanelOptionsGroup>
+          <PanelOptionsGroup title="Field">
+            <FieldPropertiesEditor showMinMax={true} onChange={this.onDefaultsChange} value={fieldOptions.defaults} />
+          </PanelOptionsGroup>
 
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={fieldOptions.thresholds} />
         </PanelOptionsGrid>

public/app/plugins/panel/gauge/GaugePanelEditor.tsx

@@ -12,6 +12,7 @@ import {
   Field,
   FieldPropertiesEditor,
   Switch,
+  PanelOptionsGroup,
 } from '@grafana/ui';
 
 import { GaugeOptions } from './types';
@@ -60,11 +61,12 @@ export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOption
     return (
       <>
         <PanelOptionsGrid>
-          <FieldDisplayEditor
-            onChange={this.onDisplayOptionsChanged}
-            options={fieldOptions}
-            labelWidth={this.labelWidth}
-          >
+          <PanelOptionsGroup title="Display">
+            <FieldDisplayEditor
+              onChange={this.onDisplayOptionsChanged}
+              value={fieldOptions}
+              labelWidth={this.labelWidth}
+            />
             <Switch
               label="Labels"
               labelClass={`width-${this.labelWidth}`}
@@ -77,14 +79,11 @@ export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOption
               checked={showThresholdMarkers}
               onChange={this.onToggleThresholdMarkers}
             />
-          </FieldDisplayEditor>
+          </PanelOptionsGroup>
 
-          <FieldPropertiesEditor
-            title="Field"
-            showMinMax={true}
-            onChange={this.onDefaultsChange}
-            options={fieldOptions.defaults}
-          />
+          <PanelOptionsGroup title="Field">
+            <FieldPropertiesEditor showMinMax={true} onChange={this.onDefaultsChange} value={fieldOptions.defaults} />
+          </PanelOptionsGroup>
 
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={fieldOptions.thresholds} />
         </PanelOptionsGrid>

public/app/plugins/panel/piechart/PieChartPanelEditor.tsx

@@ -8,6 +8,7 @@ import {
   FieldDisplayOptions,
   FieldPropertiesEditor,
   Field,
+  PanelOptionsGroup,
 } from '@grafana/ui';
 
 import { PieChartOptionsBox } from './PieChartOptionsBox';
@@ -40,14 +41,13 @@ export class PieChartPanelEditor extends PureComponent<PanelEditorProps<PieChart
     return (
       <>
         <PanelOptionsGrid>
-          <FieldDisplayEditor onChange={this.onDisplayOptionsChanged} options={fieldOptions} />
+          <PanelOptionsGroup title="Display">
+            <FieldDisplayEditor onChange={this.onDisplayOptionsChanged} value={fieldOptions} />
+          </PanelOptionsGroup>
 
-          <FieldPropertiesEditor
-            title="Field (default)"
-            showMinMax={true}
-            onChange={this.onDefaultsChange}
-            options={fieldOptions.defaults}
-          />
+          <PanelOptionsGroup title="Field (default)">
+            <FieldPropertiesEditor showMinMax={true} onChange={this.onDefaultsChange} value={fieldOptions.defaults} />
+          </PanelOptionsGroup>
 
           <PieChartOptionsBox onOptionsChange={onOptionsChange} options={options} />
         </PanelOptionsGrid>

public/app/plugins/panel/singlestat2/SingleStatEditor.tsx

@@ -11,6 +11,7 @@ import {
   FieldDisplayEditor,
   FieldPropertiesEditor,
   Field,
+  PanelOptionsGroup,
 } from '@grafana/ui';
 
 import { SingleStatOptions, SparklineOptions } from './types';
@@ -57,14 +58,13 @@ export class SingleStatEditor extends PureComponent<PanelEditorProps<SingleStatO
     return (
       <>
         <PanelOptionsGrid>
-          <FieldDisplayEditor onChange={this.onDisplayOptionsChanged} options={fieldOptions} />
+          <PanelOptionsGroup title="Display">
+            <FieldDisplayEditor onChange={this.onDisplayOptionsChanged} value={fieldOptions} />
+          </PanelOptionsGroup>
 
-          <FieldPropertiesEditor
-            title="Field (default)"
-            showMinMax={true}
-            onChange={this.onDefaultsChange}
-            options={fieldOptions.defaults}
-          />
+          <PanelOptionsGroup title="Field (default)">
+            <FieldPropertiesEditor showMinMax={true} onChange={this.onDefaultsChange} value={fieldOptions.defaults} />
+          </PanelOptionsGroup>
 
           <FontSizeEditor options={options} onChange={this.props.onOptionsChange} />
           <ColoringEditor options={options} onChange={this.props.onOptionsChange} />