public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Select: Portal menu by default (#48176)

Browse Source 
* Remove menuShouldPortal from all <Select /> components

* fix unit tests

* leave menuShouldPortal as an escape hatch

* Fix import order
This commit is contained in:
Ashley Harrison
2022-05-04 15:12:59 +01:00
committed by GitHub
parent 2738d1c557
commit 06d3c27bc1
179 changed files with 67 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-runtime/src/components/DataSourcePicker.tsx
-1
View File
@@ -165,7 +165,6 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
<Select
aria-label={selectors.components.DataSourcePicker.inputV2}
inputId={inputId || 'data-source-picker'}
menuShouldPortal
className="ds-picker select-container"
isMulti={false}
isClearable={isClearable}
packages/grafana-ui/src/components/Cascader/Cascader.tsx
-1
View File
@@ -212,7 +212,6 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
<div>
{isSearching ? (
<Select
menuShouldPortal
allowCustomValue={allowCustomValue}
placeholder={placeholder}
autoFocus={!focusCascade}
packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx
-1
View File
@@ -58,7 +58,6 @@ export function AlertingSettings<T extends AlertingConfig>({
>
<Select
width={29}
menuShouldPortal
options={alertmanagerOptions}
onChange={(value) =>
onOptionsChange({ ...options, jsonData: { ...options.jsonData, alertmanagerUid: value?.value } })
packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
-1
View File
@@ -109,7 +109,6 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
const accessSelect = (
<Select
aria-label="Access"
menuShouldPortal
className="width-20 gf-form-input"
options={ACCESS_OPTIONS}
value={ACCESS_OPTIONS.filter((o) => o.value === dataSourceConfig.access)[0] || DEFAULT_ACCESS_OPTION}
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
+1
View File
@@ -109,6 +109,7 @@ export const TimePickerFooter: FC<Props> = (props) => {
<Field className={style.fiscalYearField} label={'Fiscal year start month'}>
<Select
value={fiscalYearStartMonth}
menuShouldPortal={false}
options={monthOptions}
onChange={(value) => {
if (onChangeFiscalYearStartMonth) {
packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx
+1
View File
@@ -60,6 +60,7 @@ export const TimeZonePicker: React.FC<Props> = (props) => {
value={selected}
placeholder="Type to search (country, city, abbreviation)"
autoFocus={autoFocus}
menuShouldPortal={false}
openMenuOnFocus={true}
width={width}
filterOption={filterBySearchIndex}
packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx
-1
View File
@@ -47,7 +47,6 @@ export const WeekStartPicker: React.FC<Props> = (props) => {
onChange={onChangeWeekStart}
onBlur={onBlur}
disabled={disabled}
menuShouldPortal={true}
/>
);
};
packages/grafana-ui/src/components/Forms/Field.test.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ describe('Field', () => {
it('renders with the inputId of its children', () => {
render(
<Field label="My other label">
<Select menuShouldPortal inputId="my-select-input" onChange={() => {}} />
<Select inputId="my-select-input" onChange={() => {}} />
</Field>
);
packages/grafana-ui/src/components/Forms/Form.story.tsx
+1 -1
View File
@@ -114,7 +114,7 @@ const renderForm = (defaultValues?: FormDTO) => (
rules={{
required: true,
}}
render={({ field }) => <Select menuShouldPortal {...field} options={selectOptions} />}
render={({ field }) => <Select {...field} options={selectOptions} />}
/>
</Field>
packages/grafana-ui/src/components/Forms/InlineField.story.tsx
-1
View File
@@ -45,7 +45,6 @@ export const withSelect = () => {
return (
<InlineField label="Select option">
<Select
menuShouldPortal
width={16}
onChange={action('item selected')}
options={[
packages/grafana-ui/src/components/Forms/InlineField.test.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ describe('InlineField', () => {
it('renders with the inputId of its children', () => {
render(
<InlineField label="My other label">
<Select menuShouldPortal inputId="my-select-input" onChange={() => {}} />
<Select inputId="my-select-input" onChange={() => {}} />
</InlineField>
);
packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx
-1
View File
@@ -72,7 +72,6 @@ export const Basic: Story = (args) => {
{(value, updateValue) => {
return (
<Select
menuShouldPortal
{...args}
onChange={(value: SelectableValue<string>) => {
action('onChanged fired')(value);
packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export const FieldNameMatcherEditor = memo<MatcherUIProps<string>>((props) => {
);
const selectedOption = selectOptions.find((v) => v.value === options);
return <Select menuShouldPortal value={selectedOption} options={selectOptions} onChange={onChange} inputId={id} />;
return <Select value={selectedOption} options={selectOptions} onChange={onChange} inputId={id} />;
});
FieldNameMatcherEditor.displayName = 'FieldNameMatcherEditor';
packages/grafana-ui/src/components/MatchersUI/FieldNamePicker.tsx
-1
View File
@@ -31,7 +31,6 @@ export const FieldNamePicker: React.FC<StandardEditorProps<string, FieldNamePick
return (
<>
<Select
menuShouldPortal
value={selectedOption}
placeholder={settings.placeholderText ?? 'Select field'}
options={selectOptions}
packages/grafana-ui/src/components/MatchersUI/FieldNamesMatcherEditor.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export const FieldNamesMatcherEditor = memo<MatcherUIProps<ByNamesMatcherOptions
return <Input value={displayNames} readOnly={true} disabled={true} prefix={prefix} />;
}
return <MultiSelect menuShouldPortal value={options.names} options={selectOptions} onChange={onChange} />;
return <MultiSelect value={options.names} options={selectOptions} onChange={onChange} />;
});
FieldNamesMatcherEditor.displayName = 'FieldNameMatcherEditor';
packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const FieldTypeMatcherEditor = memo<MatcherUIProps<string>>((props) => {
);
const selectedOption = selectOptions.find((v) => v.value === options);
return <Select inputId={id} value={selectedOption} options={selectOptions} onChange={onChange} menuShouldPortal />;
return <Select inputId={id} value={selectedOption} options={selectOptions} onChange={onChange} />;
});
FieldTypeMatcherEditor.displayName = 'FieldTypeMatcherEditor';
packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export const FieldsByFrameRefIdMatcher = memo<MatcherUIProps<string>>((props) =>
);
const selectedOption = selectOptions.find((v) => v.value === options);
return <Select menuShouldPortal value={selectedOption} options={selectOptions} onChange={onChange} />;
return <Select value={selectedOption} options={selectOptions} onChange={onChange} />;
});
FieldsByFrameRefIdMatcher.displayName = 'FieldsByFrameRefIdMatcher';
packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx
+2 -12
View File
@@ -79,7 +79,6 @@ export const FieldColorEditor: React.FC<FieldConfigEditorProps<FieldColor | unde
return (
<div className={styles.group}>
<Select
menuShouldPortal
minMenuHeight={200}
options={options}
value={mode}
@@ -102,14 +101,7 @@ export const FieldColorEditor: React.FC<FieldConfigEditorProps<FieldColor | unde
return (
<>
<div style={{ marginBottom: theme.spacing(2) }}>
<Select
menuShouldPortal
minMenuHeight={200}
options={options}
value={mode}
onChange={onModeChange}
inputId={id}
/>
<Select minMenuHeight={200} options={options} value={mode} onChange={onModeChange} inputId={id} />
</div>
<Field label="Color series by">
<RadioButtonGroup value={value?.seriesBy ?? 'last'} options={seriesModes} onChange={onSeriesModeChange} />
@@ -118,9 +110,7 @@ export const FieldColorEditor: React.FC<FieldConfigEditorProps<FieldColor | unde
);
}
return (
<Select menuShouldPortal minMenuHeight={200} options={options} value={mode} onChange={onModeChange} inputId={id} />
);
return <Select minMenuHeight={200} options={options} value={mode} onChange={onModeChange} inputId={id} />;
};
interface ModeProps {
packages/grafana-ui/src/components/OptionsUI/multiSelect.tsx
-1
View File
@@ -61,7 +61,6 @@ export class MultiSelectValueEditor<T> extends React.PureComponent<Props<T>, Sta
const { settings } = item;
return (
<MultiSelect<T>
menuShouldPortal
isLoading={isLoading}
value={value}
defaultValue={value}
packages/grafana-ui/src/components/OptionsUI/select.tsx
-1
View File
@@ -64,7 +64,6 @@ export class SelectValueEditor<T> extends React.PureComponent<Props<T>, State<T>
}
return (
<Select<T>
menuShouldPortal
isLoading={isLoading}
value={current}
defaultValue={value}
packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
-1
View File
@@ -60,7 +60,6 @@ export function SegmentSelect<T>({
return (
<div {...rest} ref={ref}>
<Component
menuShouldPortal
width={width}
noOptionsMessage={noOptionsMessage}
placeholder={placeholder}
packages/grafana-ui/src/components/Select/Select.story.tsx
-11
View File
@@ -94,7 +94,6 @@ export const Basic: Story<StoryProps> = (args) => {
return (
<>
<Select
menuShouldPortal
options={generateOptions()}
value={value}
onChange={(v) => {
@@ -114,7 +113,6 @@ export const BasicSelectPlainValue: Story<StoryProps> = (args) => {
return (
<>
<Select
menuShouldPortal
options={generateOptions()}
value={value}
onChange={(v) => {
@@ -148,7 +146,6 @@ export const SelectWithOptionDescriptions: Story = (args) => {
return (
<>
<Select
menuShouldPortal
options={options}
value={value}
onChange={(v) => {
@@ -171,7 +168,6 @@ export const MultiPlainValue: Story = (args) => {
return (
<>
<MultiSelect
menuShouldPortal
options={generateOptions()}
value={value}
onChange={(v) => {
@@ -190,7 +186,6 @@ export const MultiSelectWithOptionGroups: Story = (args) => {
return (
<>
<MultiSelect
menuShouldPortal
options={[
{ label: '1', value: '1' },
{ label: '2', value: '2', options: [{ label: '5', value: '5' }] },
@@ -213,7 +208,6 @@ export const MultiSelectBasic: Story = (args) => {
return (
<>
<MultiSelect
menuShouldPortal
options={generateOptions()}
value={value}
onChange={(v) => {
@@ -237,7 +231,6 @@ export const MultiSelectAsync: Story = (args) => {
return (
<AsyncMultiSelect
menuShouldPortal
loadOptions={loadAsyncOptions}
defaultOptions
value={value}
@@ -259,7 +252,6 @@ export const BasicSelectAsync: Story = (args) => {
return (
<AsyncSelect
menuShouldPortal
loadOptions={loadAsyncOptions}
defaultOptions
value={value}
@@ -280,7 +272,6 @@ export const AutoMenuPlacement: Story = (args) => {
<>
<div style={{ width: '100%', height: '95vh', display: 'flex', alignItems: 'flex-end' }}>
<Select
menuShouldPortal
options={generateOptions()}
value={value}
onChange={(v) => {
@@ -305,7 +296,6 @@ export const WidthAuto: Story = (args) => {
<>
<div style={{ width: '100%' }}>
<Select
menuShouldPortal
options={generateOptions()}
value={value}
onChange={(v) => {
@@ -328,7 +318,6 @@ export const CustomValueCreation: Story = (args) => {
return (
<>
<Select
menuShouldPortal
options={[...options, ...customOptions]}
value={value}
onChange={(v) => {
packages/grafana-ui/src/components/Select/SelectBase.test.tsx
+8 -12
View File
@@ -21,11 +21,11 @@ describe('SelectBase', () => {
];
it('renders without error', () => {
render(<SelectBase menuShouldPortal onChange={onChangeHandler} />);
render(<SelectBase onChange={onChangeHandler} />);
});
it('renders empty options information', async () => {
render(<SelectBase menuShouldPortal onChange={onChangeHandler} />);
render(<SelectBase onChange={onChangeHandler} />);
await userEvent.click(screen.getByText(/choose/i));
expect(screen.queryByText(/no options found/i)).toBeVisible();
});
@@ -34,7 +34,7 @@ describe('SelectBase', () => {
render(
<>
<label htmlFor="my-select">My select</label>
<SelectBase menuShouldPortal onChange={onChangeHandler} options={options} inputId="my-select" />
<SelectBase onChange={onChangeHandler} options={options} inputId="my-select" />
</>
);
@@ -49,7 +49,7 @@ describe('SelectBase', () => {
return (
<>
<button onClick={() => setValue(null)}>clear value</button>
<SelectBase menuShouldPortal value={value} onChange={setValue} options={[option]} />
<SelectBase value={value} onChange={setValue} options={[option]} />
</>
);
};
@@ -63,7 +63,7 @@ describe('SelectBase', () => {
describe('when openMenuOnFocus prop', () => {
describe('is provided', () => {
it('opens on focus', () => {
render(<SelectBase menuShouldPortal onChange={onChangeHandler} openMenuOnFocus />);
render(<SelectBase onChange={onChangeHandler} openMenuOnFocus />);
fireEvent.focus(screen.getByRole('combobox'));
expect(screen.queryByText(/no options found/i)).toBeVisible();
});
@@ -75,7 +75,7 @@ describe('SelectBase', () => {
${'ArrowUp'}
${' '}
`('opens on arrow down/up or space', ({ key }) => {
render(<SelectBase menuShouldPortal onChange={onChangeHandler} />);
render(<SelectBase onChange={onChangeHandler} />);
fireEvent.focus(screen.getByRole('combobox'));
fireEvent.keyDown(screen.getByRole('combobox'), { key });
expect(screen.queryByText(/no options found/i)).toBeVisible();
@@ -114,7 +114,6 @@ describe('SelectBase', () => {
it('should only display maxVisibleValues options, and additional number of values should be displayed as indicator', () => {
render(
<SelectBase
menuShouldPortal
onChange={onChangeHandler}
isMulti={true}
maxVisibleValues={3}
@@ -131,7 +130,6 @@ describe('SelectBase', () => {
it('should show all selected options when menu is open', () => {
render(
<SelectBase
menuShouldPortal
onChange={onChangeHandler}
isMulti={true}
maxVisibleValues={3}
@@ -151,7 +149,6 @@ describe('SelectBase', () => {
it('should not show all selected options when menu is open', () => {
render(
<SelectBase
menuShouldPortal
onChange={onChangeHandler}
isMulti={true}
maxVisibleValues={3}
@@ -172,7 +169,6 @@ describe('SelectBase', () => {
it('should always show all selected options', () => {
render(
<SelectBase
menuShouldPortal
onChange={onChangeHandler}
isMulti={true}
options={excessiveOptions}
@@ -189,7 +185,7 @@ describe('SelectBase', () => {
describe('options', () => {
it('renders menu with provided options', async () => {
render(<SelectBase menuShouldPortal options={options} onChange={onChangeHandler} />);
render(<SelectBase options={options} onChange={onChangeHandler} />);
await userEvent.click(screen.getByText(/choose/i));
const menuOptions = screen.getAllByLabelText('Select option');
expect(menuOptions).toHaveLength(2);
@@ -198,7 +194,7 @@ describe('SelectBase', () => {
it('call onChange handler when option is selected', async () => {
const spy = jest.fn();
render(<SelectBase menuShouldPortal onChange={spy} options={options} aria-label="My select" />);
render(<SelectBase onChange={spy} options={options} aria-label="My select" />);
const selectEl = screen.getByLabelText('My select');
expect(selectEl).toBeInTheDocument();
packages/grafana-ui/src/components/Select/SelectBase.tsx
+1 -2
View File
@@ -119,8 +119,7 @@ export function SelectBase<T>({
maxVisibleValues,
menuPlacement = 'auto',
menuPosition,
// TODO change this to default to true for Grafana 9
menuShouldPortal = false,
menuShouldPortal = true,
noOptionsMessage = 'No options found',
onBlur,
onChange,
packages/grafana-ui/src/components/Select/types.ts
+1 -2
View File
@@ -48,8 +48,7 @@ export interface SelectCommonProps<T> {
menuPlacement?: 'auto' | 'bottom' | 'top';
menuPosition?: 'fixed' | 'absolute';
/**
* Setting to true will portal the menu to `document.body`.
* This property will soon default to true and portalling will be the default behavior.
* Setting to false will prevent the menu from portalling to the body.
*/
menuShouldPortal?: boolean;
/** The message to display when no options could be found */
packages/grafana-ui/src/components/StatsPicker/StatsPicker.tsx
-1
View File
@@ -68,7 +68,6 @@ export class StatsPicker extends PureComponent<Props> {
const select = fieldReducers.selectOptions(stats);
return (
<Select
menuShouldPortal
value={select.current}
className={className}
isClearable={!defaultStat}
packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
+1 -6
View File
@@ -136,12 +136,7 @@ export const ThemeDemo = () => {
<Input placeholder="Placeholder" value="Disabled value" />
</Field>
<Field label="Select">
<Select
menuShouldPortal
options={selectOptions}
value={selectValue}
onChange={(v) => setSelectValue(v?.value!)}
/>
<Select options={selectOptions} value={selectValue} onChange={(v) => setSelectValue(v?.value!)} />
</Field>
<Field label="Radio label">
<RadioButtonGroup options={radioOptions} value={radioValue} onChange={setRadioValue} />
packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx
-1
View File
@@ -62,7 +62,6 @@ export function ValuePicker<T>({
{isPicking && (
<span style={{ minWidth: theme.spacing(minWidth), flexGrow: isFullWidth ? 1 : undefined }}>
<Select
menuShouldPortal
placeholder={label}
options={options}
aria-label={selectors.components.ValuePicker.select(label)}
packages/grafana-ui/src/options/builder/axis.tsx
-1
View File
@@ -143,7 +143,6 @@ const ScaleDistributionEditor: React.FC<FieldOverrideEditorProps<ScaleDistributi
/>
{value.type === ScaleDistribution.Log && (
<Select
menuShouldPortal
allowCustomValue={false}
options={LOG_DISTRIBUTION_OPTIONS}
value={value.log || 2}
plugins-bundled/internal/input-datasource/src/InputQueryEditor.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ export class InputQueryEditor extends PureComponent<Props, State> {
<div>
<InlineField label="Data" labelWidth={8}>
<>
<Select menuShouldPortal width={20} options={options} value={selected} onChange={this.onSourceChange} />
<Select width={20} options={options} value={selected} onChange={this.onSourceChange} />
{query.data ? (
<div style={{ alignSelf: 'center' }}>{describeDataFrame(query.data)}</div>
) : (
public/app/core/components/AccessControl/AddPermission.tsx
-3
View File
@@ -85,7 +85,6 @@ export const AddPermission = ({
options={targetOptions}
onChange={(v) => setPermissionTarget(v.value!)}
disabled={targetOptions.length === 0}
menuShouldPortal
/>
{target === PermissionTarget.User && canListUsers && (
@@ -100,7 +99,6 @@ export const AddPermission = ({
{target === PermissionTarget.BuiltInRole && (
<Select
aria-label={'Built-in role picker'}
menuShouldPortal
options={Object.values(OrgRole).map((r) => ({ value: r, label: r }))}
onChange={(r) => setBuiltinRole(r.value || '')}
width={40}
@@ -110,7 +108,6 @@ export const AddPermission = ({
<Select
aria-label="Permission Level"
width={25}
menuShouldPortal
value={permissions.find((p) => p === permission)}
options={permissions.map((p) => ({ label: p, value: p }))}
onChange={(v) => setPermission(v.value || '')}
public/app/core/components/AccessControl/PermissionListItem.tsx
-1
View File
@@ -20,7 +20,6 @@ export const PermissionListItem = ({ item, permissionLevels, canSet, onRemove, o
<div className="gf-form">
<Select
className="width-20"
menuShouldPortal
disabled={!canSet || !item.isManaged}
onChange={(p) => onChange(item, p.value!)}
value={permissionLevels.find((p) => p === item.permission)}
public/app/core/components/FolderFilter/FolderFilter.tsx
-1
View File
@@ -56,7 +56,6 @@ export function FolderFilter({ onChange: propsOnChange, maxMenuHeight }: FolderF
</Button>
)}
<AsyncMultiSelect
menuShouldPortal
{...selectOptions}
isLoading={loading}
loadOptions={debouncedLoadOptions}
public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
+1 -1
View File
@@ -63,7 +63,7 @@ export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight }: Prop
Clear types
</Button>
)}
<MultiSelect menuShouldPortal {...selectOptions} prefix={<Icon name="filter" />} aria-label="Panel Type filter" />
<MultiSelect {...selectOptions} prefix={<Icon name="filter" />} aria-label="Panel Type filter" />
</div>
);
};
public/app/core/components/PermissionList/AddPermission.tsx
-2
View File
@@ -107,7 +107,6 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
value={this.state.type}
options={dashboardAclTargets}
onChange={this.onTypeChanged}
menuShouldPortal
/>
{newItem.type === AclTarget.User ? (
@@ -127,7 +126,6 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
options={dashboardPermissionLevels}
onChange={this.onPermissionChanged}
width={25}
menuShouldPortal
/>
<Button data-save-permission type="submit" disabled={!isValid}>
Save
public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
-1
View File
@@ -31,7 +31,6 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
onChange={() => {}}
disabled={true}
value={currentPermissionLevel}
menuShouldPortal
/>
</div>
</td>
public/app/core/components/PermissionList/PermissionListItem.tsx
-1
View File
@@ -87,7 +87,6 @@ export default class PermissionsListItem extends PureComponent<Props> {
disabled={item.inherited}
value={currentPermissionLevel}
width={25}
menuShouldPortal
/>
</td>
<td>
public/app/core/components/Select/DashboardPicker.tsx
+1 -3
View File
@@ -7,8 +7,7 @@ import { backendSrv } from 'app/core/services/backend_srv';
import { DashboardSearchHit } from 'app/features/search/types';
import { DashboardDTO } from 'app/types';
interface Props
extends Omit<AsyncSelectProps<DashboardPickerDTO>, 'value' | 'onChange' | 'loadOptions' | 'menuShouldPortal'> {
interface Props extends Omit<AsyncSelectProps<DashboardPickerDTO>, 'value' | 'onChange' | 'loadOptions' | ''> {
value?: DashboardPickerDTO['uid'];
onChange?: (value?: DashboardPickerDTO) => void;
}
@@ -78,7 +77,6 @@ export const DashboardPicker = ({
return (
<AsyncSelect
menuShouldPortal
loadOptions={getDashboards}
onChange={onPicked}
placeholder={placeholder}
public/app/core/components/Select/FolderPicker.tsx
-1
View File
@@ -192,7 +192,6 @@ export class FolderPicker extends PureComponent<Props, State> {
loadOptions={this.debouncedSearch}
onChange={this.onFolderChange}
onCreateOption={this.createNewFolder}
menuShouldPortal
/>
</div>
);
public/app/core/components/Select/MetricSelect.tsx
-1
View File
@@ -24,7 +24,6 @@ export const MetricSelect: FC<Props> = (props) => {
return (
<Select
menuShouldPortal
className={className}
isMulti={false}
isClearable={false}
public/app/core/components/Select/OrgPicker.tsx
-1
View File
@@ -31,7 +31,6 @@ export function OrgPicker({ onSelected, className, inputId, autoFocus }: Props)
return (
<AsyncSelect
menuShouldPortal
inputId={inputId}
className={className}
isLoading={orgOptionsState.loading}
public/app/core/components/Select/ReadonlyFolderPicker/ReadonlyFolderPicker.tsx
-1
View File
@@ -74,7 +74,6 @@ export function ReadonlyFolderPicker({
return (
<div data-testid={selectors.components.ReadonlyFolderPicker.container}>
<AsyncSelect
menuShouldPortal
loadingMessage="Loading folders..."
defaultOptions
defaultValue={option}
public/app/core/components/Select/SortPicker.tsx
-1
View File
@@ -30,7 +30,6 @@ export const SortPicker: FC<Props> = ({ onChange, value, placeholder, filter })
const selected = options?.find((opt) => opt.value === value);
return !loading ? (
<Select
menuShouldPortal
key={value}
width={25}
onChange={onChange}
public/app/core/components/Select/TeamPicker.tsx
-1
View File
@@ -58,7 +58,6 @@ export class TeamPicker extends Component<Props, State> {
return (
<div className="user-picker" data-testid="teamPicker">
<AsyncSelect
menuShouldPortal
isLoading={isLoading}
defaultOptions={true}
loadOptions={this.debouncedSearch}
public/app/core/components/Select/UserPicker.tsx
-1
View File
@@ -60,7 +60,6 @@ export class UserPicker extends Component<Props, State> {
return (
<div className="user-picker" data-testid="userPicker">
<AsyncSelect
menuShouldPortal
isClearable
className={className}
inputId={inputId}
public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
-1
View File
@@ -11,7 +11,6 @@ exports[`FolderPicker should render 1`] = `
defaultValue={null}
loadOptions={[Function]}
loadingMessage="Loading folders..."
menuShouldPortal={true}
onChange={[Function]}
onCreateOption={[Function]}
value={null}
public/app/core/components/SharedPreferences/SharedPreferences.tsx
-1
View File
@@ -168,7 +168,6 @@ export class SharedPreferences extends PureComponent<Props, State> {
data-testid="User preferences home dashboard drop down"
>
<Select
menuShouldPortal
value={dashboards.find((dashboard) => dashboard.id === homeDashboardId)}
getOptionValue={(i) => i.id}
getOptionLabel={this.getFullDashName}
public/app/core/components/TagFilter/TagFilter.tsx
+1 -1
View File
@@ -154,7 +154,7 @@ export const TagFilter: FC<Props> = ({
Clear tags
</span>
)}
<MultiSelect menuShouldPortal {...selectOptions} prefix={<Icon name="tag-alt" />} aria-label="Tag filter" />
<MultiSelect {...selectOptions} prefix={<Icon name="tag-alt" />} aria-label="Tag filter" />
</div>
);
};
public/app/core/components/editors/DashboardPickerByID.tsx
-1
View File
@@ -45,7 +45,6 @@ export const DashboardPickerByID: FC<Props> = ({
return (
<AsyncSelect
inputId={id}
menuShouldPortal
width={width}
isClearable={isClearable}
defaultOptions={true}
public/app/features/admin/OrgRolePicker.tsx
-1
View File
@@ -17,7 +17,6 @@ const options = Object.keys(OrgRole).map((key) => ({ label: key, value: key }));
export function OrgRolePicker({ value, onChange, 'aria-label': ariaLabel, inputId, autoFocus, ...restProps }: Props) {
return (
<Select
menuShouldPortal
inputId={inputId}
value={value}
options={options}
public/app/features/alerting/AlertRuleList.tsx
-1
View File
@@ -111,7 +111,6 @@ export class AlertRuleListUnconnected extends PureComponent<Props> {
<div className="width-13">
<Select
inputId={'alert-state-filter'}
menuShouldPortal
options={this.stateFilters}
onChange={this.onStateFilterChanged}
value={this.getStateFilter()}
public/app/features/alerting/components/BasicSettings.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const BasicSettings: FC<Props> = ({
<Field label="Type">
<InputControl
name="type"
render={({ field: { ref, ...field } }) => <Select menuShouldPortal {...field} options={channels} />}
render={({ field: { ref, ...field } }) => <Select {...field} options={channels} />}
control={control}
rules={{ required: true }}
/>
public/app/features/alerting/components/OptionElement.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export const OptionElement: FC<Props> = ({ control, option, register, invalid })
control={control}
name={`${modelValue}`}
render={({ field: { ref, ...field } }) => (
<Select menuShouldPortal {...field} options={option.selectOptions ?? undefined} invalid={invalid} />
<Select {...field} options={option.selectOptions ?? undefined} invalid={invalid} />
)}
/>
);
public/app/features/alerting/unified/components/AlertManagerPicker.tsx
-1
View File
@@ -44,7 +44,6 @@ export const AlertManagerPicker: FC<Props> = ({ onChange, current, disabled = fa
>
<Select
aria-label={disabled ? 'Alertmanager' : 'Choose Alertmanager'}
menuShouldPortal
width={29}
className="ds-picker select-container"
backspaceRemovesValue={false}
public/app/features/alerting/unified/components/alert-groups/GroupBy.tsx
-1
View File
@@ -32,7 +32,6 @@ export const GroupBy = ({ className, groups, groupBy, onGroupingChange }: Props)
onGroupingChange(items.map(({ value }) => value as string));
}}
options={labelKeyOptions}
menuShouldPortal
/>
</div>
);
public/app/features/alerting/unified/components/amroutes/AmRootRouteForm.tsx
-5
View File
@@ -50,7 +50,6 @@ export const AmRootRouteForm: FC<AmRootRouteFormProps> = ({
className={styles.input}
onChange={(value) => onChange(mapSelectValueToString(value))}
options={receivers}
menuShouldPortal
/>
)}
control={control}
@@ -77,7 +76,6 @@ export const AmRootRouteForm: FC<AmRootRouteFormProps> = ({
render={({ field: { onChange, ref, ...field } }) => (
<MultiSelect
aria-label="Group by"
menuShouldPortal
{...field}
allowCustomValue
className={styles.input}
@@ -129,7 +127,6 @@ export const AmRootRouteForm: FC<AmRootRouteFormProps> = ({
<InputControl
render={({ field: { onChange, ref, ...field } }) => (
<Select
menuShouldPortal
{...field}
className={styles.input}
onChange={(value) => onChange(mapSelectValueToString(value))}
@@ -170,7 +167,6 @@ export const AmRootRouteForm: FC<AmRootRouteFormProps> = ({
<InputControl
render={({ field: { onChange, ref, ...field } }) => (
<Select
menuShouldPortal
{...field}
className={styles.input}
onChange={(value) => onChange(mapSelectValueToString(value))}
@@ -206,7 +202,6 @@ export const AmRootRouteForm: FC<AmRootRouteFormProps> = ({
<InputControl
render={({ field: { onChange, ref, ...field } }) => (
<Select
menuShouldPortal
{...field}
className={styles.input}
menuPlacement="top"
public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx
-7
View File
@@ -97,7 +97,6 @@ export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel,
onChange={(value) => onChange(value?.value)}
options={matcherFieldOptions}
aria-label="Operator"
menuShouldPortal
/>
)}
defaultValue={field.operator}
@@ -153,7 +152,6 @@ export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel,
className={formStyles.input}
onChange={(value) => onChange(mapSelectValueToString(value))}
options={receivers}
menuShouldPortal
/>
)}
control={control}
@@ -176,7 +174,6 @@ export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel,
render={({ field: { onChange, ref, ...field } }) => (
<MultiSelect
aria-label="Group by"
menuShouldPortal
{...field}
allowCustomValue
className={formStyles.input}
@@ -231,7 +228,6 @@ export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel,
<InputControl
render={({ field: { onChange, ref, ...field } }) => (
<Select
menuShouldPortal
{...field}
className={formStyles.input}
onChange={(value) => onChange(mapSelectValueToString(value))}
@@ -272,7 +268,6 @@ export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel,
<InputControl
render={({ field: { onChange, ref, ...field } }) => (
<Select
menuShouldPortal
{...field}
className={formStyles.input}
onChange={(value) => onChange(mapSelectValueToString(value))}
@@ -313,7 +308,6 @@ export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel,
<InputControl
render={({ field: { onChange, ref, ...field } }) => (
<Select
menuShouldPortal
{...field}
className={formStyles.input}
menuPlacement="top"
@@ -340,7 +334,6 @@ export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel,
render={({ field: { onChange, ref, ...field } }) => (
<MultiSelect
aria-label="Mute timings"
menuShouldPortal
{...field}
className={formStyles.input}
onChange={(value) => onChange(mapMultiSelectValueToStrings(value))}
public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
-1
View File
@@ -101,7 +101,6 @@ export function ChannelSubForm<R extends ChannelValues>({
<Select
disabled={readOnly}
inputId={contactPointTypeInputId}
menuShouldPortal
{...field}
width={37}
options={typeOptions}
public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
-1
View File
@@ -126,7 +126,6 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
render={({ field: { onChange, ref, ...field } }) => (
<Select
disabled={readOnly}
menuShouldPortal
{...field}
options={option.selectOptions ?? undefined}
invalid={invalid}
public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx
-1
View File
@@ -41,7 +41,6 @@ export const CloudEvaluationBehavior: FC = () => {
name="forTimeUnit"
render={({ field: { onChange, ref, ...field } }) => (
<Select
menuShouldPortal
{...field}
options={timeOptions}
onChange={(value) => onChange(value?.value)}
public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx
-1
View File
@@ -53,7 +53,6 @@ export const ConditionField: FC = () => {
name="condition"
render={({ field: { onChange, ref, ...field } }) => (
<Select
menuShouldPortal
aria-label="Condition"
{...field}
width={42}
public/app/features/alerting/unified/components/rule-editor/GrafanaAlertStatePicker.tsx
+1 -1
View File
@@ -27,5 +27,5 @@ export const GrafanaAlertStatePicker: FC<Props> = ({ includeNoData, includeError
}
return options;
}, [includeNoData, includeError]);
return <Select menuShouldPortal options={opts} {...props} />;
return <Select options={opts} {...props} />;
};
public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx
-1
View File
@@ -59,7 +59,6 @@ export const SelectWithAdd: FC<Props> = ({
} else {
return (
<Select
menuShouldPortal
aria-label={ariaLabel}
width={width}
options={_options}
public/app/features/alerting/unified/components/silences/MatchersField.tsx
-1
View File
@@ -51,7 +51,6 @@ const MatchersField: FC<Props> = ({ className }) => {
render={({ field: { onChange, ref, ...field } }) => (
<Select
{...field}
menuShouldPortal
onChange={(value) => onChange(value.value)}
className={styles.matcherOptions}
options={matcherFieldOptions}
public/app/features/annotations/components/AnnotationResultMapper.tsx
+1 -2
View File
@@ -147,7 +147,7 @@ export class AnnotationFieldMapper extends PureComponent<Props, State> {
</td>
{/* <td>
<Select
menuShouldPortal
value={valueOptions.find(v => v.value === mapping.source) || valueOptions[0]}
options={valueOptions}
onChange={(v: SelectableValue<AnnotationEventFieldSource>) => {
@@ -157,7 +157,6 @@ export class AnnotationFieldMapper extends PureComponent<Props, State> {
</td> */}
<td>
<Select
menuShouldPortal
value={currentValue}
options={picker}
placeholder={row.placeholder || row.key}
public/app/features/api-keys/ApiKeysForm.tsx
+1 -7
View File
@@ -83,13 +83,7 @@ export const ApiKeysForm: FC<Props> = ({ show, onClose, onKeyAdded, disabled })
</div>
<div className="gf-form">
<InlineField label="Role">
<Select
inputId="role-select"
value={role}
onChange={onRoleChange}
options={ROLE_OPTIONS}
menuShouldPortal
/>
<Select inputId="role-select" value={role} onChange={onRoleChange} options={ROLE_OPTIONS} />
</InlineField>
</div>
<div className="gf-form max-width-21">
public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
+2 -8
View File
@@ -89,13 +89,7 @@ export const LinkSettingsEdit: React.FC<LinkSettingsEditProps> = ({ editLinkIdx,
<Input name="title" id="title" value={linkSettings.title} onChange={onChange} autoFocus={isNew} />
</Field>
<Field label="Type">
<Select
inputId="link-type-input"
value={linkSettings.type}
options={linkTypeOptions}
onChange={onTypeChange}
menuShouldPortal
/>
<Select inputId="link-type-input" value={linkSettings.type} options={linkTypeOptions} onChange={onTypeChange} />
</Field>
{linkSettings.type === 'dashboards' && (
<>
@@ -113,7 +107,7 @@ export const LinkSettingsEdit: React.FC<LinkSettingsEditProps> = ({ editLinkIdx,
<Input name="tooltip" value={linkSettings.tooltip} onChange={onChange} placeholder="Open dashboard" />
</Field>
<Field label="Icon">
<Select menuShouldPortal value={linkSettings.icon} options={linkIconOptions} onChange={onIconChange} />
<Select value={linkSettings.icon} options={linkIconOptions} onChange={onIconChange} />
</Field>
</>
)}
public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
-1
View File
@@ -138,7 +138,6 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
const maxPerRowOptions = [2, 3, 4, 6, 8, 12].map((value) => ({ label: value.toString(), value }));
return (
<Select
menuShouldPortal
options={maxPerRowOptions}
value={panel.maxPerRow}
onChange={(value) => onPanelConfigChange('maxPerRow', value.value)}
public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx
+1 -1
View File
@@ -40,5 +40,5 @@ export const RepeatRowSelect: FC<Props> = ({ repeat, onChange, id }) => {
const onSelectChange = useCallback((option: SelectableValue<string | null>) => onChange(option.value!), [onChange]);
return <Select inputId={id} menuShouldPortal value={repeat} onChange={onSelectChange} options={variableOptions} />;
return <Select inputId={id} value={repeat} onChange={onSelectChange} options={variableOptions} />;
};
public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
-1
View File
@@ -222,7 +222,6 @@ export class ShareSnapshot extends PureComponent<Props, State> {
<Field label="Expire">
<Select
inputId="expire-select-input"
menuShouldPortal
width={30}
options={expireOptions}
value={selectedExpireOption}
public/app/features/dimensions/editors/ColorDimensionEditor.tsx
-1
View File
@@ -61,7 +61,6 @@ export const ColorDimensionEditor: FC<StandardEditorProps<ColorDimensionConfig,
<>
<div className={styles.container}>
<Select
menuShouldPortal
value={selectedOption}
options={selectOptions}
onChange={onSelectChange}
public/app/features/dimensions/editors/IconSelector.tsx
-1
View File
@@ -31,7 +31,6 @@ const IconSelector: React.FC<Props> = ({ value, onChange }) => {
}, [iconRoot]);
return (
<Select
menuShouldPortal
options={icons}
value={icon}
onChange={(selectedValue) => {
public/app/features/dimensions/editors/ScalarDimensionEditor.tsx
-1
View File
@@ -87,7 +87,6 @@ export const ScalarDimensionEditor: FC<StandardEditorProps<ScalarDimensionConfig
</InlineField>
</InlineFieldRow>
<Select
menuShouldPortal
value={selectedOption}
options={selectOptions}
onChange={onSelectChange}
public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
-1
View File
@@ -102,7 +102,6 @@ export const ScaleDimensionEditor: FC<StandardEditorProps<ScaleDimensionConfig,
<>
<div>
<Select
menuShouldPortal
value={selectedOption}
options={selectOptions}
onChange={onSelectChange}
public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx
-1
View File
@@ -173,7 +173,6 @@ export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDupl
)}
{mapping.type === MappingType.SpecialValue && (
<Select
menuShouldPortal
value={specialMatchOptions.find((v) => v.value === mapping.specialMatch)}
options={specialMatchOptions}
onChange={onChangeSpecialMatch}
public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
-2
View File
@@ -192,7 +192,6 @@ export function RichHistoryQueriesTab(props: Props) {
{!richHistorySettings.activeDatasourceOnly && (
<MultiSelect
className={styles.multiselect}
menuShouldPortal
options={listOfDatasources.map((ds) => {
return { value: ds.name, label: ds.name };
})}
@@ -213,7 +212,6 @@ export function RichHistoryQueriesTab(props: Props) {
</div>
<div aria-label="Sort queries" className={styles.sort}>
<Select
menuShouldPortal
value={sortOrderOptions.filter((order) => order.value === richHistorySearchFilters.sortOrder)}
options={sortOrderOptions}
placeholder="Sort queries by"
public/app/features/explore/RichHistory/RichHistorySettingsTab.tsx
+1 -6
View File
@@ -79,12 +79,7 @@ export function RichHistorySettingsTab(props: RichHistorySettingsProps) {
className="space-between"
>
<div className={styles.input}>
<Select
menuShouldPortal
value={selectedOption}
options={retentionPeriodOptions}
onChange={onChangeRetentionPeriod}
></Select>
<Select value={selectedOption} options={retentionPeriodOptions} onChange={onChangeRetentionPeriod}></Select>
</div>
</Field>
<InlineField label="Change the default active tab from “Query history” to “Starred”" className="space-between">
public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
-2
View File
@@ -115,7 +115,6 @@ export function RichHistoryStarredTab(props: Props) {
{!richHistorySettings.activeDatasourceOnly && (
<MultiSelect
className={styles.multiselect}
menuShouldPortal
options={listOfDatasources.map((ds) => {
return { value: ds.name, label: ds.name };
})}
@@ -136,7 +135,6 @@ export function RichHistoryStarredTab(props: Props) {
</div>
<div aria-label="Sort queries" className={styles.sort}>
<Select
menuShouldPortal
value={sortOrderOptions.filter((order) => order.value === richHistorySearchFilters.sortOrder)}
options={sortOrderOptions}
placeholder="Sort queries by"
public/app/features/expressions/ExpressionQueryEditor.tsx
+1 -7
View File
@@ -46,13 +46,7 @@ export class ExpressionQueryEditor extends PureComponent<Props> {
return (
<div>
<InlineField label="Operation" labelWidth={labelWidth}>
<Select
menuShouldPortal
options={gelTypes}
value={selected}
onChange={this.onSelectExpressionType}
width={25}
/>
<Select options={gelTypes} value={selected} onChange={this.onSelectExpressionType} width={25} />
</InlineField>
{this.renderExpressionType()}
</div>
public/app/features/expressions/components/Condition.tsx
-2
View File
@@ -81,7 +81,6 @@ export const Condition: FC<Props> = ({ condition, index, onChange, onRemoveCondi
/>
)}
<Select
menuShouldPortal
options={reducerFunctions}
onChange={onReducerFunctionChange}
width={20}
@@ -89,7 +88,6 @@ export const Condition: FC<Props> = ({ condition, index, onChange, onRemoveCondi
/>
<div className={styles.button}>OF</div>
<Select
menuShouldPortal
onChange={onRefIdChange}
options={refIds}
width={15}
public/app/features/expressions/components/Reduce.tsx
+3 -3
View File
@@ -69,13 +69,13 @@ export const Reduce: FC<Props> = ({ labelWidth, onChange, refIds, query }) => {
return (
<InlineFieldRow>
<InlineField label="Function" labelWidth={labelWidth}>
<Select menuShouldPortal options={reducerTypes} value={reducer} onChange={onSelectReducer} width={25} />
<Select options={reducerTypes} value={reducer} onChange={onSelectReducer} width={25} />
</InlineField>
<InlineField label="Input" labelWidth={labelWidth}>
<Select menuShouldPortal onChange={onRefIdChange} options={refIds} value={query.expression} width={20} />
<Select onChange={onRefIdChange} options={refIds} value={query.expression} width={20} />
</InlineField>
<InlineField label="Mode" labelWidth={labelWidth}>
<Select menuShouldPortal onChange={onModeChanged} options={reducerMode} value={mode} width={25} />
<Select onChange={onModeChanged} options={reducerMode} value={mode} width={25} />
</InlineField>
{replaceWithNumber()}
</InlineFieldRow>
public/app/features/expressions/components/Resample.tsx
+3 -15
View File
@@ -36,7 +36,7 @@ export const Resample: FC<Props> = ({ labelWidth, onChange, refIds, query }) =>
<>
<InlineFieldRow>
<InlineField label="Input" labelWidth={labelWidth}>
<Select menuShouldPortal onChange={onRefIdChange} options={refIds} value={query.expression} width={20} />
<Select onChange={onRefIdChange} options={refIds} value={query.expression} width={20} />
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
@@ -44,22 +44,10 @@ export const Resample: FC<Props> = ({ labelWidth, onChange, refIds, query }) =>
<Input onChange={onWindowChange} value={query.window} width={15} />
</InlineField>
<InlineField label="Downsample">
<Select
menuShouldPortal
options={downsamplingTypes}
value={downsampler}
onChange={onSelectDownsampler}
width={25}
/>
<Select options={downsamplingTypes} value={downsampler} onChange={onSelectDownsampler} width={25} />
</InlineField>
<InlineField label="Upsample">
<Select
menuShouldPortal
options={upsamplingTypes}
value={upsampler}
onChange={onSelectUpsampler}
width={25}
/>
<Select options={upsamplingTypes} value={upsampler} onChange={onSelectUpsampler} width={25} />
</InlineField>
</InlineFieldRow>
</>
public/app/features/geo/editor/GazetteerPathEditor.tsx
-1
View File
@@ -62,7 +62,6 @@ export const GazetteerPathEditor: FC<StandardEditorProps<string, any, any, Gazet
return (
<>
<Select
menuShouldPortal
value={current}
options={options}
onChange={(v) => onChange(v.value)}
public/app/features/inspector/InspectDataOptions.tsx
-1
View File
@@ -106,7 +106,6 @@ export const InspectDataOptions: FC<Props> = ({
{data!.length > 1 && (
<Field label="Show data frame">
<Select
menuShouldPortal
options={selectableOptions}
value={selectedDataFrame}
onChange={onDataFrameChange}
public/app/features/inspector/InspectJSONTab.tsx
-1
View File
@@ -130,7 +130,6 @@ export class InspectJSONTab extends PureComponent<Props, State> {
options={jsonOptions}
value={selected}
onChange={this.onSelectChanged}
menuShouldPortal
/>
</Field>
{this.hasPanelJSON && isPanelJSON && canEdit && (
public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
-1
View File
@@ -56,7 +56,6 @@ export function OpenLibraryPanelModal({ libraryPanel, onDismiss }: OpenLibraryPa
.Please choose which dashboard to view the panel in:
</p>
<AsyncSelect
menuShouldPortal
isClearable
isLoading={loading}
defaultOptions={true}
public/app/features/live/pages/RuleSettingsArray.tsx
-1
View File
@@ -39,7 +39,6 @@ export const RuleSettingsArray: React.FC<Props> = ({ onChange, value, ruleType,
<>
<Select
placeholder="Select an index"
menuShouldPortal={true}
options={indexArr}
value={index}
onChange={(index) => {
public/app/features/live/pages/RuleSettingsEditor.tsx
-1
View File
@@ -15,7 +15,6 @@ export const RuleSettingsEditor: React.FC<Props> = ({ onChange, value, ruleType,
return (
<>
<Select
menuShouldPortal={true}
key={ruleType}
options={entitiesInfo[ruleType]}
placeholder="Select an option"
public/app/features/plugins/admin/pages/Browse.tsx
-1
View File
@@ -109,7 +109,6 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
{/* Sorting */}
<div>
<Select
menuShouldPortal
aria-label="Sort Plugins List"
width={24}
value={sortBy}
public/app/features/teams/TeamMemberRow.tsx
-1
View File
@@ -57,7 +57,6 @@ export class TeamMemberRow extends PureComponent<Props> {
<div className="gf-form">
{signedInUserIsTeamAdmin && (
<Select
menuShouldPortal
isSearchable={false}
options={teamsPermissionLevels}
onChange={(item) => this.onPermissionChange(item, member)}
public/app/features/teams/__snapshots__/TeamMemberRow.test.tsx.snap
-2
View File
@@ -110,7 +110,6 @@ exports[`Render when feature toggle editorsCanAdmin is turned off should not ren
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
@@ -203,7 +202,6 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx
-2
View File
@@ -79,7 +79,6 @@ export const FilterByValueFilterEditor: React.FC<Props> = (props) => {
<div className="gf-form gf-form-spacing">
<div className="gf-form-label width-7">Field</div>
<Select
menuShouldPortal
className="min-width-15 max-width-24"
placeholder="Field Name"
options={fieldsAsOptions}
@@ -90,7 +89,6 @@ export const FilterByValueFilterEditor: React.FC<Props> = (props) => {
<div className="gf-form gf-form-spacing">
<div className="gf-form-label">Match</div>
<Select
menuShouldPortal
className="width-12"
placeholder="Select test"
options={matcherOptions}
public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx
+3 -3
View File
@@ -54,12 +54,12 @@ export function ConfigFromQueryTransformerEditor({ input, onChange, options }: P
<>
<InlineFieldRow>
<InlineField label="Config query" labelWidth={20}>
<Select menuShouldPortal onChange={onRefIdChange} options={refIds} value={currentRefId} width={30} />
<Select onChange={onRefIdChange} options={refIds} value={currentRefId} width={30} />
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label="Apply to" labelWidth={20}>
<Select menuShouldPortal onChange={onMatcherChange} options={matchers} value={currentMatcher.id} width={30} />
<Select onChange={onMatcherChange} options={matchers} value={currentMatcher.id} width={30} />
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
@@ -96,7 +96,7 @@ export const configFromQueryTransformRegistryItem: TransformerRegistryItem<Confi
help: `
### Use cases
This transformation allows you select one query and from it extract standard options such as
This transformation allows you select one query and from it extract standard options such as
**Min**, **Max**, **Unit**, and **Thresholds** and apply them to other query results.
This enables dynamic query driven visualization configuration.
public/app/features/transformers/editors/CalculateFieldTransformerEditor.tsx
-4
View File
@@ -300,7 +300,6 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
</div>
<div className="gf-form">
<Select
menuShouldPortal
allowCustomValue={true}
placeholder="Field or number"
options={leftNames}
@@ -309,14 +308,12 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
onChange={this.onBinaryLeftChanged}
/>
<Select
menuShouldPortal
className="width-8 gf-form-spacing"
options={ops}
value={options.operator ?? ops[0].value}
onChange={this.onBinaryOperationChanged}
/>
<Select
menuShouldPortal
allowCustomValue={true}
placeholder="Field or number"
className="min-width-10"
@@ -344,7 +341,6 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
<div className="gf-form">
<div className="gf-form-label width-8">Mode</div>
<Select
menuShouldPortal
className="width-18"
options={calculationModes}
value={calculationModes.find((v) => v.value === mode)}
public/app/features/transformers/editors/ConcatenateTransformerEditor.tsx
-1
View File
@@ -58,7 +58,6 @@ export class ConcatenateTransformerEditor extends React.PureComponent<Concatenat
<div className="gf-form">
<div className="gf-form-label width-8">Name</div>
<Select
menuShouldPortal
className="width-18"
options={nameModes}
value={nameModes.find((v) => v.value === frameNameMode)}
public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx
-1
View File
@@ -106,7 +106,6 @@ export const ConvertFieldTypeTransformerEditor: React.FC<TransformerUIProps<Conv
</InlineField>
<InlineField label={'as'}>
<Select
menuShouldPortal
options={allTypes}
value={c.destinationType}
placeholder={'Type'}
public/app/features/transformers/editors/GroupByTransformerEditor.tsx
-1
View File
@@ -87,7 +87,6 @@ export const GroupByFieldConfiguration: React.FC<FieldProps> = ({ fieldName, con
<div className={cx('gf-form', styles.cell)}>
<div className={cx('gf-form-spacing', styles.rowSpacing)}>
<Select
menuShouldPortal
className="width-12"
options={options}
value={config?.operation}
public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx
+3 -15
View File
@@ -53,25 +53,13 @@ export const GroupingToMatrixTransformerEditor: React.FC<TransformerUIProps<Grou
<>
<InlineFieldRow>
<InlineField label="Column" labelWidth={8}>
<Select
menuShouldPortal
options={fieldNames}
value={options.columnField}
onChange={onSelectColumn}
isClearable
/>
<Select options={fieldNames} value={options.columnField} onChange={onSelectColumn} isClearable />
</InlineField>
<InlineField label="Row" labelWidth={8}>
<Select menuShouldPortal options={fieldNames} value={options.rowField} onChange={onSelectRow} isClearable />
<Select options={fieldNames} value={options.rowField} onChange={onSelectRow} isClearable />
</InlineField>
<InlineField label="Cell Value" labelWidth={10}>
<Select
menuShouldPortal
options={fieldNames}
value={options.valueField}
onChange={onSelectValue}
isClearable
/>
<Select options={fieldNames} value={options.valueField} onChange={onSelectValue} isClearable />
</InlineField>
</InlineFieldRow>
</>
public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
-1
View File
@@ -103,7 +103,6 @@ export const LabelsAsFieldsTransformerEditor: React.FC<TransformerUIProps<Labels
htmlFor="labels-to-fields-as-name"
>
<Select
menuShouldPortal
inputId="labels-to-fields-as-name"
isClearable={true}
allowCustomValue={false}
public/app/features/transformers/editors/ReduceTransformerEditor.tsx
-1
View File
@@ -64,7 +64,6 @@ export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransfor
Mode
</div>
<Select
menuShouldPortal
options={modes}
value={modes.find((v) => v.value === options.mode) || modes[0]}
onChange={onSelectMode}

Some files were not shown because too many files have changed in this diff Show More