chore(landingpage): call preventDefault on events to avoid # in urls (#…

…1431)
sapcc · Oct 14, 2024 · a824be2 · a824be2
1 parent 1e965c4
commit a824be2
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 28 deletions.
diff --git 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
@@ -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
@@ -3,28 +3,22 @@
  * 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"
 
 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>