From b27af4186c53c20e782451d2c065e72cf7720ac1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Tue, 19 Aug 2025 14:07:21 +0200
Subject: [PATCH] Chore: Remove deprecated `VerticalGroup` in Dashboards area
 (#109675)

---
 .betterer.results                             | 25 +++----------------
 .../DashboardLoading/DashboardLoading.tsx     | 14 +++++------
 .../DashboardSettings/VersionsSettings.tsx    |  6 ++---
 .../features/inspector/InspectDataOptions.tsx | 10 ++++----
 .../LibraryPanelsSearch.tsx                   |  8 +++---
 .../PanelLibraryOptionsGroup.tsx              | 10 ++++----
 .../inspect/VariablesUnknownTable.tsx         | 10 ++++----
 7 files changed, 32 insertions(+), 51 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index bc2288aa5a5..292ea5f3c71 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1915,10 +1915,6 @@ exports[`better eslint`] = {
     "public/app/features/dashboard/components/DashNav/index.ts:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`DashNav\`)", "0"]
     ],
-    "public/app/features/dashboard/components/DashboardLoading/DashboardLoading.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/dashboard/components/DashboardPrompt/DashboardPrompt.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
@@ -1957,9 +1953,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.", "3"],
       [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.", "4"]
     ],
-    "public/app/features/dashboard/components/DashboardSettings/VersionsSettings.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/dashboard/components/DashboardSettings/index.ts:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./DashboardSettings\`)", "0"]
     ],
