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, "Styles should be written using objects.", "39"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "38"]
     ],
     "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 { PureComponent, ChangeEvent, FocusEvent } from 'react';
-import * as React from 'react';
+import { css, cx } from '@emotion/css';
+import React, { useState, ChangeEvent, FocusEvent, useCallback } from 'react';
 
-import { rangeUtil, PanelData, DataSourceApi } from '@grafana/data';
-import { Input, InlineFormLabel, stylesFactory, InlineFieldRow, InlineSwitch } from '@grafana/ui';
+import { rangeUtil, PanelData, DataSourceApi, GrafanaTheme2 } from '@grafana/data';
+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,149 +13,142 @@ interface Props {
   onChange: (options: QueryGroupOptions) => void;
 }
 
-interface State {
-  timeRangeFrom: string;
-  timeRangeShift: string;
-  timeRangeHide: boolean;
-  isOpen: boolean;
-  relativeTimeIsValid: boolean;
-  timeShiftIsValid: boolean;
-}
+export const QueryGroupOptionsEditor = React.memo(({ options, dataSource, data, onChange }: Props) => {
+  const [timeRangeFrom, setTimeRangeFrom] = useState(options.timeRange?.from || '');
+  const [timeRangeShift, setTimeRangeShift] = useState(options.timeRange?.shift || '');
+  const [timeRangeHide, setTimeRangeHide] = useState(options.timeRange?.hide ?? false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [relativeTimeIsValid, setRelativeTimeIsValid] = useState(true);
+  const [timeShiftIsValid, setTimeShiftIsValid] = useState(true);
 
-export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
+  const styles = useStyles2(getStyles);
 
-    const { options } = props;
+  const onRelativeTimeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setTimeRangeFrom(event.target.value);
+  }, []);
 
-    this.state = {
-      timeRangeFrom: options.timeRange?.from || '',
-      timeRangeShift: options.timeRange?.shift || '',
-      timeRangeHide: options.timeRange?.hide ?? false,
-      isOpen: false,
-      relativeTimeIsValid: true,
-      timeShiftIsValid: true,
-    };
-  }
+  const onTimeShiftChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setTimeRangeShift(event.target.value);
+  }, []);
 
-  onRelativeTimeChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.setState({
-      timeRangeFrom: event.target.value,
-    });
-  };
+  const onOverrideTime = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      const newValue = emptyToNull(event.target.value);
+      const isValid = timeRangeValidation(newValue);
 
-  onTimeShiftChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.setState({
-      timeRangeShift: event.target.value,
-    });
-  };
+      if (isValid && options.timeRange?.from !== newValue) {
+        onChange({
+          ...options,
+          timeRange: {
+            ...(options.timeRange ?? {}),
+            from: newValue,
+          },
+        });
+      }
 
-  onOverrideTime = (event: FocusEvent<HTMLInputElement>) => {
-    const { options, onChange } = this.props;
+      setRelativeTimeIsValid(isValid);
+    },
+    [onChange, options]
+  );
 
-    const newValue = emptyToNull(event.target.value);
-    const isValid = timeRangeValidation(newValue);
+  const onTimeShift = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      const newValue = emptyToNull(event.target.value);
+      const isValid = timeRangeValidation(newValue);
 
-    if (isValid && options.timeRange?.from !== newValue) {
-      onChange({
-        ...options,
-        timeRange: {
-          ...(options.timeRange ?? {}),
-          from: newValue,
-        },
-      });
-    }
+      if (isValid && options.timeRange?.shift !== newValue) {
+        onChange({
+          ...options,
+          timeRange: {
+            ...(options.timeRange ?? {}),
+            shift: newValue,
+          },
+        });
+      }
 
-    this.setState({ relativeTimeIsValid: isValid });
-  };
+      setTimeShiftIsValid(isValid);
+    },
+    [onChange, options]
+  );
 
-  onTimeShift = (event: FocusEvent<HTMLInputElement>) => {
-    const { options, onChange } = this.props;
-
-    const newValue = emptyToNull(event.target.value);
-    const isValid = timeRangeValidation(newValue);
-
-    if (isValid && options.timeRange?.shift !== newValue) {
-      onChange({
-        ...options,
-        timeRange: {
-          ...(options.timeRange ?? {}),
-          shift: newValue,
-        },
-      });
-    }
-
-    this.setState({ timeShiftIsValid: isValid });
-  };
-
-  onToggleTimeOverride = () => {
-    const { onChange, options } = this.props;
-
-    this.setState({ timeRangeHide: !this.state.timeRangeHide }, () => {
-      onChange({
-        ...options,
-        timeRange: {
-          ...(options.timeRange ?? {}),
-          hide: this.state.timeRangeHide,
-        },
-      });
-    });
-  };
-
-  onCacheTimeoutBlur = (event: ChangeEvent<HTMLInputElement>) => {
-    const { options, onChange } = this.props;
+  const onToggleTimeOverride = useCallback(() => {
+    const newTimeRangeHide = !timeRangeHide;
+    setTimeRangeHide(newTimeRangeHide);
     onChange({
       ...options,
-      cacheTimeout: emptyToNull(event.target.value),
+      timeRange: {
+        ...(options.timeRange ?? {}),
+        hide: newTimeRangeHide,
+      },
     });
-  };
+  }, [onChange, options, timeRangeHide]);
 
