fix: replace datamask with key from new key value api

superset-frontend/src/constants.ts

@@ -37,7 +37,7 @@ export const URL_PARAMS = {
   },
   nativeFilters: {
     name: 'native_filters',
-    type: 'rison',
+    type: 'rison | string',
   },
   filterSet: {
     name: 'filter_set',

superset-frontend/src/dashboard/actions/hydrate.js

@@ -67,10 +67,10 @@ export const hydrateDashboard =
     dashboardData,
     chartData,
     filterboxMigrationState = FILTER_BOX_MIGRATION_STATES.NOOP,
+    dataMaskApplied,
   ) =>
   (dispatch, getState) => {
     const { user, common } = getState();
-
     const { metadata } = dashboardData;
     const regularUrlParams = extractUrlParams('regular');
     const reservedUrlParams = extractUrlParams('reserved');
@@ -378,10 +378,11 @@ export const hydrateDashboard =
           slice_can_edit: findPermission('can_slice', 'Superset', roles),
           common: {
             // legacy, please use state.common instead
-            flash_messages: common.flash_messages,
-            conf: common.conf,
+            flash_messages: common?.flash_messages,
+            conf: common?.conf,
           },
         },
+        dataMask: dataMaskApplied,
         dashboardFilters,
         nativeFilters,
         dashboardState: {

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

@@ -235,7 +235,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
   );
 
   const dashboardRoot = dashboardLayout[DASHBOARD_ROOT_ID];
-  const rootChildId = dashboardRoot.children[0];
+  const rootChildId = dashboardRoot?.children[0];
   const topLevelTabs =
     rootChildId !== DASHBOARD_GRID_ID
       ? dashboardLayout[rootChildId]

superset-frontend/src/dashboard/components/DashboardBuilder/utils.ts

@@ -25,7 +25,7 @@ import findTabIndexByComponentId from 'src/dashboard/util/findTabIndexByComponen
 
 export const getRootLevelTabsComponent = (dashboardLayout: DashboardLayout) => {
   const dashboardRoot = dashboardLayout[DASHBOARD_ROOT_ID];
-  const rootChildId = dashboardRoot.children[0];
+  const rootChildId = dashboardRoot?.children[0];
   return rootChildId === DASHBOARD_GRID_ID
     ? dashboardLayout[DASHBOARD_ROOT_ID]
     : dashboardLayout[rootChildId];

superset-frontend/src/dashboard/components/Header/index.jsx

@@ -174,13 +174,15 @@ class Header extends React.PureComponent {
     this.startPeriodicRender(refreshFrequency * 1000);
     if (this.canAddReports()) {
       // this is in case there is an anonymous user.
-      this.props.fetchUISpecificReport(
-        user.userId,
-        'dashboard_id',
-        'dashboards',
-        dashboardInfo.id,
-        user.email,
-      );
+      if (Object.entries(dashboardInfo).length !== 0) {
+        this.props.fetchUISpecificReport(
+          user.userId,
+          'dashboard_id',
+          'dashboards',
+          dashboardInfo.id,
+          user.email,
+        );
+      }
     }
   }
 
@@ -212,11 +214,11 @@ class Header extends React.PureComponent {
     ) {
       // this is in case there is an anonymous user.
       this.props.fetchUISpecificReport(
-        user.userId,
+        user?.userId,
         'dashboard_id',
         'dashboards',
-        nextProps.dashboardInfo.id,
-        user.email,
+        nextProps?.dashboardInfo?.id,
+        user?.email,
       );
     }
   }
