feat(indexers): add support for optional baseurl override (#551)

* feat(indexers): optional baseurl override

* feat(indexers): update baseUrl parsing

* refactor(indexers): BREAKING move parse to IRC struct

* Move Parse as part of IRC struct from Indexer
* Updated definitions
* Build torrentUrl in stages
* Use new url.JoinPath to build torrentUrl
* Update tests

* refactor(indexers): select option obj

* refactor(indexers): make backwards compatible

web/src/components/inputs/select_wide.tsx

@@ -0,0 +1,119 @@
+import type { FieldProps } from "formik";
+import { Field } from "formik";
+import { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
+import { OptionBasicTyped } from "../../domain/constants";
+import CreatableSelect from "react-select/creatable";
+
+interface SelectFieldProps<T> {
+  name: string;
+  label: string;
+  help?: string;
+  placeholder?: string;
+  options: OptionBasicTyped<T>[]
+}
+
+export function SelectFieldCreatable<T>({ name, label, help, placeholder, options }: SelectFieldProps<T>) {
+  return (
+    <div className="space-y-1 p-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4">
+      <div>
+        <label
+          htmlFor={name}
+          className="block text-sm font-medium text-gray-900 dark:text-white sm:pt-2"
+        >
+          {label}
+        </label>
+      </div>
+      <div className="sm:col-span-2">
+        <Field name={name} type="select">
+          {({
+            field,
+            form: { setFieldValue }
+          }: FieldProps) => (
+            <CreatableSelect
+              {...field}
+              id={name}
+              isClearable={true}
+              isSearchable={true}
+              components={{
+                Input,
+                Control,
+                Menu,
+                Option
+              }}
+              placeholder={placeholder ?? "Choose an option"}
+              styles={{
+                singleValue: (base) => ({
+                  ...base,
+                  color: "unset"
+                })
+              }}
+              theme={(theme) => ({
+                ...theme,
+                spacing: {
+                  ...theme.spacing,
+                  controlHeight: 30,
+                  baseUnit: 2
+                }
+              })}
+              // value={field?.value ? field.value : options.find(o => o.value == field?.value)}
+              value={field?.value ? { value: field.value, label: field.value  } : field.value}
+              onChange={(option) => {
+                if (option === null) {
+                  setFieldValue(field.name, "");
+                  return;
+                } else {
+                  setFieldValue(field.name, option.value ?? "");
+                }
+              }}
+              options={[...[...options, { value: field.value, label: field.value  }].reduce((map, obj) => map.set(obj.value, obj), new Map()).values()]}
+            />
+          )}
+        </Field>
+        {help && (
+          <p className="mt-2 text-sm text-gray-500" id={`${name}-description`}>{help}</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const Input = (props: InputProps) => {
+  return (
+    <components.Input
+      {...props}
+      inputClassName="outline-none border-none shadow-none focus:ring-transparent"
+      className="text-gray-400 dark:text-gray-100"
+      children={props.children}
+    />
+  );
+};
+
+const Control = (props: ControlProps) => {
+  return (
+    <components.Control
+      {...props}
+      className="p-1 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
+      children={props.children}
+    />
+  );
+};
+
+const Menu = (props: MenuProps) => {
+  return (
+    <components.Menu
+      {...props}
+      className="dark:bg-gray-800 border border-gray-300 dark:border-gray-700 dark:text-gray-400 rounded-md shadow-sm"
+      children={props.children}
+    />
+  );
+};
+
+const Option = (props: OptionProps) => {
+  return (
+    <components.Option
+      {...props}
+      className="dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
+      children={props.children}
+    />
+  );
+};

web/src/forms/settings/IndexerForms.tsx

@@ -15,6 +15,7 @@ import { APIClient } from "../../api/APIClient";
 import { PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "../../components/inputs";
 import { SlideOver } from "../../components/panels";
 import Toast from "../../components/notifications/Toast";
+import { SelectFieldCreatable } from "../../components/inputs/select_wide";
 
 const Input = (props: InputProps) => (
   <components.Input 
@@ -423,6 +424,7 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
                                           setFieldValue("implementation", ind.implementation);
 
                                           if (ind.irc && ind.irc.settings) {
+                                            setFieldValue("base_url", ind.urls[0]);
                                             ind.irc.settings.forEach((s) => {
                                               setFieldValue(`irc.${s.name}`, s.default ?? "");
                                             });
@@ -443,6 +445,15 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
 
                           <SwitchGroupWide name="enabled" label="Enabled" />
 
+                          {indexer.implementation == "irc" && (
+                            <SelectFieldCreatable
+                              name="base_url"
+                              label="Base URL"
+                              help="Override baseurl if it's blocked by your ISP."
+                              options={indexer.urls.map(u => ({ value: u, label: u, key: u })) }
+                            />
+                          )}
+
                           {SettingFields(indexer, values.identifier)}
 
                         </div>
@@ -550,6 +561,7 @@ export function IndexerUpdateForm({ isOpen, toggle, indexer }: UpdateProps) {
     enabled: indexer.enabled,
     identifier: indexer.identifier,
     implementation: indexer.implementation,
+    base_url: indexer.base_url,
     settings: indexer.settings?.reduce(
       (o: Record<string, string>, obj: IndexerSetting) => ({
         ...o,
@@ -592,6 +604,16 @@ export function IndexerUpdateForm({ isOpen, toggle, indexer }: UpdateProps) {
             </Field>
           </div>
           <SwitchGroupWide name="enabled" label="Enabled" />
+
+          {indexer.implementation == "irc" && (
+            <SelectFieldCreatable
+              name="base_url"
+              label="Base URL"
+              help="Override baseurl if it's blocked by your ISP."
+              options={indexer.urls.map(u => ({ value: u, label: u, key: u })) }
+            />
+          )}
+
           {renderSettingFields(indexer.settings)}
         </div>
       )}

web/src/types/Indexer.d.ts

@@ -4,6 +4,7 @@ interface Indexer {
   identifier: string;
   enabled: boolean;
   implementation: string;
+  base_url: string;
   settings: Array<IndexerSetting>;
 }
 
@@ -12,6 +13,7 @@ interface IndexerDefinition {
   name: string;
   identifier: string;
   implementation: string;
+  base_url: string;
   enabled?: boolean;
   description: string;
   language: string;