This is an automated email from the ASF dual-hosted git repository.
villebro pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new b7ecb14 fix(dashboard): fix default filter bar visibility + add docs
(#18741)
b7ecb14 is described below
commit b7ecb14230383da679a3f61e38faa33cdb5014f7
Author: Ville Brofeldt <[email protected]>
AuthorDate: Wed Mar 23 08:55:03 2022 +0200
fix(dashboard): fix default filter bar visibility + add docs (#18741)
* fix(dashboard): fix default filter tab visibility + add tests
* fix types
* lint
* rename docs + add double bang to length
---
.../creating-your-first-dashboard.mdx | 20 ++++++++++++++++++++
.../src/components/UiConfigContext/index.tsx | 2 +-
superset-frontend/src/constants.ts | 4 ++++
.../dashboard/components/DashboardBuilder/state.ts | 18 +++++++++++-------
.../components/nativeFilters/FilterBar/keyValue.tsx | 4 ++--
superset-frontend/src/utils/urlUtils.ts | 20 ++++++++++++++------
6 files changed, 52 insertions(+), 16 deletions(-)
diff --git
a/docs/docs/creating-charts-dashboards/creating-your-first-dashboard.mdx
b/docs/docs/creating-charts-dashboards/creating-your-first-dashboard.mdx
index 0744581..39400a1 100644
--- a/docs/docs/creating-charts-dashboards/creating-your-first-dashboard.mdx
+++ b/docs/docs/creating-charts-dashboards/creating-your-first-dashboard.mdx
@@ -189,3 +189,23 @@ all charts will load their data even if feature flag is
turned on and no roles a
to roles the access will fallback to **Dataset permissions**
<img src={useBaseUrl("/img/tutorial/tutorial_dashboard_access.png" )} />
+
+### Customizing dashboard
+
+The following URL parameters can be used to modify how the dashboard is
rendered:
+- `standalone`:
+ - `0` (default): dashboard is displayed normally
+ - `1`: Top Navigation is hidden
+ - `2`: Top Navigation + title is hidden
+ - `3`: Top Navigation + title + top level tabs are hidden
+- `show_filters`:
+ - `0`: render dashboard without Filter Bar
+ - `1` (default): render dashboard with Filter Bar if native filters are
enabled
+- `expand_filters`:
+ - (default): render dashboard with Filter Bar expanded if there are native
filters
+ - `0`: render dashboard with Filter Bar collapsed
+ - `1`: render dashboard with Filter Bar expanded
+
+For example, when running the local development build, the following will
disable the
+Top Nav and remove the Filter Bar:
+`http://localhost:8088/superset/dashboard/my-dashboard/?standalone=1&show_filters=0`
diff --git a/superset-frontend/src/components/UiConfigContext/index.tsx
b/superset-frontend/src/components/UiConfigContext/index.tsx
index 4b77e42..3943cde 100644
--- a/superset-frontend/src/components/UiConfigContext/index.tsx
+++ b/superset-frontend/src/components/UiConfigContext/index.tsx
@@ -41,7 +41,7 @@ export const useUiConfig = () => useContext(UiConfigContext);
export const EmbeddedUiConfigProvider: React.FC<EmbeddedUiConfigProviderProps>
=
({ children }) => {
- const config = getUrlParam(URL_PARAMS.uiConfig);
+ const config = getUrlParam(URL_PARAMS.uiConfig) || 0;
const [embeddedConfig] = useState({
hideTitle: (config & 1) !== 0,
hideTab: (config & 2) !== 0,
diff --git a/superset-frontend/src/constants.ts
b/superset-frontend/src/constants.ts
index 777d5f2..2ef1bc7 100644
--- a/superset-frontend/src/constants.ts
+++ b/superset-frontend/src/constants.ts
@@ -55,6 +55,10 @@ export const URL_PARAMS = {
name: 'show_filters',
type: 'boolean',
},
+ expandFilters: {
+ name: 'expand_filters',
+ type: 'boolean',
+ },
formDataKey: {
name: 'form_data_key',
type: 'string',
diff --git
a/superset-frontend/src/dashboard/components/DashboardBuilder/state.ts
b/superset-frontend/src/dashboard/components/DashboardBuilder/state.ts
index 4c56ab8..676ffd4 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/state.ts
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/state.ts
@@ -32,11 +32,10 @@ import {
export const useNativeFilters = () => {
const filterboxMigrationState = useContext(MigrationContext);
const [isInitialized, setIsInitialized] = useState(false);
- const [dashboardFiltersOpen, setDashboardFiltersOpen] = useState(
- getUrlParam(URL_PARAMS.showFilters) ?? true,
- );
const showNativeFilters = useSelector<RootState, boolean>(
- state => state.dashboardInfo.metadata?.show_native_filters,
+ state =>
+ (getUrlParam(URL_PARAMS.showFilters) ?? true) &&
+ state.dashboardInfo.metadata?.show_native_filters,
);
const canEdit = useSelector<RootState, boolean>(
({ dashboardInfo }) => dashboardInfo.dash_edit_perm,
@@ -44,6 +43,10 @@ export const useNativeFilters = () => {
const filters = useFilters();
const filterValues = Object.values(filters);
+ const expandFilters = getUrlParam(URL_PARAMS.expandFilters);
+ const [dashboardFiltersOpen, setDashboardFiltersOpen] = useState(
+ expandFilters ?? !!filterValues.length,
+ );
const nativeFiltersEnabled =
showNativeFilters &&
@@ -74,9 +77,10 @@ export const useNativeFilters = () => {
useEffect(() => {
if (
- filterValues.length === 0 &&
- nativeFiltersEnabled &&
- ['CONVERTED', 'REVIEWING', 'NOOP'].includes(filterboxMigrationState)
+ expandFilters === false ||
+ (filterValues.length === 0 &&
+ nativeFiltersEnabled &&
+ ['CONVERTED', 'REVIEWING', 'NOOP'].includes(filterboxMigrationState))
) {
toggleDashboardFiltersOpen(false);
} else {
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/keyValue.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/keyValue.tsx
index ec9735f..27a4d3b 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/keyValue.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/keyValue.tsx
@@ -21,7 +21,7 @@ import { DashboardPermalinkValue } from 'src/dashboard/types';
const assembleEndpoint = (
dashId: string | number,
- key?: string,
+ key?: string | null,
tabId?: string,
) => {
let endpoint = `api/v1/dashboard/${dashId}/filter_state`;
@@ -65,7 +65,7 @@ export const createFilterKey = (
return null;
});
-export const getFilterValue = (dashId: string | number, key: string) =>
+export const getFilterValue = (dashId: string | number, key?: string | null) =>
SupersetClient.get({
endpoint: assembleEndpoint(dashId, key),
})
diff --git a/superset-frontend/src/utils/urlUtils.ts
b/superset-frontend/src/utils/urlUtils.ts
index ffaf562..be85751 100644
--- a/superset-frontend/src/utils/urlUtils.ts
+++ b/superset-frontend/src/utils/urlUtils.ts
@@ -30,14 +30,22 @@ import serializeActiveFilterValues from
'../dashboard/util/serializeActiveFilter
export type UrlParamType = 'string' | 'number' | 'boolean' | 'object' |
'rison';
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(param: UrlParam & { type: 'rison' }): object;
+export function getUrlParam(
+ param: UrlParam & { type: 'string' },
+): string | null;
+export function getUrlParam(
+ param: UrlParam & { type: 'number' },
+): number | null;
+export function getUrlParam(
+ param: UrlParam & { type: 'boolean' },
+): boolean | null;
+export function getUrlParam(
+ param: UrlParam & { type: 'object' },
+): object | null;
+export function getUrlParam(param: UrlParam & { type: 'rison' }): object |
null;
export function getUrlParam(
param: UrlParam & { type: 'rison | string' },
-): string | object;
+): string | object | null;
export function getUrlParam({ name, type }: UrlParam): unknown {
const urlParam = new URLSearchParams(window.location.search).get(name);
switch (type) {
