From 9e24c0944f9dcd8a41e4d17900329b3c25bb2374 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 13 May 2020 13:01:10 +0200
Subject: [PATCH] Transformations: Make transform dropdowns not cropped
 (#24615)

---
 .../components/StatsPicker/StatsPicker.tsx    |  4 +++-
 .../components/ValuePicker/ValuePicker.tsx    |  3 +++
 .../CalculateFieldTransformerEditor.tsx       |  5 ++++
 .../ReduceTransformerEditor.tsx               |  1 +
 .../SeriesToFieldsTransformerEditor.tsx       |  8 ++++++-
 .../TransformationsEditor.tsx                 | 23 ++++++++++++-------
 6 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/components/StatsPicker/StatsPicker.tsx b/packages/grafana-ui/src/components/StatsPicker/StatsPicker.tsx
index 76dc3d7f21a..848b3bf343d 100644
--- a/packages/grafana-ui/src/components/StatsPicker/StatsPicker.tsx
+++ b/packages/grafana-ui/src/components/StatsPicker/StatsPicker.tsx
@@ -14,6 +14,7 @@ interface Props {
   allowMultiple?: boolean;
   defaultStat?: string;
   className?: string;
+  menuPlacement?: 'auto' | 'bottom' | 'top';
 }
 
 export class StatsPicker extends PureComponent<Props> {
@@ -62,7 +63,7 @@ export class StatsPicker extends PureComponent<Props> {
   };
 
   render() {
-    const { stats, allowMultiple, defaultStat, placeholder, className } = this.props;
+    const { stats, allowMultiple, defaultStat, placeholder, className, menuPlacement } = this.props;
 
     const select = fieldReducers.selectOptions(stats);
     return (
@@ -75,6 +76,7 @@ export class StatsPicker extends PureComponent<Props> {
         options={select.options}
         placeholder={placeholder}
         onChange={this.onSelectionChange}
+        menuPlacement={menuPlacement}
       />
     );
   }
diff --git a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx
index 70dceef52bc..fcc29638e02 100644
--- a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx
+++ b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx
@@ -17,6 +17,7 @@ interface ValuePickerProps<T> {
   variant?: ButtonVariant;
   size?: ComponentSize;
   isFullWidth?: boolean;
+  menuPlacement?: 'auto' | 'bottom' | 'top';
 }
 
 export function ValuePicker<T>({
@@ -27,6 +28,7 @@ export function ValuePicker<T>({
   variant,
   size = 'sm',
   isFullWidth = true,
+  menuPlacement,
 }: ValuePickerProps<T>) {
   const [isPicking, setIsPicking] = useState(false);
 
@@ -50,6 +52,7 @@ export function ValuePicker<T>({
             setIsPicking(false);
             onChange(value);
           }}
+          menuPlacement={menuPlacement}
         />
       )}
     </>
diff --git a/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx b/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx
index 18d1dd22ce7..c1c8ef52f5b 100644
--- a/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx
@@ -201,6 +201,7 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
               stats={[options.reducer]}
               onChange={this.onStatsChange}
               defaultStat={ReducerID.sum}
+              menuPlacement="bottom"
             />
           </div>
         </div>
@@ -279,12 +280,14 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
             className="min-width-18 gf-form-spacing"
             value={options?.left}
             onChange={this.onBinaryLeftChanged}
+            menuPlacement="bottom"
           />
           <Select
             className="width-8 gf-form-spacing"
             options={ops}
             value={options.operator ?? ops[0].value}
             onChange={this.onBinaryOperationChanged}
+            menuPlacement="bottom"
           />
           <Select
             allowCustomValue
@@ -293,6 +296,7 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
             options={rightNames}
             value={options?.right}
             onChange={this.onBinaryRightChanged}
+            menuPlacement="bottom"
           />
         </div>
       </div>
@@ -318,6 +322,7 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
               options={calculationModes}
               value={calculationModes.find(v => v.value === mode)}
               onChange={this.onModeChanged}
+              menuPlacement="bottom"
             />
           </div>
         </div>
diff --git a/public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx b/public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx
index 86110b1e9bf..964f5b3653f 100644
--- a/public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx
@@ -30,6 +30,7 @@ export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransfor
               reducers: stats as ReducerID[],
             });
           }}
+          menuPlacement="bottom"
         />
       </div>
     </div>
diff --git a/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx b/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx
index bf07c3ebeb2..04b4f7c060e 100644
--- a/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx
@@ -33,7 +33,13 @@ export const SeriesToFieldsTransformerEditor: React.FC<TransformerUIProps<Series
     <div className="gf-form-inline">
       <div className="gf-form gf-form--grow">
         <div className="gf-form-label width-8">Field name</div>
-        <Select options={fieldNameOptions} value={options.byField} onChange={onSelectField} isClearable />
+        <Select
+          options={fieldNameOptions}
+          value={options.byField}
+          onChange={onSelectField}
+          isClearable
+          menuPlacement="bottom"
+        />
       </div>
     </div>
   );
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
index cf7aa2417db..8efc500745d 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
@@ -65,14 +65,21 @@ export class TransformationsEditor extends React.PureComponent<Props> {
     });
 
     return (
-      <ValuePicker
-        size="md"
-        variant="secondary"
-        label="Add transformation"
-        options={availableTransformers}
-        onChange={this.onTransformationAdd}
-        isFullWidth={false}
-      />
+      <div
+        className={css`
+          max-width: 66%;
+        `}
+      >
+        <ValuePicker
+          size="md"
+          variant="secondary"
+          label="Add transformation"
+          options={availableTransformers}
+          onChange={this.onTransformationAdd}
+          isFullWidth={false}
+          menuPlacement="bottom"
+        />
+      </div>
     );
   };