Chore: Remove Deprecated layout components (#109872)

.betterer.results

@@ -1965,8 +1965,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.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.", "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.", "0"]
     ],
     "public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.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"],
@@ -1974,8 +1973,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "2"]
     ],
     "public/app/features/dashboard/components/PanelEditor/PanelEditor.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, "Do not use any type assertions.", "1"]
+      [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.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"],
@@ -2280,9 +2278,6 @@ 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.", "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"]
     ],
-    "public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.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/features/dimensions/scale.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
@@ -2792,9 +2787,6 @@ exports[`better eslint`] = {
     "public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/features/transformers/editors/EnumMappingRow.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/features/transformers/editors/GroupByTransformerEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
@@ -3872,8 +3864,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.", "0"]
     ],
     "public/app/plugins/panel/table/table-new/cells/SparklineCellOptionsEditor.tsx:5381": [
-      [0, 0, 0, "\'VerticalGroup\' 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.", "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.", "0"]
     ],
     "public/app/plugins/panel/table/table-new/cells/TextWrapOptionsEditor.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"]

public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx

@@ -10,7 +10,7 @@ import {
   GrafanaTheme2,
 } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { Counter, Field, HorizontalGroup, IconButton, Label, useStyles2 } from '@grafana/ui';
+import { Counter, Field, Stack, IconButton, Label, useStyles2 } from '@grafana/ui';
 
 import { OptionsPaneCategory } from './OptionsPaneCategory';
 
@@ -56,7 +56,7 @@ export const DynamicConfigValueEditor = ({
   const renderLabel =
     (includeDescription = true, includeCounter = false) =>
     (isExpanded = false) => (
-      <HorizontalGroup justify="space-between">
+      <Stack justifyContent="space-between">
         <Label
           category={labelCategory}
           description={includeDescription ? item.description : undefined}
@@ -83,7 +83,7 @@ export const DynamicConfigValueEditor = ({
             />
           </div>
         )}
-      </HorizontalGroup>
+      </Stack>
     );
   /* eslint-enable react/display-name */
 

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -10,7 +10,6 @@ import { Trans, t } from '@grafana/i18n';
 import { locationService } from '@grafana/runtime';
 import {
   Button,
-  HorizontalGroup,
   InlineSwitch,
   ModalsController,
   RadioButtonGroup,
@@ -302,7 +301,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
 
     return (
       <div className={styles.panelToolbar}>
-        <HorizontalGroup justify={variables.length > 0 ? 'space-between' : 'flex-end'} align="flex-start">
+        <Stack justifyContent={variables.length > 0 ? 'space-between' : 'flex-end'} alignItems="flex-start">
           {this.renderTemplateVariables(styles)}
           <Stack gap={1}>
             <InlineSwitch
@@ -317,7 +316,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
             <DashNavTimeControls dashboard={dashboard} onChangeTimeZone={updateTimeZoneForSession} isOnCanvas={true} />
             {!uiState.isPanelOptionsVisible && <VisualizationButton panel={panel} />}
           </Stack>
-        </HorizontalGroup>
+        </Stack>
       </div>
     );
   }

public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 
 import { GrafanaTheme2, MappingType, SpecialValueMatch, SelectableValue, ValueMappingResult } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
-import { useStyles2, Icon, Select, HorizontalGroup, ColorPicker, IconButton, Input, Button } from '@grafana/ui';
+import { useStyles2, Icon, Select, ColorPicker, IconButton, Input, Button, Stack } from '@grafana/ui';
 
 import { ResourcePickerSize, ResourceFolderName, MediaType } from '../../types';
 import { ResourcePicker } from '../ResourcePicker';
@@ -246,7 +246,7 @@ export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDupl
           </td>
           <td className={styles.textAlignCenter}>
             {result.color && (
-              <HorizontalGroup spacing="sm" justify="center">
+              <Stack gap={1} justifyContent="center">
                 <ColorPicker color={result.color} onChange={onChangeColor} enableNamedColors={true} />
                 <IconButton
                   name="times"
@@ -254,7 +254,7 @@ export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDupl
                   tooltip={t('dimensions.value-mapping-edit-row.tooltip-remove-color', 'Remove color')}
                   tooltipPlacement="top"
                 />
-              </HorizontalGroup>
+              </Stack>
             )}
             {!result.color && (
               <ColorPicker color={'gray'} onChange={onChangeColor} enableNamedColors={true}>
@@ -268,7 +268,7 @@ export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDupl
           </td>
           {showIconPicker && (
             <td className={styles.textAlignCenter}>
-              <HorizontalGroup spacing="sm" justify="center">
+              <Stack gap={1} justifyContent="center">
                 <ResourcePicker
                   onChange={onChangeIcon}
                   onClear={onClearIcon}
@@ -286,11 +286,11 @@ export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDupl
                     tooltipPlacement="top"
                   />
                 )}
-              </HorizontalGroup>
+              </Stack>
             </td>
           )}
           <td className={styles.textAlignCenter}>
-            <HorizontalGroup spacing="sm">
+            <Stack gap={1}>
               <IconButton
                 name="copy"
                 onClick={() => onDuplicate(index)}
@@ -311,7 +311,7 @@ export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDupl
                 )}
                 tooltip={t('dimensions.value-mapping-edit-row.remove-value-mapping-tooltip-delete', 'Delete')}
               />
