mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
fix(explore): Enable selecting an option not included in suggestions (#13029)
This commit is contained in:
parent
86807e40b7
commit
85d02620b7
@ -18,8 +18,11 @@
|
||||
*/
|
||||
import React, { useRef } from 'react';
|
||||
import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
|
||||
import { styled, useTheme } from '@superset-ui/core';
|
||||
import { ColumnOption } from '@superset-ui/chart-controls';
|
||||
import { styled, t, useTheme } from '@superset-ui/core';
|
||||
import {
|
||||
ColumnOption,
|
||||
InfoTooltipWithTrigger,
|
||||
} from '@superset-ui/chart-controls';
|
||||
import { Tooltip } from 'src/common/components/Tooltip';
|
||||
import Icon from 'src/components/Icon';
|
||||
import { savedMetricType } from 'src/explore/components/controls/MetricControl/types';
|
||||
@ -73,6 +76,10 @@ const CloseContainer = styled.div`
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const StyledInfoTooltipWithTrigger = styled(InfoTooltipWithTrigger)`
|
||||
margin: 0 ${({ theme }) => theme.gridUnit}px;
|
||||
`;
|
||||
|
||||
export const HeaderContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -138,6 +145,7 @@ export const OptionControlLabel = ({
|
||||
isFunction,
|
||||
type,
|
||||
index,
|
||||
isExtra,
|
||||
...props
|
||||
}: {
|
||||
label: string | React.ReactNode;
|
||||
@ -150,6 +158,7 @@ export const OptionControlLabel = ({
|
||||
isDraggable?: boolean;
|
||||
type: string;
|
||||
index: number;
|
||||
isExtra?: boolean;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
@ -236,6 +245,17 @@ export const OptionControlLabel = ({
|
||||
{isFunction && <Icon name="function" viewBox="0 0 16 11" />}
|
||||
{getLabelContent()}
|
||||
</Label>
|
||||
{isExtra && (
|
||||
<StyledInfoTooltipWithTrigger
|
||||
icon="exclamation-triangle"
|
||||
placement="top"
|
||||
bsStyle="warning"
|
||||
tooltip={t(`
|
||||
This filter was inherited from the dashboard's context.
|
||||
It won't be saved when saving the chart.
|
||||
`)}
|
||||
/>
|
||||
)}
|
||||
{isAdhoc && (
|
||||
<CaretContainer>
|
||||
<Icon name="caret-right" color={theme.colors.grayscale.light1} />
|
||||
|
@ -95,10 +95,12 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
|
||||
this.refreshComparatorSuggestions = this.refreshComparatorSuggestions.bind(
|
||||
this,
|
||||
);
|
||||
this.clearSuggestionSearch = this.clearSuggestionSearch.bind(this);
|
||||
|
||||
this.state = {
|
||||
suggestions: [],
|
||||
abortActiveRequest: null,
|
||||
currentSuggestionSearch: '',
|
||||
};
|
||||
|
||||
this.selectProps = {
|
||||
@ -272,8 +274,13 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
|
||||
return <FilterDefinitionOption option={option} />;
|
||||
}
|
||||
|
||||
clearSuggestionSearch() {
|
||||
this.setState({ currentSuggestionSearch: '' });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { adhocFilter, options, datasource } = this.props;
|
||||
const { currentSuggestionSearch } = this.state;
|
||||
let columns = options;
|
||||
const { subject, operator, comparator } = adhocFilter;
|
||||
const subjectSelectProps = {
|
||||
@ -379,12 +386,25 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
|
||||
name="filter-value"
|
||||
{...comparatorSelectProps}
|
||||
getPopupContainer={triggerNode => triggerNode.parentNode}
|
||||
onSearch={val => this.setState({ currentSuggestionSearch: val })}
|
||||
onSelect={this.clearSuggestionSearch}
|
||||
onBlur={this.clearSuggestionSearch}
|
||||
>
|
||||
{this.state.suggestions.map(suggestion => (
|
||||
<Select.Option value={suggestion} key={suggestion}>
|
||||
{suggestion}
|
||||
</Select.Option>
|
||||
))}
|
||||
|
||||
{/* enable selecting an option not included in suggestions */}
|
||||
{currentSuggestionSearch &&
|
||||
!this.state.suggestions.some(
|
||||
suggestion => suggestion === currentSuggestionSearch,
|
||||
) && (
|
||||
<Select.Option value={currentSuggestionSearch}>
|
||||
{currentSuggestionSearch}
|
||||
</Select.Option>
|
||||
)}
|
||||
</SelectWithLabel>
|
||||
) : (
|
||||
<Input
|
||||
|
@ -69,6 +69,7 @@ const AdhocFilterOption = ({
|
||||
index={index}
|
||||
type={OPTION_TYPES.filter}
|
||||
isAdhoc
|
||||
isExtra={adhocFilter.isExtra}
|
||||
/>
|
||||
</AdhocFilterPopoverTrigger>
|
||||
);
|
||||
|
@ -17,9 +17,6 @@
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { t } from '@superset-ui/core';
|
||||
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
||||
|
||||
import Popover from 'src/common/components/Popover';
|
||||
import columnType from 'src/explore/propTypes/columnType';
|
||||
import adhocMetricType from 'src/explore/components/controls/MetricControl/adhocMetricType';
|
||||
@ -85,30 +82,17 @@ class AdhocFilterPopoverTrigger extends React.PureComponent<
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{adhocFilter.isExtra && (
|
||||
<InfoTooltipWithTrigger
|
||||
icon="exclamation-triangle"
|
||||
placement="top"
|
||||
className="m-r-5 text-muted"
|
||||
tooltip={t(`
|
||||
This filter was inherited from the dashboard's context.
|
||||
It won't be saved when saving the chart.
|
||||
`)}
|
||||
/>
|
||||
)}
|
||||
<Popover
|
||||
placement="right"
|
||||
trigger="click"
|
||||
content={overlayContent}
|
||||
defaultVisible={this.state.popoverVisible}
|
||||
visible={this.state.popoverVisible}
|
||||
onVisibleChange={this.togglePopover}
|
||||
destroyTooltipOnHide={this.props.createNew}
|
||||
>
|
||||
{this.props.children}
|
||||
</Popover>
|
||||
</>
|
||||
<Popover
|
||||
placement="right"
|
||||
trigger="click"
|
||||
content={overlayContent}
|
||||
defaultVisible={this.state.popoverVisible}
|
||||
visible={this.state.popoverVisible}
|
||||
onVisibleChange={this.togglePopover}
|
||||
destroyTooltipOnHide={this.props.createNew}
|
||||
>
|
||||
{this.props.children}
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user