961 add footer for frontend pages

frontend/src/app.config.ts

@@ -3,6 +3,9 @@ import { EventListenerJobStatus } from "./types/data";
 
 interface Config {
 	appVersion: string;
+	mailingList: string;
+	slackChannel: string;
+	documentation: string;
 	hostname: string;
 	apikey: string;
 	GHIssueBaseURL: string;
@@ -36,6 +39,10 @@ const hostname =
 // TODO when add auth piece remove this env
 const apikey = process.env.APIKEY || "";
 config["appVersion"] = "v2.0.0-beta.2";
+config["mailingList"] = "[email protected]";
+config["slackChannel"] =
+	"https://join.slack.com/t/clowder-software/shared_invite/enQtMzQzOTg0Nzk3OTUzLTYwZDlkZDI0NGI4YmI0ZjE5MTZiYmZhZTIyNWE1YzM0NWMwMzIxODNhZTA1Y2E3MTQzOTg1YThiNzkwOWQwYWE";
+config["documentation"] = "https://clowder2.readthedocs.io/en/latest/";
 config["hostname"] = hostname;
 config["apikey"] = apikey;
 

frontend/src/components/Layout.tsx

@@ -38,7 +38,7 @@ import {
 import { AdminPanelSettings } from "@mui/icons-material";
 import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
 import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings";
-import { AppVersion } from "./versions/AppVersion";
+import { Footer } from "./navigation/Footer";
 
 const drawerWidth = 240;
 
@@ -51,13 +51,13 @@ const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })<{
 		easing: theme.transitions.easing.sharp,
 		duration: theme.transitions.duration.leavingScreen,
 	}),
-	marginLeft: `-${drawerWidth}px`,
+	marginLeft: 0,
 	...(open && {
 		transition: theme.transitions.create("margin", {
 			easing: theme.transitions.easing.easeOut,
 			duration: theme.transitions.duration.enteringScreen,
 		}),
-		marginLeft: 0,
+		marginLeft: `${drawerWidth}px`,
 	}),
 }));
 
@@ -157,7 +157,13 @@ export default function PersistentDrawerLeft(props) {
 
 	// @ts-ignore
 	return (
-		<Box sx={{ display: "flex" }}>
+		<Box
+			sx={{
+				display: "flex",
+				flexDirection: "column", // Stack children vertically
+				minHeight: "100vh", // Fill the viewport height
+			}}
+		>
 			<AppBar position="fixed" open={open}>
 				<Toolbar>
 					<IconButton
@@ -417,8 +423,25 @@ export default function PersistentDrawerLeft(props) {
 			<Main open={open}>
 				<DrawerHeader />
 				{children}
-				<AppVersion />
 			</Main>
+			<Box
+				sx={{
+					mt: "auto", // Pushes the footer to the bottom
+					minHeight: "30px",
+					width: "100%",
+					marginLeft: 0,
+					...(open && {
+						width: `calc(100% - ${drawerWidth}px)`,
+						transition: theme.transitions.create("margin", {
+							easing: theme.transitions.easing.easeOut,
+							duration: theme.transitions.duration.enteringScreen,
+						}),
+						marginLeft: `${drawerWidth}px`,
+					}),
+				}}
+			>
+				<Footer />
+			</Box>
 		</Box>
 	);
 }

frontend/src/components/PublicLayout.tsx

@@ -18,14 +18,12 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import { Link, Menu, MenuItem, MenuList } from "@mui/material";
 import { Link as RouterLink, useLocation } from "react-router-dom";
-import { useSelector } from "react-redux";
-import { RootState } from "../types/data";
 import { Explore } from "@material-ui/icons";
 import PersonIcon from "@mui/icons-material/Person";
 import VpnKeyIcon from "@mui/icons-material/VpnKey";
 import LogoutIcon from "@mui/icons-material/Logout";
 import { EmbeddedSearch } from "./search/EmbeddedSearch";
-import { AppVersion } from "./versions/AppVersion";
+import { Footer } from "./navigation/Footer";
 
 const drawerWidth = 240;
 
@@ -38,13 +36,13 @@ const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })<{
 		easing: theme.transitions.easing.sharp,
 		duration: theme.transitions.duration.leavingScreen,
 	}),
