Refactor: Remove logoClickConfirm and make user go to the experimen…

…t dashboard directly (#1303) * refactor: Remove `logoClickConfirm` and make user go to the experiment dashboard directly * chore(deps): Update package version to 2.2.7
Amsterdam-Music-Lab · Oct 2, 2024 · f538ebb · f538ebb
1 parent c176b8b
commit f538ebb
Show file tree

Hide file tree

Showing 8 changed files with 7 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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/...ents/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx b/...ents/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
@@ -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
@@ -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
@@ -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
@@ -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",