Added better notifications for users when templates are updated.

Added confirmation dialogs for destructive actions.
Other improvements/changes
When deleting rule templates, we now clean up all resource rules that were created from the template.

server/routers/ruleTemplate/deleteRuleTemplate.ts

@@ -31,7 +31,26 @@ export async function deleteRuleTemplate(req: any, res: any) {
             });
         }
 
-        // Delete template rules first (due to foreign key constraint)
+        // Get all template rules for this template
+        const templateRulesToDelete = await db
+            .select({ ruleId: templateRules.ruleId })
+            .from(templateRules)
+            .where(eq(templateRules.templateId, templateId));
+
+        // Delete resource rules that reference these template rules first
+        if (templateRulesToDelete.length > 0) {
+            const { resourceRules } = await import("@server/db");
+            const templateRuleIds = templateRulesToDelete.map(rule => rule.ruleId);
+            
+            // Delete all resource rules that reference any of the template rules
+            for (const ruleId of templateRuleIds) {
+                await db
+                    .delete(resourceRules)
+                    .where(eq(resourceRules.templateRuleId, ruleId));
+            }
+        }
+
+        // Delete template rules
         await db
             .delete(templateRules)
             .where(eq(templateRules.templateId, templateId));

server/routers/ruleTemplate/deleteTemplateRule.ts

@@ -67,15 +67,20 @@ export async function deleteTemplateRule(
             );
         }
 
