Improve error messaging for not finding JSON selectors in Cardigann

ignore-downstream

Co-authored-by: Hugoren Martinako <aumpfbahn@gmail.com>
Co-authored-by: Oskari Lavinto <olavinto@protonmail.com>
Co-authored-by: Weblate <noreply@weblate.org>
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/ca/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/fi/
Translation: Servarr/Prowlarr

.devcontainer/Prowlarr.code-workspace

@@ -0,0 +1,13 @@
+// This file is used to open the backend and frontend in the same workspace, which is necessary as
+// the frontend has vscode settings that are distinct from the backend
+{
+  "folders": [
+    {
+      "path": ".."
+    },
+    {
+      "path": "../frontend"
+    }
+  ],
+  "settings": {}
+}

.devcontainer/devcontainer.json

@@ -0,0 +1,19 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/dotnet
+{
+  "name": "Prowlarr",
+  "image": "mcr.microsoft.com/devcontainers/dotnet:1-6.0",
+  "features": {
+    "ghcr.io/devcontainers/features/node:1": {
+      "nodeGypDependencies": true,
+      "version": "16",
+      "nvmVersion": "latest"
+    }
+  },
+  "forwardPorts": [9696],
+  "customizations": {
+    "vscode": {
+      "extensions": ["esbenp.prettier-vscode"]
+    }
+  }
+}

.editorconfig

@@ -36,12 +36,18 @@ dotnet_naming_style.instance_field_style.capitalization = camel_case
 dotnet_naming_style.instance_field_style.required_prefix = _
 
 # Prefer "var" everywhere
-csharp_style_var_for_built_in_types = true:suggestion
-csharp_style_var_when_type_is_apparent = true:suggestion
-csharp_style_var_elsewhere = true:suggestion
+csharp_style_var_for_built_in_types = true
+csharp_style_var_when_type_is_apparent = true
+csharp_style_var_elsewhere = true
+# Prefer "out" variables to be declared inline
+csharp_style_inlined_variable_declaration = true
 
 # Using directive is unnecessary.
 dotnet_diagnostic.IDE0005.severity = error
+# Use var instead of explicit type
+dotnet_diagnostic.IDE0007.severity = error
+# Inline variable declaration
+dotnet_diagnostic.IDE0018.severity = error
 
 # Stylecop Rules
 dotnet_diagnostic.SA0001.severity = none

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,5 +1,5 @@
 name: Bug Report
-description: 'Report a new bug, if you are not 100% certain this is a bug please go to our Reddit or Discord first'
+description: 'Report a new bug, if you are not 100% certain this is a bug please go to our Discord first'
 labels: ['Type: Bug', 'Status: Needs Triage']
 body:
 - type: checkboxes
@@ -74,7 +74,7 @@ body:
 - type: checkboxes
   attributes:
     label: Trace Logs have been provided as applicable. Reports may be closed if the required logs are not provided.
-    description: Trace logs are generally required for all bug reports
+    description: Trace logs are generally required for all bug reports and contain `trace`. Info logs are invalid for bug reports and do not contain `debug` nor `trace`
     options:
-    - label: I have followed the steps in the wiki link above and provided the required trace logs that are relevant and show this issue.
+    - label: I have read and followed the steps in the wiki link above and provided the required trace logs - the logs contain `trace` - that are relevant and show this issue.
       required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -6,6 +6,3 @@ contact_links:
   - name: Support via Discord
     url: https://prowlarr.com/discord
     about: Chat with users and devs on support and setup related topics.
-  - name: Support via Reddit
-    url: https://reddit.com/r/prowlarr
-    about: Discuss and search thru support topics.

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

.github/label-actions.yml

@@ -4,9 +4,9 @@
   comment: >
     :wave: @{issue-author}, we use the issue tracker exclusively
     for bug reports and feature requests. However, this issue appears
