You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ju...@apache.org on 2021/02/12 07:16:40 UTC
[superset] branch master updated: fix(explore): Enable selecting an
option not included in suggestions (#13029)
This is an automated email from the ASF dual-hosted git repository.
junlin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 85d0262 fix(explore): Enable selecting an option not included in suggestions (#13029)
85d0262 is described below
commit 85d02620b7dca4bbc5c6502905ffea94dc7f7d51
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Fri Feb 12 08:15:46 2021 +0100
fix(explore): Enable selecting an option not included in suggestions (#13029)
---
.../src/explore/components/OptionControls.tsx | 24 ++++++++++++--
.../AdhocFilterEditPopoverSimpleTabContent.jsx | 20 ++++++++++++
.../controls/FilterControl/AdhocFilterOption.jsx | 1 +
.../FilterControl/AdhocFilterPopoverTrigger.tsx | 38 +++++++---------------
4 files changed, 54 insertions(+), 29 deletions(-)
diff --git a/superset-frontend/src/explore/components/OptionControls.tsx b/superset-frontend/src/explore/components/OptionControls.tsx
index 0a1d563..5817e15 100644
--- a/superset-frontend/src/explore/components/OptionControls.tsx
+++ b/superset-frontend/src/explore/components/OptionControls.tsx
@@ -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} />
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent.jsx
index 26f5766..0594658 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent.jsx
@@ -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
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption.jsx
index bdf300e..310c893 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption.jsx
@@ -69,6 +69,7 @@ const AdhocFilterOption = ({
index={index}
type={OPTION_TYPES.filter}
isAdhoc
+ isExtra={adhocFilter.isExtra}
/>
</AdhocFilterPopoverTrigger>
);
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger.tsx
index ceab93b..4cd8dbd 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger.tsx
@@ -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>
);
}
}