extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-28 13:41:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Michael Quigley 2025-02-05 21:24:27 -05:00
parent 1ad6e23b96
commit 8a0a6f5400
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 50 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ui/src/GettingStartedModal.tsx Normal file
View File

@ -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;

33
ui/src/NavBar.tsx
View File

@ -3,10 +3,12 @@ import LogoutIcon from "@mui/icons-material/Logout";
import VisualizerIcon from "@mui/icons-material/Hub"; import VisualizerIcon from "@mui/icons-material/Hub";
import TabularIcon from "@mui/icons-material/TableRows"; import TabularIcon from "@mui/icons-material/TableRows";
import LimitIcon from "@mui/icons-material/CrisisAlert"; 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 zrokLogo from "./assets/zrok-1.0.0-rocket-green.svg";
import useApiConsoleStore from "./model/store.ts"; import useApiConsoleStore from "./model/store.ts";
import BandwidthLimitedModal from "./BandwidthLimitedModal.tsx"; import BandwidthLimitedModal from "./BandwidthLimitedModal.tsx";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import GettingStartedModal from "./GettingStartedModal.tsx";
interface NavBarProps { interface NavBarProps {
logout: () => void; logout: () => void;
@ -15,6 +17,7 @@ interface NavBarProps {
} }
const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => { const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
const nodes = useApiConsoleStore((state) => state.nodes);
const limited = useApiConsoleStore((state) => state.limited); const limited = useApiConsoleStore((state) => state.limited);
const [limitedModalOpen, setLimitedModalOpen] = useState<boolean>(false); const [limitedModalOpen, setLimitedModalOpen] = useState<boolean>(false);
const openLimitedModal = () => { const openLimitedModal = () => {
@ -23,6 +26,13 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
const closeLimitedModal = () => { const closeLimitedModal = () => {
setLimitedModalOpen(false); setLimitedModalOpen(false);
} }
const [gettingStartedOpen, setGettingStartedOpen] = useState<boolean>(false);
const openGettingStarted = () => {
setGettingStartedOpen(true);
}
const closeGettingStarted = () => {
setGettingStartedOpen(false);
}
useEffect(() => { useEffect(() => {
if(!limited) { if(!limited) {
@ -38,6 +48,22 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
</Grid2> </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 = () => { const handleClick = () => {
toggleMode(!visualizer); toggleMode(!visualizer);
} }
@ -59,14 +85,12 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
</Typography> </Typography>
<Grid2 container sx={{ flexGrow: 1 }}> <Grid2 container sx={{ flexGrow: 1 }}>
<Grid2 display="flex" justifyContent="right" size="grow"> <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-`)"> <Tooltip title="Toggle Interface Mode (Ctrl-`)">
<Button color="inherit" onClick={handleClick}>{ visualizer ? <VisualizerIcon /> : <TabularIcon /> }</Button> <Button color="inherit" onClick={handleClick}>{ visualizer ? <VisualizerIcon /> : <TabularIcon /> }</Button>
</Tooltip> </Tooltip>
</Grid2> </Grid2>
{ !nodes || nodes.length > 1 ? helpButton : gettingStartedButton }
{ limited ? limitedIndicator : null }
<Grid2 display="flex" justifyContent="right"> <Grid2 display="flex" justifyContent="right">
<Tooltip title="Logout"> <Tooltip title="Logout">
<Button color="inherit" onClick={logout}><LogoutIcon /></Button> <Button color="inherit" onClick={logout}><LogoutIcon /></Button>
@ -77,6 +101,7 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
</AppBar> </AppBar>
</Box> </Box>
<BandwidthLimitedModal close={closeLimitedModal} isOpen={limitedModalOpen} /> <BandwidthLimitedModal close={closeLimitedModal} isOpen={limitedModalOpen} />
<GettingStartedModal close={closeGettingStarted} isOpen={gettingStartedOpen} />
</> </>
); );
} }