client/web: restructure api mutations into hook

This commit makes some restructural changes to how we handle api
posting from the web client frontend.

Now that we're using SWR, we have less of a need for hooks like
useNodeData that return a useSWR response alongside some mutation
callbacks. SWR makes it easy to mutate throughout the UI without
needing access to the original data state in order to reflect
updates. So, we can fetch data without having to tie it to post
callbacks that have to be passed around through components.

In an effort to consolidate our posting endpoints, and make it
easier to add more api handlers cleanly in the future, this change
introduces a new `useAPI` hook that returns a single `api` callback
that can make any changes from any component in the UI. The hook
itself handles using SWR to mutate the relevant data keys, which
get globally reflected throughout the UI.

As a concurrent cleanup, node types are also moved to their own
types.ts file, to consolidate data types across the app.

Updates #10261

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

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

@@ -3,12 +3,12 @@
 
 import cx from "classnames"
 import React from "react"
-import { apiFetch, incrementMetric } from "src/api"
+import { useAPI } from "src/api"
 import ACLTag from "src/components/acl-tag"
 import * as Control from "src/components/control-components"
 import NiceIP from "src/components/nice-ip"
 import { UpdateAvailableNotification } from "src/components/update-available"
-import { NodeData } from "src/hooks/node-data"
+import { NodeData } from "src/types"
 import Button from "src/ui/button"
 import QuickCopy from "src/ui/quick-copy"
 import { useLocation } from "wouter"
