From f538ebb93332246949a41c74ae21c166b2d400b0 Mon Sep 17 00:00:00 2001
From: Drikus Roor <drikusroor@gmail.com>
Date: Wed, 2 Oct 2024 14:52:22 +0200
Subject: [PATCH] Refactor: Remove `logoClickConfirm` and make user go to the
 experiment dashboard directly (#1303)

* refactor: Remove `logoClickConfirm` and make user go to the experiment dashboard directly

* chore(deps): Update package version to 2.2.7
---
 frontend/src/components/AppBar/AppBar.jsx           |  4 ++--
 frontend/src/components/AppBar/AppBar.test.jsx      | 11 -----------
 frontend/src/components/Experiment/Experiment.jsx   |  8 --------
 .../ExperimentCollectionDashboard.tsx               |  2 +-
 frontend/src/components/Logo/Logo.tsx               | 13 +------------
 frontend/src/components/Page/DefaultPage.jsx        |  4 ++--
 frontend/src/components/Page/DefaultPage.test.jsx   |  1 -
 package.json                                        |  2 +-
 8 files changed, 7 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/AppBar/AppBar.jsx b/frontend/src/components/AppBar/AppBar.jsx
index 906453398..512a42666 100644
--- a/frontend/src/components/AppBar/AppBar.jsx
+++ b/frontend/src/components/AppBar/AppBar.jsx
@@ -4,11 +4,11 @@ import Logo from "@/components/Logo/Logo";
 
 
 // AppBar is a bar on top of the app, with navigation and title
-const AppBar = ({ title, logoClickConfirm = null }) => {
+const AppBar = ({ title, }) => {
 
     return (
         <div className="aha__app-bar navbar bg-black">
-            <Logo logoClickConfirm={logoClickConfirm} />
+            <Logo />
             <h4 className="title text-light">{title}</h4>
             <span className="action-right"></span>
         </div>
diff --git a/frontend/src/components/AppBar/AppBar.test.jsx b/frontend/src/components/AppBar/AppBar.test.jsx
index 1a84c53d7..be8a5d6b8 100644
--- a/frontend/src/components/AppBar/AppBar.test.jsx
+++ b/frontend/src/components/AppBar/AppBar.test.jsx
@@ -34,15 +34,4 @@ describe('AppBar', () => {
     expect(logo.getAttribute('href')).toBe(BASE_URL);
   });
 
-  it('prevents navigation when logoClickConfirm is provided and user cancels', () => {
-    // Mock window.confirm
-    window.confirm = vi.fn(() => false);
-
-    const { getByLabelText } = render(<AppBar title="Test Title" logoClickConfirm="Confirm?" />, { wrapper: Router });
-    const logo = getByLabelText('Logo');
-    fireEvent.click(logo);
-
-    expect(window.confirm).toHaveBeenCalledWith('Confirm?');
-  });
-
 });
diff --git a/frontend/src/components/Experiment/Experiment.jsx b/frontend/src/components/Experiment/Experiment.jsx
index fe7ae3de9..f1d8ff0a1 100644
--- a/frontend/src/components/Experiment/Experiment.jsx
+++ b/frontend/src/components/Experiment/Experiment.jsx
@@ -245,14 +245,6 @@ const Experiment = ({ match }) => {
                 {(!loadingExperiment && experiment) || view === "ERROR" ? (
                     <DefaultPage
                         title={state.title}
-                        logoClickConfirm={
-                            ["FINAL", "ERROR"].includes(view) ||
-                                // Info pages at end of experiment
-                                (view === "INFO" &&
-                                    (!state.next_round || !state.next_round.length))
-                                ? null
-                                : "Are you sure you want to stop this experiment?"
-                        }
                         className={className}
                     >
                         {render(view)}
diff --git a/frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx b/frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx
index 559920b80..ec493cca5 100644
--- a/frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx
+++ b/frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx
@@ -32,7 +32,7 @@ export const ExperimentCollectionDashboard: React.FC<ExperimentCollectionDashboa
 
     return (
         <div className="aha__dashboard">
-            <Logo logoClickConfirm={null} />
+            <Logo />
             {headerProps && (
                 <Header {...headerProps}></Header>
             )}
diff --git a/frontend/src/components/Logo/Logo.tsx b/frontend/src/components/Logo/Logo.tsx
index 27df7842c..d015d8c4c 100644
--- a/frontend/src/components/Logo/Logo.tsx
+++ b/frontend/src/components/Logo/Logo.tsx
@@ -3,27 +3,16 @@ import { Link } from "react-router-dom";
 import useBoundStore from "@/util/stores";
 
 
-const Logo: React.FC<{ logoClickConfirm: string | null }> = ({ logoClickConfirm = null }) => {
+const Logo: React.FC = () => {
     const theme = useBoundStore((state) => state.theme);
 
     const { alt, title, file, target, rel } = theme?.logo || {};
     const href = theme?.logo?.href || URLS.AMLHome;
     const logoUrl = file ?? LOGO_URL;
 
-    // Handle click on logo, to optionally confirm navigating
-    const onLogoClick = (e) => {
-        if (logoClickConfirm) {
-            if (!window.confirm(logoClickConfirm)) {
-                e.preventDefault();
-                return false;
-            }
-        }
-    };
-
     // Logo is a Link in case of relative url (/abc),
     // and a-element for absolute urls (https://www.example.com/)
     const logoProps = {
-        onClick: onLogoClick,
         className: "aha__logo",
         "aria-label": "Logo",
         style: { backgroundImage: `url(${logoUrl})` },
diff --git a/frontend/src/components/Page/DefaultPage.jsx b/frontend/src/components/Page/DefaultPage.jsx
index 58e29e967..ce00f95ef 100644
--- a/frontend/src/components/Page/DefaultPage.jsx
+++ b/frontend/src/components/Page/DefaultPage.jsx
@@ -3,10 +3,10 @@ import Page from "./Page";
 import AppBar from "../AppBar/AppBar";
 
 // DefaultPage is a Page with an AppBar and a width-restricted container for content
-const DefaultPage = ({ className, title, logoClickConfirm, children }) => {
+const DefaultPage = ({ className, title, children }) => {
     return (
         <Page className={className}>
-            <AppBar title={title} logoClickConfirm={logoClickConfirm} />
+            <AppBar title={title} />
             <div className="container">
                 <div className="row justify-content-center py-3">
                     <div className="col-12">{children}</div>
diff --git a/frontend/src/components/Page/DefaultPage.test.jsx b/frontend/src/components/Page/DefaultPage.test.jsx
index 6b815cf0f..151787b5a 100644
--- a/frontend/src/components/Page/DefaultPage.test.jsx
+++ b/frontend/src/components/Page/DefaultPage.test.jsx
@@ -19,7 +19,6 @@ describe("DefaultPage Component Tests", () => {
     const defaultProps = {
         className:'aha__default',
         title: "Default page title",
-        logoClickConfirm: null,
         collectionSlug: 'some_collection',
         nextExperimentSlug: 'some_experiment',
     }
diff --git a/package.json b/package.json
index 12507d9c6..5d0b3bb10 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "muscle",
-    "version": "2.2.6",
+    "version": "2.2.7",
     "private": false,
     "description": "The MUSCLE platform is an application that provides an easy way to implement and run online listening experiments for music research.",
     "license": "MIT",