diff --git a/ui/src/GettingStartedModal.tsx b/ui/src/GettingStartedModal.tsx index d23211b4..44338e58 100644 --- a/ui/src/GettingStartedModal.tsx +++ b/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(false); + const [shareCreated, setShareCreated] = useState(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 ( - Getting Started Quickly + Getting Started Wizard -

Step 1: Download a zrok Binary

+

Step 1: Get a zrok Binary { environmentCreated ? : null }

- The official zrok binaries are published on GitHub: + The documentation has a guide for downloading the right zrok binary for your system: - https://github.com/openziti/zrok/releases + https://docs.zrok.io/docs/getting-started#installing-the-zrok-command -

Step 2: Enable Your Operating System Shell

+

Step 2: Enable Your Operating System Shell { environmentCreated ? : null }

@@ -59,13 +81,13 @@ const GettingStartedModal = ({ close, isOpen }: GettingStartedModalProps) => { -

Step 3: Share

+

Step 3: Share { shareCreated ? : null }

Use the zrok share command to share network connectivity and files (see the - --help in the CLI for details: zrok share --help: + --help in the CLI for details: zrok share --help): diff --git a/ui/src/NavBar.tsx b/ui/src/NavBar.tsx index 3f58ee13..a514792c 100644 --- a/ui/src/NavBar.tsx +++ b/ui/src/NavBar.tsx @@ -50,7 +50,7 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => { const gettingStartedButton = ( - + @@ -58,8 +58,8 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => { const helpButton = ( - - + + );