From df33310530a19963db0a8ec8d8e276a10c6fa0de Mon Sep 17 00:00:00 2001
From: Andrew Hackmann <5140848+bossinc@users.noreply.github.com>
Date: Wed, 18 Jun 2025 11:16:21 -0500
Subject: [PATCH] Partner data sources: Remove horizontal groups (#106868)

* remove horizontal groups:

* remove space
---
 .betterer.results                                 | 15 ---------------
 .../components/query-editor-raw/QueryToolbox.tsx  |  6 +++---
 .../MetricsQueryEditor/DimensionFields.tsx        |  6 +++---
 .../components/TracesQueryEditor/Filter.tsx       | 14 +++-----------
 .../cloud-monitoring/components/GraphPeriod.tsx   |  6 +++---
 .../cloud-monitoring/components/LabelFilter.tsx   |  6 +++---
 6 files changed, 15 insertions(+), 38 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index ff36ae089fe..ecafb626dd9 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -572,9 +572,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.", "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"]
     ],
-    "packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "packages/grafana-sql/src/components/visual-query-builder/Preview.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"]
     ],
@@ -3172,9 +3169,6 @@ exports[`better eslint`] = {
     "public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/index.tsx:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./LogsQueryEditor\`)", "0"]
     ],
-    "public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.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/datasource/azuremonitor/components/QueryEditor/QueryEditor.test.tsx:5381": [
       [0, 0, 0, "* import is invalid because \'Layout,HorizontalGroup,VerticalGroup\' from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
@@ -3190,9 +3184,6 @@ exports[`better eslint`] = {
     "public/app/plugins/datasource/azuremonitor/components/ResourcePicker/index.tsx:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./ResourcePicker\`)", "0"]
     ],
-    "public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.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/datasource/azuremonitor/components/TracesQueryEditor/Filters.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"]
     ],
