Transformations: Make transform dropdowns not cropped (#24615)

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}
       />
     );
   }

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

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>

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>

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>
   );

public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx

@@ -65,14 +65,21 @@ export class TransformationsEditor extends React.PureComponent<Props> {
     });
 
     return (
-      <ValuePicker
+      <div
-        size="md"
+        className={css`
-        variant="secondary"
+          max-width: 66%;
-        label="Add transformation"
+        `}
-        options={availableTransformers}
+      >
-        onChange={this.onTransformationAdd}
+        <ValuePicker
-        isFullWidth={false}
+          size="md"
-      />
+          variant="secondary"
+          label="Add transformation"
+          options={availableTransformers}
+          onChange={this.onTransformationAdd}
+          isFullWidth={false}
+          menuPlacement="bottom"
+        />
+      </div>
     );
   };