Trigger actions (#20709)

* add backend trigger actions

* config

* frontend types

* add actions to form and wizard

* i18n

* docs

* use camera level notification enabled check

web/src/components/overlay/CreateTriggerDialog.tsx

@@ -79,6 +79,15 @@ export default function CreateTriggerDialog({
   const { t } = useTranslation("views/settings");
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  const availableActions = useMemo(() => {
+    if (!config) return [];
+
+    if (config.cameras[selectedCamera].notifications.enabled_in_config) {
+      return ["notification", "sub_label", "attribute"];
+    }
+    return ["sub_label", "attribute"];
+  }, [config, selectedCamera]);
+
   const existingTriggerNames = useMemo(() => {
     if (
       !config ||
@@ -132,7 +141,7 @@ export default function CreateTriggerDialog({
       .number()
       .min(0, t("triggers.dialog.form.threshold.error.min"))
       .max(1, t("triggers.dialog.form.threshold.error.max")),
-    actions: z.array(z.enum(["notification"])),
+    actions: z.array(z.enum(["notification", "sub_label", "attribute"])),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -383,7 +392,7 @@ export default function CreateTriggerDialog({
                     {t("triggers.dialog.form.actions.title")}
                   </FormLabel>
                   <div className="space-y-2">
-                    {["notification"].map((action) => (
+                    {availableActions.map((action) => (
                       <div key={action} className="flex items-center space-x-2">
                         <FormControl>
                           <Checkbox

web/src/components/trigger/TriggerWizardDialog.tsx

@@ -243,6 +243,7 @@ export default function TriggerWizardDialog({
               <Step3ThresholdAndActions
                 initialData={wizardState.step3Data}
                 trigger={trigger}
+                camera={selectedCamera}
                 onNext={handleStep3Next}
                 onBack={handleBack}
                 isLoading={isLoading}

web/src/components/trigger/wizard/Step3ThresholdAndActions.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useCallback } from "react";
+import { useEffect, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -17,6 +17,8 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Button } from "@/components/ui/button";
 import { Trigger, TriggerAction } from "@/types/trigger";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
 
 export type Step3FormData = {
   threshold: number;
@@ -26,6 +28,7 @@ export type Step3FormData = {
 type Step3ThresholdAndActionsProps = {
   initialData?: Step3FormData;
   trigger?: Trigger | null;
+  camera: string;
   onNext: (data: Step3FormData) => void;
   onBack: () => void;
   isLoading?: boolean;
@@ -34,18 +37,29 @@ type Step3ThresholdAndActionsProps = {
 export default function Step3ThresholdAndActions({
   initialData,
   trigger,
+  camera,
   onNext,
   onBack,
   isLoading = false,
 }: Step3ThresholdAndActionsProps) {
   const { t } = useTranslation("views/settings");
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  const availableActions = useMemo(() => {
+    if (!config) return [];
+
+    if (config.cameras[camera].notifications.enabled_in_config) {
+      return ["notification", "sub_label", "attribute"];
+    }
+    return ["sub_label", "attribute"];
+  }, [config, camera]);
 
   const formSchema = z.object({
     threshold: z
       .number()
       .min(0, t("triggers.dialog.form.threshold.error.min"))
       .max(1, t("triggers.dialog.form.threshold.error.max")),
-    actions: z.array(z.enum(["notification"])),
+    actions: z.array(z.enum(["notification", "sub_label", "attribute"])),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -127,7 +141,7 @@ export default function Step3ThresholdAndActions({
             <FormItem>
               <FormLabel>{t("triggers.dialog.form.actions.title")}</FormLabel>
               <div className="space-y-2">
-                {["notification"].map((action) => (
+                {availableActions.map((action) => (
                   <div key={action} className="flex items-center space-x-2">
                     <FormControl>
                       <Checkbox