Skip to content

Commit

Permalink
fix(dashboard): fix default filter bar visibility + add docs (#18741)
Browse files Browse the repository at this point in the history
* fix(dashboard): fix default filter tab visibility + add tests

* fix types

* lint

* rename docs + add double bang to length
  • Loading branch information
villebro authored Mar 23, 2022
1 parent 375c03e commit b7ecb14
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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`
2 changes: 1 addition & 1 deletion superset-frontend/src/components/UiConfigContext/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 4 additions & 0 deletions superset-frontend/src/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,21 @@ 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,
);

const filters = useFilters();
const filterValues = Object.values(filters);
const expandFilters = getUrlParam(URL_PARAMS.expandFilters);
const [dashboardFiltersOpen, setDashboardFiltersOpen] = useState(
expandFilters ?? !!filterValues.length,
);

const nativeFiltersEnabled =
showNativeFilters &&
Expand Down Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
Expand Down Expand Up @@ -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),
})
Expand Down
20 changes: 14 additions & 6 deletions superset-frontend/src/utils/urlUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down

0 comments on commit b7ecb14

Please sign in to comment.