Chore: Remove deprecated VerticalGroup (#109559)

.betterer.results

@@ -2076,8 +2076,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/features/dashboard/components/TransformationsEditor/TransformationPicker.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 Card 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 Card 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/dashboard/components/TransformationsEditor/TransformationsEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
@@ -2299,9 +2298,6 @@ exports[`better eslint`] = {
     "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/editors/ValueMappingsEditor/ValueMappingsEditor.tsx:5381": [
-      [0, 0, 0, "\'VerticalGroup\' 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"]
     ],
@@ -2827,10 +2823,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/EnumMappingEditor.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, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
-    ],
     "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"]
     ],
@@ -3747,9 +3739,6 @@ exports[`better eslint`] = {
     "public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/plugins/panel/geomap/editor/MapViewEditor.tsx:5381": [
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "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.", "1"],
@@ -3903,8 +3892,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.", "1"]
     ],
     "public/app/plugins/panel/table/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.", "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/plugins/panel/table/migrations.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],

public/app/features/dashboard/components/TransformationsEditor/TransformationPicker.tsx

@@ -4,7 +4,7 @@ import { FormEventHandler, KeyboardEventHandler, ReactNode } from 'react';
 import { DocsId, GrafanaTheme2, LocalStorageValueProvider, TransformerRegistryItem } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
-import { Card, Container, VerticalGroup, Alert, Input, useStyles2 } from '@grafana/ui';
+import { Card, Container, Alert, Input, useStyles2, Stack } from '@grafana/ui';
 import { getDocsLink } from 'app/core/utils/docsLinks';
 import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo';
 
@@ -24,7 +24,7 @@ export function TransformationPicker(props: TransformationPickerProps) {
   const { noTransforms, search, xforms, onSearchChange, onSearchKeyDown, onTransformationAdd, suffix } = props;
 
   return (
-    <VerticalGroup>
+    <Stack direction="column">
       {noTransforms && (
         <Container grow={1}>
           <LocalStorageValueProvider<boolean> storageKey={LOCAL_STORAGE_KEY} defaultValue={false}>
@@ -94,7 +94,7 @@ export function TransformationPicker(props: TransformationPickerProps) {
           />
         );
       })}
-    </VerticalGroup>
+    </Stack>
   );
 }
 

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

@@ -3,7 +3,7 @@ import { memo, useCallback, useMemo, useState } from 'react';
 
 import { GrafanaTheme2, MappingType, StandardEditorProps, ValueMapping } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
-import { useStyles2, VerticalGroup, Icon, ColorPicker, Button, Modal } from '@grafana/ui';
+import { useStyles2, Stack, Icon, ColorPicker, Button, Modal } from '@grafana/ui';
 
 import { MediaType, ResourceFolderName, ResourcePickerSize } from '../../types';
 import { ResourcePicker } from '../ResourcePicker';
@@ -43,7 +43,7 @@ export const ValueMappingsEditor = memo((props: Props) => {
   );
 
   return (
-    <VerticalGroup>
+    <Stack direction="column">
       <table className={styles.compactTable}>
         <tbody>
           {rows.map((row, rowIndex) => (
@@ -114,7 +114,7 @@ export const ValueMappingsEditor = memo((props: Props) => {
           showIconPicker={showIconPicker}
         />
       </Modal>
-    </VerticalGroup>
+    </Stack>
   );
 });
 

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

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 import { DataFrame, EnumFieldConfig, GrafanaTheme2 } from '@grafana/data';
 import { ConvertFieldTypeTransformerOptions } from '@grafana/data/internal';
 import { Trans } from '@grafana/i18n';
-import { Button, HorizontalGroup, InlineFieldRow, useStyles2, VerticalGroup } from '@grafana/ui';
+import { Button, Stack, useStyles2 } from '@grafana/ui';
 
 import EnumMappingRow from './EnumMappingRow';
 
@@ -119,8 +119,8 @@ export const EnumMappingEditor = ({ input, options, transformIndex, onChange }:
   };
 
   return (
-    <InlineFieldRow>
+    <Stack direction="column" rowGap={0.5}>
-      <HorizontalGroup>
+      <Stack>
         <Button size="sm" icon="plus" onClick={() => generateEnumValues()} className={styles.button}>
           <Trans i18nKey="transformers.enum-mapping-editor.generate-enum-values-from-data">
             Generate enum values from data
@@ -129,9 +129,8 @@ export const EnumMappingEditor = ({ input, options, transformIndex, onChange }:
         <Button size="sm" icon="plus" onClick={() => onAddEnumRow()} className={styles.button}>
           <Trans i18nKey="transformers.enum-mapping-editor.add-enum-value">Add enum value</Trans>
         </Button>
-      </HorizontalGroup>
+      </Stack>
-
+      <Stack>
-      <VerticalGroup>
         <table className={styles.compactTable}>
           <DragDropContext onDragEnd={onDragEnd}>
             <Droppable droppableId="sortable-enum-config-mappings" direction="vertical">
@@ -159,8 +158,8 @@ export const EnumMappingEditor = ({ input, options, transformIndex, onChange }:
             </Droppable>
           </DragDropContext>
         </table>
-      </VerticalGroup>
+      </Stack>
-    </InlineFieldRow>
+    </Stack>
   );
 };
 

public/app/plugins/panel/geomap/editor/MapViewEditor.tsx

@@ -3,7 +3,7 @@ import { useMemo, useCallback } from 'react';
 
 import { StandardEditorProps, SelectableValue } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
-import { Button, InlineField, InlineFieldRow, Select, VerticalGroup } from '@grafana/ui';
+import { Button, InlineField, InlineFieldRow, Select, Stack } from '@grafana/ui';
 import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
 
 import { Options, MapViewConfig, GeomapInstanceState } from '../types';
@@ -99,13 +99,13 @@ export const MapViewEditor = ({
         </InlineField>
       </InlineFieldRow>
 
-      <VerticalGroup>
+      <Stack direction="column">
         <Button variant="secondary" size="sm" fullWidth onClick={onSetCurrentView}>
           <span>
             <Trans i18nKey="geomap.map-view-editor.use-current-map-settings">Use current map settings</Trans>
           </span>
         </Button>
-      </VerticalGroup>
+      </Stack>
     </>
   );
 };

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

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