feat(clients): add rTorrent support (#421)

web/src/domain/constants.ts

@@ -176,6 +176,11 @@ export const DownloadClientTypeOptions: RadioFieldsetOption[] = [
     description: "Add torrents directly to Deluge 2",
     value: "DELUGE_V2"
   },
+  {
+    label: "rTorrent",
+    description: "Add torrents directly to rTorrent",
+    value: "RTORRENT"
+  },
   {
     label: "Transmission",
     description: "Add torrents directly to Transmission",
@@ -207,6 +212,7 @@ export const DownloadClientTypeNameMap: Record<DownloadClientType | string, stri
   "DELUGE_V1": "Deluge v1",
   "DELUGE_V2": "Deluge v2",
   "QBITTORRENT": "qBittorrent",
+  "RTORRENT": "rTorrent",
   "TRANSMISSION": "Transmission",
   "RADARR": "Radarr",
   "SONARR": "Sonarr",
@@ -222,6 +228,7 @@ export const ActionTypeOptions: RadioFieldsetOption[] = [
   { label: "qBittorrent", description: "Add torrents directly to qBittorrent", value: "QBITTORRENT" },
   { label: "Deluge", description: "Add torrents directly to Deluge", value: "DELUGE_V1" },
   { label: "Deluge v2", description: "Add torrents directly to Deluge 2", value: "DELUGE_V2" },
+  { label: "rTorrent", description: "Add torrents directly to rTorrent", value: "RTORRENT" },
   { label: "Transmission", description: "Add torrents directly to Transmission", value: "TRANSMISSION" },
   { label: "Radarr", description: "Send to Radarr and let it decide", value: "RADARR" },
   { label: "Sonarr", description: "Send to Sonarr and let it decide", value: "SONARR" },
@@ -237,6 +244,7 @@ export const ActionTypeNameMap = {
   "DELUGE_V1": "Deluge v1",
   "DELUGE_V2": "Deluge v2",
   "QBITTORRENT": "qBittorrent",
+  "RTORRENT": "rTorrent",
   "TRANSMISSION": "Transmission",
   "RADARR": "Radarr",
   "SONARR": "Sonarr",
@@ -247,7 +255,7 @@ export const ActionTypeNameMap = {
 export const ActionContentLayoutOptions: SelectGenericOption<ActionContentLayout>[] = [
   { label: "Original", description: "Original", value: "ORIGINAL" },
   { label: "Create subfolder", description: "Create subfolder", value: "SUBFOLDER_CREATE" },
-  { label: "Don't create subfolder", description: "Don't create subfolder", value: "SUBFOLDER_NONE" },
+  { label: "Don't create subfolder", description: "Don't create subfolder", value: "SUBFOLDER_NONE" }
 ];
 
 export interface OptionBasic {

web/src/forms/settings/DownloadClientForms.tsx

@@ -44,7 +44,7 @@ interface InitialValues {
 }
 
 
-function FormFieldsDefault() {
+function FormFieldsDeluge() {
   const {
     values: { tls }
   } = useFormikContext<InitialValues>();
@@ -60,7 +60,7 @@ function FormFieldsDefault() {
       <NumberFieldWide
         name="port"
         label="Port"
-        help="WebUI port for qBittorrent and daemon port for Deluge"
+        help="Daemon port"
       />
 
       <SwitchGroupWide name="tls" label="TLS" />
@@ -115,7 +115,7 @@ function FormFieldsQbit() {
       <TextFieldWide
         name="host"
         label="Host"
-        help="Eg. client.domain.ltd, domain.ltd/client, domain.ltd:port"
+        help="Eg. http(s)://client.domain.ltd, http(s)://domain.ltd/qbittorrent, http://domain.ltd:port"
       />
 
       {port > 0 && (
@@ -150,6 +150,18 @@ function FormFieldsQbit() {
   );
 }
 
+function FormFieldsRTorrent() {
+  return (
+    <div className="flex flex-col space-y-4 px-1 py-6 sm:py-0 sm:space-y-0">
+      <TextFieldWide
+        name="host"
+        label="Host"
+        help="Eg. http(s)://client.domain.ltd/RPC2, http(s)://domain.ltd/client, http(s)://domain.ltd/RPC2"
+      />
+    </div>
+  );
+}
+
 function FormFieldsTransmission() {
   const {
     values: { tls }
@@ -185,9 +197,10 @@ export interface componentMapType {
 }
 
 export const componentMap: componentMapType = {
-  DELUGE_V1: <FormFieldsDefault/>,
-  DELUGE_V2: <FormFieldsDefault/>,
+  DELUGE_V1: <FormFieldsDeluge/>,
+  DELUGE_V2: <FormFieldsDeluge/>,
   QBITTORRENT: <FormFieldsQbit/>,
+  RTORRENT: <FormFieldsRTorrent />,
   TRANSMISSION: <FormFieldsTransmission/>,
   RADARR: <FormFieldsArr/>,
   SONARR: <FormFieldsArr/>,

web/src/screens/filters/action.tsx

@@ -0,0 +1,544 @@
+import { AlertWarning } from "../../components/alerts";
+import { DownloadClientSelect, NumberField, Select, SwitchGroup, TextField } from "../../components/inputs";
+import { ActionContentLayoutOptions, ActionTypeNameMap, ActionTypeOptions } from "../../domain/constants";
+import React, { Fragment, useRef } from "react";
+import { useQuery } from "react-query";
+import { APIClient } from "../../api/APIClient";
+import { Field, FieldArray, FieldProps, FormikValues } from "formik";
+import { EmptyListState } from "../../components/emptystates";
+import { useToggle } from "../../hooks/hooks";
+import { classNames } from "../../utils";
+import { Dialog, Switch as SwitchBasic, Transition } from "@headlessui/react";
+import { ChevronRightIcon } from "@heroicons/react/solid";
+import { DeleteModal } from "../../components/modals";
+import { CollapsableSection } from "./details";
+
+interface FilterActionsProps {
+  filter: Filter;
+  values: FormikValues;
+}
+
+export function FilterActions({ filter, values }: FilterActionsProps) {
+  const { data } = useQuery(
+    ["filters", "download_clients"],
+    () => APIClient.download_clients.getAll(),
+    { refetchOnWindowFocus: false }
+  );
+
+  const newAction = {
+    name: "new action",
+    enabled: true,
+    type: "TEST",
+    watch_folder: "",
+    exec_cmd: "",
+    exec_args: "",
+    category: "",
+    tags: "",
+    label: "",
+    save_path: "",
+    paused: false,
+    ignore_rules: false,
+    skip_hash_check: false,
+    content_layout: "",
+    limit_upload_speed: 0,
+    limit_download_speed: 0,
+    limit_ratio: 0,
+    limit_seed_time: 0,
+    reannounce_skip: false,
+    reannounce_delete: false,
+    reannounce_interval: 7,
+    reannounce_max_attempts: 25,
+    filter_id: filter.id,
+    webhook_host: "",
+    webhook_type: "",
+    webhook_method: "",
+    webhook_data: "",
+    webhook_headers: []
+    //   client_id: 0,
+  };
+
+  return (
+    <div className="mt-10">
+      <FieldArray name="actions">
+        {({ remove, push }) => (
+          <Fragment>
+            <div className="-ml-4 -mt-4 mb-6 flex justify-between items-center flex-wrap sm:flex-nowrap">
+              <div className="ml-4 mt-4">
+                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-200">Actions</h3>
+                <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                  Add to download clients or run custom commands.
+                </p>
+              </div>
+              <div className="ml-4 mt-4 flex-shrink-0">
+                <button
+                  type="button"
+                  className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
+                  onClick={() => push(newAction)}
+                >
+                  Add new
+                </button>
+              </div>
+            </div>
+
+            <div className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
+              {values.actions.length > 0 ?
+                <ul className="divide-y divide-gray-200 dark:divide-gray-700">
+                  {values.actions.map((action: Action, index: number) => (
+                    <FilterActionsItem action={action} clients={data ?? []} idx={index} remove={remove} key={index}/>
+                  ))}
+                </ul>
+                : <EmptyListState text="No actions yet!"/>
+              }
+            </div>
+          </Fragment>
+        )}
+      </FieldArray>
+    </div>
+  );
+}
+
+interface TypeFormProps {
+  action: Action;
+  idx: number;
+  clients: Array<DownloadClient>;
+}
+
+const TypeForm = ({ action, idx, clients }: TypeFormProps) => {
+  switch (action.type) {
+  case "TEST":
+    return (
+      <AlertWarning
+        text="The test action does nothing except to show if the filter works."
+      />
+    );
+  case "EXEC":
+    return (
+      <div>
+        <div className="mt-6 grid grid-cols-12 gap-6">
+          <TextField
+            name={`actions.${idx}.exec_cmd`}
+            label="Command"
+            columns={6}
+            placeholder="Path to program eg. /bin/test"
+          />
+          <TextField
+            name={`actions.${idx}.exec_args`}
+            label="Arguments"
+            columns={6}
+            placeholder="Arguments eg. --test"
+          />
+        </div>
+      </div>
+    );
+  case "WATCH_FOLDER":
+    return (
+      <div className="mt-6 grid grid-cols-12 gap-6">
+        <TextField
+          name={`actions.${idx}.watch_folder`}
+          label="Watch folder"
+          columns={6}
+          placeholder="Watch directory eg. /home/user/rwatch"
+        />
+      </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">
+        <div className="mt-6 grid grid-cols-12 gap-6">
+          <DownloadClientSelect
+            name={`actions.${idx}.client_id`}
+            action={action}
+            clients={clients}
+          />
+
+          <div className="col-span-6 sm:col-span-6">
+            <TextField
+              name={`actions.${idx}.save_path`}
+              label="Save path"
+              columns={6}
+              placeholder="eg. /full/path/to/watch_folder"
+            />
+          </div>
+        </div>
+
+        <div className="mt-6 grid grid-cols-12 gap-6">
+          <TextField
+            name={`actions.${idx}.category`}
+            label="Category"
+            columns={6}
+            placeholder="eg. category"
+          />
+          <TextField
+            name={`actions.${idx}.tags`}
+            label="Tags"
+            columns={6}
+            placeholder="eg. tag1,tag2"
+          />
+        </div>
+
+        <CollapsableSection title="Rules" subtitle="client options">
+          <div className="col-span-12">
+            <div className="mt-6 grid grid-cols-12 gap-6">
+              <NumberField
+                name={`actions.${idx}.limit_download_speed`}
+                label="Limit download speed (KiB/s)"
+              />
+              <NumberField
+                name={`actions.${idx}.limit_upload_speed`}
+                label="Limit upload speed (KiB/s)"
+              />
+            </div>
+
+            <div className="mt-6 grid grid-cols-12 gap-6">
+              <NumberField
+                name={`actions.${idx}.limit_ratio`}
+                label="Ratio limit"
+                step={0.5}
+              />
+              <NumberField
+                name={`actions.${idx}.limit_seed_time`}
+                label="Seed time limit (seconds)"
+              />
+            </div>
+          </div>
+          <div className="col-span-6">
+            <SwitchGroup
+              name={`actions.${idx}.paused`}
+              label="Add paused"
+              description="Add torrent as paused"
+            />
+            <SwitchGroup
+              name={`actions.${idx}.ignore_rules`}
+              label="Ignore client rules"
+              description="Download if max active reached"
+            />
+          </div>
+          <div className="col-span-6">
+            <Select
+              name={`actions.${idx}.content_layout`}
+              label="Content Layout"
+              optionDefaultText="Select content layout"
+              options={ActionContentLayoutOptions}
+            />
+            <div className="mt-2">
+              <SwitchGroup
+                name={`actions.${idx}.skip_hash_check`}
+                label="Skip hash check"
+                description="Add torrent and skip hash check"
+              />
+            </div>
+          </div>
+        </CollapsableSection>
+
+        <CollapsableSection title="Advanced" subtitle="Advanced options">
+          <div className="col-span-12">
+            <div className="mt-6 grid grid-cols-12 gap-6">
+              <NumberField
+                name={`actions.${idx}.reannounce_interval`}
+                label="Reannounce interval. Run every X seconds"
+              />
+              <NumberField
+                name={`actions.${idx}.reannounce_max_attempts`}
+                label="Run reannounce Y times"
+              />
+            </div>
+          </div>
+          <div className="col-span-6">
+            <SwitchGroup
+              name={`actions.${idx}.reannounce_skip`}
+              label="Skip reannounce"
+              description="If reannounce is not needed, skip"
+            />
+            <SwitchGroup
+              name={`actions.${idx}.reannounce_delete`}
+              label="Delete stalled"
+              description="Delete stalled torrents after X attempts"
+            />
+          </div>
+        </CollapsableSection>
+      </div>
+    );
+  case "DELUGE_V1":
+  case "DELUGE_V2":
+    return (
+      <div>
+        <div className="mt-6 grid grid-cols-12 gap-6">
+          <DownloadClientSelect
+            name={`actions.${idx}.client_id`}
+            action={action}
+            clients={clients}
+          />
+
+          <div className="col-span-12 sm:col-span-6">
+            <TextField
+              name={`actions.${idx}.save_path`}
+              label="Save path"
+              columns={6}
+            />
+          </div>
+        </div>
+
+        <div className="mt-6 col-span-12 sm:col-span-6">
+          <TextField
+            name={`actions.${idx}.label`}
+            label="Label"
+            columns={6}
+          />
+        </div>
+
+        <div className="mt-6 grid grid-cols-12 gap-6">
+          <NumberField
+            name={`actions.${idx}.limit_download_speed`}
+            label="Limit download speed (KB/s)"
+          />
+          <NumberField
+            name={`actions.${idx}.limit_upload_speed`}
+            label="Limit upload speed (KB/s)"
+          />
+        </div>
+
+        <div className="mt-6 grid grid-cols-12 gap-6">
+          <div className="col-span-6">
+            <SwitchGroup
+              name={`actions.${idx}.paused`}
+              label="Add paused"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  case "RTORRENT":
+    return (
+      <div>
+        <div className="mt-6 grid grid-cols-12 gap-6">
+          <DownloadClientSelect
+            name={`actions.${idx}.client_id`}
+            action={action}
+            clients={clients}
+          />
+
+          <div className="col-span-12 sm:col-span-6">
+            <TextField
+              name={`actions.${idx}.label`}
+              label="Label"
+              columns={6}
+            />
+          </div>
+
+          <div className="col-span-12 sm:col-span-6">
+            <TextField
+              name={`actions.${idx}.save_path`}
+              label="Save path"
+              columns={6}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  case "TRANSMISSION":
+    return (
+      <div>
+        <div className="mt-6 grid grid-cols-12 gap-6">
+          <DownloadClientSelect
+            name={`actions.${idx}.client_id`}
+            action={action}
+            clients={clients}
+          />
+
+          <div className="col-span-12 sm:col-span-6">
+            <TextField
+              name={`actions.${idx}.save_path`}
+              label="Save path"
+              columns={6}
+            />
+          </div>
+        </div>
+
+        <div className="mt-6 grid grid-cols-12 gap-6">
+          <div className="col-span-6">
+            <SwitchGroup
+              name={`actions.${idx}.paused`}
+              label="Add paused"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  case "RADARR":
+  case "SONARR":
+  case "LIDARR":
+  case "WHISPARR":
+    return (
+      <div className="mt-6 grid grid-cols-12 gap-6">
+        <DownloadClientSelect
+          name={`actions.${idx}.client_id`}
+          action={action}
+          clients={clients}
+        />
+      </div>
+    );
+
+  default:
+    return null;
+  }
+};
+
+interface FilterActionsItemProps {
+  action: Action;
+  clients: DownloadClient[];
+  idx: number;
+  remove: <T>(index: number) => T | undefined;
+}
+
+function FilterActionsItem({ action, clients, idx, remove }: FilterActionsItemProps) {
+  const cancelButtonRef = useRef(null);
+
+  const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
+  const [edit, toggleEdit] = useToggle(false);
+
+  return (
+    <li>
+      <div
+        className={classNames(
+          idx % 2 === 0 ? "bg-white dark:bg-gray-800" : "bg-gray-50 dark:bg-gray-700",
+          "flex items-center sm:px-6 hover:bg-gray-50 dark:hover:bg-gray-600"
+        )}
+      >
+        <Field name={`actions.${idx}.enabled`} type="checkbox">
+          {({
+            field,
+            form: { setFieldValue }
+          }: FieldProps) => (
+            <SwitchBasic
+              {...field}
+              type="button"
+              value={field.value}
+              checked={field.checked ?? false}
+              onChange={(value: boolean) => {
+                setFieldValue(field?.name ?? "", value);
+              }}
+              className={classNames(
+                field.value ? "bg-teal-500 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-600",
+                "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              )}
+            >
+              <span className="sr-only">toggle enabled</span>
+              <span
+                aria-hidden="true"
+                className={classNames(
+                  field.value ? "translate-x-5" : "translate-x-0",
+                  "inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+                )}
+              />
+            </SwitchBasic>
+          )}
+        </Field>
+
+        <button className="px-4 py-4 w-full flex" type="button" onClick={toggleEdit}>
+          <div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
+            <div className="truncate">
+              <div className="flex text-sm">
+                <p className="ml-4 font-medium text-indigo-600 dark:text-gray-100 truncate">
+                  {action.name}
+                </p>
+              </div>
+            </div>
+            <div className="mt-4 flex-shrink-0 sm:mt-0 sm:ml-5">
+              <div className="flex overflow-hidden -space-x-1">
+                <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
+                  {ActionTypeNameMap[action.type]}
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="ml-5 flex-shrink-0">
+            <ChevronRightIcon
+              className="h-5 w-5 text-gray-400"
+              aria-hidden="true"
+            />
+          </div>
+        </button>
+
+      </div>
+      {edit && (
+        <div className="px-4 py-4 flex items-center sm:px-6 border dark:border-gray-600">
+          <Transition.Root show={deleteModalIsOpen} as={Fragment}>
+            <Dialog
+              as="div"
+              static
+              className="fixed inset-0 overflow-y-auto"
+              initialFocus={cancelButtonRef}
+              open={deleteModalIsOpen}
+              onClose={toggleDeleteModal}
+            >
+              <DeleteModal
+                isOpen={deleteModalIsOpen}
+                buttonRef={cancelButtonRef}
+                toggle={toggleDeleteModal}
+                deleteAction={() => remove(idx)}
+                title="Remove filter action"
+                text="Are you sure you want to remove this action? This action cannot be undone."
+              />
+            </Dialog>
+          </Transition.Root>
+
+          <div className="w-full">
+
+            <div className="mt-6 grid grid-cols-12 gap-6">
+              <Select
+                name={`actions.${idx}.type`}
+                label="Type"
+                optionDefaultText="Select type"
+                options={ActionTypeOptions}
+              />
+
+              <TextField name={`actions.${idx}.name`} label="Name" columns={6}/>
+            </div>
+
+            <TypeForm action={action} clients={clients} idx={idx}/>
+
+            <div className="pt-6 divide-y divide-gray-200">
+              <div className="mt-4 pt-4 flex justify-between">
+                <button
+                  type="button"
+                  className="inline-flex items-center justify-center py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-red-500 hover:text-red-500 dark:hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
+                  onClick={toggleDeleteModal}
+                >
+                  Remove
+                </button>
+
+                <div>
+                  <button
+                    type="button"
+                    className="light:bg-white light:border light:border-gray-300 rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-gray-700 dark:text-gray-500 light:hover:bg-gray-50 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                    onClick={toggleEdit}
+                  >
+                    Close
+                  </button>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      )}
+    </li>
+  );
+}

web/src/screens/filters/details.tsx

@@ -1,34 +1,23 @@
-import React, { Fragment, useRef } from "react";
+import React, { useRef } from "react";
 import { useMutation, useQuery } from "react-query";
-import {
-  NavLink,
-  Route,
-  Routes,
-  useLocation,
-  useNavigate,
-  useParams
-} from "react-router-dom";
+import { NavLink, Route, Routes, useLocation, useNavigate, useParams } from "react-router-dom";
 import { toast } from "react-hot-toast";
-import { Field, FieldArray, FieldProps, Form, Formik, FormikValues, useFormikContext } from "formik";
-import { Dialog, Transition, Switch as SwitchBasic } from "@headlessui/react";
+import { Form, Formik, FormikValues, useFormikContext } from "formik";
 import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/solid";
 
 import {
-  CONTAINER_OPTIONS,
   CODECS_OPTIONS,
-  RESOLUTION_OPTIONS,
-  SOURCES_OPTIONS,
-  ActionTypeNameMap,
-  ActionTypeOptions,
-  HDR_OPTIONS,
+  CONTAINER_OPTIONS,
+  downloadsPerUnitOptions,
   FORMATS_OPTIONS,
-  SOURCES_MUSIC_OPTIONS,
+  HDR_OPTIONS,
+  ORIGIN_OPTIONS,
+  OTHER_OPTIONS,
   QUALITY_MUSIC_OPTIONS,
   RELEASE_TYPE_MUSIC_OPTIONS,
-  OTHER_OPTIONS,
-  ORIGIN_OPTIONS,
-  downloadsPerUnitOptions,
-  ActionContentLayoutOptions
+  RESOLUTION_OPTIONS,
+  SOURCES_MUSIC_OPTIONS,
+  SOURCES_OPTIONS
 } from "../../domain/constants";
 import { queryClient } from "../../App";
 import { APIClient } from "../../api/APIClient";
@@ -36,22 +25,20 @@ import { useToggle } from "../../hooks/hooks";
 import { classNames } from "../../utils";
 
 import {
-  NumberField,
-  TextField,
-  SwitchGroup,
-  Select,
-  MultiSelect,
-  DownloadClientSelect,
+  CheckboxField,
   IndexerMultiSelect,
-  CheckboxField
+  MultiSelect,
+  NumberField,
+  Select,
+  SwitchGroup,
+  TextField
 } from "../../components/inputs";
 import DEBUG from "../../components/debug";
 import Toast from "../../components/notifications/Toast";
-import { AlertWarning } from "../../components/alerts";
 import { DeleteModal } from "../../components/modals";
 import { TitleSubtitle } from "../../components/headings";
-import { EmptyListState } from "../../components/emptystates";
 import { TextArea } from "../../components/inputs/input";
+import { FilterActions } from "./action";
 
 interface tabType {
   name: string;
@@ -531,7 +518,7 @@ interface CollapsableSectionProps {
     defaultOpen?: boolean;
 }
 
-function CollapsableSection({ title, subtitle, children, defaultOpen }: CollapsableSectionProps) {
+export function CollapsableSection({ title, subtitle, children, defaultOpen }: CollapsableSectionProps) {
   const [isOpen, toggleOpen] = useToggle(defaultOpen ?? false);
 
   return (
@@ -628,504 +615,3 @@ export function External() {
   );
 }
 
-interface FilterActionsProps {
-    filter: Filter;
-    values: FormikValues;
-}
-
-export function FilterActions({ filter, values }: FilterActionsProps) {
-  const { data } = useQuery(
-    ["filters", "download_clients"],
-    () => APIClient.download_clients.getAll(),
-    { refetchOnWindowFocus: false }
-  );
-
-  const newAction = {
-    name: "new action",
-    enabled: true,
-    type: "TEST",
-    watch_folder: "",
-    exec_cmd: "",
-    exec_args: "",
-    category: "",
-    tags: "",
-    label: "",
-    save_path: "",
-    paused: false,
-    ignore_rules: false,
-    skip_hash_check: false,
-    content_layout: "",
-    limit_upload_speed: 0,
-    limit_download_speed: 0,
-    limit_ratio: 0,
-    limit_seed_time: 0,
-    reannounce_skip: false,
-    reannounce_delete: false,
-    reannounce_interval: 7,
-    reannounce_max_attempts: 25,
-    filter_id: filter.id,
-    webhook_host: "",
-    webhook_type: "",
-    webhook_method: "",
-    webhook_data: "",
-    webhook_headers: []
-    //   client_id: 0,
-  };
-
-  return (
-    <div className="mt-10">
-      <FieldArray name="actions">
-        {({ remove, push }) => (
-          <Fragment>
-            <div className="-ml-4 -mt-4 mb-6 flex justify-between items-center flex-wrap sm:flex-nowrap">
-              <div className="ml-4 mt-4">
-                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-200">Actions</h3>
-                <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                  Add to download clients or run custom commands.
-                </p>
-              </div>
-              <div className="ml-4 mt-4 flex-shrink-0">
-                <button
-                  type="button"
-                  className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-                  onClick={() => push(newAction)}
-                >
-                  Add new
-                </button>
-              </div>
-            </div>
-
-            <div className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
-              {values.actions.length > 0 ?
-                <ul className="divide-y divide-gray-200 dark:divide-gray-700">
-                  {values.actions.map((action: Action, index: number) => (
-                    <FilterActionsItem action={action} clients={data ?? []} idx={index} remove={remove} key={index} />
-                  ))}
-                </ul>
-                : <EmptyListState text="No actions yet!" />
-              }
-            </div>
-          </Fragment>
-        )}
-      </FieldArray>
-    </div>
-  );
-}
-
-interface TypeFormProps {
-  action: Action;
-  idx: number;
-  clients: Array<DownloadClient>;
-}
-
-const TypeForm = ({ action, idx, clients }: TypeFormProps) => {
-  switch (action.type) {
-  case "TEST":
-    return (
-      <AlertWarning
-        text="The test action does nothing except to show if the filter works."
-      />
-    );
-  case "EXEC":
-    return (
-      <div>
-        <div className="mt-6 grid grid-cols-12 gap-6">
-          <TextField
-            name={`actions.${idx}.exec_cmd`}
-            label="Command"
-            columns={6}
-            placeholder="Path to program eg. /bin/test"
-          />
-          <TextField
-            name={`actions.${idx}.exec_args`}
-            label="Arguments"
-            columns={6}
-            placeholder="Arguments eg. --test"
-          />
-        </div>
-      </div>
-    );
-  case "WATCH_FOLDER":
-    return (
-      <div className="mt-6 grid grid-cols-12 gap-6">
-        <TextField
-          name={`actions.${idx}.watch_folder`}
-          label="Watch folder"
-          columns={6}
-          placeholder="Watch directory eg. /home/user/rwatch"
-        />
-      </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">
-        <div className="mt-6 grid grid-cols-12 gap-6">
-          <DownloadClientSelect
-            name={`actions.${idx}.client_id`}
-            action={action}
-            clients={clients}
-          />
-
-          <div className="col-span-6 sm:col-span-6">
-            <TextField
-              name={`actions.${idx}.save_path`}
-              label="Save path"
-              columns={6}
-              placeholder="eg. /full/path/to/watch_folder"
-            />
-          </div>
-        </div>
-
-        <div className="mt-6 grid grid-cols-12 gap-6">
-          <TextField
-            name={`actions.${idx}.category`}
-            label="Category"
-            columns={6}
-            placeholder="eg. category"
-          />
-          <TextField
-            name={`actions.${idx}.tags`}
-            label="Tags"
-            columns={6}
-            placeholder="eg. tag1,tag2"
-          />
-        </div>
-
-        <CollapsableSection title="Rules" subtitle="client options">
-          <div className="col-span-12">
-            <div className="mt-6 grid grid-cols-12 gap-6">
-              <NumberField
-                name={`actions.${idx}.limit_download_speed`}
-                label="Limit download speed (KiB/s)"
-              />
-              <NumberField
-                name={`actions.${idx}.limit_upload_speed`}
-                label="Limit upload speed (KiB/s)"
-              />
-            </div>
-
-            <div className="mt-6 grid grid-cols-12 gap-6">
-              <NumberField
-                name={`actions.${idx}.limit_ratio`}
-                label="Ratio limit"
-                step={0.5}
-              />
-              <NumberField
-                name={`actions.${idx}.limit_seed_time`}
-                label="Seed time limit (seconds)"
-              />
-            </div>
-          </div>
-          <div className="col-span-6">
-            <SwitchGroup
-              name={`actions.${idx}.paused`}
-              label="Add paused"
-              description="Add torrent as paused"
-            />
-            <SwitchGroup
-              name={`actions.${idx}.ignore_rules`}
-              label="Ignore client rules"
-              description="Download if max active reached"
-            />
-          </div>
-          <div className="col-span-6">
-            <Select
-              name={`actions.${idx}.content_layout`}
-              label="Content Layout"
-              optionDefaultText="Select content layout"
-              options={ActionContentLayoutOptions}
-            />
-            <div className="mt-2">
-              <SwitchGroup
-                name={`actions.${idx}.skip_hash_check`}
-                label="Skip hash check"
-                description="Add torrent and skip hash check"
-              />
-            </div>
-          </div>
-        </CollapsableSection>
-
-        <CollapsableSection title="Advanced" subtitle="Advanced options">
-          <div className="col-span-12">
-            <div className="mt-6 grid grid-cols-12 gap-6">
-              <NumberField
-                name={`actions.${idx}.reannounce_interval`}
-                label="Reannounce interval. Run every X seconds"
-              />
-              <NumberField
-                name={`actions.${idx}.reannounce_max_attempts`}
-                label="Run reannounce Y times"
-              />
-            </div>
-          </div>
-          <div className="col-span-6">
-            <SwitchGroup
-              name={`actions.${idx}.reannounce_skip`}
-              label="Skip reannounce"
-              description="If reannounce is not needed, skip"
-            />
-            <SwitchGroup
-              name={`actions.${idx}.reannounce_delete`}
-              label="Delete stalled"
-              description="Delete stalled torrents after X attempts"
-            />
-          </div>
-        </CollapsableSection>
-      </div>
-    );
-  case "DELUGE_V1":
-  case "DELUGE_V2":
-    return (
-      <div>
-        <div className="mt-6 grid grid-cols-12 gap-6">
-          <DownloadClientSelect
-            name={`actions.${idx}.client_id`}
-            action={action}
-            clients={clients}
-          />
-
-          <div className="col-span-12 sm:col-span-6">
-            <TextField
-              name={`actions.${idx}.save_path`}
-              label="Save path"
-              columns={6}
-            />
-          </div>
-        </div>
-
-        <div className="mt-6 col-span-12 sm:col-span-6">
-          <TextField
-            name={`actions.${idx}.label`}
-            label="Label"
-            columns={6}
-          />
-        </div>
-
-        <div className="mt-6 grid grid-cols-12 gap-6">
-          <NumberField
-            name={`actions.${idx}.limit_download_speed`}
-            label="Limit download speed (KB/s)"
-          />
-          <NumberField
-            name={`actions.${idx}.limit_upload_speed`}
-            label="Limit upload speed (KB/s)"
-          />
-        </div>
-
-        <div className="mt-6 grid grid-cols-12 gap-6">
-          <div className="col-span-6">
-            <SwitchGroup
-              name={`actions.${idx}.paused`}
-              label="Add paused"
-            />
-          </div>
-        </div>
-      </div>
-    );
-  case "TRANSMISSION":
-    return (
-      <div>
-        <div className="mt-6 grid grid-cols-12 gap-6">
-          <DownloadClientSelect
-            name={`actions.${idx}.client_id`}
-            action={action}
-            clients={clients}
-          />
-
-          <div className="col-span-12 sm:col-span-6">
-            <TextField
-              name={`actions.${idx}.save_path`}
-              label="Save path"
-              columns={6}
-            />
-          </div>
-        </div>
-
-        <div className="mt-6 grid grid-cols-12 gap-6">
-          <div className="col-span-6">
-            <SwitchGroup
-              name={`actions.${idx}.paused`}
-              label="Add paused"
-            />
-          </div>
-        </div>
-      </div>
-    );
-  case "RADARR":
-  case "SONARR":
-  case "LIDARR":
-  case "WHISPARR":
-    return (
-      <div className="mt-6 grid grid-cols-12 gap-6">
-        <DownloadClientSelect
-          name={`actions.${idx}.client_id`}
-          action={action}
-          clients={clients}
-        />
-      </div>
-    );
-
-  default:
-    return null;
-  }
-};
-
-interface FilterActionsItemProps {
-    action: Action;
-    clients: DownloadClient[];
-    idx: number;
-    remove: <T>(index: number) => T | undefined;
-}
-
-function FilterActionsItem({ action, clients, idx, remove }: FilterActionsItemProps) {
-  const cancelButtonRef = useRef(null);
-
-  const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
-  const [edit, toggleEdit] = useToggle(false);
-
-  return (
-    <li>
-      <div
-        className={classNames(
-          idx % 2 === 0 ? "bg-white dark:bg-gray-800" : "bg-gray-50 dark:bg-gray-700",
-          "flex items-center sm:px-6 hover:bg-gray-50 dark:hover:bg-gray-600"
-        )}
-      >
-        <Field name={`actions.${idx}.enabled`} type="checkbox">
-          {({
-            field,
-            form: { setFieldValue }
-          }: FieldProps) => (
-            <SwitchBasic
-              {...field}
-              type="button"
-              value={field.value}
-              checked={field.checked ?? false}
-              onChange={(value: boolean) => {
-                setFieldValue(field?.name ?? "", value);
-              }}
-              className={classNames(
-                field.value ? "bg-teal-500 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-600",
-                "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-              )}
-            >
-              <span className="sr-only">toggle enabled</span>
-              <span
-                aria-hidden="true"
-                className={classNames(
-                  field.value ? "translate-x-5" : "translate-x-0",
-                  "inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
-                )}
-              />
-            </SwitchBasic>
-          )}
-        </Field>
-
-        <button className="px-4 py-4 w-full flex" type="button" onClick={toggleEdit}>
-          <div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
-            <div className="truncate">
-              <div className="flex text-sm">
-                <p className="ml-4 font-medium text-indigo-600 dark:text-gray-100 truncate">
-                  {action.name}
-                </p>
-              </div>
-            </div>
-            <div className="mt-4 flex-shrink-0 sm:mt-0 sm:ml-5">
-              <div className="flex overflow-hidden -space-x-1">
-                <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
-                  {ActionTypeNameMap[action.type]}
-                </span>
-              </div>
-            </div>
-          </div>
-          <div className="ml-5 flex-shrink-0">
-            <ChevronRightIcon
-              className="h-5 w-5 text-gray-400"
-              aria-hidden="true"
-            />
-          </div>
-        </button>
-
-      </div>
-      {edit && (
-        <div className="px-4 py-4 flex items-center sm:px-6 border dark:border-gray-600">
-          <Transition.Root show={deleteModalIsOpen} as={Fragment}>
-            <Dialog
-              as="div"
-              static
-              className="fixed inset-0 overflow-y-auto"
-              initialFocus={cancelButtonRef}
-              open={deleteModalIsOpen}
-              onClose={toggleDeleteModal}
-            >
-              <DeleteModal
-                isOpen={deleteModalIsOpen}
-                buttonRef={cancelButtonRef}
-                toggle={toggleDeleteModal}
-                deleteAction={() => remove(idx)}
-                title="Remove filter action"
-                text="Are you sure you want to remove this action? This action cannot be undone."
-              />
-            </Dialog>
-          </Transition.Root>
-
-          <div className="w-full">
-
-            <div className="mt-6 grid grid-cols-12 gap-6">
-              <Select
-                name={`actions.${idx}.type`}
-                label="Type"
-                optionDefaultText="Select type"
-                options={ActionTypeOptions}
-              />
-
-              <TextField name={`actions.${idx}.name`} label="Name" columns={6} />
-            </div>
-
-            <TypeForm action={action} clients={clients} idx={idx} />
-
-            <div className="pt-6 divide-y divide-gray-200">
-              <div className="mt-4 pt-4 flex justify-between">
-                <button
-                  type="button"
-                  className="inline-flex items-center justify-center py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-red-500 hover:text-red-500 dark:hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
-                  onClick={toggleDeleteModal}
-                >
-                  Remove
-                </button>
-
-                <div>
-                  <button
-                    type="button"
-                    className="light:bg-white light:border light:border-gray-300 rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-gray-700 dark:text-gray-500 light:hover:bg-gray-50 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-                    onClick={toggleEdit}
-                  >
-                    Close
-                  </button>
-                </div>
-              </div>
-            </div>
-
-          </div>
-        </div>
-      )}
-    </li>
-  );
-}

web/src/types/Download.d.ts

@@ -2,6 +2,7 @@ type DownloadClientType =
     "QBITTORRENT" |
     "DELUGE_V1" |
     "DELUGE_V2" |
+    "RTORRENT" |
     "TRANSMISSION" |
     "RADARR" |
     "SONARR" |