updated getting started wizard (#882)

ui/src/GettingStartedModal.tsx

@@ -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) {
+        inspectState();
-            close();
+    }, []);
-        }
+
+    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">

ui/src/NavBar.tsx

@@ -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">
+            <Tooltip title="Getting Started Wizard">
-                <Button color="inherit" href="https://docs.zrok.io" target="_"><HelpIcon /></Button>
+                <Button style={{ color: "#9bf316" }} onClick={openGettingStarted}><HelpIcon /></Button>
             </Tooltip>
         </Grid2>
     );