fix(embedded): Hide anchor links in embedded mode (#31194)

superset-frontend/src/dashboard/components/AnchorLink/index.tsx

@@ -64,7 +64,7 @@ export default function AnchorLink({
   }, [id, scrollIntoView]);
 
   return (
-    <span className="anchor-link-container" id={id}>
+    <span className="anchor-link-container" id={id} data-test="anchor-link">
       {showShortLinkButton && dashboardId && (
         <URLShortLinkButton
           anchorLinkId={id}

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

@@ -47,6 +47,7 @@ const propTypes = {
   parentComponent: componentShape.isRequired,
   index: PropTypes.number.isRequired,
   editMode: PropTypes.bool.isRequired,
+  embeddedMode: PropTypes.bool.isRequired,
 
   // redux
   handleComponentDrop: PropTypes.func.isRequired,
@@ -166,6 +167,7 @@ class Header extends PureComponent {
       index,
       handleComponentDrop,
       editMode,
+      embeddedMode,
     } = this.props;
 
     const headerStyle = headerStyleOptions.find(
@@ -234,7 +236,7 @@ class Header extends PureComponent {
                   onSaveTitle={this.handleChangeText}
                   showTooltip={false}
                 />
-                {!editMode && (
+                {!editMode && !embeddedMode && (
                   <AnchorLink id={component.id} dashboardId={dashboardId} />
                 )}
               </HeaderStyles>

superset-frontend/src/dashboard/components/gridComponents/Header.test.jsx

@@ -45,6 +45,7 @@ describe('Header', () => {
     parentComponent: newComponentFactory(DASHBOARD_GRID_TYPE),
     index: 0,
     editMode: false,
+    embeddedMode: false,
     filters: {},
     handleComponentDrop() {},
     deleteComponent() {},
@@ -118,4 +119,19 @@ describe('Header', () => {
 
     expect(deleteComponent.callCount).toBe(1);
   });
+
+  it('should render the AnchorLink in view mode', () => {
+    const wrapper = setup();
+    expect(wrapper.find('AnchorLink')).toExist();
+  });
+
+  it('should not render the AnchorLink in edit mode', () => {
+    const wrapper = setup({ editMode: true });
+    expect(wrapper.find('AnchorLink')).not.toExist();
+  });
+
+  it('should not render the AnchorLink in embedded mode', () => {
+    const wrapper = setup({ embeddedMode: true });
+    expect(wrapper.find('AnchorLink')).not.toExist();
+  });
 });

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

@@ -52,6 +52,7 @@ const propTypes = {
   onHoverTab: PropTypes.func,
   editMode: PropTypes.bool.isRequired,
   canEdit: PropTypes.bool.isRequired,
+  embeddedMode: PropTypes.bool,
 
   // grid related
   availableColumnCount: PropTypes.number,
@@ -282,6 +283,7 @@ class Tab extends PureComponent {
       isHighlighted,
       onDropPositionChange,
       onDragTab,
+      embeddedMode,
     } = this.props;
 
     return (
@@ -313,7 +315,7 @@ class Tab extends PureComponent {
               showTooltip={false}
               editing={editMode && isFocused}
             />
-            {!editMode && (
+            {!editMode && !embeddedMode && (
               <AnchorLink
                 id={component.id}
                 dashboardId={this.props.dashboardId}

superset-frontend/src/dashboard/components/gridComponents/Tab.test.tsx

@@ -90,6 +90,7 @@ const createProps = () => ({
     type: 'TABS',
   },
   editMode: false,
+  embeddedMode: false,
   undoLength: 0,
   redoLength: 0,
   filters: {},
@@ -404,3 +405,41 @@ test('Render tab content with no children, editMode: true, canEdit: true', () =>
     screen.getByRole('link', { name: 'create a new chart' }),
   ).toHaveAttribute('href', '/chart/add?dashboard_id=23');
 });
+
+test('AnchorLink renders in view mode', () => {
+  const props = createProps();
+  props.renderType = 'RENDER_TAB';
+
+  render(<Tab {...props} />, {
+    useRedux: true,
+    useDnd: true,
+  });
+
+  expect(screen.queryByTestId('anchor-link')).toBeInTheDocument();
+});
+
+test('AnchorLink does not render in edit mode', () => {
+  const props = createProps();
+  props.editMode = true;
+  props.renderType = 'RENDER_TAB';
+
+  render(<Tab {...props} />, {
+    useRedux: true,
+    useDnd: true,
+  });
+
+  expect(screen.queryByTestId('anchor-link')).not.toBeInTheDocument();
+});
+
+test('AnchorLink does not render in embedded mode', () => {
+  const props = createProps();
+  props.embeddedMode = true;
+  props.renderType = 'RENDER_TAB';
+
+  render(<Tab {...props} />, {
+    useRedux: true,
+    useDnd: true,
+  });
+
+  expect(screen.queryByTestId('anchor-link')).not.toBeInTheDocument();
+});

superset-frontend/src/dashboard/containers/DashboardComponent.jsx

@@ -80,6 +80,7 @@ function mapStateToProps(
     dashboardId: dashboardInfo.id,
     dashboardInfo,
     fullSizeChartId: dashboardState.fullSizeChartId,
+    embeddedMode: !dashboardInfo?.userId,
   };
 
   // rows and columns need more data about their child dimensions