From e061955fd077a9eab6f22f081aa02690801bfd3e Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Tue, 19 Apr 2022 22:34:41 +0300
Subject: [PATCH] fix(dashboard): copy permalink to dashboard chart (#19772)

* fix(dashboard): copy permalink to dashboard chart

* lint

* address comments
---
 .../components/URLShortLinkButton/index.jsx   |  8 +++---
 .../components/SliceHeaderControls/index.tsx  |  6 ++--
 .../components/menu/ShareMenuItems/index.tsx  | 28 ++++++++-----------
 superset-frontend/src/utils/urlUtils.ts       | 14 ++++++----
 4 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/superset-frontend/src/components/URLShortLinkButton/index.jsx b/superset-frontend/src/components/URLShortLinkButton/index.jsx
index 35795f81a11fa..4a03e02d3ea5a 100644
--- a/superset-frontend/src/components/URLShortLinkButton/index.jsx
+++ b/superset-frontend/src/components/URLShortLinkButton/index.jsx
@@ -57,11 +57,11 @@ class URLShortLinkButton extends React.Component {
     if (this.props.dashboardId) {
       getFilterValue(this.props.dashboardId, nativeFiltersKey)
         .then(filterState =>
-          getDashboardPermalink(
-            String(this.props.dashboardId),
+          getDashboardPermalink({
+            dashboardId: this.props.dashboardId,
             filterState,
-            this.props.anchorLinkId,
-          )
+            hash: this.props.anchorLinkId,
+          })
             .then(this.onShortUrlSuccess)
             .catch(this.props.addDangerToast),
         )
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
index 09d646853d24e..86c73a09b6ecd 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
@@ -213,6 +213,8 @@ class SliceHeaderControls extends React.PureComponent<
 
   render() {
     const {
+      componentId,
+      dashboardId,
       slice,
       isFullSize,
       cachedDttm = [],
@@ -221,7 +223,6 @@ class SliceHeaderControls extends React.PureComponent<
       addDangerToast = () => {},
       supersetCanShare = false,
       isCached = [],
-      formData,
     } = this.props;
     const crossFilterItems = getChartMetadataRegistry().items;
     const isTable = slice.viz_type === 'table';
@@ -310,13 +311,14 @@ class SliceHeaderControls extends React.PureComponent<
 
         {supersetCanShare && (
           <ShareMenuItems
+            dashboardId={dashboardId}
+            dashboardComponentId={componentId}
             copyMenuItemTitle={t('Copy permalink to clipboard')}
             emailMenuItemTitle={t('Share permalink by email')}
             emailSubject={t('Superset chart')}
             emailBody={t('Check out this chart: ')}
             addSuccessToast={addSuccessToast}
             addDangerToast={addDangerToast}
-            formData={formData}
           />
         )}
 
diff --git a/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx b/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx
index c70e47dc3d01d..b196100734cc3 100644
--- a/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx
+++ b/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx
@@ -18,14 +18,10 @@
  */
 import React from 'react';
 import copyTextToClipboard from 'src/utils/copy';
-import { t, logging, QueryFormData } from '@superset-ui/core';
+import { t, logging } from '@superset-ui/core';
 import { Menu } from 'src/components/Menu';
-import {
-  getChartPermalink,
-  getDashboardPermalink,
-  getUrlParam,
-} from 'src/utils/urlUtils';
-import { RESERVED_DASHBOARD_URL_PARAMS, URL_PARAMS } from 'src/constants';
+import { getDashboardPermalink, getUrlParam } from 'src/utils/urlUtils';
+import { URL_PARAMS } from 'src/constants';
 import { getFilterValue } from 'src/dashboard/components/nativeFilters/FilterBar/keyValue';
 
 interface ShareMenuItemProps {
@@ -36,8 +32,8 @@ interface ShareMenuItemProps {
   emailBody: string;
   addDangerToast: Function;
   addSuccessToast: Function;
-  dashboardId?: string;
-  formData?: Pick<QueryFormData, 'slice_id' | 'datasource'>;
+  dashboardId: string | number;
+  dashboardComponentId?: string;
 }
 
 const ShareMenuItems = (props: ShareMenuItemProps) => {
@@ -49,23 +45,21 @@ const ShareMenuItems = (props: ShareMenuItemProps) => {
     addDangerToast,
     addSuccessToast,
     dashboardId,
-    formData,
+    dashboardComponentId,
     ...rest
   } = props;
 
   async function generateUrl() {
-    // chart
-    if (formData) {
-      // we need to remove reserved dashboard url params
-      return getChartPermalink(formData, RESERVED_DASHBOARD_URL_PARAMS);
-    }
-    // dashboard
     const nativeFiltersKey = getUrlParam(URL_PARAMS.nativeFiltersKey);
     let filterState = {};
     if (nativeFiltersKey && dashboardId) {
       filterState = await getFilterValue(dashboardId, nativeFiltersKey);
     }
-    return getDashboardPermalink(String(dashboardId), filterState);
+    return getDashboardPermalink({
+      dashboardId,
+      filterState,
+      hash: dashboardComponentId,
+    });
   }
 
   async function onCopyLink() {
diff --git a/superset-frontend/src/utils/urlUtils.ts b/superset-frontend/src/utils/urlUtils.ts
index be857517e06d0..bd570291f2cba 100644
--- a/superset-frontend/src/utils/urlUtils.ts
+++ b/superset-frontend/src/utils/urlUtils.ts
@@ -154,11 +154,15 @@ export function getChartPermalink(
   });
 }
 
-export function getDashboardPermalink(
-  dashboardId: string,
-  filterState: JsonObject,
-  hash?: string,
-) {
+export function getDashboardPermalink({
+  dashboardId,
+  filterState,
+  hash, // the anchor part of the link which corresponds to the tab/chart id
+}: {
+  dashboardId: string | number;
+  filterState: JsonObject;
+  hash?: string;
+}) {
   // only encode filter box state if non-empty
   return getPermalink(`/api/v1/dashboard/${dashboardId}/permalink`, {
     filterState,