@@ -487,10 +489,10 @@ class Header extends React.PureComponent {
       filterboxMigrationState !== FILTER_BOX_MIGRATION_STATES.REVIEWING;
     const shouldShowReport = !editMode && this.canAddReports();
     const refreshLimit =
-      dashboardInfo.common.conf.SUPERSET_DASHBOARD_PERIODICAL_REFRESH_LIMIT;
+      dashboardInfo.common?.conf?.SUPERSET_DASHBOARD_PERIODICAL_REFRESH_LIMIT;
     const refreshWarning =
-      dashboardInfo.common.conf
-        .SUPERSET_DASHBOARD_PERIODICAL_REFRESH_WARNING_MESSAGE;
+      dashboardInfo.common?.conf
+        ?.SUPERSET_DASHBOARD_PERIODICAL_REFRESH_WARNING_MESSAGE;
 
     return (
       <StyledDashboardHeader

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx

@@ -20,7 +20,7 @@
 /* eslint-disable no-param-reassign */
 import { DataMask, HandlerFunction, styled, t } from '@superset-ui/core';
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import cx from 'classnames';
 import Icons from 'src/components/Icons';
 import { Tabs } from 'src/common/components';
@@ -40,6 +40,7 @@ import {
 import Loading from 'src/components/Loading';
 import { getInitialDataMask } from 'src/dataMask/reducer';
 import { URL_PARAMS } from 'src/constants';
+import { getUrlParam } from 'src/utils/urlUtils';
 import replaceUndefinedByNull from 'src/dashboard/util/replaceUndefinedByNull';
 import { checkIsApplyDisabled, TabIds } from './utils';
 import FilterSets from './FilterSets';
@@ -50,6 +51,7 @@ import {
   useFilterUpdates,
   useInitialization,
 } from './state';
+import { createFilterKey, updateFilterKey } from './keyValue';
 import EditSection from './FilterSets/EditSection';
 import Header from './Header';
 import FilterControls from './FilterControls/FilterControls';
@@ -160,6 +162,9 @@ const FilterBar: React.FC<FiltersBarProps> = ({
   const filters = useFilters();
   const previousFilters = usePrevious(filters);
   const filterValues = Object.values<Filter>(filters);
+  const dashboardId = useSelector<any, string>(
+    ({ dashboardInfo }) => dashboardInfo?.id,
+  );
 
   const handleFilterSelectionChange = useCallback(
     (
@@ -186,23 +191,47 @@ const FilterBar: React.FC<FiltersBarProps> = ({
     [dataMaskSelected, dispatch, setDataMaskSelected, tab],
   );
 
+  const getFilterKeyForUrl = async (value: string) => {
+    let key;
+    try {
+      key = await createFilterKey(dashboardId, value);
+    } catch (err) {
+      return null;
+    }
+    return key;
+  };
+
   const publishDataMask = useCallback(
-    (dataMaskSelected: DataMaskStateWithId) => {
+    async (dataMaskSelected: DataMaskStateWithId) => {
       const { location } = history;
       const { search } = location;
       const previousParams = new URLSearchParams(search);
       const newParams = new URLSearchParams();
-
+      let dataMaskKey = '';
       previousParams.forEach((value, key) => {
         if (key !== URL_PARAMS.nativeFilters.name) {
           newParams.append(key, value);
         }
       });
 
-      newParams.set(
-        URL_PARAMS.nativeFilters.name,
-        rison.encode(replaceUndefinedByNull(dataMaskSelected)),
-      );
+      const getParam = getUrlParam(URL_PARAMS.nativeFilters);
+      const dataMask = JSON.stringify(dataMaskSelected);
+
+      if (typeof getParam === 'object') {
+        const res = await getFilterKeyForUrl(rison.encode(getParam));
+        if (res === null) {
+          dataMaskKey = rison.encode(replaceUndefinedByNull(dataMaskSelected));
+        } else dataMaskKey = res;
+      } else if (typeof getParam === 'string') {
+        try {
+          const res = await updateFilterKey(dashboardId, dataMask, getParam);
+          if (res === 'Value updated successfully.') {
+            dataMaskKey = getParam;
+          }
+          // eslint-disable-next-line no-empty
+        } catch {}
+      }
+      newParams.set(URL_PARAMS.nativeFilters.name, dataMaskKey);
 
       history.replace({
         search: newParams.toString(),

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/keyValue.tsx

@@ -0,0 +1,45 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { SupersetClient } from '@superset-ui/core';
+
+export const updateFilterKey = (dashId: string, value: string, key: string) =>
+  SupersetClient.put({
+    endpoint: `api/v1/dashboard/${dashId}/filter_state/${key}/`,
+    jsonPayload: { value },
+  })
+    .then(r => r.json.message)
+    .catch(err => err);
+
+export const createFilterKey = (dashId: string, value: string) =>
+  SupersetClient.post({
+    endpoint: `api/v1/dashboard/${dashId}/filter_state`,
+    jsonPayload: { value },
+  })
+    .then(r => r.json.key)
+    .catch(err => console.log('err', err));
+
+export const getFilterValue = (
+  dashId: string | number | undefined,
+  key: string,
+) =>
+  SupersetClient.get({
+    endpoint: `api/v1/dashboard/${dashId}/filter_state/${key}/`,
+  })
+    .then(({ json }) => JSON.parse(json.value))
+    .catch(err => err);

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/state.ts

@@ -88,7 +88,6 @@ export const useFilterUpdates = (
 ) => {
   const filters = useFilters();
   const dataMaskApplied = useNativeFiltersDataMask();
-
   useEffect(() => {
     // Remove deleted filters from local state
     Object.keys(dataMaskSelected).forEach(selectedId => {

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/utils.ts

@@ -69,7 +69,6 @@ export const checkIsApplyDisabled = (
 ) => {
   const dataSelectedValues = Object.values(dataMaskSelected);
   const dataAppliedValues = Object.values(dataMaskApplied);
-
   return (
     areObjectsEqual(
       getOnlyExtraFormData(dataMaskSelected),

superset-frontend/src/dashboard/containers/Dashboard.ts

@@ -49,8 +49,8 @@ function mapStateToProps(state: RootState) {
   } = state;
 
   return {
-    initMessages: dashboardInfo.common.flash_messages,
-    timeout: dashboardInfo.common.conf.SUPERSET_WEBSERVER_TIMEOUT,
+    initMessages: dashboardInfo.common?.flash_messages,
+    timeout: dashboardInfo.common?.conf?.SUPERSET_WEBSERVER_TIMEOUT,
     userId: dashboardInfo.userId,
     dashboardInfo,
     dashboardState,

superset-frontend/src/dashboard/containers/DashboardPage.tsx

@@ -48,6 +48,7 @@ import { URL_PARAMS } from 'src/constants';
 import { getUrlParam } from 'src/utils/urlUtils';
 import { canUserEditDashboard } from 'src/dashboard/util/findPermission';
 import { getFilterSets } from '../actions/nativeFilters';
+import { getFilterValue } from '../components/nativeFilters/FilterBar/keyValue';
 
 export const MigrationContext = React.createContext(
   FILTER_BOX_MIGRATION_STATES.NOOP,
@@ -153,16 +154,40 @@ const DashboardPage: FC = () => {
   }, [readyToRender]);
 
   useEffect(() => {
-    if (readyToRender) {
-      if (!isDashboardHydrated.current) {
-        isDashboardHydrated.current = true;
-        if (isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS_SET)) {
-          // only initialize filterset once
-          dispatch(getFilterSets());
+    // eslint-disable-next-line consistent-return
+    async function getDataMaskApplied() {
+      const nativeFilterValue = getUrlParam(URL_PARAMS.nativeFilters);
+      let dataMaskFromUrl = nativeFilterValue || {};
+
+      if (typeof nativeFilterValue === 'string') {
+        try {
+          dataMaskFromUrl = await getFilterValue(
+            dashboard?.id,
+            nativeFilterValue,
+          );
+        } catch (err) {
+          return null;
         }
       }
-      dispatch(hydrateDashboard(dashboard, charts, filterboxMigrationState));
+      if (readyToRender) {
+        if (!isDashboardHydrated.current) {
+          isDashboardHydrated.current = true;
+          if (isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS_SET)) {
+            // only initialize filterset once
+            dispatch(getFilterSets());
+          }
+        }
+        dispatch(
+          hydrateDashboard(
+            dashboard,
+            charts,
+            filterboxMigrationState,
+            dataMaskFromUrl,
+          ),
+        );
+      }
     }
+    if (dashboard?.id) getDataMaskApplied();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [readyToRender, filterboxMigrationState]);
 

superset-frontend/src/dashboard/util/getDashboardUrl.ts

@@ -16,25 +16,21 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import rison from 'rison';
 import { JsonObject } from '@superset-ui/core';
 import { URL_PARAMS } from 'src/constants';
-import replaceUndefinedByNull from './replaceUndefinedByNull';
+import { getUrlParam } from 'src/utils/urlUtils';
 import serializeActiveFilterValues from './serializeActiveFilterValues';
-import { DataMaskState } from '../../dataMask/types';
 
 export default function getDashboardUrl({
   pathname,
   filters = {},
   hash = '',
   standalone,
-  dataMask,
 }: {
   pathname: string;
   filters: JsonObject;
   hash: string;
   standalone?: number | null;
-  dataMask?: DataMaskState;
 }) {
   const newSearchParams = new URLSearchParams();
 
@@ -48,12 +44,9 @@ export default function getDashboardUrl({
   if (standalone) {
     newSearchParams.set(URL_PARAMS.standalone.name, standalone.toString());
   }
-
-  if (dataMask) {
-    newSearchParams.set(
-      URL_PARAMS.nativeFilters.name,
-      rison.encode(replaceUndefinedByNull(dataMask)),
-    );
+  const dataMaskKey = getUrlParam(URL_PARAMS.nativeFilters);
+  if (dataMaskKey) {
+    newSearchParams.set(URL_PARAMS.nativeFilters.name, dataMaskKey as string);
   }
 
   const hashSection = hash ? `#${hash}` : '';

superset-frontend/src/dataMask/actions.ts

@@ -34,6 +34,12 @@ export interface UpdateDataMask {
   dataMask: DataMask;
 }
 
+export const INIT_DATAMASK = 'INIT_DATAMASK';
+export interface INITDATAMASK {
+  type: typeof INIT_DATAMASK;
+  dataMask: DataMask;
+}
+
 export const SET_DATA_MASK_FOR_FILTER_CONFIG_COMPLETE =
   'SET_DATA_MASK_FOR_FILTER_CONFIG_COMPLETE';