feat(actions): add webhook support (#184)

* feat(actions): add webhook support

* feat: add type and method

web/src/components/inputs/input.tsx

@@ -7,22 +7,27 @@ type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
 interface TextFieldProps {
     name: string;
+    defaultValue?: string;
     label?: string;
     placeholder?: string;
     columns?: COL_WIDTHS;
     autoComplete?: string;
+    hidden?: boolean;
 }
 
 export const TextField = ({
     name,
+    defaultValue,
     label,
     placeholder,
     columns,
-    autoComplete
+    autoComplete,
+    hidden,
 }: TextFieldProps) => (
     <div
         className={classNames(
-            columns ? `col-span-${columns}` : "col-span-12"
+            hidden ? "hidden" : "",
+            columns ? `col-span-${columns}` : "col-span-12",
         )}
     >
         {label && (
@@ -40,6 +45,7 @@ export const TextField = ({
                         {...field}
                         id={name}
                         type="text"
+                        defaultValue={defaultValue}
                         autoComplete={autoComplete}
                         className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100"
                         placeholder={placeholder}

web/src/domain/constants.ts

@@ -191,6 +191,7 @@ export const DownloadClientTypeNameMap: Record<DownloadClientType | string, stri
 export const ActionTypeOptions: RadioFieldsetOption[] = [
     {label: "Test", description: "A simple action to test a filter.", value: "TEST"},
     {label: "Watch dir", description: "Add filtered torrents to a watch directory", value: "WATCH_FOLDER"},
+    {label: "Webhook", description: "Run webhook", value: "WEBHOOK"},
     {label: "Exec", description: "Run a custom command after a filter match", value: "EXEC"},
     {label: "qBittorrent", description: "Add torrents directly to qBittorrent", value: "QBITTORRENT"},
     {label: "Deluge", description: "Add torrents directly to Deluge", value: "DELUGE_V1"},
@@ -203,6 +204,7 @@ export const ActionTypeOptions: RadioFieldsetOption[] = [
 export const ActionTypeNameMap = {
     "TEST": "Test",
     "WATCH_FOLDER": "Watch folder",
+    "WEBHOOK": "Webhook",
     "EXEC": "Exec",
     "DELUGE_V1": "Deluge v1",
     "DELUGE_V2": "Deluge v2",

web/src/screens/filters/details.tsx

@@ -178,7 +178,16 @@ export default function FilterDetails() {
         return null
     }
 
-    const handleSubmit = (data: any) => {
+    const handleSubmit = (data: Filter) => {
+        // force set method and type on webhook actions
+        // TODO add options for these
+        data.actions.forEach((a: Action) => {
+            if (a.type === "WEBHOOK") {
+                a.webhook_method = "POST"
+                a.webhook_type = "JSON"
+            }
+        })
+
         updateMutation.mutate(data)
     }
 
@@ -268,8 +277,6 @@ export default function FilterDetails() {
                                         except_uploaders: filter.except_uploaders,
                                         freeleech: filter.freeleech,
                                         freeleech_percent: filter.freeleech_percent,
-                                        indexers: filter.indexers || [],
-                                        actions: filter.actions || [],
                                         formats: filter.formats || [],
                                         quality: filter.quality || [],
                                         media: filter.media || [],
@@ -280,6 +287,8 @@ export default function FilterDetails() {
                                         perfect_flac: filter.perfect_flac,
                                         artists: filter.artists,
                                         albums: filter.albums,
+                                        indexers: filter.indexers || [],
+                                        actions: filter.actions || [],
                                     } as Filter}
                                     onSubmit={handleSubmit}
                                 >
@@ -624,6 +633,11 @@ function FilterActions({ filter, values }: FilterActionsProps) {
         limit_upload_speed: 0,
         limit_download_speed: 0,
         filter_id: filter.id,
+        webhook_host: "",
+        webhook_type: "",
+        webhook_method: "",
+        webhook_data: "",
+        webhook_headers: [],
         //   client_id: 0,
     }
 
@@ -719,6 +733,23 @@ function FilterActionsItem({ action, clients, idx, remove }: FilterActionsItemPr
                         />
                     </div>
                 );
+            case "WEBHOOK":
+                return (
+                    <div className="mt-6 grid grid-cols-12 gap-6">
+                        <TextField
+                            name={`actions.${idx}.webhook_host`}
+                            label="Host"
+                            columns={6}
+                            placeholder="Host eg. http://localhost/webhook"
+                        />
+                        <TextField
+                            name={`actions.${idx}.webhook_data`}
+                            label="Data (json)"
+                            columns={6}
+                            placeholder={`Request data: { "key": "value" }`}
+                        />
+                    </div>
+                );
             case "QBITTORRENT":
                 return (
                     <div className="w-full">

web/src/types/Filter.d.ts

@@ -66,8 +66,13 @@ interface Action {
   ignore_rules?: boolean;
   limit_upload_speed?: number;
   limit_download_speed?: number;
+  webhook_host: string,
+  webhook_type: string;
+  webhook_method: string;
+  webhook_data: string,
+  webhook_headers: string[];
   filter_id?: number;
   client_id?: number;
 }
 
-type ActionType = 'TEST' | 'EXEC' | 'WATCH_FOLDER' | DownloadClientType;
+type ActionType = 'TEST' | 'EXEC' | 'WATCH_FOLDER' | 'WEBHOOK' | DownloadClientType;