Chore: Convert QueryGroupOptions to functional component (#94342)

Also rewrites styles

.betterer.results

@@ -4770,8 +4770,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "35"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "36"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "37"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "38"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "38"]
-      [0, 0, 0, "Styles should be written using objects.", "39"]
     ],
     "public/app/features/query/state/DashboardQueryRunner/AnnotationsQueryRunner.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
@@ -7310,24 +7309,6 @@ exports[`no gf-form usage`] = {
     "public/app/features/query/components/QueryEditorRow.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
-    "public/app/features/query/components/QueryGroupOptions.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
     "public/app/features/variables/adhoc/picker/AdHocFilter.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],

public/app/features/query/components/QueryGroupOptions.tsx

@@ -1,11 +1,9 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
-import { PureComponent, ChangeEvent, FocusEvent } from 'react';
+import React, { useState, ChangeEvent, FocusEvent, useCallback } from 'react';
-import * as React from 'react';
 
-import { rangeUtil, PanelData, DataSourceApi } from '@grafana/data';
+import { rangeUtil, PanelData, DataSourceApi, GrafanaTheme2 } from '@grafana/data';
-import { Input, InlineFormLabel, stylesFactory, InlineFieldRow, InlineSwitch } from '@grafana/ui';
+import { Input, InlineSwitch, useStyles2, InlineLabel } from '@grafana/ui';
 import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow';
-import { config } from 'app/core/config';
 import { QueryGroupOptions } from 'app/types';
 
 interface Props {
@@ -15,46 +13,26 @@ interface Props {
   onChange: (options: QueryGroupOptions) => void;
 }
 
-interface State {
+export const QueryGroupOptionsEditor = React.memo(({ options, dataSource, data, onChange }: Props) => {
-  timeRangeFrom: string;
+  const [timeRangeFrom, setTimeRangeFrom] = useState(options.timeRange?.from || '');
-  timeRangeShift: string;
+  const [timeRangeShift, setTimeRangeShift] = useState(options.timeRange?.shift || '');
-  timeRangeHide: boolean;
+  const [timeRangeHide, setTimeRangeHide] = useState(options.timeRange?.hide ?? false);
-  isOpen: boolean;
+  const [isOpen, setIsOpen] = useState(false);
-  relativeTimeIsValid: boolean;
+  const [relativeTimeIsValid, setRelativeTimeIsValid] = useState(true);
-  timeShiftIsValid: boolean;
+  const [timeShiftIsValid, setTimeShiftIsValid] = useState(true);
-}
 
-export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
+  const styles = useStyles2(getStyles);
-  constructor(props: Props) {
-    super(props);
 
-    const { options } = props;
+  const onRelativeTimeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setTimeRangeFrom(event.target.value);
+  }, []);
 
-    this.state = {
+  const onTimeShiftChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-      timeRangeFrom: options.timeRange?.from || '',
+    setTimeRangeShift(event.target.value);
-      timeRangeShift: options.timeRange?.shift || '',
+  }, []);
-      timeRangeHide: options.timeRange?.hide ?? false,
-      isOpen: false,
-      relativeTimeIsValid: true,
-      timeShiftIsValid: true,
-    };
-  }
-
-  onRelativeTimeChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.setState({
-      timeRangeFrom: event.target.value,
-    });
-  };
-
-  onTimeShiftChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.setState({
-      timeRangeShift: event.target.value,
-    });
-  };
-
-  onOverrideTime = (event: FocusEvent<HTMLInputElement>) => {
-    const { options, onChange } = this.props;
 
+  const onOverrideTime = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
       const newValue = emptyToNull(event.target.value);
       const isValid = timeRangeValidation(newValue);
 
@@ -68,12 +46,13 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
         });
       }
 
-    this.setState({ relativeTimeIsValid: isValid });
+      setRelativeTimeIsValid(isValid);
-  };
+    },
-
+    [onChange, options]
-  onTimeShift = (event: FocusEvent<HTMLInputElement>) => {
+  );
-    const { options, onChange } = this.props;
 
