feat(native-filter): Hide native filters (#14784)

* fix:fix get permission function

* feat: support showFilters

* fix: fix CR notes

* fix: fix lint issues

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 = ({

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

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(
+    preselectFilters =
-      getParam('preselect_filters') || metadata.default_filters,
+      getUrlParam(URL_PARAMS.preselectFilters) ||
-    );
+      JSON.parse(metadata.default_filters);
   } catch (e) {
     //
   }

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

@@ -120,7 +120,9 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
     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<DashboardBuilderProps> = () => {
       : undefined;
 
   const hideDashboardHeader =
-    getUrlParam(URL_PARAMS.standalone, 'number') ===
+    getUrlParam(URL_PARAMS.standalone) ===
     DashboardStandaloneMode.HIDE_NAV_AND_TITLE;
 
   const barTopOffset =

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;

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}` : '';

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 (
       '<iframe\n' +
       `  width="${this.state.width}"\n` +

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 {

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

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;

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