Select: Portal menu by default (#48176)

* 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

View File

@@ -309,7 +309,6 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
inputEl={
<MultiSelect
aria-label="Log Groups"
menuShouldPortal
allowCustomValue={allowCustomValue}
options={unionBy(availableLogGroups, selectedLogGroups, 'value')}
value={selectedLogGroups}

View File

@@ -137,8 +137,8 @@ describe('MetricStatEditor', () => {
expect(namespaceSelect).toBeInTheDocument();
expect(metricsSelect).toBeInTheDocument();
await selectEvent.select(namespaceSelect, 'n1');
await selectEvent.select(metricsSelect, 'm1');
await selectEvent.select(namespaceSelect, 'n1', { container: document.body });
await selectEvent.select(metricsSelect, 'm1', { container: document.body });
expect(onChange.mock.calls).toEqual([
[{ ...propsNamespaceMetrics.metricStat, namespace: 'n1' }], // First call, namespace select
@@ -167,7 +167,7 @@ describe('MetricStatEditor', () => {
expect(screen.getByText('n2')).toBeInTheDocument();
expect(screen.getByText('oldNamespaceMetric')).toBeInTheDocument();
await selectEvent.select(namespaceSelect, 'n1');
await selectEvent.select(namespaceSelect, 'n1', { container: document.body });
expect(onChange.mock.calls).toEqual([[{ ...propsNamespaceMetrics.metricStat, metricName: '', namespace: 'n1' }]]);
});
@@ -183,7 +183,7 @@ describe('MetricStatEditor', () => {
expect(screen.getByText('n1')).toBeInTheDocument();
expect(screen.getByText('m1')).toBeInTheDocument();
await selectEvent.select(namespaceSelect, 'n2');
await selectEvent.select(namespaceSelect, 'n2', { container: document.body });
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange.mock.calls).toEqual([

View File

@@ -82,7 +82,6 @@ const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, q
options={namespaceOptions}
allowCustomValue
onChange={({ value }) => value && onNamespaceChange(setNamespace(query, value))}
menuShouldPortal
/>
</EditorField>
@@ -106,7 +105,6 @@ const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, q
options={dimensionKeys}
allowCustomValue
onChange={(item) => item && onQueryChange(setSchemaLabels(query, item))}
menuShouldPortal
/>
</EditorField>
)}
@@ -120,7 +118,6 @@ const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, q
options={metricOptions}
allowCustomValue
onChange={({ value }) => value && onQueryChange(setMetricName(query, value))}
menuShouldPortal
/>
</EditorField>
@@ -130,7 +127,6 @@ const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, q
value={aggregation ? toOption(aggregation) : null}
options={appendTemplateVariables(datasource, AGGREGATIONS)}
onChange={({ value }) => value && onQueryChange(setAggregation(query, value))}
menuShouldPortal
/>
</EditorField>
</EditorFieldGroup>

View File

@@ -131,7 +131,6 @@ const FilterItem: React.FC<FilterItemProps> = (props) => {
options={dimensionKeys}
allowCustomValue
onChange={({ value }) => value && onChange(setOperatorExpressionProperty(filter, value))}
menuShouldPortal
/>
<Select
@@ -139,7 +138,6 @@ const FilterItem: React.FC<FilterItemProps> = (props) => {
value={filter.operator?.name && toOption(filter.operator.name)}
options={OPERATORS}
onChange={({ value }) => value && onChange(setOperatorExpressionName(filter, value))}
menuShouldPortal
/>
<Select
@@ -152,7 +150,6 @@ const FilterItem: React.FC<FilterItemProps> = (props) => {
allowCustomValue
onOpenMenu={loadOptions}
onChange={({ value }) => value && onChange(setOperatorExpressionValue(filter, value))}
menuShouldPortal
/>
<AccessoryButton aria-label="remove" icon="times" variant="secondary" onClick={onDelete} />

View File

@@ -100,7 +100,6 @@ const GroupByItem: React.FC<GroupByItemProps> = (props) => {
options={options}
allowCustomValue
onChange={({ value }) => value && onChange(setGroupByField(value))}
menuShouldPortal
/>
<AccessoryButton aria-label="remove" icon="times" variant="secondary" onClick={onDelete} />

View File

@@ -36,7 +36,6 @@ const SQLOrderByGroup: React.FC<SQLBuilderSelectRowProps> = ({ query, onQueryCha
onChange={({ value }) => value && onQueryChange(setOrderBy(query, value))}
options={appendTemplateVariables(datasource, STATISTICS.map(toOption))}
value={orderBy ? toOption(orderBy) : null}
menuShouldPortal
/>
{orderBy && (
<AccessoryButton
@@ -56,7 +55,6 @@ const SQLOrderByGroup: React.FC<SQLBuilderSelectRowProps> = ({ query, onQueryCha
value={orderByDirection ? toOption(orderByDirection) : orderByDirections[0]}
options={appendTemplateVariables(datasource, orderByDirections)}
onChange={(item) => item && onQueryChange(setSql(query, { orderByDirection: item.value }))}
menuShouldPortal
/>
</EditorField>
</EditorFieldGroup>

View File

@@ -29,7 +29,6 @@ export const VariableQueryField = <T extends string | VariableQueryType>({
return (
<InlineField label={label} labelWidth={LABEL_WIDTH} htmlFor={inputId}>
<Select
menuShouldPortal
aria-label={label}
width={25}
allowCustomValue={allowCustomValue}