extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-05-31 07:07:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

updated getting started wizard (#882)

Browse Source
This commit is contained in:
Michael Quigley 2025-02-26 14:11:11 -05:00
parent b167e03648
commit 27afd9bfae
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 36 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
ui/src/GettingStartedModal.tsx
View File

@ -2,7 +2,8 @@ import {modalStyle} from "./styling/theme.ts";
import {Box, Grid2, Modal, Typography} from "@mui/material";
import ClipboardText from "./ClipboardText.tsx";
import useApiConsoleStore from "./model/store.ts";
import {useEffect} from "react";
import {CSSProperties, useEffect, useState} from "react";
import CheckMarkIcon from "@mui/icons-material/Check";
interface GettingStartedModalProps {
close: () => void;
@ -12,37 +13,58 @@ interface GettingStartedModalProps {
const GettingStartedModal = ({ close, isOpen }: GettingStartedModalProps) => {
const user = useApiConsoleStore(store => store.user);
const nodes = useApiConsoleStore(store => store.nodes);
const [environmentCreated, setEnvironmentCreated] = useState<boolean>(false);
const [shareCreated, setShareCreated] = useState<boolean>(false);
const checkedStyle: CSSProperties = { color: "green" };
const uncheckedStyle: CSSProperties = null as CSSProperties;
const inspectState = () => {
let environments = 0;
let shares = 0;
nodes.forEach(node => {
if(node.type === "environment") {
environments++;
}
if(node.type === "share") {
shares++;
}
});
setEnvironmentCreated(environments > 0);
setShareCreated(shares > 0);
}
useEffect(() => {
if(nodes && nodes.length > 1) {
close();
}
inspectState();
}, []);
useEffect(() => {
inspectState();
}, [nodes]);
return (
<Modal open={isOpen} onClose={close}>
<Box sx={{ ...modalStyle }}>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography variant="h5"><strong>Getting Started Quickly</strong></Typography>
<Typography variant="h5"><strong>Getting Started Wizard</strong></Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
<h4>Step 1: Download a zrok Binary</h4>
<h4 style={ environmentCreated ? checkedStyle : uncheckedStyle }>Step 1: Get a zrok Binary { environmentCreated ? <CheckMarkIcon/> : null }</h4>
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
The official zrok binaries are published on GitHub:
The documentation has a guide for downloading the right zrok binary for your system:
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
<a href="https://github.com/openziti/zrok/releases" target="_">https://github.com/openziti/zrok/releases</a>
<a href="https://docs.zrok.io/docs/getting-started#installing-the-zrok-command" target="_">https://docs.zrok.io/docs/getting-started#installing-the-zrok-command</a>
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
<h4>Step 2: Enable Your Operating System Shell</h4>
<h4 style={ environmentCreated ? checkedStyle : uncheckedStyle }>Step 2: Enable Your Operating System Shell { environmentCreated ? <CheckMarkIcon/> : null }</h4>
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
@ -59,13 +81,13 @@ const GettingStartedModal = ({ close, isOpen }: GettingStartedModalProps) => {
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
<h4>Step 3: Share</h4>
<h4 style={ shareCreated ? checkedStyle : uncheckedStyle }>Step 3: Share { shareCreated ? <CheckMarkIcon/> : null }</h4>
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
Use the <code>zrok share</code> command to share network connectivity and files (see the
<code>--help</code> in the CLI for details: <code>zrok share --help</code>:
<code> --help</code> in the CLI for details: <code>zrok share --help</code>):
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">

6
ui/src/NavBar.tsx
View File

@ -50,7 +50,7 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
const gettingStartedButton = (
<Grid2 display="flex" justifyContent="right">
<Tooltip title="Getting Started Help">
<Tooltip title="Getting Started Wizard">
<Button style={{ backgroundColor: "#9bf316", color: "black" }} onClick={openGettingStarted}>CLICK HERE TO GET STARTED!</Button>
</Tooltip>
</Grid2>
@ -58,8 +58,8 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
const helpButton = (
<Grid2 display="flex" justifyContent="right">
<Tooltip title="Help">
<Button color="inherit" href="https://docs.zrok.io" target="_"><HelpIcon /></Button>
<Tooltip title="Getting Started Wizard">
<Button style={{ color: "#9bf316" }} onClick={openGettingStarted}><HelpIcon /></Button>
</Tooltip>
</Grid2>
);