fix(dashboard): copy permalink to dashboard chart (#19772)

* fix(dashboard): copy permalink to dashboard chart

* lint

* address comments

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),
         )

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}
           />
         )}
 

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

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,