@agent-native/core 0.77.2 → 0.77.4

package/corpus/templates/analytics/app/pages/adhoc/sql-dashboard/SqlChartCard.tsx

@@ -1,16 +1,16 @@
-import { useDraggable } from "@dnd-kit/core";
+import { useT } from "@agent-native/core/client";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import {
   IconGripVertical,
   IconDotsVertical,
   IconMaximize,
   IconPencil,
-  IconRefresh,
   IconTrash,
   IconCode,
   IconDownload,
 } from "@tabler/icons-react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 
 import { ChartFillHeight, SqlChart } from "@/components/dashboard/SqlChart";
 import {
@@ -65,19 +65,19 @@ export function SqlChartCard({
   onSaveSql,
   editable = true,
 }: SqlChartCardProps) {
-  const { t } = useTranslation();
-  const canDrag = editable && panel.chartType !== "section";
-  const { attributes, listeners, setNodeRef, setActivatorNodeRef, isDragging } =
-    useDraggable({ id: panel.id, disabled: !canDrag });
+  const t = useT();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: panel.id, disabled: !editable });
 
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [expanded, setExpanded] = useState(false);
   const [exportCsv, setExportCsv] = useState<(() => void) | null>(null);
-  const [refreshChart, setRefreshChart] = useState<
-    (() => Promise<void>) | null
-  >(null);
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [sqlPopoverOpen, setSqlPopoverOpen] = useState(false);
   const [shouldLoadData, setShouldLoadData] = useState(
     panel.chartType === "section",
   );