-	marginLeft: `-${drawerWidth}px`,
+	marginLeft: 0,
 	...(open && {
 		transition: theme.transitions.create("margin", {
 			easing: theme.transitions.easing.easeOut,
 			duration: theme.transitions.duration.enteringScreen,
 		}),
-		marginLeft: 0,
+		marginLeft: `${drawerWidth}px`,
 	}),
 }));
 
@@ -108,10 +106,6 @@ export default function PersistentDrawerLeft(props) {
 		setOpen(false);
 	};
 
-	const handleProfileMenuOpen = (event) => {
-		setAnchorEl(event.currentTarget);
-	};
-
 	const handleProfileMenuClose = () => {
 		setAnchorEl(null);
 	};
@@ -126,11 +120,15 @@ export default function PersistentDrawerLeft(props) {
 		}
 	}, [location]);
 
-	const loggedOut = useSelector((state: RootState) => state.error.loggedOut);
-
 	// @ts-ignore
 	return (
-		<Box sx={{ display: "flex" }}>
+		<Box
+			sx={{
+				display: "flex",
+				flexDirection: "column", // Stack children vertically
+				minHeight: "100vh", // Fill the viewport height
+			}}
+		>
 			<CssBaseline />
 			<AppBar position="fixed" open={open}>
 				<Toolbar>
@@ -240,8 +238,25 @@ export default function PersistentDrawerLeft(props) {
 			<Main open={open}>
 				<DrawerHeader />
 				{children}
-				<AppVersion />
 			</Main>
+			<Box
+				sx={{
+					mt: "auto", // Pushes the footer to the bottom
+					minHeight: "30px",
+					width: "100%",
+					marginLeft: 0,
+					...(open && {
+						width: `calc(100% - ${drawerWidth}px)`,
+						transition: theme.transitions.create("margin", {
+							easing: theme.transitions.easing.easeOut,
+							duration: theme.transitions.duration.enteringScreen,
+						}),
+						marginLeft: `${drawerWidth}px`,
+					}),
+				}}
+			>
+				<Footer />
+			</Box>
 		</Box>
 	);
 }

frontend/src/components/navigation/Footer.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import {
+	AppBar,
+	Box,
+	Container,
+	Link,
+	Toolbar,
+	Typography,
+} from "@mui/material";
+import config from "../../app.config";
+import { theme } from "../../theme";
+
+export const Footer = () => {
+	const appVersion = config.appVersion;
+
+	return (
+		<AppBar position="static" color="inherit" component="footer">
+			<Container sx={{ maxWidth: "inherit!important" }}>
+				<Toolbar sx={{ justifyContent: "space-between", alignItems: "center" }}>
+					<Box sx={{ display: "flex", alignItems: "center" }}>
+						<img
+							src="../../public/grey-clowder-logo-icon.svg"
+							alt="Clowder Logo"
+							style={{
+								marginRight: 8,
+								height: "20px",
+								color: theme.palette.info.main,
+							}}
+						/>
+						<Typography variant="body1" sx={{ color: theme.palette.info.main }}>
+							Powered by Clowder | {appVersion}
+						</Typography>
+					</Box>
+					<Box sx={{ display: "flex" }}>
+						<Link
+							href={config.slackChannel}
+							color="primary"
+							sx={{ ml: 2, textDecoration: "none" }}
+							target="_blank"
+						>
+							Slack
+						</Link>
+						<Link
+							href={config.documentation}
+							color="primary"
+							sx={{ ml: 2, textDecoration: "none" }}
+							target="_blank"
+						>
+							Documentation
+						</Link>
+						<Link
+							href={`mailto:${config.mailingList}`}
+							color="primary"
+							sx={{ ml: 2, textDecoration: "none" }}
+							target="_blank"
+						>
+							Contact Us
+						</Link>
+					</Box>
+				</Toolbar>
+			</Container>
+		</AppBar>
+	);
+};

frontend/src/components/navigation/TopBar.tsx

@@ -40,9 +40,9 @@ export default function TopBar() {
 					</Box>
 					{loggedOut ? (
 						<>
-							<Link href="/auth/register" sx={link}>
-								Register
-							</Link>
+							{/*<Link href="/auth/register" sx={link}>*/}
+							{/*	Register*/}
+							{/*</Link>*/}
 							<Link href="/auth/login" sx={link}>
 								Login
 							</Link>