fix: changes for the new landing page (#3784)

src/components/BoardHeader/BoardHeader.tsx

@@ -10,7 +10,6 @@ import {HeaderMenu} from "components/BoardHeader/HeaderMenu";
 import {useTranslation} from "react-i18next";
 import {Actions} from "store/action";
 import {ConfirmationDialog} from "components/ConfirmationDialog";
-import {useNavigate} from "react-router-dom";
 import {shallowEqual} from "react-redux";
 import "./BoardHeader.scss";
 import {ShareButton} from "components/ShareButton";
@@ -31,8 +30,6 @@ export const BoardHeader: VFC<BoardHeaderProps> = (props) => {
     shallowEqual
   );
 
-  const navigate = useNavigate();
-
   const [showMenu, setShowMenu] = useState(false);
   const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
 
@@ -43,7 +40,7 @@ export const BoardHeader: VFC<BoardHeaderProps> = (props) => {
           title={t("ConfirmationDialog.returnToHomepage")}
           onAccept={() => {
             store.dispatch(Actions.leaveBoard());
-            navigate("/");
+            window.location.pathname = "/";
           }}
           onDecline={() => setShowConfirmationDialog(false)}
           icon={LeaveIcon}

src/components/PassphraseDialog/PassphraseDialog.tsx

@@ -2,7 +2,6 @@ import {FC, useState} from "react";
 import "./PassphraseDialog.scss";
 import {ScrumlrLogo} from "components/ScrumlrLogo";
 import {useTranslation} from "react-i18next";
-import {Link} from "react-router-dom";
 import {ReactComponent as VisibleIcon} from "assets/icon-visible.svg";
 import {ReactComponent as HiddenIcon} from "assets/icon-hidden.svg";
 import {TextInputLabel} from "../TextInputLabel";
@@ -31,9 +30,9 @@ export const PassphraseDialog: FC<PassphraseDialogProps> = ({onSubmit}) => {
   return (
     <div className="passphrase-dialog__wrapper">
       <div className="passphrase-dialog">
-        <Link to="/">
+        <a href="/" aria-label="Homepage">
           <ScrumlrLogo accentColorClassNames={["accent-color--blue", "accent-color--purple", "accent-color--lilac", "accent-color--pink"]} />
-        </Link>
+        </a>
 
         <form className="passphrase-dialog__form" onSubmit={handleSubmit}>
           <TextInputLabel label={t("PassphraseDialog.passphraseInputLabel")} htmlFor="password-dialog__password" />

src/components/PassphraseDialog/__tests__/__snapshots__/PassphraseDialog.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`<PassphraseDialog /> snapshot test 1`] = `
     class="passphrase-dialog"
   >
     <a
+      aria-label="Homepage"
       href="/"
     >
       <svg

src/components/RejectionPage/RejectionPage.test.tsx

@@ -1,5 +1,5 @@
-import {screen, fireEvent, render} from "@testing-library/react";
-import {BrowserRouter, MemoryRouter, Routes, Route} from "react-router-dom";
+import {render} from "@testing-library/react";
+import {BrowserRouter} from "react-router-dom";
 import {RejectionPage} from "./RejectionPage";
 
 describe("RejectionPage", () => {
@@ -11,20 +11,4 @@ describe("RejectionPage", () => {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
-
-  it("should redirect to homepage on button click", () => {
-    const {getByText} = render(
-      <MemoryRouter initialEntries={["/board/test-uuid"]}>
-        <Routes>
-          <Route path="/board/test-uuid" element={<RejectionPage />} />
-          <Route path="/" element={<div>Homepage</div>} />
-        </Routes>
-      </MemoryRouter>
-    );
-
-    const button = getByText("RejectionPage.button");
-    expect(button).toBeInTheDocument();
-    fireEvent.click(button);
-    expect(screen.getByText("Homepage")).toBeInTheDocument();
-  });
 });

src/components/RejectionPage/RejectionPage.tsx

@@ -1,5 +1,4 @@
 import {useTranslation} from "react-i18next";
-import {useNavigate} from "react-router";
 import {ScrumlrLogo} from "components/ScrumlrLogo";
 import {ReactComponent as StanLight} from "assets/stan/Stan_Toilette_Light.svg";
 import {ReactComponent as StanDark} from "assets/stan/Stan_Toilette_Dark.svg";
@@ -10,7 +9,6 @@ import "./RejectionPage.scss";
 
 export const RejectionPage = () => {
   const {t} = useTranslation();
-  const navigate = useNavigate();
   return (
     <div className="rejection-page__root">
       <div className="rejection-page__background">
@@ -30,7 +28,12 @@ export const RejectionPage = () => {
         <div className="rejection-page__content">
           <div className="rejection-page__title">{t("RejectionPage.title")}</div>
           <div className="rejection-page__description">{t("RejectionPage.description")}</div>
-          <button className="rejection-page__return-button" onClick={() => navigate("/")}>
+          <button
+            className="rejection-page__return-button"
+            onClick={() => {
+              window.location.pathname = "/";
+            }}
+          >
             {t("RejectionPage.button")}
           </button>
         </div>

src/routes/Legal/Legal.tsx

@@ -2,7 +2,6 @@ import {useTranslation, withTranslation} from "react-i18next";
 import {FC, useEffect, useState} from "react";
 import "./Legal.scss";
 import {generatePath} from "react-router";
-import {Link} from "react-router-dom";
 import {marked} from "marked";
 import {ScrumlrLogo} from "../../components/ScrumlrLogo";
 
@@ -31,9 +30,9 @@ const LegalWithoutTranslation: FC<LegalProps> = ({document}) => {
 
   return (
     <div className="legal">
-      <Link to="/">
+      <a href="/" aria-label="Homepage">
         <ScrumlrLogo accentColorClassNames={["accent-color--blue", "accent-color--purple", "accent-color--lilac", "accent-color--pink"]} />
-      </Link>
+      </a>
 
       <div
         className="legal__text"

src/routes/LoginBoard/LoginBoard.tsx

@@ -1,4 +1,4 @@
-import {Link, useNavigate} from "react-router-dom";
+import {Link} from "react-router-dom";
 import {getRandomName} from "constants/name";
 import {Auth} from "utils/auth";
 import {Toast} from "utils/Toast";
@@ -24,7 +24,6 @@ interface State {
 export const LoginBoard = () => {
   const {t} = useTranslation();
   const location = useLocation();
-  const navigate = useNavigate();
 
   const [displayName, setDisplayName] = useState(getRandomName());
   const [termsAccepted, setTermsAccepted] = useState(!SHOW_LEGAL_DOCUMENTS);
@@ -40,7 +39,7 @@ export const LoginBoard = () => {
     if (termsAccepted) {
       try {
         await Auth.signInAnonymously(displayName);
-        navigate(redirectPath);
+        window.location.pathname = redirectPath;
       } catch (err) {
         Toast.error({title: t("LoginBoard.errorOnRedirect")});
       }
@@ -54,9 +53,9 @@ export const LoginBoard = () => {
       <div className="login-board__dialog">
         <div className="login-board__form-wrapper">
           <div className="login-board__form">
-            <Link to="/">
+            <a href="/" aria-label="Homepage">
               <ScrumlrLogo className="login-board__logo" accentColorClassNames={["accent-color--blue", "accent-color--purple", "accent-color--lilac", "accent-color--pink"]} />
-            </Link>
+            </a>
 
             <h1>{t("LoginBoard.title")}</h1>
 

src/routes/NewBoard/NewBoard.tsx

@@ -5,7 +5,6 @@ import {AccessPolicySelection} from "components/AccessPolicySelection";
 import {AccessPolicy} from "types/board";
 import {useTranslation} from "react-i18next";
 import {useNavigate} from "react-router";
-import {Link} from "react-router-dom";
 import {columnTemplates} from "./columnTemplates";
 import {TextInputLabel} from "../../components/TextInputLabel";
 import {TextInput} from "../../components/TextInput";
@@ -48,9 +47,9 @@ export const NewBoard = () => {
     <div className="new-board__wrapper">
       <div className="new-board">
         <div>
-          <Link to="/">
+          <a href="/" aria-label="Homepage">
             <ScrumlrLogo accentColorClassNames={["accent-color--blue", "accent-color--purple", "accent-color--lilac", "accent-color--pink"]} />
-          </Link>
+          </a>
 
           {!extendedConfiguration && (
             <div>

src/routes/NotFound/NotFound.test.tsx

@@ -1,5 +1,5 @@
-import {screen, fireEvent, render} from "@testing-library/react";
-import {BrowserRouter, MemoryRouter, Routes, Route} from "react-router-dom";
+import {render} from "@testing-library/react";
+import {BrowserRouter} from "react-router-dom";
 import {NotFound} from "./NotFound";
 
 describe("NotFound", () => {
@@ -11,20 +11,4 @@ describe("NotFound", () => {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
-
-  it("should redirect to homepage on button click", () => {
-    const {getByText} = render(
-      <MemoryRouter initialEntries={["/non-existing-route"]}>
-        <Routes>
-          <Route path="/non-existing-route" element={<NotFound />} />
-          <Route path="/" element={<div>Homepage</div>} />
-        </Routes>
-      </MemoryRouter>
-    );
-
-    const button = getByText("NotFoundPage.navigateHome");
-    expect(button).toBeInTheDocument();
-    fireEvent.click(button);
-    expect(screen.getByText("Homepage")).toBeInTheDocument();
-  });
 });

src/routes/NotFound/NotFound.tsx

@@ -10,12 +10,10 @@ import {ReactComponent as BackgroundFreeFormDark} from "assets/pages/404/404_Bac
 import {ReactComponent as BackgroundDetails} from "assets/pages/404/Details.svg";
 
 import {useTranslation} from "react-i18next";
-import {useNavigate} from "react-router";
 import {ScrumlrLogo} from "../../components/ScrumlrLogo";
 
 export const NotFound = () => {
   const {t} = useTranslation();
-  const navigate = useNavigate();
   return (
     <div className="not-found__root">
       <div className="not-found__background">
@@ -35,7 +33,12 @@ export const NotFound = () => {
             <div>{t("NotFoundPage.descriptionLine1")}</div>
             <div>{t("NotFoundPage.descriptionLine2")}</div>
           </div>
-          <button className="not-found__return-button" onClick={() => navigate("/")}>
+          <button
+            className="not-found__return-button"
+            onClick={() => {
+              window.location.pathname = "/";
+            }}
+          >
             {t("NotFoundPage.navigateHome")}
           </button>
         </div>