From 368db162cfe9b1add278bf88adfaaa6b74c2943e Mon Sep 17 00:00:00 2001
From: Lois Wells <88904316+loiswells97@users.noreply.github.com>
Date: Tue, 3 Dec 2024 15:25:45 +0000
Subject: [PATCH] Fix link to your projects page (#1149)

---
 CHANGELOG.md                                     |  9 ++++++++-
 package.json                                     |  2 +-
 .../Sidebar/ProjectsPanel/ProjectsPanel.jsx      | 12 +++++++-----
 .../Sidebar/ProjectsPanel/ProjectsPanel.test.js  | 16 ++++++++++++++++
 src/events/WebComponentCustomEvents.js           |  4 ++++
 5 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 14bedd07e..0ae5a7dca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+## [0.28.11] - 2024-12-03
+
+### Fixed
+
+- Link to "Your projects" page (#1149)
+
 ## [0.28.10] - 2024-11-29
 
 ### Fixed
@@ -995,7 +1001,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Events in Web Component indicating whether Mission Zero criteria have been met (#113)
 
-[unreleased]: https://github.com/RaspberryPiFoundation/editor-ui/compare/v0.28.10...HEAD
+[unreleased]: https://github.com/RaspberryPiFoundation/editor-ui/compare/v0.28.11...HEAD
+[0.28.11]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.11
 [0.28.10]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.10
 [0.28.9]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.9
 [0.28.8]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.8
diff --git a/package.json b/package.json
index 2b22255c6..0a89d08fc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@raspberrypifoundation/editor-ui",
-  "version": "0.28.10",
+  "version": "0.28.11",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.8",
diff --git a/src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.jsx b/src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.jsx
index f4a9a59ff..4f07eecb2 100644
--- a/src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.jsx
+++ b/src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.jsx
@@ -13,12 +13,10 @@ import { MOBILE_MEDIA_QUERY } from "../../../../utils/mediaQueryBreakpoints";
 import { useMediaQuery } from "react-responsive";
 import SaveStatus from "../../../SaveStatus/SaveStatus";
 import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
+import { navigateToProjectsPageEvent } from "../../../../events/WebComponentCustomEvents";
 
 const ProjectsPanel = () => {
-  const {
-    t,
-    i18n: { language: locale },
-  } = useTranslation();
+  const { t } = useTranslation();
 
   const isLoggedIn = useSelector((state) => state?.auth?.user);
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
@@ -35,6 +33,10 @@ const ProjectsPanel = () => {
     </>
   );
 
+  const navigateToProjectsPage = () => {
+    document.dispatchEvent(navigateToProjectsPageEvent);
+  };
+
   return (
     <SidebarPanel
       heading={t("projectsPanel.projects")}
@@ -42,7 +44,7 @@ const ProjectsPanel = () => {
         isLoggedIn && (
           <DesignSystemButton
             className="btn--primary projects-panel__your-projects-button"
-            href={`/${locale}/projects`}
+            onClick={navigateToProjectsPage}
             text={t("projectsPanel.yourProjectsButton")}
           />
         )
diff --git a/src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.test.js b/src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.test.js
index cf6cc82ba..f759e4e3b 100644
--- a/src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.test.js
+++ b/src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.test.js
@@ -6,6 +6,8 @@ import { MemoryRouter } from "react-router-dom";
 
 import ProjectsPanel from "./ProjectsPanel";
 
+document.dispatchEvent = jest.fn();
+
 const initialState = {
   editor: {
     project: {
@@ -66,6 +68,20 @@ describe("Projects Panel", () => {
         screen.queryByText("projectsPanel.yourProjectsButton"),
       ).toBeInTheDocument();
     });
+
+    test("Clicking projects button dispatches navigateToProjectsPageEvent", () => {
+      const projectsPageButton = screen.getByText(
+        "projectsPanel.yourProjectsButton",
+      );
+      projectsPageButton.click();
+      expect(document.dispatchEvent).toHaveBeenCalledWith(
+        new CustomEvent("editor-navigateToProjectsPageEvent", {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        }),
+      );
+    });
   });
 
   describe("When not read only", () => {
diff --git a/src/events/WebComponentCustomEvents.js b/src/events/WebComponentCustomEvents.js
index ddcb574be..6378b294d 100644
--- a/src/events/WebComponentCustomEvents.js
+++ b/src/events/WebComponentCustomEvents.js
@@ -8,6 +8,10 @@ const webComponentCustomEvent = (type, detail) =>
 
 export const codeChangedEvent = webComponentCustomEvent("editor-codeChanged");
 
+export const navigateToProjectsPageEvent = webComponentCustomEvent(
+  "editor-navigateToProjectsPage",
+);
+
 export const projectIdentifierChangedEvent = (detail) =>
   webComponentCustomEvent("editor-projectIdentifierChanged", detail);