@@ -3244,12 +3235,6 @@ exports[`better eslint`] = {
     "public/app/plugins/datasource/cloud-monitoring/components/Fields.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/plugins/datasource/cloud-monitoring/components/GraphPeriod.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/datasource/cloud-monitoring/components/LabelFilter.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/datasource/cloud-monitoring/components/VariableQueryEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
diff --git a/packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx b/packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx
index 678e7b0cec4..34c3e69477b 100644
--- a/packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx
+++ b/packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx
@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react';
 
 import { t } from '@grafana/i18n';
 import { reportInteraction } from '@grafana/runtime';
-import { HorizontalGroup, Icon, IconButton, Tooltip, useTheme2 } from '@grafana/ui';
+import { Stack, Icon, IconButton, Tooltip, useTheme2 } from '@grafana/ui';
 
 import { QueryValidator, QueryValidatorProps } from './QueryValidator';
 
@@ -70,7 +70,7 @@ export function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ..
       </div>
       {showTools && (
         <div>
-          <HorizontalGroup spacing="sm">
+          <Stack gap={1}>
             {onFormatCode && (
               <IconButton
                 onClick={() => {
@@ -111,7 +111,7 @@ export function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ..
             >
               <Icon className={styles.hint} name="keyboard" />
             </Tooltip>
-          </HorizontalGroup>
+          </Stack>
         </div>
       )}
     </div>
diff --git a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.tsx b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.tsx
index f886b50d653..e4756276aab 100644
--- a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.tsx
@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { SelectableValue, DataFrame, PanelData, Labels } from '@grafana/data';
 import { t } from '@grafana/i18n';
 import { EditorList, AccessoryButton } from '@grafana/plugin-ui';
-import { Select, HorizontalGroup, MultiSelect } from '@grafana/ui';
+import { Select, Stack, MultiSelect } from '@grafana/ui';
 
 import { AzureMetricDimension, AzureMonitorOption, AzureMonitorQuery, AzureQueryEditorFieldProps } from '../../types';
 import { Field } from '../shared/Field';
@@ -148,7 +148,7 @@ const DimensionFields = ({ data, query, dimensionOptions, onQueryChange }: Dimen
     onDelete: () => void
   ) => {
     return (
-      <HorizontalGroup spacing="none">
+      <Stack gap={0}>
         <Select
           menuShouldPortal
           placeholder={t('components.dimension-fields.placeholder-field', 'Field')}
@@ -200,7 +200,7 @@ const DimensionFields = ({ data, query, dimensionOptions, onQueryChange }: Dimen
           onClick={onDelete}
           type="button"
         />
-      </HorizontalGroup>
+      </Stack>
     );
   };
 
diff --git a/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx b/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx
index 831de50f456..c6b03769683 100644
--- a/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx
@@ -7,15 +7,7 @@ import { CoreApp, DataFrame, getDefaultTimeRange, SelectableValue, TimeRange } f
 import { selectors } from '@grafana/e2e-selectors';
 import { t } from '@grafana/i18n';
 import { AccessoryButton } from '@grafana/plugin-ui';
-import {
-  HorizontalGroup,
-  Select,
-  ButtonSelect,
-  AsyncMultiSelect,
-  getSelectStyles,
-  useTheme2,
-  Checkbox,
-} from '@grafana/ui';
+import { Select, ButtonSelect, AsyncMultiSelect, getSelectStyles, useTheme2, Checkbox, Stack } from '@grafana/ui';
 
 import { AzureMonitorQuery, AzureQueryType, AzureTracesFilter } from '../../dataquery.gen';
 import Datasource from '../../datasource';
@@ -238,7 +230,7 @@ const Filter = (
   };
 
   return (
-    <HorizontalGroup spacing="none">
+    <Stack gap={0}>
       <Select
         menuShouldPortal
         placeholder={t('components.filter.placeholder-property', 'Property')}
@@ -288,7 +280,7 @@ const Filter = (
         onClick={onDelete}
         type="button"
       />
-    </HorizontalGroup>
+    </Stack>
   );
 };
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx b/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx
index 9e6c7aed0c3..69801b0c976 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx
@@ -1,6 +1,6 @@
 import { SelectableValue } from '@grafana/data';
 import { EditorField, EditorRow } from '@grafana/plugin-ui';
-import { HorizontalGroup, Switch } from '@grafana/ui';
+import { Stack, Switch } from '@grafana/ui';
 
 import { GRAPH_PERIODS } from '../constants';
 
@@ -26,7 +26,7 @@ export const GraphPeriod = ({ refId, onChange, graphPeriod, variableOptionGroup
           </>
         }
       >
-        <HorizontalGroup>
+        <Stack gap={1}>
           <Switch
             data-testid={`${refId}-switch-graph-period`}
             value={graphPeriod !== 'disabled'}
@@ -40,7 +40,7 @@ export const GraphPeriod = ({ refId, onChange, graphPeriod, variableOptionGroup
             disabled={graphPeriod === 'disabled'}
             aligmentPeriods={GRAPH_PERIODS}
           />
-        </HorizontalGroup>
+        </Stack>
       </EditorField>
     </EditorRow>
   );
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx b/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
index dca57374c91..0a5f0e8b885 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
 import { AccessoryButton, EditorField, EditorList, EditorRow } from '@grafana/plugin-ui';
-import { HorizontalGroup, Select } from '@grafana/ui';
+import { Select, Stack } from '@grafana/ui';
 
 import { labelsToGroupedOptions, stringArrayToFilters } from '../functions';
 
@@ -80,7 +80,7 @@ export const LabelFilter = ({ labels = {}, filters: filterArray, onChange: _onCh
     const { options, valueOptions } = getOptions(item);
 
     return (
-      <HorizontalGroup spacing="xs" width="auto">
+      <Stack gap={1} width="auto">
         <Select
           aria-label="Filter label key"
           formatCreateLabel={(v) => `Use label key: ${v}`}
@@ -104,7 +104,7 @@ export const LabelFilter = ({ labels = {}, filters: filterArray, onChange: _onCh
           onChange={({ value = '' }) => onChangeItem({ key, operator, value, condition })}
         />
         <AccessoryButton aria-label="Remove" icon="times" variant="secondary" onClick={onDeleteItem} type="button" />
-      </HorizontalGroup>
+      </Stack>
     );
   };