client/web: add initial framework for exit node selector

Updates tailscale/corp#14335

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

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

@@ -1,12 +1,18 @@
 import cx from "classnames"
 import React from "react"
-import { NodeData } from "src/hooks/node-data"
+import ExitNodeSelector from "src/components/exit-node-selector"
+import { NodeData, NodeUpdate } from "src/hooks/node-data"
 import { ReactComponent as ArrowRight } from "src/icons/arrow-right.svg"
-import { ReactComponent as ChevronDown } from "src/icons/chevron-down.svg"
 import { ReactComponent as ConnectedDeviceIcon } from "src/icons/connected-device.svg"
 import { Link } from "wouter"
 
-export default function ManagementClientView(props: NodeData) {
+export default function ManagementClientView({
+  node,
+  updateNode,
+}: {
+  node: NodeData
+  updateNode: (update: NodeUpdate) => Promise<void> | undefined
+}) {
   return (
     <div className="mb-12 w-full">
       <h2 className="mb-3">This device</h2>
@@ -15,16 +21,20 @@ export default function ManagementClientView(props: NodeData) {
           <div className="flex items-center">
             <ConnectedDeviceIcon />
             <div className="ml-3">
-              <h1>{props.DeviceName}</h1>
+              <h1>{node.DeviceName}</h1>
               {/* TODO(sonia): display actual status */}
               <p className="text-neutral-500 text-sm">Connected</p>
             </div>
           </div>
           <p className="text-neutral-800 text-lg leading-[25.20px]">
-            {props.IP}
+            {node.IP}
           </p>
         </div>
-        <ExitNodeSelector className="mb-5" />
+        <ExitNodeSelector
+          className="mb-5"
+          node={node}
+          updateNode={updateNode}
+        />
         <Link
           className="text-indigo-500 font-medium leading-snug"
           to="/details"
@@ -54,22 +64,6 @@ export default function ManagementClientView(props: NodeData) {
   )
 }
 
-function ExitNodeSelector({ className }: { className?: string }) {
-  return (
-    <div className={cx("p-1.5 rounded-md border border-gray-200", className)}>
-      <div className="hover-button">
-        <p className="text-neutral-500 text-xs font-medium uppercase tracking-wide mb-1">
-          Exit node
-        </p>
-        <div className="flex items-center">
-          <p className="text-neutral-800">None</p>
-          <ChevronDown className="ml-[9px]" />
-        </div>
-      </div>
-    </div>
-  )
-}
-
 function SettingsCard({
   title,
   link,