From 910ce8367acc5433b1a28135148e72f75e492730 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Fri, 18 Apr 2025 11:52:18 -0500
Subject: [PATCH] [release-12.0.1] Transformations: Wrap field names selection,
 prevent rendering off-screen (#104186)

Transformations: Remove deprecated ui element and wrap pills (#104143)

* Remove deprecated ui element and wrap pills

* Fix for labels to fields too

* Update betterer

(cherry picked from commit 57fd67436eca5225073bc419853066ef9400cb33)

Co-authored-by: Kristina <kristina.durivage@grafana.com>
---
 .betterer.results                                         | 3 +--
 .../ReduceRowOptionsEditor.tsx                            | 8 ++++----
 .../editors/LabelsToFieldsTransformerEditor.tsx           | 3 ++-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 976a2137c61..04085bf52f5 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -2801,8 +2801,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "public/app/features/transformers/editors/CalculateFieldTransformerEditor/ReduceRowOptionsEditor.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/transformers/editors/CalculateFieldTransformerEditor/WindowOptionsEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
diff --git a/public/app/features/transformers/editors/CalculateFieldTransformerEditor/ReduceRowOptionsEditor.tsx b/public/app/features/transformers/editors/CalculateFieldTransformerEditor/ReduceRowOptionsEditor.tsx
index 1bf1c21023f..6c5660d8e8d 100644
--- a/public/app/features/transformers/editors/CalculateFieldTransformerEditor/ReduceRowOptionsEditor.tsx
+++ b/public/app/features/transformers/editors/CalculateFieldTransformerEditor/ReduceRowOptionsEditor.tsx
@@ -1,6 +1,6 @@
 import { ReducerID } from '@grafana/data';
 import { CalculateFieldTransformerOptions, ReduceOptions } from '@grafana/data/internal';
-import { FilterPill, HorizontalGroup, InlineField, StatsPicker } from '@grafana/ui';
+import { FilterPill, InlineField, Stack, StatsPicker } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 
 import { LABEL_WIDTH } from './constants';
@@ -48,9 +48,9 @@ export const ReduceRowOptionsEditor = (props: {
       <InlineField
         label={t('transformers.reduce-row-options-editor.label-operation', 'Operation')}
         labelWidth={LABEL_WIDTH}
-        grow={true}
+        shrink={true}
       >
-        <HorizontalGroup spacing="xs" align="flex-start" wrap>
+        <Stack gap={0.5} direction="row" alignItems="flex-start" wrap>
           {names.map((o, i) => {
             return (
               <FilterPill
@@ -63,7 +63,7 @@ export const ReduceRowOptionsEditor = (props: {
               />
             );
           })}
-        </HorizontalGroup>
+        </Stack>
       </InlineField>
       <InlineField
         label={t('transformers.reduce-row-options-editor.label-calculation', 'Calculation')}
diff --git a/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx b/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
index ad276d2cf13..650874a37a6 100644
--- a/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
@@ -85,8 +85,9 @@ export const LabelsAsFieldsTransformerEditor = ({
         <InlineField
           label={t('transformers.labels-as-fields-transformer-editor.label-labels', 'Labels')}
           labelWidth={labelWidth}
+          shrink={true}
         >
-          <Stack gap={1} wrap={'wrap'}>
+          <Stack gap={0.5} wrap={'wrap'}>
             {labelNames.map((o, i) => {
               const label = o.label!;
               return (