From ed63380acabf02353094d112de700d0c48a198a7 Mon Sep 17 00:00:00 2001
From: Vitor Avila <vitor.avila@preset.io>
Date: Thu, 28 Nov 2024 19:53:48 -0300
Subject: [PATCH] fix(embedded): Hide anchor links in embedded mode

---
 .../dashboard/components/AnchorLink/index.tsx |  2 +-
 .../components/gridComponents/Header.jsx      |  4 +-
 .../components/gridComponents/Header.test.jsx | 16 ++++++++
 .../components/gridComponents/Tab.jsx         |  4 +-
 .../components/gridComponents/Tab.test.tsx    | 39 +++++++++++++++++++
 .../containers/DashboardComponent.jsx         |  1 +
 6 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/AnchorLink/index.tsx b/superset-frontend/src/dashboard/components/AnchorLink/index.tsx
index a0162baef2e89..837444412aa78 100644
--- a/superset-frontend/src/dashboard/components/AnchorLink/index.tsx
+++ b/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}
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Header.jsx b/superset-frontend/src/dashboard/components/gridComponents/Header.jsx
index e643cb071b27c..4abbc984e2561 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Header.jsx
+++ b/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>
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Header.test.jsx b/superset-frontend/src/dashboard/components/gridComponents/Header.test.jsx
index ddf9edd7cf029..187d85af027f0 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Header.test.jsx
+++ b/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();
+  })
 });
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
index 7b9bc8d483cdc..4d75f8edafd95 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
+++ b/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}
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tab.test.tsx b/superset-frontend/src/dashboard/components/gridComponents/Tab.test.tsx
index 5b6d9a7553847..8166fc70c6786 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tab.test.tsx
+++ b/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();
+});
diff --git a/superset-frontend/src/dashboard/containers/DashboardComponent.jsx b/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
index bf92c5dcecaeb..b811f398abb5a 100644
--- a/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
+++ b/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