Refactor AnchorLink

superset-frontend/src/components/AnchorLink/AnchorLink.stories.tsx → superset-frontend/src/dashboard/components/AnchorLink/AnchorLink.stories.tsx

@@ -25,7 +25,7 @@ export default {
 };
 
 export const InteractiveAnchorLink = (args: any) => (
-  <AnchorLink anchorLinkId="link" {...args} />
+  <AnchorLink id="link" {...args} />
 );
 
 const PLACEMENTS = ['right', 'left', 'top', 'bottom'];

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

@@ -0,0 +1,69 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, act } from 'spec/helpers/testing-library';
+import AnchorLink from 'src/dashboard/components/AnchorLink';
+
+describe('AnchorLink', () => {
+  const props = {
+    id: 'CHART-123',
+    dashboardId: 10,
+  };
+
+  const globalLocation = window.location;
+  afterEach(() => {
+    window.location = globalLocation;
+  });
+
+  it('should scroll the AnchorLink into view upon mount if id matches hash', async () => {
+    const callback = jest.fn();
+    jest.spyOn(document, 'getElementById').mockReturnValue({
+      scrollIntoView: callback,
+    } as unknown as HTMLElement);
+
+    window.location.hash = props.id;
+    await act(async () => {
+      render(<AnchorLink {...props} />, { useRedux: true });
+    });
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    window.location.hash = 'random';
+    await act(async () => {
+      render(<AnchorLink {...props} />, { useRedux: true });
+    });
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render anchor link without short link button', () => {
+    const { container, queryByRole } = render(
+      <AnchorLink showShortLinkButton={false} {...props} />,
+      { useRedux: true },
+    );
+    expect(container.querySelector(`#${props.id}`)).toBeInTheDocument();
+    expect(queryByRole('button')).toBe(null);
+  });
+
+  it('should render short link button', () => {
+    const { getByRole } = render(
+      <AnchorLink {...props} showShortLinkButton />,
+      { useRedux: true },
+    );
+    expect(getByRole('button')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,78 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useEffect } from 'react';
+import { t } from '@superset-ui/core';
+
+import URLShortLinkButton, {
+  URLShortLinkButtonProps,
+} from 'src/dashboard/components/URLShortLinkButton';
+import getLocationHash from 'src/dashboard/util/getLocationHash';
+
+export type AnchorLinkProps = {
+  id: string;
+  scrollIntoView?: boolean;
+  showShortLinkButton?: boolean;
+} & Pick<URLShortLinkButtonProps, 'dashboardId' | 'placement'>;
+
+export default function AnchorLink({
+  id,
+  dashboardId,
+  placement = 'right',
+  scrollIntoView = false,
+  showShortLinkButton = true,
+}: AnchorLinkProps) {
+  const scrollAnchorIntoView = (elementId: string) => {
+    const element = document.getElementById(elementId);
+    if (element) {
+      element.scrollIntoView({
+        block: 'center',
+        behavior: 'smooth',
+      });
+    }
+  };
+
+  // will always scroll element into view if element id and url hash match
+  const hash = getLocationHash();
+  useEffect(() => {
+    if (hash && id === hash) {
+      scrollAnchorIntoView(id);
+    }
+  }, [hash, id]);
+
+  // force scroll into view
+  useEffect(() => {
+    if (scrollIntoView) {
+      scrollAnchorIntoView(id);
+    }
+  }, [id, scrollIntoView]);
+
+  return (
+    <span className="anchor-link-container" id={id}>
+      {showShortLinkButton && dashboardId && (
+        <URLShortLinkButton
+          anchorLinkId={id}
+          dashboardId={dashboardId}
+          emailSubject={t('Superset chart')}
+          emailContent={t('Check out this chart in dashboard:')}
+          placement={placement}
+        />
+      )}
+    </span>
+  );
+}

superset-frontend/src/components/URLShortLinkButton/URLShortLinkButton.test.tsx → superset-frontend/src/dashboard/components/URLShortLinkButton/URLShortLinkButton.test.tsx

@@ -20,7 +20,7 @@ import React from 'react';
 import { render, screen } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
-import URLShortLinkButton from 'src/components/URLShortLinkButton';
+import URLShortLinkButton from 'src/dashboard/components/URLShortLinkButton';
 import ToastContainer from 'src/components/MessageToasts/ToastContainer';
 
 const DASHBOARD_ID = 10;

superset-frontend/src/components/URLShortLinkButton/index.tsx → superset-frontend/src/dashboard/components/URLShortLinkButton/index.tsx

@@ -26,7 +26,7 @@ import { URL_PARAMS } from 'src/constants';
 import { getFilterValue } from 'src/dashboard/components/nativeFilters/FilterBar/keyValue';
 
 export type URLShortLinkButtonProps = {
-  dashboardId?: number;
+  dashboardId: number;
   anchorLinkId?: string;
   emailSubject?: string;
   emailContent?: string;
@@ -36,27 +36,25 @@ export type URLShortLinkButtonProps = {
 export default function URLShortLinkButton({
   dashboardId,
   anchorLinkId,
+  placement = 'right',
   emailContent = '',
   emailSubject = '',
-  placement = 'left',
 }: URLShortLinkButtonProps) {
   const [shortUrl, setShortUrl] = useState('');
   const { addDangerToast } = useToasts();
 
   const getCopyUrl = async () => {
-    if (dashboardId) {
-      const nativeFiltersKey = getUrlParam(URL_PARAMS.nativeFiltersKey);
-      try {
-        const filterState = await getFilterValue(dashboardId, nativeFiltersKey);
-        const url = await getDashboardPermalink({
-          dashboardId,
-          filterState,
-          hash: anchorLinkId,
-        });
-        setShortUrl(url);
-      } catch (error) {
-        addDangerToast(error);
-      }
+    const nativeFiltersKey = getUrlParam(URL_PARAMS.nativeFiltersKey);
+    try {
+      const filterState = await getFilterValue(dashboardId, nativeFiltersKey);
+      const url = await getDashboardPermalink({
+        dashboardId,
+        filterState,
+        hash: anchorLinkId,
+      });
+      setShortUrl(url);
+    } catch (error) {
+      addDangerToast(error);
     }
   };