@@ -20,6 +20,7 @@ export default function DeviceDetailsView({
   readonly: boolean
   node: NodeData
 }) {
+  const api = useAPI()
   const [, setLocation] = useLocation()
 
   return (
@@ -40,13 +41,9 @@ export default function DeviceDetailsView({
             {!readonly && (
               <Button
                 sizeVariant="small"
-                onClick={() => {
-                  // increment metrics before logout as we don't gracefully handle disconnect currently
-                  incrementMetric("web_client_node_disconnect")
-                  apiFetch("/local/v0/logout", "POST")
-                    .then(() => setLocation("/"))
-                    .catch((err) => alert("Logout failed: " + err.message))
-                }}
+                onClick={() =>
+                  api({ action: "logout" }).then(() => setLocation("/"))
+                }
               >
                 Disconnect…
               </Button>

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

@@ -8,18 +8,16 @@ import { ReactComponent as ArrowRight } from "src/assets/icons/arrow-right.svg"
 import { ReactComponent as Machine } from "src/assets/icons/machine.svg"
 import AddressCard from "src/components/address-copy-card"
 import ExitNodeSelector from "src/components/exit-node-selector"
-import { NodeData, NodeUpdaters } from "src/hooks/node-data"
+import { NodeData } from "src/types"
 import { pluralize } from "src/utils/util"
 import { Link, useLocation } from "wouter"
 
 export default function HomeView({
   readonly,
   node,
-  nodeUpdaters,
 }: {
   readonly: boolean
   node: NodeData
-  nodeUpdaters: NodeUpdaters
 }) {
   const [allSubnetRoutes, pendingSubnetRoutes] = useMemo(
     () => [
@@ -62,12 +60,7 @@ export default function HomeView({
         </div>
         {(node.Features["advertise-exit-node"] ||
           node.Features["use-exit-node"]) && (
-          <ExitNodeSelector
-            className="mb-5"
-            node={node}
-            nodeUpdaters={nodeUpdaters}
-            disabled={readonly}
-          />
+          <ExitNodeSelector className="mb-5" node={node} disabled={readonly} />
         )}
         <Link
           className="link font-medium"

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

@@ -1,10 +1,10 @@
 // Copyright (c) Tailscale Inc & AUTHORS
 // SPDX-License-Identifier: BSD-3-Clause
 
-import React, { useCallback, useState } from "react"
-import { apiFetch, incrementMetric } from "src/api"
+import React, { useState } from "react"
+import { useAPI } from "src/api"
 import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg"
-import { NodeData } from "src/hooks/node-data"
+import { NodeData } from "src/types"
 import Button from "src/ui/button"
 import Collapsible from "src/ui/collapsible"
 import Input from "src/ui/input"
@@ -13,26 +13,11 @@ import Input from "src/ui/input"
  * LoginView is rendered when the client is not authenticated
  * to a tailnet.
  */
-export default function LoginView({
-  data,
-  refreshData,
-}: {
-  data: NodeData
-  refreshData: () => void
-}) {
+export default function LoginView({ data }: { data: NodeData }) {
+  const api = useAPI()
   const [controlURL, setControlURL] = useState<string>("")
   const [authKey, setAuthKey] = useState<string>("")
 
-  const login = useCallback(
-    (opt: TailscaleUpOptions) => {
-      tailscaleUp(opt).then(() => {
-        incrementMetric("web_client_node_connect")
-        refreshData()
-      })
-    },
-    [refreshData]
-  )
-
   return (
     <div className="mb-8 py-6 px-8 bg-white rounded-md shadow-2xl">
       <TailscaleIcon className="my-2 mb-8" />
@@ -45,7 +30,7 @@ export default function LoginView({
             </p>
           </div>
           <Button
-            onClick={() => login({})}
+            onClick={() => api({ action: "up", data: {} })}
             className="w-full mb-4"
             intent="primary"
           >
@@ -70,7 +55,9 @@ export default function LoginView({
             </p>
           </div>
           <Button
-            onClick={() => login({ Reauthenticate: true })}
+            onClick={() =>
+              api({ action: "up", data: { Reauthenticate: true } })
+            }
             className="w-full mb-4"
             intent="primary"
           >
@@ -97,10 +84,13 @@ export default function LoginView({
           </div>
           <Button
             onClick={() =>
-              login({
-                Reauthenticate: true,
-                ControlURL: controlURL,
-                AuthKey: authKey,
+              api({
+                action: "up",
+                data: {
+                  Reauthenticate: true,
+                  ControlURL: controlURL,
+                  AuthKey: authKey,
+                },
               })
             }
             className="w-full mb-4"
@@ -141,19 +131,3 @@ export default function LoginView({
     </div>
   )
 }
-
-type TailscaleUpOptions = {
-  Reauthenticate?: boolean // force reauthentication
-  ControlURL?: string
-  AuthKey?: string
-}
-
-function tailscaleUp(options: TailscaleUpOptions) {
-  return apiFetch<{ url?: string }>("/up", "POST", options)
-    .then((d) => {
-      d.url && window.open(d.url, "_blank")
-    })
-    .catch((e) => {
-      console.error("Failed to login:", e)
-    })
-}

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

@@ -2,20 +2,21 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React from "react"
+import { useAPI } from "src/api"
 import * as Control from "src/components/control-components"
-import { NodeData, NodeUpdaters } from "src/hooks/node-data"
+import { NodeData } from "src/types"
 import Card from "src/ui/card"
 import Toggle from "src/ui/toggle"
 
 export default function SSHView({
   readonly,
   node,
-  nodeUpdaters,
 }: {
   readonly: boolean
   node: NodeData
-  nodeUpdaters: NodeUpdaters
 }) {
+  const api = useAPI()
+
   return (
     <>
       <h1 className="mb-1">Tailscale SSH server</h1>
@@ -36,9 +37,12 @@ export default function SSHView({
           <Toggle
             checked={node.RunningSSHServer}
             onChange={() =>
-              nodeUpdaters.patchPrefs({
-                RunSSHSet: true,
-                RunSSH: !node.RunningSSHServer,
+              api({
+                action: "update-prefs",
+                data: {
+                  RunSSHSet: true,
+                  RunSSH: !node.RunningSSHServer,
+                },
               })
             }
             disabled={readonly}

client/web/src/components/views/subnet-router-view.tsx

@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React, { useCallback, useMemo, useState } from "react"
+import { useAPI } from "src/api"
 import { ReactComponent as CheckCircle } from "src/assets/icons/check-circle.svg"
 import { ReactComponent as Clock } from "src/assets/icons/clock.svg"
 import { ReactComponent as Plus } from "src/assets/icons/plus.svg"
 import * as Control from "src/components/control-components"
-import { NodeData, NodeUpdaters } from "src/hooks/node-data"
+import { NodeData } from "src/types"
 import Button from "src/ui/button"
 import Card from "src/ui/card"
 import EmptyState from "src/ui/empty-state"
@@ -15,12 +16,11 @@ import Input from "src/ui/input"
 export default function SubnetRouterView({
   readonly,
   node,
-  nodeUpdaters,
 }: {
   readonly: boolean
   node: NodeData
-  nodeUpdaters: NodeUpdaters
 }) {
+  const api = useAPI()
   const [advertisedRoutes, hasRoutes, hasUnapprovedRoutes] = useMemo(() => {
     const routes = node.AdvertisedRoutes || []
     return [routes, routes.length > 0, routes.find((r) => !r.Approved)]
@@ -70,12 +70,15 @@ export default function SubnetRouterView({
               <Button
                 intent="primary"
                 onClick={() =>
-                  nodeUpdaters
-                    .postSubnetRoutes([
-                      ...advertisedRoutes.map((r) => r.Route),
-                      ...inputText.split(","),
-                    ])
-                    .then(resetInput)
+                  api({
+                    action: "update-routes",
+                    data: [
+                      ...advertisedRoutes,
+                      ...inputText
+                        .split(",")
+                        .map((r) => ({ Route: r, Approved: false })),
+                    ],
+                  }).then(resetInput)
                 }
                 disabled={!inputText}
               >
@@ -124,11 +127,12 @@ export default function SubnetRouterView({
                       <Button
                         sizeVariant="small"
                         onClick={() =>
-                          nodeUpdaters.postSubnetRoutes(
-                            advertisedRoutes
-                              .map((it) => it.Route)
-                              .filter((it) => it !== r.Route)
-                          )
+                          api({
+                            action: "update-routes",
+                            data: advertisedRoutes.filter(
+                              (it) => it.Route !== r.Route
+                            ),
+                          })
                         }
                       >
                         Stop advertising…

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

@@ -5,11 +5,8 @@ import React from "react"
 import { ReactComponent as CheckCircleIcon } from "src/assets/icons/check-circle.svg"
 import { ReactComponent as XCircleIcon } from "src/assets/icons/x-circle.svg"
 import { ChangelogText } from "src/components/update-available"
-import {
-  UpdateState,
-  useInstallUpdate,
-  VersionInfo,
-} from "src/hooks/self-update"
+import { UpdateState, useInstallUpdate } from "src/hooks/self-update"
+import { VersionInfo } from "src/types"
 import Button from "src/ui/button"
 import Spinner from "src/ui/spinner"
 import { useLocation } from "wouter"