Chore: Remove deprecated HorizontalGroup in plugins/panel (#109618)

2025-08-18 11:55:53 +02:00
parent 1a82bb4767
commit b7ff1b3ac8
7 changed files with 24 additions and 48 deletions
@@ -3663,9 +3663,6 @@ exports[`better eslint`] = {
    "public/app/plugins/panel/annolist/AnnotationListItem.tsx:5381": [
      [0, 0, 0, "Add noMargin prop to Card components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "0"]
    ],
-    "public/app/plugins/panel/barchart/TickSpacingEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
    "public/app/plugins/panel/barchart/bars.ts:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
@@ -3728,7 +3725,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
    "public/app/plugins/panel/geomap/editor/StyleEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
+      [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "0"],
      [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "1"],
      [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "2"],
      [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "3"],
@@ -3742,7 +3739,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "11"],
      [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "12"],
      [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "13"],
-      [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "14"],
+      [0, 0, 0, "Do not use any type assertions.", "14"],
      [0, 0, 0, "Do not use any type assertions.", "15"],
      [0, 0, 0, "Do not use any type assertions.", "16"],
      [0, 0, 0, "Do not use any type assertions.", "17"],
@@ -3753,8 +3750,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not use any type assertions.", "22"],
      [0, 0, 0, "Do not use any type assertions.", "23"],
      [0, 0, 0, "Do not use any type assertions.", "24"],
-      [0, 0, 0, "Do not use any type assertions.", "25"],
-      [0, 0, 0, "Do not use any type assertions.", "26"]
+      [0, 0, 0, "Do not use any type assertions.", "25"]
    ],
    "public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
@@ -3923,15 +3919,6 @@ exports[`better eslint`] = {
    "public/app/plugins/panel/text/textPanelMigrationHandler.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
-    "public/app/plugins/panel/timeseries/InsertNullsEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
-    "public/app/plugins/panel/timeseries/LineStyleEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
-    "public/app/plugins/panel/timeseries/SpanNullsEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
    "public/app/plugins/panel/timeseries/migrations.ts:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -3956,8 +3943,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
    "public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationTooltip2.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
    "public/app/plugins/panel/xychart/SeriesEditor.tsx:5381": [
      [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "0"],
@@ -1,6 +1,6 @@
 import { SelectableValue, StandardEditorProps } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { Checkbox, HorizontalGroup, RadioButtonGroup, Tooltip } from '@grafana/ui';
+import { Checkbox, Stack, RadioButtonGroup, Tooltip } from '@grafana/ui';

 export const TickSpacingEditor = (props: StandardEditorProps<number>) => {
  const GAPS_OPTIONS: Array<SelectableValue<number>> = [
@@ -53,7 +53,7 @@ export const TickSpacingEditor = (props: StandardEditorProps<number>) => {
  };

  return (
-    <HorizontalGroup>
+    <Stack>
      <RadioButtonGroup value={gap.value} options={GAPS_OPTIONS} onChange={onSpacingChange} />
      {value !== 0 && (
        <Tooltip
@@ -68,6 +68,6 @@ export const TickSpacingEditor = (props: StandardEditorProps<number>) => {
          </div>
        </Tooltip>
      )}
-    </HorizontalGroup>
+    </Stack>
  );
 };
@@ -12,15 +12,7 @@ import {
  TextDimensionConfig,
  ScalarDimensionConfig,
 } from '@grafana/schema';
-import {
-  ColorPicker,
-  Field,
-  HorizontalGroup,
-  InlineField,
-  InlineFieldRow,
-  InlineLabel,
-  RadioButtonGroup,
-} from '@grafana/ui';
+import { ColorPicker, Field, Stack, InlineField, InlineFieldRow, InlineLabel, RadioButtonGroup } from '@grafana/ui';
 import { NumberValueEditor } from 'app/core/components/OptionsUI/number';
 import { SliderValueEditor } from 'app/core/components/OptionsUI/slider';
 import { ColorDimensionEditor } from 'app/features/dimensions/editors/ColorDimensionEditor';
@@ -364,7 +356,7 @@ export const StyleEditor = (props: Props) => {

      {hasTextLabel && (
        <>
-          <HorizontalGroup>
+          <Stack>
            <Field label={t('geomap.style-editor.label-font-size', 'Font size')}>
              <NumberValueEditor
                id={fontSizeId}
@@ -392,7 +384,7 @@ export const StyleEditor = (props: Props) => {
                item={{} as FieldConfigPropertyItem}
              />
            </Field>
-          </HorizontalGroup>
+          </Stack>
          <Field label={t('geomap.style-editor.label-align', 'Align')}>
            <RadioButtonGroup
              value={value?.textConfig?.textAlign ?? defaultStyleConfig.textConfig.textAlign}
@@ -1,6 +1,6 @@
 import { StandardEditorProps, SelectableValue } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { HorizontalGroup, RadioButtonGroup } from '@grafana/ui';
+import { Stack, RadioButtonGroup } from '@grafana/ui';

 import { InputPrefix, NullsThresholdInput } from './NullsThresholdInput';

@@ -21,7 +21,7 @@ export const InsertNullsEditor = ({ value, onChange, item }: Props) => {
  DISCONNECT_OPTIONS[1].value = isThreshold ? value : 3600000; // 1h

  return (
-    <HorizontalGroup>
+    <Stack>
      <RadioButtonGroup value={value} options={DISCONNECT_OPTIONS} onChange={onChange} />
      {isThreshold && (
        <NullsThresholdInput
@@ -31,6 +31,6 @@ export const InsertNullsEditor = ({ value, onChange, item }: Props) => {
          isTime={item.settings?.isTime ?? false}
        />
      )}
-    </HorizontalGroup>
+    </Stack>
  );
 };
@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { StandardEditorProps, SelectableValue } from '@grafana/data';
 import { t } from '@grafana/i18n';
 import { LineStyle } from '@grafana/schema';
-import { HorizontalGroup, IconButton, RadioButtonGroup, Select } from '@grafana/ui';
+import { IconButton, RadioButtonGroup, Select, Stack } from '@grafana/ui';

 type LineFill = 'solid' | 'dash' | 'dot';

@@ -72,7 +72,7 @@ export const LineStyleEditor = ({ value, onChange }: Props) => {
  }, [value, options]);

  return (
-    <HorizontalGroup>
+    <Stack wrap={true} alignItems="flex-end">
      <RadioButtonGroup
        value={value?.fill || 'solid'}
        options={lineFillOptions}
@@ -121,7 +121,7 @@ export const LineStyleEditor = ({ value, onChange }: Props) => {
          </div>
        </>
      )}
-    </HorizontalGroup>
+    </Stack>
  );
 };

@@ -1,6 +1,6 @@
 import { StandardEditorProps, SelectableValue } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { HorizontalGroup, RadioButtonGroup } from '@grafana/ui';
+import { Stack, RadioButtonGroup } from '@grafana/ui';

 import { InputPrefix, NullsThresholdInput } from './NullsThresholdInput';

@@ -25,7 +25,7 @@ export const SpanNullsEditor = ({ value, onChange, item }: Props) => {
  GAPS_OPTIONS[2].value = isThreshold ? value : 3600000; // 1h

  return (
-    <HorizontalGroup>
+    <Stack wrap={true}>
      <RadioButtonGroup value={value} options={GAPS_OPTIONS} onChange={onChange} />
      {isThreshold && (
        <NullsThresholdInput
@@ -35,6 +35,6 @@ export const SpanNullsEditor = ({ value, onChange, item }: Props) => {
          isTime={item.settings?.isTime ?? false}
        />
      )}
-    </HorizontalGroup>
+    </Stack>
  );
 };
@@ -3,7 +3,7 @@ import * as React from 'react';

 import { GrafanaTheme2, dateTimeFormat, systemDateFormats, textUtil } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { HorizontalGroup, IconButton, Tag, usePanelContext, useStyles2 } from '@grafana/ui';
+import { Stack, IconButton, Tag, usePanelContext, useStyles2 } from '@grafana/ui';
 import alertDef from 'app/features/alerting/state/alertDef';

 interface Props {
@@ -65,7 +65,7 @@ export const AnnotationTooltip2 = ({ annoVals, annoIdx, timeZone, onEdit }: Prop
  return (
    <div className={styles.wrapper}>
      <div className={styles.header}>
-        <HorizontalGroup justify={'space-between'} align={'center'} spacing={'md'}>
+        <Stack gap={2} basis="100%" justifyContent="space-between" alignItems="center">
          <div className={styles.meta}>
            <span>
              {avatar}
@@ -93,18 +93,18 @@ export const AnnotationTooltip2 = ({ annoVals, annoIdx, timeZone, onEdit }: Prop
              )}
            </div>
          )}
-        </HorizontalGroup>
+        </Stack>
      </div>

      <div className={styles.body}>
        {text && <div className={styles.text} dangerouslySetInnerHTML={{ __html: textUtil.sanitize(text) }} />}
        {alertText}
        <div>
-          <HorizontalGroup spacing="xs" wrap>
+          <Stack gap={0.5} wrap={true}>
            {annoVals.tags?.[annoIdx]?.map((t: string, i: number) => (
              <Tag name={t} key={`${t}-${i}`} />
            ))}
-          </HorizontalGroup>
+          </Stack>
        </div>
      </div>
    </div>
@@ -131,13 +131,11 @@ const getStyles = (theme: GrafanaTheme2) => ({
  }),
  meta: css({
    display: 'flex',
-    justifyContent: 'space-between',
    color: theme.colors.text.primary,
    fontWeight: 400,
  }),
  editControls: css({
    display: 'flex',
-    alignItems: 'center',
    '> :last-child': {
      marginLeft: 0,
    },