+  const onTimeShift = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
       const newValue = emptyToNull(event.target.value);
       const isValid = timeRangeValidation(newValue);
 
@@ -87,34 +66,35 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
         });
       }
 
-    this.setState({ timeShiftIsValid: isValid });
+      setTimeShiftIsValid(isValid);
-  };
+    },
+    [onChange, options]
+  );
 
-  onToggleTimeOverride = () => {
+  const onToggleTimeOverride = useCallback(() => {
-    const { onChange, options } = this.props;
+    const newTimeRangeHide = !timeRangeHide;
-
+    setTimeRangeHide(newTimeRangeHide);
-    this.setState({ timeRangeHide: !this.state.timeRangeHide }, () => {
     onChange({
       ...options,
       timeRange: {
         ...(options.timeRange ?? {}),
-          hide: this.state.timeRangeHide,
+        hide: newTimeRangeHide,
       },
     });
-    });
+  }, [onChange, options, timeRangeHide]);
-  };
 
-  onCacheTimeoutBlur = (event: ChangeEvent<HTMLInputElement>) => {
+  const onCacheTimeoutBlur = useCallback(
-    const { options, onChange } = this.props;
+    (event: ChangeEvent<HTMLInputElement>) => {
       onChange({
         ...options,
         cacheTimeout: emptyToNull(event.target.value),
       });
-  };
+    },
-
+    [onChange, options]
-  onQueryCachingTTLBlur = (event: ChangeEvent<HTMLInputElement>) => {
+  );
-    const { options, onChange } = this.props;
 
+  const onQueryCachingTTLBlur = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
       let ttl: number | null = parseInt(event.target.value, 10);
 
       if (isNaN(ttl) || ttl === 0) {
@@ -125,11 +105,12 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
         ...options,
         queryCachingTTL: ttl,
       });
-  };
+    },
-
+    [onChange, options]
-  onMaxDataPointsBlur = (event: ChangeEvent<HTMLInputElement>) => {
+  );
-    const { options, onChange } = this.props;
 
+  const onMaxDataPointsBlur = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
       let maxDataPoints: number | null = parseInt(event.currentTarget.value, 10);
 
       if (isNaN(maxDataPoints) || maxDataPoints === 0) {
@@ -142,10 +123,12 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
           maxDataPoints,
         });
       }
-  };
+    },
+    [onChange, options]
+  );
 
-  onMinIntervalBlur = (event: ChangeEvent<HTMLInputElement>) => {
+  const onMinIntervalBlur = useCallback(
-    const { options, onChange } = this.props;
+    (event: ChangeEvent<HTMLInputElement>) => {
       const minInterval = emptyToNull(event.target.value);
       if (minInterval !== options.minInterval) {
         onChange({
@@ -153,11 +136,19 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
           minInterval,
         });
       }
-  };
+    },
+    [onChange, options]
+  );
 
-  renderCacheTimeoutOption() {
+  const onOpenOptions = useCallback(() => {
-    const { dataSource, options } = this.props;
+    setIsOpen(true);
+  }, []);
 
+  const onCloseOptions = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const renderCacheTimeoutOption = () => {
     const tooltip = `If your time series store has a query cache this option can override the default cache timeout. Specify a
     numeric value in seconds.`;
 
@@ -166,27 +157,23 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
     }
 
     return (
-      <div className="gf-form-inline">
+      <>
-        <div className="gf-form">
+        <InlineLabel tooltip={tooltip} htmlFor="cache-timeout-id">
-          <InlineFormLabel width={9} tooltip={tooltip}>
           Cache timeout
-          </InlineFormLabel>
+        </InlineLabel>
         <Input
+          id="cache-timeout-id"
           type="text"
-            className="width-6"
           placeholder="60"
           spellCheck={false}
-            onBlur={this.onCacheTimeoutBlur}
+          onBlur={onCacheTimeoutBlur}
           defaultValue={options.cacheTimeout ?? ''}
         />
-        </div>
+      </>
-      </div>
     );
-  }
+  };
-
-  renderQueryCachingTTLOption() {
-    const { dataSource, options } = this.props;
 
+  const renderQueryCachingTTLOption = () => {
     const tooltip = `Cache time-to-live: How long results from this queries in this panel will be cached, in milliseconds. Defaults to the TTL in the caching configuration for this datasource.`;
 
     if (!dataSource.cachingConfig?.enabled) {
@@ -194,35 +181,28 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
     }
 
     return (
-      <div className="gf-form-inline">
+      <>
-        <div className="gf-form">
+        <InlineLabel tooltip={tooltip}>Cache TTL</InlineLabel>
-          <InlineFormLabel width={9} tooltip={tooltip}>
-            Cache TTL
-          </InlineFormLabel>
         <Input
           type="number"
-            className="width-6"
           placeholder={`${dataSource.cachingConfig.TTLMs}`}
           spellCheck={false}
-            onBlur={this.onQueryCachingTTLBlur}
+          onBlur={onQueryCachingTTLBlur}
           defaultValue={options.queryCachingTTL ?? undefined}
         />
-        </div>
+      </>
-      </div>
     );
-  }
+  };
 
