client/web: hide admin panel links for non-tailscale control servers

Updates #10261

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

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

@@ -4,10 +4,11 @@
 import cx from "classnames"
 import React from "react"
 import { apiFetch } from "src/api"
+import ACLTag from "src/components/acl-tag"
+import * as Control from "src/components/control-components"
 import { UpdateAvailableNotification } from "src/components/update-available"
 import { NodeData } from "src/hooks/node-data"
 import { useLocation } from "wouter"
-import ACLTag from "../acl-tag"
 
 export default function DeviceDetailsView({
   readonly,
@@ -63,7 +64,7 @@ export default function DeviceDetailsView({
                 <td className="flex gap-1 flex-wrap">
                   {node.IsTagged
                     ? node.Tags.map((t) => <ACLTag key={t} tag={t} />)
-                    : node.Profile.DisplayName}
+                    : node.Profile?.DisplayName}
                 </td>
               </tr>
               <tr>
@@ -119,19 +120,16 @@ export default function DeviceDetailsView({
             </tbody>
           </table>
         </div>
-        <p className="text-neutral-500 text-sm leading-tight text-center">
+        <Control.AdminContainer
+          className="text-neutral-500 text-sm leading-tight text-center"
+          node={node}
+        >
           Want even more details? Visit{" "}
-          <a
-            // TODO: pipe control serve url from backend
-            href="https://login.tailscale.com/admin"
-            target="_blank"
-            rel="noreferrer"
-            className="text-indigo-700 text-sm"
-          >
+          <Control.AdminLink node={node} path={`/machines/${node.IP}`}>
             this device’s page
-          </a>{" "}
+          </Control.AdminLink>{" "}
           in the admin console.
-        </p>
+        </Control.AdminContainer>
       </div>
     </>
   )

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

@@ -2,16 +2,17 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React from "react"
-import { NodeUpdaters } from "src/hooks/node-data"
+import * as Control from "src/components/control-components"
+import { NodeData, NodeUpdaters } from "src/hooks/node-data"
 import Toggle from "src/ui/toggle"
 
 export default function SSHView({
   readonly,
-  runningSSH,
+  node,
   nodeUpdaters,
 }: {
   readonly: boolean
-  runningSSH: boolean
+  node: NodeData
   nodeUpdaters: NodeUpdaters
 }) {
   return (
@@ -31,9 +32,12 @@ export default function SSHView({
       </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}
+          checked={node.RunningSSHServer}
           onChange={() =>
-            nodeUpdaters.patchPrefs({ RunSSHSet: true, RunSSH: !runningSSH })
+            nodeUpdaters.patchPrefs({
+              RunSSHSet: true,
+              RunSSH: !node.RunningSSHServer,
+            })
           }
           disabled={readonly}
         />
@@ -41,18 +45,16 @@ export default function SSHView({
           Run Tailscale SSH server
         </div>
       </div>
-      <p className="text-neutral-500 text-sm leading-tight">
+      <Control.AdminContainer
+        className="text-neutral-500 text-sm leading-tight"
+        node={node}
+      >
         Remember to make sure that the{" "}
-        <a
-          href="https://login.tailscale.com/admin/acls/"
-          className="text-indigo-700"
-          target="_blank"
-          rel="noreferrer"
-        >
+        <Control.AdminLink node={node} path="/acls">
           tailnet policy file
-        </a>{" "}
+        </Control.AdminLink>{" "}
         allows other devices to SSH into this device.
-      </p>
+      </Control.AdminContainer>
     </>
   )
 }

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

@@ -5,6 +5,7 @@ import React, { useMemo, useState } from "react"
 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 Button from "src/ui/button"
 import Input from "src/ui/input"
@@ -122,18 +123,16 @@ export default function SubnetRouterView({
                 </div>
               ))}
             </div>
-            <div className="mt-3 w-full text-center text-neutral-500 text-sm leading-tight">
+            <Control.AdminContainer
+              className="mt-3 w-full text-center text-neutral-500 text-sm leading-tight"
+              node={node}
+            >
               To approve routes, in the admin console go to{" "}
-              <a
-                href={`https://login.tailscale.com/admin/machines/${node.IP}`}
-                className="text-indigo-700"
-                target="_blank"
-                rel="noreferrer"
-              >
+              <Control.AdminLink node={node} path={`/machines/${node.IP}`}>
                 the machine’s route settings
-              </a>
+              </Control.AdminLink>
               .
-            </div>
+            </Control.AdminContainer>
           </>
         ) : (
           <div className="px-5 py-4 bg-stone-50 rounded-lg border border-gray-200 text-center text-neutral-500">