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

* Select: Changes default menuPlacement from auto to bottom * Tests: Fixes snapshot
5 years ago · 5f4b528122
parent b1a57c6f77
commit 5f4b528122
13 changed files with 25 additions and 50 deletions
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/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,
--- a/public/app/core/components/Select/DataSourcePicker.tsx
+++ b/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}
--- a/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx
+++ b/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>
--- a/public/app/core/components/TransformersUI/ConcatenateTransformerEditor.tsx
+++ b/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>
--- a/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueFilterEditor.tsx
+++ b/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">
--- a/public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx
+++ b/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>
      )}
--- a/public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx
+++ b/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>
--- a/public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx
+++ b/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>
--- a/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx
+++ b/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
-          options={fieldNameOptions}
-          value={options.byField}
-          onChange={onSelectField}
-          isClearable
-          menuPlacement="bottom"
-        />
+        <Select options={fieldNameOptions} value={options.byField} onChange={onSelectField} isClearable />
      </div>
    </div>
  );
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
+++ b/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>
    );
--- a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
@ -5,24 +5,24 @@ import debounce from 'lodash/debounce';
 import unionBy from 'lodash/unionBy';

 import {
+  BracesPlugin,
+  LegacyForms,
+  MultiSelect,
  QueryField,
+  Select,
  SlatePrism,
-  LegacyForms,
  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 { CloudWatchQuery, CloudWatchLogsQuery } from '../types';
+import { AbsoluteTimeRange, AppEvents, ExploreQueryFieldProps, SelectableValue } from '@grafana/data';
+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}
--- a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
+++ b/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';
-
-const { Switch } = LegacyForms;
-
+import { QueryEditorProps, SelectableValue } from '@grafana/data';
 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}
--- a/public/app/plugins/datasource/prometheus/components/snapshots/PromQueryEditor.test.tsx.snap
+++ b/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 [