From 5429ee25667b6b0b17c6a882d15e3c0dae0ee476 Mon Sep 17 00:00:00 2001 From: Sonia Appasamy Date: Tue, 26 Sep 2023 15:57:40 -0400 Subject: [PATCH] client/web: add debug mode for web client ui updates UI updates staged behind debug mode flags. Initial new views added in app.tsx, rendered based on the current debug setting. Updates tailscale/corp#14335 Signed-off-by: Sonia Appasamy --- client/web/src/components/app.tsx | 129 +++++++++++++++++++--- client/web/src/components/legacy.tsx | 10 +- client/web/src/hooks/node-data.ts | 2 + client/web/src/icons/connected-device.svg | 15 +++ client/web/src/icons/tailscale-icon.svg | 18 +++ client/web/src/icons/tailscale-logo.svg | 20 ++++ client/web/tsconfig.json | 1 + client/web/web.go | 27 ++++- 8 files changed, 194 insertions(+), 28 deletions(-) create mode 100644 client/web/src/icons/connected-device.svg create mode 100644 client/web/src/icons/tailscale-icon.svg create mode 100644 client/web/src/icons/tailscale-logo.svg diff --git a/client/web/src/components/app.tsx b/client/web/src/components/app.tsx index 28350e52e..eb403a5e7 100644 --- a/client/web/src/components/app.tsx +++ b/client/web/src/components/app.tsx @@ -1,30 +1,123 @@ import React from "react" import { Footer, Header, IP, State } from "src/components/legacy" -import useNodeData from "src/hooks/node-data" +import useNodeData, { NodeData } from "src/hooks/node-data" +import { ReactComponent as ConnectedDeviceIcon } from "src/icons/connected-device.svg" +import { ReactComponent as TailscaleIcon } from "src/icons/tailscale-icon.svg" +import { ReactComponent as TailscaleLogo } from "src/icons/tailscale-logo.svg" export default function App() { // TODO(sonia): use isPosting value from useNodeData // to fill loading states. const { data, refreshData, updateNode } = useNodeData() - return ( -
- {!data ? ( - // TODO(sonia): add a loading view -
Loading...
+ if (!data) { + // TODO(sonia): add a loading view + return
Loading...
+ } + + const needsLogin = data?.Status === "NeedsLogin" || data?.Status === "NoState" + + return !needsLogin && + (data.DebugMode === "login" || data.DebugMode === "full") ? ( +
+ {data.DebugMode === "login" ? ( + ) : ( - <> -
-
- - -
-
- + + )} +
+
+ ) : ( + // Legacy client UI +
+
+
+ + +
+
+
+ ) +} + +function LoginView(props: NodeData) { + return ( + <> +
+ +
+
+
+ +
+
+ Owned by +
+
+ {/* TODO(sonia): support tagged node profile view more eloquently */} + {props.Profile.LoginName} +
+
+
+
+
+ +
+
+ {props.DeviceName} +
+
{props.IP}
+
+
+ +
+
+ + ) +} + +function ManageView(props: NodeData) { + return ( +
+
+ +
+

{props.Profile.LoginName}

+ {/* TODO(sonia): support tagged node profile view more eloquently */} + +
+
+

This device

+
+
+
+ +

{props.DeviceName}

+
+

{props.IP}

+
+
+

+ Tailscale is up and running. You can connect to this device from devices + in your tailnet by using its name or IP address. +

+
+ ) +} + +function ProfilePic({ url }: { url: string }) { + return ( +
+ {url ? ( +
+ ) : ( +
)}
) diff --git a/client/web/src/components/legacy.tsx b/client/web/src/components/legacy.tsx index 5d7e269f1..a6f8ca7de 100644 --- a/client/web/src/components/legacy.tsx +++ b/client/web/src/components/legacy.tsx @@ -282,14 +282,14 @@ export function State({ } } -export function Footer(props: { data: NodeData }) { - const { data } = props - +export function Footer(props: { licensesURL: string; className?: string }) { return ( -