mirror of
https://github.com/openziti/zrok.git
synced 2025-06-28 21:51:26 +02:00
plumbed in the getting started/help control in the navbar (#835)
This commit is contained in:
parent
1ad6e23b96
commit
8a0a6f5400
21
ui/src/GettingStartedModal.tsx
Normal file
21
ui/src/GettingStartedModal.tsx
Normal 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;
|
@ -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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user