-  renderMaxDataPointsOption() {
+  const renderMaxDataPointsOption = () => {
-    const { data, options } = this.props;
     const realMd = data.request?.maxDataPoints;
     const value = options.maxDataPoints ?? '';
     const isAuto = value === '';
 
     return (
-      <div className="gf-form-inline">
+      <>
-        <div className="gf-form">
+        <InlineLabel
-          <InlineFormLabel
+          htmlFor="max-data-points-input"
-            width={9}
           tooltip={
             <>
               The maximum data points per series. Used directly by some data sources and used in calculation of auto
@@ -231,92 +211,71 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
           }
         >
           Max data points
-          </InlineFormLabel>
+        </InlineLabel>
         <Input
+          id="max-data-points-input"
           type="number"
-            className="width-6"
           placeholder={`${realMd}`}
           spellCheck={false}
-            onBlur={this.onMaxDataPointsBlur}
+          onBlur={onMaxDataPointsBlur}
           defaultValue={value}
         />
         {isAuto && (
           <>
-              <div className="gf-form-label query-segment-operator">=</div>
+            <span className={cx(styles.noSquish, styles.operator)}>=</span>
-              <div className="gf-form-label">Width of panel</div>
+            <span className={cx(styles.noSquish, styles.left)}>Width of panel</span>
           </>
         )}
-        </div>
+      </>
-      </div>
     );
-  }
+  };
 
