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

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`

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,

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',

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 {

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),
   })

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) {