mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
feat(native-filter): Hide native filters (#14784)
* fix:fix get permission function * feat: support showFilters * fix: fix CR notes * fix: fix lint issues
This commit is contained in:
parent
50c5dcbb0a
commit
e43112c5f9
@ -27,6 +27,7 @@ import { Row, Col, Grid } from 'antd';
|
|||||||
import Icon from 'src/components/Icon';
|
import Icon from 'src/components/Icon';
|
||||||
import RightMenu from './MenuRight';
|
import RightMenu from './MenuRight';
|
||||||
import { Languages } from './LanguagePicker';
|
import { Languages } from './LanguagePicker';
|
||||||
|
import { URL_PARAMS } from '../../constants';
|
||||||
|
|
||||||
interface BrandProps {
|
interface BrandProps {
|
||||||
path: string;
|
path: string;
|
||||||
@ -158,7 +159,7 @@ export function Menu({
|
|||||||
return () => window.removeEventListener('resize', windowResize);
|
return () => window.removeEventListener('resize', windowResize);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const standalone = getUrlParam('standalone', 'boolean');
|
const standalone = getUrlParam(URL_PARAMS.standalone);
|
||||||
if (standalone) return <></>;
|
if (standalone) return <></>;
|
||||||
|
|
||||||
const renderSubMenu = ({
|
const renderSubMenu = ({
|
||||||
|
@ -23,9 +23,19 @@ export const BOOL_TRUE_DISPLAY = 'True';
|
|||||||
export const BOOL_FALSE_DISPLAY = 'False';
|
export const BOOL_FALSE_DISPLAY = 'False';
|
||||||
|
|
||||||
export const URL_PARAMS = {
|
export const URL_PARAMS = {
|
||||||
standalone: 'standalone',
|
standalone: {
|
||||||
preselectFilters: 'preselect_filters',
|
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.
|
* Faster debounce delay for inputs without expensive operation.
|
||||||
|
@ -27,7 +27,6 @@ import {
|
|||||||
import { chart } from 'src/chart/chartReducer';
|
import { chart } from 'src/chart/chartReducer';
|
||||||
import { initSliceEntities } from 'src/dashboard/reducers/sliceEntities';
|
import { initSliceEntities } from 'src/dashboard/reducers/sliceEntities';
|
||||||
import { getInitialState as getInitialNativeFilterState } from 'src/dashboard/reducers/nativeFilters';
|
import { getInitialState as getInitialNativeFilterState } from 'src/dashboard/reducers/nativeFilters';
|
||||||
import { getParam } from 'src/modules/utils';
|
|
||||||
import { applyDefaultFormData } from 'src/explore/store';
|
import { applyDefaultFormData } from 'src/explore/store';
|
||||||
import { buildActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
|
import { buildActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
|
||||||
import findPermission, {
|
import findPermission, {
|
||||||
@ -54,6 +53,8 @@ import getFilterConfigsFromFormdata from 'src/dashboard/util/getFilterConfigsFro
|
|||||||
import getLocationHash from 'src/dashboard/util/getLocationHash';
|
import getLocationHash from 'src/dashboard/util/getLocationHash';
|
||||||
import newComponentFactory from 'src/dashboard/util/newComponentFactory';
|
import newComponentFactory from 'src/dashboard/util/newComponentFactory';
|
||||||
import { TIME_RANGE } from 'src/visualizations/FilterBox/FilterBox';
|
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 { FeatureFlag, isFeatureEnabled } from '../../featureFlags';
|
||||||
import extractUrlParams from '../util/extractUrlParams';
|
import extractUrlParams from '../util/extractUrlParams';
|
||||||
|
|
||||||
@ -77,9 +78,9 @@ export const hydrateDashboard = (dashboardData, chartData, datasourcesData) => (
|
|||||||
});
|
});
|
||||||
try {
|
try {
|
||||||
// allow request parameter overwrite dashboard metadata
|
// allow request parameter overwrite dashboard metadata
|
||||||
preselectFilters = JSON.parse(
|
preselectFilters =
|
||||||
getParam('preselect_filters') || metadata.default_filters,
|
getUrlParam(URL_PARAMS.preselectFilters) ||
|
||||||
);
|
JSON.parse(metadata.default_filters);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
//
|
//
|
||||||
}
|
}
|
||||||
|
@ -120,7 +120,9 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
|
|||||||
isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS) &&
|
isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS) &&
|
||||||
(canEdit || (!canEdit && filterValues.length !== 0));
|
(canEdit || (!canEdit && filterValues.length !== 0));
|
||||||
|
|
||||||
const [dashboardFiltersOpen, setDashboardFiltersOpen] = useState(true);
|
const [dashboardFiltersOpen, setDashboardFiltersOpen] = useState(
|
||||||
|
getUrlParam(URL_PARAMS.showFilters) ?? true,
|
||||||
|
);
|
||||||
|
|
||||||
const toggleDashboardFiltersOpen = (visible?: boolean) => {
|
const toggleDashboardFiltersOpen = (visible?: boolean) => {
|
||||||
setDashboardFiltersOpen(visible ?? !dashboardFiltersOpen);
|
setDashboardFiltersOpen(visible ?? !dashboardFiltersOpen);
|
||||||
@ -152,7 +154,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
|
|||||||
: undefined;
|
: undefined;
|
||||||
|
|
||||||
const hideDashboardHeader =
|
const hideDashboardHeader =
|
||||||
getUrlParam(URL_PARAMS.standalone, 'number') ===
|
getUrlParam(URL_PARAMS.standalone) ===
|
||||||
DashboardStandaloneMode.HIDE_NAV_AND_TITLE;
|
DashboardStandaloneMode.HIDE_NAV_AND_TITLE;
|
||||||
|
|
||||||
const barTopOffset =
|
const barTopOffset =
|
||||||
|
@ -168,7 +168,7 @@ class HeaderActionsDropdown extends React.PureComponent {
|
|||||||
window.location.pathname,
|
window.location.pathname,
|
||||||
getActiveFilters(),
|
getActiveFilters(),
|
||||||
window.location.hash,
|
window.location.hash,
|
||||||
getUrlParam(URL_PARAMS.standalone, 'number'),
|
getUrlParam(URL_PARAMS.standalone),
|
||||||
);
|
);
|
||||||
window.location.replace(url);
|
window.location.replace(url);
|
||||||
break;
|
break;
|
||||||
|
@ -30,12 +30,12 @@ export default function getDashboardUrl(
|
|||||||
// convert flattened { [id_column]: values } object
|
// convert flattened { [id_column]: values } object
|
||||||
// to nested filter object
|
// to nested filter object
|
||||||
newSearchParams.set(
|
newSearchParams.set(
|
||||||
URL_PARAMS.preselectFilters,
|
URL_PARAMS.preselectFilters.name,
|
||||||
JSON.stringify(serializeActiveFilterValues(filters)),
|
JSON.stringify(serializeActiveFilterValues(filters)),
|
||||||
);
|
);
|
||||||
|
|
||||||
if (standalone) {
|
if (standalone) {
|
||||||
newSearchParams.set(URL_PARAMS.standalone, standalone.toString());
|
newSearchParams.set(URL_PARAMS.standalone.name, standalone.toString());
|
||||||
}
|
}
|
||||||
|
|
||||||
const hashSection = hash ? `#${hash}` : '';
|
const hashSection = hash ? `#${hash}` : '';
|
||||||
|
@ -69,7 +69,7 @@ export default class EmbedCodeButton extends React.Component {
|
|||||||
generateEmbedHTML() {
|
generateEmbedHTML() {
|
||||||
const srcLink = `${window.location.origin + getURIDirectory()}?r=${
|
const srcLink = `${window.location.origin + getURIDirectory()}?r=${
|
||||||
this.state.shortUrlId
|
this.state.shortUrlId
|
||||||
}&${URL_PARAMS.standalone}=1&height=${this.state.height}`;
|
}&${URL_PARAMS.standalone.name}=1&height=${this.state.height}`;
|
||||||
return (
|
return (
|
||||||
'<iframe\n' +
|
'<iframe\n' +
|
||||||
` width="${this.state.width}"\n` +
|
` width="${this.state.width}"\n` +
|
||||||
|
@ -191,7 +191,7 @@ function ExploreViewContainer(props) {
|
|||||||
const payload = { ...props.form_data };
|
const payload = { ...props.form_data };
|
||||||
const longUrl = getExploreLongUrl(
|
const longUrl = getExploreLongUrl(
|
||||||
props.form_data,
|
props.form_data,
|
||||||
props.standalone ? URL_PARAMS.standalone : null,
|
props.standalone ? URL_PARAMS.standalone.name : null,
|
||||||
false,
|
false,
|
||||||
);
|
);
|
||||||
try {
|
try {
|
||||||
|
@ -103,7 +103,7 @@ export function getExploreLongUrl(
|
|||||||
search[key] = extraSearch[key];
|
search[key] = extraSearch[key];
|
||||||
});
|
});
|
||||||
search.form_data = safeStringify(formData);
|
search.form_data = safeStringify(formData);
|
||||||
if (endpointType === URL_PARAMS.standalone) {
|
if (endpointType === URL_PARAMS.standalone.name) {
|
||||||
search.standalone = DashboardStandaloneMode.HIDE_NAV;
|
search.standalone = DashboardStandaloneMode.HIDE_NAV;
|
||||||
}
|
}
|
||||||
const url = uri.directory(directory).search(search).toString();
|
const url = uri.directory(directory).search(search).toString();
|
||||||
@ -176,7 +176,7 @@ export function getExploreUrl({
|
|||||||
if (endpointType === 'csv') {
|
if (endpointType === 'csv') {
|
||||||
search.csv = 'true';
|
search.csv = 'true';
|
||||||
}
|
}
|
||||||
if (endpointType === URL_PARAMS.standalone) {
|
if (endpointType === URL_PARAMS.standalone.name) {
|
||||||
search.standalone = '1';
|
search.standalone = '1';
|
||||||
}
|
}
|
||||||
if (endpointType === 'query') {
|
if (endpointType === 'query') {
|
||||||
|
@ -26,16 +26,6 @@ export function getDatasourceParameter(datasourceId, datasourceType) {
|
|||||||
return `${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) {
|
export function mainMetric(savedMetrics) {
|
||||||
// Using 'count' as default metric if it exists, otherwise using whatever one shows up first
|
// Using 'count' as default metric if it exists, otherwise using whatever one shows up first
|
||||||
let metric;
|
let metric;
|
||||||
|
@ -18,13 +18,16 @@
|
|||||||
*/
|
*/
|
||||||
import { SupersetClient } from '@superset-ui/core';
|
import { SupersetClient } from '@superset-ui/core';
|
||||||
import { getClientErrorObject } from './getClientErrorObject';
|
import { getClientErrorObject } from './getClientErrorObject';
|
||||||
|
import { URL_PARAMS } from '../constants';
|
||||||
|
|
||||||
export type UrlParamType = 'string' | 'number' | 'boolean';
|
export type UrlParamType = 'string' | 'number' | 'boolean' | 'object';
|
||||||
export function getUrlParam(paramName: string, type: 'string'): string;
|
export type UrlParam = typeof URL_PARAMS[keyof typeof URL_PARAMS];
|
||||||
export function getUrlParam(paramName: string, type: 'number'): number;
|
export function getUrlParam(param: UrlParam & { type: 'string' }): string;
|
||||||
export function getUrlParam(paramName: string, type: 'boolean'): boolean;
|
export function getUrlParam(param: UrlParam & { type: 'number' }): number;
|
||||||
export function getUrlParam(paramName: string, type: UrlParamType): unknown {
|
export function getUrlParam(param: UrlParam & { type: 'boolean' }): boolean;
|
||||||
const urlParam = new URLSearchParams(window.location.search).get(paramName);
|
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) {
|
switch (type) {
|
||||||
case 'number':
|
case 'number':
|
||||||
if (!urlParam) {
|
if (!urlParam) {
|
||||||
@ -40,6 +43,11 @@ export function getUrlParam(paramName: string, type: UrlParamType): unknown {
|
|||||||
return Number(urlParam);
|
return Number(urlParam);
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
|
case 'object':
|
||||||
|
if (!urlParam) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return JSON.parse(urlParam);
|
||||||
case 'boolean':
|
case 'boolean':
|
||||||
if (!urlParam) {
|
if (!urlParam) {
|
||||||
return null;
|
return null;
|
||||||
|
Loading…
Reference in New Issue
Block a user