feat: Improve state key generation for dashboards and charts (#18576)

* feat: Improve state key generation for dashboards and charts

superset-frontend/cypress-base/cypress/integration/dashboard/key_value.test.ts

@@ -33,9 +33,7 @@ describe('nativefiler url param key', () => {
     cy.login();
     cy.visit(WORLD_HEALTH_DASHBOARD);
     WORLD_HEALTH_CHARTS.forEach(waitForChartLoad);
-  });
-  beforeEach(() => {
-    cy.login();
+    cy.wait(1000); // wait for key to be published (debounced)
   });
   let initialFilterKey: string;
   it('should have cachekey in nativefilter param', () => {

superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts

@@ -151,7 +151,7 @@ describe('Nativefilters Sanity test', () => {
     cy.location().then(loc => {
       const queryParams = qs.parse(removeFirstChar(loc.search));
       const newfilterKey = queryParams.native_filters_key;
-      expect(newfilterKey).not.eq(filterKey);
+      expect(newfilterKey).eq(filterKey);
     });
     cy.wait(3000);
     cy.get(nativeFilters.modal.container).should('not.exist');

superset-frontend/package.json

@@ -117,6 +117,7 @@
     "bootstrap": "^3.4.1",
     "bootstrap-slider": "^10.0.0",
     "brace": "^0.11.1",
+    "broadcast-channel": "^4.10.0",
     "chrono-node": "^2.2.6",
     "classnames": "^2.2.5",
     "core-js": "^3.6.5",

superset-frontend/spec/helpers/shim.ts

@@ -74,3 +74,10 @@ g.$ = jQuery(g.window);
 
 configureTranslation();
 setupSupersetClient();
+
+// The useTabId hook depends on BroadcastChannel. Jest has a memory leak problem when
+// dealing with native modules. See https://chanind.github.io/javascript/2019/10/12/jest-tests-memory-leak.html
+// and https://github.com/facebook/jest/issues/6814 for more information.
+jest.mock('src/hooks/useTabId', () => ({
+  useTabId: () => 1,
+}));

superset-frontend/src/dashboard/components/gridComponents/Chart.jsx

@@ -242,10 +242,15 @@ export default class Chart extends React.Component {
 
   onExploreChart = async () => {
     try {
+      const lastTabId = window.localStorage.getItem('last_tab_id');
+      const nextTabId = lastTabId
+        ? String(Number.parseInt(lastTabId, 10) + 1)
+        : undefined;
       const key = await postFormData(
         this.props.datasource.id,
         this.props.formData,
         this.props.slice.slice_id,
+        nextTabId,
       );
       const url = mountExploreUrl(null, {
         [URL_PARAMS.formDataKey.name]: key,

superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx

@@ -23,6 +23,7 @@ import { t, logging } from '@superset-ui/core';
 import { Menu } from 'src/common/components';
 import { getUrlParam } from 'src/utils/urlUtils';
 import { postFormData } from 'src/explore/exploreUtils/formData';
+import { useTabId } from 'src/hooks/useTabId';
 import { URL_PARAMS } from 'src/constants';
 import { mountExploreUrl } from 'src/explore/exploreUtils';
 import {
@@ -56,6 +57,8 @@ const ShareMenuItems = (props: ShareMenuItemProps) => {
     ...rest
   } = props;
 
+  const tabId = useTabId();
+
   const getShortUrl = useUrlShortener(url || '');
 
   async function getCopyUrl() {
@@ -68,6 +71,7 @@ const ShareMenuItems = (props: ShareMenuItemProps) => {
     const newDataMaskKey = await createFilterKey(
       dashboardId,
       JSON.stringify(prevData),
+      tabId,
     );
     const newUrl = new URL(`${window.location.origin}${url}`);
     newUrl.searchParams.set(URL_PARAMS.nativeFilters.name, newDataMaskKey);
@@ -80,6 +84,7 @@ const ShareMenuItems = (props: ShareMenuItemProps) => {
         parseInt(formData.datasource.split('_')[0], 10),
         formData,
         formData.slice_id,
+        tabId,
       );
       return `${window.location.origin}${mountExploreUrl(null, {
         [URL_PARAMS.formDataKey.name]: key,