From a824be251aebf45217b95bdec9c30eb05ad0a4b2 Mon Sep 17 00:00:00 2001
From: Andreas Pfau <andreas.pfau@sap.com>
Date: Mon, 14 Oct 2024 09:30:34 +0200
Subject: [PATCH] chore(landingpage): call preventDefault on events to avoid #
 in urls (#1431)

---
 .../components/landingpage/LoginOverlay.jsx   |  8 +++--
 .../components/landingpage/RegionSelect.jsx   | 10 ++++--
 .../components/layout/PageHead.jsx            | 32 +++++--------------
 3 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/app/javascript/widgets/landing_page/components/landingpage/LoginOverlay.jsx b/app/javascript/widgets/landing_page/components/landingpage/LoginOverlay.jsx
index af045e3a7f..e9d2311d64 100644
--- a/app/javascript/widgets/landing_page/components/landingpage/LoginOverlay.jsx
+++ b/app/javascript/widgets/landing_page/components/landingpage/LoginOverlay.jsx
@@ -66,7 +66,8 @@ const LoginOverlay = () => {
       <div className="tw-w-full tw-max-w-screen-xl tw-mx-auto tw-pb-12">
         <div className="tw-w-full tw-flex tw-items-center tw-justify-end">
           <Icon
-            onClick={() => {
+            onClick={(e) => {
+              e.preventDefault()
               hideLoginOverlay()
             }}
             icon="close"
@@ -79,7 +80,10 @@ const LoginOverlay = () => {
           <Stack distribution="around">
             <a
               href="#"
-              onClick={() => deselectRegion()}
+              onClick={(e) => {
+                e.preventDefault()
+                deselectRegion()
+              }}
               className={`${tabClasses(!isValidRegionSelected)} ${tabLinkClasses(!isValidRegionSelected)}`}
             >
               1. Choose your region
diff --git a/app/javascript/widgets/landing_page/components/landingpage/RegionSelect.jsx b/app/javascript/widgets/landing_page/components/landingpage/RegionSelect.jsx
index 8451c838a5..eb01ebaa39 100644
--- a/app/javascript/widgets/landing_page/components/landingpage/RegionSelect.jsx
+++ b/app/javascript/widgets/landing_page/components/landingpage/RegionSelect.jsx
@@ -25,7 +25,10 @@ const RegionSelect = () => {
             {continent.regions.map((region) => (
               <Stack
                 key={region.key}
-                onClick={() => selectRegion(region.key)}
+                onClick={(e) => {
+                  e.preventDefault()
+                  selectRegion(region.key)
+                }}
                 alignment="center"
                 className="tw-bg-juno-grey-blue-9 tw-py-3 tw-px-5 tw-cursor-pointer hover:tw-bg-theme-accent hover:tw-text-black"
               >
@@ -46,7 +49,10 @@ const RegionSelect = () => {
               {qaRegionKeys.map((region) => (
                 <Stack
                   key={region}
-                  onClick={() => selectRegion(region)}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    selectRegion(region)
+                  }}
                   alignment="center"
                   className="tw-bg-juno-grey-blue-9 tw-py-3 tw-px-5 tw-cursor-pointer tw-hover:bg-theme-accent tw-hover:text-black"
                 >
diff --git a/app/javascript/widgets/landing_page/components/layout/PageHead.jsx b/app/javascript/widgets/landing_page/components/layout/PageHead.jsx
index 016edb168d..ff0f89bf3f 100644
--- a/app/javascript/widgets/landing_page/components/layout/PageHead.jsx
+++ b/app/javascript/widgets/landing_page/components/layout/PageHead.jsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback } from "react"
+import React from "react"
 
 import useStore from "../../store"
 import { buildDashboardLink, buildPasswordLoginLink } from "../../lib/utils"
@@ -11,20 +11,14 @@ import { buildDashboardLink, buildPasswordLoginLink } from "../../lib/utils"
 import { Button, Stack, PageHeader } from "@cloudoperators/juno-ui-components"
 
 const PageHead = () => {
-  const showLoginOverlay = useStore(
-    useCallback((state) => state.showLoginOverlay)
-  )
-  const selectedDomain = useStore(useCallback((state) => state.domain))
-  const selectedRegion = useStore(useCallback((state) => state.region))
-  const prodMode = useStore(useCallback((state) => state.prodMode))
+  const showLoginOverlay = useStore((state) => state.showLoginOverlay)
+  const selectedDomain = useStore((state) => state.domain)
+  const selectedRegion = useStore((state) => state.region)
+  const prodMode = useStore((state) => state.prodMode)
 
   const handleLoginButtonClick = () => {
     if (selectedRegion && selectedDomain) {
-      window.location.href = buildDashboardLink(
-        selectedRegion,
-        selectedDomain,
-        prodMode
-      )
+      window.location.href = buildDashboardLink(selectedRegion, selectedDomain, prodMode)
     } else {
       showLoginOverlay()
     }
@@ -35,23 +29,13 @@ const PageHead = () => {
       <Stack className="tw-ml-auto" gap="4" alignment="center">
         {selectedDomain === "CC3TEST" && (
           <a
-            href={buildPasswordLoginLink(
-              selectedRegion,
-              selectedDomain,
-              prodMode
-            )}
+            href={buildPasswordLoginLink(selectedRegion, selectedDomain, prodMode)}
             className="tw-text-theme-disabled hover:tw-underline"
           >
             Log in with password
           </a>
         )}
-        <Button
-          variant="primary"
-          size="small"
-          icon="manageAccounts"
-          title="Log in"
-          onClick={handleLoginButtonClick}
-        >
+        <Button variant="primary" size="small" icon="manageAccounts" title="Log in" onClick={handleLoginButtonClick}>
           Log in
         </Button>
       </Stack>