plumbed in the getting started/help control in the navbar (#835)

openziti · Feb 6, 2025 · 8a0a6f5 · 8a0a6f5
1 parent 1ad6e23
commit 8a0a6f5
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 4 deletions.
diff --git a/ui/src/GettingStartedModal.tsx b/ui/src/GettingStartedModal.tsx
@@ -0,0 +1,21 @@
+import {modalStyle} from "./styling/theme.ts";
+import {Box, Grid2, Modal, Typography} from "@mui/material";
+
+interface GettingStartedModalProps {
+    close: () => void;
+    isOpen: boolean;
+}
+
+const GettingStartedModal = ({ close, isOpen }: GettingStartedModalProps) => {
+    return (
+        <Modal open={isOpen} onClose={close}>
+            <Box sx={{ ...modalStyle }}>
+                <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                    <Typography variant="h5"><strong>Getting Started with zrok</strong></Typography>
+                </Grid2>
+            </Box>
+        </Modal>
+    )
+}
+
+export default GettingStartedModal;
diff --git a/ui/src/NavBar.tsx b/ui/src/NavBar.tsx
@@ -3,10 +3,12 @@ import LogoutIcon from "@mui/icons-material/Logout";
 import VisualizerIcon from "@mui/icons-material/Hub";
 import TabularIcon from "@mui/icons-material/TableRows";
 import LimitIcon from "@mui/icons-material/CrisisAlert";
+import HelpIcon from "@mui/icons-material/LiveHelp";
 import zrokLogo from "./assets/zrok-1.0.0-rocket-green.svg";
 import useApiConsoleStore from "./model/store.ts";
 import BandwidthLimitedModal from "./BandwidthLimitedModal.tsx";
 import {useEffect, useState} from "react";
+import GettingStartedModal from "./GettingStartedModal.tsx";
 
 interface NavBarProps {
     logout: () => void;
@@ -15,6 +17,7 @@ interface NavBarProps {
 }
 
 const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
+    const nodes = useApiConsoleStore((state) => state.nodes);
     const limited = useApiConsoleStore((state) => state.limited);
     const [limitedModalOpen, setLimitedModalOpen] = useState<boolean>(false);
     const openLimitedModal = () => {
@@ -23,6 +26,13 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
     const closeLimitedModal = () => {
         setLimitedModalOpen(false);
     }
+    const [gettingStartedOpen, setGettingStartedOpen] = useState<boolean>(false);
+    const openGettingStarted = () => {
+        setGettingStartedOpen(true);
+    }
+    const closeGettingStarted = () => {
+        setGettingStartedOpen(false);
+    }
 
     useEffect(() => {
         if(!limited) {
@@ -38,6 +48,22 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
         </Grid2>
     );
 
+    const gettingStartedButton = (
+        <Grid2 display="flex" justifyContent="right">
+            <Tooltip title="Getting Started Help">
+                <Button style={{ backgroundColor: "#9bf316", color: "black" }} onClick={openGettingStarted}>CLICK HERE TO GET STARTED!</Button>
+            </Tooltip>
+        </Grid2>
+    );
+
+    const helpButton = (
+        <Grid2 display="flex" justifyContent="right">
+            <Tooltip title="Help">
+                <Button color="inherit"><HelpIcon /></Button>
+            </Tooltip>
+        </Grid2>
+    );
+
     const handleClick = () => {
         toggleMode(!visualizer);
     }
@@ -59,14 +85,12 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
                         </Typography>
                         <Grid2 container sx={{ flexGrow: 1 }}>
                             <Grid2 display="flex" justifyContent="right" size="grow">
-                                <Button style={{ backgroundColor: "#9bf316", color: "black" }}>CLICK HERE TO GET STARTED!</Button>
-                            </Grid2>
-                            { limited ? limitedIndicator : null }
-                            <Grid2 display="flex" justifyContent="right">
                                 <Tooltip title="Toggle Interface Mode (Ctrl-`)">
                                     <Button color="inherit" onClick={handleClick}>{ visualizer ? <VisualizerIcon /> : <TabularIcon /> }</Button>
                                 </Tooltip>
                             </Grid2>
+                            { !nodes || nodes.length > 1 ? helpButton : gettingStartedButton }
+                            { limited ? limitedIndicator : null }
                             <Grid2 display="flex" justifyContent="right">
                                 <Tooltip title="Logout">
                                     <Button color="inherit" onClick={logout}><LogoutIcon /></Button>
@@ -77,6 +101,7 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
                 </AppBar>
             </Box>
             <BandwidthLimitedModal close={closeLimitedModal} isOpen={limitedModalOpen} />
+            <GettingStartedModal close={closeGettingStarted} isOpen={gettingStartedOpen} />
         </>
     );
 }