client/web: add Tailscale SSH view

Updates tailscale/corp#14335

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

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

@@ -15,7 +15,7 @@ export default function DeviceDetailsView({
   const [, setLocation] = useLocation()
 
   return (
-    <div>
+    <>
       <h1 className="mb-10">Device details</h1>
       <div className="flex flex-col gap-4">
         <div className="card">
@@ -123,6 +123,6 @@ export default function DeviceDetailsView({
           in the admin console.
         </p>
       </div>
-    </div>
+    </>
   )
 }

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

@@ -57,6 +57,14 @@ export default function HomeView({
         className="mb-3"
         title="Tailscale SSH server"
         body="Run a Tailscale SSH server on this device and allow other devices in your tailnet to SSH into it."
+        badge={
+          node.RunningSSHServer
+            ? {
+                text: "Running",
+                icon: <div className="w-2 h-2 bg-emerald-500 rounded-full" />,
+              }
+            : undefined
+        }
       />
       <SettingsCard
         link="/serve"
@@ -71,11 +79,16 @@ function SettingsCard({
   title,
   link,
   body,
+  badge,
   className,
 }: {
   title: string
   link: string
   body: string
+  badge?: {
+    text: string
+    icon?: JSX.Element
+  }
   className?: string
 }) {
   return (
@@ -87,9 +100,19 @@ function SettingsCard({
       )}
     >
       <div>
-        <p className="text-neutral-800 font-medium leading-tight mb-2">
-          {title}
-        </p>
+        <div className="flex gap-2">
+          <p className="text-neutral-800 font-medium leading-tight mb-2">
+            {title}
+          </p>
+          {badge && (
+            <div className="h-5 px-2 bg-stone-100 rounded-full flex items-center gap-2">
+              {badge.icon}
+              <div className="text-neutral-500 text-xs font-medium">
+                {badge.text}
+              </div>
+            </div>
+          )}
+        </div>
         <p className="text-neutral-500 text-sm leading-tight">{body}</p>
       </div>
       <div>

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

@@ -0,0 +1,51 @@
+import React from "react"
+import { PrefsUpdate } from "src/hooks/node-data"
+import Toggle from "src/ui/toggle"
+
+export default function SSHView({
+  readonly,
+  runningSSH,
+  updatePrefs,
+}: {
+  readonly: boolean
+  runningSSH: boolean
+  updatePrefs: (p: PrefsUpdate) => Promise<void>
+}) {
+  return (
+    <>
+      <h1 className="mb-1">Tailscale SSH server</h1>
+      <p className="description mb-10">
+        Run a Tailscale SSH server on this device and allow other devices in
+        your tailnet to SSH into it.{" "}
+        <a
+          href="https://tailscale.com/kb/1193/tailscale-ssh/"
+          className="text-indigo-700"
+          target="_blank"
+        >
+          Learn more &rarr;
+        </a>
+      </p>
+      <div className="-mx-5 px-4 py-3 bg-white rounded-lg border border-gray-200 flex gap-2.5 mb-3">
+        <Toggle
+          checked={runningSSH}
+          onChange={() => updatePrefs({ RunSSHSet: true, RunSSH: !runningSSH })}
+          disabled={readonly}
+        />
+        <div className="text-black text-sm font-medium leading-tight">
+          Run Tailscale SSH server
+        </div>
+      </div>
+      <p className="text-neutral-500 text-sm leading-tight">
+        Remember to make sure that the{" "}
+        <a
+          href="https://login.tailscale.com/admin/acls/"
+          className="text-indigo-700"
+          target="_blank"
+        >
+          tailnet policy file
+        </a>{" "}
+        allows other devices to SSH into this device.
+      </p>
+    </>
+  )
+}