[native filters] Include native filter values in tabbed dashboard link

[stevetracvc]

If you use a dashboard that has tabs, and also native filters, then the tab link generation doesn't work properly. It excludes the native filter values. When sharing the whole dashboard, things work fine. But when sharing a specific tab, it doesn't.

How to reproduce the bug

1. Create or open a dashboard with both tabs and native filters
2. Set several native filter values and hit apply
3. Click on a tab in the dashboard
4. Click the link icon next to that tab's name to generate a shortened URL
5. Copy and paste the shortened URL into a new browser window
6. Observe that native filter values were not applied

Expected results

Like when sharing the dashboard as a whole, when I share a tab I expect all native filter states to also be shared. Ideally, the cross filters will too (another issue I raised: #16580)

Actual results

No native filter states are applied except for default states

Environment

(please complete the following information):

• browser type and version: Chrome 93, Ubuntu
• superset version: master, pulled 10/23
• python version: 3.7.9 (docker container)
• node.js version: v16.10.0
• any feature flags active:
  "DASHBOARD_NATIVE_FILTERS": True,
  "DASHBOARD_CROSS_FILTERS": True,
  "DASHBOARD_FILTERS_EXPERIMENTAL": True,
  "ENABLE_EXPLORE_DRAG_AND_DROP": False,
  "ENABLE_TEMPLATE_PROCESSING": True,
  "DYNAMIC_PLUGINS": True,
  "DASHBOARD_RBAC": True,

Checklist

Make sure to follow these steps before submitting your issue - thank you!

• I have checked the superset logs for python stacktraces and included it here as text if there are any.
• I have reproduced the issue with at least the latest released version of superset.
• I have checked the issue tracker for the same issue and I haven't found one similar.

Additional context

I'm having a hard time finding where the root cause is, but I have an ugly patch to fix it for now. Here's what I've figured out:

• The Tab component creates an AnchorLink component, passing a (I believe deprecated) filter object
• The AnchorLink component creates a URLShortLinkButton component, generating a URL with the getDashboardUrl function from "src/dashboard/util/getDashboardUrl"
• The URLShortLinkButton then shortens the URL to an r/### URL

The issue is what's passed to the getDashboardUrl function, as the filters object seems to be empty (unless the dashboard has the old deprecated filter box viz) and there's no dataMask object being passed (which seems to be where native filters are kept).

So, one question is, should that filters object be empty? If so, then why is no dataMask object propagated to these components? I got lost in how a Tab component is actually created, and couldn't figure out how high up dataMask would need to get injected.

My super awful solution is actually in the AnchorLink component, as the window.location.search object appears to have all of the necessary native filters (for now...I'm guessing that might change as the project moves away from URL params for the native filters) and they just need to be extracted. I remove the preselect_filters and native_filters url param parts, then convert it back to a JS object and pass that as the dataMask object. Patch is attached.

[stevetracvc]

diff --git a/superset-frontend/src/components/AnchorLink/index.jsx b/superset-frontend/src/components/AnchorLink/index.jsx
index 16be622bd..3adec2810 100644
--- a/superset-frontend/src/components/AnchorLink/index.jsx
+++ b/superset-frontend/src/components/AnchorLink/index.jsx
@@ -23,6 +23,7 @@ import { t } from '@superset-ui/core';
 import URLShortLinkButton from 'src/components/URLShortLinkButton';
 import getDashboardUrl from 'src/dashboard/util/getDashboardUrl';
 import getLocationHash from 'src/dashboard/util/getLocationHash';
+import rison from 'rison';
 
 const propTypes = {
   anchorLinkId: PropTypes.string.isRequired,
@@ -76,6 +77,13 @@ class AnchorLink extends React.PureComponent {
       showShortLinkButton,
       placement,
     } = this.props;
+
+    const urlVals = decodeURIComponent(window.location.search)
+      .replace(/^\?(preselect_filters=\{.*\})?&?(native_filters=)?/, '')
+      .replace(/\+/g,  ' ');
+
+    const dataMask = (urlVals.length > 0) ? rison.decode(urlVals) : {};
+
     return (
       <span className="anchor-link-container" id={anchorLinkId}>
         {showShortLinkButton && (
@@ -84,6 +92,7 @@ class AnchorLink extends React.PureComponent {
               pathname: window.location.pathname,
               filters,
               hash: anchorLinkId,
+              dataMask,
             })}
             emailSubject={t('Superset chart')}
             emailContent={t('Check out this chart in dashboard:')}

[geido]

Thanks for the awesome description @stevetracvc. I see this marked as an enhancement request and it will be prioritized accordingly.

[geido]

Oh I also see you have an initial attempt up there @stevetracvc. If you'd like to open a PR I can help you with getting it forward

[stevetracvc]

@geido I don't think my fix is the correct way to do it. Rather than having the data bubble up to the component, I'm just snagging it from the browser's URL bar. I couldn't figure out where to correctly get the data, maybe there's something in the core package that can get it instead?

I just need it to work ASAP, so my way will work for me for now.

[michael-s-molina]

Back-end part to fix this: #17536

The front-end part will come next.