Enhance email template handling and improve UI components

- Added dynamic string handling for email template configuration overrides.
- Updated line-chart component to use urlString for routing.
- Refactored data vault store configuration to directly set displayName.
- Improved error handling in email template deletion process.
- Enhanced launch checklist with new asynchronous alert functionality.
- Updated Vercel page to ensure proper key assignment with error handling.
- Modified dropdown menu state initialization for better default handling.
- Improved data table component to prevent multiple calls on table readiness.

Author: Developing-Gamer

apps/backend/src/app/api/latest/internal/email-templates/[templateId]/route.tsx

@@ -64,6 +64,7 @@ export const PATCH = createSmartRouteHandler({
       throw new KnownErrors.EmailRenderingError("NotificationCategory is required, import it from @stackframe/emails");
     }
 
+    // Path-notation keys are dynamic strings and cannot be represented precisely by the override type.
     const configOverride: Record<string, any> = {
       [`emails.templates.${templateId}.tsxSource`]: body.tsx_source,
     };
@@ -120,6 +121,7 @@ export const DELETE = createSmartRouteHandler({
       projectId: tenancy.project.id,
       branchId: tenancy.branchId,
       environmentConfigOverrideOverride: {
+        // null means delete this key, but the override map type does not model null-valued deletes.
         [`emails.templates.${templateId}`]: null as any,
       },
     });

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx

@@ -7,6 +7,7 @@ import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "
 import { DesignCardTint, DesignCategoryTabs, DesignPillToggle } from "@/components/design-components";
 import { UserAvatar } from '@stackframe/stack';
 import { fromNow, isWeekend } from '@stackframe/stack-shared/dist/utils/dates';
+import { urlString } from "@stackframe/stack-shared/dist/utils/urls";
 import { useState } from "react";
 import { Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, TooltipProps, XAxis, YAxis } from "recharts";
 
@@ -363,7 +364,7 @@ export function TabbedMetricsCard({
                 {listData.map((user) => (
                   <button
                     key={user.id}
-                    onClick={() => router.push(`/projects/${projectId}/users/${user.id}`)}
+                    onClick={() => router.push(urlString`/projects/${projectId}/users/${user.id}`)}
                     className={cn(
                       "w-full flex items-center gap-3 p-2.5 rounded-xl transition-all duration-150 hover:transition-none text-left group",
                       hoverAccentClass

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/data-vault/stores/[storeId]/page-client.tsx

@@ -62,10 +62,7 @@ export default function PageClient({ storeId }: PageClientProps) {
       await updateConfig({
         adminApp: stackAdminApp,
         configUpdate: {
-          [`dataVault.stores.${storeId}`]: {
-            ...store,
-            displayName: localDisplayName.trim() || store.displayName,
-          },
+          [`dataVault.stores.${storeId}.displayName`]: localDisplayName.trim() || store.displayName,
         },
         pushable: true,
       });

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/page-client.tsx

@@ -28,10 +28,12 @@ export default function PageClient() {
       await stackAdminApp.deleteEmailTemplate(templateId);
       toast({ title: "Template deleted successfully", variant: "success" });
       setDeleteDialogOpen(null);
+      return;
     } catch (error) {
       console.error("Failed to delete email template:", error);
       const errorMessage = error instanceof Error ? error.message : "An unexpected error occurred while deleting the template";
       setDeleteError(errorMessage);
+      return "prevent-close" as const;
     }
   };
 

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/launch-checklist/page-client.tsx

@@ -16,7 +16,7 @@ import {
   cn
 } from "@/components/ui";
 import { CaretDownIcon, CaretUpIcon, CheckCircleIcon, CircleIcon, ClockIcon } from "@phosphor-icons/react";
-import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import * as confetti from "canvas-confetti";
 import { useEffect, useRef, useState } from "react";
 import { AppEnabledGuard } from "../app-enabled-guard";
@@ -690,7 +690,7 @@ export default function PageClient() {
           checked={project.isProductionMode}
           disabled={!project.isProductionMode && productionModeErrors.length > 0}
           onCheckedChange={(checked) => {
-            runAsynchronously(project.update({ isProductionMode: checked }));
+            runAsynchronouslyWithAlert(project.update({ isProductionMode: checked }));
           }}
         />
       ),

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/vercel/page-client.tsx

@@ -5,6 +5,7 @@ import { InlineCode } from "@/components/inline-code";
 import { StyledLink } from "@/components/link";
 import { CaretDownIcon, CaretUpIcon, CheckCircleIcon, CircleIcon, ClockIcon } from "@phosphor-icons/react";
 import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import {
   DesignAlert,
   DesignBadge,
@@ -83,8 +84,8 @@ export default function PageClient() {
 
         setKeys({
           projectId: adminApp.projectId,
-          publishableClientKey: newKey.publishableClientKey!,
-          secretServerKey: newKey.secretServerKey!,
+          publishableClientKey: newKey.publishableClientKey ?? throwErr("Expected publishableClientKey after creating an API key with hasPublishableClientKey: true"),
+          secretServerKey: newKey.secretServerKey ?? throwErr("Expected secretServerKey after creating an API key with hasSecretServerKey: true"),
         });
       } finally {
         setIsGenerating(false);
@@ -265,15 +266,15 @@ export default function PageClient() {
     if (prevAllCompleted !== undefined && !prevAllCompleted && allCompleted) {
       // Create a confetti effect dropping from the top
       const duration = 3000;
-      const animationEnd = Date.now() + duration;
+      const animationEnd = performance.now() + duration;
       const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 9999 };
 
       function randomInRange(min: number, max: number) {
         return Math.random() * (max - min) + min;
       }
 
       const interval = setInterval(() => {
-        const timeLeft = animationEnd - Date.now();
+        const timeLeft = animationEnd - performance.now();
 
         if (timeLeft <= 0) {
           clearInterval(interval);

apps/dashboard/src/components/ui/data-table/data-table.tsx

@@ -292,6 +292,7 @@ function DataTableBase<TData, TValue>({
 }: DataTableBaseProps<TData, TValue>) {
   const [rowSelection, setRowSelection] = React.useState({});
   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(defaultVisibility || {});
+  const calledOnTableReadyRef = React.useRef(false);
 
   const table: TableType<TData> = useReactTable({
     data,
@@ -325,7 +326,10 @@ function DataTableBase<TData, TValue>({
   });
 
   React.useEffect(() => {
-    onTableReady?.(table);
+    if (!calledOnTableReadyRef.current && onTableReady) {
+      onTableReady(table);
+      calledOnTableReadyRef.current = true;
+    }
   }, [table, onTableReady]);
 
   return <TableView

apps/dashboard/src/components/ui/dropdown-menu.tsx

@@ -19,7 +19,7 @@ const DropdownMenu = forwardRefIfNeeded<
   React.ElementRef<typeof DropdownMenuPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>
 >(({ ...props }, ref) => {
-  const [open, setOpen] = React.useState(!!props.open);
+  const [open, setOpen] = React.useState(() => props.open ?? props.defaultOpen ?? false);
 
   return (
     <DropdownMenuContext.Provider value={{
@@ -124,11 +124,11 @@ const DropdownMenuItem = forwardRefIfNeeded<
   const handleItemAction = (event: { preventDefault: () => void, stopPropagation: () => void }) => {
     event.preventDefault();
     event.stopPropagation();
-    const result = props.onClick?.(event as React.MouseEvent<HTMLDivElement, MouseEvent>);
-    if (result && typeof (result as Promise<void>).then === "function") {
+    const result = props.onClick?.(event as unknown as React.MouseEvent<HTMLDivElement, MouseEvent>);
+    if (result instanceof Promise) {
       setIsLoading(true);
       runAsynchronouslyWithAlert(
-        Promise.resolve(result).finally(() => {
+        result.finally(() => {
           setIsLoading(false);
           setOpen(false);
         })
@@ -150,7 +150,6 @@ const DropdownMenuItem = forwardRefIfNeeded<
     {...props}
     disabled={isLoading || props.disabled}
     onSelect={props.onClick ? handleItemAction : undefined}
-    onClick={props.onClick ? handleItemAction : undefined}
   >
     <div style={{ visibility: isLoading ? "visible" : "hidden", position: "absolute", inset: 0, display: "flex", justifyContent: "center", alignItems: "center" }}>
       <Spinner />