-  renderIntervalOption() {
+  const renderIntervalOption = () => {
-    const { data, dataSource, options } = this.props;
     const realInterval = data.request?.interval;
     const minIntervalOnDs = dataSource.interval ?? 'No limit';
 
     return (
       <>
-        <div className="gf-form-inline">
+        <InlineLabel
-          <div className="gf-form">
+          className={styles.firstColumn}
-            <InlineFormLabel
-              width={9}
           tooltip={
             <>
-                  A lower limit for the interval. Recommended to be set to write frequency, for example <code>1m</code>{' '}
+              A lower limit for the interval. Recommended to be set to write frequency, for example <code>1m</code> if
-                  if your data is written every minute. Default value can be set in data source settings for most data
+              your data is written every minute. Default value can be set in data source settings for most data sources.
-                  sources.
             </>
           }
+          htmlFor="min-interval-input"
         >
           Min interval
-            </InlineFormLabel>
+        </InlineLabel>
         <Input
+          id="min-interval-input"
           type="text"
-              className="width-6"
           placeholder={`${minIntervalOnDs}`}
           spellCheck={false}
-              onBlur={this.onMinIntervalBlur}
+          onBlur={onMinIntervalBlur}
           defaultValue={options.minInterval ?? ''}
         />
-          </div>
+        <InlineLabel
-        </div>
+          className={styles.firstColumn}
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <InlineFormLabel
-              width={9}
           tooltip={
             <>
               The evaluated interval that is sent to data source and is used in <code>$__interval</code> and{' '}
-                  <code>$__interval_ms</code>. This value is not exactly equal to{' '}
+              <code>$__interval_ms</code>. This value is not exactly equal to <code>Time range / max data points</code>,
-                  <code>Time range / max data points</code>, it will approximate a series of magic number.
+              it will approximate a series of magic number.
             </>
           }
         >
           Interval
-            </InlineFormLabel>
+        </InlineLabel>
-            <InlineFormLabel width={6}>{realInterval}</InlineFormLabel>
+        <span className={styles.noSquish}>{realInterval}</span>
-            <div className="gf-form-label query-segment-operator">=</div>
+        <span className={cx(styles.noSquish, styles.operator)}>=</span>
-            <div className="gf-form-label">Time range / max data points</div>
+        <span className={cx(styles.noSquish, styles.left)}>Time range / max data points</span>
-          </div>
-        </div>
       </>
     );
-  }
-
-  onOpenOptions = () => {
-    this.setState({ isOpen: true });
   };
 
-  onCloseOptions = () => {
+  const renderCollapsedText = (): React.ReactNode | undefined => {
-    this.setState({ isOpen: false });
-  };
-
-  renderCollapsedText(styles: StylesType): React.ReactNode | undefined {
-    const { data, options } = this.props;
-    const { isOpen } = this.state;
-
     if (isOpen) {
       return undefined;
     }
@@ -326,120 +285,135 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
       mdDesc = `auto = ${data.request.maxDataPoints}`;
     }
 
-    let intervalDesc = options.minInterval;
+    const intervalDesc = data.request?.interval ?? options.minInterval;
-    if (data.request) {
-      intervalDesc = `${data.request.interval}`;
-    }
 
     return (
       <>
-        {<div className={styles.collapsedText}>MD = {mdDesc}</div>}
+        {<span className={styles.collapsedText}>MD = {mdDesc}</span>}
-        {<div className={styles.collapsedText}>Interval = {intervalDesc}</div>}
+        {<span className={styles.collapsedText}>Interval = {intervalDesc}</span>}
       </>
     );
-  }
+  };
-
-  render() {
-    const { timeRangeHide: hideTimeOverride, relativeTimeIsValid, timeShiftIsValid } = this.state;
-    const { timeRangeFrom: relativeTime, timeRangeShift: timeShift, isOpen } = this.state;
-    const styles = getStyles();
 
   return (
     <QueryOperationRow
       id="Query options"
       index={0}
       title="Query options"
-        headerElement={this.renderCollapsedText(styles)}
+      headerElement={renderCollapsedText()}
       isOpen={isOpen}
-        onOpen={this.onOpenOptions}
+      onOpen={onOpenOptions}
-        onClose={this.onCloseOptions}
+      onClose={onCloseOptions}
     >
-        {this.renderMaxDataPointsOption()}
+      <div className={styles.grid}>
-        {this.renderIntervalOption()}
+        {renderMaxDataPointsOption()}
-        {this.renderCacheTimeoutOption()}
+        {renderIntervalOption()}
-        {this.renderQueryCachingTTLOption()}
+        {renderCacheTimeoutOption()}
+        {renderQueryCachingTTLOption()}
 
-        <div className="gf-form">
+        <InlineLabel
-          <InlineFormLabel
+          htmlFor="relative-time-input"
-            width={9}
           tooltip={
             <>
               Overrides the relative time range for individual panels, which causes them to be different than what is
               selected in the dashboard time picker in the top-right corner of the dashboard. For example to configure
-                the Last 5 minutes the Relative time should be <code>now-5m</code> and <code>5m</code>, or variables
+              the Last 5 minutes the Relative time should be <code>now-5m</code> and <code>5m</code>, or variables like{' '}
-                like <code>$_relativeTime</code>.
+              <code>$_relativeTime</code>.
             </>
           }
         >
           Relative time
-          </InlineFormLabel>
+        </InlineLabel>
         <Input
+          id="relative-time-input"
           type="text"
-            className="width-6"
           placeholder="1h"
-            onChange={this.onRelativeTimeChange}
+          onChange={onRelativeTimeChange}
-            onBlur={this.onOverrideTime}
+          onBlur={onOverrideTime}
           invalid={!relativeTimeIsValid}
-            value={relativeTime}
+          value={timeRangeFrom}
         />
-        </div>
+        <InlineLabel
-
+          htmlFor="time-shift-input"
-        <div className="gf-form">
+          className={styles.firstColumn}
-          <InlineFormLabel
-            width={9}
           tooltip={
             <>
-                Overrides the time range for individual panels by shifting its start and end relative to the time
+              Overrides the time range for individual panels by shifting its start and end relative to the time picker.
-                picker. For example to configure the Last 1h the Time shift should be <code>now-1h</code> and{' '}
+              For example to configure the Last 1h the Time shift should be <code>now-1h</code> and <code>1h</code>, or
-                <code>1h</code>, or variables like <code>$_timeShift</code>.
+              variables like <code>$_timeShift</code>.
             </>
           }
         >
           Time shift
-          </InlineFormLabel>
+        </InlineLabel>
         <Input
+          id="time-shift-input"
           type="text"
-            className="width-6"
           placeholder="1h"
-            onChange={this.onTimeShiftChange}
+          onChange={onTimeShiftChange}
-            onBlur={this.onTimeShift}
+          onBlur={onTimeShift}
           invalid={!timeShiftIsValid}
-            value={timeShift}
+          value={timeRangeShift}
         />
-        </div>
+        {(timeRangeShift || timeRangeFrom) && (
-        {(timeShift || relativeTime) && (
+          <>
-          <InlineFieldRow>
+            <InlineLabel htmlFor="hide-time-info-switch" className={styles.firstColumn}>
-            <InlineFormLabel width={9}>Hide time info</InlineFormLabel>
+              Hide time info
-            <InlineSwitch value={hideTimeOverride} onChange={this.onToggleTimeOverride} />
+            </InlineLabel>
-          </InlineFieldRow>
+            <InlineSwitch
+              id="hide-time-info-switch"
+              className={styles.left}
+              value={timeRangeHide}
+              onChange={onToggleTimeOverride}
+            />
+          </>
         )}
+      </div>
     </QueryOperationRow>
   );
-  }
-}
-
-const timeRangeValidation = (value: string | null) => {
-  if (!value) {
-    return true;
-  }
-
-  return rangeUtil.isValidTimeSpan(value);
-};
-
-const emptyToNull = (value: string) => {
-  return value === '' ? null : value;
-};
-
-const getStyles = stylesFactory(() => {
-  const { theme } = config;
-
-  return {
-    collapsedText: css`
-      margin-left: ${theme.spacing.md};
-      font-size: ${theme.typography.size.sm};
-      color: ${theme.colors.textWeak};
-    `,
-  };
 });
 
-type StylesType = ReturnType<typeof getStyles>;
+QueryGroupOptionsEditor.displayName = 'QueryGroupOptionsEditor';
+
+function timeRangeValidation(value: string | null) {
+  return !value || rangeUtil.isValidTimeSpan(value);
+}
+
+function emptyToNull(value: string) {
+  return value === '' ? null : value;
+}
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    grid: css({
+      display: 'grid',
+      gridTemplateColumns: `auto minmax(5em, 1fr) auto 1fr`,
+      gap: theme.spacing(0.5),
+      gridAutoRows: theme.spacing(4),
+      whiteSpace: 'nowrap',
+    }),
+    firstColumn: css({
+      gridColumn: 1,
+    }),
+    collapsedText: css({
+      marginLeft: theme.spacing(2),
+      fontSize: theme.typography.size.sm,
+      color: theme.colors.text.secondary,
+    }),
+    noSquish: css({
+      display: 'flex',
+      alignItems: 'center',
+      padding: theme.spacing(0, 1),
+      fontWeight: theme.typography.fontWeightMedium,
+      fontSize: theme.typography.size.sm,
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: theme.shape.radius.default,
+    }),
+    left: css({
+      justifySelf: 'left',
+    }),
+    operator: css({
+      color: theme.v1.palette.orange,
+    }),
+  };
+}