add doc link button and fix continuous polling

messages/en-US.json

@@ -1903,5 +1903,6 @@
     "preferWildcardCertDescription": "Attempt to generate a wildcard certificate (require a properly configured certificate resolver).",
     "recordName": "Record Name",
     "auto": "Auto",
-    "TTL": "TTL"
+    "TTL": "TTL",
+    "howToAddRecords": "How to Add Records"
 }

src/app/[orgId]/settings/domains/[domainId]/page.tsx

@@ -1,8 +1,5 @@
-import { redirect } from "next/navigation";
 
-export default async function DomainPage(props: {
+
-    params: Promise<{ orgId: string; domainId: string }>;
+export default function DomainPage({ children }: { children: React.ReactNode }) {
-}) {
+  return <>{children}</>;
-    const params = await props.params;
-    redirect(`/${params.orgId}/settings/domains/${params.domainId}`);
 }

src/components/DNSRecordTable.tsx

@@ -15,7 +15,7 @@ export type DNSRecordRow = {
     recordType: string; // "NS" | "CNAME" | "A" | "TXT"
     baseDomain: string | null;
     value: string;
-    verified?: boolean; 
+    verified?: boolean;
 };
 
 type Props = {
@@ -32,17 +32,16 @@ export default function DNSRecordsTable({ records, domainId, isRefreshing }: Pro
             accessorKey: "baseDomain",
             header: ({ column }) => {
                 return (
-                    <Button
+                    <div
-                        variant="ghost"
                     >
                         {t("recordName", { fallback: "Record name" })}
-                    </Button>
+                    </div>
                 );
             },
             cell: ({ row }) => {
                 const baseDomain = row.original.baseDomain;
                 return (
-                    <div className="font-mono text-sm">
+                    <div>
                         {baseDomain || "-"}
                     </div>
                 );
@@ -52,11 +51,10 @@ export default function DNSRecordsTable({ records, domainId, isRefreshing }: Pro
             accessorKey: "recordType",
             header: ({ column }) => {
                 return (
-                    <Button
+                    <div
-                        variant="ghost"
                     >
                         {t("type")}
-                    </Button>
+                    </div>
                 );
             },
             cell: ({ row }) => {
@@ -72,11 +70,10 @@ export default function DNSRecordsTable({ records, domainId, isRefreshing }: Pro
             accessorKey: "ttl",
             header: ({ column }) => {
                 return (
-                    <Button
+                    <div
-                        variant="ghost"
                     >
                         {t("TTL")}
-                    </Button>
+                    </div>
                 );
             },
             cell: ({ row }) => {
@@ -95,10 +92,8 @@ export default function DNSRecordsTable({ records, domainId, isRefreshing }: Pro
             cell: ({ row }) => {
                 const value = row.original.value;
                 return (
-                    <div className="flex items-center gap-2">
+                    <div>
-                        <div className="font-mono text-sm truncate max-w-md">
+                        {value}
-                            {value}
-                        </div>
                     </div>
                 );
             }
@@ -107,11 +102,10 @@ export default function DNSRecordsTable({ records, domainId, isRefreshing }: Pro
             accessorKey: "verified",
             header: ({ column }) => {
                 return (
-                    <Button
+                    <div
-                        variant="ghost"
                     >
                         {t("status")}
-                    </Button>
+                    </div>
                 );
             },
             cell: ({ row }) => {

src/components/DNSRecordsDataTable.tsx

@@ -19,7 +19,7 @@ import {
 } from "@/components/ui/table";
 import { Button } from "@app/components/ui/button";
 import { useMemo, useState } from "react";
-import { Plus, RefreshCw } from "lucide-react";
+import { ExternalLink, Plus, RefreshCw } from "lucide-react";
 import {
     Card,
     CardContent,
@@ -107,56 +107,25 @@ export function DNSRecordsDataTable<TData, TValue>({
         <div className="container mx-auto max-w-12xl">
             <Card>
                 <CardHeader className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0 pb-4">
-                    <div className="flex flex-row space-y-3 w-full sm:mr-2 gap-2">
+                    <div className="flex flex-row space-y-3 w-full sm:mr-2 gap-2 justify-between">
                         <div className="relative w-full sm:max-w-sm flex flex-row gap-10 items-center">
-                            <h1 className="">DNS Records</h1>
+                            <h1 className="font-bold">DNS Records</h1>
                             <Badge variant="secondary">Required</Badge>
                         </div>
-                        {tabs && tabs.length > 0 && (
+                        <Button
-                            <Tabs
+                            variant="outline"
-                                value={activeTab}
+                            size="sm"
-                                className="w-full"
+                        >
-                            >
+                            <ExternalLink className="h-4 w-4 mr-1"/>
-                                <TabsList>
+                            {t("howToAddRecords")}
-                                    {tabs.map((tab) => (
+                        </Button>
-                                        <TabsTrigger
-                                            key={tab.id}
-                                            value={tab.id}
-                                        >
-                                            {tab.label} (
-                                            {data.filter(tab.filterFn).length})
-                                        </TabsTrigger>
-                                    ))}
-                                </TabsList>
-                            </Tabs>
-                        )}
-                    </div>
-                    <div className="flex items-center gap-2 sm:justify-end">
-                        {onRefresh && (
-                            <Button
-                                variant="outline"
-                                onClick={onRefresh}
-                                disabled={isRefreshing}
-                            >
-                                <RefreshCw
-                                    className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
-                                />
-                                {t("refresh")}
-                            </Button>
-                        )}
-                        {onAdd && addButtonText && (
-                            <Button onClick={onAdd}>
-                                <Plus className="mr-2 h-4 w-4" />
-                                {addButtonText}
-                            </Button>
-                        )}
                     </div>
                 </CardHeader>
                 <CardContent>
                     <Table>
                         <TableHeader>
                             {table.getHeaderGroups().map((headerGroup) => (
-                                <TableRow key={headerGroup.id}>
+                                <TableRow key={headerGroup.id} className="bg-[#E8E8E8] dark:bg-transparent">
                                     {headerGroup.headers.map((header) => (
                                         <TableHead key={header.id}>
                                             {header.isPlaceholder

src/components/DomainInfoCard.tsx

@@ -155,7 +155,7 @@ export default function DomainInfoCard({ orgId, domainId }: DomainInfoCardProps)
         <>
             <Alert>
                 <AlertDescription>
-                    <InfoSections cols={env.flags.enableClients ? 3 : 2}>
+                    <InfoSections cols={2}>
                         <InfoSection>
                             <InfoSectionTitle>
                                 {t("type")}