-  onQueryCachingTTLBlur = (event: ChangeEvent<HTMLInputElement>) => {
-    const { options, onChange } = this.props;
-
-    let ttl: number | null = parseInt(event.target.value, 10);
-
-    if (isNaN(ttl) || ttl === 0) {
-      ttl = null;
-    }
-
-    onChange({
-      ...options,
-      queryCachingTTL: ttl,
-    });
-  };
-
-  onMaxDataPointsBlur = (event: ChangeEvent<HTMLInputElement>) => {
-    const { options, onChange } = this.props;
-
-    let maxDataPoints: number | null = parseInt(event.currentTarget.value, 10);
-
-    if (isNaN(maxDataPoints) || maxDataPoints === 0) {
-      maxDataPoints = null;
-    }
-
-    if (maxDataPoints !== options.maxDataPoints) {
+  const onCacheTimeoutBlur = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
       onChange({
         ...options,
-        maxDataPoints,
+        cacheTimeout: emptyToNull(event.target.value),
       });
-    }
-  };
+    },
+    [onChange, options]
+  );
+
+  const onQueryCachingTTLBlur = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      let ttl: number | null = parseInt(event.target.value, 10);
+
+      if (isNaN(ttl) || ttl === 0) {
+        ttl = null;
+      }
 
-  onMinIntervalBlur = (event: ChangeEvent<HTMLInputElement>) => {
-    const { options, onChange } = this.props;
-    const minInterval = emptyToNull(event.target.value);
-    if (minInterval !== options.minInterval) {
       onChange({
         ...options,
-        minInterval,
+        queryCachingTTL: ttl,
       });
-    }
-  };
+    },
+    [onChange, options]
+  );
 
-  renderCacheTimeoutOption() {
-    const { dataSource, options } = this.props;
+  const onMaxDataPointsBlur = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      let maxDataPoints: number | null = parseInt(event.currentTarget.value, 10);
 
+      if (isNaN(maxDataPoints) || maxDataPoints === 0) {
+        maxDataPoints = null;
+      }
+
+      if (maxDataPoints !== options.maxDataPoints) {
+        onChange({
+          ...options,
+          maxDataPoints,
+        });
+      }
+    },
+    [onChange, options]
+  );
+
+  const onMinIntervalBlur = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const minInterval = emptyToNull(event.target.value);
+      if (minInterval !== options.minInterval) {
+        onChange({
+          ...options,
+          minInterval,
+        });
+      }
+    },
+    [onChange, options]
+  );
+
+  const onOpenOptions = useCallback(() => {
+    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">
-          <InlineFormLabel width={9} tooltip={tooltip}>
-            Cache timeout
-          </InlineFormLabel>
-          <Input
-            type="text"
-            className="width-6"
-            placeholder="60"
-            spellCheck={false}
-            onBlur={this.onCacheTimeoutBlur}
-            defaultValue={options.cacheTimeout ?? ''}
-          />
-        </div>
-      </div>
+      <>
+        <InlineLabel tooltip={tooltip} htmlFor="cache-timeout-id">
+          Cache timeout
+        </InlineLabel>
+        <Input
+          id="cache-timeout-id"
+          type="text"
+          placeholder="60"
+          spellCheck={false}
+          onBlur={onCacheTimeoutBlur}
+          defaultValue={options.cacheTimeout ?? ''}
+        />
+      </>
     );
-  }
-
-  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,129 +181,101 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
     }
 
     return (
-      <div className="gf-form-inline">
-        <div className="gf-form">
-          <InlineFormLabel width={9} tooltip={tooltip}>
-            Cache TTL
-          </InlineFormLabel>
-          <Input
-            type="number"
-            className="width-6"
-            placeholder={`${dataSource.cachingConfig.TTLMs}`}
-            spellCheck={false}
-            onBlur={this.onQueryCachingTTLBlur}
-            defaultValue={options.queryCachingTTL ?? undefined}
-          />
-        </div>
-      </div>
+      <>
+        <InlineLabel tooltip={tooltip}>Cache TTL</InlineLabel>
+        <Input
+          type="number"
+          placeholder={`${dataSource.cachingConfig.TTLMs}`}
+          spellCheck={false}
+          onBlur={onQueryCachingTTLBlur}
+          defaultValue={options.queryCachingTTL ?? undefined}
+        />
+      </>
     );
