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/control-components.tsx

@@ -0,0 +1,57 @@
+// Copyright (c) Tailscale Inc & AUTHORS
+// SPDX-License-Identifier: BSD-3-Clause
+
+import React from "react"
+import { NodeData } from "src/hooks/node-data"
+
+/**
+ * AdminContainer renders its contents only if the node's control
+ * server has an admin panel.
+ *
+ * TODO(sonia,will): Similarly, this could also hide the contents
+ * if the viewing user is a non-admin.
+ */
+export function AdminContainer({
+  node,
+  children,
+  className,
+}: {
+  node: NodeData
+  children: React.ReactNode
+  className?: string
+}) {
+  if (!node.ControlAdminURL.includes("tailscale.com")) {
+    // Admin panel only exists on Tailscale control servers.
+    return null
+  }
+  return <div className={className}>{children}</div>
+}
+
+/**
+ * AdminLink renders its contents wrapped in a link to the node's control
+ * server admin panel.
+ *
+ * AdminLink is meant for use only inside of a AdminContainer component,
+ * to avoid rendering a link when the node's control server does not have
+ * an admin panel.
+ */
+export function AdminLink({
+  node,
+  children,
+  path,
+}: {
+  node: NodeData
+  children: React.ReactNode
+  path: string // admin path, e.g. "/settings/webhooks"
+}) {
+  return (
+    <a
+      href={`${node.ControlAdminURL}${path}`}
+      className="link"
+      target="_blank"
+      rel="noreferrer"
+    >
+      {children}
+    </a>
+  )
+}