Select: Changes default menu placement for Select from auto to bottom (#29837)

* Select: Changes default menuPlacement from auto to bottom

* Tests: Fixes snapshot

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -116,7 +116,7 @@ export function SelectBase<T>({
   maxMenuHeight = 300,
   minMenuHeight,
   maxVisibleValues,
-  menuPlacement = 'auto',
+  menuPlacement = 'bottom',
   menuPosition,
   noOptionsMessage = 'No options found',
   onBlur,

public/app/core/components/Select/DataSourcePicker.tsx

@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 
 // Components
 import { HorizontalGroup, Select } from '@grafana/ui';
-import { SelectableValue, DataSourceInstanceSettings } from '@grafana/data';
+import { DataSourceInstanceSettings, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { isUnsignedPluginSignature, PluginSignatureBadge } from '../../../features/plugins/PluginSignatureBadge';
 import { getDataSourceSrv } from '@grafana/runtime';
@@ -130,7 +130,6 @@ export class DataSourcePicker extends PureComponent<Props, State> {
           onBlur={onBlur}
           openMenuOnFocus={openMenuOnFocus}
           maxMenuHeight={500}
-          menuPlacement="bottom"
           placeholder={placeholder}
           noOptionsMessage="No datasources found"
           value={value}

public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx

@@ -226,7 +226,6 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
               stats={[options.reducer]}
               onChange={this.onStatsChange}
               defaultStat={ReducerID.sum}
-              menuPlacement="bottom"
             />
           </div>
         </div>
@@ -305,14 +304,12 @@ 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={true}
@@ -321,7 +318,6 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
             options={rightNames}
             value={options?.right}
             onChange={this.onBinaryRightChanged}
-            menuPlacement="bottom"
           />
         </div>
       </div>
@@ -347,7 +343,6 @@ 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/ConcatenateTransformerEditor.tsx

@@ -8,8 +8,8 @@ import {
 } from '@grafana/data';
 import { Input, Select } from '@grafana/ui';
 import {
-  ConcatenateTransformerOptions,
   ConcatenateFrameNameMode,
+  ConcatenateTransformerOptions,
 } from '@grafana/data/src/transformations/transformers/concat';
 
 interface ConcatenateTransformerEditorProps extends TransformerUIProps<ConcatenateTransformerOptions> {}
@@ -61,7 +61,6 @@ export class ConcatenateTransformerEditor extends React.PureComponent<Concatenat
               options={nameModes}
               value={nameModes.find(v => v.value === frameNameMode)}
               onChange={this.onModeChanged}
-              menuPlacement="bottom"
             />
           </div>
         </div>

public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueFilterEditor.tsx

@@ -87,7 +87,6 @@ export const FilterByValueFilterEditor: React.FC<Props> = props => {
           options={fieldsAsOptions}
           value={filter.fieldName}
           onChange={onChangeField}
-          menuPlacement="bottom"
         />
       </div>
       <div className="gf-form gf-form-spacing">
@@ -98,7 +97,6 @@ export const FilterByValueFilterEditor: React.FC<Props> = props => {
           options={matcherOptions}
           value={matcherId}
           onChange={onChangeMatcher}
-          menuPlacement="bottom"
         />
       </div>
       <div className="gf-form gf-form--grow gf-form-spacing">

public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx

@@ -1,20 +1,20 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { css, cx } from 'emotion';
 import {
   DataTransformerID,
+  ReducerID,
+  SelectableValue,
   standardTransformers,
   TransformerRegistyItem,
   TransformerUIProps,
-  ReducerID,
-  SelectableValue,
 } from '@grafana/data';
 import { getAllFieldNamesFromDataFrames } from './OrganizeFieldsTransformerEditor';
 import { Select, StatsPicker, stylesFactory } from '@grafana/ui';
 
 import {
-  GroupByTransformerOptions,
-  GroupByOperationID,
   GroupByFieldOptions,
+  GroupByOperationID,
+  GroupByTransformerOptions,
 } from '@grafana/data/src/transformations/transformers/groupBy';
 
 interface FieldProps {
@@ -90,7 +90,6 @@ export const GroupByFieldConfiguration: React.FC<FieldProps> = ({ fieldName, con
             placeholder="Ignored"
             onChange={onChange}
             isClearable
-            menuPlacement="bottom"
           />
         </div>
       </div>
@@ -105,7 +104,6 @@ export const GroupByFieldConfiguration: React.FC<FieldProps> = ({ fieldName, con
             onChange={stats => {
               onConfigChange({ ...config, aggregations: stats as ReducerID[] });
             }}
-            menuPlacement="bottom"
           />
         </div>
       )}

public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import {
   DataTransformerID,
+  SelectableValue,
   standardTransformers,
   TransformerRegistyItem,
   TransformerUIProps,
-  SelectableValue,
 } from '@grafana/data';
 import { Select } from '@grafana/ui';
 
@@ -49,7 +49,6 @@ export const LabelsAsFieldsTransformerEditor: React.FC<TransformerUIProps<Labels
           className="min-width-18 gf-form-spacing"
           value={options?.valueLabel}
           onChange={onValueLabelChange}
-          menuPlacement="bottom"
         />
       </div>
     </div>

public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx

@@ -1,15 +1,15 @@
 import React, { useCallback } from 'react';
-import { StatsPicker, Select, LegacyForms } from '@grafana/ui';
+import { LegacyForms, Select, StatsPicker } from '@grafana/ui';
 import {
   DataTransformerID,
   ReducerID,
+  SelectableValue,
   standardTransformers,
   TransformerRegistyItem,
   TransformerUIProps,
-  SelectableValue,
 } from '@grafana/data';
 
-import { ReduceTransformerOptions, ReduceTransformerMode } from '@grafana/data/src/transformations/transformers/reduce';
+import { ReduceTransformerMode, ReduceTransformerOptions } from '@grafana/data/src/transformations/transformers/reduce';
 import { selectors } from '@grafana/e2e-selectors';
 
 // TODO:  Minimal implementation, needs some <3
@@ -60,7 +60,6 @@ export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransfor
             options={modes}
             value={modes.find(v => v.value === options.mode) || modes[0]}
             onChange={onSelectMode}
-            menuPlacement="bottom"
             className="flex-grow-1"
           />
         </div>
@@ -81,7 +80,6 @@ export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransfor
                 reducers: stats as ReducerID[],
               });
             }}
-            menuPlacement="bottom"
           />
         </div>
       </div>

public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx

@@ -33,13 +33,7 @@ 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
+        <Select options={fieldNameOptions} value={options.byField} onChange={onSelectField} isClearable />
-          options={fieldNameOptions}
-          value={options.byField}
-          onChange={onSelectField}
-          isClearable
-          menuPlacement="bottom"
-        />
       </div>
     </div>
   );

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

@@ -159,7 +159,6 @@ export class TransformationsEditor extends React.PureComponent<TransformationsEd
           options={availableTransformers}
           onChange={this.onTransformationAdd}
           isFullWidth={false}
-          menuPlacement="bottom"
         />
       </div>
     );

public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx

@@ -5,24 +5,24 @@ import debounce from 'lodash/debounce';
 import unionBy from 'lodash/unionBy';
 
 import {
-  QueryField,
+  BracesPlugin,
-  SlatePrism,
   LegacyForms,
+  MultiSelect,
+  QueryField,
+  Select,
+  SlatePrism,
   TypeaheadInput,
   TypeaheadOutput,
-  BracesPlugin,
-  Select,
-  MultiSelect,
 } from '@grafana/ui';
 
 // Utils & Services
 // dom also includes Element polyfills
-import { Plugin, Node, Editor } from 'slate';
+import { Editor, Node, Plugin } from 'slate';
 import syntax from '../syntax';
 
 // Types
-import { ExploreQueryFieldProps, AbsoluteTimeRange, SelectableValue, AppEvents } from '@grafana/data';
+import { AbsoluteTimeRange, AppEvents, ExploreQueryFieldProps, SelectableValue } from '@grafana/data';
-import { CloudWatchQuery, CloudWatchLogsQuery } from '../types';
+import { CloudWatchLogsQuery, CloudWatchQuery } from '../types';
 import { CloudWatchDatasource } from '../datasource';
 import { LanguageMap, languages as prismLanguages } from 'prismjs';
 import { CloudWatchLanguageProvider } from '../language_provider';
@@ -321,7 +321,6 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
                 onChange={v => this.setSelectedRegion(v)}
                 width={18}
                 placeholder="Choose Region"
-                menuPlacement="bottom"
                 maxMenuHeight={500}
               />
             }
@@ -349,7 +348,6 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
                 isOptionDisabled={() => selectedLogGroups.length >= MAX_LOG_GROUPS}
                 placeholder="Choose Log Groups"
                 maxVisibleValues={4}
-                menuPlacement="bottom"
                 noOptionsMessage="No log groups available"
                 isLoading={loadingLogGroups}
                 onOpenMenu={this.onOpenLogGroupMenu}

public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx

@@ -3,15 +3,15 @@ import React, { PureComponent } from 'react';
 
 // Types
 import { InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
-import { SelectableValue, QueryEditorProps } from '@grafana/data';
+import { QueryEditorProps, SelectableValue } from '@grafana/data';
-
-const { Switch } = LegacyForms;
-
 import { PrometheusDatasource } from '../datasource';
-import { PromQuery, PromOptions } from '../types';
+import { PromOptions, PromQuery } from '../types';
 
 import PromQueryField from './PromQueryField';
 import PromLink from './PromLink';
+
+const { Switch } = LegacyForms;
+
 export type Props = QueryEditorProps<PrometheusDatasource, PromQuery, PromOptions>;
 
 const FORMAT_OPTIONS: Array<SelectableValue<string>> = [
@@ -157,7 +157,6 @@ export class PromQueryEditor extends PureComponent<Props, State> {
             <div className="gf-form-label">Resolution</div>
             <Select
               isSearchable={false}
-              menuPlacement="bottom"
               options={INTERVAL_FACTOR_OPTIONS}
               onChange={this.onIntervalFactorChange}
               value={intervalFactorOption}

public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap

@@ -82,7 +82,6 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
       </div>
       <Select
         isSearchable={false}
-        menuPlacement="bottom"
         onChange={[Function]}
         options={
           Array [