-        // Delete the rule
+        // Count affected resources for the response message
-        await db
+        let affectedResourcesCount = 0;
-            .delete(templateRules)
-            .where(and(eq(templateRules.templateId, templateId), eq(templateRules.ruleId, parseInt(ruleId))));
-
-        // Also delete all resource rules that were created from this template rule
         try {
             const { resourceRules } = await import("@server/db");
             
+            // Get affected resource rules before deletion for counting
+            const affectedResourceRules = await db
+                .select()
+                .from(resourceRules)
+                .where(eq(resourceRules.templateRuleId, parseInt(ruleId)));
+            
+            affectedResourcesCount = affectedResourceRules.length;
+
+            // Delete the resource rules first (due to foreign key constraint)
             await db
                 .delete(resourceRules)
                 .where(eq(resourceRules.templateRuleId, parseInt(ruleId)));
@@ -84,11 +89,20 @@ export async function deleteTemplateRule(
             // Don't fail the template rule deletion if resource rule deletion fails, just log it
         }
 
+        // Delete the template rule after resource rules are deleted
+        await db
+            .delete(templateRules)
+            .where(and(eq(templateRules.templateId, templateId), eq(templateRules.ruleId, parseInt(ruleId))));
+
+        const message = affectedResourcesCount > 0 
+            ? `Template rule deleted successfully. Removed from ${affectedResourcesCount} assigned resource${affectedResourcesCount > 1 ? 's' : ''}.`
+            : "Template rule deleted successfully.";
+
         return response(res, {
             data: null,
             success: true,
             error: false,
-            message: "Template rule deleted successfully",
+            message,
             status: HttpCode.OK
         });
     } catch (error) {

server/routers/ruleTemplate/getRuleTemplate.ts

@@ -9,6 +9,14 @@ import createHttpError from "http-errors";
 import logger from "@server/logger";
 import { fromError } from "zod-validation-error";
 
+export type GetRuleTemplateResponse = {
+    templateId: string;
+    orgId: string;
+    name: string;
+    description: string | null;
+    createdAt: number;
+};
+
 const getRuleTemplateParamsSchema = z
     .object({
         orgId: z.string().min(1),

server/routers/ruleTemplate/updateTemplateRule.ts

@@ -144,8 +144,8 @@ export async function updateTemplateRule(
                 
                 // Remove undefined values
                 Object.keys(propagationData).forEach(key => {
-                    if (propagationData[key] === undefined) {
+                    if ((propagationData as any)[key] === undefined) {
-                        delete propagationData[key];
+                        delete (propagationData as any)[key];
                     }
                 });
 
@@ -161,11 +161,28 @@ export async function updateTemplateRule(
             // Don't fail the template rule update if propagation fails, just log it
         }
 
+        // Count affected resources for the response message
+        let affectedResourcesCount = 0;
+        try {
+            const { resourceTemplates } = await import("@server/db");
+            const affectedResources = await db
+                .select()
+                .from(resourceTemplates)
+                .where(eq(resourceTemplates.templateId, templateId));
+            affectedResourcesCount = affectedResources.length;
+        } catch (error) {
+            logger.error("Error counting affected resources:", error);
+        }
+
+        const message = affectedResourcesCount > 0 
+            ? `Template rule updated successfully. Changes propagated to ${affectedResourcesCount} assigned resource${affectedResourcesCount > 1 ? 's' : ''}.`
+            : "Template rule updated successfully.";
+
         return response(res, {
             data: updatedRule,
             success: true,
             error: false,
-            message: "Template rule updated successfully",
+            message,
             status: HttpCode.OK
         });
     } catch (error) {

src/app/[orgId]/settings/rule-templates/[templateId]/general/page.tsx

@@ -12,9 +12,9 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
 import {
     SettingsContainer,
     SettingsSection,
-    SettingsSectionHeader,
+    SettingsSectionHeader
-    SettingsSectionTitle
 } from "@app/components/Settings";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { Button } from "@app/components/ui/button";
 import { Input } from "@app/components/ui/input";
 import { Textarea } from "@app/components/ui/textarea";
@@ -79,8 +79,9 @@ export default function GeneralPage() {
                 data
             );
             toast({
-                title: t("ruleTemplateUpdated"),
+                title: "Template Updated",
-                description: t("ruleTemplateUpdatedDescription")
+                description: "Template details have been updated successfully. Changes to template rules will automatically propagate to all assigned resources.",
+                variant: "default"
             });
         } catch (error) {
             toast({

src/app/[orgId]/settings/rule-templates/[templateId]/rules/page.tsx

@@ -4,9 +4,9 @@ import { useParams } from "next/navigation";
 import {
     SettingsContainer,
     SettingsSection,
-    SettingsSectionHeader,
+    SettingsSectionHeader
-    SettingsSectionTitle
 } from "@app/components/Settings";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { TemplateRulesManager } from "@app/components/ruleTemplate/TemplateRulesManager";
 
 export default function RulesPage() {

src/components/ConfirmationDialog.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle
+} from "@app/components/ui/dialog";
+import { Button } from "@app/components/ui/button";
+import { AlertTriangle } from "lucide-react";
+
+interface ConfirmationDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: "destructive" | "default";
+    onConfirm: () => Promise<void> | void;
+    loading?: boolean;
+}
+
+export function ConfirmationDialog({
+    open,
+    onOpenChange,
+    title,
+    description,
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    variant = "destructive",
+    onConfirm,
+    loading = false
+}: ConfirmationDialogProps) {
+    const handleConfirm = async () => {
+        try {
+            await onConfirm();
+            onOpenChange(false);
+        } catch (error) {
+            // Error handling is done by the calling component
+            console.error("Confirmation action failed:", error);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle className="flex items-center gap-2">
+                        <AlertTriangle className="h-5 w-5 text-destructive" />
+                        {title}
+                    </DialogTitle>
+                    <DialogDescription>
+                        {description}
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter>
+                    <Button
+                        variant="outline"
+                        onClick={() => onOpenChange(false)}
+                        disabled={loading}
+                    >
+                        {cancelText}
+                    </Button>
+                    <Button
+                        variant={variant}
+                        onClick={handleConfirm}
+                        disabled={loading}
+                    >
+                        {loading ? "Processing..." : confirmText}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

src/components/ruleTemplate/ResourceRulesManager.tsx

@@ -8,6 +8,7 @@ import { useToast } from "@app/hooks/useToast";
 import { Trash2 } from "lucide-react";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { ConfirmationDialog } from "@app/components/ConfirmationDialog";
 
 interface RuleTemplate {
     templateId: string;
@@ -38,6 +39,9 @@ export function ResourceRulesManager({
     const [resourceTemplates, setResourceTemplates] = useState<ResourceTemplate[]>([]);
     const [loading, setLoading] = useState(true);
     const [selectedTemplate, setSelectedTemplate] = useState<string>("");
+    const [unassignDialogOpen, setUnassignDialogOpen] = useState(false);
+    const [templateToUnassign, setTemplateToUnassign] = useState<string | null>(null);
+    const [unassigning, setUnassigning] = useState(false);
     const { toast } = useToast();
     const { env } = useEnvContext();
     const api = createApiClient({ env });
@@ -79,8 +83,9 @@ export function ResourceRulesManager({
 
             if (response.status === 200 || response.status === 201) {
                 toast({
-                    title: "Success",
+                    title: "Template Assigned",
-                    description: "Template assigned successfully"
+                    description: "Template has been assigned to this resource. All template rules have been applied and will be automatically updated when the template changes.",
+                    variant: "default"
                 });
                 
                 setSelectedTemplate("");
@@ -105,17 +110,22 @@ export function ResourceRulesManager({
     };
 
     const handleUnassignTemplate = async (templateId: string) => {
-        if (!confirm("Are you sure you want to unassign this template?")) {
+        setTemplateToUnassign(templateId);
-            return;
+        setUnassignDialogOpen(true);
-        }
+    };
 
+    const confirmUnassignTemplate = async () => {
+        if (!templateToUnassign) return;
+        
+        setUnassigning(true);
         try {
-            const response = await api.delete(`/resource/${resourceId}/templates/${templateId}`);
+            const response = await api.delete(`/resource/${resourceId}/templates/${templateToUnassign}`);
 
             if (response.status === 200 || response.status === 201) {
                 toast({
-                    title: "Success",
+                    title: "Template Unassigned",
-                    description: "Template unassigned successfully"
+                    description: "Template has been unassigned from this resource. All template-managed rules have been removed from this resource.",
+                    variant: "default"
                 });
                 
                 await fetchData();
@@ -124,17 +134,20 @@ export function ResourceRulesManager({
                 }
             } else {
                 toast({
-                    title: "Error",
+                    title: "Unassign Failed",
-                    description: response.data.message || "Failed to unassign template",
+                    description: response.data.message || "Failed to unassign template. Please try again.",
                     variant: "destructive"
                 });
             }
         } catch (error) {
             toast({
-                title: "Error",
+                title: "Unassign Failed",
-                description: formatAxiosError(error, "Failed to unassign template"),
+                description: formatAxiosError(error, "Failed to unassign template. Please try again."),
                 variant: "destructive"
             });
+        } finally {
+            setUnassigning(false);
+            setTemplateToUnassign(null);
         }
     };
 
@@ -199,6 +212,18 @@ export function ResourceRulesManager({
                     )}
                 </CardContent>
             </Card>
+
+            <ConfirmationDialog
+                open={unassignDialogOpen}
+                onOpenChange={setUnassignDialogOpen}
+                title="Unassign Template"
+                description="Are you sure you want to unassign this template? This will remove all template-managed rules from this resource. This action cannot be undone."
+                confirmText="Unassign Template"
+                cancelText="Cancel"
+                variant="destructive"
+                onConfirm={confirmUnassignTemplate}
+                loading={unassigning}
+            />
         </div>
     );
 }

src/components/ruleTemplate/TemplateRulesManager.tsx

@@ -46,6 +46,7 @@ import {
 } from "@app/components/ui/table";
 import { isValidCIDR, isValidIP, isValidUrlGlobPattern } from "@server/lib/validators";
 import { ArrowUpDown, Trash2, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+import { ConfirmationDialog } from "@app/components/ConfirmationDialog";
 
 const addRuleSchema = z.object({
     action: z.enum(["ACCEPT", "DROP"]),
@@ -79,6 +80,9 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
         pageIndex: 0,
         pageSize: 25
     });
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [ruleToDelete, setRuleToDelete] = useState<number | null>(null);
+    const [deletingRule, setDeletingRule] = useState(false);
 
     const RuleAction = {
         ACCEPT: t('alwaysAllow'),
@@ -151,18 +155,19 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
                 return;
             }
 
-            await api.post(`/org/${orgId}/rule-templates/${templateId}/rules`, data);
+            const response = await api.post(`/org/${orgId}/rule-templates/${templateId}/rules`, data);
             toast({
-                title: "Success",
+                title: "Template Rule Added",
-                description: "Rule added successfully"
+                description: "A new rule has been added to the template. It will be available for assignment to resources.",
+                variant: "default"
             });
             form.reset();
             fetchRules();
         } catch (error) {
             toast({
                 variant: "destructive",
-                title: "Error",
+                title: "Add Rule Failed",
-                description: formatAxiosError(error, "Failed to add rule")
+                description: formatAxiosError(error, "Failed to add rule. Please check your input and try again.")
             });
         } finally {
             setAddingRule(false);
@@ -170,28 +175,54 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
     };
 
     const removeRule = async (ruleId: number) => {
+        setRuleToDelete(ruleId);
+        setDeleteDialogOpen(true);
+    };
+
+    const confirmDeleteRule = async () => {
+        if (!ruleToDelete) return;
+        
+        setDeletingRule(true);
         try {
-            await api.delete(`/org/${orgId}/rule-templates/${templateId}/rules/${ruleId}`);
+            await api.delete(`/org/${orgId}/rule-templates/${templateId}/rules/${ruleToDelete}`);
             toast({
-                title: "Success",
+                title: "Template Rule Removed",
-                description: "Rule removed successfully"
+                description: "The rule has been removed from the template and from all assigned resources.",
+                variant: "default"
             });
             fetchRules();
         } catch (error) {
             toast({
                 variant: "destructive",
-                title: "Error",
+                title: "Removal Failed",
-                description: formatAxiosError(error, "Failed to remove rule")
+                description: formatAxiosError(error, "Failed to remove template rule")
             });
+        } finally {
+            setDeletingRule(false);
+            setRuleToDelete(null);
         }
     };
 
     const updateRule = async (ruleId: number, data: Partial<TemplateRule>) => {
         try {
-            await api.put(`/org/${orgId}/rule-templates/${templateId}/rules/${ruleId}`, data);
+            const response = await api.put(`/org/${orgId}/rule-templates/${templateId}/rules/${ruleId}`, data);
+            
+            // Show success notification with propagation info if available
+            const message = response.data?.message || "The template rule has been updated and changes have been propagated to all assigned resources.";
+            toast({
+                title: "Template Rule Updated",
+                description: message,
+                variant: "default"
+            });
+            
             fetchRules();
         } catch (error) {
             console.error("Failed to update rule:", error);
+            toast({
+                title: "Update Failed",
+                description: formatAxiosError(error, "Failed to update template rule. Please try again."),
+                variant: "destructive"
+            });
         }
     };
 
@@ -348,7 +379,7 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
                             name="action"
                             render={({ field }) => (
                                 <FormItem>
-                                    <FormLabel>Action</FormLabel>
+                                    <FormLabel>{t('rulesAction')}</FormLabel>
                                     <FormControl>
                                         <Select
                                             value={field.value}
@@ -358,8 +389,10 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
                                                 <SelectValue />
                                             </SelectTrigger>
                                             <SelectContent>
-                                                <SelectItem value="ACCEPT">Accept</SelectItem>
+                                                <SelectItem value="ACCEPT">
-                                                <SelectItem value="DROP">Drop</SelectItem>
+                                                    {RuleAction.ACCEPT}
+                                                </SelectItem>
+                                                <SelectItem value="DROP">{RuleAction.DROP}</SelectItem>
                                             </SelectContent>
                                         </Select>
                                     </FormControl>
@@ -373,7 +406,7 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
                             name="match"
                             render={({ field }) => (
                                 <FormItem>
-                                    <FormLabel>Match</FormLabel>
+                                    <FormLabel>{t('rulesMatchType')}</FormLabel>
                                     <FormControl>
                                         <Select
                                             value={field.value}
@@ -383,9 +416,9 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
                                                 <SelectValue />
                                             </SelectTrigger>
                                             <SelectContent>
-                                                <SelectItem value="IP">IP</SelectItem>
+                                                <SelectItem value="PATH">{RuleMatch.PATH}</SelectItem>
-                                                <SelectItem value="CIDR">CIDR</SelectItem>
+                                                <SelectItem value="IP">{RuleMatch.IP}</SelectItem>
-                                                <SelectItem value="PATH">Path</SelectItem>
+                                                <SelectItem value="CIDR">{RuleMatch.CIDR}</SelectItem>
                                             </SelectContent>
                                         </Select>
                                     </FormControl>
@@ -399,7 +432,7 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
                             name="value"
                             render={({ field }) => (
                                 <FormItem>
-                                    <FormLabel>Value</FormLabel>
+                                    <FormLabel>{t('value')}</FormLabel>
                                     <FormControl>
                                         <Input placeholder="Enter value" {...field} />
                                     </FormControl>
@@ -413,7 +446,7 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
                             name="priority"
                             render={({ field }) => (
                                 <FormItem>
-                                    <FormLabel>Priority (optional)</FormLabel>
+                                    <FormLabel>{t('rulesPriority')} (optional)</FormLabel>
                                     <FormControl>
                                         <Input
                                             type="number"
@@ -556,6 +589,19 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
                     </div>
                 </div>
             )}
+
+            {/* Confirmation Dialog */}
+            <ConfirmationDialog
+                open={deleteDialogOpen}
+                onOpenChange={setDeleteDialogOpen}
+                title="Delete Template Rule"
+                description="Are you sure you want to delete this rule? This action will remove the rule from the template and from all assigned resources. This action cannot be undone."
+                confirmText="Delete Rule"
+                cancelText="Cancel"
+                variant="destructive"
+                onConfirm={confirmDeleteRule}
+                loading={deletingRule}
+            />
         </div>
     );
 }