Navigate to home when clicking on header

CHANGELOG.md

@@ -36,6 +36,7 @@
 - **BREAKING** Deleted _banner_ and _quickstart_ features.
 - **BREAKING** Merged `application` and `vendor` properties in Client Settings:
   - The application name is always _geopilot_. With `name` the application name can be extended, e.g. to _geopilot Test_.
+  - The url has been removed. As an alternative the link to the organisation can be added to the public files e.g. `info.md`.
   - There is only one `logo` which is used for the header.
   - Optionally a separate `faviconDark` can be defined for dark mode of the browser.
 

src/Geopilot.Frontend/cypress/e2e/footer.cy.js

@@ -54,6 +54,9 @@ describe("Footer tests", () => {
       });
     cy.contains("project1");
     cy.contains("projectA");
+
+    cy.get('[data-cy="header"]').click();
+    cy.get('[data-cy="upload-step"]').should("exist");
   });
 
   it("shows and navigates correctly between footer pages without content", () => {

src/Geopilot.Frontend/src/components/appSettings/appSettingsInterface.ts

@@ -9,7 +9,6 @@ export interface ClientSettings {
   authScopes: string[];
   application: {
     name?: string;
-    url: string;
     logo: string;
     favicon: string;
     faviconDark?: string;

src/Geopilot.Frontend/src/components/header/header.tsx

@@ -60,13 +60,19 @@ const Header: FC<HeaderProps> = ({ openSubMenu }) => {
             flexDirection: "row",
             justifyContent: "space-between",
           }}>
-          <FlexRowBox sx={{ padding: "5px 0" }}>
+          <FlexRowBox
+            data-cy="header"
+            sx={{ padding: "5px 0", cursor: "pointer" }}
+            onClick={() => {
+              navigate("/");
+            }}>
             <Box sx={{ display: { xs: "block", md: "none" }, flex: "0", marginRight: "10px" }}>
               {hasSubMenu ? (
                 <IconButton
                   sx={{ paddingLeft: "0" }}
                   color="inherit"
-                  onClick={() => {
+                  onClick={e => {
+                    e.stopPropagation();
                     openSubMenu();
                   }}>
                   <MenuIcon fontSize="large" />
@@ -78,9 +84,6 @@ const Header: FC<HeaderProps> = ({ openSubMenu }) => {
                       src={clientSettings?.application?.logo}
                       alt={`Logo of ${clientSettings?.application?.name}`}
                       style={{ maxHeight: "40px", cursor: "pointer" }}
-                      onClick={() => {
-                        window.open(clientSettings?.application?.url, "_blank");
-                      }}
                     />
                   </Box>
                 )
@@ -92,9 +95,6 @@ const Header: FC<HeaderProps> = ({ openSubMenu }) => {
                   src={clientSettings?.application?.logo}
                   alt={`Logo of ${clientSettings?.application?.name}`}
                   style={{ maxHeight: "40px", cursor: "pointer" }}
-                  onClick={() => {
-                    window.open(clientSettings?.application?.url, "_blank");
-                  }}
                 />
               </Box>
             )}

src/Geopilot.Frontend/src/pages/admin/admin.tsx

@@ -99,7 +99,11 @@ const Admin: FC<AdminProps> = ({ isSubMenuOpen, setIsSubMenuOpen }) => {
           "& .MuiDrawer-paper": { width: drawerWidth, boxSizing: "border-box" },
         }}>
         <>
-          <FlexRowBox sx={{ padding: "8px 16px" }}>
+          <FlexRowBox
+            sx={{ padding: "8px 16px", cursor: "pointer" }}
+            onClick={() => {
+              navigate("/");
+            }}>
             {clientSettings?.application?.logo && (
               <Box>
                 <img
@@ -111,14 +115,17 @@ const Admin: FC<AdminProps> = ({ isSubMenuOpen, setIsSubMenuOpen }) => {
             )}
             <Box
               sx={{
-                marginLeft: "20px",
                 display: "flex",
-                flexDirection: { xs: "column", md: "row" },
-                alignItems: { xs: "start", md: "center" },
+                flexDirection: "column",
+                alignItems: "start",
               }}>
-              <Typography sx={{ typography: { xs: "h4", md: "h1" } }}>geopilot</Typography>
+              <Typography variant="h4" sx={{ margin: "0 !important" }}>
+                geopilot&nbsp;
+              </Typography>
               {clientSettings?.application?.name && (
-                <Typography sx={{ typography: { xs: "h6", md: "h1" } }}>{clientSettings?.application?.name}</Typography>
+                <Typography variant="h6" sx={{ margin: "0 !important" }}>
+                  {clientSettings?.application?.name}
+                </Typography>
               )}
             </Box>
           </FlexRowBox>