-  }
+  };
 
-  renderMaxDataPointsOption() {
-    const { data, options } = this.props;
+  const renderMaxDataPointsOption = () => {
     const realMd = data.request?.maxDataPoints;
     const value = options.maxDataPoints ?? '';
     const isAuto = value === '';
 
     return (
-      <div className="gf-form-inline">
-        <div className="gf-form">
-          <InlineFormLabel
-            width={9}
-            tooltip={
-              <>
-                The maximum data points per series. Used directly by some data sources and used in calculation of auto
-                interval. With streaming data this value is used for the rolling buffer.
-              </>
-            }
-          >
-            Max data points
-          </InlineFormLabel>
-          <Input
-            type="number"
-            className="width-6"
-            placeholder={`${realMd}`}
-            spellCheck={false}
-            onBlur={this.onMaxDataPointsBlur}
-            defaultValue={value}
-          />
-          {isAuto && (
+      <>
+        <InlineLabel
+          htmlFor="max-data-points-input"
+          tooltip={
             <>
-              <div className="gf-form-label query-segment-operator">=</div>
-              <div className="gf-form-label">Width of panel</div>
+              The maximum data points per series. Used directly by some data sources and used in calculation of auto
+              interval. With streaming data this value is used for the rolling buffer.
             </>
-          )}
-        </div>
-      </div>
+          }
+        >
+          Max data points
+        </InlineLabel>
+        <Input
+          id="max-data-points-input"
+          type="number"
+          placeholder={`${realMd}`}
+          spellCheck={false}
+          onBlur={onMaxDataPointsBlur}
+          defaultValue={value}
+        />
+        {isAuto && (
+          <>
+            <span className={cx(styles.noSquish, styles.operator)}>=</span>
+            <span className={cx(styles.noSquish, styles.left)}>Width of panel</span>
+          </>
+        )}
+      </>
     );
-  }
+  };
 
-  renderIntervalOption() {
-    const { data, dataSource, options } = this.props;
+  const renderIntervalOption = () => {
     const realInterval = data.request?.interval;
     const minIntervalOnDs = dataSource.interval ?? 'No limit';
 
     return (
       <>
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <InlineFormLabel
-              width={9}
-              tooltip={
-                <>
-                  A lower limit for the interval. Recommended to be set to write frequency, for example <code>1m</code>{' '}
-                  if your data is written every minute. Default value can be set in data source settings for most data
-                  sources.
-                </>
-              }
-            >
-              Min interval
-            </InlineFormLabel>
-            <Input
-              type="text"
-              className="width-6"
-              placeholder={`${minIntervalOnDs}`}
-              spellCheck={false}
-              onBlur={this.onMinIntervalBlur}
-              defaultValue={options.minInterval ?? ''}
-            />
-          </div>
-        </div>
-        <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>Time range / max data points</code>, it will approximate a series of magic number.
-                </>
-              }
-            >
-              Interval
-            </InlineFormLabel>
-            <InlineFormLabel width={6}>{realInterval}</InlineFormLabel>
-            <div className="gf-form-label query-segment-operator">=</div>
-            <div className="gf-form-label">Time range / max data points</div>
-          </div>
-        </div>
+        <InlineLabel
+          className={styles.firstColumn}
+          tooltip={
+            <>
+              A lower limit for the interval. Recommended to be set to write frequency, for example <code>1m</code> if
+              your data is written every minute. Default value can be set in data source settings for most data sources.
+            </>
+          }
+          htmlFor="min-interval-input"
+        >
+          Min interval
+        </InlineLabel>
+        <Input
+          id="min-interval-input"
+          type="text"
+          placeholder={`${minIntervalOnDs}`}
+          spellCheck={false}
+          onBlur={onMinIntervalBlur}
+          defaultValue={options.minInterval ?? ''}
+        />
+        <InlineLabel
+          className={styles.firstColumn}
+          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>Time range / max data points</code>,
+              it will approximate a series of magic number.
+            </>
+          }
+        >
+          Interval
+        </InlineLabel>
+        <span className={styles.noSquish}>{realInterval}</span>
+        <span className={cx(styles.noSquish, styles.operator)}>=</span>
+        <span className={cx(styles.noSquish, styles.left)}>Time range / max data points</span>
       </>
     );
-  }
-
-  onOpenOptions = () => {
-    this.setState({ isOpen: true });
   };
 
