Skip to content

Commit

Permalink
feat: Custom filters control (#17006)
Browse files Browse the repository at this point in the history 
* fix:fix get permission function

* feat: customize filter control

* fix: fix types

* fix: fix merge

* refactor: update according CR

* refactor: fix CR notes
  • Loading branch information
@simcha90
simcha90 committed Oct 15, 2021
1 parent 69604c3 commit eebc953
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 67 deletions.
6 changes: 6 additions & 0 deletions superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@ const selectedMetricType = PropTypes.oneOfType([
const propTypes = {
label: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
name: PropTypes.string,
sections: PropTypes.arrayOf(PropTypes.string),
operators: PropTypes.arrayOf(PropTypes.string),
onChange: PropTypes.func,
value: PropTypes.arrayOf(adhocFilterType),
datasource: PropTypes.object,
Expand Down Expand Up @@ -107,6 +109,8 @@ class AdhocFilterControl extends React.Component {
adhocFilter={adhocFilter}
onFilterEdit={this.onFilterEdit}
options={this.state.options}
sections={this.props.sections}
operators={this.props.operators}
datasource={this.props.datasource}
onRemoveFilter={() => this.onRemoveFilter(index)}
onMoveLabel={this.moveLabel}
Expand Down Expand Up @@ -324,6 +328,8 @@ class AdhocFilterControl extends React.Component {
addNewFilterPopoverTrigger(trigger) {
return (
<AdhocFilterPopoverTrigger
operators={this.props.operators}
sections={this.props.sections}
adhocFilter={new AdhocFilter({})}
datasource={this.props.datasource}
options={this.state.options}
Expand Down
122 changes: 74 additions & 48 deletions ...t-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ const propTypes = {
datasource: PropTypes.object,
partitionColumn: PropTypes.string,
theme: PropTypes.object,
sections: PropTypes.arrayOf(PropTypes.string),
operators: PropTypes.arrayOf(PropTypes.string),
};

const ResizeIcon = styled.i`
Expand All @@ -54,6 +56,11 @@ const ResizeIcon = styled.i`

const startingWidth = 320;
const startingHeight = 240;
const SectionWrapper = styled.div`
.ant-select {
margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
}
`;

const FilterPopoverContentContainer = styled.div`
.adhoc-filter-edit-tabs > .nav-tabs {
Expand Down Expand Up @@ -166,71 +173,90 @@ export default class AdhocFilterEditPopover extends React.Component {
onResize,
datasource,
partitionColumn,
sections = ['SIMPLE', 'CUSTOM_SQL'],
theme,
operators,
...popoverProps
} = this.props;

const { adhocFilter } = this.state;

const resultSections =
datasource?.type === 'druid'
? sections.filter(s => s !== 'CUSTOM_SQL')
: sections;

const stateIsValid = adhocFilter.isValid();
const hasUnsavedChanges = !adhocFilter.equals(propsAdhocFilter);

const sectionRenders = {};

sectionRenders.CUSTOM_SQL = (
<ErrorBoundary>
<AdhocFilterEditPopoverSqlTabContent
adhocFilter={this.state.adhocFilter}
onChange={this.onAdhocFilterChange}
options={this.props.options}
height={this.state.height}
activeKey={this.state.activeKey}
/>
</ErrorBoundary>
);

sectionRenders.SIMPLE = (
<ErrorBoundary>
<AdhocFilterEditPopoverSimpleTabContent
operators={operators}
adhocFilter={this.state.adhocFilter}
onChange={this.onAdhocFilterChange}
options={options}
datasource={datasource}
onHeightChange={this.adjustHeight}
partitionColumn={partitionColumn}
popoverRef={this.popoverContentRef.current}
/>
</ErrorBoundary>
);

return (
<FilterPopoverContentContainer
id="filter-edit-popover"
{...popoverProps}
data-test="filter-edit-popover"
ref={this.popoverContentRef}
>
<Tabs
id="adhoc-filter-edit-tabs"
defaultActiveKey={adhocFilter.expressionType}
className="adhoc-filter-edit-tabs"
data-test="adhoc-filter-edit-tabs"
style={{ minHeight: this.state.height, width: this.state.width }}
allowOverflow
onChange={this.onTabChange}
>
<Tabs.TabPane
className="adhoc-filter-edit-tab"
key={EXPRESSION_TYPES.SIMPLE}
tab={t('Simple')}
>
<ErrorBoundary>
<AdhocFilterEditPopoverSimpleTabContent
adhocFilter={this.state.adhocFilter}
onChange={this.onAdhocFilterChange}
options={options}
datasource={datasource}
onHeightChange={this.adjustHeight}
partitionColumn={partitionColumn}
popoverRef={this.popoverContentRef.current}
/>
</ErrorBoundary>
</Tabs.TabPane>
<Tabs.TabPane
className="adhoc-filter-edit-tab"
key={EXPRESSION_TYPES.SQL}
tab={t('Custom SQL')}
{resultSections.length > 1 ? (
<Tabs
id="adhoc-filter-edit-tabs"
defaultActiveKey={adhocFilter.expressionType}
className="adhoc-filter-edit-tabs"
data-test="adhoc-filter-edit-tabs"
style={{ minHeight: this.state.height, width: this.state.width }}
allowOverflow
onChange={this.onTabChange}
>
<ErrorBoundary>
{!this.props.datasource ||
this.props.datasource.type !== 'druid' ? (
<AdhocFilterEditPopoverSqlTabContent
adhocFilter={this.state.adhocFilter}
onChange={this.onAdhocFilterChange}
options={this.props.options}
height={this.state.height}
activeKey={this.state.activeKey}
/>
) : (
<div className="custom-sql-disabled-message">
Custom SQL Filters are not available on druid datasources
</div>
)}
</ErrorBoundary>
</Tabs.TabPane>
</Tabs>
{resultSections.includes('SIMPLE') && (
<Tabs.TabPane
className="adhoc-filter-edit-tab"
key={EXPRESSION_TYPES.SIMPLE}
tab={t('Simple')}
>
{sectionRenders.SIMPLE}
</Tabs.TabPane>
)}
{resultSections.includes('CUSTOM_SQL') && (
<Tabs.TabPane
className="adhoc-filter-edit-tab"
key={EXPRESSION_TYPES.SQL}
tab={t('Custom SQL')}
>
{sectionRenders.CUSTOM_SQL}
</Tabs.TabPane>
)}
</Tabs>
) : (
<SectionWrapper>{sectionRenders[resultSections[0]]}</SectionWrapper>
)}
<div>
<Button buttonSize="small" onClick={this.props.onClose} cta>
{t('Close')}
Expand Down
46 changes: 27 additions & 19 deletions ...xplore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,20 @@ import AdhocFilter, {
} from 'src/explore/components/controls/FilterControl/AdhocFilter';
import { Input } from 'src/common/components';

const StyledInput = styled(Input)`
margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
`;

const SelectWithLabel = styled(Select)<{ labelText: string }>`
.ant-select-selector::after {
content: ${({ labelText }) => labelText || '\\A0'};
display: inline-block;
white-space: nowrap;
color: ${({ theme }) => theme.colors.grayscale.light1};
width: max-content;
}
`;

export interface SimpleColumnType {
id: number;
column_name: string;
Expand Down Expand Up @@ -81,6 +95,7 @@ export interface Props {
filter_select: boolean;
};
partitionColumn: string;
operators?: Operators[];
}
export const useSimpleTabFilterProps = (props: Props) => {
const isOperatorRelevant = (operator: Operators, subject: string) => {
Expand Down Expand Up @@ -280,7 +295,9 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
const operatorSelectProps = {
placeholder: t(
'%s operator(s)',
OPERATORS_OPTIONS.filter(op => isOperatorRelevant(op, subject)).length,
(props.operators ?? OPERATORS_OPTIONS).filter(op =>
isOperatorRelevant(op, subject),
).length,
),
value: operatorId,
onChange: onOperatorChange,
Expand Down Expand Up @@ -310,16 +327,6 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
const labelText =
comparator && comparator.length > 0 && createSuggestionsPlaceholder();

const SelectWithLabel = styled(Select)`
.ant-select-selector::after {
content: ${() => labelText || '\\A0'};
display: inline-block;
white-space: nowrap;
color: ${({ theme }) => theme.colors.grayscale.light1};
width: max-content;
}
`;

useEffect(() => {
const refreshComparatorSuggestions = () => {
const { datasource } = props;
Expand Down Expand Up @@ -380,25 +387,26 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
/>
<Select
css={theme => ({ marginBottom: theme.gridUnit * 4 })}
options={OPERATORS_OPTIONS.filter(op =>
isOperatorRelevant(op, subject),
).map(option => ({
value: option,
label: OPERATOR_ENUM_TO_OPERATOR_TYPE[option].display,
key: option,
}))}
options={(props.operators ?? OPERATORS_OPTIONS)
.filter(op => isOperatorRelevant(op, subject))
.map(option => ({
value: option,
label: OPERATOR_ENUM_TO_OPERATOR_TYPE[option].display,
key: option,
}))}
{...operatorSelectProps}
/>
{MULTI_OPERATORS.has(operatorId) || suggestions.length > 0 ? (
<SelectWithLabel
labelText={labelText}
options={suggestions.map((suggestion: string) => ({
value: suggestion,
label: String(suggestion),
}))}
{...comparatorSelectProps}
/>
) : (
<Input
<StyledInput
data-test="adhoc-filter-simple-value"
name="filter-value"
ref={ref => {
Expand Down
6 changes: 6 additions & 0 deletions superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ const propTypes = {
adhocMetricType,
]),
).isRequired,
sections: PropTypes.arrayOf(PropTypes.string),
operators: PropTypes.arrayOf(PropTypes.string),
datasource: PropTypes.object,
partitionColumn: PropTypes.string,
onMoveLabel: PropTypes.func,
Expand All @@ -53,8 +55,12 @@ const AdhocFilterOption = ({
onMoveLabel,
onDropLabel,
index,
sections,
operators,
}) => (
<AdhocFilterPopoverTrigger
sections={sections}
operators={operators}
adhocFilter={adhocFilter}
options={options}
datasource={datasource}
Expand Down
5 changes: 5 additions & 0 deletions ...rontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,11 @@ import { OptionSortType } from 'src/explore/types';
import AdhocFilterEditPopover from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopover';
import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
import { ExplorePopoverContent } from 'src/explore/components/ExploreContentPopover';
import { Operators } from 'src/explore/constants';

interface AdhocFilterPopoverTriggerProps {
sections?: string[];
operators?: Operators[];
adhocFilter: AdhocFilter;
options: OptionSortType[];
datasource: Record<string, any>;
Expand Down Expand Up @@ -90,6 +93,8 @@ class AdhocFilterPopoverTrigger extends React.PureComponent<
partitionColumn={this.props.partitionColumn}
onResize={this.onPopoverResize}
onClose={closePopover}
sections={this.props.sections}
operators={this.props.operators}
onChange={this.props.onFilterEdit}
/>
</ExplorePopoverContent>
Expand Down

0 comments on commit eebc953

Please sign in to comment.