fix(permalink): adding anchor to dashboard permalink generation (#28744)

superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx

@@ -23,9 +23,9 @@ import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import { HeaderDropdownProps } from 'src/dashboard/components/Header/types';
 import injectCustomCss from 'src/dashboard/util/injectCustomCss';
-import HeaderActionsDropdown from '.';
+import { HeaderActionsDropdown } from '.';
 
-const createProps = () => ({
+const createProps = (): HeaderDropdownProps => ({
   addSuccessToast: jest.fn(),
   addDangerToast: jest.fn(),
   customCss: '.ant-menu {margin-left: 100px;}',
@@ -66,6 +66,7 @@ const createProps = () => ({
   userCanCurate: false,
   lastModifiedTime: 0,
   isDropdownVisible: true,
+  manageEmbedded: jest.fn(),
   dataMask: {},
   logEvent: jest.fn(),
 });
@@ -228,9 +229,9 @@ test('should show the properties modal', async () => {
 
 describe('UNSAFE_componentWillReceiveProps', () => {
   let wrapper: any;
+
   const mockedProps = createProps();
   const props = { ...mockedProps, customCss: '' };
-
   beforeEach(() => {
     wrapper = shallow(<HeaderActionsDropdown {...props} />);
     wrapper.setState({ css: props.customCss });

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

@@ -19,6 +19,7 @@
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
+import { connect } from 'react-redux';
 import { t } from '@superset-ui/core';
 import { Menu } from 'src/components/Menu';
 import { URL_PARAMS } from 'src/constants';
@@ -46,6 +47,7 @@ const propTypes = {
   customCss: PropTypes.string,
   colorNamespace: PropTypes.string,
   colorScheme: PropTypes.string,
+  directPathToChild: PropTypes.array,
   onChange: PropTypes.func.isRequired,
   updateCss: PropTypes.func.isRequired,
   forceRefreshAllCharts: PropTypes.func.isRequired,
@@ -77,7 +79,11 @@ const defaultProps = {
   refreshWarning: null,
 };
 
-class HeaderActionsDropdown extends PureComponent {
+const mapStateToProps = state => ({
+  directPathToChild: state.dashboardState.directPathToChild,
+});
+
+export class HeaderActionsDropdown extends PureComponent {
   static discardChanges() {
     window.location.reload();
   }
@@ -173,6 +179,7 @@ class HeaderActionsDropdown extends PureComponent {
       addDangerToast,
       setIsDropdownVisible,
       isDropdownVisible,
+      directPathToChild,
       ...rest
     } = this.props;
 
@@ -191,6 +198,8 @@ class HeaderActionsDropdown extends PureComponent {
     const refreshIntervalOptions =
       dashboardInfo.common?.conf?.DASHBOARD_AUTO_REFRESH_INTERVALS;
 
+    const dashboardComponentId = [...(directPathToChild || [])].pop();
+
     return (
       <Menu selectable={false} data-test="header-actions-menu" {...rest}>
         {!editMode && (
@@ -286,6 +295,7 @@ class HeaderActionsDropdown extends PureComponent {
               addSuccessToast={addSuccessToast}
               addDangerToast={addDangerToast}
               dashboardId={dashboardId}
+              dashboardComponentId={dashboardComponentId}
             />
           </Menu.SubMenu>
         )}
@@ -354,4 +364,4 @@ class HeaderActionsDropdown extends PureComponent {
 HeaderActionsDropdown.propTypes = propTypes;
 HeaderActionsDropdown.defaultProps = defaultProps;
 
-export default HeaderActionsDropdown;
+export default connect(mapStateToProps)(HeaderActionsDropdown);

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

@@ -41,7 +41,7 @@ import { AntdButton } from 'src/components/';
 import { findPermission } from 'src/utils/findPermission';
 import { Tooltip } from 'src/components/Tooltip';
 import { safeStringify } from 'src/utils/safeStringify';
-import HeaderActionsDropdown from 'src/dashboard/components/Header/HeaderActionsDropdown';
+import ConnectedHeaderActionsDropdown from 'src/dashboard/components/Header/HeaderActionsDropdown';
 import PublishedStatus from 'src/dashboard/components/PublishedStatus';
 import UndoRedoKeyListeners from 'src/dashboard/components/UndoRedoKeyListeners';
 import PropertiesModal from 'src/dashboard/components/PropertiesModal';
@@ -672,7 +672,7 @@ class Header extends PureComponent {
             onVisibleChange: this.setIsDropdownVisible,
           }}
           additionalActionsMenu={
-            <HeaderActionsDropdown
+            <ConnectedHeaderActionsDropdown
               addSuccessToast={this.props.addSuccessToast}
               addDangerToast={this.props.addDangerToast}
               dashboardId={dashboardInfo.id}

superset-frontend/src/dashboard/components/Header/types.ts

@@ -54,7 +54,13 @@ export interface HeaderDropdownProps {
   updateCss: () => void;
   userCanEdit: boolean;
   userCanSave: boolean;
+  userCanShare: boolean;
+  userCanCurate: boolean;
+  isDropdownVisible: boolean;
+  manageEmbedded: () => void;
+  dataMask: any;
   lastModifiedTime: number;
+  logEvent: () => void;
 }
 
 export interface HeaderProps {

superset-frontend/src/dashboard/components/RefreshIntervalModal.test.tsx

@@ -22,7 +22,7 @@ import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 
 import RefreshIntervalModal from 'src/dashboard/components/RefreshIntervalModal';
-import HeaderActionsDropdown from 'src/dashboard/components/Header/HeaderActionsDropdown';
+import { HeaderActionsDropdown } from 'src/dashboard/components/Header/HeaderActionsDropdown';
 
 const createProps = () => ({
   addSuccessToast: jest.fn(),