@@ -94,16 +94,6 @@ export function SqlChartCard({
   const handleExportCsvChange = useCallback((handler: (() => void) | null) => {
     setExportCsv(handler ? () => handler : null);
   }, []);
-  const handleRefreshChange = useCallback(
-    (handler: (() => Promise<void>) | null) => {
-      setRefreshChart(() => handler);
-    },
-    [],
-  );
-  const handleRefresh = useCallback(() => {
-    setShouldLoadData(true);
-    void refreshChart?.();
-  }, [refreshChart]);
 
   useEffect(() => {
     if (panel.chartType === "section") {
@@ -136,13 +126,13 @@ export function SqlChartCard({
 
   useEffect(() => {
     setExportCsv(null);
-    setRefreshChart(null);
-    setIsRefreshing(false);
-    setSqlPopoverOpen(false);
   }, [panel.id]);
 
   const style = {
-    opacity: isDragging ? 0.45 : 1,
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 50 : undefined,
+    opacity: isDragging ? 0.7 : 1,
   };
 
   // Section panels render as a flush header row (no card chrome, full width)
@@ -165,19 +155,21 @@ export function SqlChartCard({
                     <DropdownMenuTrigger asChild>
                       <button
                         className="p-1 rounded text-muted-foreground hover:text-foreground"
-                        aria-label="Section options"
+                        aria-label={t("sqlDashboard.sectionOptions")}
                       >
                         <IconDotsVertical className="h-3.5 w-3.5" />
                       </button>
                     </DropdownMenuTrigger>
                   </TooltipTrigger>
-                  <TooltipContent>Section options</TooltipContent>
+                  <TooltipContent>
+                    {t("sqlDashboard.sectionOptions")}
+                  </TooltipContent>
                 </Tooltip>
                 <DropdownMenuContent align="end" className="w-40">
                   {onEdit && (
                     <DropdownMenuItem onSelect={() => onEdit()}>
                       <IconPencil className="h-4 w-4 mr-2" />
-                      Edit
+                      {t("sidebar.edit")}
                     </DropdownMenuItem>
                   )}
                   {onEdit && <DropdownMenuSeparator />}
@@ -188,26 +180,25 @@ export function SqlChartCard({
                     }}
                   >
                     <IconTrash className="h-4 w-4 mr-2" />
-                    Delete
+                    {t("sidebar.delete")}
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
-              {canDrag ? (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      ref={setActivatorNodeRef}
-                      className="p-1 rounded cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-muted-foreground"
-                      aria-label="Drag to reorder"
-                      {...attributes}
-                      {...listeners}
-                    >
-                      <IconGripVertical className="h-3.5 w-3.5" />
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent>Drag to reorder</TooltipContent>
-                </Tooltip>
-              ) : null}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    className="p-1 rounded cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-muted-foreground"
+                    aria-label={t("sqlDashboard.dragToReorder")}
+                    {...attributes}
+                    {...listeners}
+                  >
+                    <IconGripVertical className="h-3.5 w-3.5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {t("sqlDashboard.dragToReorder")}
+                </TooltipContent>
+              </Tooltip>
             </div>
           ) : null}
         </div>
@@ -220,20 +211,24 @@ export function SqlChartCard({
           <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
             <AlertDialogContent>
               <AlertDialogHeader>
-                <AlertDialogTitle>Delete section?</AlertDialogTitle>
+                <AlertDialogTitle>
+                  {t("sqlDashboard.deleteSectionTitle")}
+                </AlertDialogTitle>
                 <AlertDialogDescription>
-                  Delete &quot;{panel.title}&quot;? This cannot be undone.
+                  {t("sqlDashboard.deleteSectionDescription", {
+                    title: panel.title,
+                  })}
                 </AlertDialogDescription>
               </AlertDialogHeader>
               <AlertDialogFooter>
-                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogCancel>{t("sidebar.cancel")}</AlertDialogCancel>
                 <AlertDialogAction
                   onClick={() => {
                     setConfirmOpen(false);
                     onRemove();
                   }}
                 >
-                  Delete
+                  {t("sidebar.delete")}
                 </AlertDialogAction>
               </AlertDialogFooter>
             </AlertDialogContent>
@@ -258,50 +253,28 @@ export function SqlChartCard({
           <CardTitle className="text-sm font-medium flex-1 truncate">
             {panel.title}
           </CardTitle>
-          <div
-            className={`flex items-center gap-1 ${
-              sqlPopoverOpen
-                ? "opacity-100"
-                : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"
-            }`}
-          >
+          <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100">
             {showPanelMenu ? (
-              <DropdownMenu modal={false}>
+              <DropdownMenu>
                 <Tooltip>
-                  <ViewSqlPopover
-                    panel={panel}
-                    resolvedSql={resolvedSql}
-                    onSaveSql={onSaveSql}
-                    editable={editable}
-                    open={sqlPopoverOpen}
-                    onOpenChange={setSqlPopoverOpen}
-                    triggerMode="anchor"
-                  >
-                    <TooltipTrigger asChild>
-                      <DropdownMenuTrigger asChild>
-                        <button
-                          className="p-1 rounded text-muted-foreground hover:text-foreground"
-                          aria-label="Panel options"
-                        >
-                          <IconDotsVertical className="h-3.5 w-3.5" />
-                        </button>
-                      </DropdownMenuTrigger>
-                    </TooltipTrigger>
-                  </ViewSqlPopover>
-                  <TooltipContent>Panel options</TooltipContent>
+                  <TooltipTrigger asChild>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        className="p-1 rounded text-muted-foreground hover:text-foreground"
+                        aria-label={t("sqlDashboard.panelOptions")}
+                      >
+                        <IconDotsVertical className="h-3.5 w-3.5" />
+                      </button>
+                    </DropdownMenuTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {t("sqlDashboard.panelOptions")}
+                  </TooltipContent>
                 </Tooltip>
                 <DropdownMenuContent align="end" className="w-44">
                   <DropdownMenuItem onSelect={() => setExpanded(true)}>
                     <IconMaximize className="h-4 w-4 mr-2" />
-                    Full screen
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onSelect={handleRefresh}>
-                    <IconRefresh
-                      className={`h-4 w-4 mr-2 ${
-                        isRefreshing ? "animate-spin" : ""
-                      }`}
-                    />
-                    {isRefreshing ? "Refreshing..." : "Refresh"}
+                    {t("sqlDashboard.fullScreen")}
                   </DropdownMenuItem>
                   {editable || panel.chartType === "table" ? (
                     <DropdownMenuSeparator />
@@ -312,23 +285,29 @@ export function SqlChartCard({
                       onSelect={() => exportCsv?.()}
                     >
                       <IconDownload className="h-4 w-4 mr-2" />
-                      Download CSV
+                      {t("sqlDashboard.downloadCsv")}
                     </DropdownMenuItem>
                   )}
                   {editable && panel.chartType === "table" ? (
                     <DropdownMenuSeparator />
                   ) : null}
-                  {editable || onSaveSql ? (
-                    <DropdownMenuItem onSelect={() => setSqlPopoverOpen(true)}>
-                      <IconCode className="h-4 w-4 mr-2" />
-                      {editable && onSaveSql ? "Edit SQL" : "View SQL"}
-                    </DropdownMenuItem>
+                  {editable && onSaveSql ? (
+                    <ViewSqlPopover
+                      panel={panel}
+                      resolvedSql={resolvedSql}
+                      onSaveSql={onSaveSql}
+                    >
+                      <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                        <IconCode className="h-4 w-4 mr-2" />
+                        {t("sqlDashboard.viewSql")}
+                      </DropdownMenuItem>
+                    </ViewSqlPopover>
                   ) : null}
                   {editable ? <DropdownMenuSeparator /> : null}
                   {editable && onEdit && (
                     <DropdownMenuItem onSelect={() => onEdit()}>
                       <IconPencil className="h-4 w-4 mr-2" />
-                      {t("dashboard.panelSettings")}
+                      {t("sidebar.edit")}
                     </DropdownMenuItem>
                   )}
                   {editable ? (
@@ -339,26 +318,27 @@ export function SqlChartCard({
                       }}
                     >
                       <IconTrash className="h-4 w-4 mr-2" />
-                      Delete
+                      {t("sidebar.delete")}
                     </DropdownMenuItem>
                   ) : null}
                 </DropdownMenuContent>
               </DropdownMenu>
             ) : null}
-            {canDrag ? (
+            {editable ? (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <button
-                    ref={setActivatorNodeRef}
                     className="p-1 rounded cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-muted-foreground"
-                    aria-label="Drag to reorder"
+                    aria-label={t("sqlDashboard.dragToReorder")}
                     {...attributes}
                     {...listeners}
                   >
                     <IconGripVertical className="h-3.5 w-3.5" />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent>Drag to reorder</TooltipContent>
+                <TooltipContent>
+                  {t("sqlDashboard.dragToReorder")}
+                </TooltipContent>
               </Tooltip>
             ) : null}
           </div>
@@ -369,8 +349,6 @@ export function SqlChartCard({
             resolvedSql={resolvedSql}
             loadData={shouldLoadData}
             onExportCsvChange={handleExportCsvChange}
-            onRefreshChange={handleRefreshChange}
-            onRefreshingChange={setIsRefreshing}
           />
         </CardContent>
       </Card>
@@ -392,20 +370,24 @@ export function SqlChartCard({
         <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
           <AlertDialogContent>
             <AlertDialogHeader>
-              <AlertDialogTitle>Delete panel?</AlertDialogTitle>
+              <AlertDialogTitle>
+                {t("sqlDashboard.deletePanelTitle")}
+              </AlertDialogTitle>
               <AlertDialogDescription>
-                Delete "{panel.title}"? This cannot be undone.
+                {t("sqlDashboard.deletePanelDescription", {
+                  title: panel.title,
+                })}
               </AlertDialogDescription>
             </AlertDialogHeader>
             <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogCancel>{t("sidebar.cancel")}</AlertDialogCancel>
               <AlertDialogAction
                 onClick={() => {
                   setConfirmOpen(false);
                   onRemove();
                 }}
               >
-                Delete
+                {t("sidebar.delete")}
               </AlertDialogAction>
             </AlertDialogFooter>
           </AlertDialogContent>

package/corpus/templates/analytics/app/pages/adhoc/sql-dashboard/ViewSqlPopover.tsx

@@ -1,4 +1,4 @@
-import { useReconciledState } from "@agent-native/core/client";
+import { useReconciledState, useT } from "@agent-native/core/client";
 import {
   IconAlertTriangle,
   IconAlignLeft,
@@ -7,13 +7,7 @@ import {
   IconLoader2,
   IconRotate,
 } from "@tabler/icons-react";
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import { toast } from "sonner";
 
 import { SqlEditor } from "@/components/SqlEditor";
@@ -22,7 +16,6 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Popover,
-  PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
@@ -31,7 +24,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { canFormatPanelSql, safeFormatPanelSql } from "@/lib/format-sql";
+import { canFormatPanelSql, formatPanelSql } from "@/lib/format-sql";
 
 import type { DataSourceType, SqlPanel } from "./types";
 
@@ -51,9 +44,6 @@ interface ViewSqlPopoverProps {
    *  popover can keep open and surface the error inline. */
   onSaveSql?: (sql: string) => Promise<void>;
   editable?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  triggerMode?: "trigger" | "anchor";
   children: ReactNode;
 }
 
@@ -62,24 +52,14 @@ export function ViewSqlPopover({
   resolvedSql,
   onSaveSql,
   editable = true,
-  open: controlledOpen,
-  onOpenChange,
-  triggerMode = "trigger",
   children,
 }: ViewSqlPopoverProps) {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const t = useT();
+  const [open, setOpen] = useState(false);
   const [saving, setSaving] = useState(false);
   const [copied, setCopied] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [showResolved, setShowResolved] = useState(false);
-  const open = controlledOpen ?? uncontrolledOpen;
-  const setOpen = useCallback(
-    (nextOpen: boolean) => {
-      if (controlledOpen === undefined) setUncontrolledOpen(nextOpen);
-      onOpenChange?.(nextOpen);
-    },
-    [controlledOpen, onOpenChange],
-  );
 
   // Track whether the user has diverged from the server SQL ("dirty"). While
   // dirty we hold the draft so we don't clobber in-progress edits; otherwise we
@@ -117,7 +97,9 @@ export function ViewSqlPopover({
       await onSaveSql(draft);
       setOpen(false);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to save");
+      setError(
+        err instanceof Error ? err.message : t("sqlDashboard.failedToSave"),
+      );
     } finally {
       setSaving(false);
     }
@@ -130,7 +112,7 @@ export function ViewSqlPopover({
       setCopied(true);
       setTimeout(() => setCopied(false), 1200);
     } catch {
-      toast.error("Couldn't copy SQL");
+      toast.error(t("sqlDashboard.couldNotCopySql"));
     }
   };
 
@@ -141,23 +123,25 @@ export function ViewSqlPopover({
 
   const handleFormat = () => {
     if (!canFormat) return;
-    const result = safeFormatPanelSql(draft, panel.source);
-    setDraft(result.sql);
-    if (result.error) {
-      setError(result.error);
-    } else {
+    try {
+      setDraft(formatPanelSql(draft, panel.source));
       setError(null);
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : t("sqlDashboard.failedToFormatSql"),
+      );
     }
   };
-  const Trigger = triggerMode === "anchor" ? PopoverAnchor : PopoverTrigger;
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <Trigger asChild>{children}</Trigger>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
       <PopoverContent
         align="end"
         sideOffset={8}
-        aria-label="View SQL"
+        aria-label={t("sqlDashboard.viewSql")}
         className="w-[calc(100vw-2rem)] sm:w-[640px] max-h-[var(--radix-popover-content-available-height)] overflow-y-auto p-4"
         onKeyDown={(e) => {
           if (canEditSql && (e.metaKey || e.ctrlKey) && e.key === "Enter") {
@@ -188,7 +172,9 @@ export function ViewSqlPopover({
                     Reset
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>Discard changes</TooltipContent>
+                <TooltipContent>
+                  {t("sqlDashboard.discardChanges")}
+                </TooltipContent>
               </Tooltip>
             )}
             {canFormat && (
@@ -205,7 +191,7 @@ export function ViewSqlPopover({
                     Format
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>Format SQL</TooltipContent>
+                <TooltipContent>{t("sqlDashboard.formatSql")}</TooltipContent>
               </Tooltip>
             )}
             <Tooltip>
@@ -221,11 +207,13 @@ export function ViewSqlPopover({
                   ) : (
                     <IconCopy className="h-3.5 w-3.5 mr-1" />
                   )}
-                  {copied ? "Copied" : "Copy"}
+                  {copied ? t("sqlDashboard.copied") : t("sqlDashboard.copy")}
                 </Button>
               </TooltipTrigger>
               <TooltipContent>
-                {showResolved && resolvedSql ? "Copy resolved SQL" : "Copy SQL"}
+                {showResolved && resolvedSql
+                  ? t("sqlDashboard.copyResolvedSql")
+                  : t("sqlDashboard.copySql")}
               </TooltipContent>
             </Tooltip>
           </div>
@@ -244,12 +232,10 @@ export function ViewSqlPopover({
         />
         {canEditSql ? (
           <p className="text-[11px] text-muted-foreground mt-1.5">
-            Use <code className="font-mono">{"{{varName}}"}</code> to
-            interpolate filter values. Press{" "}
-            <kbd className="px-1 rounded border bg-muted font-mono text-[10px]">
-              {isMac ? "⌘" : "Ctrl"}+Enter
-            </kbd>{" "}
-            to save.
+            {t("sqlDashboard.filterInterpolationHelp", {
+              example: "{{varName}}",
+              shortcut: `${isMac ? "⌘" : "Ctrl"}+Enter`,
+            })}
           </p>
         ) : null}
 
@@ -260,7 +246,9 @@ export function ViewSqlPopover({
               className="text-[11px] text-muted-foreground hover:text-foreground underline-offset-2 hover:underline cursor-pointer"
               onClick={() => setShowResolved((v) => !v)}
             >
-              {showResolved ? "Hide" : "Show"} resolved SQL (with filter values)
+              {showResolved
+                ? t("sqlDashboard.hideResolvedSql")
+                : t("sqlDashboard.showResolvedSql")}
             </button>
             {showResolved && (
               <SqlHighlight
@@ -290,17 +278,17 @@ export function ViewSqlPopover({
             onClick={() => setOpen(false)}
             disabled={saving}
           >
-            Close
+            {t("sqlDashboard.close")}
           </Button>
           {canEditSql ? (
             <Button size="sm" onClick={handleSave} disabled={!dirty || saving}>
               {saving ? (
                 <>
                   <IconLoader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
-                  Saving...
+                  {t("sqlDashboard.saving")}
                 </>
               ) : (
-                "Save"
+                t("sqlDashboard.save")
               )}
             </Button>
           ) : null}