client/web: add readonly/manage toggle

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>

client/web/src/components/views/device-details-view.tsx

@@ -5,7 +5,13 @@ import { NodeData } from "src/hooks/node-data"
 import { useLocation } from "wouter"
 import ACLTag from "../acl-tag"
 
-export default function DeviceDetailsView({ node }: { node: NodeData }) {
+export default function DeviceDetailsView({
+  readonly,
+  node,
+}: {
+  readonly: boolean
+  node: NodeData
+}) {
   const [, setLocation] = useLocation()
 
   return (
@@ -24,12 +30,16 @@ export default function DeviceDetailsView({ node }: { node: NodeData }) {
               />
             </div>
             <button
-              className="px-3 py-2 bg-stone-50 rounded shadow border border-stone-200 text-neutral-800 text-sm font-medium"
+              className={cx(
+                "px-3 py-2 bg-stone-50 rounded shadow border border-stone-200 text-neutral-800 text-sm font-medium",
+                { "cursor-not-allowed": readonly }
+              )}
               onClick={() =>
                 apiFetch("/local/v0/logout", "POST")
                   .then(() => setLocation("/"))
                   .catch((err) => alert("Logout failed: " + err.message))
               }
+              disabled={readonly}
             >
               Disconnect…
             </button>

client/web/src/components/views/home-view.tsx

@@ -6,10 +6,12 @@ import { ReactComponent as ArrowRight } from "src/icons/arrow-right.svg"
 import { ReactComponent as ConnectedDeviceIcon } from "src/icons/connected-device.svg"
 import { Link } from "wouter"
 
-export default function ManagementClientView({
+export default function HomeView({
+  readonly,
   node,
   updateNode,
 }: {
+  readonly: boolean
   node: NodeData
   updateNode: (update: NodeUpdate) => Promise<void> | undefined
 }) {
@@ -34,6 +36,7 @@ export default function ManagementClientView({
           className="mb-5"
           node={node}
           updateNode={updateNode}
+          disabled={readonly}
         />
         <Link
           className="text-indigo-500 font-medium leading-snug"

client/web/src/components/views/readonly-client-view.tsx

@@ -1,75 +0,0 @@
-import React from "react"
-import { AuthResponse, AuthType } from "src/hooks/auth"
-import { NodeData } from "src/hooks/node-data"
-import { ReactComponent as ConnectedDeviceIcon } from "src/icons/connected-device.svg"
-import { ReactComponent as TailscaleLogo } from "src/icons/tailscale-logo.svg"
-import ProfilePic from "src/ui/profile-pic"
-
-/**
- * ReadonlyClientView is rendered when the web interface is either
- *
- * 1. being viewed by a user not allowed to manage the node
- *    (e.g. user does not own the node)
- *
- * 2. or the user is allowed to manage the node but does not
- *    yet have a valid browser session.
- */
-export default function ReadonlyClientView({
-  data,
-  auth,
-  newSession,
-}: {
-  data: NodeData
-  auth?: AuthResponse
-  newSession: () => Promise<void>
-}) {
-  return (
-    <>
-      <div className="pb-52 mx-auto">
-        <TailscaleLogo />
-      </div>
-      <div className="w-full p-4 bg-stone-50 rounded-3xl border border-gray-200 flex flex-col gap-4">
-        <div className="flex gap-2.5">
-          <ProfilePic url={data.Profile.ProfilePicURL} />
-          <div className="font-medium">
-            <div className="text-neutral-500 text-xs uppercase tracking-wide">
-              Managed by
-            </div>
-            <div className="text-neutral-800 text-sm leading-tight">
-              {/* TODO(sonia): support tagged node profile view more eloquently */}
-              {data.Profile.LoginName}
-            </div>
-          </div>
-        </div>
-        <div className="px-5 py-4 bg-white rounded-lg border border-gray-200 justify-between items-center flex">
-          <div className="flex gap-3">
-            <ConnectedDeviceIcon />
-            <div className="text-neutral-800">
-              <div className="text-lg font-medium leading-[25.20px]">
-                {data.DeviceName}
-              </div>
-              <div className="text-sm leading-tight">{data.IP}</div>
-            </div>
-          </div>
-          {auth?.authNeeded == AuthType.tailscale ? (
-            <button className="button button-blue ml-6" onClick={newSession}>
-              Access
-            </button>
-          ) : (
-            window.location.hostname != data.IP && (
-              // TODO: check connectivity to tailscale IP
-              <button
-                className="button button-blue ml-6"
-                onClick={() => {
-                  window.location.href = `http://${data.IP}:5252/?check=now`
-                }}
-              >
-                Manage
-              </button>
-            )
-          )}
-        </div>
-      </div>
-    </>
-  )
-}