Fix link to your projects page (#1149)

Author: loiswells97

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

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",

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,14 +33,18 @@ const ProjectsPanel = () => {
     </>
   );
 
+  const navigateToProjectsPage = () => {
+    document.dispatchEvent(navigateToProjectsPageEvent);
+  };
+
   return (
     <SidebarPanel
       heading={t("projectsPanel.projects")}
       Button={() =>
         isLoggedIn && (
           <DesignSystemButton
             className="btn--primary projects-panel__your-projects-button"
-            href={`/${locale}/projects`}
+            onClick={navigateToProjectsPage}
             text={t("projectsPanel.yourProjectsButton")}
           />
         )

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", () => {

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);