client/web: refresh on tab focus

Refresh node data when user switches to the web client browser tab.
This helps clean up the auth flow where they're sent to another tab
to authenticate then return to the original tab, where the data
should be refreshed to pick up the login updates.

Updates tailscale/corp#13775

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

client/web/src/hooks/node-data.ts

@@ -38,7 +38,7 @@ export default function useNodeData() {
   const fetchNodeData = useCallback(() => {
     apiFetch("/api/data")
       .then((r) => r.json())
-      .then((data) => setData(data))
+      .then((d) => setData(d))
       .catch((error) => console.error(error))
   }, [setData])
 
@@ -114,8 +114,21 @@ export default function useNodeData() {
   )
 
   useEffect(
-    fetchNodeData,
+    () => {
       // Initial data load.
+      fetchNodeData()
+
+      // Refresh on browser tab focus.
+      const onVisibilityChange = () => {
+        document.visibilityState === "visible" && fetchNodeData()
+      }
+      window.addEventListener("visibilitychange", onVisibilityChange)
+      return () => {
+        // Cleanup browser tab listener.
+        window.removeEventListener("visibilitychange", onVisibilityChange)
+      }
+    },
+    // Run once.
     []
   )