-            </HorizontalGroup>
+            </Stack>
           </td>
         </tr>
       )}

public/app/features/transformers/editors/EnumMappingRow.tsx

@@ -4,7 +4,7 @@ import { FormEvent, useState, KeyboardEvent, useRef, useEffect } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { Icon, Input, IconButton, HorizontalGroup, FieldValidationMessage, useStyles2 } from '@grafana/ui';
+import { Icon, Input, IconButton, FieldValidationMessage, useStyles2, Stack } from '@grafana/ui';
 
 type EnumMappingRowProps = {
   transformIndex: number;
@@ -112,7 +112,7 @@ const EnumMappingRow = ({
             </td>
           )}
           <td className={styles.textAlignCenter}>
-            <HorizontalGroup spacing="sm">
+            <Stack gap={1}>
               <IconButton
                 name="trash-alt"
                 onClick={onRemoveButtonClick}
@@ -123,7 +123,7 @@ const EnumMappingRow = ({
                 )}
                 tooltip={t('transformers.enum-mapping-row.remove-enum-row-tooltip-delete', 'Delete')}
               />
-            </HorizontalGroup>
+            </Stack>
           </td>
         </tr>
       )}

public/app/plugins/panel/table/table-new/cells/SparklineCellOptionsEditor.tsx

@@ -3,7 +3,7 @@ import { useId, useMemo } from 'react';
 
 import { createFieldConfigRegistry, SetFieldConfigOptionsArgs } from '@grafana/data';
 import { GraphFieldConfig, TableSparklineCellOptions } from '@grafana/schema';
-import { VerticalGroup, Field, useStyles2 } from '@grafana/ui';
+import { Field, useStyles2, Stack } from '@grafana/ui';
 import { defaultSparklineCellConfig } from '@grafana/ui/internal';
 
 import { getGraphFieldConfig } from '../../../timeseries/config';
@@ -54,7 +54,7 @@ export const SparklineCellOptionsEditor = (props: TableCellEditorProps<TableSpar
   const htmlIdBase = useId();
 
   return (
-    <VerticalGroup>
+    <Stack direction="column">
       {registry.list(optionIds.map((id) => `custom.${id}`)).map((item) => {
         if (item.showIf && !item.showIf(values)) {
           return null;
@@ -74,7 +74,7 @@ export const SparklineCellOptionsEditor = (props: TableCellEditorProps<TableSpar
           </Field>
         );
       })}
-    </VerticalGroup>
+    </Stack>
   );
 };