[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 57fd67436e)

Co-authored-by: Kristina <kristina.durivage@grafana.com>

.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.", "0"]
-      [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
     "public/app/features/transformers/editors/CalculateFieldTransformerEditor/WindowOptionsEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]

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')}

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 (