@@ -2400,13 +2393,11 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "public/app/features/inspector/InspectDataOptions.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"],
+      [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"],
-      [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.", "4"],
-      [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.", "5"],
-      [0, 0, 0, "Do not use any type assertions.", "6"]
+      [0, 0, 0, "Do not use any type assertions.", "4"]
     ],
     "public/app/features/inspector/InspectDataTab.tsx:5381": [
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
@@ -2432,12 +2423,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/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.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/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.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/live/centrifuge/LiveDataStream.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
@@ -2892,10 +2877,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "public/app/features/variables/inspect/VariablesUnknownTable.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/variables/inspect/utils.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
diff --git a/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx b/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx
index f5e279e5af1..9b116514802 100644
--- a/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx
+++ b/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx
@@ -3,7 +3,7 @@ import { css, keyframes } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 import { Trans } from '@grafana/i18n';
 import { locationService } from '@grafana/runtime';
-import { Button, HorizontalGroup, Spinner, useStyles2, VerticalGroup } from '@grafana/ui';
+import { Button, Spinner, Stack, useStyles2 } from '@grafana/ui';
 import { DashboardInitPhase } from 'app/types/dashboard';
 
 export interface Props {
@@ -19,16 +19,16 @@ export const DashboardLoading = ({ initPhase }: Props) => {
   return (
     <div className={styles.dashboardLoading}>
       <div className={styles.dashboardLoadingText}>
-        <VerticalGroup spacing="md">
-          <HorizontalGroup align="center" justify="center" spacing="xs">
+        <Stack direction="column" gap={2}>
+          <Stack alignItems="center" justifyContent="center" gap={0.5}>
             <Spinner inline={true} /> {initPhase}
-          </HorizontalGroup>{' '}
-          <HorizontalGroup align="center" justify="center">
+          </Stack>{' '}
+          <Stack alignItems="center" justifyContent="center">
             <Button variant="secondary" size="md" icon="repeat" onClick={cancelVariables}>
               <Trans i18nKey="dashboard.dashboard-loading.cancel-loading-dashboard">Cancel loading dashboard</Trans>
             </Button>
-          </HorizontalGroup>
-        </VerticalGroup>
+          </Stack>
+        </Stack>
       </div>
     </div>
   );
diff --git a/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx
index 9c20ba24802..d5360e36663 100644
--- a/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx
@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import * as React from 'react';
 
-import { Spinner, HorizontalGroup } from '@grafana/ui';
+import { Spinner, Stack } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { historySrv, RevisionsModel } from 'app/features/dashboard-scene/settings/version-history/HistorySrv';
 import { VersionsHistoryButtons } from 'app/features/dashboard-scene/settings/version-history/VersionHistoryButtons';
@@ -198,8 +198,8 @@ export class VersionsSettings extends PureComponent<Props, State> {
 }
 
 export const VersionsHistorySpinner = ({ msg }: { msg: string }) => (
-  <HorizontalGroup>
+  <Stack>
     <Spinner />
     <em>{msg}</em>
-  </HorizontalGroup>
+  </Stack>
 );
diff --git a/public/app/features/inspector/InspectDataOptions.tsx b/public/app/features/inspector/InspectDataOptions.tsx
index 8e00c9e66b1..cc37517a178 100644
--- a/public/app/features/inspector/InspectDataOptions.tsx
+++ b/public/app/features/inspector/InspectDataOptions.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { DataFrame, DataTransformerID, getFrameDisplayName, SelectableValue } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { Field, HorizontalGroup, Select, Switch, VerticalGroup, useStyles2 } from '@grafana/ui';
+import { Field, Select, Stack, Switch, useStyles2 } from '@grafana/ui';
 import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow';
 import { DetailText } from 'app/features/inspector/DetailText';
 import { GetDataOptions } from 'app/features/query/state/PanelQueryRunner';
@@ -100,7 +100,7 @@ export const InspectDataOptions = ({
         actions={actions}
       >
         <div className={styles.options} data-testid="dataOptions">
-          <VerticalGroup spacing="none">
+          <Stack direction="column" gap={0}>
             {data!.length > 1 && (
               <Field label={t('dashboard.inspect-data.dataframe-label', 'Show data frame')}>
                 <Select
@@ -113,7 +113,7 @@ export const InspectDataOptions = ({
               </Field>
             )}
 
-            <HorizontalGroup>
+            <Stack>
               {hasTransformations && onOptionsChange && (
                 <Field
                   label={t('dashboard.inspect-data.transformations-label', 'Apply panel transformations')}
@@ -155,8 +155,8 @@ export const InspectDataOptions = ({
               >
                 <Switch id="excel-toggle" value={downloadForExcel} onChange={toggleDownloadForExcel} />
               </Field>
-            </HorizontalGroup>
-          </VerticalGroup>
+            </Stack>
+          </Stack>
         </div>
       </QueryOperationRow>
     </div>
diff --git a/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx b/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
index d86f7a55517..151752b2ede 100644
--- a/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
@@ -4,7 +4,7 @@ import { useDebounce } from 'react-use';
 
 import { GrafanaTheme2, PanelPluginMeta, SelectableValue } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { useStyles2, VerticalGroup, FilterInput } from '@grafana/ui';
+import { useStyles2, Stack, FilterInput } from '@grafana/ui';
 import { FolderInfo } from 'app/types/folders';
 
 import { FolderFilter } from '../../../../core/components/FolderFilter/FolderFilter';
@@ -53,11 +53,11 @@ export const LibraryPanelsSearch = ({
   const [panelFilter, setPanelFilter] = useState<string[]>([]);
 
   const sortOrFiltersVisible = showSort || showPanelFilter || showFolderFilter;
-  const verticalGroupSpacing = variant === LibraryPanelsSearchVariant.Tight ? 'lg' : 'xs';
+  const verticalGroupSpacing = variant === LibraryPanelsSearchVariant.Tight ? 3 : 0.5;
 
   return (
     <div className={styles.container}>
-      <VerticalGroup spacing={verticalGroupSpacing}>
+      <Stack direction="column" gap={verticalGroupSpacing}>
         <div
           className={cx(styles.gridContainer, {
             [styles.tightLayout]: variant === LibraryPanelsSearchVariant.Tight,
@@ -101,7 +101,7 @@ export const LibraryPanelsSearch = ({
             perPage={perPage}
           />
         </div>
-      </VerticalGroup>
+      </Stack>
     </div>
   );
 };
diff --git a/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx b/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
index d9dafffe82d..e834553110e 100644
--- a/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
+++ b/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react';
 
 import { PanelPluginMeta } from '@grafana/data';
 import { Trans } from '@grafana/i18n';
-import { Button, VerticalGroup } from '@grafana/ui';
+import { Button, Stack } from '@grafana/ui';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
 import { changeToLibraryPanel } from 'app/features/panel/state/actions';
@@ -45,15 +45,15 @@ export const PanelLibraryOptionsGroup = ({ panel, searchQuery }: Props) => {
   const onAddToPanelLibrary = () => setShowingAddPanelModal(true);
   const onDismissChangeToPanel = () => setChangeToPanel(undefined);
   return (
-    <VerticalGroup spacing="md">
+    <Stack direction="column" gap={2}>
       {!panel.libraryPanel && (
-        <VerticalGroup align="center">
+        <Stack alignItems="center">
           <Button icon="plus" onClick={onAddToPanelLibrary} variant="secondary" fullWidth>
             <Trans i18nKey="library-panels.panel-library-options-group.create-new-library-panel">
               Create new library panel
             </Trans>
           </Button>
-        </VerticalGroup>
+        </Stack>
       )}
 
       <PanelTypeFilter onChange={onPanelFilterChange} />
@@ -80,7 +80,7 @@ export const PanelLibraryOptionsGroup = ({ panel, searchQuery }: Props) => {
       {changeToPanel && (
         <ChangeLibraryPanelModal panel={panel} onDismiss={onDismissChangeToPanel} onConfirm={useLibraryPanel} />
       )}
-    </VerticalGroup>
+    </Stack>
   );
 };
 
diff --git a/public/app/features/variables/inspect/VariablesUnknownTable.tsx b/public/app/features/variables/inspect/VariablesUnknownTable.tsx
index db56bf6c204..800dcc7c7c5 100644
--- a/public/app/features/variables/inspect/VariablesUnknownTable.tsx
+++ b/public/app/features/variables/inspect/VariablesUnknownTable.tsx
@@ -5,7 +5,7 @@ import { useAsync } from 'react-use';
 import { GrafanaTheme2 } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
 import { reportInteraction } from '@grafana/runtime';
-import { CollapsableSection, HorizontalGroup, Icon, Spinner, Tooltip, useStyles2, VerticalGroup } from '@grafana/ui';
+import { CollapsableSection, Icon, Spinner, Stack, Tooltip, useStyles2 } from '@grafana/ui';
 
 import { DashboardModel } from '../../dashboard/state/DashboardModel';
 import { VariableModel } from '../types';
@@ -56,14 +56,14 @@ export function VariablesUnknownTable({ variables, dashboard }: VariablesUnknown
     <div className={style.container}>
       <CollapsableSection label={<CollapseLabel />} isOpen={open} onToggle={onToggle}>
         {loading && (
-          <VerticalGroup justify="center">
-            <HorizontalGroup justify="center">
+          <Stack direction="column" justifyContent="center">
+            <Stack justifyContent="center">
               <span>
                 <Trans i18nKey="variables.variables-unknown-table.loading">Loading...</Trans>
               </span>
               <Spinner />
-            </HorizontalGroup>
-          </VerticalGroup>
+            </Stack>
+          </Stack>
         )}
         {!loading && usages && (
           <>