Revert "fix: use navigate instead of Link from react-dom"

This reverts commit 06bdff1.

Author: rayzhou-bit

src/pages-and-resources/pages/PageSettingButton.jsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Icon, IconButton } from '@openedx/paragon';
 import { ArrowForward, Settings } from '@openedx/paragon/icons';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 
 import { getWaffleFlags } from '../../data/selectors';
 import messages from '../messages';
@@ -44,13 +44,14 @@ const PageSettingButton = ({
 
   if (determineLinkDestination) {
     return (
-      <IconButton
-        src={ArrowForward}
-        iconAs={Icon}
-        size="inline"
-        alt={formatMessage(messages.settings)}
-        onClick={() => navigate(determineLinkDestination)}
-      />
+      <Link to={determineLinkDestination}>
+        <IconButton
+          src={ArrowForward}
+          iconAs={Icon}
+          size="inline"
+          alt={formatMessage(messages.settings)}
+        />
+      </Link>
     );
   }
 

src/pages-and-resources/pages/PageSettingButton.test.jsx

@@ -1,6 +1,5 @@
 import { screen, render } from '@testing-library/react';
 import { useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import PageSettingButton from './PageSettingButton';
 
@@ -44,62 +43,51 @@ const renderComponent = (props = {}) => render(
 );
 
 describe('PageSettingButton', () => {
-  const navigate = jest.fn();
-
   beforeEach(() => {
     useSelector.mockClear();
-    useNavigate.mockReturnValue(navigate);
   });
 
-  it('navigates to the new textbooks page link when useNewTextbooksPage is true', () => {
+  it('renders the settings button with the new textbooks page link when useNewTextbooksPage is true', () => {
     useSelector.mockReturnValue(mockWaffleFlags);
 
     renderComponent({ legacyLink: 'http://legacylink.com/textbooks' });
 
-    const buttonElement = screen.getByRole('button', { name: /settings/i });
-    buttonElement.click();
-
-    expect(navigate).toHaveBeenCalledWith(`/course/${defaultProps.courseId}/page-id`);
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('href', `/course/${defaultProps.courseId}/page-id`);
   });
 
-  it('does not render button when legacyLink prop value incorrect', () => {
+  it('does not render link when legacyLink prop value incorrect', () => {
     useSelector.mockReturnValue(mockWaffleFlags);
 
     renderComponent({ legacyLink: 'http://legacylink.com/some-value' });
 
-    expect(screen.queryByRole('IconButton', { name: /settings/i })).toBeNull();
+    expect(screen.queryByRole('link')).toBeNull();
   });
 
-  it('navigates to the legacy link when useNewTextbooksPage is false', () => {
+  it('renders the settings button with the legacy link when useNewTextbooksPage is false', () => {
     useSelector.mockReturnValue({ ...mockWaffleFlags, useNewTextbooksPage: false });
 
     renderComponent({ legacyLink: 'http://legacylink.com/textbooks' });
 
-    const buttonElement = screen.getByRole('button', { name: /settings/i });
-    buttonElement.click();
-
-    expect(navigate).toHaveBeenCalledWith('http://legacylink.com/textbooks');
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('href', 'http://legacylink.com/textbooks');
   });
 
-  it('navigates to the new custom pages link when useNewCustomPages is true', () => {
+  it('renders the settings button with the new custom pages link when useNewCustomPages is true', () => {
     useSelector.mockReturnValue(mockWaffleFlags);
 
     renderComponent();
 
-    const buttonElement = screen.getByRole('button', { name: /settings/i });
-    buttonElement.click();
-
-    expect(navigate).toHaveBeenCalledWith(`/course/${defaultProps.courseId}/page-id`);
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('href', `/course/${defaultProps.courseId}/page-id`);
   });
 
-  it('navigates to the legacy link when useNewCustomPages is false', () => {
+  it('renders the settings button with the legacy link when useNewCustomPages is false', () => {
     useSelector.mockReturnValue({ ...mockWaffleFlags, useNewCustomPages: false });
 
     renderComponent();
 
-    const buttonElement = screen.getByRole('button', { name: /settings/i });
-    buttonElement.click();
-
-    expect(navigate).toHaveBeenCalledWith(defaultProps.legacyLink);
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('href', defaultProps.legacyLink);
   });
 });