-  onCloseOptions = () => {
-    this.setState({ isOpen: false });
-  };
-
-  renderCollapsedText(styles: StylesType): React.ReactNode | undefined {
-    const { data, options } = this.props;
-    const { isOpen } = this.state;
-
+  const renderCollapsedText = (): React.ReactNode | undefined => {
     if (isOpen) {
       return undefined;
     }
@@ -326,120 +285,135 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
       mdDesc = `auto = ${data.request.maxDataPoints}`;
     }
 
-    let intervalDesc = options.minInterval;
-    if (data.request) {
-      intervalDesc = `${data.request.interval}`;
-    }
+    const intervalDesc = data.request?.interval ?? options.minInterval;
 
     return (
       <>
-        {<div className={styles.collapsedText}>MD = {mdDesc}</div>}
-        {<div className={styles.collapsedText}>Interval = {intervalDesc}</div>}
+        {<span className={styles.collapsedText}>MD = {mdDesc}</span>}
+        {<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)}
-        isOpen={isOpen}
-        onOpen={this.onOpenOptions}
-        onClose={this.onCloseOptions}
-      >
-        {this.renderMaxDataPointsOption()}
-        {this.renderIntervalOption()}
-        {this.renderCacheTimeoutOption()}
-        {this.renderQueryCachingTTLOption()}
-
-        <div className="gf-form">
-          <InlineFormLabel
-            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
-                like <code>$_relativeTime</code>.
-              </>
-            }
-          >
-            Relative time
-          </InlineFormLabel>
-          <Input
-            type="text"
-            className="width-6"
-            placeholder="1h"
-            onChange={this.onRelativeTimeChange}
-            onBlur={this.onOverrideTime}
-            invalid={!relativeTimeIsValid}
-            value={relativeTime}
-          />
-        </div>
-
-        <div className="gf-form">
-          <InlineFormLabel
-            width={9}
-            tooltip={
-              <>
-                Overrides the time range for individual panels by shifting its start and end relative to the time
-                picker. For example to configure the Last 1h the Time shift should be <code>now-1h</code> and{' '}
-                <code>1h</code>, or variables like <code>$_timeShift</code>.
-              </>
-            }
-          >
-            Time shift
-          </InlineFormLabel>
-          <Input
-            type="text"
-            className="width-6"
-            placeholder="1h"
-            onChange={this.onTimeShiftChange}
-            onBlur={this.onTimeShift}
-            invalid={!timeShiftIsValid}
-            value={timeShift}
-          />
-        </div>
-        {(timeShift || relativeTime) && (
-          <InlineFieldRow>
-            <InlineFormLabel width={9}>Hide time info</InlineFormLabel>
-            <InlineSwitch value={hideTimeOverride} onChange={this.onToggleTimeOverride} />
-          </InlineFieldRow>
-        )}
-      </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};
-    `,
   };
+
+  return (
+    <QueryOperationRow
+      id="Query options"
+      index={0}
+      title="Query options"
+      headerElement={renderCollapsedText()}
+      isOpen={isOpen}
+      onOpen={onOpenOptions}
+      onClose={onCloseOptions}
+    >
+      <div className={styles.grid}>
+        {renderMaxDataPointsOption()}
+        {renderIntervalOption()}
+        {renderCacheTimeoutOption()}
+        {renderQueryCachingTTLOption()}
+
+        <InlineLabel
+          htmlFor="relative-time-input"
+          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 like{' '}
+              <code>$_relativeTime</code>.
+            </>
+          }
+        >
+          Relative time
+        </InlineLabel>
+        <Input
+          id="relative-time-input"
+          type="text"
+          placeholder="1h"
+          onChange={onRelativeTimeChange}
+          onBlur={onOverrideTime}
+          invalid={!relativeTimeIsValid}
+          value={timeRangeFrom}
+        />
+        <InlineLabel
+          htmlFor="time-shift-input"
+          className={styles.firstColumn}
+          tooltip={
+            <>
+              Overrides the time range for individual panels by shifting its start and end relative to the time picker.
+              For example to configure the Last 1h the Time shift should be <code>now-1h</code> and <code>1h</code>, or
+              variables like <code>$_timeShift</code>.
+            </>
+          }
+        >
+          Time shift
+        </InlineLabel>
+        <Input
+          id="time-shift-input"
+          type="text"
+          placeholder="1h"
+          onChange={onTimeShiftChange}
+          onBlur={onTimeShift}
+          invalid={!timeShiftIsValid}
+          value={timeRangeShift}
+        />
+        {(timeRangeShift || timeRangeFrom) && (
+          <>
+            <InlineLabel htmlFor="hide-time-info-switch" className={styles.firstColumn}>
+              Hide time info
+            </InlineLabel>
+            <InlineSwitch
+              id="hide-time-info-switch"
+              className={styles.left}
+              value={timeRangeHide}
+              onChange={onToggleTimeOverride}
+            />
+          </>
+        )}
+      </div>
+    </QueryOperationRow>
+  );
 });
 
-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,
+    }),
+  };
+}