-
+
- restoreSql(query)}
tooltip={t(
'Overwrite text in the editor with a query on this table',
)}
placement="top"
- />
-
+ openQueryInNewTab(query)}
tooltip={t('Run query in a new tab')}
placement="top"
- />
-
+
+ removeQuery(query)}
- />
+ >
+
);
return q;
diff --git a/superset-frontend/src/SqlLab/components/QueryTable/styles.ts b/superset-frontend/src/SqlLab/components/QueryTable/styles.ts
new file mode 100644
index 0000000000000..2800f09945636
--- /dev/null
+++ b/superset-frontend/src/SqlLab/components/QueryTable/styles.ts
@@ -0,0 +1,41 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { styled, css } from '@superset-ui/core';
+import { IconTooltip } from '../../../components/IconTooltip';
+
+export const StaticPosition = css`
+ position: static;
+`;
+
+export const verticalAlign = css`
+ vertical-align: 0em;
+ svg {
+ height: 0.9em;
+ }
+`;
+
+export const StyledTooltip = styled(IconTooltip)`
+ padding-right: ${({ theme }) => theme.gridUnit * 2}px;
+ span {
+ color: ${({ theme }) => theme.colors.grayscale.base};
+ &: hover {
+ color: ${({ theme }) => theme.colors.primary.base};
+ }
+ }
+`;
diff --git a/superset-frontend/src/SqlLab/components/ResultSet.tsx b/superset-frontend/src/SqlLab/components/ResultSet.tsx
index a8fe019c7e6a0..b5a6e4faaa0a5 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet.tsx
@@ -271,9 +271,23 @@ export default class ResultSet extends React.PureComponent<
return;
}
- const { schema, sql, dbId, templateParams } = this.props.query;
+ const { schema, sql, dbId } = this.props.query;
+ let { templateParams } = this.props.query;
const selectedColumns = this.props.query?.results?.selected_columns || [];
+ // The filters param is only used to test jinja templates.
+ // Remove the special filters entry from the templateParams
+ // before saving the dataset.
+ if (templateParams) {
+ const p = JSON.parse(templateParams);
+ /* eslint-disable-next-line no-underscore-dangle */
+ if (p._filters) {
+ /* eslint-disable-next-line no-underscore-dangle */
+ delete p._filters;
+ templateParams = JSON.stringify(p);
+ }
+ }
+
this.props.actions
.createDatasource({
schema,
@@ -527,7 +541,7 @@ export default class ResultSet extends React.PureComponent<
let limitMessage;
const limitReached = results?.displayLimitReached;
const limit = queryLimit || results.query.limit;
- const isAdmin = !!this.props.user?.roles.Admin;
+ const isAdmin = !!this.props.user?.roles?.Admin;
const displayMaxRowsReachedMessage = {
withAdmin: t(
`The number of results displayed is limited to %(rows)d by the configuration DISPLAY_MAX_ROWS. `,
diff --git a/superset-frontend/src/SqlLab/components/TableElement.jsx b/superset-frontend/src/SqlLab/components/TableElement.jsx
index e44cccf0d695e..384771a96e83e 100644
--- a/superset-frontend/src/SqlLab/components/TableElement.jsx
+++ b/superset-frontend/src/SqlLab/components/TableElement.jsx
@@ -16,16 +16,16 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React from 'react';
+import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Collapse from 'src/components/Collapse';
import Card from 'src/components/Card';
import ButtonGroup from 'src/components/ButtonGroup';
-import shortid from 'shortid';
import { t, styled } from '@superset-ui/core';
import { debounce } from 'lodash';
import { Tooltip } from 'src/components/Tooltip';
+import Icons from 'src/components/Icons';
import CopyToClipboard from '../../components/CopyToClipboard';
import { IconTooltip } from '../../components/IconTooltip';
import ColumnElement from './ColumnElement';
@@ -56,44 +56,26 @@ const Fade = styled.div`
opacity: ${props => (props.hovered ? 1 : 0)};
`;
-class TableElement extends React.PureComponent {
- constructor(props) {
- super(props);
- this.state = {
- sortColumns: false,
- hovered: false,
- };
- this.toggleSortColumns = this.toggleSortColumns.bind(this);
- this.removeTable = this.removeTable.bind(this);
- this.setHover = debounce(this.setHover.bind(this), 100);
- }
+const TableElement = props => {
+ const [sortColumns, setSortColumns] = useState(false);
+ const [hovered, setHovered] = useState(false);
- setHover(hovered) {
- this.setState({ hovered });
- }
+ const { table, actions, isActive } = props;
- popSelectStar() {
- const qe = {
- id: shortid.generate(),
- title: this.props.table.name,
- dbId: this.props.table.dbId,
- autorun: true,
- sql: this.props.table.selectStar,
- };
- this.props.actions.addQueryEditor(qe);
- }
+ const setHover = hovered => {
+ debounce(() => setHovered(hovered), 100)();
+ };
- removeTable() {
- this.props.actions.removeDataPreview(this.props.table);
- this.props.actions.removeTable(this.props.table);
- }
+ const removeTable = () => {
+ actions.removeDataPreview(table);
+ actions.removeTable(table);
+ };
- toggleSortColumns() {
- this.setState(prevState => ({ sortColumns: !prevState.sortColumns }));
- }
+ const toggleSortColumns = () => {
+ setSortColumns(prevState => !prevState);
+ };
- renderWell() {
- const { table } = this.props;
+ const renderWell = () => {
let header;
if (table.partitions) {
let partitionQuery;
@@ -126,12 +108,11 @@ class TableElement extends React.PureComponent {
);
}
return header;
- }
+ };
- renderControls() {
+ const renderControls = () => {
let keyLink;
- const { table } = this.props;
- if (table.indexes && table.indexes.length > 0) {
+ if (table?.indexes?.length) {
keyLink = (
this.setHover(true)}
- onMouseLeave={() => this.setHover(false)}
+ const renderHeader = () => (
+
- {this.renderBody()}
-
- );
- }
-}
+ const collapseExpandIcon = () => (
+
+
+ );
+
+ return (
+
+ {renderBody()}
+
+ );
+};
TableElement.propTypes = propTypes;
TableElement.defaultProps = defaultProps;
diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less
index 93bf91dc4e5ba..7e5cf6eebb4f1 100644
--- a/superset-frontend/src/SqlLab/main.less
+++ b/superset-frontend/src/SqlLab/main.less
@@ -414,6 +414,7 @@ div.tablePopover {
display: flex;
flex: 1;
align-items: center;
+ width: 100%;
.table-name {
white-space: nowrap;
diff --git a/superset-frontend/src/components/Form/FormItem.tsx b/superset-frontend/src/components/Form/FormItem.tsx
index ab301a883e543..9b529dbd5d141 100644
--- a/superset-frontend/src/components/Form/FormItem.tsx
+++ b/superset-frontend/src/components/Form/FormItem.tsx
@@ -35,7 +35,7 @@ const StyledItem = styled(Form.Item)`
&::after {
display: inline-block;
color: ${theme.colors.error.base};
- font-size: ${theme.typography.sizes.m}px;
+ font-size: ${theme.typography.sizes.s}px;
content: '*';
}
}
diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
index 8569b554a020d..75df2bb088cbb 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
@@ -25,17 +25,18 @@ import FormLabel from './FormLabel';
export interface LabeledErrorBoundInputProps {
label?: string;
validationMethods:
- | { onBlur: (value: any) => string }
- | { onChange: (value: any) => string };
+ | { onBlur: (value: any) => void }
+ | { onChange: (value: any) => void };
errorMessage: string | null;
helpText?: string;
required?: boolean;
id?: string;
+ classname?: string;
[x: string]: any;
}
const StyledInput = styled(Input)`
- margin: 8px 0;
+ margin: ${({ theme }) => `${theme.gridUnit}px 0 ${theme.gridUnit * 2}px`};
`;
const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
@@ -60,6 +61,12 @@ const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
}
}`}
`;
+const StyledFormGroup = styled('div')`
+ margin-bottom: ${({ theme }) => theme.gridUnit * 5}px;
+ .ant-form-item {
+ margin-bottom: 0;
+ }
+`;
const LabeledErrorBoundInput = ({
label,
@@ -68,9 +75,10 @@ const LabeledErrorBoundInput = ({
helpText,
required = false,
id,
+ className,
...props
}: LabeledErrorBoundInputProps) => (
- <>
+
{label}
@@ -83,7 +91,7 @@ const LabeledErrorBoundInput = ({
>
);
export default LabeledErrorBoundInput;
diff --git a/superset-frontend/src/components/IconButton/IconButton.stories.tsx b/superset-frontend/src/components/IconButton/IconButton.stories.tsx
new file mode 100644
index 0000000000000..45435e70cc8ec
--- /dev/null
+++ b/superset-frontend/src/components/IconButton/IconButton.stories.tsx
@@ -0,0 +1,58 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import IconButton, { IconButtonProps } from '.';
+
+export default {
+ title: 'IconButton',
+ component: IconButton,
+};
+
+export const InteractiveIconButton = (args: IconButtonProps) => (
+
+
+ 
+
+
+ {buttonText}
+
+
+ ),
+)`
+ text-transform: none;
+ background-color: ${({ theme }) => theme.colors.grayscale.light5};
+ font-weight: ${({ theme }) => theme.typography.weights.normal};
+ color: ${({ theme }) => theme.colors.grayscale.dark2};
+ border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ margin: 0;
+ width: 100%;
+
+ &:hover,
+ &:focus {
+ background-color: ${({ theme }) => theme.colors.grayscale.light5};
+ color: ${({ theme }) => theme.colors.grayscale.dark2};
+ border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ }
+`;
+
+export default IconButton;
diff --git a/superset-frontend/src/components/Menu/Menu.tsx b/superset-frontend/src/components/Menu/Menu.tsx
index 6733d6a059228..0875b85f8a661 100644
--- a/superset-frontend/src/components/Menu/Menu.tsx
+++ b/superset-frontend/src/components/Menu/Menu.tsx
@@ -27,6 +27,7 @@ import { Row, Col, Grid } from 'antd';
import Icon from 'src/components/Icon';
import RightMenu from './MenuRight';
import { Languages } from './LanguagePicker';
+import { URL_PARAMS } from '../../constants';
interface BrandProps {
path: string;
@@ -158,7 +159,7 @@ export function Menu({
return () => window.removeEventListener('resize', windowResize);
}, []);
- const standalone = getUrlParam('standalone', 'boolean');
+ const standalone = getUrlParam(URL_PARAMS.standalone);
if (standalone) return <>;
const renderSubMenu = ({
diff --git a/superset-frontend/src/components/Menu/MenuRight.tsx b/superset-frontend/src/components/Menu/MenuRight.tsx
index 9263c1c621259..a722834bdf442 100644
--- a/superset-frontend/src/components/Menu/MenuRight.tsx
+++ b/superset-frontend/src/components/Menu/MenuRight.tsx
@@ -27,7 +27,7 @@ import { NavBarProps, MenuObjectProps } from './Menu';
export const dropdownItems = [
{
label: t('SQL query'),
- url: '/superset/sqllab',
+ url: '/superset/sqllab?new=true',
icon: 'fa-fw fa-search',
},
{
diff --git a/superset-frontend/src/components/Tabs/Tabs.tsx b/superset-frontend/src/components/Tabs/Tabs.tsx
index f5a1d148f36a5..704d84b5220f0 100644
--- a/superset-frontend/src/components/Tabs/Tabs.tsx
+++ b/superset-frontend/src/components/Tabs/Tabs.tsx
@@ -66,11 +66,6 @@ const StyledTabs = ({
.ant-tabs-nav-list {
width: 100%;
}
-
- .ant-tabs-tab {
- width: 0;
- margin-right: 0;
- }
`};
.ant-tabs-tab-btn {
diff --git a/superset-frontend/src/constants.ts b/superset-frontend/src/constants.ts
index ad7683681b939..bfa7033697cbc 100644
--- a/superset-frontend/src/constants.ts
+++ b/superset-frontend/src/constants.ts
@@ -23,9 +23,19 @@ export const BOOL_TRUE_DISPLAY = 'True';
export const BOOL_FALSE_DISPLAY = 'False';
export const URL_PARAMS = {
- standalone: 'standalone',
- preselectFilters: 'preselect_filters',
-};
+ standalone: {
+ name: 'standalone',
+ type: 'number',
+ },
+ preselectFilters: {
+ name: 'preselect_filters',
+ type: 'object',
+ },
+ showFilters: {
+ name: 'show_filters',
+ type: 'boolean',
+ },
+} as const;
/**
* Faster debounce delay for inputs without expensive operation.
diff --git a/superset-frontend/src/dashboard/actions/dashboardState.js b/superset-frontend/src/dashboard/actions/dashboardState.js
index ac2ead0d74330..d0b39e2ff14d7 100644
--- a/superset-frontend/src/dashboard/actions/dashboardState.js
+++ b/superset-frontend/src/dashboard/actions/dashboardState.js
@@ -344,6 +344,11 @@ export function setDirectPathToChild(path) {
return { type: SET_DIRECT_PATH, path };
}
+export const SET_LAST_FOCUSED_TAB = 'SET_LAST_FOCUSED_TAB';
+export function setLastFocusedTab(tabId) {
+ return { type: SET_LAST_FOCUSED_TAB, tabId };
+}
+
export const SET_FOCUSED_FILTER_FIELD = 'SET_FOCUSED_FILTER_FIELD';
export function setFocusedFilterField(chartId, column) {
return { type: SET_FOCUSED_FILTER_FIELD, chartId, column };
diff --git a/superset-frontend/src/dashboard/actions/hydrate.js b/superset-frontend/src/dashboard/actions/hydrate.js
index 2928df65737c2..62751033ad672 100644
--- a/superset-frontend/src/dashboard/actions/hydrate.js
+++ b/superset-frontend/src/dashboard/actions/hydrate.js
@@ -27,7 +27,6 @@ import {
import { chart } from 'src/chart/chartReducer';
import { initSliceEntities } from 'src/dashboard/reducers/sliceEntities';
import { getInitialState as getInitialNativeFilterState } from 'src/dashboard/reducers/nativeFilters';
-import { getParam } from 'src/modules/utils';
import { applyDefaultFormData } from 'src/explore/store';
import { buildActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
import findPermission, {
@@ -54,6 +53,8 @@ import getFilterConfigsFromFormdata from 'src/dashboard/util/getFilterConfigsFro
import getLocationHash from 'src/dashboard/util/getLocationHash';
import newComponentFactory from 'src/dashboard/util/newComponentFactory';
import { TIME_RANGE } from 'src/visualizations/FilterBox/FilterBox';
+import { URL_PARAMS } from 'src/constants';
+import { getUrlParam } from 'src/utils/urlUtils';
import { FeatureFlag, isFeatureEnabled } from '../../featureFlags';
import extractUrlParams from '../util/extractUrlParams';
@@ -77,9 +78,9 @@ export const hydrateDashboard = (dashboardData, chartData, datasourcesData) => (
});
try {
// allow request parameter overwrite dashboard metadata
- preselectFilters = JSON.parse(
- getParam('preselect_filters') || metadata.default_filters,
- );
+ preselectFilters =
+ getUrlParam(URL_PARAMS.preselectFilters) ||
+ JSON.parse(metadata.default_filters);
} catch (e) {
//
}
@@ -376,6 +377,7 @@ export const hydrateDashboard = (dashboardData, chartData, datasourcesData) => (
hasUnsavedChanges: false,
maxUndoHistoryExceeded: false,
lastModifiedTime: dashboardData.changed_on,
+ lastFocusedTabId: null,
},
dashboardLayout,
},
diff --git a/superset-frontend/src/dashboard/actions/nativeFilters.ts b/superset-frontend/src/dashboard/actions/nativeFilters.ts
index 23ce35d241de8..e01a5a67244ef 100644
--- a/superset-frontend/src/dashboard/actions/nativeFilters.ts
+++ b/superset-frontend/src/dashboard/actions/nativeFilters.ts
@@ -85,11 +85,19 @@ export const setFilterConfiguration = (
endpoint: `/api/v1/dashboard/${id}`,
});
+ const mergedFilterConfig = filterConfig.map(filter => {
+ const oldFilter = oldFilters[filter.id];
+ if (!oldFilter) {
+ return filter;
+ }
+ return { ...oldFilter, ...filter };
+ });
+
try {
const response = await updateDashboard({
json_metadata: JSON.stringify({
...metadata,
- native_filter_configuration: filterConfig,
+ native_filter_configuration: mergedFilterConfig,
}),
});
dispatch(
@@ -99,12 +107,20 @@ export const setFilterConfiguration = (
);
dispatch({
type: SET_FILTER_CONFIG_COMPLETE,
- filterConfig,
+ filterConfig: mergedFilterConfig,
});
- dispatch(setDataMaskForFilterConfigComplete(filterConfig, oldFilters));
+ dispatch(
+ setDataMaskForFilterConfigComplete(mergedFilterConfig, oldFilters),
+ );
} catch (err) {
- dispatch({ type: SET_FILTER_CONFIG_FAIL, filterConfig });
- dispatch({ type: SET_DATA_MASK_FOR_FILTER_CONFIG_FAIL, filterConfig });
+ dispatch({
+ type: SET_FILTER_CONFIG_FAIL,
+ filterConfig: mergedFilterConfig,
+ });
+ dispatch({
+ type: SET_DATA_MASK_FOR_FILTER_CONFIG_FAIL,
+ filterConfig: mergedFilterConfig,
+ });
}
};
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index 877cea9c3fa23..807fe46b75dea 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -120,7 +120,9 @@ const DashboardBuilder: FC = () => {
isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS) &&
(canEdit || (!canEdit && filterValues.length !== 0));
- const [dashboardFiltersOpen, setDashboardFiltersOpen] = useState(true);
+ const [dashboardFiltersOpen, setDashboardFiltersOpen] = useState(
+ getUrlParam(URL_PARAMS.showFilters) ?? true,
+ );
const toggleDashboardFiltersOpen = (visible?: boolean) => {
setDashboardFiltersOpen(visible ?? !dashboardFiltersOpen);
@@ -152,7 +154,7 @@ const DashboardBuilder: FC = () => {
: undefined;
const hideDashboardHeader =
- getUrlParam(URL_PARAMS.standalone, 'number') ===
+ getUrlParam(URL_PARAMS.standalone) ===
DashboardStandaloneMode.HIDE_NAV_AND_TITLE;
const barTopOffset =
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
index 9c58d853e4c1f..00c5d73ae5b71 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
@@ -21,7 +21,7 @@
import { ParentSize } from '@vx/responsive';
import Tabs from 'src/components/Tabs';
import React, { FC, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
import DashboardGrid from 'src/dashboard/containers/DashboardGrid';
import getLeafComponentIdFromPath from 'src/dashboard/util/getLeafComponentIdFromPath';
import { DashboardLayout, LayoutItem, RootState } from 'src/dashboard/types';
@@ -30,6 +30,10 @@ import {
DASHBOARD_ROOT_DEPTH,
} from 'src/dashboard/util/constants';
import { getRootLevelTabIndex } from './utils';
+import { Filters } from '../../reducers/types';
+import { getChartIdsInFilterScope } from '../../util/activeDashboardFilters';
+import { findTabsWithChartsInScope } from '../nativeFilters/utils';
+import { setFilterConfiguration } from '../../actions/nativeFilters';
type DashboardContainerProps = {
topLevelTabs?: LayoutItem;
@@ -39,6 +43,9 @@ const DashboardContainer: FC = ({ topLevelTabs }) => {
const dashboardLayout = useSelector(
state => state.dashboardLayout.present,
);
+ const nativeFilters = useSelector(
+ state => state.nativeFilters.filters,
+ );
const directPathToChild = useSelector(
state => state.dashboardState.directPathToChild,
);
@@ -46,10 +53,37 @@ const DashboardContainer: FC = ({ topLevelTabs }) => {
getRootLevelTabIndex(dashboardLayout, directPathToChild),
);
+ const dispatch = useDispatch();
+
useEffect(() => {
setTabIndex(getRootLevelTabIndex(dashboardLayout, directPathToChild));
}, [getLeafComponentIdFromPath(directPathToChild)]);
+ // recalculate charts and tabs in scopes of native filters only when a scope or dashboard layout changes
+ const nativeFiltersValues = Object.values(nativeFilters);
+ const scopes = nativeFiltersValues.map(filter => filter.scope);
+ useEffect(() => {
+ nativeFiltersValues.forEach(filter => {
+ const filterScope = filter.scope;
+ const chartsInScope = getChartIdsInFilterScope({
+ filterScope: {
+ scope: filterScope.rootPath,
+ // @ts-ignore
+ immune: filterScope.excluded,
+ },
+ });
+ const tabsInScope = findTabsWithChartsInScope(
+ dashboardLayout,
+ chartsInScope,
+ );
+ Object.assign(filter, {
+ chartsInScope,
+ tabsInScope: Array.from(tabsInScope),
+ });
+ });
+ dispatch(setFilterConfiguration(nativeFiltersValues));
+ }, [JSON.stringify(scopes), JSON.stringify(dashboardLayout)]);
+
const childIds: string[] = topLevelTabs
? topLevelTabs.children
: [DASHBOARD_GRID_ID];
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts b/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts
index 7560f858f58a2..9d7b84799ba5e 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts
@@ -192,20 +192,15 @@ export const selectNativeIndicatorsForChart = (
const getStatus = ({
value,
- isAffectedByScope,
column,
type = DataMaskType.NativeFilters,
}: {
value: any;
- isAffectedByScope: boolean;
column?: string;
type?: DataMaskType;
}): IndicatorStatus => {
// a filter is only considered unset if it's value is null
const hasValue = value !== null;
- if (!isAffectedByScope) {
- return IndicatorStatus.Unset;
- }
if (type === DataMaskType.CrossFilters && hasValue) {
return IndicatorStatus.CrossFilterApplied;
}
@@ -223,16 +218,18 @@ export const selectNativeIndicatorsForChart = (
let nativeFilterIndicators: any = [];
if (isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS)) {
- nativeFilterIndicators = Object.values(nativeFilters.filters).map(
- nativeFilter => {
- const isAffectedByScope = getTreeCheckedItems(
- nativeFilter.scope,
- dashboardLayout,
- ).some(
+ nativeFilterIndicators = Object.values(nativeFilters.filters)
+ .filter(nativeFilter =>
+ getTreeCheckedItems(nativeFilter.scope, dashboardLayout).some(
layoutItem => dashboardLayout[layoutItem]?.meta?.chartId === chartId,
- );
+ ),
+ )
+ .map(nativeFilter => {
const column = nativeFilter.targets[0]?.column?.name;
- let value = dataMask[nativeFilter.id]?.filterState?.value ?? null;
+ let value =
+ dataMask[nativeFilter.id]?.filterState?.label ??
+ dataMask[nativeFilter.id]?.filterState?.value ??
+ null;
if (!Array.isArray(value) && value !== null) {
value = [value];
}
@@ -240,26 +237,28 @@ export const selectNativeIndicatorsForChart = (
column,
name: nativeFilter.name,
path: [nativeFilter.id],
- status: getStatus({ value, isAffectedByScope, column }),
+ status: getStatus({ value, column }),
value,
};
- },
- );
+ });
}
let crossFilterIndicators: any = [];
if (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)) {
crossFilterIndicators = Object.values(chartConfiguration)
- .map(chartConfig => {
- const scope = chartConfig?.crossFilters?.scope;
- const isAffectedByScope = getTreeCheckedItems(
- scope,
+ .filter(chartConfig =>
+ getTreeCheckedItems(
+ chartConfig?.crossFilters?.scope,
dashboardLayout,
).some(
layoutItem => dashboardLayout[layoutItem]?.meta?.chartId === chartId,
- );
-
- let value = dataMask[chartConfig.id]?.filterState?.value ?? null;
+ ),
+ )
+ .map(chartConfig => {
+ let value =
+ dataMask[chartConfig.id]?.filterState?.label ??
+ dataMask[chartConfig.id]?.filterState?.value ??
+ null;
if (!Array.isArray(value) && value !== null) {
value = [value];
}
@@ -270,7 +269,6 @@ export const selectNativeIndicatorsForChart = (
path: [`${chartConfig.id}`],
status: getStatus({
value,
- isAffectedByScope,
type: DataMaskType.CrossFilters,
}),
value,
diff --git a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
index 9b9aefe03b6f6..4ed5fd623d153 100644
--- a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
@@ -168,7 +168,7 @@ class HeaderActionsDropdown extends React.PureComponent {
window.location.pathname,
getActiveFilters(),
window.location.hash,
- getUrlParam(URL_PARAMS.standalone, 'number'),
+ !getUrlParam(URL_PARAMS.standalone),
);
window.location.replace(url);
break;
diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx
index f4868d0e6a08e..102acae84aa02 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx
@@ -85,37 +85,46 @@ const defaultProps = {
* If ChartHolder were a function component, this could be implemented as a hook instead.
*/
const FilterFocusHighlight = React.forwardRef(
- ({ chartId, focusedFilterScope, ...otherProps }, ref) => {
+ ({ chartId, focusedFilterScope, nativeFilters, ...otherProps }, ref) => {
const theme = useTheme();
- if (!focusedFilterScope) return ;
+ const focusedNativeFilterId = nativeFilters.focusedFilterId;
+ if (!(focusedFilterScope || focusedNativeFilterId))
+ return ;
// we use local styles here instead of a conditionally-applied class,
// because adding any conditional class to this container
// causes performance issues in Chrome.
// default to the "de-emphasized" state
- let styles = { opacity: 0.3, pointerEvents: 'none' };
+ const unfocusedChartStyles = { opacity: 0.3, pointerEvents: 'none' };
+ const focusedChartStyles = {
+ borderColor: theme.colors.primary.light2,
+ opacity: 1,
+ boxShadow: `0px 0px ${theme.gridUnit * 2}px ${
+ theme.colors.primary.light2
+ }`,
+ pointerEvents: 'auto',
+ };
- if (
+ if (focusedNativeFilterId) {
+ if (
+ nativeFilters.filters[focusedNativeFilterId].chartsInScope.includes(
+ chartId,
+ )
+ ) {
+ return ;
+ }
+ } else if (
chartId === focusedFilterScope.chartId ||
getChartIdsInFilterScope({
filterScope: focusedFilterScope.scope,
}).includes(chartId)
) {
- // apply the "highlighted" state if this chart
- // contains a filter being focused, or is in scope of a focused filter.
- styles = {
- borderColor: theme.colors.primary.light2,
- opacity: 1,
- boxShadow: `0px 0px ${theme.gridUnit * 2}px ${
- theme.colors.primary.light2
- }`,
- pointerEvents: 'auto',
- };
+ return ;
}
// inline styles are used here due to a performance issue when adding/changing a class, which causes a reflow
- return ;
+ return ;
},
);
@@ -233,6 +242,7 @@ class ChartHolder extends React.Component {
isComponentVisible,
dashboardId,
focusedFilterScope,
+ nativeFilters,
} = this.props;
// inherit the size of parent columns
@@ -291,6 +301,7 @@ class ChartHolder extends React.Component {
{
editMode: false,
isComponentVisible: true,
dashboardId: 123,
+ nativeFilters: nativeFiltersInfo.filters,
};
const renderWrapper = (props = defaultProps, state = mockState) =>
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
index 73cdca34ed155..faa1e046eff7a 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
@@ -18,6 +18,7 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
+import { styled } from '@superset-ui/core';
import DashboardComponent from '../../containers/DashboardComponent';
import DragDroppable from '../dnd/DragDroppable';
@@ -62,6 +63,17 @@ const defaultProps = {
onResizeStop() {},
};
+const TabTitleContainer = styled.div`
+ ${({ isHighlighted, theme: { gridUnit, colors } }) => `
+ padding: ${gridUnit}px ${gridUnit * 2}px;
+ margin: ${-gridUnit}px ${gridUnit * -2}px;
+ transition: box-shadow 0.2s ease-in-out;
+ ${
+ isHighlighted && `box-shadow: 0 0 ${gridUnit}px ${colors.primary.light1};`
+ }
+ `}
+`;
+
export default class Tab extends React.PureComponent {
constructor(props) {
super(props);
@@ -192,6 +204,7 @@ export default class Tab extends React.PureComponent {
editMode,
filters,
isFocused,
+ isHighlighted,
} = this.props;
return (
@@ -205,7 +218,11 @@ export default class Tab extends React.PureComponent {
editMode={editMode}
>
{({ dropIndicatorProps, dragSourceRef }) => (
-
{tabIds.map((tabId, tabIndex) => (
= ({
+ dataMaskSelected,
filter,
directPathToChild,
onFilterSelectionChange,
@@ -53,6 +56,7 @@ const CascadeFilterControl: React.FC = ({
= ({
{filter.cascadeChildren?.map(childFilter => (
= ({
+ dataMaskSelected,
filter,
visible,
onVisibleChange,
@@ -83,9 +82,7 @@ const CascadePopover: React.FC = ({
directPathToChild,
}) => {
const [currentPathToChild, setCurrentPathToChild] = useState();
- const dataMask = useSelector(
- state => state.dataMask[filter.id] ?? getInitialDataMask(filter.id),
- );
+ const dataMask = dataMaskSelected[filter.id];
useEffect(() => {
setCurrentPathToChild(directPathToChild);
@@ -98,7 +95,7 @@ const CascadePopover: React.FC = ({
const getActiveChildren = useCallback(
(filter: CascadeFilter): CascadeFilter[] | null => {
const children = filter.cascadeChildren || [];
- const currentValue = dataMask.filterState?.value;
+ const currentValue = dataMask?.filterState?.value;
const activeChildren = children.flatMap(
childFilter => getActiveChildren(childFilter) || [],
@@ -147,6 +144,7 @@ const CascadePopover: React.FC = ({
if (!filter.cascadeChildren?.length) {
return (
= ({
const content = (
= ({
-
+
);
};
diff --git a/superset-frontend/src/views/CRUD/chart/ChartList.tsx b/superset-frontend/src/views/CRUD/chart/ChartList.tsx
index e2ee33d5cca69..4f2211ebe728d 100644
--- a/superset-frontend/src/views/CRUD/chart/ChartList.tsx
+++ b/superset-frontend/src/views/CRUD/chart/ChartList.tsx
@@ -17,35 +17,35 @@
* under the License.
*/
import {
- SupersetClient,
getChartMetadataRegistry,
- t,
styled,
+ SupersetClient,
+ t,
} from '@superset-ui/core';
import React, { useMemo, useState } from 'react';
import rison from 'rison';
import { uniqBy } from 'lodash';
-import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
+import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
import {
- createFetchRelated,
createErrorHandler,
+ createFetchRelated,
handleBulkChartExport,
handleChartDelete,
} from 'src/views/CRUD/utils';
import {
- useListViewResource,
- useFavoriteStatus,
useChartEditModal,
+ useFavoriteStatus,
+ useListViewResource,
} from 'src/views/CRUD/hooks';
import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
import SubMenu, { SubMenuProps } from 'src/components/Menu/SubMenu';
import FaveStar from 'src/components/FaveStar';
import ListView, {
- ListViewProps,
Filter,
+ FilterOperator,
Filters,
+ ListViewProps,
SelectOption,
- FilterOperator,
} from 'src/components/ListView';
import { getFromLocalStorage } from 'src/utils/localStorageHelpers';
import withToasts from 'src/messageToasts/enhancers/withToasts';
@@ -54,6 +54,7 @@ import ImportModelsModal from 'src/components/ImportModal/index';
import Chart from 'src/types/Chart';
import { Tooltip } from 'src/components/Tooltip';
import Icons from 'src/components/Icons';
+import { nativeFilterGate } from 'src/dashboard/components/nativeFilters/utils';
import ChartCard from './ChartCard';
const PAGE_SIZE = 25;
@@ -454,6 +455,7 @@ function ChartList(props: ChartListProps) {
unfilteredLabel: t('All'),
selects: registry
.keys()
+ .filter(k => nativeFilterGate(registry.get(k)?.behaviors || []))
.map(k => ({ label: registry.get(k)?.name || k, value: k }))
.sort((a, b) => {
if (!a.label || !b.label) {
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
index d1105e7062229..fda65baa27038 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
@@ -29,8 +29,9 @@ import { Tooltip } from 'src/components/Tooltip';
import Icons from 'src/components/Icons';
import ListView, { FilterOperator, Filters } from 'src/components/ListView';
import { commonMenuData } from 'src/views/CRUD/data/common';
-import DatabaseModal from 'src/views/CRUD/data/database/DatabaseModal';
import ImportModelsModal from 'src/components/ImportModal/index';
+import DatabaseModal from './DatabaseModal';
+
import { DatabaseObject } from './types';
const PAGE_SIZE = 25;
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
index f0542e481c121..5c7c729da5893 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -17,11 +17,14 @@
* under the License.
*/
import React, { FormEvent } from 'react';
-import cx from 'classnames';
+import { SupersetTheme, JsonObject } from '@superset-ui/core';
import { InputProps } from 'antd/lib/input';
-import { FormLabel, FormItem } from 'src/components/Form';
-import { Input } from 'src/common/components';
-import { StyledFormHeader, formScrollableStyles } from './styles';
+import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
+import {
+ StyledFormHeader,
+ formScrollableStyles,
+ validatedFormStyles,
+} from './styles';
import { DatabaseForm } from '../types';
export const FormFieldOrder = [
@@ -33,64 +36,137 @@ export const FormFieldOrder = [
'database_name',
];
-const CHANGE_METHOD = {
- onChange: 'onChange',
- onPropertiesChange: 'onPropertiesChange',
-};
+interface FieldPropTypes {
+ required: boolean;
+ changeMethods: { onParametersChange: (value: any) => string } & {
+ onChange: (value: any) => string;
+ };
+ validationErrors: JsonObject | null;
+ getValidation: () => void;
+}
+
+const hostField = ({
+ required,
+ changeMethods,
+ getValidation,
+ validationErrors,
+}: FieldPropTypes) => (
+ setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ >
+
-
-
- {table.name}
-
-
+
+ {table.name}
+
+
-
+ );
- renderBody() {
- const { table } = this.props;
+ const renderBody = () => {
let cols;
if (table.columns) {
cols = table.columns.slice();
- if (this.state.sortColumns) {
+ if (sortColumns) {
cols.sort((a, b) => {
const colA = a.name.toUpperCase();
const colB = b.name.toUpperCase();
@@ -253,33 +232,54 @@ class TableElement extends React.PureComponent {
const metadata = (
- {table.isMetadataLoading || table.isExtraMetadataLoading ? (
- e.stopPropagation()}
- >
- {this.renderControls()}
-
- )}
-
+
+ {table.isMetadataLoading || table.isExtraMetadataLoading ? (
+ e.stopPropagation()}
+ >
+ {renderControls()}
+
+ )}
- );
- }
+ this.setHover(true)}
- onMouseLeave={() => this.setHover(false)}
+ onMouseEnter={() => setHover(true)}
+ onMouseLeave={() => setHover(false)}
css={{ paddingTop: 6 }}
>
- {this.renderWell()}
+ {renderWell()}
);
return metadata;
- }
+ };
- render() {
- return (
-
- {cols &&
- cols.map(col =>
+
+
)}
);
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
index 427145b89eb18..c41abf83a4b08 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
@@ -31,7 +31,11 @@ import findTabIndexByComponentId from '../../util/findTabIndexByComponentId';
import getDirectPathToTabIndex from '../../util/getDirectPathToTabIndex';
import getLeafComponentIdFromPath from '../../util/getLeafComponentIdFromPath';
import { componentShape } from '../../util/propShapes';
-import { NEW_TAB_ID, DASHBOARD_ROOT_ID } from '../../util/constants';
+import {
+ NEW_TAB_ID,
+ DASHBOARD_ROOT_ID,
+ DASHBOARD_GRID_ID,
+} from '../../util/constants';
import { RENDER_TAB, RENDER_TAB_CONTENT } from './Tab';
import { TAB_TYPE } from '../../util/componentTypes';
@@ -268,11 +272,28 @@ class Tabs extends React.PureComponent {
renderHoverMenu,
isComponentVisible: isCurrentTabVisible,
editMode,
+ nativeFilters,
+ dashboardLayout,
+ lastFocusedTabId,
+ setLastFocusedTab,
} = this.props;
const { children: tabIds } = tabsComponent;
const { tabIndex: selectedTabIndex, activeKey } = this.state;
+ // On dashboards with top level tabs, set initial focus to the active top level tab
+ const dashboardRoot = dashboardLayout[DASHBOARD_ROOT_ID];
+ const rootChildId = dashboardRoot.children[0];
+ const isTopLevelTabs = rootChildId !== DASHBOARD_GRID_ID;
+ if (isTopLevelTabs && !lastFocusedTabId) {
+ setLastFocusedTab(activeKey);
+ }
+
+ let tabsToHighlight;
+ if (nativeFilters.focusedFilterId) {
+ tabsToHighlight =
+ nativeFilters.filters[nativeFilters.focusedFilterId].tabsInScope;
+ }
return (
{activeFilters.map(activeFilter => (
{
userEvent.click(screen.getByTestId(getTestId('collapsable')));
userEvent.click(screen.getByTestId(getTestId('create-filter')));
// select filter
- userEvent.click(screen.getByText('Select filter'));
- userEvent.click(screen.getByText('Time filter'));
+ userEvent.click(screen.getByText('Value'));
+ userEvent.click(screen.getByText('Time range'));
userEvent.type(screen.getByTestId(getModalTestId('name-input')), FILTER_NAME);
userEvent.click(screen.getByText('Save'));
await screen.findByText('All Filters (1)');
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index 157f50e09d449..14dc65b90655e 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -42,6 +42,7 @@ const StyledFilterControlContainer = styled.div`
`;
const FilterControl: React.FC = ({
+ dataMaskSelected,
filter,
icon,
onFilterSelectionChange,
@@ -57,6 +58,7 @@ const FilterControl: React.FC = ({
theme.gridUnit * 4}px;
@@ -33,7 +41,7 @@ const Wrapper = styled.div`
type FilterControlsProps = {
directPathToChild?: string[];
- dataMaskSelected: DataMaskState;
+ dataMaskSelected: DataMaskStateWithId;
onFilterSelectionChange: (filter: Filter, dataMask: DataMask) => void;
};
@@ -44,7 +52,18 @@ const FilterControls: FC = ({
}) => {
const [visiblePopoverId, setVisiblePopoverId] = useState(null);
const filters = useFilters();
+ const dashboardLayout = useDashboardLayout();
+ const lastFocusedTabId = useSelector(
+ state => state.dashboardState?.lastFocusedTabId,
+ );
const filterValues = Object.values(filters);
+ const portalNodes = React.useMemo(() => {
+ const nodes = new Array(filterValues.length);
+ for (let i = 0; i < filterValues.length; i += 1) {
+ nodes[i] = portals.createHtmlPortalNode();
+ }
+ return nodes;
+ }, [filterValues.length]);
const cascadeFilters = useMemo(() => {
const filtersWithValue = filterValues.map(filter => ({
@@ -53,22 +72,91 @@ const FilterControls: FC = ({
}));
return buildCascadeFiltersTree(filtersWithValue);
}, [filterValues, dataMaskSelected]);
+ const cascadeFilterIds = new Set(cascadeFilters.map(item => item.id));
+
+ let filtersInScope: CascadeFilter[] = [];
+ const filtersOutOfScope: CascadeFilter[] = [];
+ const dashboardHasTabs = Object.values(dashboardLayout).some(
+ element => element.type === TAB_TYPE,
+ );
+ const showCollapsePanel = dashboardHasTabs && cascadeFilters.length > 0;
+ if (!lastFocusedTabId || !dashboardHasTabs) {
+ filtersInScope = cascadeFilters;
+ } else {
+ cascadeFilters.forEach((filter, index) => {
+ if (cascadeFilters[index].tabsInScope?.includes(lastFocusedTabId)) {
+ filtersInScope.push(filter);
+ } else {
+ filtersOutOfScope.push(filter);
+ }
+ });
+ }
return (
- {cascadeFilters.map(filter => (
-
- setVisiblePopoverId(visible ? filter.id : null)
- }
- filter={filter}
- onFilterSelectionChange={onFilterSelectionChange}
- directPathToChild={directPathToChild}
- />
- ))}
+ {portalNodes
+ .filter((node, index) => cascadeFilterIds.has(filterValues[index].id))
+ .map((node, index) => (
+
+
+ setVisiblePopoverId(visible ? cascadeFilters[index].id : null)
+ }
+ filter={cascadeFilters[index]}
+ onFilterSelectionChange={onFilterSelectionChange}
+ directPathToChild={directPathToChild}
+ />
+
+ ))}
+ {filtersInScope.map(filter => {
+ const index = filterValues.findIndex(f => f.id === filter.id);
+ return css`
+ &.ant-collapse {
+ margin-top: ${filtersInScope.length > 0
+ ? theme.gridUnit * 6
+ : 0}px;
+ & > .ant-collapse-item {
+ & > .ant-collapse-header {
+ padding-left: 0;
+ padding-bottom: ${theme.gridUnit * 2}px;
+
+ & > .ant-collapse-arrow {
+ right: ${theme.gridUnit}px;
+ }
+ }
+
+ & .ant-collapse-content-box {
+ padding: ${theme.gridUnit * 4}px 0 0;
+ }
+ }
+ }
+ `}
+ >
+
+ {filtersOutOfScope.map(filter => {
+ const index = cascadeFilters.findIndex(f => f.id === filter.id);
+ return
+
+ )}
);
};
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
index 200edfa35c66d..495f50f437bf4 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
@@ -47,16 +47,20 @@ import { useCascadingFilters } from './state';
const FilterItem = styled.div`
min-height: ${({ theme }) => theme.gridUnit * 11}px;
padding-bottom: ${({ theme }) => theme.gridUnit * 3}px;
+ & > div > div {
+ height: auto;
+ }
`;
const FilterValue: React.FC = ({
+ dataMaskSelected,
filter,
directPathToChild,
onFilterSelectionChange,
}) => {
const { id, targets, filterType, adhoc_filters, time_range } = filter;
const metadata = getChartMetadataRegistry().get(filterType);
- const cascadingFilters = useCascadingFilters(id);
+ const cascadingFilters = useCascadingFilters(id, dataMaskSelected);
const [state, setState] = useState([]);
const [error, setError] = useState('');
const [formData, setFormData] = useState>({});
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/state.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/state.ts
index 7be5835780895..1aaf772722c16 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/state.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/state.ts
@@ -18,22 +18,27 @@
*/
import { useSelector } from 'react-redux';
import { NativeFiltersState } from 'src/dashboard/reducers/types';
+import { DataMaskStateWithId } from 'src/dataMask/types';
+import { ExtraFormData } from '@superset-ui/core';
import { mergeExtraFormData } from '../../utils';
-import { useNativeFiltersDataMask } from '../state';
// eslint-disable-next-line import/prefer-default-export
-export function useCascadingFilters(id: string) {
+export function useCascadingFilters(
+ id: string,
+ dataMaskSelected?: DataMaskStateWithId,
+): ExtraFormData {
const { filters } = useSelector(
state => state.nativeFilters,
);
const filter = filters[id];
const cascadeParentIds: string[] = filter?.cascadeParentIds ?? [];
let cascadedFilters = {};
- const nativeFiltersDataMask = useNativeFiltersDataMask();
cascadeParentIds.forEach(parentId => {
- const parentState = nativeFiltersDataMask[parentId] || {};
- const { extraFormData: parentExtra = {} } = parentState;
- cascadedFilters = mergeExtraFormData(cascadedFilters, parentExtra);
+ const parentState = dataMaskSelected?.[parentId];
+ cascadedFilters = mergeExtraFormData(
+ cascadedFilters,
+ parentState?.extraFormData,
+ );
});
return cascadedFilters;
}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts
index 0b39dd210be5e..93bf76d8c2946 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts
@@ -18,9 +18,11 @@
*/
import React from 'react';
import { DataMask } from '@superset-ui/core';
+import { DataMaskStateWithId } from 'src/dataMask/types';
import { Filter } from '../../types';
export interface FilterProps {
+ dataMaskSelected?: DataMaskStateWithId;
filter: Filter & {
dataMask?: DataMask;
};
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
index 50c16e95018f5..44a4f82aed723 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
@@ -19,7 +19,7 @@
/* eslint-disable no-param-reassign */
import { HandlerFunction, styled, t } from '@superset-ui/core';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import cx from 'classnames';
import Icon from 'src/components/Icon';
@@ -37,11 +37,7 @@ import { testWithId } from 'src/utils/testUtils';
import { Filter } from 'src/dashboard/components/nativeFilters/types';
import Loading from 'src/components/Loading';
import { getInitialDataMask } from 'src/dataMask/reducer';
-import {
- getOnlyExtraFormData,
- mapParentFiltersToChildren,
- TabIds,
-} from './utils';
+import { getOnlyExtraFormData, TabIds } from './utils';
import FilterSets from './FilterSets';
import {
useNativeFiltersDataMask,
@@ -175,10 +171,6 @@ const FilterBar: React.FC = ({
const filterValues = Object.values(filters);
const dataMaskApplied: DataMaskStateWithId = useNativeFiltersDataMask();
const [isFilterSetChanged, setIsFilterSetChanged] = useState(false);
- const cascadeChildren = useMemo(
- () => mapParentFiltersToChildren(filterValues),
- [filterValues],
- );
useEffect(() => {
setDataMaskSelected(() => dataMaskApplied);
@@ -190,15 +182,6 @@ const FilterBar: React.FC = ({
) => {
setIsFilterSetChanged(tab !== TabIds.AllFilters);
setDataMaskSelected(draft => {
- const children = cascadeChildren[filter.id] || [];
- // force instant updating on initialization or for parent filters when dataMaskSelected has filter
- if (
- dataMaskSelected[filter.id] &&
- (filter.isInstant || children.length > 0)
- ) {
- dispatch(updateDataMask(filter.id, dataMask));
- }
-
draft[filter.id] = {
...(getInitialDataMask(filter.id) as DataMaskWithId),
...dataMask,
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTabs.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTabs.tsx
index bab37da734089..3d687961eaf8e 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTabs.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTabs.tsx
@@ -24,7 +24,7 @@ import Icon from 'src/components/Icon';
import { FilterRemoval } from './types';
import { REMOVAL_DELAY_SECS } from './utils';
-export const FILTER_WIDTH = 200;
+export const FILTER_WIDTH = 180;
export const StyledSpan = styled.span`
cursor: pointer;
@@ -42,11 +42,9 @@ export const StyledFilterTitle = styled.span`
export const StyledAddFilterBox = styled.div`
color: ${({ theme }) => theme.colors.primary.dark1};
- text-align: left;
- padding: ${({ theme }) => theme.gridUnit * 2}px 0;
- margin: ${({ theme }) => theme.gridUnit * 3}px 0 0
- ${({ theme }) => -theme.gridUnit * 2}px;
- border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light1};
+ padding: ${({ theme }) => theme.gridUnit * 2}px;
+ border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ cursor: pointer;
&:hover {
color: ${({ theme }) => theme.colors.primary.base};
@@ -89,12 +87,19 @@ const FilterTabsContainer = styled(LineEditableTabs)`
& > .ant-tabs-content-holder {
border-left: 1px solid ${theme.colors.grayscale.light2};
- margin-right: ${theme.gridUnit * 4}px;
+ padding-right: ${theme.gridUnit * 4}px;
+ overflow-x: hidden;
+ overflow-y: auto;
}
+
& > .ant-tabs-content-holder ~ .ant-tabs-content-holder {
border: none;
}
+ &.ant-tabs-card > .ant-tabs-nav .ant-tabs-ink-bar {
+ visibility: hidden;
+ }
+
&.ant-tabs-left
> .ant-tabs-content-holder
> .ant-tabs-content
@@ -104,10 +109,13 @@ const FilterTabsContainer = styled(LineEditableTabs)`
}
.ant-tabs-nav-list {
- padding-top: ${theme.gridUnit * 4}px;
- padding-right: ${theme.gridUnit * 2}px;
- padding-bottom: ${theme.gridUnit * 4}px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ padding-top: ${theme.gridUnit * 2}px;
+ padding-right: ${theme.gridUnit}px;
+ padding-bottom: ${theme.gridUnit * 3}px;
padding-left: ${theme.gridUnit * 3}px;
+ width: 270px;
}
// extra selector specificity:
@@ -135,6 +143,24 @@ const FilterTabsContainer = styled(LineEditableTabs)`
justify-content: space-between;
text-transform: unset;
}
+
+ .ant-tabs-nav-more {
+ display: none;
+ }
+
+ .ant-tabs-extra-content {
+ width: 100%;
+ }
+ `}
+`;
+
+const StyledHeader = styled.div`
+ ${({ theme }) => `
+ color: ${theme.colors.grayscale.dark1};
+ font-size: ${theme.typography.sizes.l}px;
+ padding-top: ${theme.gridUnit * 4}px;
+ padding-right: ${theme.gridUnit * 4}px;
+ padding-left: ${theme.gridUnit * 4}px;
`}
`;
@@ -160,16 +186,37 @@ const FilterTabs: FC = ({
children,
}) => (
- {t('Filters')} ,
+ right: (
+ {
+ onEdit('', 'add');
+ setTimeout(() => {
+ const element = document.getElementById('native-filters-tabs');
+ if (element) {
+ const navList = element.getElementsByClassName(
+ 'ant-tabs-nav-list',
+ )[0];
+ navList.scrollTop = navList.scrollHeight;
+ }
+ }, 0);
+ }}
+ >
+
+ ),
+ }}
>
{filterIds.map(id => (
void;
+}
+
+const StyledContainer = styled.div<{ checked: boolean }>`
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ min-height: ${({ theme }) => theme.gridUnit * 10}px;
+ padding-top: ${({ theme }) => theme.gridUnit * 2 + 2}px;
+
+ .checkbox {
+ margin-bottom: ${({ theme, checked }) => (checked ? theme.gridUnit : 0)}px;
+ }
+
+ & > div {
+ margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ }
+`;
+
+const CollapsibleControl = (props: CollapsibleControlProps) => {
+ const { checked = false, title, children, onChange } = props;
+ const [isChecked, setIsChecked] = useState(checked);
+ return (
+
+ {
+ const value = e.target.checked;
+ setIsChecked(value);
+ if (onChange) {
+ onChange(value);
+ }
+ }}
+ >
+ {title}
+
+ {isChecked && children}
+
+ );
+};
+
+export { CollapsibleControl, CollapsibleControlProps };
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ControlItems.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ControlItems.tsx
deleted file mode 100644
index ae20a8886035c..0000000000000
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ControlItems.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import {
- CustomControlItem,
- InfoTooltipWithTrigger,
-} from '@superset-ui/chart-controls';
-import React, { FC } from 'react';
-import { Checkbox } from 'src/common/components';
-import { FormInstance } from 'antd/lib/form';
-import { getChartControlPanelRegistry, t } from '@superset-ui/core';
-import { Tooltip } from 'src/components/Tooltip';
-import { getControlItems, setNativeFilterFieldValues } from './utils';
-import { NativeFiltersForm, NativeFiltersFormItem } from '../types';
-import { StyledCheckboxFormItem } from './FiltersConfigForm';
-import { Filter } from '../../types';
-
-type ControlItemsProps = {
- disabled: boolean;
- filterId: string;
- forceUpdate: Function;
- filterToEdit?: Filter;
- form: FormInstance;
- formFilter?: NativeFiltersFormItem;
-};
-
-const ControlItems: FC = ({
- disabled,
- forceUpdate,
- form,
- filterId,
- filterToEdit,
- formFilter,
-}) => {
- const filterType = formFilter?.filterType;
-
- if (!filterType) return null;
-
- const controlPanelRegistry = getChartControlPanelRegistry();
- const controlItems =
- getControlItems(controlPanelRegistry.get(filterType)) ?? [];
- return (
- <>
- {controlItems
- .filter(
- (controlItem: CustomControlItem) =>
- controlItem?.config?.renderTrigger,
- )
- .map(controlItem => (
-
-
- {
- if (!controlItem.config.resetConfig) {
- forceUpdate();
- return;
- }
- setNativeFilterFieldValues(form, filterId, {
- defaultDataMask: null,
- });
- forceUpdate();
- }}
- >
- {controlItem.config.label}{' '}
- {controlItem.config.description && (
-
-
-
- ))}
-
- );
-};
-export default ControlItems;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx
index 0d05add39e707..524ab83cd79ec 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx
@@ -73,6 +73,7 @@ const DefaultValue: FC = ({
chartType={formFilter?.filterType}
hooks={{ setDataMask }}
enableNoResults={enableNoResults}
+ filterState={formFilter.defaultDataMask?.filterState}
/>
);
};
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index 85e642c87d433..76fa33bdc7097 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -32,9 +32,17 @@ import {
Metric,
} from '@superset-ui/chart-controls';
import { FormInstance } from 'antd/lib/form';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, {
+ useCallback,
+ useEffect,
+ useState,
+ useMemo,
+ forwardRef,
+ useImperativeHandle,
+} from 'react';
import { useSelector } from 'react-redux';
-import { Checkbox, Form, Input } from 'src/common/components';
+import { FormItem } from 'src/components/Form';
+import { Checkbox, Input } from 'src/common/components';
import { Select } from 'src/components/Select';
import SupersetResourceSelect, {
cachedSupersetGet,
@@ -45,7 +53,6 @@ import { addDangerToast } from 'src/messageToasts/actions';
import { ClientErrorObject } from 'src/utils/getClientErrorObject';
import SelectControl from 'src/explore/components/controls/SelectControl';
import Collapse from 'src/components/Collapse';
-import Button from 'src/components/Button';
import { getChartDataRequest } from 'src/chart/chartAction';
import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
import { waitForAsyncData } from 'src/middleware/asyncEvent';
@@ -60,10 +67,11 @@ import {
import { useBackendFormUpdate } from './state';
import { getFormData } from '../../utils';
import { Filter } from '../../types';
-import ControlItems from './ControlItems';
+import getControlItemsMap from './getControlItemsMap';
import FilterScope from './FilterScope/FilterScope';
import RemovedFilter from './RemovedFilter';
import DefaultValue from './DefaultValue';
+import { CollapsibleControl } from './CollapsibleControl';
import {
CASCADING_FILTERS,
getFiltersConfigModalTestId,
@@ -77,19 +85,42 @@ const StyledContainer = styled.div`
justify-content: space-between;
`;
-const StyledDatasetContainer = styled.div`
+const StyledRowContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
+ width: 100%;
`;
-export const StyledFormItem = styled(Form.Item)`
+export const StyledFormItem = styled(FormItem)`
width: 49%;
margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+
+ & .ant-form-item-label {
+ padding-bottom: 0px;
+ }
+
+ & .ant-form-item-control-input {
+ min-height: ${({ theme }) => theme.gridUnit * 10}px;
+ }
`;
-export const StyledCheckboxFormItem = styled(Form.Item)`
- margin-bottom: 0;
+export const StyledRowFormItem = styled(FormItem)`
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ min-width: 50%;
+
+ & .ant-form-item-label {
+ padding-bottom: 0px;
+ }
+
+ .ant-form-item-control-input-content > div > div {
+ height: auto;
+ }
+
+ & .ant-form-item-control-input {
+ min-height: ${({ theme }) => theme.gridUnit * 10}px;
+ }
`;
export const StyledLabel = styled.span`
@@ -98,7 +129,7 @@ export const StyledLabel = styled.span`
text-transform: uppercase;
`;
-const CleanFormItem = styled(Form.Item)`
+const CleanFormItem = styled(FormItem)`
margin-bottom: 0;
`;
@@ -120,6 +151,10 @@ const StyledCollapse = styled(Collapse)`
border: 0px;
}
+ .ant-collapse-content-box {
+ padding-top: ${({ theme }) => theme.gridUnit * 2}px;
+ }
+
&.ant-collapse > .ant-collapse-item {
border: 0px;
border-radius: 0px;
@@ -127,9 +162,29 @@ const StyledCollapse = styled(Collapse)`
`;
const StyledTabs = styled(Tabs)`
+ .ant-tabs-nav {
+ position: sticky;
+ top: 0px;
+ background: white;
+ z-index: 1;
+ }
+
.ant-tabs-nav-list {
padding: 0px;
}
+
+ .ant-form-item-label {
+ padding-bottom: 0px;
+ }
+`;
+
+const StyledAsterisk = styled.span`
+ color: ${({ theme }) => theme.colors.error.base};
+ font-family: SimSun, sans-serif;
+ margin-right: ${({ theme }) => theme.gridUnit - 1}px;
+ &:before {
+ content: '*';
+ }
`;
const FilterTabs = {
@@ -169,24 +224,51 @@ const FILTERS_WITHOUT_COLUMN = [
'filter_timecolumn',
'filter_groupby',
];
+
const FILTERS_WITH_ADHOC_FILTERS = ['filter_select', 'filter_range'];
+const BASIC_CONTROL_ITEMS = ['enableEmptyFilter', 'multiSelect'];
+
+// TODO: Rename the filter plugins and remove this mapping
+const FILTER_TYPE_NAME_MAPPING = {
+ [t('Select filter')]: t('Value'),
+ [t('Range filter')]: t('Numerical range'),
+ [t('Time filter')]: t('Time range'),
+ [t('Time column')]: t('Time column'),
+ [t('Time grain')]: t('Time grain'),
+ [t('Group By')]: t('Group by'),
+};
+
/**
* The configuration form for a specific filter.
* Assigns field values to `filters[filterId]` in the form.
*/
-export const FiltersConfigForm: React.FC = ({
- filterId,
- filterToEdit,
- removed,
- restoreFilter,
- form,
- parentFilters,
-}) => {
+const FiltersConfigForm = (
+ {
+ filterId,
+ filterToEdit,
+ removed,
+ restoreFilter,
+ form,
+ parentFilters,
+ }: FiltersConfigFormProps,
+ ref: React.RefObject,
+) => {
const [metrics, setMetrics] = useState([]);
+ const [activeTabKey, setActiveTabKey] = useState(
+ FilterTabs.configuration.key,
+ );
+ const [activeFilterPanelKey, setActiveFilterPanelKey] = useState<
+ string | string[]
+ >(FilterPanels.basic.key);
+ const [hasDefaultValue, setHasDefaultValue] = useState(
+ !!filterToEdit?.defaultDataMask?.filterState?.value,
+ );
const forceUpdate = useForceUpdate();
const [datasetDetails, setDatasetDetails] = useState>();
- const formFilter = form.getFieldValue('filters')?.[filterId] || {};
+ const defaultFormFilter = useMemo(() => {}, []);
+ const formFilter =
+ form.getFieldValue('filters')?.[filterId] || defaultFormFilter;
const nativeFilterItems = getChartMetadataRegistry().items;
const nativeFilterVizTypes = Object.entries(nativeFilterItems)
// @ts-ignore
@@ -228,6 +310,12 @@ export const FiltersConfigForm: React.FC = ({
}
}, [datasetId, hasColumn]);
+ useImperativeHandle(ref, () => ({
+ changeTab(tab: 'configuration' | 'scoping') {
+ setActiveTabKey(tab);
+ },
+ }));
+
const hasMetrics = hasColumn && !!metrics.length;
const hasFilledDataset =
@@ -243,7 +331,7 @@ export const FiltersConfigForm: React.FC = ({
useBackendFormUpdate(form, filterId);
- const refreshHandler = () => {
+ const refreshHandler = useCallback(() => {
if (!hasDataset || !formFilter?.dataset?.value) {
forceUpdate();
return;
@@ -287,7 +375,7 @@ export const FiltersConfigForm: React.FC = ({
forceUpdate();
}
});
- };
+ }, [filterId, forceUpdate, form, formFilter, hasDataset]);
const defaultDatasetSelectOptions = Object.values(loadedDatasets).map(
datasetToSelectOption,
@@ -304,6 +392,19 @@ export const FiltersConfigForm: React.FC = ({
...formFilter,
});
+ useEffect(() => {
+ if (hasDataset && hasFilledDataset && hasDefaultValue && isDataDirty) {
+ refreshHandler();
+ }
+ }, [
+ hasDataset,
+ hasFilledDataset,
+ hasDefaultValue,
+ formFilter,
+ isDataDirty,
+ refreshHandler,
+ ]);
+
const onDatasetSelectError = useCallback(
({ error, message }: ClientErrorObject) => {
let errorText = message || error || t('An error has occurred');
@@ -315,301 +416,463 @@ export const FiltersConfigForm: React.FC = ({
[],
);
- if (removed) {
- return restoreFilter(filterId)} />;
- }
-
const parentFilterOptions = parentFilters.map(filter => ({
value: filter.id,
label: filter.title,
}));
+ const parentFilter = parentFilterOptions.find(
+ ({ value }) => value === filterToEdit?.cascadeParentIds[0],
+ );
+
+ const hasParentFilter = !!parentFilter;
+
+ const hasPreFilter =
+ !!filterToEdit?.adhoc_filters || !!filterToEdit?.time_range;
+
+ const hasSorting =
+ typeof filterToEdit?.controlValues?.sortAscending === 'boolean';
+
const showDefaultValue = !hasDataset || (!isDataDirty && hasFilledDataset);
+ const controlItems = formFilter
+ ? getControlItemsMap({
+ disabled: false,
+ forceUpdate,
+ form,
+ filterId,
+ filterType: formFilter.filterType,
+ filterToEdit,
+ })
+ : {};
+
+ const onSortChanged = (value: boolean | undefined) => {
+ const previous = form.getFieldValue('filters')?.[filterId].controlValues;
+ setNativeFilterFieldValues(form, filterId, {
+ controlValues: {
+ ...previous,
+ sortAscending: value,
+ },
+ });
+ forceUpdate();
+ };
+
+ let hasCheckedAdvancedControl = hasParentFilter || hasPreFilter || hasSorting;
+ if (!hasCheckedAdvancedControl) {
+ hasCheckedAdvancedControl = Object.keys(controlItems)
+ .filter(key => !BASIC_CONTROL_ITEMS.includes(key))
+ .some(key => controlItems[key].checked);
+ }
+
+ useEffect(() => {
+ const activeFilterPanelKey = [FilterPanels.basic.key];
+ if (hasCheckedAdvancedControl) {
+ activeFilterPanelKey.push(FilterPanels.advanced.key);
+ }
+ setActiveFilterPanelKey(activeFilterPanelKey);
+ }, [hasCheckedAdvancedControl]);
+
+ if (removed) {
+ return restoreFilter(filterId)} />;
+ }
+
return (
- <>
-
-
-
- {t('Filter name')}}
- initialValue={filterToEdit?.name}
- rules={[{ required: !removed, message: t('Name is required') }]}
- >
-
-
+ setActiveTabKey(activeKey)}
+ centered
+ >
+
+
+ {t('Filter name')}}
+ initialValue={filterToEdit?.name}
+ rules={[{ required: !removed, message: t('Name is required') }]}
+ >
+
+
+ {t('Filter Type')}}
+ {...getFiltersConfigModalTestId('filter-type')}
+ >
+
+
+ {hasDataset && (
+
{t('Filter Type')}}
- {...getFiltersConfigModalTestId('filter-type')}
+ name={['filters', filterId, 'dataset']}
+ initialValue={{ value: initialDatasetId }}
+ label={{t('Dataset')} }
+ rules={[
+ { required: !removed, message: t('Dataset is required') },
+ ]}
+ {...getFiltersConfigModalTestId('datasource-input')}
>
-
-
- {hasDataset && (
-
+ {hasColumn && (
{t('Dataset')}}
+ // don't show the column select unless we have a dataset
+ // style={{ display: datasetId == null ? undefined : 'none' }}
+ name={['filters', filterId, 'column']}
+ initialValue={initColumn}
+ label={{t('Column')} }
rules={[
- { required: !removed, message: t('Dataset is required') },
+ { required: !removed, message: t('Field is required') },
]}
- {...getFiltersConfigModalTestId('datasource-input')}
+ data-test="field-input"
>
- {
- // We need reset column when dataset changed
- if (datasetId && e?.value !== datasetId) {
- setNativeFilterFieldValues(form, filterId, {
- defaultDataMask: null,
- column: null,
- });
- }
+ {
+ // We need reset default value when when column changed
+ setNativeFilterFieldValues(form, filterId, {
+ defaultDataMask: null,
+ });
forceUpdate();
}}
/>
- {hasColumn && (
- {t('Column')}}
- rules={[
- { required: !removed, message: t('Field is required') },
- ]}
- data-test="field-input"
- >
- {
- // We need reset default value when when column changed
+ )}
+
+ )}
+ setActiveFilterPanelKey(key)}
+ expandIconPosition="right"
+ >
+
+ {hasFilledDataset && (
+ setHasDefaultValue(value)}
+ >
+ {t('Default Value')}}
+ required
+ rules={[
+ {
+ required: true,
+ },
+ {
+ validator: (rule, value) => {
+ const hasValue = !!value.filterState?.value;
+ if (hasValue) {
+ return Promise.resolve();
+ }
+ return Promise.reject(
+ new Error(t('Default value is required')),
+ );
+ },
+ },
+ ]}
+ >
+ {showDefaultValue ? (
+ {
setNativeFilterFieldValues(form, filterId, {
- defaultDataMask: null,
+ defaultDataMask: dataMask,
});
+ form.validateFields([
+ ['filters', filterId, 'defaultDataMask'],
+ ]);
forceUpdate();
}}
+ filterId={filterId}
+ hasDataset={hasDataset}
+ form={form}
+ formData={newFormData}
+ enableNoResults={enableNoResults}
/>
-
- )}
-
- )}
-
+ ) : (
+ t('Fill all required fields to enable "Default Value"')
+ )}
+
+
+ {Object.keys(controlItems)
+ .filter(key => BASIC_CONTROL_ITEMS.includes(key))
+ .map(key => controlItems[key].element)}
+
+
+ {t('Apply changes instantly')}
+
+
+
+ {((hasDataset && hasAdditionalFilters) || hasMetrics) && (
- {hasFilledDataset && (
- {t('Parent filter')}}
- initialValue={parentFilterOptions.find(
- ({ value }) => value === filterToEdit?.cascadeParentIds[0],
- )}
- data-test="parent-filter-input"
+ {
+ if (checked) {
+ // execute after render
+ setTimeout(
+ () =>
+ form.validateFields([
+ ['filters', filterId, 'parentFilter'],
+ ]),
+ 0,
+ );
+ }
+ }}
>
-
-
+ {t('Parent filter')}}
+ initialValue={parentFilter}
+ data-test="parent-filter-input"
+ required
+ rules={[
+ {
+ required: true,
+ message: t('Parent filter is required'),
+ },
+ ]}
+ >
+
+
+
)}
-
- {t('Default Value')}}
+ {Object.keys(controlItems)
+ .filter(key => !BASIC_CONTROL_ITEMS.includes(key))
+ .map(key => controlItems[key].element)}
+ {hasDataset && hasAdditionalFilters && (
+ {
+ if (checked) {
+ // execute after render
+ setTimeout(
+ () =>
+ form.validateFields([
+ ['filters', filterId, 'adhoc_filters'],
+ ]),
+ 0,
+ );
+ }
+ }}
>
- {showDefaultValue ? (
- {
+
+ c.filterable,
+ ) || []
+ }
+ savedMetrics={datasetDetails?.metrics || []}
+ datasource={datasetDetails}
+ onChange={(filters: AdhocFilter[]) => {
setNativeFilterFieldValues(form, filterId, {
- defaultDataMask: dataMask,
+ adhoc_filters: filters,
});
forceUpdate();
}}
- filterId={filterId}
- hasDataset={hasDataset}
- form={form}
- formData={newFormData}
- enableNoResults={enableNoResults}
+ label={
+
+ {t('Pre-filter')}
+
+ }
/>
- ) : hasFilledDataset ? (
- t('Click "Populate" to get "Default Value" ->')
- ) : (
- t('Fill all required fields to enable "Default Value"')
- )}
-
-
-
-
- {t('Apply changes instantly')}
-
-
-
- {((hasDataset && hasAdditionalFilters) || hasMetrics) && (
-
- {hasDataset && hasAdditionalFilters && (
- <>
+
+ {t('Time range')}}
+ initialValue={filterToEdit?.time_range || 'No filter'}
+ >
+ {
+ setNativeFilterFieldValues(form, filterId, {
+ time_range: timeRange,
+ });
+ forceUpdate();
+ }}
+ />
+
+
+ )}
+ {formFilter?.filterType !== 'filter_range' && (
+ onSortChanged(checked || undefined)}
+ checked={hasSorting}
+ >
+
{t('Sort type')}}
>
- c.filterable,
- ) || []
+
- {t('Time range')}}
- initialValue={filterToEdit?.time_range || 'No filter'}
- >
- {
- setNativeFilterFieldValues(form, filterId, {
- time_range: timeRange,
- });
- forceUpdate();
- }}
- />
-
-
- )}
- {hasMetrics && (
- {t('Sort Metric')}}
- data-test="field-input"
- >
- ({
- value: metric.metric_name,
- label: metric.verbose_name ?? metric.metric_name,
- }))}
- onChange={(value: string | null): void => {
- if (value !== undefined) {
- setNativeFilterFieldValues(form, filterId, {
- sortMetric: value,
- });
- forceUpdate();
- }
- }}
- />
-
- )}
-
- )}
-
-
-
-
- setNativeFilterFieldValues(form, filterId, values)
- }
- pathToFormValue={['filters', filterId]}
- forceUpdate={forceUpdate}
- scope={filterToEdit?.scope}
- formScope={formFilter?.scope}
- formScoping={formFilter?.scoping}
- />
-
-
-
+ {hasMetrics && (
+ {t('Sort Metric')}}
+ data-test="field-input"
+ >
+ ({
+ value: metric.metric_name,
+ label: metric.verbose_name ?? metric.metric_name,
+ }))}
+ onChange={(value: string | null): void => {
+ if (value !== undefined) {
+ setNativeFilterFieldValues(form, filterId, {
+ sortMetric: value,
+ });
+ forceUpdate();
+ }
+ }}
+ />
+
+ )}
+
+
+ )}
+
+ )}
+
+
+
+
+ setNativeFilterFieldValues(form, filterId, values)
+ }
+ pathToFormValue={['filters', filterId]}
+ forceUpdate={forceUpdate}
+ scope={filterToEdit?.scope}
+ formScope={formFilter?.scope}
+ formScoping={formFilter?.scoping}
+ />
+
+
);
};
-export default FiltersConfigForm;
+export default forwardRef(
+ FiltersConfigForm,
+);
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ControlItems.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx
similarity index 61%
rename from superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ControlItems.test.tsx
rename to superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx
index 04cfe503c7f7d..fcff22da0ee74 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ControlItems.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx
@@ -19,23 +19,57 @@
import React from 'react';
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
+import { Filter } from 'src/dashboard/components/nativeFilters/types';
+import { FormInstance } from 'src/common/components';
import { getControlItems, setNativeFilterFieldValues } from './utils';
-
-import ControlItems from './ControlItems';
+import getControlItemsMap, { ControlItemsProps } from './getControlItemsMap';
jest.mock('./utils', () => ({
getControlItems: jest.fn(),
setNativeFilterFieldValues: jest.fn(),
}));
-const createProps = () => ({
+const formMock: FormInstance = {
+ __INTERNAL__: { itemRef: () => () => {} },
+ scrollToField: () => {},
+ getFieldInstance: () => {},
+ getFieldValue: () => {},
+ getFieldsValue: () => {},
+ getFieldError: () => [],
+ getFieldsError: () => [],
+ isFieldsTouched: () => false,
+ isFieldTouched: () => false,
+ isFieldValidating: () => false,
+ isFieldsValidating: () => false,
+ resetFields: () => {},
+ setFields: () => {},
+ setFieldsValue: () => {},
+ validateFields: () => Promise.resolve(),
+ submit: () => {},
+};
+
+const filterMock: Filter = {
+ cascadeParentIds: [],
+ defaultDataMask: {},
+ isInstant: false,
+ id: 'mock',
+ name: 'mock',
+ scope: {
+ rootPath: [],
+ excluded: [],
+ },
+ filterType: '',
+ targets: [{}],
+ controlValues: {},
+};
+
+const createProps: () => ControlItemsProps = () => ({
+ disabled: false,
forceUpdate: jest.fn(),
- form: 'form',
+ form: formMock,
filterId: 'filterId',
- filterToEdit: '',
- formFilter: {
- filterType: 'filterType',
- },
+ filterToEdit: filterMock,
+ filterType: 'filterType',
});
const createControlItems = () => [
@@ -49,33 +83,36 @@ beforeEach(() => {
jest.clearAllMocks();
});
+function renderControlItems(
+ controlItemsMap: ReturnType,
+) {
+ return render(
+ <>{Object.values(controlItemsMap).map(value => value.element)},
+ );
+}
+
test('Should render null when has no "formFilter"', () => {
- const defaultProps = createProps();
- const props = {
- forceUpdate: defaultProps.forceUpdate,
- form: defaultProps.form,
- filterId: defaultProps.filterId,
- };
- const { container } = render(;
+ filterId: string;
+ filterType: string;
+ filterToEdit?: Filter;
+}
+
+export default function getControlItemsMap({
+ disabled,
+ forceUpdate,
+ form,
+ filterId,
+ filterType,
+ filterToEdit,
+}: ControlItemsProps) {
+ const controlPanelRegistry = getChartControlPanelRegistry();
+ const controlItems =
+ getControlItems(controlPanelRegistry.get(filterType)) ?? [];
+ const map: Record<
+ string,
+ { element: React.ReactNode; checked: boolean }
+ > = {};
+
+ controlItems
+ .filter(
+ (controlItem: CustomControlItem) =>
+ controlItem?.config?.renderTrigger &&
+ controlItem.name !== 'sortAscending',
+ )
+ .forEach(controlItem => {
+ const initialValue =
+ filterToEdit?.controlValues?.[controlItem.name] ??
+ controlItem?.config?.default;
+ const element = (
+
+
+ {
+ if (!controlItem.config.resetConfig) {
+ forceUpdate();
+ return;
+ }
+ setNativeFilterFieldValues(form, filterId, {
+ defaultDataMask: null,
+ });
+ forceUpdate();
+ }}
+ >
+ {controlItem.config.label}{' '}
+ {controlItem.config.description && (
+
+
+
+ );
+ map[controlItem.name] = { element, checked: initialValue };
+ });
+ return map;
+}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
index c1017b6fe0249..c1f39c0cd9311 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState, useRef } from 'react';
import { uniq } from 'lodash';
import { t, styled } from '@superset-ui/core';
import { Form } from 'src/common/components';
@@ -27,6 +27,7 @@ import { useFilterConfigMap, useFilterConfiguration } from '../state';
import { FilterRemoval, NativeFiltersForm } from './types';
import { FilterConfiguration } from '../types';
import {
+ validateForm,
createHandleSave,
createHandleTabEdit,
generateFilterId,
@@ -46,7 +47,7 @@ const StyledModalWrapper = styled(StyledModal)`
export const StyledModalBody = styled.div`
display: flex;
- height: 500px;
+ height: 700px;
flex-direction: row;
.filters-list {
width: ${({ theme }) => theme.gridUnit * 50}px;
@@ -89,6 +90,8 @@ export function FiltersConfigModal({
}: FiltersConfigModalProps) {
const [form] = Form.useForm();
+ const configFormRef = useRef();
+
// the filter config from redux state, this does not change until modal is closed.
const filterConfig = useFilterConfiguration();
const filterConfigMap = useFilterConfigMap();
@@ -180,23 +183,40 @@ export function FiltersConfigModal({
filterIds
.filter(filterId => filterId !== id && !removedFilters[filterId])
.filter(filterId =>
- CASCADING_FILTERS.includes(formValues.filters[filterId]?.filterType),
+ CASCADING_FILTERS.includes(
+ formValues.filters[filterId]
+ ? formValues.filters[filterId].filterType
+ : filterConfigMap[filterId]?.filterType,
+ ),
)
.map(id => ({
id,
title: getFilterTitle(id),
}));
- const handleSave = createHandleSave(
- form,
- currentFilterId,
- filterConfigMap,
- filterIds,
- removedFilters,
- setCurrentFilterId,
- resetForm,
- onSave,
- );
+ const handleSave = async () => {
+ const values: NativeFiltersForm | null = await validateForm(
+ form,
+ currentFilterId,
+ filterConfigMap,
+ filterIds,
+ removedFilters,
+ setCurrentFilterId,
+ );
+
+ if (values) {
+ createHandleSave(
+ filterConfigMap,
+ filterIds,
+ removedFilters,
+ resetForm,
+ onSave,
+ values,
+ )();
+ } else {
+ configFormRef.current.changeTab('configuration');
+ }
+ };
const handleConfirmCancel = () => {
resetForm();
@@ -215,7 +235,7 @@ export function FiltersConfigModal({
{(id: string) => (
,
- currentFilterId: string,
filterConfigMap: Record,
filterIds: string[],
removedFilters: Record,
- setCurrentFilterId: Function,
resetForm: Function,
saveForm: Function,
+ values: NativeFiltersForm,
) => async () => {
- const values: NativeFiltersForm | null = await validateForm(
- form,
- currentFilterId,
- filterConfigMap,
- filterIds,
- removedFilters,
- setCurrentFilterId,
- );
- if (values === null) return;
-
const newFilterConfig: FilterConfiguration = filterIds
.filter(id => !removedFilters[id])
.map(id => {
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/state.ts b/superset-frontend/src/dashboard/components/nativeFilters/state.ts
index 83003d67c9e16..027bf2ac968c4 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/state.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/state.ts
@@ -19,6 +19,7 @@
import { useSelector } from 'react-redux';
import { useMemo } from 'react';
import { Filter, FilterConfiguration } from './types';
+import { DashboardLayout } from '../../types';
const defaultFilterConfiguration: Filter[] = [];
@@ -45,3 +46,9 @@ export function useFilterConfigMap() {
[filterConfig],
);
}
+
+export function useDashboardLayout() {
+ return useSelector(
+ state => state.dashboardLayout?.present,
+ );
+}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/types.ts b/superset-frontend/src/dashboard/components/nativeFilters/types.ts
index 07e347c437b82..ac772dcd73491 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/types.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/types.ts
@@ -56,6 +56,8 @@ export interface Filter {
sortMetric?: string | null;
adhoc_filters?: AdhocFilter[];
time_range?: string;
+ tabsInScope?: string[];
+ chartsInScope?: number[];
}
export type FilterConfiguration = Filter[];
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/utils.test.ts b/superset-frontend/src/dashboard/components/nativeFilters/utils.test.ts
new file mode 100644
index 0000000000000..b38f4bce1681a
--- /dev/null
+++ b/superset-frontend/src/dashboard/components/nativeFilters/utils.test.ts
@@ -0,0 +1,126 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Behavior, FeatureFlag } from '@superset-ui/core';
+import * as featureFlags from 'src/featureFlags';
+import { nativeFilterGate } from './utils';
+
+let isFeatureEnabledMock: jest.MockInstance;
+
+describe('nativeFilterGate', () => {
+ describe('with all feature flags disabled', () => {
+ beforeAll(() => {
+ isFeatureEnabledMock = jest
+ .spyOn(featureFlags, 'isFeatureEnabled')
+ .mockImplementation(() => false);
+ });
+
+ afterAll(() => {
+ // @ts-ignore
+ isFeatureEnabledMock.restore();
+ });
+
+ it('should return true for regular chart', () => {
+ expect(nativeFilterGate([])).toEqual(true);
+ });
+
+ it('should return true for cross filter chart', () => {
+ expect(nativeFilterGate([Behavior.INTERACTIVE_CHART])).toEqual(true);
+ });
+
+ it('should return false for native filter chart with cross filter support', () => {
+ expect(
+ nativeFilterGate([Behavior.NATIVE_FILTER, Behavior.INTERACTIVE_CHART]),
+ ).toEqual(false);
+ });
+
+ it('should return false for native filter behavior', () => {
+ expect(nativeFilterGate([Behavior.NATIVE_FILTER])).toEqual(false);
+ });
+ });
+
+ describe('with only native filters feature flag enabled', () => {
+ beforeAll(() => {
+ isFeatureEnabledMock = jest
+ .spyOn(featureFlags, 'isFeatureEnabled')
+ .mockImplementation(
+ (featureFlag: FeatureFlag) =>
+ featureFlag === FeatureFlag.DASHBOARD_NATIVE_FILTERS,
+ );
+ });
+
+ afterAll(() => {
+ // @ts-ignore
+ isFeatureEnabledMock.restore();
+ });
+
+ it('should return true for regular chart', () => {
+ expect(nativeFilterGate([])).toEqual(true);
+ });
+
+ it('should return true for cross filter chart', () => {
+ expect(nativeFilterGate([Behavior.INTERACTIVE_CHART])).toEqual(true);
+ });
+
+ it('should return false for native filter chart with cross filter support', () => {
+ expect(
+ nativeFilterGate([Behavior.NATIVE_FILTER, Behavior.INTERACTIVE_CHART]),
+ ).toEqual(false);
+ });
+
+ it('should return false for native filter behavior', () => {
+ expect(nativeFilterGate([Behavior.NATIVE_FILTER])).toEqual(false);
+ });
+ });
+
+ describe('with native filters and experimental feature flag enabled', () => {
+ beforeAll(() => {
+ isFeatureEnabledMock = jest
+ .spyOn(featureFlags, 'isFeatureEnabled')
+ .mockImplementation((featureFlag: FeatureFlag) =>
+ [
+ FeatureFlag.DASHBOARD_CROSS_FILTERS,
+ FeatureFlag.DASHBOARD_FILTERS_EXPERIMENTAL,
+ ].includes(featureFlag),
+ );
+ });
+
+ afterAll(() => {
+ // @ts-ignore
+ isFeatureEnabledMock.restore();
+ });
+
+ it('should return true for regular chart', () => {
+ expect(nativeFilterGate([])).toEqual(true);
+ });
+
+ it('should return true for cross filter chart', () => {
+ expect(nativeFilterGate([Behavior.INTERACTIVE_CHART])).toEqual(true);
+ });
+
+ it('should return true for native filter chart with cross filter support', () => {
+ expect(
+ nativeFilterGate([Behavior.NATIVE_FILTER, Behavior.INTERACTIVE_CHART]),
+ ).toEqual(true);
+ });
+
+ it('should return false for native filter behavior', () => {
+ expect(nativeFilterGate([Behavior.NATIVE_FILTER])).toEqual(false);
+ });
+ });
+});
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
index 776a3a3234fd2..24264cb4e725e 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
@@ -24,12 +24,16 @@ import {
EXTRA_FORM_DATA_APPEND_KEYS,
EXTRA_FORM_DATA_OVERRIDE_KEYS,
AdhocFilter,
+ FeatureFlag,
} from '@superset-ui/core';
-import { Charts } from 'src/dashboard/types';
+import { Charts, DashboardLayout } from 'src/dashboard/types';
import { RefObject } from 'react';
import { DataMaskStateWithId } from 'src/dataMask/types';
import extractUrlParams from 'src/dashboard/util/extractUrlParams';
+import { isFeatureEnabled } from 'src/featureFlags';
import { Filter } from './types';
+import { CHART_TYPE, TAB_TYPE } from '../../util/componentTypes';
+import { DASHBOARD_GRID_ID, DASHBOARD_ROOT_ID } from '../../util/constants';
export const getFormData = ({
datasetId,
@@ -131,3 +135,82 @@ export function getExtraFormData(
});
return extraFormData;
}
+
+export function nativeFilterGate(behaviors: Behavior[]): boolean {
+ return (
+ !behaviors.includes(Behavior.NATIVE_FILTER) ||
+ (isFeatureEnabled(FeatureFlag.DASHBOARD_FILTERS_EXPERIMENTAL) &&
+ isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS) &&
+ behaviors.includes(Behavior.INTERACTIVE_CHART))
+ );
+}
+
+const isComponentATab = (
+ dashboardLayout: DashboardLayout,
+ componentId: string,
+) => dashboardLayout[componentId].type === TAB_TYPE;
+
+const findTabsWithChartsInScopeHelper = (
+ dashboardLayout: DashboardLayout,
+ chartsInScope: number[],
+ componentId: string,
+ tabIds: string[],
+ tabsToHighlight: Set,
+) => {
+ if (
+ dashboardLayout[componentId].type === CHART_TYPE &&
+ chartsInScope.includes(dashboardLayout[componentId].meta.chartId)
+ ) {
+ tabIds.forEach(tabsToHighlight.add, tabsToHighlight);
+ }
+ if (
+ dashboardLayout[componentId].children.length === 0 ||
+ (isComponentATab(dashboardLayout, componentId) &&
+ tabsToHighlight.has(componentId))
+ ) {
+ return;
+ }
+ dashboardLayout[componentId].children.forEach(childId =>
+ findTabsWithChartsInScopeHelper(
+ dashboardLayout,
+ chartsInScope,
+ childId,
+ isComponentATab(dashboardLayout, childId) ? [...tabIds, childId] : tabIds,
+ tabsToHighlight,
+ ),
+ );
+};
+
+export const findTabsWithChartsInScope = (
+ dashboardLayout: DashboardLayout,
+ chartsInScope: number[],
+) => {
+ const dashboardRoot = dashboardLayout[DASHBOARD_ROOT_ID];
+ const rootChildId = dashboardRoot.children[0];
+ const hasTopLevelTabs = rootChildId !== DASHBOARD_GRID_ID;
+ const tabsInScope = new Set();
+ if (hasTopLevelTabs) {
+ dashboardLayout[rootChildId].children?.forEach(tabId =>
+ findTabsWithChartsInScopeHelper(
+ dashboardLayout,
+ chartsInScope,
+ tabId,
+ [tabId],
+ tabsInScope,
+ ),
+ );
+ } else {
+ Object.values(dashboardLayout)
+ .filter(element => element.type === TAB_TYPE)
+ .forEach(element =>
+ findTabsWithChartsInScopeHelper(
+ dashboardLayout,
+ chartsInScope,
+ element.id,
+ [element.id],
+ tabsInScope,
+ ),
+ );
+ }
+ return tabsInScope;
+};
diff --git a/superset-frontend/src/dashboard/containers/DashboardComponent.jsx b/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
index f47a8734ab4e4..387e67c926298 100644
--- a/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
+++ b/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
@@ -35,7 +35,10 @@ import {
updateComponents,
handleComponentDrop,
} from '../actions/dashboardLayout';
-import { setDirectPathToChild } from '../actions/dashboardState';
+import {
+ setDirectPathToChild,
+ setLastFocusedTab,
+} from '../actions/dashboardState';
const propTypes = {
id: PropTypes.string,
@@ -79,19 +82,6 @@ function selectFocusedFilterScope(dashboardState, dashboardFilters) {
};
}
-function selectFocusedNativeFilterScope(nativeFilters) {
- if (!nativeFilters.focusedFilterId) return null;
- const id = nativeFilters.focusedFilterId;
- const focusedFilterScope = nativeFilters.filters[id].scope;
- return {
- chartId: id,
- scope: {
- scope: focusedFilterScope.rootPath,
- immune: focusedFilterScope.excluded,
- },
- };
-}
-
function mapStateToProps(
{
dashboardLayout: undoableLayout,
@@ -107,17 +97,21 @@ function mapStateToProps(
const component = dashboardLayout[id];
const props = {
component,
+ dashboardLayout,
parentComponent: dashboardLayout[parentId],
editMode: dashboardState.editMode,
undoLength: undoableLayout.past.length,
redoLength: undoableLayout.future.length,
filters: getActiveFilters(),
directPathToChild: dashboardState.directPathToChild,
+ lastFocusedTabId: dashboardState.lastFocusedTabId,
directPathLastUpdated: dashboardState.directPathLastUpdated,
dashboardId: dashboardInfo.id,
- focusedFilterScope:
- selectFocusedFilterScope(dashboardState, dashboardFilters) ||
- selectFocusedNativeFilterScope(nativeFilters),
+ nativeFilters,
+ focusedFilterScope: selectFocusedFilterScope(
+ dashboardState,
+ dashboardFilters,
+ ),
};
// rows and columns need more data about their child dimensions
@@ -147,6 +141,7 @@ function mapDispatchToProps(dispatch) {
updateComponents,
handleComponentDrop,
setDirectPathToChild,
+ setLastFocusedTab,
logEvent,
},
dispatch,
diff --git a/superset-frontend/src/dashboard/reducers/dashboardState.js b/superset-frontend/src/dashboard/reducers/dashboardState.js
index 6f162084708f4..842916e1cc31e 100644
--- a/superset-frontend/src/dashboard/reducers/dashboardState.js
+++ b/superset-frontend/src/dashboard/reducers/dashboardState.js
@@ -35,6 +35,7 @@ import {
SET_DIRECT_PATH,
SET_FOCUSED_FILTER_FIELD,
UNSET_FOCUSED_FILTER_FIELD,
+ SET_LAST_FOCUSED_TAB,
} from '../actions/dashboardState';
import { HYDRATE_DASHBOARD } from '../actions/hydrate';
@@ -133,6 +134,12 @@ export default function dashboardStateReducer(state = {}, action) {
directPathLastUpdated: Date.now(),
};
},
+ [SET_LAST_FOCUSED_TAB]() {
+ return {
+ ...state,
+ lastFocusedTabId: action.tabId,
+ };
+ },
[SET_FOCUSED_FILTER_FIELD]() {
return {
...state,
diff --git a/superset-frontend/src/dashboard/types.ts b/superset-frontend/src/dashboard/types.ts
index a37cc0f938702..9a15b1da7ef03 100644
--- a/superset-frontend/src/dashboard/types.ts
+++ b/superset-frontend/src/dashboard/types.ts
@@ -43,7 +43,11 @@ export type Chart = ChartState & {
export type DashboardLayout = { [key: string]: LayoutItem };
export type DashboardLayoutState = { present: DashboardLayout };
-export type DashboardState = { editMode: boolean; directPathToChild: string[] };
+export type DashboardState = {
+ editMode: boolean;
+ directPathToChild: string[];
+ lastFocusedTabId: string | null;
+};
export type DashboardInfo = {
common: {
flash_messages: string[];
diff --git a/superset-frontend/src/dashboard/util/getDashboardUrl.ts b/superset-frontend/src/dashboard/util/getDashboardUrl.ts
index d3cf06c668b9a..7eb817a0957a9 100644
--- a/superset-frontend/src/dashboard/util/getDashboardUrl.ts
+++ b/superset-frontend/src/dashboard/util/getDashboardUrl.ts
@@ -30,12 +30,12 @@ export default function getDashboardUrl(
// convert flattened { [id_column]: values } object
// to nested filter object
newSearchParams.set(
- URL_PARAMS.preselectFilters,
+ URL_PARAMS.preselectFilters.name,
JSON.stringify(serializeActiveFilterValues(filters)),
);
if (standalone) {
- newSearchParams.set(URL_PARAMS.standalone, standalone.toString());
+ newSearchParams.set(URL_PARAMS.standalone.name, standalone.toString());
}
const hashSection = hash ? `#${hash}` : '';
diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx
index 8cf17e550a1ab..94d3cd976769f 100644
--- a/superset-frontend/src/datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/datasource/DatasourceEditor.jsx
@@ -379,6 +379,7 @@ class DatasourceEditor extends React.PureComponent {
}
setColumns(obj) {
+ // update calculatedColumns or databaseColumns
this.setState(obj, this.validateAndChange);
}
@@ -414,13 +415,18 @@ class DatasourceEditor extends React.PureComponent {
type: col.type,
groupby: true,
filterable: true,
+ is_dttm: col.is_dttm,
});
results.added.push(col.name);
- } else if (currentCol.type !== col.type) {
+ } else if (
+ currentCol.type !== col.type ||
+ currentCol.is_dttm !== col.is_dttm
+ ) {
// modified column
finalColumns.push({
...currentCol,
type: col.type,
+ is_dttm: col.is_dttm,
});
results.modified.push(col.name);
} else {
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 161407ab80127..2fd44df9b8aad 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -92,6 +92,13 @@ const Styles = styled.div`
.Select__menu {
max-width: 100%;
}
+ .type-label {
+ margin-right: ${({ theme }) => theme.gridUnit * 3}px;
+ width: ${({ theme }) => theme.gridUnit * 7}px;
+ display: inline-block;
+ text-align: center;
+ font-weight: ${({ theme }) => theme.typography.weights.bold};
+ }
`;
const ControlPanelsTabs = styled(Tabs)`
diff --git a/superset-frontend/src/explore/components/DataTablesPane/index.tsx b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
index 389e0213c6cd5..f2b33f28e071c 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/index.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
@@ -107,12 +107,14 @@ export const DataTablesPane = ({
onCollapseChange,
chartStatus,
ownState,
+ errorMessage,
}: {
queryFormData: Record;
tableSectionHeight: number;
chartStatus: string;
ownState?: JsonObject;
onCollapseChange: (openPanelName: string) => void;
+ errorMessage?: JSX.Element;
}) => {
const [data, setData] = useState<{
[RESULT_TYPES.results]?: Record[];
@@ -196,6 +198,17 @@ export const DataTablesPane = ({
useEffect(() => {
if (panelOpen && isRequestPending[RESULT_TYPES.results]) {
+ if (errorMessage) {
+ setIsRequestPending(prevState => ({
+ ...prevState,
+ [RESULT_TYPES.results]: false,
+ }));
+ setIsLoading(prevIsLoading => ({
+ ...prevIsLoading,
+ [RESULT_TYPES.results]: false,
+ }));
+ return;
+ }
if (chartStatus === 'loading') {
setIsLoading(prevIsLoading => ({
...prevIsLoading,
@@ -220,7 +233,14 @@ export const DataTablesPane = ({
}));
getData(RESULT_TYPES.samples);
}
- }, [panelOpen, isRequestPending, getData, activeTabKey, chartStatus]);
+ }, [
+ panelOpen,
+ isRequestPending,
+ getData,
+ activeTabKey,
+ chartStatus,
+ errorMessage,
+ ]);
const filteredData = {
[RESULT_TYPES.results]: useFilteredTableData(
@@ -262,6 +282,9 @@ export const DataTablesPane = ({
/>
);
}
+ if (errorMessage) {
+ return {
tableSectionHeight={tableSectionHeight}
onCollapseChange={onCollapseChange}
chartStatus={props.chart.chartStatus}
+ errorMessage={props.errorMessage}
/>
)}
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
index 3aa8e6b55a8fe..63efc2b189ff3 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
@@ -191,7 +191,7 @@ function ExploreViewContainer(props) {
const payload = { ...props.form_data };
const longUrl = getExploreLongUrl(
props.form_data,
- props.standalone ? URL_PARAMS.standalone : null,
+ props.standalone ? URL_PARAMS.standalone.name : null,
false,
);
try {
@@ -370,18 +370,34 @@ function ExploreViewContainer(props) {
function renderErrorMessage() {
// Returns an error message as a node if any errors are in the store
- const errors = Object.entries(props.controls)
- .filter(
- ([, control]) =>
- control.validationErrors && control.validationErrors.length > 0,
- )
- .map(([key, control]) => (
- (formData.groupby);
- // Correct initial value for Ant Select
-
- // If we are in config modal we always need show empty select for `defaultToFirstItem`
- const [values, setValues] = useState(
- !isDisabled && defaultValue?.length ? defaultValue : [],
+ const [col] = groupby;
+ const [selectedValues, setSelectedValues] = useState(
+ filterState.value,
);
+ const sortedData = useMemo(() => {
+ const firstData: DataRecord[] = [];
+ const restData: DataRecord[] = [];
+ data.forEach(row => {
+ // @ts-ignore
+ if (selectedValues?.includes(row[col])) {
+ firstData.push(row);
+ } else {
+ restData.push(row);
+ }
+ });
+ return [...firstData, ...restData];
+ }, [col, selectedValues, data]);
+ const [isDropdownVisible, setIsDropdownVisible] = useState(false);
const [currentSuggestionSearch, setCurrentSuggestionSearch] = useState('');
- const [dataMask, dispatchDataMask] = useReducer(
- reducer,
- searchAllOptions
- ? {
- ownState: {
- coltypeMap,
- },
- }
- : {},
- );
+ const [dataMask, dispatchDataMask] = useReducer(reducer, {
+ filterState,
+ ownState: {
+ coltypeMap,
+ },
+ });
+ const updateDataMask = (values: SelectValue) => {
+ const emptyFilter =
+ enableEmptyFilter && !inverseSelection && !values?.length;
+ const suffix =
+ inverseSelection && values?.length ? ` (${t('excluded')})` : '';
+
+ dispatchDataMask({
+ type: 'filterState',
+ extraFormData: getSelectExtraFormData(
+ col,
+ values,
+ emptyFilter,
+ inverseSelection,
+ ),
+ filterState: {
+ value: values,
+ label: `${(values || []).join(', ')}${suffix}`,
+ },
+ });
+ };
+
+ useEffect(() => {
+ if (!isDropdownVisible) {
+ setSelectedValues(filterState.value);
+ }
+ updateDataMask(filterState.value);
+ }, [JSON.stringify(filterState.value)]);
+
+ const isDisabled =
+ appSection === AppSection.FILTER_CONFIG_MODAL && defaultToFirstItem;
const debouncedOwnStateFunc = useCallback(
debounce((val: string) => {
@@ -154,67 +195,47 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
}
};
- useEffect(() => {
- const firstItem: SelectValue = data[0]
- ? (groupby.map(col => data[0][col]) as string[])
- : null;
- if (!isDisabled && defaultToFirstItem && firstItem) {
- // initialize to first value if set to default to first item
- setValues(firstItem);
- } else if (!isDisabled && defaultValue?.length) {
- // initialize to saved value
- setValues(defaultValue);
- }
- }, [defaultToFirstItem, defaultValue]);
-
const handleBlur = () => {
clearSuggestionSearch();
unsetFocusedFilter();
+ setSelectedValues(filterState.value);
};
- const [col] = groupby;
const datatype: GenericDataType = coltypeMap[col];
const labelFormatter = getDataRecordFormatter({
timeFormatter: smartDateDetailedFormatter,
});
const handleChange = (value?: SelectValue | number | string) => {
- setValues(ensureIsArray(value));
+ const values = ensureIsArray(value);
+ if (values.length === 0) {
+ updateDataMask(null);
+ } else {
+ updateDataMask(values);
+ }
};
useEffect(() => {
+ const firstItem: SelectValue = data[0]
+ ? (groupby.map(col => data[0][col]) as string[])
+ : null;
if (isDisabled) {
- setValues([]);
- }
- }, [isDisabled]);
-
- useEffect(() => {
- const emptyFilter =
- enableEmptyFilter && !inverseSelection && values?.length === 0;
-
- dispatchDataMask({
- type: 'filterState',
- extraFormData: getSelectExtraFormData(
- col,
- values,
- emptyFilter,
- inverseSelection,
- ),
- filterState: {
- // We need to save in state `FIRST_VALUE` as some const and not as REAL value,
- // because when FiltersBar check if all filters initialized it compares `defaultValue` with this value
- // and because REAL value can be unpredictable for users that have different data for same dashboard we use `FIRST_VALUE`
- value: values,
- },
- });
- }, [col, enableEmptyFilter, inverseSelection, JSON.stringify(values)]);
-
- useEffect(() => {
- // handle changes coming from application, e.g. "Clear all" button
- if (JSON.stringify(values) !== JSON.stringify(filterState.value)) {
- handleChange(filterState.value);
+ // empty selection if filter is disabled
+ updateDataMask(null);
+ } else if (!isDisabled && defaultToFirstItem && firstItem) {
+ // initialize to first value if set to default to first item
+ updateDataMask(firstItem);
+ } else {
+ // reset data mask based on filter state
+ updateDataMask(filterState.value);
}
- }, [JSON.stringify(filterState.value)]);
+ }, [
+ col,
+ isDisabled,
+ defaultToFirstItem,
+ enableEmptyFilter,
+ inverseSelection,
+ ]);
useEffect(() => {
setDataMask(dataMask);
@@ -224,12 +245,14 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
data.length === 0
? t('No data')
: tn('%s option', '%s options', data.length, data.length);
+ const Icon = inverseSelection ? Icons.StopOutlined : Icons.CheckOutlined;
+
return (
= (
const query: QueryObject[] = [
{
...baseQueryObject,
- apply_fetch_values_predicate: true,
groupby: columns,
metrics: sortMetric ? [sortMetric] : [],
filters: filters.concat(extra_filters),
diff --git a/superset-frontend/src/modules/utils.js b/superset-frontend/src/modules/utils.js
index 6520936c47c0d..07dc43856e522 100644
--- a/superset-frontend/src/modules/utils.js
+++ b/superset-frontend/src/modules/utils.js
@@ -26,16 +26,6 @@ export function getDatasourceParameter(datasourceId, datasourceType) {
return `${datasourceId}__${datasourceType}`;
}
-export function getParam(name) {
- /* eslint no-useless-escape: 0 */
- const formattedName = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
- const regex = new RegExp(`[\\?&]${formattedName}=([^&#]*)`);
- const results = regex.exec(window.location.search);
- return results === null
- ? ''
- : decodeURIComponent(results[1].replace(/\+/g, ' '));
-}
-
export function mainMetric(savedMetrics) {
// Using 'count' as default metric if it exists, otherwise using whatever one shows up first
let metric;
diff --git a/superset-frontend/src/utils/urlUtils.ts b/superset-frontend/src/utils/urlUtils.ts
index 5e1ee9b55a300..ebb3a1df83430 100644
--- a/superset-frontend/src/utils/urlUtils.ts
+++ b/superset-frontend/src/utils/urlUtils.ts
@@ -18,13 +18,16 @@
*/
import { SupersetClient } from '@superset-ui/core';
import { getClientErrorObject } from './getClientErrorObject';
+import { URL_PARAMS } from '../constants';
-export type UrlParamType = 'string' | 'number' | 'boolean';
-export function getUrlParam(paramName: string, type: 'string'): string;
-export function getUrlParam(paramName: string, type: 'number'): number;
-export function getUrlParam(paramName: string, type: 'boolean'): boolean;
-export function getUrlParam(paramName: string, type: UrlParamType): unknown {
- const urlParam = new URLSearchParams(window.location.search).get(paramName);
+export type UrlParamType = 'string' | 'number' | 'boolean' | 'object';
+export type UrlParam = typeof URL_PARAMS[keyof typeof URL_PARAMS];
+export function getUrlParam(param: UrlParam & { type: 'string' }): string;
+export function getUrlParam(param: UrlParam & { type: 'number' }): number;
+export function getUrlParam(param: UrlParam & { type: 'boolean' }): boolean;
+export function getUrlParam(param: UrlParam & { type: 'object' }): object;
+export function getUrlParam({ name, type }: UrlParam): unknown {
+ const urlParam = new URLSearchParams(window.location.search).get(name);
switch (type) {
case 'number':
if (!urlParam) {
@@ -40,6 +43,11 @@ export function getUrlParam(paramName: string, type: UrlParamType): unknown {
return Number(urlParam);
}
return null;
+ case 'object':
+ if (!urlParam) {
+ return null;
+ }
+ return JSON.parse(urlParam);
case 'boolean':
if (!urlParam) {
return null;
diff --git a/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx b/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
index db6878c276922..008a39e6575f4 100644
--- a/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
+++ b/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
@@ -129,6 +129,12 @@ const DEFAULT_ALERT = {
grace_period: undefined,
};
+const StyledModal = styled(Modal)`
+ .ant-modal-body {
+ overflow: initial;
+ }
+`;
+
const StyledIcon = styled(Icon)`
margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
`;
@@ -979,7 +985,7 @@ const AlertReportModal: FunctionComponent = ({
));
return (
- = ({
{icon}
{errorMessage};
+ }
return null;
};
diff --git a/superset-frontend/src/explore/components/EmbedCodeButton.jsx b/superset-frontend/src/explore/components/EmbedCodeButton.jsx
index 24b62ecd11616..46eed0bb0cda3 100644
--- a/superset-frontend/src/explore/components/EmbedCodeButton.jsx
+++ b/superset-frontend/src/explore/components/EmbedCodeButton.jsx
@@ -69,7 +69,7 @@ export default class EmbedCodeButton extends React.Component {
generateEmbedHTML() {
const srcLink = `${window.location.origin + getURIDirectory()}?r=${
this.state.shortUrlId
- }&${URL_PARAMS.standalone}=1&height=${this.state.height}`;
+ }&${URL_PARAMS.standalone.name}=1&height=${this.state.height}`;
return (
'
- {t('Control labeled ')}
- {` "${control.label}" `}
- {control.validationErrors.join('. ')}
+ const controlsWithErrors = Object.values(props.controls).filter(
+ control =>
+ control.validationErrors && control.validationErrors.length > 0,
+ );
+ if (controlsWithErrors.length === 0) {
+ return null;
+ }
+
+ const errorMessages = controlsWithErrors.map(
+ control => control.validationErrors,
+ );
+ const uniqueErrorMessages = [...new Set(errorMessages.flat())];
+
+ const errors = uniqueErrorMessages
+ .map(message => {
+ const matchingLabels = controlsWithErrors
+ .filter(control => control.validationErrors?.includes(message))
+ .map(control => control.label);
+ return [matchingLabels, message];
+ })
+ .map(([labels, message]) => (
+
@@ -430,7 +434,7 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
suggestion => suggestion === currentSuggestionSearch,
) && (
- {currentSuggestionSearch}
+ {`${t('Create "%s"', currentSuggestionSearch)}`}
)}
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
index 458792f8f38ab..6bfcecec78fe5 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx
@@ -298,10 +298,6 @@ export default class SelectControl extends React.PureComponent {
css={theme => css`
.type-label {
margin-right: ${theme.gridUnit * 2}px;
- width: ${theme.gridUnit * 7}px;
- display: inline-block;
- text-align: center;
- font-weight: ${theme.typography.weights.bold};
}
`}
>
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl.less b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.less
similarity index 95%
rename from superset-frontend/src/explore/components/controls/VizTypeControl.less
rename to superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.less
index 3a9e44f3e16a8..e9faf8bcd3d23 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl.less
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.less
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import '../../../../stylesheets/less/variables.less';
+@import '../../../../../stylesheets/less/variables.less';
.viztype-label {
margin-top: 10px;
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
new file mode 100644
index 0000000000000..35dd245bb659d
--- /dev/null
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
@@ -0,0 +1,111 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Preset } from '@superset-ui/core';
+import { render, cleanup, screen } from 'spec/helpers/testing-library';
+import { Provider } from 'react-redux';
+import {
+ getMockStore,
+ mockStore,
+ stateWithoutNativeFilters,
+} from 'spec/fixtures/mockStore';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { testWithId } from 'src/utils/testUtils';
+import {
+ EchartsMixedTimeseriesChartPlugin,
+ EchartsTimeseriesChartPlugin,
+} from '@superset-ui/plugin-chart-echarts/lib';
+import { LineChartPlugin } from '@superset-ui/preset-chart-xy/lib';
+import TimeTableChartPlugin from '../../../../visualizations/TimeTable/TimeTableChartPlugin';
+import VizTypeControl, { VIZ_TYPE_CONTROL_TEST_ID } from './index';
+
+jest.useFakeTimers();
+
+class MainPreset extends Preset {
+ constructor() {
+ super({
+ name: 'Legacy charts',
+ plugins: [
+ new LineChartPlugin().configure({ key: 'line' }),
+ new EchartsTimeseriesChartPlugin().configure({
+ key: 'echarts_timeseries',
+ }),
+ new TimeTableChartPlugin().configure({ key: 'time_table' }),
+ new EchartsMixedTimeseriesChartPlugin().configure({
+ key: 'mixed_timeseries',
+ }),
+ ],
+ });
+ }
+}
+
+const getTestId = testWithId(VIZ_TYPE_CONTROL_TEST_ID, true);
+
+describe('VizTypeControl', () => {
+ new MainPreset().register();
+ const newVizTypeControlProps = {
+ description: '',
+ label: '',
+ name: '',
+ value: '',
+ labelType: '',
+ onChange: jest.fn(),
+ };
+
+ const renderWrapper = (
+ props = newVizTypeControlProps,
+ state: object = stateWithoutNativeFilters,
+ ) =>
+ render(
+
+ ,
+ );
+
+ afterEach(() => {
+ cleanup();
+ jest.clearAllMocks();
+ });
+
+ it('Search visualization type', async () => {
+ renderWrapper();
+
+ const visualizations = screen.getByTestId(getTestId('viz-row'));
+
+ expect(visualizations).toHaveTextContent(/Time-series Table/);
+ expect(visualizations).toHaveTextContent(/Time-series Chart/);
+ expect(visualizations).toHaveTextContent(/Mixed timeseries chart/);
+ expect(visualizations).toHaveTextContent(/Line Chart/);
+
+ const searchInputText = 'time series';
+
+ // search
+ userEvent.type(
+ screen.getByTestId(getTestId('search-input')),
+ searchInputText,
+ );
+
+ expect(visualizations).toHaveTextContent(/Time-series Table/);
+ expect(visualizations).toHaveTextContent(/Time-series Chart/);
+ expect(visualizations).toHaveTextContent(/Mixed timeseries chart/);
+ expect(visualizations).not.toHaveTextContent(/Line Chart/);
+ });
+});
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl.jsx b/superset-frontend/src/explore/components/controls/VizTypeControl/index.jsx
similarity index 88%
rename from superset-frontend/src/explore/components/controls/VizTypeControl.jsx
rename to superset-frontend/src/explore/components/controls/VizTypeControl/index.jsx
index f6ea3fff56edf..b7efbd8bc7091 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl.jsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/index.jsx
@@ -19,14 +19,14 @@
import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { Input, Row, Col } from 'src/common/components';
-import { Behavior, t, getChartMetadataRegistry } from '@superset-ui/core';
+import { t, getChartMetadataRegistry } from '@superset-ui/core';
import { useDynamicPluginContext } from 'src/components/DynamicPlugins';
import Modal from 'src/components/Modal';
import { Tooltip } from 'src/components/Tooltip';
import Label from 'src/components/Label';
import ControlHeader from 'src/explore/components/ControlHeader';
+import { nativeFilterGate } from 'src/dashboard/components/nativeFilters/utils';
import './VizTypeControl.less';
-import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
const propTypes = {
description: PropTypes.string,
@@ -93,6 +93,8 @@ const DEFAULT_ORDER = [
const typesWithDefaultOrder = new Set(DEFAULT_ORDER);
+export const VIZ_TYPE_CONTROL_TEST_ID = 'viz-type-control';
+
function VizSupportValidation({ vizType }) {
const state = useDynamicPluginContext();
if (state.loading || registry.has(vizType)) {
@@ -106,11 +108,6 @@ function VizSupportValidation({ vizType }) {
);
}
-const nativeFilterGate = behaviors =>
- !behaviors.includes(Behavior.NATIVE_FILTER) ||
- (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS) &&
- behaviors.includes(Behavior.INTERACTIVE_CHART));
-
const VizTypeControl = props => {
const [showModal, setShowModal] = useState(false);
const [filter, setFilter] = useState('');
@@ -153,7 +150,10 @@ const VizTypeControl = props => {
className={`viztype-selector ${isSelected ? 'selected' : ''}`}
src={type.thumbnail}
/>
-
+
{filteredTypes.map(entry => (
(
processedState: ControlState,
) {
const validators = control.validators as ControlValueValidator[] | undefined;
- const validationErrors: ValidationError[] = [];
+ const { externalValidationErrors = [] } = control;
+ const errors: ValidationError[] = [];
if (validators && validators.length > 0) {
validators.forEach(validator => {
const error = validator.call(control, control.value, processedState);
if (error) {
- validationErrors.push(error);
+ errors.push(error);
}
});
}
+ const validationErrors = [...errors, ...externalValidationErrors];
// always reset validation errors even when there is no validator
return { ...control, validationErrors };
}
diff --git a/superset-frontend/src/explore/controls.jsx b/superset-frontend/src/explore/controls.jsx
index 451ca525d3988..e54f7ab4d4355 100644
--- a/superset-frontend/src/explore/controls.jsx
+++ b/superset-frontend/src/explore/controls.jsx
@@ -64,7 +64,7 @@ import {
legacyValidateInteger,
validateNonEmpty,
} from '@superset-ui/core';
-import { formatSelectOptions, mainMetric } from 'src/modules/utils';
+import { formatSelectOptions } from 'src/modules/utils';
import { TIME_FILTER_LABELS } from './constants';
import { StyledColumnOption } from './components/optionRenderers';
@@ -152,10 +152,6 @@ const metrics = {
multi: true,
label: t('Metrics'),
validators: [validateNonEmpty],
- default: c => {
- const metric = mainMetric(c.savedMetrics);
- return metric ? [metric] : null;
- },
mapStateToProps: state => {
const { datasource } = state;
return {
@@ -171,7 +167,6 @@ const metric = {
multi: false,
label: t('Metric'),
description: t('Metric'),
- default: props => mainMetric(props.savedMetrics),
};
export function columnChoices(datasource) {
@@ -346,7 +341,7 @@ export const controls = {
type: 'DateFilterControl',
freeForm: true,
label: TIME_FILTER_LABELS.time_range,
- default: t('Last week'), // this value is translated, but the backend wouldn't understand a translated value?
+ default: t('No filter'), // this value is translated, but the backend wouldn't understand a translated value?
description: t(
'The time range for the visualization. All relative times, e.g. "Last month", ' +
'"Last 7 days", "now", etc. are evaluated on the server using the server\'s ' +
diff --git a/superset-frontend/src/explore/exploreUtils/index.js b/superset-frontend/src/explore/exploreUtils/index.js
index f1ddd173c4a09..c936590db095f 100644
--- a/superset-frontend/src/explore/exploreUtils/index.js
+++ b/superset-frontend/src/explore/exploreUtils/index.js
@@ -103,7 +103,7 @@ export function getExploreLongUrl(
search[key] = extraSearch[key];
});
search.form_data = safeStringify(formData);
- if (endpointType === URL_PARAMS.standalone) {
+ if (endpointType === URL_PARAMS.standalone.name) {
search.standalone = DashboardStandaloneMode.HIDE_NAV;
}
const url = uri.directory(directory).search(search).toString();
@@ -176,7 +176,7 @@ export function getExploreUrl({
if (endpointType === 'csv') {
search.csv = 'true';
}
- if (endpointType === URL_PARAMS.standalone) {
+ if (endpointType === URL_PARAMS.standalone.name) {
search.standalone = '1';
}
if (endpointType === 'query') {
diff --git a/superset-frontend/src/explore/reducers/exploreReducer.js b/superset-frontend/src/explore/reducers/exploreReducer.js
index 7727049df9de3..d094b494cedc8 100644
--- a/superset-frontend/src/explore/reducers/exploreReducer.js
+++ b/superset-frontend/src/explore/reducers/exploreReducer.js
@@ -135,6 +135,24 @@ export default function exploreReducer(state = {}, action) {
...getControlStateFromControlConfig(controlConfig, state, action.value),
};
+ const newState = {
+ ...state,
+ controls: { ...state.controls, [action.controlName]: control },
+ };
+
+ const rerenderedControls = {};
+ if (Array.isArray(control.rerender)) {
+ control.rerender.forEach(controlName => {
+ rerenderedControls[controlName] = {
+ ...getControlStateFromControlConfig(
+ newState.controls[controlName],
+ newState,
+ newState.controls[controlName].value,
+ ),
+ };
+ });
+ }
+
// combine newly detected errors with errors from `onChange` event of
// each control component (passed via reducer action).
const errors = control.validationErrors || [];
@@ -169,6 +187,7 @@ export default function exploreReducer(state = {}, action) {
...control,
validationErrors: errors,
},
+ ...rerenderedControls,
},
};
},
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx
new file mode 100644
index 0000000000000..fb442e86bc497
--- /dev/null
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx
@@ -0,0 +1,78 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import {
+ SuperChart,
+ getChartTransformPropsRegistry,
+ GenericDataType,
+} from '@superset-ui/core';
+import RangeFilterPlugin from './index';
+import transformProps from './transformProps';
+
+new RangeFilterPlugin().configure({ key: 'filter_range' }).register();
+
+getChartTransformPropsRegistry().registerValue('filter_range', transformProps);
+
+export default {
+ title: 'Filter Plugins',
+};
+
+export const range = ({ width, height }: { width: number; height: number }) => (
+
{Number.isNaN(Number(min)) || Number.isNaN(Number(max)) ? (
@@ -80,10 +116,12 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
range
min={min}
max={max}
- value={value}
+ value={value ?? [min, max]}
onAfterChange={handleAfterChange}
onChange={handleChange}
+ tipFormatter={value => numberFormatter(value)}
ref={inputRef}
+ marks={marks}
/>
)}
diff --git a/superset-frontend/src/filters/components/Range/buildQuery.ts b/superset-frontend/src/filters/components/Range/buildQuery.ts
index f43c3258b97a7..f29228c7f714c 100644
--- a/superset-frontend/src/filters/components/Range/buildQuery.ts
+++ b/superset-frontend/src/filters/components/Range/buildQuery.ts
@@ -43,7 +43,6 @@ export default function buildQuery(formData: QueryFormData) {
return buildQueryContext(formData, baseQueryObject => [
{
...baseQueryObject,
- apply_fetch_values_predicate: true,
columns: [],
groupby: [],
metrics: [
diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx
new file mode 100644
index 0000000000000..c42c1ce3e10bd
--- /dev/null
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx
@@ -0,0 +1,213 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import userEvent from '@testing-library/user-event';
+import { AppSection } from '@superset-ui/core';
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import SelectFilterPlugin from './SelectFilterPlugin';
+import transformProps from './transformProps';
+
+const selectMultipleProps = {
+ formData: {
+ sortAscending: true,
+ multiSelect: true,
+ enableEmptyFilter: true,
+ defaultToFirstItem: false,
+ inverseSelection: false,
+ searchAllOptions: true,
+ datasource: '3__table',
+ groupby: ['gender'],
+ adhocFilters: [],
+ extraFilters: [],
+ extraFormData: {},
+ granularitySqla: 'ds',
+ metrics: ['count'],
+ rowLimit: 1000,
+ showSearch: true,
+ defaultValue: ['boy'],
+ timeRangeEndpoints: ['inclusive', 'exclusive'],
+ urlParams: {},
+ vizType: 'filter_select',
+ inputRef: { current: null },
+ },
+ height: 20,
+ hooks: {},
+ ownState: { coltypeMap: { gender: 1 }, search: null },
+ filterState: { value: ['boy'] },
+ queriesData: [
+ {
+ rowcount: 2,
+ colnames: ['gender'],
+ coltypes: [1],
+ data: [{ gender: 'boy' }, { gender: 'girl' }],
+ applied_filters: [{ column: 'gender' }],
+ rejected_filters: [],
+ },
+ ],
+ width: 220,
+ behaviors: ['NATIVE_FILTER'],
+ isRefreshing: false,
+ appSection: AppSection.DASHBOARD,
+};
+
+describe('SelectFilterPlugin', () => {
+ const setDataMask = jest.fn();
+ const getWrapper = (props = {}) =>
+ render(
+ // @ts-ignore
+
+ {labels.length > 1 ? t('Controls labeled ') : t('Control labeled ')}
+ {` ${labels.join(', ')}`}
+ : {message}
));
+
let errorMessage;
if (errors.length > 0) {
errorMessage = {errors}
;
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.jsx
index be9b40258d041..23f6cf9e02ca5 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.jsx
@@ -39,6 +39,7 @@ import AdhocFilter, {
CLAUSES,
} from 'src/explore/components/controls/FilterControl/AdhocFilter';
import columnType from 'src/explore/components/controls/FilterControl/columnType';
+import Icons from 'src/components/Icons';
const SelectWithLabel = styled(Select)`
.ant-select-selector {
@@ -368,6 +369,8 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
labelText: comparator?.length > 0 && this.createSuggestionsPlaceholder(),
autoFocus: focusComparator,
};
+ const Icon =
+ operator === 'NOT IN' ? Icons.StopOutlined : Icons.CheckOutlined;
return (
<>
@@ -417,6 +420,7 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
onSearch={val => this.setState({ currentSuggestionSearch: val })}
onSelect={this.clearSuggestionSearch}
onBlur={this.clearSuggestionSearch}
+ menuItemSelectedIcon={
+
@@ -162,8 +162,10 @@ const VizTypeControl = props => {
const { value, labelType } = props;
const filterString = filter.toLowerCase();
+ const filterStringParts = filterString.split(' ');
- const filteredTypes = DEFAULT_ORDER.filter(type => registry.has(type))
+ const a = DEFAULT_ORDER.filter(type => registry.has(type));
+ const filteredTypes = a
.filter(type => {
const behaviors = registry.get(type)?.behaviors || [];
return nativeFilterGate(behaviors);
@@ -181,7 +183,11 @@ const VizTypeControl = props => {
})
.filter(({ key }) => !typesWithDefaultOrder.has(key)),
)
- .filter(entry => entry.value.name.toLowerCase().includes(filterString));
+ .filter(entry =>
+ filterStringParts.every(
+ part => entry.value.name.toLowerCase().indexOf(part) !== -1,
+ ),
+ );
return (
{type.name}
@@ -217,9 +223,10 @@ const VizTypeControl = props => {
value={filter}
placeholder={t('Search')}
onChange={changeSearch}
+ data-test={`${VIZ_TYPE_CONTROL_TEST_ID}__search-input`}
/>
-
+ | null {
const trimmedState = {
...(state || {}),
- database_name: state?.database_name?.trim() || '',
- sqlalchemy_uri: state?.sqlalchemy_uri || '',
};
switch (action.type) {
@@ -163,9 +161,7 @@ function dbReducer(
};
case ActionType.fetched:
return {
- parameters: {
- engine: trimmedState.parameters?.engine,
- },
+ engine: trimmedState.engine,
configuration_method: trimmedState.configuration_method,
...action.payload,
};
@@ -196,13 +192,16 @@ const DatabaseModal: FunctionComponent = ({
>(dbReducer, null);
const [tabKey, setTabKey] = useState(DEFAULT_TAB_KEY);
const [availableDbs, getAvailableDbs] = useAvailableDatabases();
+ const [validationErrors, getValidation] = useDatabaseValidation();
const [hasConnectedDb, setHasConnectedDb] = useState(false);
+ const [dbName, setDbName] = useState('');
const conf = useCommonConf();
const isEditMode = !!databaseId;
const useSqlAlchemyForm =
db?.configuration_method === CONFIGURATION_METHOD.SQLALCHEMY_URI;
const useTabLayout = isEditMode || useSqlAlchemyForm;
+
// Database fetch logic
const {
state: { loading: dbLoading, resource: dbFetched },
@@ -248,14 +247,16 @@ const DatabaseModal: FunctionComponent = ({
// don't pass parameters if using the sqlalchemy uri
delete update.parameters;
}
- updateResource(db.id as number, update as DatabaseObject).then(result => {
- if (result) {
- if (onDatabaseAdd) {
- onDatabaseAdd();
- }
- onClose();
+ const result = await updateResource(
+ db.id as number,
+ update as DatabaseObject,
+ );
+ if (result) {
+ if (onDatabaseAdd) {
+ onDatabaseAdd();
}
- });
+ onClose();
+ }
} else if (db) {
// Create
const dbId = await createResource(update as DatabaseObject);
@@ -300,7 +301,6 @@ const DatabaseModal: FunctionComponent = ({
setDB({
type: ActionType.dbSelected,
payload: {
- parameters: {},
configuration_method: CONFIGURATION_METHOD.SQLALCHEMY_URI,
}, // todo hook this up to step 1
});
@@ -316,6 +316,9 @@ const DatabaseModal: FunctionComponent = ({
type: ActionType.fetched,
payload: dbFetched,
});
+ // keep a copy of the name separate for display purposes
+ // because it shouldn't change when the form is updated
+ setDbName(dbFetched.database_name);
}
}, [dbFetched]);
@@ -326,7 +329,7 @@ const DatabaseModal: FunctionComponent = ({
const dbModel: DatabaseForm =
availableDbs?.databases?.find(
(available: { engine: string | undefined }) =>
- available.engine === db?.parameters?.engine,
+ available.engine === db?.engine,
) || {};
const disableSave =
@@ -362,12 +365,12 @@ const DatabaseModal: FunctionComponent = ({
}
>
{isEditMode ? (
-
+
{db?.backend}
- {db?.database_name}
-
+ {dbName}
+
) : (
-
+
Enter Primary Credentials
Need help? Learn how to connect your database{' '}
@@ -380,7 +383,7 @@ const DatabaseModal: FunctionComponent = ({
.
-
+
)}
= ({
value: target.value,
})
}
+ getValidation={() => getValidation(db)}
+ validationErrors={validationErrors}
/>
[
+ formScrollableStyles,
+ validatedFormStyles(theme),
+ ]}
+ >
{parameters &&
FormFieldOrder.filter(
(key: string) =>
Object.keys(parameters.properties).includes(key) ||
key === 'database_name',
- ).map(field => {
- const {
- className,
- description,
- type,
- placeholder,
- label,
- changeMethod,
- } = FORM_FIELD_MAP[field];
- const onEdit =
- changeMethod === CHANGE_METHOD.onChange
- ? onChange
- : onParametersChange;
- return (
-
-
- {description}
-
-
-
- );
- })}
+ ).map(field =>
+ FORM_FIELD_MAP[field]({
+ required: parameters.required.includes(field),
+ changeMethods: { onParametersChange, onChange },
+ validationErrors,
+ getValidation,
+ key: field,
+ }),
+ )}
);
-
export const FormFieldMap = FORM_FIELD_MAP;
export default DatabaseConnectionForm;
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ExtraOptions.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ExtraOptions.tsx
index 174ef60930471..c046c25011115 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ExtraOptions.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ExtraOptions.tsx
@@ -292,12 +292,12 @@ const ExtraOptions = ({
checked={!!db?.impersonate_user}
onChange={onInputChange}
labelText={t(
- 'Impersonate Logged In User (Presto, Hive, and GSheets)',
+ 'Impersonate Logged In User (Presto, Trino, Hive, and GSheets)',
)}
/>
{label}
-