-    to be a support request. Please hop over onto our [Discord](https://prowlarr.com/discord) 
-    or [Subreddit](https://reddit.com/r/prowlarr)
+    to be a support request. Please hop over onto our [Discord](https://prowlarr.com/discord).
   close: true
+  close-reason: 'not planned'
 
 'Type: Indexer Request':
   comment: >
@@ -14,6 +14,7 @@
     for bug reports and feature requests. However, this issue appears
     to be a indexer request. Please use our Indexer request [site](https://requests.prowlarr.com/)
   close: true
+  close-reason: 'not planned'
 
 'Status: Logs Needed':
   comment: >

.github/labeler.yml

@@ -1,19 +1,31 @@
 'Area: API':
-  - src/Prowlarr.Api.V1/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/Prowlarr.Api.V1/**/*
 
 'Area: Db-migration':
-  - src/NzbDrone.Core/Datastore/Migration/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/NzbDrone.Core/Datastore/Migration/*
 
 'Area: Download Clients':
-  - src/NzbDrone.Core/Download/Clients/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/NzbDrone.Core/Download/Clients/**/*
 
 'Area: Indexer':
-  - src/NzbDrone.Core/Indexers/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/NzbDrone.Core/Indexers/**/*
 
 'Area: Notifications':
-  - src/NzbDrone.Core/Notifications/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/NzbDrone.Core/Notifications/**/*
 
 'Area: UI':
-  - frontend/**/*
-  - package.json
-  - yarn.lock
+  - changed-files:
+      - any-glob-to-any-file:
+          - frontend/**/*
+          - package.json
+          - yarn.lock

.github/workflows/label-actions.yml

@@ -18,6 +18,6 @@ jobs:
   action:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/label-actions@v3
+      - uses: dessant/label-actions@v4
         with:
           process-only: 'issues, prs'

.github/workflows/labeler.yml

@@ -9,4 +9,4 @@ jobs:
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/labeler@v4
+      - uses: actions/labeler@v5

.github/workflows/lock.yml

@@ -9,7 +9,7 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@v4
+      - uses: dessant/lock-threads@v5
         with:
           github-token: ${{ github.token }}
           issue-inactive-days: '90'

.gitignore

@@ -127,6 +127,7 @@ coverage*.xml
 coverage*.json
 setup/Output/
 *.~is
+.mono
 
 # VS outout folders
 bin

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "ms-dotnettools.csdevkit",
+    "ms-vscode-remote.remote-containers"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      // Use IntelliSense to find out which attributes exist for C# debugging
+      // Use hover for the description of the existing attributes
+      // For further information visit https://github.com/dotnet/vscode-csharp/blob/main/debugger-launchjson.md
+      "name": "Run Prowlarr",
+      "type": "coreclr",
+      "request": "launch",
+      "preLaunchTask": "build dotnet",
+      // If you have changed target frameworks, make sure to update the program path.
+      "program": "${workspaceFolder}/_output/net6.0/Prowlarr",
+      "args": [],
+      "cwd": "${workspaceFolder}",
+      // For more information about the 'console' field, see https://aka.ms/VSCode-CS-LaunchJson-Console
+      "console": "integratedTerminal",
+      "stopAtEntry": false
+    },
+    {
+      "name": ".NET Core Attach",
+      "type": "coreclr",
+      "request": "attach"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,44 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "build dotnet",
+      "command": "dotnet",
+      "type": "process",
+      "args": [
+        "msbuild",
+        "-restore",
+        "${workspaceFolder}/src/Prowlarr.sln",
+        "-p:GenerateFullPaths=true",
+        "-p:Configuration=Debug",
+        "-p:Platform=Posix",
+        "-consoleloggerparameters:NoSummary;ForceNoAlign"
+      ],
+      "problemMatcher": "$msCompile"
+    },
+    {
+      "label": "publish",
+      "command": "dotnet",
+      "type": "process",
+      "args": [
+        "publish",
+        "${workspaceFolder}/src/Prowlarr.sln",
+        "-property:GenerateFullPaths=true",
+        "-consoleloggerparameters:NoSummary;ForceNoAlign"
+      ],
+      "problemMatcher": "$msCompile"
+    },
+    {
+      "label": "watch",
+      "command": "dotnet",
+      "type": "process",
+      "args": [
+        "watch",
+        "run",
+        "--project",
+        "${workspaceFolder}/src/Prowlarr.sln"
+      ],
+      "problemMatcher": "$msCompile"
+    }
+  ]
+}

Logo/dottrace.svg

@@ -1,33 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="70px" height="70px" viewBox="0 0 70 70" style="enable-background:new 0 0 70 70;" xml:space="preserve">
-<g>
-	<g>
-		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-1.3318" y1="43.7371" x2="67.0419" y2="26.0967">
-			<stop  offset="0.1237" style="stop-color:#7866FF"/>
-			<stop  offset="0.5376" style="stop-color:#FE2EB6"/>
-			<stop  offset="0.8548" style="stop-color:#FD0486"/>
-		</linearGradient>
-		<polygon style="fill:url(#SVGID_1_);" points="67.3,16 43.7,0 0,31.1 11.1,70 58.9,60.3 		"/>
-		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="45.9148" y1="38.9098" x2="67.6577" y2="9.0989">
-			<stop  offset="0.1237" style="stop-color:#FF0080"/>
-			<stop  offset="0.2587" style="stop-color:#FE0385"/>
-			<stop  offset="0.4109" style="stop-color:#FA0C92"/>
-			<stop  offset="0.5713" style="stop-color:#F41BA9"/>
-			<stop  offset="0.7363" style="stop-color:#EB2FC8"/>
-			<stop  offset="0.8656" style="stop-color:#E343E6"/>
-		</linearGradient>
-		<polygon style="fill:url(#SVGID_2_);" points="67.3,16 43.7,0 38,15.7 38,47.8 70,47.8 		"/>
-	</g>
-	<g>
-		<rect x="13.4" y="13.4" style="fill:#000000;" width="43.2" height="43.2"/>
-		<rect x="17.4" y="48.5" style="fill:#FFFFFF;" width="16.2" height="2.7"/>
-		<g>
-			<path style="fill:#FFFFFF;" d="M17.4,19.1h6.9c5.6,0,9.5,3.8,9.5,8.9V28c0,5-3.9,8.9-9.5,8.9h-6.9V19.1z M21.4,22.7v10.7h3
-				c3.2,0,5.4-2.2,5.4-5.3V28c0-3.2-2.2-5.4-5.4-5.4H21.4z"/>
-			<polygon style="fill:#FFFFFF;" points="40.3,22.7 34.9,22.7 34.9,19.1 49.6,19.1 49.6,22.7 44.2,22.7 44.2,37 40.3,37 			"/>
-		</g>
-	</g>
-</g>
-</svg>

Logo/jetbrains.svg

@@ -1,66 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="120.1px" height="130.2px" viewBox="0 0 120.1 130.2" style="enable-background:new 0 0 120.1 130.2;" xml:space="preserve"
-	>
-<g>
-	<linearGradient id="XMLID_2_" gradientUnits="userSpaceOnUse" x1="31.8412" y1="120.5578" x2="110.2402" y2="73.24">
-		<stop  offset="0" style="stop-color:#FCEE39"/>
-		<stop  offset="1" style="stop-color:#F37B3D"/>
-	</linearGradient>
-	<path id="XMLID_3041_" style="fill:url(#XMLID_2_);" d="M118.6,71.8c0.9-0.8,1.4-1.9,1.5-3.2c0.1-2.6-1.8-4.7-4.4-4.9
-		c-1.2-0.1-2.4,0.4-3.3,1.1l0,0l-83.8,45.9c-1.9,0.8-3.6,2.2-4.7,4.1c-2.9,4.8-1.3,11,3.6,13.9c3.4,2,7.5,1.8,10.7-0.2l0,0l0,0
-		c0.2-0.2,0.5-0.3,0.7-0.5l78-54.8C117.3,72.9,118.4,72.1,118.6,71.8L118.6,71.8L118.6,71.8z"/>
-	<linearGradient id="XMLID_3_" gradientUnits="userSpaceOnUse" x1="48.3607" y1="6.9083" x2="119.9179" y2="69.5546">
-		<stop  offset="0" style="stop-color:#EF5A6B"/>
-		<stop  offset="0.57" style="stop-color:#F26F4E"/>
-		<stop  offset="1" style="stop-color:#F37B3D"/>
-	</linearGradient>
-	<path id="XMLID_3049_" style="fill:url(#XMLID_3_);" d="M118.8,65.1L118.8,65.1L55,2.5C53.6,1,51.6,0,49.3,0
-		c-4.3,0-7.7,3.5-7.7,7.7v0c0,2.1,0.8,3.9,2.1,5.3l0,0l0,0c0.4,0.4,0.8,0.7,1.2,1l67.4,57.7l0,0c0.8,0.7,1.8,1.2,3,1.3
-		c2.6,0.1,4.7-1.8,4.9-4.4C120.2,67.3,119.7,66,118.8,65.1z"/>
-	<linearGradient id="XMLID_4_" gradientUnits="userSpaceOnUse" x1="52.9467" y1="63.6407" x2="10.5379" y2="37.1562">
-		<stop  offset="0" style="stop-color:#7C59A4"/>
-		<stop  offset="0.3852" style="stop-color:#AF4C92"/>
-		<stop  offset="0.7654" style="stop-color:#DC4183"/>
-		<stop  offset="0.957" style="stop-color:#ED3D7D"/>
-	</linearGradient>
-	<path id="XMLID_3042_" style="fill:url(#XMLID_4_);" d="M57.1,59.5C57,59.5,17.7,28.5,16.9,28l0,0l0,0c-0.6-0.3-1.2-0.6-1.8-0.9
-		c-5.8-2.2-12.2,0.8-14.4,6.6c-1.9,5.1,0.2,10.7,4.6,13.4l0,0l0,0C6,47.5,6.6,47.8,7.3,48c0.4,0.2,45.4,18.8,45.4,18.8l0,0
-		c1.8,0.8,3.9,0.3,5.1-1.2C59.3,63.7,59,61,57.1,59.5z"/>
-	<linearGradient id="XMLID_5_" gradientUnits="userSpaceOnUse" x1="52.1736" y1="3.7019" x2="10.7706" y2="37.8971">
-		<stop  offset="0" style="stop-color:#EF5A6B"/>
-		<stop  offset="0.364" style="stop-color:#EE4E72"/>
-		<stop  offset="1" style="stop-color:#ED3D7D"/>
-	</linearGradient>
-	<path id="XMLID_3057_" style="fill:url(#XMLID_5_);" d="M49.3,0c-1.7,0-3.3,0.6-4.6,1.5L4.9,28.3c-0.1,0.1-0.2,0.1-0.2,0.2l-0.1,0
-		l0,0c-1.7,1.2-3.1,3-3.9,5.1C-1.5,39.4,1.5,45.9,7.3,48c3.6,1.4,7.5,0.7,10.4-1.4l0,0l0,0c0.7-0.5,1.3-1,1.8-1.6l34.6-31.2l0,0
-		c1.8-1.4,3-3.6,3-6.1v0C57.1,3.5,53.6,0,49.3,0z"/>
-	<g id="XMLID_3008_">
-		<rect id="XMLID_3033_" x="34.6" y="37.4" style="fill:#000000;" width="51" height="51"/>
-		<rect id="XMLID_3032_" x="39" y="78.8" style="fill:#FFFFFF;" width="19.1" height="3.2"/>
-		<g id="XMLID_3009_">
-			<path id="XMLID_3030_" style="fill:#FFFFFF;" d="M38.8,50.8l1.5-1.4c0.4,0.5,0.8,0.8,1.3,0.8c0.6,0,0.9-0.4,0.9-1.2l0-5.3l2.3,0
-				l0,5.3c0,1-0.3,1.8-0.8,2.3c-0.5,0.5-1.3,0.8-2.3,0.8C40.2,52.2,39.4,51.6,38.8,50.8z"/>
-			<path id="XMLID_3028_" style="fill:#FFFFFF;" d="M45.3,43.8l6.7,0v1.9l-4.4,0V47l4,0l0,1.8l-4,0l0,1.3l4.5,0l0,2l-6.7,0
-				L45.3,43.8z"/>
-			<path id="XMLID_3026_" style="fill:#FFFFFF;" d="M55,45.8l-2.5,0l0-2l7.3,0l0,2l-2.5,0l0,6.3l-2.3,0L55,45.8z"/>
-			<path id="XMLID_3022_" style="fill:#FFFFFF;" d="M39,54l4.3,0c1,0,1.8,0.3,2.3,0.7c0.3,0.3,0.5,0.8,0.5,1.4v0
-				c0,1-0.5,1.5-1.3,1.9c1,0.3,1.6,0.9,1.6,2v0c0,1.4-1.2,2.3-3.1,2.3l-4.3,0L39,54z M43.8,56.6c0-0.5-0.4-0.7-1-0.7l-1.5,0l0,1.5
-				l1.4,0C43.4,57.3,43.8,57.1,43.8,56.6L43.8,56.6z M43,59l-1.8,0l0,1.5H43c0.7,0,1.1-0.3,1.1-0.8v0C44.1,59.2,43.7,59,43,59z"/>
-			<path id="XMLID_3019_" style="fill:#FFFFFF;" d="M46.8,54l3.9,0c1.3,0,2.1,0.3,2.7,0.9c0.5,0.5,0.7,1.1,0.7,1.9v0
-				c0,1.3-0.7,2.1-1.7,2.6l2,2.9l-2.6,0l-1.7-2.5h-1l0,2.5l-2.3,0L46.8,54z M50.6,58c0.8,0,1.2-0.4,1.2-1v0c0-0.7-0.5-1-1.2-1
-				l-1.5,0v2H50.6z"/>
-			<path id="XMLID_3016_" style="fill:#FFFFFF;" d="M56.8,54l2.2,0l3.5,8.4l-2.5,0l-0.6-1.5l-3.2,0l-0.6,1.5l-2.4,0L56.8,54z
-				 M58.8,59l-0.9-2.3L57,59L58.8,59z"/>
-			<path id="XMLID_3014_" style="fill:#FFFFFF;" d="M62.8,54l2.3,0l0,8.3l-2.3,0L62.8,54z"/>
-			<path id="XMLID_3012_" style="fill:#FFFFFF;" d="M65.7,54l2.1,0l3.4,4.4l0-4.4l2.3,0l0,8.3l-2,0L68,57.8l0,4.6l-2.3,0L65.7,54z"
-				/>
-			<path id="XMLID_3010_" style="fill:#FFFFFF;" d="M73.7,61.1l1.3-1.5c0.8,0.7,1.7,1,2.7,1c0.6,0,1-0.2,1-0.6v0
-				c0-0.4-0.3-0.5-1.4-0.8c-1.8-0.4-3.1-0.9-3.1-2.6v0c0-1.5,1.2-2.7,3.2-2.7c1.4,0,2.5,0.4,3.4,1.1l-1.2,1.6
-				c-0.8-0.5-1.6-0.8-2.3-0.8c-0.6,0-0.8,0.2-0.8,0.5v0c0,0.4,0.3,0.5,1.4,0.8c1.9,0.4,3.1,1,3.1,2.6v0c0,1.7-1.3,2.7-3.4,2.7
-				C76.1,62.5,74.7,62,73.7,61.1z"/>
-		</g>
-	</g>
-</g>
-</svg>

Logo/resharper.svg

@@ -1,50 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="70px" height="70px" viewBox="0 0 70 70" style="enable-background:new 0 0 70 70;" xml:space="preserve">
-<g>
-	<g>
-		<g>
-			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="22.9451" y1="75.7869" x2="74.7868" y2="20.6415">
-				<stop  offset="1.612903e-002" style="stop-color:#B35BA3"/>
-				<stop  offset="0.4044" style="stop-color:#C41E57"/>
-				<stop  offset="0.4677" style="stop-color:#C41E57"/>
-				<stop  offset="0.6505" style="stop-color:#EB8523"/>
-				<stop  offset="0.9516" style="stop-color:#FEBD11"/>
-			</linearGradient>
-			<polygon style="fill:url(#SVGID_1_);" points="49.8,15.2 36,36.7 58.4,70 70,23.1 			"/>
-			<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="17.7187" y1="73.2922" x2="69.5556" y2="18.1519">
-				<stop  offset="1.612903e-002" style="stop-color:#B35BA3"/>
-				<stop  offset="0.4044" style="stop-color:#C41E57"/>
-				<stop  offset="0.4677" style="stop-color:#C41E57"/>
-				<stop  offset="0.7043" style="stop-color:#EB8523"/>
-			</linearGradient>
-			<polygon style="fill:url(#SVGID_2_);" points="51.1,15.7 49,0 18.8,33.6 27.6,42.3 20.8,70 58.4,70 			"/>
-		</g>
-		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="1.8281" y1="53.4275" x2="48.8245" y2="9.2255">
-			<stop  offset="1.612903e-002" style="stop-color:#B35BA3"/>
-			<stop  offset="0.6613" style="stop-color:#C41E57"/>
-		</linearGradient>
-		<polygon style="fill:url(#SVGID_3_);" points="49,0 11.6,0 0,47.1 55.6,47.1 		"/>
-		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="49.8935" y1="-11.5569" x2="48.8588" y2="24.0352">
-			<stop  offset="0.5" style="stop-color:#C41E57"/>
-			<stop  offset="0.6668" style="stop-color:#D13F48"/>
-			<stop  offset="0.7952" style="stop-color:#D94F39"/>
-			<stop  offset="0.8656" style="stop-color:#DD5433"/>
-		</linearGradient>
-		<polygon style="fill:url(#SVGID_4_);" points="55.3,47.1 51.1,15.7 49,0 41.7,23 		"/>
-	</g>
-	<g>
-		
-			<rect x="13.4" y="13.5" transform="matrix(-1 2.577289e-003 -2.577289e-003 -1 70.0288 70.081)" style="fill:#000000;" width="43.2" height="43.2"/>
-		
-			<rect x="17.6" y="48.6" transform="matrix(1 -2.577289e-003 2.577289e-003 1 -0.1287 6.634109e-002)" style="fill:#FFFFFF;" width="16.2" height="2.7"/>
-		<path style="fill:#FFFFFF;" d="M17.4,19.1l8.2,0c2.3,0,4,0.6,5.2,1.8c1,1,1.5,2.4,1.5,4.1l0,0.1c0,1.5-0.3,2.6-1.1,3.5
-			c-0.7,0.9-1.6,1.6-2.8,2l4.4,6.4l-4.6,0l-3.7-5.5l-3.3,0l0,5.5l-3.9,0L17.4,19.1z M25.3,27.8c1,0,1.7-0.2,2.2-0.7
-			c0.5-0.5,0.8-1.1,0.8-1.8l0-0.1c0-0.9-0.3-1.5-0.8-1.9c-0.5-0.4-1.3-0.6-2.3-0.6l-3.9,0l0,5.1L25.3,27.8z"/>
-		<path style="fill:#FFFFFF;" d="M36,33.2l-1.9,0l0-3.3l2.5,0l0.6-3.8l-2.3,0l0-3.3l2.8,0l0.6-3.7l3.4,0l-0.6,3.7l3.7,0l0.6-3.7
-			l3.4,0l-0.6,3.7l1.9,0l0,3.3l-2.5,0L47,29.9l2.3,0l0,3.3l-2.8,0L45.8,37l-3.4,0l0.7-3.8l-3.7,0L38.7,37l-3.4,0L36,33.2z
-			 M43.7,29.9l0.6-3.8l-3.7,0L40,29.9L43.7,29.9z"/>
-	</g>
-</g>
-</svg>

Logo/rider.svg

@@ -1,42 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="70px" height="70px" viewBox="0 0 70 70" style="enable-background:new 0 0 70 70;" xml:space="preserve">
-  <defs>
-    <linearGradient id="linear-gradient" x1="70.22612" y1="27.79912" x2="-5.13024" y2="63.12242" gradientTransform="matrix(1, 0, 0, -1, 0, 71.27997)" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#c90f5e"/>
-      <stop offset="0.22111" stop-color="#c90f5e"/>
-      <stop offset="0.2356" stop-color="#c90f5e"/>
-      <stop offset="0.35559" stop-color="#ca135c"/>
-      <stop offset="0.46633" stop-color="#ce1e57"/>
-      <stop offset="0.5735" stop-color="#d4314e"/>
-      <stop offset="0.67844" stop-color="#dc4b41"/>
-      <stop offset="0.78179" stop-color="#e66d31"/>
-      <stop offset="0.88253" stop-color="#f3961d"/>
-      <stop offset="0.94241" stop-color="#fcb20f"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient-2" x1="24.65904" y1="61.99608" x2="46.04762" y2="2.93445" gradientTransform="matrix(1, 0, 0, -1, 0, 71.27997)" gradientUnits="userSpaceOnUse">
-      <stop offset="0.04188" stop-color="#077cfb"/>
-      <stop offset="0.44503" stop-color="#c90f5e"/>
-      <stop offset="0.95812" stop-color="#077cfb"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient-3" x1="17.39552" y1="63.34592" x2="33.19389" y2="7.20092" gradientTransform="matrix(1, 0, 0, -1, 0, 71.27997)" gradientUnits="userSpaceOnUse">
-      <stop offset="0.27749" stop-color="#c90f5e"/>
-      <stop offset="0.97382" stop-color="#fcb20f"/>
-    </linearGradient>
-  </defs>
-  <title>rider</title>
-  <g>
-    <polygon points="70 27.237 63.391 23.75 20.926 0 3.827 17.921 21.619 41.068 60.537 44.397 70 27.237" fill="url(#linear-gradient)"/>
-    <polygon points="50.423 16.132 44.271 1.107 27.643 17.471 11.768 50.194 49.411 70 70 57.98 50.423 16.132" fill="url(#linear-gradient-2)"/>
-    <polygon points="20.926 0 0 14.095 7.779 62.172 27.848 69.889 53.78 48.823 20.926 0" fill="url(#linear-gradient-3)"/>
-  </g>
-  <g>
-    <rect x="13.30219" y="13.19311" width="43.61371" height="43.61371"/>
-    <g>
-      <path d="M17.22741,18.86293h8.39564a7.38416,7.38416,0,0,1,5.34268,1.85358,5.86989,5.86989,0,0,1,1.52648,4.1433h0A5.74339,5.74339,0,0,1,28.567,30.5296l4.47041,6.54206H28.34891L24.42368,31.1838h-3.162v5.88785H17.22741V18.86293h0ZM25.296,27.69471c1.96262,0,3.053-1.09034,3.053-2.61682h0c0-1.74455-1.19938-2.61682-3.162-2.61682H21.15265v5.23365H25.296Z" fill="#fff"/>
-      <path d="M36.09034,18.86293H43.2866c5.77882,0,9.70405,3.92523,9.70405,9.15888h0c0,5.12461-3.92523,9.15888-9.70405,9.15888H36.09034V18.86293Zm4.03427,3.59813V33.47352h3.162a5.23727,5.23727,0,0,0,5.56075-5.45171h0a5.26493,5.26493,0,0,0-5.56075-5.56075h-3.162Z" fill="#fff"/>
-    </g>
-    <rect x="17.22741" y="48.62925" width="16.35514" height="2.72586" fill="#fff"/>
-  </g>
-</svg>

Logo/webstorm.svg

@@ -1,36 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="70px" height="70px" viewBox="0 0 70 70" style="enable-background:new 0 0 70 70;" xml:space="preserve">
-<g>
-	<g>
-		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="25.0676" y1="1.4599" x2="43.1829" y2="66.675">
-			<stop  offset="0.2849" style="stop-color:#00CDD7"/>
-			<stop  offset="0.9409" style="stop-color:#2086D7"/>
-		</linearGradient>
-		<polygon style="fill:url(#SVGID_1_);" points="9.4,63.3 0,7.3 17.5,0.1 28.6,6.7 38.8,1.2 60.1,9.4 48.1,70 		"/>
-		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="30.7199" y1="9.7343" x2="61.365" y2="54.6713">
-			<stop  offset="0.1398" style="stop-color:#FFF045"/>
-			<stop  offset="0.3656" style="stop-color:#00CDD7"/>
-		</linearGradient>
-		<polygon style="fill:url(#SVGID_2_);" points="70,23.7 61,1.4 44.6,0 19.3,24.3 26.1,55.6 38.8,64.6 70,46 62.3,31.7 		"/>
-		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="61.0819" y1="15.2899" x2="65.1065" y2="29.5436">
-			<stop  offset="0.2849" style="stop-color:#00CDD7"/>
-			<stop  offset="0.9409" style="stop-color:#2086D7"/>
-		</linearGradient>
-		<polygon style="fill:url(#SVGID_3_);" points="56,20.4 62.3,31.7 70,23.7 64.4,9.8 		"/>
-	</g>
-	<g>
-		<g>
-			<rect x="13.4" y="13.4" style="fill:#000000;" width="43.2" height="43.2"/>
-			<rect x="17.5" y="48.5" style="fill:#FFFFFF;" width="16.2" height="2.7"/>
-			<path style="fill:#FFFFFF;" d="M38.7,34.3l2.3-2.8c1.6,1.3,3.3,2.2,5.3,2.2c1.6,0,2.5-0.6,2.5-1.7v-0.1c0-1-0.6-1.5-3.6-2.3
-				c-3.6-0.9-5.8-1.9-5.8-5.5v-0.1c0-3.3,2.6-5.4,6.2-5.4c2.6,0,4.8,0.8,6.6,2.3l-2,3c-1.6-1.1-3.1-1.8-4.6-1.8
-				c-1.5,0-2.3,0.7-2.3,1.6v0.1c0,1.2,0.8,1.6,3.8,2.4c3.6,1,5.6,2.3,5.6,5.4v0.1c0,3.6-2.7,5.6-6.5,5.6
-				C43.5,37.2,40.8,36.2,38.7,34.3"/>
-		</g>
-		<polygon style="fill:#FFFFFF;" points="35.2,19 32.5,29.4 29.5,19 26.5,19 23.4,29.4 20.7,19 16.6,19 21.7,36.9 25,36.9 28,26.5 
-			30.9,36.9 34.3,36.9 39.4,19 		"/>
-	</g>
-</g>
-</svg>

README.md

@@ -1,8 +1,8 @@
 # Prowlarr
 
 [![Build Status](https://dev.azure.com/Prowlarr/Prowlarr/_apis/build/status/Prowlarr.Prowlarr?branchName=develop)](https://dev.azure.com/Prowlarr/Prowlarr/_build/latest?definitionId=1&branchName=develop)
-[![Translated](https://translate.servarr.com/widgets/servarr/-/prowlarr/svg-badge.svg)](https://translate.servarr.com/engage/prowlarr/?utm_source=widget)
-[![Docker Pulls](https://img.shields.io/docker/pulls/hotio/prowlarr.svg)](https://wiki.servarr.com/prowlarr/installation#docker)
+[![Translation status](https://translate.servarr.com/widget/servarr/prowlarr/svg-badge.svg)](https://translate.servarr.com/engage/servarr/?utm_source=widget)
+[![Docker Pulls](https://img.shields.io/docker/pulls/hotio/prowlarr.svg)](https://wiki.servarr.com/prowlarr/installation/docker)
 ![Github Downloads](https://img.shields.io/github/downloads/Prowlarr/Prowlarr/total.svg)
 [![Backers on Open Collective](https://opencollective.com/Prowlarr/backers/badge.svg)](#backers)
 [![Sponsors on Open Collective](https://opencollective.com/Prowlarr/sponsors/badge.svg)](#sponsors)
@@ -29,7 +29,6 @@ Prowlarr is an indexer manager/proxy built on the popular \*arr .net/reactjs bas
 
 [![Wiki](https://img.shields.io/badge/servarr-wiki-181717.svg?maxAge=60)](https://wiki.servarr.com/prowlarr)
 [![Discord](https://img.shields.io/badge/discord-chat-7289DA.svg?maxAge=60)](https://prowlarr.com/discord)
-[![Reddit](https://img.shields.io/badge/reddit-discussion-FF4500.svg?maxAge=60)](https://www.reddit.com/r/Prowlarr)
 
 Note: GitHub Issues are for Bugs and Feature Requests Only
 
@@ -69,16 +68,16 @@ Support this project by becoming a sponsor. Your logo will show up here with a l
 
 ## JetBrains
 
-Thank you to [<img src="/Logo/jetbrains.svg" alt="JetBrains" width="32"> JetBrains](http://www.jetbrains.com/) for providing us with free licenses to their great tools.
+Thank you to [<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jetbrains.png" alt="JetBrains" width="96">](http://www.jetbrains.com/) for providing us with free licenses to their great tools.
 
-- [<img src="/Logo/resharper.svg" alt="ReSharper" width="32"> ReSharper](http://www.jetbrains.com/resharper/)
-- [<img src="/Logo/webstorm.svg" alt="WebStorm" width="32"> WebStorm](http://www.jetbrains.com/webstorm/)
-- [<img src="/Logo/rider.svg" alt="Rider" width="32"> Rider](http://www.jetbrains.com/rider/)
-- [<img src="/Logo/dottrace.svg" alt="dotTrace" width="32"> dotTrace](http://www.jetbrains.com/dottrace/)
+* [<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/ReSharper_icon.png" alt="ReSharper" width="32"> ReSharper](http://www.jetbrains.com/resharper/)
+* [<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/WebStorm_icon.png" alt="WebStorm" width="32"> WebStorm](http://www.jetbrains.com/webstorm/)
+* [<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/Rider_icon.png" alt="Rider" width="32"> Rider](http://www.jetbrains.com/rider/)
+* [<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/dotTrace_icon.png" alt="dotTrace" width="32"> dotTrace](http://www.jetbrains.com/dottrace/)
 
 ### License
 
 - [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)
-- Copyright 2010-2022
+- Copyright 2010-2024
 
 Icon Credit - [Box vector created by freepik - www.freepik.com](https://www.freepik.com/vectors/box)

azure-pipelines.yml

@@ -9,24 +9,28 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '1.5.1'
+  majorVersion: '1.35.0'
   minorVersion: $[counter('minorVersion', 1)]
   prowlarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(prowlarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.408'
-  innoVersion: '6.2.0'
-  nodeVersion: '16.x'
+  dotnetVersion: '6.0.427'
+  nodeVersion: '20.X'
+  innoVersion: '6.2.2'
   windowsImage: 'windows-2022'
-  linuxImage: 'ubuntu-20.04'
-  macImage: 'macOS-11'
+  linuxImage: 'ubuntu-22.04'
+  macImage: 'macOS-13'
 
 trigger:
   branches:
     include:
     - develop
     - master
+  paths:
+    exclude:
+      - .github
+      - src/Prowlarr.Api.*/openapi.json
 
 pr:
   branches:
@@ -34,8 +38,9 @@ pr:
     - develop
   paths:
     exclude:
+    - .github
     - src/NzbDrone.Core/Localization/Core
-    - src/Prowlarr.API.*/openapi.json
+    - src/Prowlarr.Api.*/openapi.json
 
 stages:
   - stage: Setup
@@ -161,10 +166,10 @@ stages:
       pool:
         vmImage: $(imageName)
       steps:
-      - task: NodeTool@0
+      - task: UseNode@1
         displayName: Set Node.js version
         inputs:
-          versionSpec: $(nodeVersion)
+          version: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -349,7 +354,7 @@ stages:
           includeRootFolder: false
           rootFolderOrFile: $(artifactsFolder)/linux-musl-arm64/net6.0
       - task: ArchiveFiles@2
-        displayName: Create FreeBSD Core Core tar
+        displayName: Create freebsd-x64 tar
         inputs:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).freebsd-core-x64.tar.gz'
           archiveType: 'tar'
@@ -362,7 +367,7 @@ stages:
       - bash: |
           echo "Uploading source maps to sentry"
           curl -sL https://sentry.io/get-cli/ | bash
-          RELEASENAME="${PROWLARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
+          RELEASENAME="Prowlarr@${PROWLARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
           sentry-cli releases new --finalize -p prowlarr -p prowlarr-ui -p prowlarr-update "${RELEASENAME}"
           sentry-cli releases -p prowlarr-ui files "${RELEASENAME}" upload-sourcemaps _output/UI/ --rewrite
           sentry-cli releases set-commits --auto "${RELEASENAME}"
@@ -528,8 +533,8 @@ stages:
           testRunTitle: '$(testName) Unit Tests'
           failTaskOnFailedTests: true
           
-    - job: Unit_LinuxCore_Postgres
-      displayName: Unit Native LinuxCore with Postgres Database
+    - job: Unit_LinuxCore_Postgres14
+      displayName: Unit Native LinuxCore with Postgres14 Database
       dependsOn: Prepare
       condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       variables:
@@ -565,6 +570,7 @@ stages:
           -e POSTGRES_PASSWORD=prowlarr \
           -e POSTGRES_USER=prowlarr \
           -p 5432:5432/tcp \
+          -v /usr/share/zoneinfo/America/Chicago:/etc/localtime:ro \
           postgres:14
         displayName: Start postgres
       - bash: |
@@ -577,7 +583,60 @@ stages:
         inputs:
           testResultsFormat: 'NUnit'
           testResultsFiles: '**/TestResult.xml'
-          testRunTitle: 'LinuxCore Postgres Unit Tests'
+          testRunTitle: 'LinuxCore Postgres14 Unit Tests'
+          failTaskOnFailedTests: true
+
+    - job: Unit_LinuxCore_Postgres15
+      displayName: Unit Native LinuxCore with Postgres15 Database
+      dependsOn: Prepare
+      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
+      variables:
+        pattern: 'Prowlarr.*.linux-core-x64.tar.gz'
+        artifactName: linux-x64-tests
+        Prowlarr__Postgres__Host: 'localhost'
+        Prowlarr__Postgres__Port: '5432'
+        Prowlarr__Postgres__User: 'prowlarr'
+        Prowlarr__Postgres__Password: 'prowlarr'
+  
+      pool:
+        vmImage: ${{ variables.linuxImage }}
+
+      timeoutInMinutes: 10
+        
+      steps:
+      - task: UseDotNet@2
+        displayName: 'Install .net core'
+        inputs:
+          version: $(dotnetVersion)
+      - checkout: none
+      - task: DownloadPipelineArtifact@2
+        displayName: Download Test Artifact
+        inputs:
+          buildType: 'current'
+          artifactName: $(artifactName)
+          targetPath: $(testsFolder)
+      - bash: find ${TESTSFOLDER} -name "Prowlarr.Test.Dummy" -exec chmod a+x {} \;
+        displayName: Make Test Dummy Executable
+        condition: and(succeeded(), ne(variables['osName'], 'Windows'))
+      - bash: |
+          docker run -d --name=postgres15 \
+          -e POSTGRES_PASSWORD=prowlarr \
+          -e POSTGRES_USER=prowlarr \
+          -p 5432:5432/tcp \
+          -v /usr/share/zoneinfo/America/Chicago:/etc/localtime:ro \
+          postgres:15
+        displayName: Start postgres
+      - bash: |
+          chmod a+x ${TESTSFOLDER}/test.sh
+          ls -lR ${TESTSFOLDER}
+          ${TESTSFOLDER}/test.sh Linux Unit Test
+        displayName: Run Tests
+      - task: PublishTestResults@2
+        displayName: Publish Test Results
+        inputs:
+          testResultsFormat: 'NUnit'
+          testResultsFiles: '**/TestResult.xml'
+          testRunTitle: 'LinuxCore Postgres15 Unit Tests'
           failTaskOnFailedTests: true
 
   - stage: Integration
@@ -663,8 +722,8 @@ stages:
           failTaskOnFailedTests: true
         displayName: Publish Test Results
 
-    - job: Integration_LinuxCore_Postgres
-      displayName: Integration Native LinuxCore with Postgres Database
+    - job: Integration_LinuxCore_Postgres14
+      displayName: Integration Native LinuxCore with Postgres14 Database
       dependsOn: Prepare
       condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       variables:
@@ -710,6 +769,7 @@ stages:
             -e POSTGRES_PASSWORD=prowlarr \
             -e POSTGRES_USER=prowlarr \
             -p 5432:5432/tcp \
+            -v /usr/share/zoneinfo/America/Chicago:/etc/localtime:ro \
             postgres:14
           displayName: Start postgres
         - bash: |
@@ -720,7 +780,70 @@ stages:
           inputs:
             testResultsFormat: 'NUnit'
             testResultsFiles: '**/TestResult.xml'
-            testRunTitle: 'Integration LinuxCore Postgres Database Integration Tests'
+            testRunTitle: 'Integration LinuxCore Postgres14 Database Integration Tests'
+            failTaskOnFailedTests: true
+          displayName: Publish Test Results
+
+
+    - job: Integration_LinuxCore_Postgres15
+      displayName: Integration Native LinuxCore with Postgres Database
+      dependsOn: Prepare
+      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
+      variables:
+        pattern: 'Prowlarr.*.linux-core-x64.tar.gz'
+        Prowlarr__Postgres__Host: 'localhost'
+        Prowlarr__Postgres__Port: '5432'
+        Prowlarr__Postgres__User: 'prowlarr'
+        Prowlarr__Postgres__Password: 'prowlarr'
+
+      pool:
+        vmImage: ${{ variables.linuxImage }}
+
+      steps:
+        - task: UseDotNet@2
+          displayName: 'Install .net core'
+          inputs:
+            version: $(dotnetVersion)
+        - checkout: none
+        - task: DownloadPipelineArtifact@2
+          displayName: Download Test Artifact
+          inputs:
+            buildType: 'current'
+            artifactName: 'linux-x64-tests'
+            targetPath: $(testsFolder)
+        - task: DownloadPipelineArtifact@2
+          displayName: Download Build Artifact
+          inputs:
+            buildType: 'current'
+            artifactName: Packages
+            itemPattern: '**/$(pattern)'
+            targetPath: $(Build.ArtifactStagingDirectory)
+        - task: ExtractFiles@1
+          inputs:
+            archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)' 
+            destinationFolder: '$(Build.ArtifactStagingDirectory)/bin'
+          displayName: Extract Package
+        - bash: |
+            mkdir -p ./bin/
+            cp -r -v ${BUILD_ARTIFACTSTAGINGDIRECTORY}/bin/Prowlarr/. ./bin/
+          displayName: Move Package Contents
+        - bash: |
+            docker run -d --name=postgres15 \
+            -e POSTGRES_PASSWORD=prowlarr \
+            -e POSTGRES_USER=prowlarr \
+            -p 5432:5432/tcp \
+            -v /usr/share/zoneinfo/America/Chicago:/etc/localtime:ro \
+            postgres:15
+          displayName: Start postgres
+        - bash: |
+            chmod a+x ${TESTSFOLDER}/test.sh
+            ${TESTSFOLDER}/test.sh Linux Integration Test
+          displayName: Run Integration Tests
+        - task: PublishTestResults@2
+          inputs:
+            testResultsFormat: 'NUnit'
+            testResultsFiles: '**/TestResult.xml'
+            testRunTitle: 'Integration LinuxCore Postgres15 Database Integration Tests'
             failTaskOnFailedTests: true
           displayName: Publish Test Results
 
@@ -952,10 +1075,10 @@ stages:
       pool:
         vmImage: $(imageName)
       steps:
-      - task: NodeTool@0
+      - task: UseNode@1
         displayName: Set Node.js version
         inputs:
-          versionSpec: $(nodeVersion)
+          version: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -1046,12 +1169,12 @@ stages:
         submodules: true
       - powershell: Set-Service SCardSvr -StartupType Manual
         displayName: Enable Windows Test Service
-      - task: SonarCloudPrepare@1
+      - task: SonarCloudPrepare@3
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         inputs:
           SonarCloud: 'SonarCloud'
           organization: 'prowlarr'
-          scannerMode: 'MSBuild'
+          scannerMode: 'dotnet'
           projectKey: 'Prowlarr_Prowlarr'
           projectName: 'Prowlarr'
           projectVersion: '$(prowlarrVersion)'
@@ -1064,25 +1187,21 @@ stages:
           ./build.sh --backend -f net6.0 -r win-x64
           TEST_DIR=_tests/net6.0/win-x64/publish/ ./test.sh Windows Unit Coverage
         displayName: Coverage Unit Tests
-      - task: SonarCloudAnalyze@1
+      - task: SonarCloudAnalyze@3
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         displayName: Publish SonarCloud Results
-      - task: reportgenerator@4
+      - task: reportgenerator@5.3.11
         displayName: Generate Coverage Report
         inputs:
           reports: '$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml'
           targetdir: '$(Build.SourcesDirectory)/CoverageResults/combined'
           reporttypes: 'HtmlInline_AzurePipelines;Cobertura;Badges'
-      - task: PublishCodeCoverageResults@1
-        displayName: Publish Coverage Report
-        inputs:
-          codeCoverageTool: 'cobertura'
-          summaryFileLocation: './CoverageResults/combined/Cobertura.xml'
-          reportDirectory: './CoverageResults/combined/'
+          publishCodeCoverageResults: true
 
   - stage: Report_Out
     dependsOn:
     - Analyze
+    - Installer
     - Unit_Test
     - Integration
     - Automation

build.sh

@@ -254,7 +254,7 @@ InstallInno()
     ProgressStart "Installing portable Inno Setup"
     
     rm -rf _inno
-    curl -s --output innosetup.exe "https://files.jrsoftware.org/is/6/innosetup-${INNOVERSION:-6.2.0}.exe"
+    curl -s --output innosetup.exe "https://files.jrsoftware.org/is/6/innosetup-${INNOVERSION:-6.2.2}.exe"
     mkdir _inno
     ./innosetup.exe //portable=1 //silent //currentuser //dir=.\\_inno
     rm innosetup.exe
@@ -392,22 +392,21 @@ then
     fi
 fi
 
-if [ "$FRONTEND" = "YES" ];
+if [[ "$LINT" = "YES" || "$FRONTEND" = "YES" ]];
 then
     YarnInstall
-    RunWebpack
 fi
 
 if [ "$LINT" = "YES" ];
 then
-    if [ -z "$FRONTEND" ];
-    then
-        YarnInstall
-    fi
-    
     LintUI
 fi
 
+if [ "$FRONTEND" = "YES" ];
+then
+    RunWebpack
+fi
+
 if [ "$PACKAGES" = "YES" ];
 then
     UpdateVersionNumber

docs.sh

@@ -1,13 +1,18 @@
+#!/bin/bash
+set -e
+
+FRAMEWORK="net6.0"
 PLATFORM=$1
+ARCHITECTURE="${2:-x64}"
 
 if [ "$PLATFORM" = "Windows" ]; then
-  RUNTIME="win-x64"
+  RUNTIME="win-$ARCHITECTURE"
 elif [ "$PLATFORM" = "Linux" ]; then
-  RUNTIME="linux-x64"
+  RUNTIME="linux-$ARCHITECTURE"
 elif [ "$PLATFORM" = "Mac" ]; then
-  RUNTIME="osx-x64"
+  RUNTIME="osx-$ARCHITECTURE"
 else
-  echo "Platform must be provided as first arguement: Windows, Linux or Mac"
+  echo "Platform must be provided as first argument: Windows, Linux or Mac"
   exit 1
 fi
 
@@ -21,17 +26,23 @@ slnFile=src/Prowlarr.sln
 
 platform=Posix
 
+ if [ "$PLATFORM" = "Windows" ]; then
+    application=Prowlarr.Console.dll
+else
+    application=Prowlarr.dll
+fi
+
 dotnet clean $slnFile -c Debug
 dotnet clean $slnFile -c Release
 
 dotnet msbuild -restore $slnFile -p:Configuration=Debug -p:Platform=$platform -p:RuntimeIdentifiers=$RUNTIME -t:PublishAllRids
 
 dotnet new tool-manifest
-dotnet tool install --version 6.5.0 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 7.3.2 Swashbuckle.AspNetCore.Cli
 
-dotnet tool run swagger tofile --output ./src/Prowlarr.Api.V1/openapi.json "$outputFolder/net6.0/$RUNTIME/prowlarr.console.dll" v1 &
+dotnet tool run swagger tofile --output ./src/Prowlarr.Api.V1/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/$application" v1 &
 
-sleep 30
+sleep 45
 
 kill %1
 

frontend/.eslintrc.js

@@ -26,7 +26,8 @@ module.exports = {
   globals: {
     expect: false,
     chai: false,
-    sinon: false
+    sinon: false,
+    JSX: true
   },
 
   parserOptions: {
@@ -356,11 +357,16 @@ module.exports = {
       ],
 
       rules: Object.assign(typescriptEslintRecommended.rules, {
-        'no-shadow': 'off',
-        // These should be enabled after cleaning things up
-        '@typescript-eslint/no-unused-vars': 'warn',
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            args: 'after-used',
+            argsIgnorePattern: '^_',
+            ignoreRestSiblings: true
+          }
+        ],
         '@typescript-eslint/explicit-function-return-type': 'off',
-        'react/prop-types': 'off',
+        'no-shadow': 'off',
         'prettier/prettier': 'error',
         'simple-import-sort/imports': [
           'error',
@@ -373,7 +379,41 @@ module.exports = {
               ['^@?\\w', `^(${dirs})(/.*|$)`, '^\\.', '^\\..*css$']
             ]
           }
-        ]
+        ],
+
+        // React Hooks
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'error',
+
+        // React
+        'react/function-component-definition': 'error',
+        'react/hook-use-state': 'error',
+        'react/jsx-boolean-value': ['error', 'always'],
+        'react/jsx-curly-brace-presence': [
+          'error',
+          { props: 'never', children: 'never' }
+        ],
+        'react/jsx-fragments': 'error',
+        'react/jsx-handler-names': [
+          'error',
+          {
+            eventHandlerPrefix: 'on',
+            eventHandlerPropPrefix: 'on'
+          }
+        ],
+        'react/jsx-no-bind': ['error', { ignoreRefs: true }],
+        'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
+        'react/jsx-pascal-case': ['error', { allowAllCaps: true }],
+        'react/jsx-sort-props': [
+          'error',
+          {
+            callbacksLast: true,
+            noSortAlphabetically: true,
+            reservedFirst: true
+          }
+        ],
+        'react/prop-types': 'off',
+        'react/self-closing-comp': 'error'
       })
     },
     {

frontend/babel.config.js

@@ -2,16 +2,18 @@ const loose = true;
 
 module.exports = {
   plugins: [
+    '@babel/plugin-transform-logical-assignment-operators',
+
     // Stage 1
     '@babel/plugin-proposal-export-default-from',
-    ['@babel/plugin-proposal-optional-chaining', { loose }],
-    ['@babel/plugin-proposal-nullish-coalescing-operator', { loose }],
+    ['@babel/plugin-transform-optional-chaining', { loose }],
+    ['@babel/plugin-transform-nullish-coalescing-operator', { loose }],
 
     // Stage 2
-    '@babel/plugin-proposal-export-namespace-from',
+    '@babel/plugin-transform-export-namespace-from',
 
     // Stage 3
-    ['@babel/plugin-proposal-class-properties', { loose }],
+    ['@babel/plugin-transform-class-properties', { loose }],
     '@babel/plugin-syntax-dynamic-import'
   ],
   env: {

frontend/build/webpack.config.js

@@ -25,6 +25,7 @@ module.exports = (env) => {
   const config = {
     mode: isProduction ? 'production' : 'development',
     devtool: isProduction ? 'source-map' : 'eval-source-map',
+    target: 'web',
 
     stats: {
       children: false
@@ -35,7 +36,7 @@ module.exports = (env) => {
     },
 
     entry: {
-      index: 'index.js'
+      index: 'index.ts'
     },
 
     resolve: {
@@ -65,23 +66,23 @@ module.exports = (env) => {
     output: {
       path: distFolder,
       publicPath: '/',
-      filename: '[name].js',
+      filename: isProduction ? '[name]-[contenthash].js' : '[name].js',
       sourceMapFilename: '[file].map'
     },
 
     optimization: {
       moduleIds: 'deterministic',
-      chunkIds: 'named',
-      splitChunks: {
-        chunks: 'initial',
-        name: 'vendors'
-      }
+      chunkIds: isProduction ? 'deterministic' : 'named'
     },
 
     performance: {
       hints: false
     },
 
+    experiments: {
+      topLevelAwait: true
+    },
+
     plugins: [
       new webpack.DefinePlugin({
         __DEV__: !isProduction,
@@ -89,13 +90,15 @@ module.exports = (env) => {
       }),
 
       new MiniCssExtractPlugin({
-        filename: 'Content/styles.css'
+        filename: 'Content/styles.css',
+        chunkFilename: isProduction ? 'Content/[id]-[chunkhash].css' : 'Content/[id].css'
       }),
 
       new HtmlWebpackPlugin({
         template: 'frontend/src/index.ejs',
         filename: 'index.html',
-        publicPath: '/'
+        publicPath: '/',
+        inject: false
       }),
 
       new FileManagerPlugin({
@@ -167,7 +170,7 @@ module.exports = (env) => {
                       loose: true,
                       debug: false,
                       useBuiltIns: 'entry',
-                      corejs: 3
+                      corejs: '3.39'
                     }
                   ]
                 ]
@@ -188,7 +191,7 @@ module.exports = (env) => {
               options: {
                 importLoaders: 1,
                 modules: {
-                  localIdentName: '[name]/[local]/[hash:base64:5]'
+                  localIdentName: isProduction ? '[name]/[local]/[hash:base64:5]' : '[name]/[local]'
                 }
               }
             },

frontend/postcss.config.js

@@ -16,6 +16,7 @@ const mixinsFiles = [
 
 module.exports = {
   plugins: [
+    'autoprefixer',
     ['postcss-mixins', {
       mixinsFiles
     }],

frontend/src/App/App.tsx

@@ -1,31 +1,30 @@
-import { ConnectedRouter } from 'connected-react-router';
-import PropTypes from 'prop-types';
+import { ConnectedRouter, ConnectedRouterProps } from 'connected-react-router';
 import React from 'react';
 import DocumentTitle from 'react-document-title';
 import { Provider } from 'react-redux';
+import { Store } from 'redux';
 import PageConnector from 'Components/Page/PageConnector';
 import ApplyTheme from './ApplyTheme';
 import AppRoutes from './AppRoutes';
 
-function App({ store, history }) {
+interface AppProps {
+  store: Store;
+  history: ConnectedRouterProps['history'];
+}
+
+function App({ store, history }: AppProps) {
   return (
     <DocumentTitle title={window.Prowlarr.instanceName}>
       <Provider store={store}>
         <ConnectedRouter history={history}>
-          <ApplyTheme>
-            <PageConnector>
-              <AppRoutes app={App} />
-            </PageConnector>
-          </ApplyTheme>
+          <ApplyTheme />
+          <PageConnector>
+            <AppRoutes />
+          </PageConnector>
         </ConnectedRouter>
       </Provider>
     </DocumentTitle>
   );
 }
 
-App.propTypes = {
-  store: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired
-};
-
 export default App;

frontend/src/App/AppRoutes.js

@@ -1,184 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Redirect, Route } from 'react-router-dom';
-import NotFound from 'Components/NotFound';
-import Switch from 'Components/Router/Switch';
-import HistoryConnector from 'History/HistoryConnector';
-import IndexerIndex from 'Indexer/Index/IndexerIndex';
-import StatsConnector from 'Indexer/Stats/StatsConnector';
-import SearchIndexConnector from 'Search/SearchIndexConnector';
-import ApplicationSettingsConnector from 'Settings/Applications/ApplicationSettingsConnector';
-import DevelopmentSettingsConnector from 'Settings/Development/DevelopmentSettingsConnector';
-import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
-import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
-import IndexerSettings from 'Settings/Indexers/IndexerSettings';
-import NotificationSettings from 'Settings/Notifications/NotificationSettings';
-import Settings from 'Settings/Settings';
-import TagSettings from 'Settings/Tags/TagSettings';
-import UISettingsConnector from 'Settings/UI/UISettingsConnector';
-import BackupsConnector from 'System/Backup/BackupsConnector';
-import LogsTableConnector from 'System/Events/LogsTableConnector';
-import Logs from 'System/Logs/Logs';
-import Status from 'System/Status/Status';
-import Tasks from 'System/Tasks/Tasks';
-import UpdatesConnector from 'System/Updates/UpdatesConnector';
-import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
-
-function AppRoutes(props) {
-  const {
-    app
-  } = props;
-
-  return (
-    <Switch>
-      {/*
-        Indexers
-      */}
-
-      <Route
-        exact={true}
-        path="/"
-        component={IndexerIndex}
-      />
-
-      {
-        window.Prowlarr.urlBase &&
-          <Route
-            exact={true}
-            path="/"
-            addUrlBase={false}
-            render={() => {
-              return (
-                <Redirect
-                  to={getPathWithUrlBase('/')}
-                  component={app}
-                />
-              );
-            }}
-          />
-      }
-
-      <Route
-        path="/indexers/stats"
-        component={StatsConnector}
-      />
-
-      {/*
-        Search
-      */}
-
-      <Route
-        path="/search"
-        component={SearchIndexConnector}
-      />
-
-      {/*
-        Activity
-      */}
-
-      <Route
-        path="/history"
-        component={HistoryConnector}
-      />
-
-      {/*
-        Settings
-      */}
-
-      <Route
-        exact={true}
-        path="/settings"
-        component={Settings}
-      />
-
-      <Route
-        path="/settings/indexers"
-        component={IndexerSettings}
-      />
-
-      <Route
-        path="/settings/applications"
-        component={ApplicationSettingsConnector}
-      />
-
-      <Route
-        path="/settings/downloadclients"
-        component={DownloadClientSettingsConnector}
-      />
-
-      <Route
-        path="/settings/connect"
-        component={NotificationSettings}
-      />
-
-      <Route
-        path="/settings/tags"
-        component={TagSettings}
-      />
-
-      <Route
-        path="/settings/general"
-        component={GeneralSettingsConnector}
-      />
-
-      <Route
-        path="/settings/ui"
-        component={UISettingsConnector}
-      />
-
-      <Route
-        path="/settings/development"
-        component={DevelopmentSettingsConnector}
-      />
-
-      {/*
-        System
-      */}
-
-      <Route
-        path="/system/status"
-        component={Status}
-      />
-
-      <Route
-        path="/system/tasks"
-        component={Tasks}
-      />
-
-      <Route
-        path="/system/backup"
-        component={BackupsConnector}
-      />
-
-      <Route
-        path="/system/updates"
-        component={UpdatesConnector}
-      />
-
-      <Route
-        path="/system/events"
-        component={LogsTableConnector}
-      />
-
-      <Route
-        path="/system/logs/files"
-        component={Logs}
-      />
-
-      {/*
-        Not Found
-      */}
-
-      <Route
-        path="*"
-        component={NotFound}
-      />
-    </Switch>
-  );
-}
-
-AppRoutes.propTypes = {
-  app: PropTypes.func.isRequired
-};
-
-export default AppRoutes;

frontend/src/App/AppRoutes.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import NotFound from 'Components/NotFound';
+import Switch from 'Components/Router/Switch';
+import HistoryConnector from 'History/HistoryConnector';
+import IndexerIndex from 'Indexer/Index/IndexerIndex';
+import IndexerStats from 'Indexer/Stats/IndexerStats';
+import SearchIndexConnector from 'Search/SearchIndexConnector';
+import ApplicationSettings from 'Settings/Applications/ApplicationSettings';
+import DevelopmentSettingsConnector from 'Settings/Development/DevelopmentSettingsConnector';
+import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
+import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
+import IndexerSettings from 'Settings/Indexers/IndexerSettings';
+import NotificationSettings from 'Settings/Notifications/NotificationSettings';
+import Settings from 'Settings/Settings';
+import TagSettings from 'Settings/Tags/TagSettings';
+import UISettingsConnector from 'Settings/UI/UISettingsConnector';
+import BackupsConnector from 'System/Backup/BackupsConnector';
+import LogsTableConnector from 'System/Events/LogsTableConnector';
+import Logs from 'System/Logs/Logs';
+import Status from 'System/Status/Status';
+import Tasks from 'System/Tasks/Tasks';
+import Updates from 'System/Updates/Updates';
+import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
+
+function RedirectWithUrlBase() {
+  return <Redirect to={getPathWithUrlBase('/')} />;
+}
+
+function AppRoutes() {
+  return (
+    <Switch>
+      {/*
+        Indexers
+      */}
+
+      <Route exact={true} path="/" component={IndexerIndex} />
+
+      {window.Prowlarr.urlBase && (
+        <Route
+          exact={true}
+          path="/"
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          addUrlBase={false}
+          render={RedirectWithUrlBase}
+        />
+      )}
+
+      <Route path="/indexers/stats" component={IndexerStats} />
+
+      {/*
+        Search
+      */}
+
+      <Route path="/search" component={SearchIndexConnector} />
+
+      {/*
+        Activity
+      */}
+
+      <Route path="/history" component={HistoryConnector} />
+
+      {/*
+        Settings
+      */}
+
+      <Route exact={true} path="/settings" component={Settings} />
+
+      <Route path="/settings/indexers" component={IndexerSettings} />
+
+      <Route path="/settings/applications" component={ApplicationSettings} />
+
+      <Route
+        path="/settings/downloadclients"
+        component={DownloadClientSettingsConnector}
+      />
+
+      <Route path="/settings/connect" component={NotificationSettings} />
+
+      <Route path="/settings/tags" component={TagSettings} />
+
+      <Route path="/settings/general" component={GeneralSettingsConnector} />
+
+      <Route path="/settings/ui" component={UISettingsConnector} />
+
+      <Route
+        path="/settings/development"
+        component={DevelopmentSettingsConnector}
+      />
+
+      {/*
+        System
+      */}
+
+      <Route path="/system/status" component={Status} />
+
+      <Route path="/system/tasks" component={Tasks} />
+
+      <Route path="/system/backup" component={BackupsConnector} />
+
+      <Route path="/system/updates" component={Updates} />
+
+      <Route path="/system/events" component={LogsTableConnector} />
+
+      <Route path="/system/logs/files" component={Logs} />
+
+      {/*
+        Not Found
+      */}
+
+      <Route path="*" component={NotFound} />
+    </Switch>
+  );
+}
+
+export default AppRoutes;

frontend/src/App/AppUpdatedModal.js

@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import AppUpdatedModalContentConnector from './AppUpdatedModalContentConnector';
-
-function AppUpdatedModal(props) {
-  const {
-    isOpen,
-    onModalClose
-  } = props;
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      closeOnBackgroundClick={false}
-      onModalClose={onModalClose}
-    >
-      <AppUpdatedModalContentConnector
-        onModalClose={onModalClose}
-      />
-    </Modal>
-  );
-}
-
-AppUpdatedModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default AppUpdatedModal;

frontend/src/App/AppUpdatedModal.tsx

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+import Modal from 'Components/Modal/Modal';
+import AppUpdatedModalContent from './AppUpdatedModalContent';
+
+interface AppUpdatedModalProps {
+  isOpen: boolean;
+  onModalClose: (...args: unknown[]) => unknown;
+}
+
+function AppUpdatedModal(props: AppUpdatedModalProps) {
+  const { isOpen, onModalClose } = props;
+
+  const handleModalClose = useCallback(() => {
+    location.reload();
+  }, []);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      closeOnBackgroundClick={false}
+      onModalClose={onModalClose}
+    >
+      <AppUpdatedModalContent onModalClose={handleModalClose} />
+    </Modal>
+  );
+}
+
+export default AppUpdatedModal;

frontend/src/App/AppUpdatedModalConnector.js

@@ -1,12 +0,0 @@
-import { connect } from 'react-redux';
-import AppUpdatedModal from './AppUpdatedModal';
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onModalClose() {
-      location.reload();
-    }
-  };
-}
-
-export default connect(null, createMapDispatchToProps)(AppUpdatedModal);

frontend/src/App/AppUpdatedModalContent.css

@@ -1,6 +1,7 @@
 .version {
   margin: 0 3px;
   font-weight: bold;
+  font-family: var(--defaultFontFamily);
 }
 
 .maintenance {

frontend/src/App/AppUpdatedModalContent.js

@@ -1,140 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Button from 'Components/Link/Button';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import ModalBody from 'Components/Modal/ModalBody';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalFooter from 'Components/Modal/ModalFooter';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import { kinds } from 'Helpers/Props';
-import UpdateChanges from 'System/Updates/UpdateChanges';
-import translate from 'Utilities/String/translate';
-import styles from './AppUpdatedModalContent.css';
-
-function mergeUpdates(items, version, prevVersion) {
-  let installedIndex = items.findIndex((u) => u.version === version);
-  let installedPreviouslyIndex = items.findIndex((u) => u.version === prevVersion);
-
-  if (installedIndex === -1) {
-    installedIndex = 0;
-  }
-
-  if (installedPreviouslyIndex === -1) {
-    installedPreviouslyIndex = items.length;
-  } else if (installedPreviouslyIndex === installedIndex && items.length) {
-    installedPreviouslyIndex += 1;
-  }
-
-  const appliedUpdates = items.slice(installedIndex, installedPreviouslyIndex);
-
-  if (!appliedUpdates.length) {
-    return null;
-  }
-
-  const appliedChanges = { new: [], fixed: [] };
-  appliedUpdates.forEach((u) => {
-    if (u.changes) {
-      appliedChanges.new.push(... u.changes.new);
-      appliedChanges.fixed.push(... u.changes.fixed);
-    }
-  });
-
-  const mergedUpdate = Object.assign({}, appliedUpdates[0], { changes: appliedChanges });
-
-  if (!appliedChanges.new.length && !appliedChanges.fixed.length) {
-    mergedUpdate.changes = null;
-  }
-
-  return mergedUpdate;
-}
-
-function AppUpdatedModalContent(props) {
-  const {
-    version,
-    prevVersion,
-    isPopulated,
-    error,
-    items,
-    onSeeChangesPress,
-    onModalClose
-  } = props;
-
-  const update = mergeUpdates(items, version, prevVersion);
-
-  return (
-    <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>
-        Prowlarr Updated
-      </ModalHeader>
-
-      <ModalBody>
-        <div>
-          Version <span className={styles.version}>{version}</span> of Prowlarr has been installed, in order to get the latest changes you'll need to reload Prowlarr.
-        </div>
-
-        {
-          isPopulated && !error && !!update &&
-            <div>
-              {
-                !update.changes &&
-                  <div className={styles.maintenance}>
-                    {translate('MaintenanceRelease')}
-                  </div>
-              }
-
-              {
-                !!update.changes &&
-                  <div>
-                    <div className={styles.changes}>
-                      What's new?
-                    </div>
-
-                    <UpdateChanges
-                      title={translate('New')}
-                      changes={update.changes.new}
-                    />
-
-                    <UpdateChanges
-                      title={translate('Fixed')}
-                      changes={update.changes.fixed}
-                    />
-                  </div>
-              }
-            </div>
-        }
-
-        {
-          !isPopulated && !error &&
-            <LoadingIndicator />
-        }
-      </ModalBody>
-
-      <ModalFooter>
-        <Button
-          onPress={onSeeChangesPress}
-        >
-          Recent Changes
-        </Button>
-
-        <Button
-          kind={kinds.PRIMARY}
-          onPress={onModalClose}
-        >
-          Reload
-        </Button>
-      </ModalFooter>
-    </ModalContent>
-  );
-}
-
-AppUpdatedModalContent.propTypes = {
-  version: PropTypes.string.isRequired,
-  prevVersion: PropTypes.string,
-  isPopulated: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onSeeChangesPress: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default AppUpdatedModalContent;

frontend/src/App/AppUpdatedModalContent.tsx

@@ -0,0 +1,145 @@
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { kinds } from 'Helpers/Props';
+import { fetchUpdates } from 'Store/Actions/systemActions';
+import UpdateChanges from 'System/Updates/UpdateChanges';
+import Update from 'typings/Update';
+import translate from 'Utilities/String/translate';
+import AppState from './State/AppState';
+import styles from './AppUpdatedModalContent.css';
+
+function mergeUpdates(items: Update[], version: string, prevVersion?: string) {
+  let installedIndex = items.findIndex((u) => u.version === version);
+  let installedPreviouslyIndex = items.findIndex(
+    (u) => u.version === prevVersion
+  );
+
+  if (installedIndex === -1) {
+    installedIndex = 0;
+  }
+
+  if (installedPreviouslyIndex === -1) {
+    installedPreviouslyIndex = items.length;
+  } else if (installedPreviouslyIndex === installedIndex && items.length) {
+    installedPreviouslyIndex += 1;
+  }
+
+  const appliedUpdates = items.slice(installedIndex, installedPreviouslyIndex);
+
+  if (!appliedUpdates.length) {
+    return null;
+  }
+
+  const appliedChanges: Update['changes'] = { new: [], fixed: [] };
+
+  appliedUpdates.forEach((u: Update) => {
+    if (u.changes) {
+      appliedChanges.new.push(...u.changes.new);
+      appliedChanges.fixed.push(...u.changes.fixed);
+    }
+  });
+
+  const mergedUpdate: Update = Object.assign({}, appliedUpdates[0], {
+    changes: appliedChanges,
+  });
+
+  if (!appliedChanges.new.length && !appliedChanges.fixed.length) {
+    mergedUpdate.changes = null;
+  }
+
+  return mergedUpdate;
+}
+
+interface AppUpdatedModalContentProps {
+  onModalClose: () => void;
+}
+
+function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
+  const dispatch = useDispatch();
+  const { version, prevVersion } = useSelector((state: AppState) => state.app);
+  const { isPopulated, error, items } = useSelector(
+    (state: AppState) => state.system.updates
+  );
+  const previousVersion = usePrevious(version);
+
+  const { onModalClose } = props;
+
+  const update = mergeUpdates(items, version, prevVersion);
+
+  const handleSeeChangesPress = useCallback(() => {
+    window.location.href = `${window.Prowlarr.urlBase}/system/updates`;
+  }, []);
+
+  useEffect(() => {
+    dispatch(fetchUpdates());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (version !== previousVersion) {
+      dispatch(fetchUpdates());
+    }
+  }, [version, previousVersion, dispatch]);
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('AppUpdated')}</ModalHeader>
+
+      <ModalBody>
+        <div>
+          <InlineMarkdown
+            data={translate('AppUpdatedVersion', { version })}
+            blockClassName={styles.version}
+          />
+        </div>
+
+        {isPopulated && !error && !!update ? (
+          <div>
+            {update.changes ? (
+              <div className={styles.maintenance}>
+                {translate('MaintenanceRelease')}
+              </div>
+            ) : null}
+
+            {update.changes ? (
+              <div>
+                <div className={styles.changes}>{translate('WhatsNew')}</div>
+
+                <UpdateChanges
+                  title={translate('New')}
+                  changes={update.changes.new}
+                />
+
+                <UpdateChanges
+                  title={translate('Fixed')}
+                  changes={update.changes.fixed}
+                />
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {!isPopulated && !error ? <LoadingIndicator /> : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={handleSeeChangesPress}>
+          {translate('RecentChanges')}
+        </Button>
+
+        <Button kind={kinds.PRIMARY} onPress={onModalClose}>
+          {translate('Reload')}
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default AppUpdatedModalContent;

frontend/src/App/AppUpdatedModalContentConnector.js

@@ -1,78 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchUpdates } from 'Store/Actions/systemActions';
-import AppUpdatedModalContent from './AppUpdatedModalContent';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.app.version,
-    (state) => state.app.prevVersion,
-    (state) => state.system.updates,
-    (version, prevVersion, updates) => {
-      const {
-        isPopulated,
-        error,
-        items
-      } = updates;
-
-      return {
-        version,
-        prevVersion,
-        isPopulated,
-        error,
-        items
-      };
-    }
-  );
-}
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    dispatchFetchUpdates() {
-      dispatch(fetchUpdates());
-    },
-
-    onSeeChangesPress() {
-      window.location = `${window.Prowlarr.urlBase}/system/updates`;
-    }
-  };
-}
-
-class AppUpdatedModalContentConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.dispatchFetchUpdates();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.version !== this.props.version) {
-      this.props.dispatchFetchUpdates();
-    }
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      dispatchFetchUpdates,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <AppUpdatedModalContent {...otherProps} />
-    );
-  }
-}
-
-AppUpdatedModalContentConnector.propTypes = {
-  version: PropTypes.string.isRequired,
-  dispatchFetchUpdates: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, createMapDispatchToProps)(AppUpdatedModalContentConnector);

frontend/src/App/ApplyTheme.js

@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Fragment, useCallback, useEffect } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import themes from 'Styles/Themes';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.ui.item.theme || window.Prowlarr.theme,
-    (
-      theme
-    ) => {
-      return {
-        theme
-      };
-    }
-  );
-}
-
-function ApplyTheme({ theme, children }) {
-  // Update the CSS Variables
-
-  const updateCSSVariables = useCallback(() => {
-    const arrayOfVariableKeys = Object.keys(themes[theme]);
-    const arrayOfVariableValues = Object.values(themes[theme]);
-
-    // Loop through each array key and set the CSS Variables
-    arrayOfVariableKeys.forEach((cssVariableKey, index) => {
-      // Based on our snippet from MDN
-      document.documentElement.style.setProperty(
-        `--${cssVariableKey}`,
-        arrayOfVariableValues[index]
-      );
-    });
-  }, [theme]);
-
-  // On Component Mount and Component Update
-  useEffect(() => {
-    updateCSSVariables(theme);
-  }, [updateCSSVariables, theme]);
-
-  return <Fragment>{children}</Fragment>;
-}
-
-ApplyTheme.propTypes = {
-  theme: PropTypes.string.isRequired,
-  children: PropTypes.object.isRequired
-};
-
-export default connect(createMapStateToProps)(ApplyTheme);

frontend/src/App/ApplyTheme.tsx

@@ -0,0 +1,33 @@
+import { useCallback, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import themes from 'Styles/Themes';
+import AppState from './State/AppState';
+
+function createThemeSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.ui.item.theme || window.Prowlarr.theme,
+    (theme) => {
+      return theme;
+    }
+  );
+}
+
+function ApplyTheme() {
+  const theme = useSelector(createThemeSelector());
+
+  const updateCSSVariables = useCallback(() => {
+    Object.entries(themes[theme]).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(`--${key}`, value);
+    });
+  }, [theme]);
+
+  // On Component Mount and Component Update
+  useEffect(() => {
+    updateCSSVariables();
+  }, [updateCSSVariables, theme]);
+
+  return null;
+}
+
+export default ApplyTheme;

frontend/src/App/ConnectionLostModal.tsx

@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useCallback } from 'react';
 import Button from 'Components/Link/Button';
 import Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
@@ -10,36 +9,31 @@ import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './ConnectionLostModal.css';
 
-function ConnectionLostModal(props) {
-  const {
-    isOpen,
-    onModalClose
-  } = props;
+interface ConnectionLostModalProps {
+  isOpen: boolean;
+}
+
+function ConnectionLostModal(props: ConnectionLostModalProps) {
+  const { isOpen } = props;
+
+  const handleModalClose = useCallback(() => {
+    location.reload();
+  }, []);
 
   return (
-    <Modal
-      isOpen={isOpen}
-      onModalClose={onModalClose}
-    >
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>
-          {translate('ConnectionLost')}
-        </ModalHeader>
+    <Modal isOpen={isOpen} onModalClose={handleModalClose}>
+      <ModalContent onModalClose={handleModalClose}>
+        <ModalHeader>{translate('ConnectionLost')}</ModalHeader>
 
         <ModalBody>
-          <div>
-            {translate('ConnectionLostMessage')}
-          </div>
+          <div>{translate('ConnectionLostToBackend')}</div>
 
           <div className={styles.automatic}>
-            {translate('ConnectionLostAutomaticMessage')}
+            {translate('ConnectionLostReconnect')}
           </div>
         </ModalBody>
         <ModalFooter>
-          <Button
-            kind={kinds.PRIMARY}
-            onPress={onModalClose}
-          >
+          <Button kind={kinds.PRIMARY} onPress={handleModalClose}>
             {translate('Reload')}
           </Button>
         </ModalFooter>
@@ -48,9 +42,4 @@ function ConnectionLostModal(props) {
   );
 }
 
-ConnectionLostModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
 export default ConnectionLostModal;

frontend/src/App/ConnectionLostModalConnector.js

@@ -1,12 +0,0 @@
-import { connect } from 'react-redux';
-import ConnectionLostModal from './ConnectionLostModal';
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onModalClose() {
-      location.reload();
-    }
-  };
-}
-
-export default connect(undefined, createMapDispatchToProps)(ConnectionLostModal);

frontend/src/App/SelectContext.tsx

@@ -1,58 +1,28 @@
 import { cloneDeep } from 'lodash';
-import React, { useEffect } from 'react';
-import areAllSelected from 'Utilities/Table/areAllSelected';
-import selectAll from 'Utilities/Table/selectAll';
-import toggleSelected from 'Utilities/Table/toggleSelected';
+import React, { useCallback, useEffect } from 'react';
+import useSelectState, { SelectState } from 'Helpers/Hooks/useSelectState';
 import ModelBase from './ModelBase';
 
-export enum SelectActionType {
-  Reset,
-  SelectAll,
-  UnselectAll,
-  ToggleSelected,
-  RemoveItem,
-  UpdateItems,
-}
-
-type SelectedState = Record<number, boolean>;
-
-interface SelectState {
-  selectedState: SelectedState;
-  lastToggled: number | null;
-  allSelected: boolean;
-  allUnselected: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  items: any[];
-}
-
-type SelectAction =
-  | { type: SelectActionType.Reset }
-  | { type: SelectActionType.SelectAll }
-  | { type: SelectActionType.UnselectAll }
+export type SelectContextAction =
+  | { type: 'reset' }
+  | { type: 'selectAll' }
+  | { type: 'unselectAll' }
   | {
-      type: SelectActionType.ToggleSelected;
+      type: 'toggleSelected';
       id: number;
       isSelected: boolean;
       shiftKey: boolean;
     }
   | {
-      type: SelectActionType.RemoveItem;
+      type: 'removeItem';
       id: number;
     }
   | {
-      type: SelectActionType.UpdateItems;
+      type: 'updateItems';
       items: ModelBase[];
     };
 
-type Dispatch = (action: SelectAction) => void;
-
-const initialState = {
-  selectedState: {},
-  lastToggled: null,
-  allSelected: false,
-  allUnselected: true,
-  items: [],
-};
+export type SelectDispatch = (action: SelectContextAction) => void;
 
 interface SelectProviderOptions<T extends ModelBase> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -60,90 +30,40 @@ interface SelectProviderOptions<T extends ModelBase> {
   items: Array<T>;
 }
 
-function getSelectedState(items: ModelBase[], existingState: SelectedState) {
-  return items.reduce((acc: SelectedState, item) => {
-    const id = item.id;
-
-    acc[id] = existingState[id] ?? false;
-
-    return acc;
-  }, {});
-}
-
-// TODO: Can this be reused?
-
-const SelectContext = React.createContext<[SelectState, Dispatch] | undefined>(
-  cloneDeep(undefined)
-);
-
-function selectReducer(state: SelectState, action: SelectAction): SelectState {
-  const { items, selectedState } = state;
-
-  switch (action.type) {
-    case SelectActionType.Reset: {
-      return cloneDeep(initialState);
-    }
-    case SelectActionType.SelectAll: {
-      return {
-        items,
-        ...selectAll(selectedState, true),
-      };
-    }
-    case SelectActionType.UnselectAll: {
-      return {
-        items,
-        ...selectAll(selectedState, false),
-      };
-    }
-    case SelectActionType.ToggleSelected: {
-      const result = {
-        items,
-        ...toggleSelected(
-          state,
-          items,
-          action.id,
-          action.isSelected,
-          action.shiftKey
-        ),
-      };
-
-      return result;
-    }
-    case SelectActionType.UpdateItems: {
-      const nextSelectedState = getSelectedState(action.items, selectedState);
-
-      return {
-        ...state,
-        ...areAllSelected(nextSelectedState),
-        selectedState: nextSelectedState,
-        items: action.items,
-      };
-    }
-    default: {
-      throw new Error(`Unhandled action type: ${action.type}`);
-    }
-  }
-}
+const SelectContext = React.createContext<
+  [SelectState, SelectDispatch] | undefined
+>(cloneDeep(undefined));
 
 export function SelectProvider<T extends ModelBase>(
   props: SelectProviderOptions<T>
 ) {
   const { items } = props;
-  const selectedState = getSelectedState(items, {});
+  const [state, dispatch] = useSelectState();
 
-  const [state, dispatch] = React.useReducer(selectReducer, {
-    selectedState,
-    lastToggled: null,
-    allSelected: false,
-    allUnselected: true,
-    items,
-  });
+  const dispatchWrapper = useCallback(
+    (action: SelectContextAction) => {
+      switch (action.type) {
+        case 'reset':
+        case 'removeItem':
+          dispatch(action);
+          break;
 
-  const value: [SelectState, Dispatch] = [state, dispatch];
+        default:
+          dispatch({
+            ...action,
+            items,
+          });
+          break;
+      }
+    },
+    [items, dispatch]
+  );
+
+  const value: [SelectState, SelectDispatch] = [state, dispatchWrapper];
 
   useEffect(() => {
-    dispatch({ type: SelectActionType.UpdateItems, items });
-  }, [items]);
+    dispatch({ type: 'updateItems', items });
+  }, [items, dispatch]);
 
   return (
     <SelectContext.Provider value={value}>

frontend/src/App/State/AppSectionState.ts

@@ -0,0 +1,63 @@
+import Column from 'Components/Table/Column';
+import SortDirection from 'Helpers/Props/SortDirection';
+import { FilterBuilderProp, PropertyFilter } from './AppState';
+
+export interface Error {
+  responseJSON: {
+    message: string;
+  };
+}
+
+export interface AppSectionDeleteState {
+  isDeleting: boolean;
+  deleteError: Error;
+}
+
+export interface AppSectionSaveState {
+  isSaving: boolean;
+  saveError: Error;
+}
+
+export interface PagedAppSectionState {
+  page: number;
+  pageSize: number;
+  totalPages: number;
+  totalRecords?: number;
+}
+export interface TableAppSectionState {
+  columns: Column[];
+}
+
+export interface AppSectionFilterState<T> {
+  selectedFilterKey: string;
+  filters: PropertyFilter[];
+  filterBuilderProps: FilterBuilderProp<T>[];
+}
+
+export interface AppSectionSchemaState<T> {
+  isSchemaFetching: boolean;
+  isSchemaPopulated: boolean;
+  schemaError: Error;
+  schema: {
+    items: T[];
+  };
+}
+
+export interface AppSectionItemState<T> {
+  isFetching: boolean;
+  isPopulated: boolean;
+  error: Error;
+  pendingChanges: Partial<T>;
+  item: T;
+}
+
+interface AppSectionState<T> {
+  isFetching: boolean;
+  isPopulated: boolean;
+  error: Error;
+  items: T[];
+  sortKey: string;
+  sortDirection: SortDirection;
+}
+
+export default AppSectionState;

frontend/src/App/State/AppState.ts

@@ -0,0 +1,71 @@
+import CommandAppState from './CommandAppState';
+import HistoryAppState from './HistoryAppState';
+import IndexerAppState, {
+  IndexerHistoryAppState,
+  IndexerIndexAppState,
+  IndexerStatusAppState,
+} from './IndexerAppState';
+import IndexerStatsAppState from './IndexerStatsAppState';
+import SettingsAppState from './SettingsAppState';
+import SystemAppState from './SystemAppState';
+import TagsAppState from './TagsAppState';
+
+interface FilterBuilderPropOption {
+  id: string;
+  name: string;
+}
+
+export interface FilterBuilderProp<T> {
+  name: string;
+  label: string;
+  type: string;
+  valueType?: string;
+  optionsSelector?: (items: T[]) => FilterBuilderPropOption[];
+}
+
+export interface PropertyFilter {
+  key: string;
+  value: boolean | string | number | string[] | number[];
+  type: string;
+}
+
+export interface Filter {
+  key: string;
+  label: string;
+  filers: PropertyFilter[];
+}
+
+export interface CustomFilter {
+  id: number;
+  type: string;
+  label: string;
+  filers: PropertyFilter[];
+}
+
+export interface AppSectionState {
+  isConnected: boolean;
+  isReconnecting: boolean;
+  version: string;
+  prevVersion?: string;
+  dimensions: {
+    isSmallScreen: boolean;
+    width: number;
+    height: number;
+  };
+}
+
+interface AppState {
+  app: AppSectionState;
+  commands: CommandAppState;
+  history: HistoryAppState;
+  indexerHistory: IndexerHistoryAppState;
+  indexerIndex: IndexerIndexAppState;
+  indexerStats: IndexerStatsAppState;
+  indexerStatus: IndexerStatusAppState;
+  indexers: IndexerAppState;
+  settings: SettingsAppState;
+  system: SystemAppState;
+  tags: TagsAppState;
+}
+
+export default AppState;

frontend/src/App/State/ClientSideCollectionAppState.ts

@@ -0,0 +1,8 @@
+import { CustomFilter } from './AppState';
+
+interface ClientSideCollectionAppState {
+  totalItems: number;
+  customFilters: CustomFilter[];
+}
+
+export default ClientSideCollectionAppState;

frontend/src/App/State/CommandAppState.ts

@@ -0,0 +1,6 @@
+import AppSectionState from 'App/State/AppSectionState';
+import Command from 'Commands/Command';
+
+export type CommandAppState = AppSectionState<Command>;
+
+export default CommandAppState;

frontend/src/App/State/HistoryAppState.ts

@@ -0,0 +1,14 @@
+import AppSectionState, {
+  AppSectionFilterState,
+} from 'App/State/AppSectionState';
+import Column from 'Components/Table/Column';
+import History from 'typings/History';
+
+interface HistoryAppState
+  extends AppSectionState<History>,
+    AppSectionFilterState<History> {
+  pageSize: number;
+  columns: Column[];
+}
+
+export default HistoryAppState;

frontend/src/App/State/IndexerAppState.ts

@@ -0,0 +1,42 @@
+import Column from 'Components/Table/Column';
+import SortDirection from 'Helpers/Props/SortDirection';
+import Indexer, { IndexerStatus } from 'Indexer/Indexer';
+import History from 'typings/History';
+import AppSectionState, {
+  AppSectionDeleteState,
+  AppSectionSaveState,
+} from './AppSectionState';
+import { Filter, FilterBuilderProp } from './AppState';
+
+export interface IndexerIndexAppState {
+  isTestingAll: boolean;
+  sortKey: string;
+  sortDirection: SortDirection;
+  secondarySortKey: string;
+  secondarySortDirection: SortDirection;
+  view: string;
+
+  tableOptions: {
+    showSearchAction: boolean;
+  };
+
+  selectedFilterKey: string;
+  filterBuilderProps: FilterBuilderProp<Indexer>[];
+  filters: Filter[];
+  columns: Column[];
+}
+
+interface IndexerAppState
+  extends AppSectionState<Indexer>,
+    AppSectionDeleteState,
+    AppSectionSaveState {
+  itemMap: Record<number, number>;
+
+  isTestingAll: boolean;
+}
+
+export type IndexerStatusAppState = AppSectionState<IndexerStatus>;
+
+export type IndexerHistoryAppState = AppSectionState<History>;
+
+export default IndexerAppState;

frontend/src/App/State/IndexerStatsAppState.ts

@@ -0,0 +1,13 @@
+import { AppSectionItemState } from 'App/State/AppSectionState';
+import { Filter, FilterBuilderProp } from 'App/State/AppState';
+import Indexer from 'Indexer/Indexer';
+import { IndexerStats } from 'typings/IndexerStats';
+
+export interface IndexerStatsAppState
+  extends AppSectionItemState<IndexerStats> {
+  filterBuilderProps: FilterBuilderProp<Indexer>[];
+  selectedFilterKey: string;
+  filters: Filter[];
+}
+
+export default IndexerStatsAppState;

frontend/src/App/State/ReleaseAppState.ts

@@ -0,0 +1,10 @@
+import AppSectionState, {
+  AppSectionDeleteState,
+} from 'App/State/AppSectionState';
+import Release from 'typings/Release';
+
+interface ReleaseAppState
+  extends AppSectionState<Release>,
+    AppSectionDeleteState {}
+
+export default ReleaseAppState;

frontend/src/App/State/SettingsAppState.ts

@@ -0,0 +1,57 @@
+import AppSectionState, {
+  AppSectionDeleteState,
+  AppSectionItemState,
+  AppSectionSaveState,
+} from 'App/State/AppSectionState';
+import { IndexerCategory } from 'Indexer/Indexer';
+import Application from 'typings/Application';
+import DownloadClient from 'typings/DownloadClient';
+import Notification from 'typings/Notification';
+import General from 'typings/Settings/General';
+import UiSettings from 'typings/Settings/UiSettings';
+
+export interface AppProfileAppState
+  extends AppSectionState<Application>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface ApplicationAppState
+  extends AppSectionState<Application>,
+    AppSectionDeleteState,
+    AppSectionSaveState {
+  isTestingAll: boolean;
+}
+
+export interface DownloadClientAppState
+  extends AppSectionState<DownloadClient>,
+    AppSectionDeleteState,
+    AppSectionSaveState {
+  isTestingAll: boolean;
+}
+
+export interface GeneralAppState
+  extends AppSectionItemState<General>,
+    AppSectionSaveState {}
+
+export interface IndexerCategoryAppState
+  extends AppSectionState<IndexerCategory>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface NotificationAppState
+  extends AppSectionState<Notification>,
+    AppSectionDeleteState {}
+
+export type UiSettingsAppState = AppSectionItemState<UiSettings>;
+
+interface SettingsAppState {
+  appProfiles: AppProfileAppState;
+  applications: ApplicationAppState;
+  downloadClients: DownloadClientAppState;
+  general: GeneralAppState;
+  indexerCategories: IndexerCategoryAppState;
+  notifications: NotificationAppState;
+  ui: UiSettingsAppState;
+}
+
+export default SettingsAppState;

frontend/src/App/State/SystemAppState.ts

@@ -0,0 +1,19 @@
+import Health from 'typings/Health';
+import SystemStatus from 'typings/SystemStatus';
+import Task from 'typings/Task';
+import Update from 'typings/Update';
+import AppSectionState, { AppSectionItemState } from './AppSectionState';
+
+export type HealthAppState = AppSectionState<Health>;
+export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
+export type TaskAppState = AppSectionState<Task>;
+export type UpdateAppState = AppSectionState<Update>;
+
+interface SystemAppState {
+  health: HealthAppState;
+  status: SystemStatusAppState;
+  tasks: TaskAppState;
+  updates: UpdateAppState;
+}
+
+export default SystemAppState;

frontend/src/App/State/TagsAppState.ts

@@ -0,0 +1,28 @@
+import ModelBase from 'App/ModelBase';
+import AppSectionState, {
+  AppSectionDeleteState,
+  AppSectionSaveState,
+} from 'App/State/AppSectionState';
+
+export interface Tag extends ModelBase {
+  label: string;
+}
+
+export interface TagDetail extends ModelBase {
+  label: string;
+  applicationIds: number[];
+  indexerIds: number[];
+  indexerProxyIds: number[];
+  notificationIds: number[];
+}
+
+export interface TagDetailAppState
+  extends AppSectionState<TagDetail>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+interface TagsAppState extends AppSectionState<Tag>, AppSectionDeleteState {
+  details: TagDetailAppState;
+}
+
+export default TagsAppState;

frontend/src/Commands/Command.ts

@@ -0,0 +1,36 @@
+import ModelBase from 'App/ModelBase';
+
+export interface CommandBody {
+  sendUpdatesToClient: boolean;
+  updateScheduledTask: boolean;
+  completionMessage: string;
+  requiresDiskAccess: boolean;
+  isExclusive: boolean;
+  isLongRunning: boolean;
+  name: string;
+  lastExecutionTime: string;
+  lastStartTime: string;
+  trigger: string;
+  suppressMessages: boolean;
+}
+
+interface Command extends ModelBase {
+  name: string;
+  commandName: string;
+  message: string;
+  body: CommandBody;
+  priority: string;
+  status: string;
+  result: string;
+  queued: string;
+  started: string;
+  ended: string;
+  duration: string;
+  trigger: string;
+  stateChangeTime: string;
+  sendUpdatesToClient: boolean;
+  updateScheduledTask: boolean;
+  lastExecutionTime: string;
+}
+
+export default Command;

frontend/src/Components/Chart/BarChart.js

@@ -2,6 +2,7 @@ import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { kinds } from 'Helpers/Props';
+import { defaultFontFamily } from 'Styles/Variables/fonts';
 
 function getColors(kind) {
 
@@ -39,7 +40,15 @@ class BarChart extends Component {
         plugins: {
           title: {
             display: true,
-            text: this.props.title
+            align: 'start',
+            text: this.props.title,
+            padding: {
+              bottom: 30
+            },
+            font: {
+              size: 14,
+              family: defaultFontFamily
+            }
           },
           legend: {
             display: this.props.legend

frontend/src/Components/Chart/DoughnutChart.js

@@ -1,6 +1,7 @@
 import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { defaultFontFamily } from 'Styles/Variables/fonts';
 
 function getColors(kind) {
 
@@ -22,7 +23,15 @@ class DoughnutChart extends Component {
         plugins: {
           title: {
             display: true,
-            text: this.props.title
+            align: 'start',
+            text: this.props.title,
+            padding: {
+              bottom: 30
+            },
+            font: {
+              size: 14,
+              family: defaultFontFamily
+            }
           },
           legend: {
             position: 'bottom'

frontend/src/Components/Chart/StackedBarChart.js

@@ -1,6 +1,7 @@
 import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { defaultFontFamily } from 'Styles/Variables/fonts';
 
 function getColors(index) {
 
@@ -36,7 +37,19 @@ class StackedBarChart extends Component {
         plugins: {
           title: {
             display: true,
-            text: this.props.title
+            align: 'start',
+            text: this.props.title,
+            padding: {
+              bottom: 30
+            },
+            font: {
+              size: 14,
+              family: defaultFontFamily
+            }
+          },
+          tooltip: {
+            mode: 'index',
+            position: 'average'
           }
         }
       },

frontend/src/Components/DescriptionList/DescriptionListItem.js

@@ -10,6 +10,7 @@ class DescriptionListItem extends Component {
 
   render() {
     const {
+      className,
       titleClassName,
       descriptionClassName,
       title,
@@ -17,7 +18,7 @@ class DescriptionListItem extends Component {
     } = this.props;
 
     return (
-      <div>
+      <div className={className}>
         <DescriptionListItemTitle
           className={titleClassName}
         >
@@ -35,6 +36,7 @@ class DescriptionListItem extends Component {
 }
 
 DescriptionListItem.propTypes = {
+  className: PropTypes.string,
   titleClassName: PropTypes.string,
   descriptionClassName: PropTypes.string,
   title: PropTypes.string,

frontend/src/Components/Error/ErrorBoundaryError.tsx

@@ -23,7 +23,9 @@ function ErrorBoundaryError(props: ErrorBoundaryErrorProps) {
     info,
   } = props;
 
-  const [detailedError, setDetailedError] = useState(null);
+  const [detailedError, setDetailedError] = useState<
+    StackTrace.StackFrame[] | null
+  >(null);
 
   useEffect(() => {
     if (error) {
@@ -61,11 +63,7 @@ function ErrorBoundaryError(props: ErrorBoundaryErrorProps) {
           <div>{info.componentStack}</div>
         )}
 
-        {
-          <div className={styles.version}>
-            Version: {window.Prowlarr.version}
-          </div>
-        }
+        <div className={styles.version}>Version: {window.Prowlarr.version}</div>
       </details>
     </div>
   );

frontend/src/Components/FileBrowser/FileBrowserModalContent.js

@@ -20,12 +20,12 @@ import styles from './FileBrowserModalContent.css';
 const columns = [
   {
     name: 'type',
-    label: translate('Type'),
+    label: () => translate('Type'),
     isVisible: true
   },
   {
     name: 'name',
-    label: translate('Name'),
+    label: () => translate('Name'),
     isVisible: true
   }
 ];

frontend/src/Components/Filter/Builder/CategoryFilterBuilderRowValue.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import { IndexerCategory } from 'Indexer/Indexer';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
+
+const indexerCategoriesSelector = createSelector(
+  (state: AppState) => state.settings.indexerCategories,
+  (categories) => categories.items
+);
+
+function CategoryFilterBuilderRowValue(props: FilterBuilderRowValueProps) {
+  const categories: IndexerCategory[] = useSelector(indexerCategoriesSelector);
+
+  const tagList = categories.reduce(
+    (acc: { id: number; name: string }[], element) => {
+      acc.push({
+        id: element.id,
+        name: `${element.name} (${element.id})`,
+      });
+
+      if (element.subCategories && element.subCategories.length > 0) {
+        element.subCategories.forEach((subCat) => {
+          acc.push({
+            id: subCat.id,
+            name: `${subCat.name} (${subCat.id})`,
+          });
+        });
+      }
+
+      return acc;
+    },
+    []
+  );
+
+  return <FilterBuilderRowValue {...props} tagList={tagList} />;
+}
+
+export default CategoryFilterBuilderRowValue;

frontend/src/Components/Filter/Builder/FilterBuilderModalContent.js

@@ -1,3 +1,4 @@
+import { maxBy } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -50,7 +51,7 @@ class FilterBuilderModalContent extends Component {
       if (id) {
         dispatchSetFilter({ selectedFilterKey: id });
       } else {
-        const last = customFilters[customFilters.length -1];
+        const last = maxBy(customFilters, 'id');
         dispatchSetFilter({ selectedFilterKey: last.id });
       }
 
@@ -108,7 +109,7 @@ class FilterBuilderModalContent extends Component {
       this.setState({
         labelErrors: [
           {
-            message: 'Label is required'
+            message: translate('LabelIsRequired')
           }
         ]
       });
@@ -146,13 +147,13 @@ class FilterBuilderModalContent extends Component {
     return (
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
-          Custom Filter
+          {translate('CustomFilter')}
         </ModalHeader>
 
         <ModalBody>
           <div className={styles.labelContainer}>
             <div className={styles.label}>
-              Label
+              {translate('Label')}
             </div>
 
             <div className={styles.labelInputContainer}>

frontend/src/Components/Filter/Builder/FilterBuilderRow.js

@@ -3,10 +3,13 @@ import React, { Component } from 'react';
 import SelectInput from 'Components/Form/SelectInput';
 import IconButton from 'Components/Link/IconButton';
 import { filterBuilderTypes, filterBuilderValueTypes, icons } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
 import AppProfileFilterBuilderRowValueConnector from './AppProfileFilterBuilderRowValueConnector';
 import BoolFilterBuilderRowValue from './BoolFilterBuilderRowValue';
+import CategoryFilterBuilderRowValue from './CategoryFilterBuilderRowValue';
 import DateFilterBuilderRowValue from './DateFilterBuilderRowValue';
 import FilterBuilderRowValueConnector from './FilterBuilderRowValueConnector';
+import HistoryEventTypeFilterBuilderRowValue from './HistoryEventTypeFilterBuilderRowValue';
 import IndexerFilterBuilderRowValueConnector from './IndexerFilterBuilderRowValueConnector';
 import PrivacyFilterBuilderRowValue from './PrivacyFilterBuilderRowValue';
 import ProtocolFilterBuilderRowValue from './ProtocolFilterBuilderRowValue';
@@ -55,9 +58,15 @@ function getRowValueConnector(selectedFilterBuilderProp) {
     case filterBuilderValueTypes.BOOL:
       return BoolFilterBuilderRowValue;
 
+    case filterBuilderValueTypes.CATEGORY:
+      return CategoryFilterBuilderRowValue;
+
     case filterBuilderValueTypes.DATE:
       return DateFilterBuilderRowValue;
 
+    case filterBuilderValueTypes.HISTORY_EVENT_TYPE:
+      return HistoryEventTypeFilterBuilderRowValue;
+
     case filterBuilderValueTypes.INDEXER:
       return IndexerFilterBuilderRowValueConnector;
 
@@ -198,11 +207,13 @@ class FilterBuilderRow extends Component {
     const selectedFilterBuilderProp = this.selectedFilterBuilderProp;
 
     const keyOptions = filterBuilderProps.map((availablePropFilter) => {
+      const { name, label } = availablePropFilter;
+
       return {
-        key: availablePropFilter.name,
-        value: availablePropFilter.label
+        key: name,
+        value: typeof label === 'function' ? label() : label
       };
-    });
+    }).sort(sortByProp('value'));
 
     const ValueComponent = getRowValueConnector(selectedFilterBuilderProp);
 

frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { filterBuilderTypes } from 'Helpers/Props';
 import * as filterTypes from 'Helpers/Props/filterTypes';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 function createTagListSelector() {
@@ -38,7 +38,7 @@ function createTagListSelector() {
           }
 
           return acc;
-        }, []).sort(sortByName);
+        }, []).sort(sortByProp('name'));
       }
 
       return _.uniqBy(items, 'id');

frontend/src/Components/Filter/Builder/FilterBuilderRowValueProps.ts

@@ -0,0 +1,16 @@
+import { FilterBuilderProp } from 'App/State/AppState';
+
+interface FilterBuilderRowOnChangeProps {
+  name: string;
+  value: unknown[];
+}
+
+interface FilterBuilderRowValueProps {
+  filterType?: string;
+  filterValue: string | number | object | string[] | number[] | object[];
+  selectedFilterBuilderProp: FilterBuilderProp<unknown>;
+  sectionItem: unknown[];
+  onChange: (payload: FilterBuilderRowOnChangeProps) => void;
+}
+
+export default FilterBuilderRowValueProps;

frontend/src/Components/Filter/Builder/HistoryEventTypeFilterBuilderRowValue.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import translate from 'Utilities/String/translate';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
+
+const EVENT_TYPE_OPTIONS = [
+  {
+    id: 1,
+    get name() {
+      return translate('Grabbed');
+    },
+  },
+  {
+    id: 3,
+    get name() {
+      return translate('IndexerRss');
+    },
+  },
+  {
+    id: 2,
+    get name() {
+      return translate('IndexerQuery');
+    },
+  },
+  {
+    id: 4,
+    get name() {
+      return translate('IndexerAuth');
+    },
+  },
+];
+
+function HistoryEventTypeFilterBuilderRowValue(
+  props: FilterBuilderRowValueProps
+) {
+  return <FilterBuilderRowValue {...props} tagList={EVENT_TYPE_OPTIONS} />;
+}
+
+export default HistoryEventTypeFilterBuilderRowValue;

frontend/src/Components/Filter/Builder/IndexerFilterBuilderRowValueConnector.js

@@ -9,13 +9,13 @@ import FilterBuilderRowValue from './FilterBuilderRowValue';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.indexers,
-    (qualityProfiles) => {
+    (indexers) => {
       const {
         isFetching,
         isPopulated,
         error,
         items
-      } = qualityProfiles;
+      } = indexers;
 
       const tagList = items.map((item) => {
         return {

frontend/src/Components/Filter/Builder/PrivacyFilterBuilderRowValue.js

@@ -3,9 +3,24 @@ import translate from 'Utilities/String/translate';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 const privacyTypes = [
-  { id: 'public', name: translate('Public') },
-  { id: 'private', name: translate('Private') },
-  { id: 'semiPrivate', name: translate('SemiPrivate') }
+  {
+    id: 'public',
+    get name() {
+      return translate('Public');
+    }
+  },
+  {
+    id: 'private',
+    get name() {
+      return translate('Private');
+    }
+  },
+  {
+    id: 'semiPrivate',
+    get name() {
+      return translate('SemiPrivate');
+    }
+  }
 ];
 
 function PrivacyFilterBuilderRowValue(props) {

frontend/src/Components/Filter/CustomFilters/CustomFilter.js

@@ -37,8 +37,8 @@ class CustomFilter extends Component {
       dispatchSetFilter
     } = this.props;
 
-    // Assume that delete and then unmounting means the delete was successful.
-    // Moving this check to a ancestor would be more accurate, but would have
+    // Assume that delete and then unmounting means the deletion was successful.
+    // Moving this check to an ancestor would be more accurate, but would have
     // more boilerplate.
     if (this.state.isDeleting && id === selectedFilterKey) {
       dispatchSetFilter({ selectedFilterKey: 'all' });

frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js

@@ -5,6 +5,7 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import CustomFilter from './CustomFilter';
 import styles from './CustomFiltersModalContent.css';
@@ -30,22 +31,24 @@ function CustomFiltersModalContent(props) {
 
       <ModalBody>
         {
-          customFilters.map((customFilter) => {
-            return (
-              <CustomFilter
-                key={customFilter.id}
-                id={customFilter.id}
-                label={customFilter.label}
-                filters={customFilter.filters}
-                selectedFilterKey={selectedFilterKey}
-                isDeleting={isDeleting}
-                deleteError={deleteError}
-                dispatchSetFilter={dispatchSetFilter}
-                dispatchDeleteCustomFilter={dispatchDeleteCustomFilter}
-                onEditPress={onEditCustomFilter}
-              />
-            );
-          })
+          customFilters
+            .sort((a, b) => sortByProp(a, b, 'label'))
+            .map((customFilter) => {
+              return (
+                <CustomFilter
+                  key={customFilter.id}
+                  id={customFilter.id}
+                  label={customFilter.label}
+                  filters={customFilter.filters}
+                  selectedFilterKey={selectedFilterKey}
+                  isDeleting={isDeleting}
+                  deleteError={deleteError}
+                  dispatchSetFilter={dispatchSetFilter}
+                  dispatchDeleteCustomFilter={dispatchDeleteCustomFilter}
+                  onEditPress={onEditCustomFilter}
+                />
+              );
+            })
         }
 
         <div className={styles.addButtonContainer}>

frontend/src/Components/Form/AppProfileSelectInputConnector.js

@@ -4,12 +4,13 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
 import SelectInput from './SelectInput';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.appProfiles', sortByName),
+    createSortedSectionSelector('settings.appProfiles', sortByProp('name')),
     (state, { includeNoChange }) => includeNoChange,
     (state, { includeMixed }) => includeMixed,
     (appProfiles, includeNoChange, includeMixed) => {
@@ -23,16 +24,20 @@ function createMapStateToProps() {
       if (includeNoChange) {
         values.unshift({
           key: 'noChange',
-          value: 'No Change',
-          disabled: true
+          get value() {
+            return translate('NoChange');
+          },
+          isDisabled: true
         });
       }
 
       if (includeMixed) {
         values.unshift({
           key: 'mixed',
-          value: '(Mixed)',
-          disabled: true
+          get value() {
+            return `(${translate('Mixed')})`;
+          },
+          isDisabled: true
         });
       }
 

frontend/src/Components/Form/AvailabilitySelectInput.js

@@ -1,54 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import SelectInput from './SelectInput';
-
-const availabilityOptions = [
-  { key: 'announced', value: 'Announced' },
-  { key: 'inCinemas', value: 'In Cinemas' },
-  { key: 'released', value: 'Released' },
-  { key: 'preDB', value: 'PreDB' }
-];
-
-function AvailabilitySelectInput(props) {
-  const values = [...availabilityOptions];
-
-  const {
-    includeNoChange,
-    includeMixed
-  } = props;
-
-  if (includeNoChange) {
-    values.unshift({
-      key: 'noChange',
-      value: 'No Change',
-      disabled: true
-    });
-  }
-
-  if (includeMixed) {
-    values.unshift({
-      key: 'mixed',
-      value: '(Mixed)',
-      disabled: true
-    });
-  }
-
-  return (
-    <SelectInput
-      {...props}
-      values={values}
-    />
-  );
-}
-
-AvailabilitySelectInput.propTypes = {
-  includeNoChange: PropTypes.bool.isRequired,
-  includeMixed: PropTypes.bool.isRequired
-};
-
-AvailabilitySelectInput.defaultProps = {
-  includeNoChange: false,
-  includeMixed: false
-};
-
-export default AvailabilitySelectInput;

frontend/src/Components/Form/DownloadClientSelectInputConnector.js

@@ -0,0 +1,100 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchDownloadClients } from 'Store/Actions/settingsActions';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
+import EnhancedSelectInput from './EnhancedSelectInput';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.downloadClients,
+    (state, { includeAny }) => includeAny,
+    (state, { protocol }) => protocol,
+    (downloadClients, includeAny, protocolFilter) => {
+      const {
+        isFetching,
+        isPopulated,
+        error,
+        items
+      } = downloadClients;
+
+      const values = items
+        .filter((downloadClient) => downloadClient.protocol === protocolFilter)
+        .sort(sortByProp('name'))
+        .map((downloadClient) => ({
+          key: downloadClient.id,
+          value: downloadClient.name,
+          hint: `(${downloadClient.id})`
+        }));
+
+      if (includeAny) {
+        values.unshift({
+          key: 0,
+          value: `(${translate('Any')})`
+        });
+      }
+
+      return {
+        isFetching,
+        isPopulated,
+        error,
+        values
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchFetchDownloadClients: fetchDownloadClients
+};
+
+class DownloadClientSelectInputConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    if (!this.props.isPopulated) {
+      this.props.dispatchFetchDownloadClients();
+    }
+  }
+
+  //
+  // Listeners
+
+  onChange = ({ name, value }) => {
+    this.props.onChange({ name, value: parseInt(value) });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EnhancedSelectInput
+        {...this.props}
+        onChange={this.onChange}
+      />
+    );
+  }
+}
+
+DownloadClientSelectInputConnector.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  values: PropTypes.arrayOf(PropTypes.object).isRequired,
+  includeAny: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  dispatchFetchDownloadClients: PropTypes.func.isRequired
+};
+
+DownloadClientSelectInputConnector.defaultProps = {
+  includeAny: false,
+  protocol: 'torrent'
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(DownloadClientSelectInputConnector);

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -20,6 +20,8 @@ import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
 import TextInput from './TextInput';
 import styles from './EnhancedSelectInput.css';
 
+const MINIMUM_DISTANCE_FROM_EDGE = 10;
+
 function isArrowKey(keyCode) {
   return keyCode === keyCodes.UP_ARROW || keyCode === keyCodes.DOWN_ARROW;
 }
@@ -137,18 +139,9 @@ class EnhancedSelectInput extends Component {
   // Listeners
 
   onComputeMaxHeight = (data) => {
-    const {
-      top,
-      bottom
-    } = data.offsets.reference;
-
     const windowHeight = window.innerHeight;
 
-    if ((/^botton/).test(data.placement)) {
-      data.styles.maxHeight = windowHeight - bottom;
-    } else {
-      data.styles.maxHeight = top;
-    }
+    data.styles.maxHeight = windowHeight - MINIMUM_DISTANCE_FROM_EDGE;
 
     return data;
   };
@@ -271,26 +264,29 @@ class EnhancedSelectInput extends Component {
     this.setState({ isOpen: !this.state.isOpen });
   };
 
-  onSelect = (value) => {
-    if (Array.isArray(this.props.value)) {
-      let newValue = null;
-      const index = this.props.value.indexOf(value);
+  onSelect = (newValue) => {
+    const { name, value, values, onChange } = this.props;
+
+    if (Array.isArray(value)) {
+      let arrayValue = null;
+      const index = value.indexOf(newValue);
+
       if (index === -1) {
-        newValue = this.props.values.map((v) => v.key).filter((v) => (v === value) || this.props.value.includes(v));
+        arrayValue = values.map((v) => v.key).filter((v) => (v === newValue) || value.includes(v));
       } else {
-        newValue = [...this.props.value];
-        newValue.splice(index, 1);
+        arrayValue = [...value];
+        arrayValue.splice(index, 1);
       }
-      this.props.onChange({
-        name: this.props.name,
-        value: newValue
+      onChange({
+        name,
+        value: arrayValue
       });
     } else {
       this.setState({ isOpen: false });
 
-      this.props.onChange({
-        name: this.props.name,
-        value
+      onChange({
+        name,
+        value: newValue
       });
     }
   };
@@ -457,6 +453,10 @@ class EnhancedSelectInput extends Component {
                   order: 851,
                   enabled: true,
                   fn: this.onComputeMaxHeight
+                },
+                preventOverflow: {
+                  enabled: true,
+                  boundariesElement: 'viewport'
                 }
               }}
             >
@@ -485,7 +485,7 @@ class EnhancedSelectInput extends Component {
                             values.map((v, index) => {
                               const hasParent = v.parentKey !== undefined;
                               const depth = hasParent ? 1 : 0;
-                              const parentSelected = hasParent && value.includes(v.parentKey);
+                              const parentSelected = hasParent && Array.isArray(value) && value.includes(v.parentKey);
                               return (
                                 <OptionComponent
                                   key={v.key}
@@ -578,7 +578,7 @@ EnhancedSelectInput.propTypes = {
   className: PropTypes.string,
   disabledClassName: PropTypes.string,
   name: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   isDisabled: PropTypes.bool.isRequired,
   isFetching: PropTypes.bool.isRequired,

frontend/src/Components/Form/EnhancedSelectInputConnector.js

@@ -34,7 +34,8 @@ function getSelectOptions(items) {
       key: option.value,
       value: option.name,
       hint: option.hint,
-      parentKey: option.parentValue
+      parentKey: option.parentValue,
+      isDisabled: option.isDisabled
     };
   });
 }
@@ -147,7 +148,7 @@ EnhancedSelectInputConnector.propTypes = {
   provider: PropTypes.string.isRequired,
   providerData: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
-  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   selectOptionsProviderAction: PropTypes.string,
   onChange: PropTypes.func.isRequired,

frontend/src/Components/Form/EnhancedSelectInputOption.css

@@ -9,6 +9,10 @@
   &:hover {
     background-color: var(--inputHoverBackgroundColor);
   }
+
+  &.isDisabled {
+    cursor: not-allowed;
+  }
 }
 
 .optionCheck {

frontend/src/Components/Form/Form.css

@@ -1,3 +1,7 @@
 .validationFailures {
   margin-bottom: 20px;
 }
+
+.details {
+  margin-left: 5px;
+}

frontend/src/Components/Form/Form.css.d.ts

@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'details': string;
   'validationFailures': string;
 }
 export const cssExports: CssExports;

frontend/src/Components/Form/Form.js

@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Alert from 'Components/Alert';
-import { kinds } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import styles from './Form.css';
 
 function Form(props) {
@@ -26,6 +28,18 @@ function Form(props) {
                     kind={kinds.DANGER}
                   >
                     {error.errorMessage}
+
+                    {
+                      error.detailedDescription ?
+                        <Tooltip
+                          className={styles.details}
+                          anchor={<Icon name={icons.INFO} />}
+                          tooltip={error.detailedDescription}
+                          kind={kinds.INVERSE}
+                          position={tooltipPositions.TOP}
+                        /> :
+                        null
+                    }
                   </Alert>
                 );
               })
@@ -39,6 +53,18 @@ function Form(props) {
                     kind={kinds.WARNING}
                   >
                     {warning.errorMessage}
+
+                    {
+                      warning.detailedDescription ?
+                        <Tooltip
+                          className={styles.details}
+                          anchor={<Icon name={icons.INFO} />}
+                          tooltip={warning.detailedDescription}
+                          kind={kinds.INVERSE}
+                          position={tooltipPositions.TOP}
+                        /> :
+                        null
+                    }
                   </Alert>
                 );
               })

frontend/src/Components/Form/FormInputButton.js

@@ -1,54 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import Button from 'Components/Link/Button';
-import SpinnerButton from 'Components/Link/SpinnerButton';
-import { kinds } from 'Helpers/Props';
-import styles from './FormInputButton.css';
-
-function FormInputButton(props) {
-  const {
-    className,
-    canSpin,
-    isLastButton,
-    ...otherProps
-  } = props;
-
-  if (canSpin) {
-    return (
-      <SpinnerButton
-        className={classNames(
-          className,
-          !isLastButton && styles.middleButton
-        )}
-        kind={kinds.PRIMARY}
-        {...otherProps}
-      />
-    );
-  }
-
-  return (
-    <Button
-      className={classNames(
-        className,
-        !isLastButton && styles.middleButton
-      )}
-      kind={kinds.PRIMARY}
-      {...otherProps}
-    />
-  );
-}
-
-FormInputButton.propTypes = {
-  className: PropTypes.string.isRequired,
-  isLastButton: PropTypes.bool.isRequired,
-  canSpin: PropTypes.bool.isRequired
-};
-
-FormInputButton.defaultProps = {
-  className: styles.button,
-  isLastButton: true,
-  canSpin: false
-};
-
-export default FormInputButton;

frontend/src/Components/Form/FormInputButton.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import React from 'react';
+import Button, { ButtonProps } from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import { kinds } from 'Helpers/Props';
+import styles from './FormInputButton.css';
+
+export interface FormInputButtonProps extends ButtonProps {
+  canSpin?: boolean;
+  isLastButton?: boolean;
+}
+
+function FormInputButton({
+  className = styles.button,
+  canSpin = false,
+  isLastButton = true,
+  ...otherProps
+}: FormInputButtonProps) {
+  if (canSpin) {
+    return (
+      <SpinnerButton
+        className={classNames(className, !isLastButton && styles.middleButton)}
+        kind={kinds.PRIMARY}
+        {...otherProps}
+      />
+    );
+  }
+
+  return (
+    <Button
+      className={classNames(className, !isLastButton && styles.middleButton)}
+      kind={kinds.PRIMARY}
+      {...otherProps}
+    />
+  );
+}
+
+export default FormInputButton;

frontend/src/Components/Form/FormInputGroup.js

@@ -5,11 +5,11 @@ import { inputTypes, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import AppProfileSelectInputConnector from './AppProfileSelectInputConnector';
 import AutoCompleteInput from './AutoCompleteInput';
-import AvailabilitySelectInput from './AvailabilitySelectInput';
 import CaptchaInputConnector from './CaptchaInputConnector';
 import CardigannCaptchaInputConnector from './CardigannCaptchaInputConnector';
 import CheckInput from './CheckInput';
 import DeviceInputConnector from './DeviceInputConnector';
+import DownloadClientSelectInputConnector from './DownloadClientSelectInputConnector';
 import EnhancedSelectInput from './EnhancedSelectInput';
 import EnhancedSelectInputConnector from './EnhancedSelectInputConnector';
 import FormInputHelpText from './FormInputHelpText';
@@ -36,9 +36,6 @@ function getComponent(type) {
     case inputTypes.AUTO_COMPLETE:
       return AutoCompleteInput;
 
-    case inputTypes.AVAILABILITY_SELECT:
-      return AvailabilitySelectInput;
-
     case inputTypes.CAPTCHA:
       return CaptchaInputConnector;
 
@@ -72,6 +69,9 @@ function getComponent(type) {
     case inputTypes.CATEGORY_SELECT:
       return NewznabCategorySelectInputConnector;
 
+    case inputTypes.DOWNLOAD_CLIENT_SELECT:
+      return DownloadClientSelectInputConnector;
+
     case inputTypes.INDEXER_FLAGS_SELECT:
       return IndexerFlagsSelectInputConnector;
 
@@ -256,14 +256,18 @@ FormInputGroup.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.any,
   values: PropTypes.arrayOf(PropTypes.any),
+  isFloat: PropTypes.bool,
   type: PropTypes.string.isRequired,
   kind: PropTypes.oneOf(kinds.all),
+  min: PropTypes.number,
+  max: PropTypes.number,
   unit: PropTypes.string,
   buttons: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   helpText: PropTypes.string,
   helpTexts: PropTypes.arrayOf(PropTypes.string),
   helpTextWarning: PropTypes.string,
   helpLink: PropTypes.string,
+  autoFocus: PropTypes.bool,
   includeNoChange: PropTypes.bool,
   includeNoChangeDisabled: PropTypes.bool,
   selectedValueOptions: PropTypes.object,

frontend/src/Components/Form/FormInputHelpText.js

@@ -25,7 +25,7 @@ function FormInputHelpText(props) {
       isCheckInput && styles.isCheckInput
     )}
     >
-      <div dangerouslySetInnerHTML={{ __html: text }} />
+      {text}
 
       {
         link ?

frontend/src/Components/Form/FormLabel.css

@@ -2,8 +2,10 @@
   display: flex;
   justify-content: flex-end;
   margin-right: $formLabelRightMarginWidth;
+  padding-top: 8px;
+  min-height: 35px;
+  text-align: end;
   font-weight: bold;
-  line-height: 35px;
 }
 
 .hasError {

frontend/src/Components/Form/HintedSelectInputOption.js

@@ -33,11 +33,11 @@ function HintedSelectInputOption(props) {
         isMobile && styles.isMobile
       )}
       >
-        <div>{value}</div>
+        <div>{typeof value === 'function' ? value() : value}</div>
 
         {
           hint != null &&
-            <div className={styles.hintText}>
+            <div className={styles.hintText} title={hint}>
               {hint}
             </div>
         }
@@ -48,7 +48,7 @@ function HintedSelectInputOption(props) {
 
 HintedSelectInputOption.propTypes = {
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  value: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   hint: PropTypes.node,
   depth: PropTypes.number,
   isSelected: PropTypes.bool.isRequired,

frontend/src/Components/Form/HintedSelectInputSelectedValue.js

@@ -24,7 +24,7 @@ function HintedSelectInputSelectedValue(props) {
     >
       <div className={styles.valueText}>
         {
-          isMultiSelect &&
+          isMultiSelect ?
             value.map((key, index) => {
               const v = valuesMap[key];
               return (
@@ -32,26 +32,28 @@ function HintedSelectInputSelectedValue(props) {
                   {v ? v.value : key}
                 </Label>
               );
-            })
+            }) :
+            null
         }
 
         {
-          !isMultiSelect && value
+          isMultiSelect ? null : value
         }
       </div>
 
       {
-        hint != null && includeHint &&
+        hint != null && includeHint ?
           <div className={styles.hintText}>
             {hint}
-          </div>
+          </div> :
+          null
       }
     </EnhancedSelectInputSelectedValue>
   );
 }
 
 HintedSelectInputSelectedValue.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   hint: PropTypes.string,
   isMultiSelect: PropTypes.bool.isRequired,

frontend/src/Components/Form/IndexersSelectInputConnector.js

@@ -1,18 +1,20 @@
-import _ from 'lodash';
+import { groupBy, map } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
 import titleCase from 'Utilities/String/titleCase';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
   return createSelector(
     (state, { value }) => value,
-    (state) => state.indexers,
+    createSortedSectionSelector('indexers', sortByProp('name')),
     (value, indexers) => {
       const values = [];
-      const groupedIndexers = _(indexers.items).groupBy((x) => x.protocol).map((val, key) => ({ protocol: key, indexers: val })).value();
+      const groupedIndexers = map(groupBy(indexers.items, 'protocol'), (val, key) => ({ protocol: key, indexers: val }));
 
       groupedIndexers.forEach((element) => {
         values.push({
@@ -21,10 +23,12 @@ function createMapStateToProps() {
         });
 
         if (element.indexers && element.indexers.length > 0) {
-          element.indexers.forEach((subCat) => {
+          element.indexers.forEach((indexer) => {
             values.push({
-              key: subCat.id,
-              value: subCat.name,
+              key: indexer.id,
+              value: indexer.name,
+              hint: `(${indexer.id})`,
+              isDisabled: !indexer.enable,
               parentKey: element.protocol === 'usenet' ? -1 : -2
             });
           });
@@ -49,7 +53,6 @@ class IndexersSelectInputConnector extends Component {
   // Render
 
   render() {
-
     return (
       <EnhancedSelectInput
         {...this.props}

frontend/src/Components/Form/InfoInput.css

@@ -0,0 +1,13 @@
+.message {
+  composes: alert from '~Components/Alert.css';
+
+  a {
+    color: var(--linkColor);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--linkHoverColor);
+      text-decoration: underline;
+    }
+  }
+}

frontend/src/Components/Form/InfoInput.css.d.ts

@@ -1,7 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'markAsFailedButton': string;
+  'message': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Components/Form/InfoInput.js

@@ -1,5 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import { kinds } from 'Helpers/Props';
+import styles from './InfoInput.css';
 
 class InfoInput extends Component {
 
@@ -7,12 +10,15 @@ class InfoInput extends Component {
   // Render
 
   render() {
-    const {
-      value
-    } = this.props;
+    const { value } = this.props;
 
     return (
-      <span dangerouslySetInnerHTML={{ __html: value }} />
+      <Alert
+        kind={kinds.INFO}
+        className={styles.message}
+      >
+        <span dangerouslySetInnerHTML={{ __html: value }} />
+      </Alert>
     );
   }
 }

frontend/src/Components/Form/NumberInput.js

@@ -10,7 +10,7 @@ function parseValue(props, value) {
   } = props;
 
   if (value == null || value === '') {
-    return min;
+    return null;
   }
 
   let newValue = isFloat ? parseFloat(value) : parseInt(value);
@@ -41,7 +41,7 @@ class NumberInput extends Component {
   componentDidUpdate(prevProps, prevState) {
     const { value } = this.props;
 
-    if (value !== prevProps.value && !this.state.isFocused) {
+    if (!isNaN(value) && value !== prevProps.value && !this.state.isFocused) {
       this.setState({
         value: value == null ? '' : value.toString()
       });

frontend/src/Components/Form/PasswordInput.css

@@ -1,5 +0,0 @@
-.input {
-  composes: input from '~Components/Form/TextInput.css';
-
-  font-family: $passwordFamily;
-}

frontend/src/Components/Form/PasswordInput.js

@@ -1,7 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import TextInput from './TextInput';
-import styles from './PasswordInput.css';
 
 // Prevent a user from copying (or cutting) the password from the input
 function onCopy(e) {
@@ -13,17 +11,14 @@ function PasswordInput(props) {
   return (
     <TextInput
       {...props}
+      type="password"
       onCopy={onCopy}
     />
   );
 }
 
 PasswordInput.propTypes = {
-  className: PropTypes.string.isRequired
-};
-
-PasswordInput.defaultProps = {
-  className: styles.input
+  ...TextInput.props
 };
 
 export default PasswordInput;

frontend/src/Components/Form/PathInputConnector.js

@@ -68,6 +68,7 @@ class PathInputConnector extends Component {
 }
 
 PathInputConnector.propTypes = {
+  ...PathInput.props,
   includeFiles: PropTypes.bool.isRequired,
   dispatchFetchPaths: PropTypes.func.isRequired,
   dispatchClearPaths: PropTypes.func.isRequired

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -67,6 +67,7 @@ function ProviderFieldFormGroup(props) {
     name,
     label,
     helpText,
+    helpTextWarning,
     helpLink,
     placeholder,
     value,
@@ -100,6 +101,7 @@ function ProviderFieldFormGroup(props) {
         name={name}
         label={label}
         helpText={helpText}
+        helpTextWarning={helpTextWarning}
         helpLink={helpLink}
         placeholder={placeholder}
         value={value}
@@ -126,6 +128,7 @@ ProviderFieldFormGroup.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.string,
   helpText: PropTypes.string,
+  helpTextWarning: PropTypes.string,
   helpLink: PropTypes.string,
   placeholder: PropTypes.string,
   value: PropTypes.any,

frontend/src/Components/Form/SelectInput.css

@@ -1,7 +1,14 @@
 .select {
+  @add-mixin truncate;
+
   composes: input from '~Components/Form/Input.css';
 
-  padding: 0 11px;
+  padding: 0 30px 0 11px;
+  background-image: none, linear-gradient(-135deg, transparent 50%, var(--inputBackgroundColor) 50%), linear-gradient(-225deg, transparent 50%, var(--inputBackgroundColor) 50%), linear-gradient(var(--inputBackgroundColor) 42%, var(--textColor) 42%);
+  background-position: right 30px center, right bottom, right bottom, right bottom;
+  background-size: 1px 100%, 35px 27px, 30px 35px, 30px 100%;
+  background-repeat: no-repeat;
+  appearance: none;
 }
 
 .hasError {

frontend/src/Components/Form/SelectInput.js

@@ -61,7 +61,7 @@ class SelectInput extends Component {
                 value={key}
                 {...otherOptionProps}
               >
-                {optionValue}
+                {typeof optionValue === 'function' ? optionValue() : optionValue}
               </option>
             );
           })
@@ -75,7 +75,7 @@ SelectInput.propTypes = {
   className: PropTypes.string,
   disabledClassName: PropTypes.string,
   name: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.func]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   isDisabled: PropTypes.bool,
   hasError: PropTypes.bool,

frontend/src/Components/Icon.js

@@ -41,7 +41,7 @@ class Icon extends PureComponent {
       return (
         <span
           className={containerClassName}
-          title={title}
+          title={typeof title === 'function' ? title() : title}
         >
           {icon}
         </span>
@@ -58,7 +58,7 @@ Icon.propTypes = {
   name: PropTypes.object.isRequired,
   kind: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   isSpinning: PropTypes.bool.isRequired,
   fixedWidth: PropTypes.bool.isRequired
 };