client/web: add eslint

Add eslint to require stricter typescript rules, particularly around
required hook dependencies. This commit also updates any files that
were now throwing errors with eslint.

Updates #10261

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

client/web/src/components/app.tsx

@@ -1,7 +1,6 @@
 // Copyright (c) Tailscale Inc & AUTHORS
 // SPDX-License-Identifier: BSD-3-Clause
 
-import cx from "classnames"
 import React, { useEffect } from "react"
 import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg"
 import LoginToggle from "src/components/login-toggle"
@@ -121,22 +120,3 @@ function Header({
     </>
   )
 }
-
-function Footer({
-  licensesURL,
-  className,
-}: {
-  licensesURL: string
-  className?: string
-}) {
-  return (
-    <footer className={cx("container max-w-lg mx-auto text-center", className)}>
-      <a
-        className="text-xs text-gray-500 hover:text-gray-600"
-        href={licensesURL}
-      >
-        Open Source Licenses
-      </a>
-    </footer>
-  )
-}

client/web/src/components/exit-node-selector.tsx

@@ -78,7 +78,7 @@ export default function ExitNodeSelector({
         }
       }
     },
-    [setOpen, selected, setSelected]
+    [selected, updateNode, updatePrefs]
   )
 
   const [
@@ -261,7 +261,7 @@ function ExitNodeSelectorInner({
                       key={`${n.ID}-${n.Name}`}
                       node={n}
                       onSelect={() => onSelect(n)}
-                      isSelected={selected.ID == n.ID}
+                      isSelected={selected.ID === n.ID}
                     />
                   ))}
                 </div>
@@ -309,7 +309,7 @@ function ExitNodeSelectorItem({
 
 function CountryFlag({ code }: { code: string }) {
   return (
-    countryFlags[code.toLowerCase()] || (
+    <>{countryFlags[code.toLowerCase()]}</> || (
       <span className="font-medium text-gray-500 text-xs">
         {code.toUpperCase()}
       </span>

client/web/src/components/login-toggle.tsx

@@ -110,12 +110,7 @@ function LoginPopoverContent({
         setCanConnectOverTS(true)
       })
       .catch(() => setIsRunningCheck(false))
-  }, [
-    auth.viewerIdentity,
-    isRunningCheck,
-    setCanConnectOverTS,
-    setIsRunningCheck,
-  ])
+  }, [auth.viewerIdentity, isRunningCheck, node.IP])
 
   /**
    * Checking connection for first time on page load.
@@ -125,6 +120,7 @@ function LoginPopoverContent({
    * leaving to turn on Tailscale then returning to the view.
    * See `onMouseEnter` on the div below.
    */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => checkTSConnection(), [])
 
   const handleSignInClick = useCallback(() => {
@@ -145,7 +141,7 @@ function LoginPopoverContent({
         {auth.viewerIdentity && ` as ${auth.viewerIdentity.loginName}`}
       </div>
       {!auth.canManageNode &&
-        (!auth.viewerIdentity || auth.authNeeded == AuthType.tailscale ? (
+        (!auth.viewerIdentity || auth.authNeeded === AuthType.tailscale ? (
           <>
             <p className="text-neutral-500 text-xs">
               {auth.viewerIdentity ? (

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

@@ -125,6 +125,7 @@ export default function DeviceDetailsView({
             // TODO: pipe control serve url from backend
             href="https://login.tailscale.com/admin"
             target="_blank"
+            rel="noreferrer"
             className="text-indigo-700 text-sm"
           >
             this device’s page

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

@@ -32,7 +32,7 @@ export default function LoginView({
   return (
     <div className="mb-8 py-6 px-8 bg-white rounded-md shadow-2xl">
       <TailscaleIcon className="my-2 mb-8" />
-      {data.Status == "Stopped" ? (
+      {data.Status === "Stopped" ? (
         <>
           <div className="mb-6">
             <h3 className="text-3xl font-semibold mb-3">Connect</h3>
@@ -57,6 +57,7 @@ export default function LoginView({
                 href="https://tailscale.com/kb/1028/key-expiry"
                 className="link"
                 target="_blank"
+                rel="noreferrer"
               >
                 learn more
               </a>
@@ -77,7 +78,12 @@ export default function LoginView({
             <p className="text-gray-700">
               Get started by logging in to your Tailscale network.
               Or,&nbsp;learn&nbsp;more at{" "}
-              <a href="https://tailscale.com/" className="link" target="_blank">
+              <a
+                href="https://tailscale.com/"
+                className="link"
+                target="_blank"
+                rel="noreferrer"
+              >
                 tailscale.com
               </a>
               .
@@ -103,6 +109,7 @@ export default function LoginView({
                 href="https://tailscale.com/kb/1085/auth-keys/"
                 className="link"
                 target="_blank"
+                rel="noreferrer"
               >
                 Learn more &rarr;
               </a>

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

@@ -24,6 +24,7 @@ export default function SSHView({
           href="https://tailscale.com/kb/1193/tailscale-ssh/"
           className="text-indigo-700"
           target="_blank"
+          rel="noreferrer"
         >
           Learn more →
         </a>
@@ -44,6 +45,7 @@ export default function SSHView({
           href="https://login.tailscale.com/admin/acls/"
           className="text-indigo-700"
           target="_blank"
+          rel="noreferrer"
         >
           tailnet policy file
         </a>{" "}