Add help text for bulk update

Author: aaanh

src/components/super-actions.tsx

@@ -37,9 +37,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from "./ui/dialog";
-import { DialogClose, DialogTrigger } from "@radix-ui/react-dialog";
+import {
+  DialogClose,
+  DialogDescription,
+  DialogTrigger,
+} from "@radix-ui/react-dialog";
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
+import usageText from "@/lib/usage-text";
 
 export default function SuperActionsMenu() {
   const { information, tailflareState, setInformation } = useTailflare();
@@ -260,6 +265,9 @@ export default function SuperActionsMenu() {
             <DialogContent>
               <DialogHeader>
                 <DialogTitle>Changing all added subdomains</DialogTitle>
+                <DialogDescription>
+                  {usageText.bulkChangeSubdomains}
+                </DialogDescription>
               </DialogHeader>
               <div className="gap-2 grid">
                 <div className="items-center gap-1 grid grid-cols-[1fr_2fr]">

src/lib/usage-text.tsx

@@ -1,13 +1,51 @@
 const usageText = {
-  tailnetOrg: <span>You can get your Tailnet organization name on this page, under the <b>Organization</b> section. <a href="https://login.tailscale.com/admin/settings/general">Link</a>.</span>,
+  tailflareState: {
+    tailnetOrg: (
+      <span>
+        You can get your Tailnet organization name on this page, under the{" "}
+        <b>Organization</b> section.{" "}
+        <a href="https://login.tailscale.com/admin/settings/general">Link</a>.
+      </span>
+    ),
 
-  tailscaleApiKey: <span>API access token is needed to fetch your Tailnet devices and can be generated here. <a href="https://login.tailscale.com/admin/settings/keys">Link</a>.</span>,
+    tailscaleApiKey: (
+      <span>
+        API access token is needed to fetch your Tailnet devices and can be
+        generated here.{" "}
+        <a href="https://login.tailscale.com/admin/settings/keys">Link</a>.
+      </span>
+    ),
 
-  cloudflareEmail: <span>The email you use to log in to your Cloudflare dashboard and manage zones.</span>,
+    cloudflareEmail: (
+      <span>
+        The email you use to log in to your Cloudflare dashboard and manage
+        zones.
+      </span>
+    ),
 
-  cloudflareApiKey: <span>You can either use the Global API Key or generate an API token with the Zone.DNS permissions and All zones scope. <a href="https://dash.cloudflare.com/profile/api-tokens">Link</a>.</span>,
+    cloudflareApiKey: (
+      <span>
+        You can either use the Global API Key or generate an API token with the
+        Zone.DNS permissions and All zones scope.{" "}
+        <a href="https://dash.cloudflare.com/profile/api-tokens">Link</a>.
+      </span>
+    ),
 
-  subdomain: <span>The subdomain you want to organize your hosts. For example, <code>anguyen-1.engineering.aaanh.to</code> Generally, access control is handled by Tailscale ACLs, so subdomains on Cloudflare is only superficial.</span>
-}
+    subdomain: (
+      <span>
+        The subdomain you want to organize your hosts. For example,{" "}
+        <code>anguyen-1.engineering.aaanh.to</code> Generally, access control is
+        handled by Tailscale ACLs, so subdomains on Cloudflare is only
+        superficial.
+      </span>
+    ),
+  },
 
-export default usageText
+  bulkChangeSubdomains: (
+    <span>
+      {`Use '*' to update every matched record. Leave empty to match <hostname>.<domain>.<tld>.`}
+    </span>
+  ),
+};
+
+export default usageText;