Alerting: Update query options layout (#74660)

public/app/features/alerting/unified/components/rule-editor/QueryOptions.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 
 import { dateTime, getDefaultRelativeTimeRange, GrafanaTheme2, RelativeTimeRange } from '@grafana/data';
 import { relativeToTimeRange } from '@grafana/data/src/datetime/rangeutil';
-import { clearButtonStyles, Icon, RelativeTimeRangePicker, Toggletip, useStyles2 } from '@grafana/ui';
+import { clearButtonStyles, Icon, InlineField, RelativeTimeRangePicker, Toggletip, useStyles2 } from '@grafana/ui';
 import { AlertQuery } from 'app/types/unified-alerting-dto';
 
 import { AlertQueryOptions, MaxDataPointsOption, MinIntervalOption } from './QueryWrapper';
@@ -33,25 +33,17 @@ export const QueryOptions = ({
     <>
       <Toggletip
         content={
-          <div className={styles.container}>
-            <div>
-              {onChangeTimeRange && (
-                <div className={styles.timeRangeContainer}>
-                  <span className={styles.timeRangeLabel}>Time Range</span>
-                  <RelativeTimeRangePicker
-                    timeRange={query.relativeTimeRange ?? getDefaultRelativeTimeRange()}
-                    onChange={(range) => onChangeTimeRange(range, index)}
-                  />
-                </div>
-              )}
-            </div>
-            <div className={styles.queryOptions}>
-              <MaxDataPointsOption
-                options={queryOptions}
-                onChange={(options) => onChangeQueryOptions(options, index)}
-              />
-              <MinIntervalOption options={queryOptions} onChange={(options) => onChangeQueryOptions(options, index)} />
-            </div>
+          <div className={styles.queryOptions}>
+            {onChangeTimeRange && (
+              <InlineField label="Time Range">
+                <RelativeTimeRangePicker
+                  timeRange={query.relativeTimeRange ?? getDefaultRelativeTimeRange()}
+                  onChange={(range) => onChangeTimeRange(range, index)}
+                />
+              </InlineField>
+            )}
+            <MaxDataPointsOption options={queryOptions} onChange={(options) => onChangeQueryOptions(options, index)} />
+            <MinIntervalOption options={queryOptions} onChange={(options) => onChangeQueryOptions(options, index)} />
           </div>
         }
         closeButton={true}
@@ -79,24 +71,9 @@ const getStyles = (theme: GrafanaTheme2) => {
   const clearButton = clearButtonStyles(theme);
 
   return {
-    container: css`
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    `,
-    timeRangeContainer: css`
-      display: flex;
-    `,
-
-    timeRangeLabel: css`
-      width: 20%;
-    `,
     queryOptions: css`
-      margin-bottom: -${theme.spacing(2)};
-
-      label {
-        line-height: 12px;
-        padding: 0px;
+      > div {
+        justify-content: space-between;
       }
     `,
 

public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx

@@ -14,7 +14,7 @@ import {
 } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
 import { DataQuery } from '@grafana/schema';
-import { GraphTresholdsStyleMode, Icon, InlineFormLabel, Input, Tooltip, useStyles2 } from '@grafana/ui';
+import { GraphTresholdsStyleMode, Icon, InlineField, Input, Tooltip, useStyles2 } from '@grafana/ui';
 import { QueryEditorRow } from 'app/features/query/components/QueryEditorRow';
 import { AlertQuery } from 'app/types/unified-alerting-dto';
 
@@ -205,27 +205,20 @@ export function MaxDataPointsOption({
   };
 
   return (
-    <Stack direction="row" alignItems="baseline" gap={1}>
-      <InlineFormLabel
-        width={8}
-        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>
+    <InlineField
+      labelWidth={24}
+      label="Max data points"
+      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."
+    >
       <Input
         type="number"
-        className="width-6"
+        width={10}
         placeholder={DEFAULT_MAX_DATA_POINTS.toLocaleString()}
         spellCheck={false}
         onBlur={onMaxDataPointsBlur}
         defaultValue={value}
       />
-    </Stack>
+    </InlineField>
   );
 }
 
@@ -249,27 +242,25 @@ export function MinIntervalOption({
   };
 
   return (
-    <Stack direction="row" alignItems="baseline" gap={1}>
-      <InlineFormLabel
-        width={8}
-        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.
-          </>
-        }
-      >
-        Min interval
-      </InlineFormLabel>
+    <InlineField
+      label="Min interval"
+      labelWidth={24}
+      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.
+        </>
+      }
+    >
       <Input
         type="text"
-        className="width-6"
+        width={10}
         placeholder={DEFAULT_MIN_INTERVAL}
         spellCheck={false}
         onBlur={onMinIntervalBlur}
         defaultValue={value}
       />
-    </Stack>
+    </InlineField>
   );
 }
 
@@ -284,9 +275,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
       overflow: visible;
     }
   `,
-  queryOptions: css`
-    margin-bottom: -${theme.spacing(2)};
-  `,
   dsTooltip: css`
     display: flex;
     align-items: center;