Test postgres in non-UTC docker

.devcontainer/Radarr.code-workspace

@@ -1,13 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-// 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": "Radarr",
-  "image": "mcr.microsoft.com/devcontainers/dotnet:1-6.0",
-  "features": {
-    "ghcr.io/devcontainers/features/node:1": {
-      "nodeGypDependencies": true,
-      "version": "16",
-      "nvmVersion": "latest"
-    }
-  },
-  "forwardPorts": [7878],
-  "customizations": {
-    "vscode": {
-      "extensions": ["esbenp.prettier-vscode"]
-    }
-  }
-}

.editorconfig

@@ -19,10 +19,10 @@ indent_size = 4
 dotnet_sort_system_directives_first = true
 
 # Avoid "this." and "Me." if not necessary
-dotnet_style_qualification_for_field = false:refactoring
-dotnet_style_qualification_for_property = false:refactoring
-dotnet_style_qualification_for_method = false:refactoring
-dotnet_style_qualification_for_event = false:refactoring
+dotnet_style_qualification_for_field = false:warning
+dotnet_style_qualification_for_property = false:warning
+dotnet_style_qualification_for_method = false:warning
+dotnet_style_qualification_for_event = false:warning
 
 # Indentation preferences
 csharp_indent_block_contents = true
@@ -32,29 +32,17 @@ csharp_indent_case_contents_when_block = true
 csharp_indent_switch_labels = true
 csharp_indent_labels = flush_left
 
-dotnet_style_qualification_for_field = false:suggestion
-dotnet_style_qualification_for_property = false:suggestion
-dotnet_style_qualification_for_method = false:suggestion
-dotnet_style_qualification_for_event = false:suggestion
 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
-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
+csharp_style_var_for_built_in_types = true:suggestion
+csharp_style_var_when_type_is_apparent = true:suggestion
+csharp_style_var_elsewhere = true:suggestion
 
 # Stylecop Rules
 dotnet_diagnostic.SA0001.severity = none
+dotnet_diagnostic.SA1005.severity = none
 dotnet_diagnostic.SA1025.severity = none
 dotnet_diagnostic.SA1101.severity = none
 dotnet_diagnostic.SA1116.severity = none
@@ -77,7 +65,6 @@ dotnet_diagnostic.SA1406.severity = suggestion
 dotnet_diagnostic.SA1410.severity = suggestion
 dotnet_diagnostic.SA1411.severity = suggestion
 dotnet_diagnostic.SA1413.severity = none
-dotnet_diagnostic.SA1512.severity = none
 dotnet_diagnostic.SA1516.severity = none
 dotnet_diagnostic.SA1600.severity = none
 dotnet_diagnostic.SA1601.severity = none
@@ -176,7 +163,6 @@ dotnet_diagnostic.CA1309.severity = suggestion
 dotnet_diagnostic.CA1310.severity = suggestion
 dotnet_diagnostic.CA1401.severity = suggestion
 dotnet_diagnostic.CA1416.severity = suggestion
-dotnet_diagnostic.CA1419.severity = suggestion
 dotnet_diagnostic.CA1507.severity = suggestion
 dotnet_diagnostic.CA1508.severity = suggestion
 dotnet_diagnostic.CA1707.severity = suggestion
@@ -192,6 +178,9 @@ dotnet_diagnostic.CA1720.severity = suggestion
 dotnet_diagnostic.CA1721.severity = suggestion
 dotnet_diagnostic.CA1724.severity = suggestion
 dotnet_diagnostic.CA1725.severity = suggestion
+dotnet_diagnostic.CA1801.severity = suggestion
+dotnet_diagnostic.CA1802.severity = suggestion
+dotnet_diagnostic.CA1805.severity = suggestion
 dotnet_diagnostic.CA1806.severity = suggestion
 dotnet_diagnostic.CA1810.severity = suggestion
 dotnet_diagnostic.CA1812.severity = suggestion
@@ -203,11 +192,13 @@ dotnet_diagnostic.CA1819.severity = suggestion
 dotnet_diagnostic.CA1822.severity = suggestion
 dotnet_diagnostic.CA1823.severity = suggestion
 dotnet_diagnostic.CA1824.severity = suggestion
-dotnet_diagnostic.CA1848.severity = suggestion
 dotnet_diagnostic.CA2000.severity = suggestion
 dotnet_diagnostic.CA2002.severity = suggestion
 dotnet_diagnostic.CA2007.severity = suggestion
 dotnet_diagnostic.CA2008.severity = suggestion
+dotnet_diagnostic.CA2009.severity = suggestion
+dotnet_diagnostic.CA2010.severity = suggestion
+dotnet_diagnostic.CA2011.severity = suggestion
 dotnet_diagnostic.CA2012.severity = suggestion
 dotnet_diagnostic.CA2013.severity = suggestion
 dotnet_diagnostic.CA2100.severity = suggestion
@@ -238,9 +229,6 @@ dotnet_diagnostic.CA2243.severity = suggestion
 dotnet_diagnostic.CA2244.severity = suggestion
 dotnet_diagnostic.CA2245.severity = suggestion
 dotnet_diagnostic.CA2246.severity = suggestion
-dotnet_diagnostic.CA2249.severity = suggestion
-dotnet_diagnostic.CA2251.severity = suggestion
-dotnet_diagnostic.CA2254.severity = suggestion
 dotnet_diagnostic.CA3061.severity = suggestion
 dotnet_diagnostic.CA3075.severity = suggestion
 dotnet_diagnostic.CA3076.severity = suggestion
@@ -268,9 +256,9 @@ dotnet_diagnostic.CA5392.severity = suggestion
 dotnet_diagnostic.CA5394.severity = suggestion
 dotnet_diagnostic.CA5397.severity = suggestion
 
-dotnet_diagnostic.SYSLIB0006.severity = none
 
-[*.{js,html,hbs,less,css,ts,tsx}]
+
+[*.{js,html,js,hbs,less,css}]
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true

.esprintrc

@@ -0,0 +1,10 @@
+{
+  "paths": [
+    "frontend/src/**/*.js",
+    "src/NzbDrone.Core/Localization/Core/*.json"
+  ],
+  "ignored": [
+    "**/node_modules/**/*"
+  ],
+  "port": 5004
+}

.gitattributes

@@ -3,7 +3,7 @@
 
 # Explicitly set bash scripts to have unix endings
 *.sh text eol=lf
-distribution/osx/Radarr text eol=lf
+macOS/Radarr text eol=lf
 
 # Custom for Visual Studio
 *.cs     diff=csharp

.github/FUNDING.yml

@@ -1,6 +1,6 @@
 # These are supported funding model platforms
 
-github: radarr
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 patreon: # Replace with a single Patreon username
 open_collective: radarr
 ko_fi: # Replace with a single Ko-fi username

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,13 +1,13 @@
 name: Bug Report
-description: 'Report a new bug, if you are not 100% certain this is a bug please go to our Discord first'
+description: 'Report a new bug, if you are not 100% certain this is a bug please go to our Reddit or Discord first'
 labels: ['Type: Bug', 'Status: Needs Triage']
 body:
 - type: checkboxes
   attributes:
     label: Is there an existing issue for this?
-    description: Please search to see if an open or closed issue already exists for the bug you encountered. If a bug exists and is closed note that it may only be fixed in an unstable branch. 
+    description: Please search to see if an issue already exists for the bug you encountered.
     options:
-    - label: I have searched the existing open and closed issues
+    - label: I have searched the existing issues
       required: true
 - type: textarea
   attributes:
@@ -42,14 +42,12 @@ body:
         - **Docker Install**: Yes
         - **Using Reverse Proxy**: No
         - **Browser**: Firefox 90 (If UI related)
-        - **Database**: Sqlite 3.36.0
     value: |
         - OS: 
-        - Radarr: 
-        - Docker Install: 
-        - Using Reverse Proxy: 
-        - Browser: 
-        - Database: 
+        - Radarr:
+        - Docker Install:
+        - Using Reverse Proxy:
+        - Browser:
     render: markdown
   validations:
     required: true
@@ -65,18 +63,11 @@ body:
     required: true
 - type: textarea
   attributes:
-    label: Trace Logs? **Not Optional**
+    label: Trace Logs?
     description: |
       Trace Logs (https://wiki.servarr.com/radarr/troubleshooting#logging-and-log-files) 
-      ***Generally speaking, all bug reports MUST have trace logs provided.***
+      ***Generally speaking, all bug reports must have trace logs provided.***
       Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
       Additionally, any additional info? Screenshots? References? Anything that will give us more context about the issue you are encountering!
   validations:
     required: true
-- type: checkboxes
-  attributes:
-    label: Trace Logs have been provided as applicable. Reports will be closed if the required logs are not provided.
-    description: Trace logs are **generally required** and are not optional 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 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

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

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -5,9 +5,9 @@ body:
 - type: checkboxes
   attributes:
     label: Is there an existing issue for this?
-    description: Please search to see if an open or closed issue already exists for the feature you are requesting. If a request exists and is closed note that it may only be fixed in an unstable branch.
+    description: Please search to see if an issue already exists for the feature you are requesting.
     options:
-    - label: I have searched the existing open and closed issues
+    - label: I have searched the existing issues
       required: true
 - type: textarea
   attributes:

.github/dependabot.yml

@@ -1,12 +0,0 @@
-# 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

@@ -1,16 +0,0 @@
-# Configuration for Label Actions - https://github.com/dessant/label-actions
-
-'Type: Support':
-  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://radarr.video/discord).
-  close: true
-  close-reason: 'not planned'
-
-'Status: Logs Needed':
-  comment: >
-    :wave: @{issue-author}, In order to help you further we'll need to see logs. 
-    You'll need to enable trace logging and replicate the problem that you encountered. 
-    Guidance on how to enable trace logging can be found in 
-    our [troubleshooting guide](https://wiki.servarr.com/radarr/troubleshooting#logging-and-log-files).

.github/labeler.yml

@@ -1,28 +0,0 @@
-'Area: API':
-  - src/Radarr.Api.V3/**/*
-
-'Area: Db-migration':
-  - src/NzbDrone.Core/Datastore/Migration/*
-
-'Area: Download Clients':
-  - src/NzbDrone.Core/Download/Clients/**/*
-
-'Area: Import Lists':
-  - src/NzbDrone.Core/ImportLists/**/*
-
-'Area: Indexer':
-  - src/NzbDrone.Core/Indexers/**/*
-
-'Area: Notifications':
-  - src/NzbDrone.Core/Notifications/**/*
-
-'Area: Organizer':
-  - src/NzbDrone.Core/Organizer/**/*
-
-'Area: Parser':
-  - src/NzbDrone.Core/Parser/**/*
-
-'Area: UI':
-  - frontend/**/*
-  - package.json
-  - yarn.lock

.github/workflows/azuresync.yml

@@ -0,0 +1,41 @@
+name: Sync issue to Azure DevOps work item
+
+on:
+  issues:
+    types:
+      [opened, edited, deleted, closed, reopened, labeled, unlabeled, assigned]
+
+concurrency: azuresync-${{ github.event.issue.number }}
+
+jobs:
+  alert:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: danhellem/github-actions-issue-to-work-item@master
+        if: "${{ contains(github.event.issue.labels.*.name, 'Type: Bug') == true }}"
+        env:
+          ado_token: "${{ secrets.ADO_PERSONAL_ACCESS_TOKEN }}"
+          github_token: "${{ github.token }}"
+          ado_organization: "Servarr"
+          ado_project: "Servarr"
+          ado_area_path: "Servarr\\Radarr"
+          ado_wit: "Bug"
+          ado_new_state: "New"
+          ado_active_state: "Active"
+          ado_close_state: "Closed"
+          ado_bypassrules: true
+          log_level: 100
+      - uses: danhellem/github-actions-issue-to-work-item@master
+        if: "${{ contains(github.event.issue.labels.*.name, 'Type: Bug') == false }}"
+        env:
+          ado_token: "${{ secrets.ADO_PERSONAL_ACCESS_TOKEN }}"
+          github_token: "${{ github.token }}"
+          ado_organization: "Servarr"
+          ado_project: "Servarr"
+          ado_area_path: "Servarr\\Radarr"
+          ado_wit: "User Story"
+          ado_new_state: "New"
+          ado_active_state: "Active"
+          ado_close_state: "Closed"
+          ado_bypassrules: true
+          log_level: 100

.github/workflows/label-actions.yml

@@ -1,17 +0,0 @@
-name: 'Label Actions'
-
-on:
-  issues:
-    types: [labeled, unlabeled]
-
-permissions:
-  contents: read
-  issues: write
-
-jobs:
-  action:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: dessant/label-actions@v3
-        with:
-          process-only: 'issues'

.github/workflows/labeler.yml

@@ -1,12 +0,0 @@
-name: "Pull Request Labeler"
-on:
-  - pull_request_target
-
-jobs:
-  triage:
-    permissions:
-      contents: read
-      pull-requests: write
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/labeler@v4

.github/workflows/lock.yml

@@ -5,22 +5,17 @@ on:
   schedule:
     - cron: '0 0 * * *'
 
-permissions: {}
 jobs:
   lock:
-    permissions:
-      issues: write # to lock issues (dessant/lock-threads)
-      pull-requests: write # to lock PRs (dessant/lock-threads)
-
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@v4
+      - uses: dessant/lock-threads@v2
         with:
           github-token: ${{ github.token }}
-          issue-inactive-days: '90'
-          exclude-issue-created-before: ''
-          exclude-any-issue-labels: ''
-          add-issue-labels: ''
-          issue-comment: ''
+          issue-lock-inactive-days: '90'
+          issue-exclude-created-before: ''
+          issue-exclude-labels: ''
+          issue-lock-labels: ''
+          issue-lock-comment: ''
           issue-lock-reason: 'resolved'
           process-only: ''

.github/workflows/support.yml

@@ -0,0 +1,21 @@
+name: 'Support requests'
+
+on:
+  issues:
+    types: [labeled, unlabeled, reopened]
+
+jobs:
+  support:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dessant/support-requests@v2
+        with:
+          github-token: ${{ github.token }}
+          support-label: 'Type: Support'
+          issue-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://radarr.video/discord) 
+            or [Subreddit](https://reddit.com/r/radarr)
+          close-issue: true
+          lock-issue: false

.gitignore

@@ -118,7 +118,6 @@ src/UI/.idea/*
 node_modules/
 _output*
 _artifacts
-_temp*
 _rawPackage/
 _dotTrace*
 _tests/
@@ -127,7 +126,6 @@ coverage*.xml
 coverage*.json
 setup/Output/
 *.~is
-.mono
 
 # VS outout folders
 bin
@@ -168,8 +166,27 @@ packages.config.md5sum
 
 # Common IntelliJ Platform excludes
 
-# Ignore Rider projects completely for now
-.idea/
+# User specific
+**/.idea/**/workspace.xml
+**/.idea/**/tasks.xml
+**/.idea/shelf/*
+**/.idea/dictionaries
+**/.idea/.idea.Radarr.Posix
+**/.idea/.idea.Radarr.Windows
+
+# Sensitive or high-churn files
+**/.idea/**/dataSources/
+**/.idea/**/dataSources.ids
+**/.idea/**/dataSources.xml
+**/.idea/**/dataSources.local.xml
+**/.idea/**/sqlDataSources.xml
+**/.idea/**/dynamic.xml
+
+# Rider
+# Rider auto-generates .iml files, and contentModel.xml
+**/.idea/**/*.iml
+**/.idea/**/contentModel.xml
+**/.idea/**/modules.xml
 
 # ignore node_modules symlink
 node_modules

.vscode/extensions.json

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

.vscode/launch.json

@@ -1,26 +0,0 @@
-{
-  "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 Radarr",
-      "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/Radarr",
-      "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

@@ -1,44 +0,0 @@
-{
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "label": "build dotnet",
-      "command": "dotnet",
-      "type": "process",
-      "args": [
-        "msbuild",
-        "-restore",
-        "${workspaceFolder}/src/Radarr.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/Radarr.sln",
-        "-property:GenerateFullPaths=true",
-        "-consoleloggerparameters:NoSummary;ForceNoAlign"
-      ],
-      "problemMatcher": "$msCompile"
-    },
-    {
-      "label": "watch",
-      "command": "dotnet",
-      "type": "process",
-      "args": [
-        "watch",
-        "run",
-        "--project",
-        "${workspaceFolder}/src/Radarr.sln"
-      ],
-      "problemMatcher": "$msCompile"
-    }
-  ]
-}

CODE_OF_CONDUCT.md

@@ -1,132 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone, regardless of age, body
-size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, caste, color, religion, or sexual
-identity and orientation.
-
-We pledge to act and interact in ways that contribute to an open, welcoming,
-diverse, inclusive, and healthy community.
-
-## Our Standards
-
-Examples of behavior that contributes to a positive environment for our
-community include:
-
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
-  and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the overall
-  community
-
-Examples of unacceptable behavior include:
-
-* The use of sexualized language or imagery, and sexual attention or advances of
-  any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email address,
-  without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-## Enforcement Responsibilities
-
-Community leaders are responsible for clarifying and enforcing our standards of
-acceptable behavior and will take appropriate and fair corrective action in
-response to any behavior that they deem inappropriate, threatening, offensive,
-or harmful.
-
-Community leaders have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, and will communicate reasons for moderation
-decisions when appropriate.
-
-## Scope
-
-This Code of Conduct applies within all community spaces, and also applies when
-an individual is officially representing the community in public spaces.
-Examples of representing our community include using an official e-mail address,
-posting via an official social media account, or acting as an appointed
-representative at an online or offline event.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at
-<development@radarr.video>.
-All complaints will be reviewed and investigated promptly and fairly.
-
-All community leaders are obligated to respect the privacy and security of the
-reporter of any incident.
-
-## Enforcement Guidelines
-
-Community leaders will follow these Community Impact Guidelines in determining
-the consequences for any action they deem in violation of this Code of Conduct:
-
-### 1. Correction
-
-**Community Impact**: Use of inappropriate language or other behavior deemed
-unprofessional or unwelcome in the community.
-
-**Consequence**: A private, written warning from community leaders, providing
-clarity around the nature of the violation and an explanation of why the
-behavior was inappropriate. A public apology may be requested.
-
-### 2. Warning
-
-**Community Impact**: A violation through a single incident or series of
-actions.
-
-**Consequence**: A warning with consequences for continued behavior. No
-interaction with the people involved, including unsolicited interaction with
-those enforcing the Code of Conduct, for a specified period of time. This
-includes avoiding interactions in community spaces as well as external channels
-like social media. Violating these terms may lead to a temporary or permanent
-ban.
-
-### 3. Temporary Ban
-
-**Community Impact**: A serious violation of community standards, including
-sustained inappropriate behavior.
-
-**Consequence**: A temporary ban from any sort of interaction or public
-communication with the community for a specified period of time. No public or
-private interaction with the people involved, including unsolicited interaction
-with those enforcing the Code of Conduct, is allowed during this period.
-Violating these terms may lead to a permanent ban.
-
-### 4. Permanent Ban
-
-**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior, harassment of an
-individual, or aggression toward or disparagement of classes of individuals.
-
-**Consequence**: A permanent ban from any sort of public interaction within the
-community.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 2.1, available at
-[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
-
-Community Impact Guidelines were inspired by
-[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
-
-For answers to common questions about this code of conduct, see the FAQ at
-[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
-[https://www.contributor-covenant.org/translations][translations].
-
-[homepage]: https://www.contributor-covenant.org
-[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
-[Mozilla CoC]: https://github.com/mozilla/diversity
-[FAQ]: https://www.contributor-covenant.org/faq
-[translations]: https://www.contributor-covenant.org/translations

README.md

@@ -1,8 +1,8 @@
 # Radarr
 
 [![Build Status](https://dev.azure.com/Radarr/Radarr/_apis/build/status/Radarr.Radarr?branchName=develop)](https://dev.azure.com/Radarr/Radarr/_build/latest?definitionId=1&branchName=develop)
-[![Translation status](https://translate.servarr.com/widget/servarr/radarr/svg-badge.svg)](https://translate.servarr.com/engage/servarr/?utm_source=widget)
-[![Docker Pulls](https://img.shields.io/docker/pulls/linuxserver/radarr.svg)](https://wiki.servarr.com/radarr/installation/docker)
+[![Translated](https://translate.servarr.com/widgets/servarr/-/radarr/svg-badge.svg)](https://translate.servarr.com/engage/radarr/?utm_source=widget)
+[![Docker Pulls](https://img.shields.io/docker/pulls/linuxserver/radarr.svg)](https://wiki.servarr.com/radarr/installation#docker)
 ![Github Downloads](https://img.shields.io/github/downloads/Radarr/Radarr/total.svg)
 [![Backers on Open Collective](https://opencollective.com/Radarr/backers/badge.svg)](#backers)
 [![Sponsors on Open Collective](https://opencollective.com/Radarr/sponsors/badge.svg)](#sponsors)
@@ -35,6 +35,7 @@ Note that only one type of a given movie is supported. If you want both an 4k ve
 
 [![Wiki](https://img.shields.io/badge/servarr-wiki-181717.svg?maxAge=60)](https://wiki.servarr.com/radarr)
 [![Discord](https://img.shields.io/badge/discord-chat-7289DA.svg?maxAge=60)](https://radarr.video/discord)
+[![Reddit](https://img.shields.io/badge/reddit-discussion-FF4500.svg?maxAge=60)](https://www.reddit.com/r/Radarr)
 
 Note: GitHub Issues are for Bugs and Feature Requests Only
 
@@ -75,15 +76,6 @@ Thank you to [<img src="/Logo/jetbrains.svg" alt="JetBrains" width="32"> JetBrai
 * [<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/)
 
-## DigitalOcean
-
-This project is also supported by DigitalOcean
-<p>
-  <a href="https://www.digitalocean.com/">
-    <img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_horizontal_blue.svg" width="201px">
-  </a>
-</p>
-
 ### License
 
 * [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)

SECURITY.md

@@ -1,8 +0,0 @@
-# Security Policy
-
-## Reporting a Vulnerability
-
-Please report (suspected) security vulnerabilities on Discord (preferred) to
-any of the Servarr Dev role holders (red names) or via email: development@servarr.com. You will receive a response from
-us within 72 hours. If the issue is confirmed, we will release a patch as soon
-as possible depending on complexity/severity.

azure-pipelines.yml

@@ -9,28 +9,24 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '5.10.3'
+  majorVersion: '4.2.0'
   minorVersion: $[counter('minorVersion', 2000)]
   radarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.424'
-  nodeVersion: '20.X'
-  innoVersion: '6.2.2'
+  dotnetVersion: '6.0.300'
+  nodeVersion: '16.X'
+  innoVersion: '6.2.0'
   windowsImage: 'windows-2022'
   linuxImage: 'ubuntu-20.04'
-  macImage: 'macOS-12'
+  macImage: 'macOS-11'
 
 trigger:
   branches:
     include:
     - develop
     - master
-  paths:
-    exclude:
-      - .github
-      - src/Radarr.Api.*/openapi.json
 
 pr:
   branches:
@@ -38,7 +34,6 @@ pr:
     - develop
   paths:
     exclude:
-    - .github
     - src/NzbDrone.Core/Localization/Core
     - src/Radarr.Api.*/openapi.json
 
@@ -166,10 +161,10 @@ stages:
       pool:
         vmImage: $(imageName)
       steps:
-      - task: UseNode@1
+      - task: NodeTool@0
         displayName: Set Node.js version
         inputs:
-          version: $(nodeVersion)
+          versionSpec: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -216,8 +211,8 @@ stages:
         displayName: Fetch Frontend
       - bash: |
           ./build.sh --packages --installer
-          cp distribution/windows/setup/output/Radarr.*win-x64.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x64-installer.exe
-          cp distribution/windows/setup/output/Radarr.*win-x86.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x86-installer.exe
+          cp setup/output/Radarr.*win-x64.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x64-installer.exe
+          cp setup/output/Radarr.*win-x86.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x86-installer.exe
         displayName: Create Installers
       - publish: $(Build.ArtifactStagingDirectory)
         artifact: 'WindowsInstaller'
@@ -368,7 +363,7 @@ stages:
       - bash: |
           echo "Uploading source maps to sentry"
           curl -sL https://sentry.io/get-cli/ | bash
-          RELEASENAME="Radarr@${RADARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
+          RELEASENAME="${RADARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
           sentry-cli releases new --finalize -p radarr -p radarr-ui -p radarr-update "${RELEASENAME}"
           sentry-cli releases -p radarr-ui files "${RELEASENAME}" upload-sourcemaps _output/UI/ --rewrite
           sentry-cli releases set-commits --auto "${RELEASENAME}"
@@ -541,8 +536,8 @@ stages:
           testRunTitle: '$(testName) Unit Tests'
           failTaskOnFailedTests: true
           
-    - job: Unit_LinuxCore_Postgres14
-      displayName: Unit Native LinuxCore with Postgres14 Database
+    - job: Unit_LinuxCore_Postgres
+      displayName: Unit Native LinuxCore with Postgres Database
       dependsOn: Prepare
       condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       variables:
@@ -554,7 +549,7 @@ stages:
         Radarr__Postgres__Password: 'radarr'
 
       pool:
-        vmImage: ${{ variables.linuxImage }}
+        vmImage: 'ubuntu-18.04'
 
       timeoutInMinutes: 10
         
@@ -594,63 +589,7 @@ stages:
         inputs:
           testResultsFormat: 'NUnit'
           testResultsFiles: '**/TestResult.xml'
-          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: 'Radarr.*.linux-core-x64.tar.gz'
-        artifactName: linux-x64-tests
-        Radarr__Postgres__Host: 'localhost'
-        Radarr__Postgres__Port: '5432'
-        Radarr__Postgres__User: 'radarr'
-        Radarr__Postgres__Password: 'radarr'
-  
-      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: |
-          chmod a+x _tests/ffprobe
-        displayName: Make ffprobe Executable
-      - bash: find ${TESTSFOLDER} -name "Radarr.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=radarr \
-          -e POSTGRES_USER=radarr \
-          -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'
+          testRunTitle: 'LinuxCore Postgres Unit Tests'
           failTaskOnFailedTests: true
 
   - stage: Integration
@@ -736,8 +675,8 @@ stages:
           failTaskOnFailedTests: true
         displayName: Publish Test Results
 
-    - job: Integration_LinuxCore_Postgres14
-      displayName: Integration Native LinuxCore with Postgres14 Database
+    - job: Integration_LinuxCore_Postgres
+      displayName: Integration Native LinuxCore with Postgres Database
       dependsOn: Prepare
       condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       variables:
@@ -748,7 +687,7 @@ stages:
         Radarr__Postgres__Password: 'radarr'
 
       pool:
-        vmImage: ${{ variables.linuxImage }}
+        vmImage: 'ubuntu-18.04'
 
       steps:
         - task: UseDotNet@2
@@ -794,70 +733,7 @@ stages:
           inputs:
             testResultsFormat: 'NUnit'
             testResultsFiles: '**/TestResult.xml'
-            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: 'Radarr.*.linux-core-x64.tar.gz'
-        Radarr__Postgres__Host: 'localhost'
-        Radarr__Postgres__Port: '5432'
-        Radarr__Postgres__User: 'radarr'
-        Radarr__Postgres__Password: 'radarr'
-
-      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/Radarr/. ./bin/
-          displayName: Move Package Contents
-        - bash: |
-            docker run -d --name=postgres15 \
-            -e POSTGRES_PASSWORD=radarr \
-            -e POSTGRES_USER=radarr \
-            -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'
+            testRunTitle: 'Integration LinuxCore Postgres Database Integration Tests'
             failTaskOnFailedTests: true
           displayName: Publish Test Results
 
@@ -885,7 +761,7 @@ stages:
         inputs:
           buildType: 'current'
           artifactName: Packages
-          itemPattern: '**/$(pattern)'
+          itemPattern: '/$(pattern)'
           targetPath: $(Build.ArtifactStagingDirectory)
       - bash: |
           mkdir -p ${BUILD_ARTIFACTSTAGINGDIRECTORY}/bin
@@ -1089,10 +965,10 @@ stages:
       pool:
         vmImage: $(imageName)
       steps:
-      - task: UseNode@1
+      - task: NodeTool@0
         displayName: Set Node.js version
         inputs:
-          version: $(nodeVersion)
+          versionSpec: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -1116,7 +992,7 @@ stages:
         vmImage: ${{ variables.windowsImage }}
       steps:
       - checkout: self # Need history for Sonar analysis
-      - task: SonarCloudPrepare@2
+      - task: SonarCloudPrepare@1
         env:
           SONAR_SCANNER_OPTS: ''
         inputs:
@@ -1128,7 +1004,7 @@ stages:
           cliProjectName: 'RadarrUI'
           cliProjectVersion: '$(radarrVersion)'
           cliSources: './frontend'
-      - task: SonarCloudAnalyze@2
+      - task: SonarCloudAnalyze@1
       
     - job: Api_Docs
       displayName: API Docs
@@ -1205,7 +1081,7 @@ stages:
         submodules: true
       - powershell: Set-Service SCardSvr -StartupType Manual
         displayName: Enable Windows Test Service
-      - task: SonarCloudPrepare@2
+      - task: SonarCloudPrepare@1
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         inputs:
           SonarCloud: 'SonarCloud'
@@ -1223,21 +1099,25 @@ 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@2
+      - task: SonarCloudAnalyze@1
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         displayName: Publish SonarCloud Results
-      - task: reportgenerator@5
+      - task: reportgenerator@4
         displayName: Generate Coverage Report
         inputs:
           reports: '$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml'
           targetdir: '$(Build.SourcesDirectory)/CoverageResults/combined'
           reporttypes: 'HtmlInline_AzurePipelines;Cobertura;Badges'
-          publishCodeCoverageResults: true
+      - task: PublishCodeCoverageResults@1
+        displayName: Publish Coverage Report
+        inputs:
+          codeCoverageTool: 'cobertura'
+          summaryFileLocation: './CoverageResults/combined/Cobertura.xml'
+          reportDirectory: './CoverageResults/combined/'
 
   - stage: Report_Out
     dependsOn:
     - Analyze
-    - Installer
     - Unit_Test
     - Integration
     - Automation
@@ -1263,5 +1143,4 @@ stages:
             SYSTEM_ACCESSTOKEN: $(System.AccessToken)
             DISCORDCHANNELID: $(discordChannelId)
             DISCORDWEBHOOKKEY: $(discordWebhookKey)
-            DISCORDTHREADID: $(discordThreadId)
 

build.sh

@@ -21,7 +21,7 @@ UpdateVersionNumber()
         echo "Updating Version Info"
         sed -i'' -e "s/<AssemblyVersion>[0-9.*]\+<\/AssemblyVersion>/<AssemblyVersion>$RADARRVERSION<\/AssemblyVersion>/g" src/Directory.Build.props
         sed -i'' -e "s/<AssemblyConfiguration>[\$()A-Za-z-]\+<\/AssemblyConfiguration>/<AssemblyConfiguration>${BUILD_SOURCEBRANCHNAME}<\/AssemblyConfiguration>/g" src/Directory.Build.props
-        sed -i'' -e "s/<string>10.0.0.0<\/string>/<string>$RADARRVERSION<\/string>/g" distribution/osx/Radarr.app/Contents/Info.plist
+        sed -i'' -e "s/<string>10.0.0.0<\/string>/<string>$RADARRVERSION<\/string>/g" macOS/Radarr.app/Contents/Info.plist
     fi
 }
 
@@ -184,7 +184,7 @@ PackageMacOSApp()
 
     rm -rf $folder
     mkdir -p $folder
-    cp -r distribution/osx/Radarr.app $folder
+    cp -r macOS/Radarr.app $folder
     mkdir -p $folder/Radarr.app/Contents/MacOS
 
     echo "Copying Binaries"
@@ -246,7 +246,7 @@ BuildInstaller()
     local framework="$1"
     local runtime="$2"
     
-    ./_inno/ISCC.exe distribution/windows/setup/radarr.iss "//DFramework=$framework" "//DRuntime=$runtime"
+    ./_inno/ISCC.exe setup/radarr.iss "//DFramework=$framework" "//DRuntime=$runtime"
 }
 
 InstallInno()
@@ -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.2}.exe"
+    curl -s --output innosetup.exe "https://files.jrsoftware.org/is/6/innosetup-${INNOVERSION:-6.2.0}.exe"
     mkdir _inno
     ./innosetup.exe //portable=1 //silent //currentuser //dir=.\\_inno
     rm innosetup.exe
@@ -392,21 +392,22 @@ then
     fi
 fi
 
-if [[ "$LINT" = "YES" || "$FRONTEND" = "YES" ]];
+if [ "$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

debian/changelog

@@ -0,0 +1,5 @@
+nzbdrone {version} {branch}; urgency=low
+
+  * Automatic Release.
+
+ -- NzbDrone <contact@nzbdrone.com>  Mon, 26 Aug 2013 00:00:00 -0700

debian/compat

@@ -0,0 +1 @@
+8

debian/control

@@ -0,0 +1,12 @@
+Section: web
+Priority: optional
+Maintainer: Sonarr <contact@nzbdrone.com>
+Source: nzbdrone
+Homepage: https://sonarr.tv
+Vcs-Git: git@github.com:Sonarr/Sonarr.git
+Vcs-Browser: https://github.com/Sonarr/Sonarr
+
+Package: nzbdrone
+Architecture: all
+Depends: libmono-cil-dev (>= 3.2), sqlite3 (>= 3.7), mediainfo (>= 0.7.52)
+Description: Sonarr is an internet PVR

debian/copyright

@@ -0,0 +1,24 @@
+Format: http://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
+Upstream-Name: nzbdrone
+Source: https://github.com/Sonarr/Sonarr
+
+Files: *
+Copyright: 2010-2016 Sonarr <hello@sonarr.tv>
+
+License: GPL-3.0+
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+ .
+ This package is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+ .
+ You should have received a copy of the GNU General Public License
+ along with this program. If not, see <http://www.gnu.org/licenses/>.
+ .
+ On Debian systems, the complete text of the GNU General
+ Public License version 3 can be found in "/usr/share/common-licenses/GPL-3".

debian/install

@@ -0,0 +1 @@
+nzbdrone_bin/* opt/NzbDrone

debian/rules

@@ -0,0 +1,13 @@
+#!/usr/bin/make -f
+# -*- makefile -*-
+# Sample debian/rules that uses debhelper.
+# This file was originally written by Joey Hess and Craig Small.
+# As a special exception, when this file is copied by dh-make into a
+# dh-make output file, you may use that output file without restriction.
+# This special exception was added by Craig Small in version 0.37 of dh-make.
+
+# Uncomment this to turn on verbose mode.
+#export DH_VERBOSE=1
+
+%:
+	dh $@ 

docs.sh

@@ -3,9 +3,9 @@ PLATFORM=$1
 if [ "$PLATFORM" = "Windows" ]; then
   RUNTIME="win-x64"
 elif [ "$PLATFORM" = "Linux" ]; then
-  RUNTIME="linux-x64"
+  WHERE="linux-x64"
 elif [ "$PLATFORM" = "Mac" ]; then
-  RUNTIME="osx-x64"
+  WHERE="osx-x64"
 else
   echo "Platform must be provided as first arguement: Windows, Linux or Mac"
   exit 1
@@ -21,24 +21,18 @@ slnFile=src/Radarr.sln
 
 platform=Posix
 
-if [ "$PLATFORM" = "Windows" ]; then
-  application=Radarr.Console.dll
-else
-  application=Radarr.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.6.2 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 6.3.0 Swashbuckle.AspNetCore.Cli
 
-dotnet tool run swagger tofile --output ./src/Radarr.Api.V3/openapi.json "$outputFolder/net6.0/$RUNTIME/$application" v3 &
+dotnet tool run swagger tofile --output ./src/Radarr.Api.V3/openapi.json "$outputFolder/net6.0/$RUNTIME/radarr.console.dll" v3 &
 
 sleep 45
 
 kill %1
 
-exit 0
+exit 0

frontend/.csscomb.json

@@ -0,0 +1,25 @@
+{
+  "remove-empty-rulesets": true,
+  "always-semicolon": true,
+  "color-case": "lower",
+  "block-indent": "  ",
+  "color-shorthand": false,
+  "element-case": "lower",
+  "eof-newline": true,
+  "leading-zero": true,
+  "quotes": "double",
+  "sort-order-fallback": "abc",
+  "space-before-colon": "",
+  "space-after-colon": " ",
+  "space-before-combinator": " ",
+  "space-after-combinator": " ",
+  "space-between-declarations": "\n",
+  "space-before-opening-brace": " ",
+  "space-after-opening-brace": "\n",
+  "space-after-selector-delimiter": " ",
+  "space-before-selector-delimiter": "",
+  "space-before-closing-brace": "\n",
+  "strip-spaces": true,
+  "tab-size": true,
+  "unitless-zero": false
+}

frontend/.esformatter

@@ -0,0 +1,335 @@
+{
+  "indent": {
+    "value": "  ",
+    "FunctionExpression": 1,
+    "ArrayExpression": 1,
+    "ObjectExpression": 1
+  },
+  "lineBreak": {
+    "value": "\n",
+
+    "before": {
+      "ArrayPatternClosing": 0,
+      "ArrayPatternComma": 0,
+      "ArrayPatternOpening": 0,
+      "ArrowFunctionExpressionArrow": 0,
+      "ArrowFunctionExpressionClosingBrace": ">=1",
+      "ArrowFunctionExpressionOpeningBrace": 0,
+      "AssignmentExpression": ">=1",
+      "AssignmentOperator": 0,
+      "BlockStatement": 0,
+      "BreakKeyword": ">=1",
+      "CallExpression": -1,
+      "CallExpressionClosingParentheses": -1,
+      "CallExpressionOpeningParentheses": 0,
+      "CatchClosingBrace": ">=1",
+      "CatchKeyword": 0,
+      "CatchOpeningBrace": 0,
+      "ClassDeclaration": ">=1",
+      "ClassDeclarationClosingBrace": ">=1",
+      "ClassDeclarationOpeningBrace": 0,
+      "ConditionalExpression": ">=1",
+      "DeleteOperator": ">=1",
+      "DoWhileStatement": ">=1",
+      "DoWhileStatementClosingBrace": ">=1",
+      "DoWhileStatementOpeningBrace": 0,
+      "ElseIfStatement": 0,
+      "ElseIfStatementClosingBrace": ">=1",
+      "ElseIfStatementOpeningBrace": 0,
+      "ElseStatement": 0,
+      "ElseStatementClosingBrace": ">=1",
+      "ElseStatementOpeningBrace": 0,
+      "EmptyStatement": -1,
+      "EndOfFile": -1,
+      "FinallyClosingBrace": ">=1",
+      "FinallyKeyword": -1,
+      "FinallyOpeningBrace": 0,
+      "ForInStatement": ">=1",
+      "ForInStatementClosingBrace": ">=1",
+      "ForInStatementExpressionClosing": 0,
+      "ForInStatementExpressionOpening": 0,
+      "ForInStatementOpeningBrace": 0,
+      "ForStatement": ">=1",
+      "ForStatementClosingBrace": ">=1",
+      "ForStatementExpressionClosing": "<2",
+      "ForStatementExpressionOpening": 0,
+      "ForStatementOpeningBrace": 0,
+      "FunctionDeclaration": ">=1",
+      "FunctionDeclarationClosingBrace": ">=1",
+      "FunctionDeclarationOpeningBrace": 0,
+      "FunctionExpression": 0,
+      "FunctionExpressionClosingBrace": 1,
+      "FunctionExpressionOpeningBrace":0,
+      "IIFEClosingParentheses": 0,
+      "IfStatement": ">=1",
+      "IfStatementClosingBrace": ">=1",
+      "IfStatementOpeningBrace": 0,
+      "LogicalExpression": -1,
+      "MemberExpressionClosing": 0,
+      "MemberExpressionOpening": 0,
+      "MemberExpressionPeriod": -1,
+      "MethodDefinition": ">=1",
+      "ObjectExpressionClosingBrace": "<=1",
+      "ObjectPatternClosingBrace": 0,
+      "ObjectPatternComma": 0,
+      "ObjectPatternOpeningBrace": 0,
+      "ParameterDefault": 0,
+      "Property": "<=2",
+      "PropertyValue": 0,
+      "ReturnStatement": -1,
+      "SwitchClosingBrace": ">=1",
+      "SwitchOpeningBrace": 0,
+      "ThisExpression": -1,
+      "ThrowStatement": ">=1",
+      "TryClosingBrace": ">=1",
+      "TryKeyword": -1,
+      "TryOpeningBrace": 0,
+      "VariableDeclaration": ">=1",
+      "VariableDeclarationSemiColon": 0,
+      "VariableDeclarationWithoutInit": ">=1",
+      "VariableName": ">=1",
+      "VariableValue": 0,
+      "WhileStatement": ">=1",
+      "WhileStatementClosingBrace": ">=1",
+      "WhileStatementOpeningBrace": 0
+    },
+
+    "after": {
+      "ArrayPatternClosing": 0,
+      "ArrayPatternComma": 0,
+      "ArrayPatternOpening": 0,
+      "ArrowFunctionExpressionArrow": 0,
+      "ArrowFunctionExpressionClosingBrace": -1,
+      "ArrowFunctionExpressionOpeningBrace": ">=1",
+      "AssignmentExpression": ">=1",
+      "AssignmentOperator": 0,
+      "BlockStatement": 0,
+      "BreakKeyword": -1,
+      "CallExpression": -1,
+      "CallExpressionClosingParentheses": -1,
+      "CallExpressionOpeningParentheses": -1,
+      "CatchClosingBrace": ">=0",
+      "CatchKeyword": 0,
+      "CatchOpeningBrace": ">=1",
+      "ClassDeclaration": ">=1",
+      "ClassDeclarationClosingBrace": ">=1",
+      "ClassDeclarationOpeningBrace": ">=1",
+      "ConditionalExpression": ">=1",
+      "DeleteOperator": ">=1",
+      "DoWhileStatement": ">=1",
+      "DoWhileStatementClosingBrace": 0,
+      "DoWhileStatementOpeningBrace": ">=1",
+      "ElseIfStatement": ">=1",
+      "ElseIfStatementClosingBrace": ">=1",
+      "ElseIfStatementOpeningBrace": ">=1",
+      "ElseStatement": ">=1",
+      "ElseStatementClosingBrace": ">=1",
+      "ElseStatementOpeningBrace": ">=1",
+      "EmptyStatement": -1,
+      "FinallyClosingBrace": ">=1",
+      "FinallyKeyword": -1,
+      "FinallyOpeningBrace": ">=1",
+      "ForInStatement": ">=1",
+      "ForInStatementClosingBrace": ">=1",
+      "ForInStatementExpressionClosing": -1,
+      "ForInStatementExpressionOpening": "<2",
+      "ForInStatementOpeningBrace": ">=1",
+      "ForStatement": ">=1",
+      "ForStatementClosingBrace": ">=1",
+      "ForStatementExpressionClosing": -1,
+      "ForStatementExpressionOpening": "<2",
+      "ForStatementOpeningBrace": ">=1",
+      "FunctionDeclaration": ">=1",
+      "FunctionDeclarationClosingBrace": ">=1",
+      "FunctionDeclarationOpeningBrace": ">=1",
+      "FunctionExpression": 0,
+      "FunctionExpressionClosingBrace": -1,
+      "FunctionExpressionOpeningBrace": 1,
+      "IIFEOpeningParentheses": 0,
+      "IfStatement": ">=1",
+      "IfStatementClosingBrace": ">=1",
+      "IfStatementOpeningBrace": ">=1",
+      "LogicalExpression": -1,
+      "MemberExpressionClosing": 0,
+      "MemberExpressionOpening": 0,
+      "MemberExpressionPeriod": 0,
+      "MethodDefinition": ">=1",
+      "ObjectExpressionOpeningBrace": "<=1",
+      "ObjectPatternClosingBrace": 0,
+      "ObjectPatternComma": 0,
+      "ObjectPatternOpeningBrace": 0,
+      "ParameterDefault": 0,
+      "Property": -1,
+      "PropertyName": 0,
+      "ReturnStatement": -1,
+      "SwitchCaseColon": ">=1",
+      "SwitchClosingBrace": ">=1",
+      "SwitchOpeningBrace": ">=1",
+      "ThisExpression": 0,
+      "ThrowStatement": ">=1",
+      "TryClosingBrace": 0,
+      "TryKeyword": -1,
+      "TryOpeningBrace": ">=1",
+      "VariableDeclaration": ">=1",
+      "VariableDeclarationSemiColon": ">=1",
+      "VariableValue": -1,
+      "WhileStatement": ">=1",
+      "WhileStatementClosingBrace": ">=1",
+      "WhileStatementOpeningBrace": ">=1"
+    }
+  },
+  "whiteSpace": {
+    "value": " ",
+    "removeTrailing": 1,
+    "before": {
+      "ArgumentComma": 0,
+      "ArgumentList": 0,
+      "ArgumentListArrayExpression": 0,
+      "ArgumentListFunctionExpression": 1,
+      "ArgumentListObjectExpression": 0,
+      "ArrayExpressionClosing": 0,
+      "ArrayExpressionComma": 0,
+      "ArrayExpressionOpening": 1,
+      "AssignmentOperator": 1,
+      "BinaryExpression": 0,
+      "BinaryExpressionOperator": 1,
+      "BlockComment": 1,
+      "CallExpression": 1,
+      "CatchClosingBrace": 1,
+      "CatchKeyword": 1,
+      "CatchOpeningBrace": 1,
+      "CatchParameterList": 0,
+      "CommaOperator": 0,
+      "ConditionalExpressionAlternate": 1,
+      "ConditionalExpressionConsequent": 1,
+      "DoWhileStatementClosingBrace": 1,
+      "DoWhileStatementConditional": 1,
+      "DoWhileStatementOpeningBrace": 1,
+      "ElseIfStatementClosingBrace": 1,
+      "ElseIfStatementOpeningBrace": 1,
+      "ElseStatementClosingBrace": 1,
+      "ElseStatementOpeningBrace": 1,
+      "EmptyStatement": 0,
+      "ExpressionClosingParentheses": 0,
+      "FinallyClosingBrace": 1,
+      "FinallyKeyword": -1,
+      "FinallyOpeningBrace": 1,
+      "ForInStatement": 1,
+      "ForInStatementClosingBrace": 1,
+      "ForInStatementExpressionClosing": 0,
+      "ForInStatementExpressionOpening": 1,
+      "ForInStatementOpeningBrace": 1,
+      "ForStatement": 1,
+      "ForStatementClosingBrace": 1,
+      "ForStatementExpressionClosing": 0,
+      "ForStatementExpressionOpening": 1,
+      "ForStatementOpeningBrace": 1,
+      "ForStatementSemicolon": 0,
+      "FunctionDeclarationClosingBrace": 1,
+      "FunctionDeclarationOpeningBrace": 1,
+      "FunctionExpressionClosingBrace": 1,
+      "FunctionExpressionOpeningBrace": 1,
+      "IfStatementClosingBrace": 1,
+      "IfStatementConditionalClosing": 0,
+      "IfStatementConditionalOpening": 1,
+      "IfStatementOpeningBrace": 1,
+      "LineComment": 1,
+      "LogicalExpressionOperator": 1,
+      "MemberExpressionClosing": 0,
+      "ObjectExpressionClosingBrace": 1,
+      "ParameterComma": 0,
+      "ParameterList": 0,
+      "Property": 1,
+      "PropertyName": 1,
+      "PropertyValue": 1,
+      "SwitchDiscriminantClosing": 0,
+      "SwitchDiscriminantOpening": 1,
+      "ThrowKeyword": 1,
+      "TryClosingBrace": 1,
+      "TryKeyword": -1,
+      "TryOpeningBrace": 1,
+      "UnaryExpressionOperator": 0,
+      "VariableName": 1,
+      "VariableValue": 1,
+      "WhileStatementClosingBrace": 1,
+      "WhileStatementConditionalClosing": 0,
+      "WhileStatementConditionalOpening": 1,
+      "WhileStatementOpeningBrace": 1
+    },
+    "after": {
+      "ArgumentComma": 1,
+      "ArgumentList": 0,
+      "ArgumentListArrayExpression": 1,
+      "ArgumentListFunctionExpression": 1,
+      "ArgumentListObjectExpression": 0,
+      "ArrayExpressionClosing": 0,
+      "ArrayExpressionComma": 1,
+      "ArrayExpressionOpening": 0,
+      "AssignmentOperator": 1,
+      "BinaryExpression": 0,
+      "BinaryExpressionOperator": 1,
+      "BlockComment": 1,
+      "CallExpression": 0,
+      "CatchClosingBrace": 1,
+      "CatchKeyword": 1,
+      "CatchOpeningBrace": 1,
+      "CatchParameterList": 0,
+      "CommaOperator": 1,
+      "ConditionalExpressionConsequent": 1,
+      "ConditionalExpressionTest": 1,
+      "DoWhileStatementBody": 1,
+      "DoWhileStatementClosingBrace": 1,
+      "DoWhileStatementOpeningBrace": 1,
+      "ElseIfStatementClosingBrace": 1,
+      "ElseIfStatementOpeningBrace": 1,
+      "ElseStatementClosingBrace": 1,
+      "ElseStatementOpeningBrace": 1,
+      "EmptyStatement": 0,
+      "ExpressionOpeningParentheses": 0,
+      "FinallyClosingBrace": 1,
+      "FinallyKeyword": -1,
+      "FinallyOpeningBrace": 1,
+      "ForInStatement": 1,
+      "ForInStatementClosingBrace": 1,
+      "ForInStatementExpressionClosing": 1,
+      "ForInStatementExpressionOpening": 0,
+      "ForInStatementOpeningBrace": 1,
+      "ForStatement": 1,
+      "ForStatementClosingBrace": 1,
+      "ForStatementExpressionClosing": 1,
+      "ForStatementExpressionOpening": 0,
+      "ForStatementOpeningBrace": 1,
+      "ForStatementSemicolon": 1,
+      "FunctionDeclarationClosingBrace": 0,
+      "FunctionDeclarationOpeningBrace": 0,
+      "FunctionExpressionClosingBrace": 0,
+      "FunctionExpressionOpeningBrace": 0,
+      "FunctionName": 0,
+      "FunctionReservedWord": 0,
+      "IfStatementClosingBrace": 1,
+      "IfStatementConditionalClosing": 0,
+      "IfStatementConditionalOpening": 0,
+      "IfStatementOpeningBrace": 1,
+      "LogicalExpressionOperator": 1,
+      "MemberExpressionOpening": 0,
+      "ObjectExpressionClosingBrace": 0,
+      "ObjectExpressionOpeningBrace": 1,
+      "ParameterComma": 1,
+      "ParameterList": 0,
+      "PropertyName": 0,
+      "PropertyValue": 0,
+      "SwitchDiscriminantClosing": 1,
+      "SwitchDiscriminantOpening": 0,
+      "ThrowKeyword": 1,
+      "TryClosingBrace": 1,
+      "TryKeyword": -1,
+      "TryOpeningBrace": 1,
+      "UnaryExpressionOperator": 0,
+      "VariableName": 1,
+      "WhileStatementClosingBrace": 1,
+      "WhileStatementConditionalClosing": 1,
+      "WhileStatementConditionalOpening": 0,
+      "WhileStatementOpeningBrace": 1
+    }
+  }
+}

frontend/.eslintignore

@@ -1,2 +1 @@
 **/JsLibraries/**
-**/*.css.d.ts

frontend/.eslintrc.js

@@ -1,21 +1,14 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const fs = require('fs');
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const path = require('path');
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const typescriptEslintRecommended = require('@typescript-eslint/eslint-plugin').configs.recommended;
-
-const frontendFolder = __dirname;
 
 const dirs = fs
-  .readdirSync(path.join(frontendFolder, 'src'), { withFileTypes: true })
+  .readdirSync('frontend/src', { withFileTypes: true })
   .filter((dirent) => dirent.isDirectory())
   .map((dirent) => dirent.name)
   .join('|');
 
-module.exports = {
-  root: true,
+const frontendFolder = __dirname;
 
+module.exports = {
   parser: '@babel/eslint-parser',
 
   env: {
@@ -28,8 +21,7 @@ module.exports = {
   globals: {
     expect: false,
     chai: false,
-    sinon: false,
-    JSX: true
+    sinon: false
   },
 
   parserOptions: {
@@ -47,11 +39,8 @@ module.exports = {
   plugins: [
     'filenames',
     'react',
-    'react-hooks',
     'simple-import-sort',
-    'import',
-    '@typescript-eslint',
-    'prettier'
+    'import'
   ],
 
   settings: {
@@ -234,7 +223,7 @@ module.exports = {
     'consistent-this': ['error', 'self'],
     'eol-last': 'error',
     'func-names': 'off',
-    'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
+    'func-style': ['error', 'declaration'],
     indent: ['error', 2, { SwitchCase: 1 }],
     'key-spacing': ['error', { beforeColon: false, afterColon: true }],
     'keyword-spacing': ['error', { before: true, after: true }],
@@ -319,15 +308,11 @@ module.exports = {
     'react/react-in-jsx-scope': 2,
     'react/self-closing-comp': 2,
     'react/sort-comp': 2,
-    'react/jsx-wrap-multilines': 2,
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'error'
+    'react/jsx-wrap-multilines': 2
   },
   overrides: [
     {
-      files: [
-        '*.js'
-      ],
+      files: ['*.js'],
       rules: {
         'simple-import-sort/imports': [
           'error',
@@ -342,91 +327,6 @@ module.exports = {
           }
         ]
       }
-    },
-    {
-      files: [
-        '*.ts',
-        '*.tsx'
-      ],
-
-      parser: '@typescript-eslint/parser',
-      parserOptions: {
-        project: './tsconfig.json'
-      },
-
-      extends: [
-        'prettier'
-      ],
-
-      rules: Object.assign(typescriptEslintRecommended.rules, {
-        '@typescript-eslint/no-unused-vars': [
-          'error',
-          {
-            args: 'after-used',
-            argsIgnorePattern: '^_',
-            ignoreRestSiblings: true
-          }
-        ],
-        '@typescript-eslint/explicit-function-return-type': 'off',
-        'no-shadow': 'off',
-        'prettier/prettier': 'error',
-        'simple-import-sort/imports': [
-          'error',
-          {
-            groups: [
-              // Packages
-              // Absolute Paths
-              // Relative Paths
-              // Css
-              ['^@?\\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'
-      })
-    },
-    {
-      files: [
-        '*.css.d.ts'
-      ],
-      rules: {
-        'filenames/match-exported': 'off',
-        'init-declarations': 'off',
-        'prettier/prettier': 'off'
-      }
     }
   ]
 };

frontend/.jsbeautifyrc

@@ -0,0 +1,12 @@
+{
+  "js": {
+    "indent_size": 2,
+    "indent_char": " ",
+    "indent_level": 2,
+    "indent_with_tabs": false,
+    "preserve_newlines": true,
+    "brace_style": "collapse",
+    "max_preserve_newlines": 2,
+    "jslint_happy": true
+  }
+}

frontend/.prettierignore

@@ -1,10 +0,0 @@
-# Ignore everything recursively
-*
-
-# But not the .ts files
-!*.ts*
-
-*css.d.ts
-
-# Check subdirectories too
-!*/

frontend/.prettierrc.json

@@ -1,6 +0,0 @@
-{
-  "arrowParens": "always",
-  "endOfLine": "auto",
-  "singleQuote": true,
-  "trailingComma": "es5"
-}

frontend/.stylelintrc

@@ -1,12 +1,12 @@
 {
-  "plugins": [
-    "stylelint-order"
-  ],
-  "ignoreFiles": [
-    "frontend/src/Styles/scaffolding.css",
-    "**/*.js"
-  ],
-  "rules": {
+"plugins": [
+  "stylelint-order"
+],
+"ignoreFiles": [
+  "frontend/src/Styles/scaffolding.css",
+  "**/*.js"
+],
+"rules": {
     "at-rule-empty-line-before": [
       "always",
       {
@@ -15,6 +15,9 @@
         ]
       }
     ],
+    "at-rule-name-case": "lower",
+    "at-rule-name-newline-after": "always-multi-line",
+    "at-rule-name-space-after": "always",
     "at-rule-no-unknown": [
       true,
       {
@@ -25,36 +28,83 @@
       }
     ],
     "at-rule-no-vendor-prefix": true,
+    "at-rule-semicolon-newline-after": "always",
+    "at-rule-semicolon-space-before": "never",
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always",
+    "block-closing-brace-space-after": "always-single-line",
+    "block-closing-brace-space-before": "always-single-line",
     "block-no-empty": true,
+    "block-opening-brace-newline-after": "always",
+    "block-opening-brace-newline-before": "never-single-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-opening-brace-space-before": "always",
+    "color-hex-case": "lower",
     "color-hex-length": "short",
     "color-named": "never",
     "color-no-invalid-hex": true,
     "comment-whitespace-inside": "always",
+    "declaration-bang-space-after": "never",
+    "declaration-bang-space-before": "always",
     "declaration-block-no-duplicate-properties": [
       true,
       {
         "ignoreProperties": [
-          "composes"
+            "composes"
         ]
       }
     ],
     "declaration-block-no-redundant-longhand-properties": true,
     "declaration-block-no-shorthand-property-overrides": true,
+    "declaration-block-semicolon-newline-after": "always",
+    "declaration-block-semicolon-newline-before": "never-multi-line",
+    "declaration-block-semicolon-space-before": "never",
     "declaration-block-single-line-max-declarations": 1,
+    "declaration-block-trailing-semicolon": "always",
+    "declaration-colon-space-after": "always",
+    "declaration-colon-space-before": "never",
     "font-family-name-quotes": "always-unless-keyword",
     "function-calc-no-unspaced-operator": true,
+    "function-comma-newline-after": "never-multi-line",
+    "function-comma-newline-before": "never-multi-line",
+    "function-comma-space-after": "always",
+    "function-comma-space-before": "never",
     "function-linear-gradient-no-nonstandard-direction": true,
     "function-name-case": "lower",
+    "function-parentheses-newline-inside": "never-multi-line",
+    "function-parentheses-space-inside": "never",
     "function-url-quotes": "always",
     "function-url-scheme-disallowed-list": [
       "data"
     ],
+    "function-whitespace-after": "always",
+    "indentation": 2,
     "keyframe-declaration-no-important": true,
     "length-zero-no-unit": true,
+    "max-empty-lines": 1,
+    "max-line-length": [
+      100,
+      {
+        "ignore": [
+          "non-comments"
+        ]
+      }
+    ],
     "max-nesting-depth": 2,
+    "media-feature-colon-space-after": "always",
+    "media-feature-colon-space-before": "never",
+    "media-feature-name-case": "lower",
     "media-feature-name-no-vendor-prefix": true,
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "always",
     "no-empty-source": true,
+    "no-eol-whitespace": true,
+    "no-extra-semicolons": true,
     "no-invalid-double-slash-comments": true,
+    "no-missing-end-of-source-newline": true,
+    "number-leading-zero": "always",
+    "number-no-trailing-zeros": true,
     "order/order": [
       "custom-properties",
       "dollar-variables",
@@ -82,7 +132,6 @@
           "right",
           "bottom",
           "left",
-          "inset",
           "z-index",
           "display",
           "visibility",
@@ -294,33 +343,54 @@
         ]
       }
     ],
+    "property-case": "lower",
     "property-no-vendor-prefix": true,
     "rule-empty-line-before": [
       "always",
       {
         "except": [
-          "first-nested"
+            "first-nested"
         ],
         "ignore": [
-          "after-comment"
+            "after-comment"
         ]
       }
     ],
+    "selector-attribute-brackets-space-inside": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-operator-space-before": "never",
     "selector-attribute-quotes": "never",
     "selector-class-pattern": "^[A-Za-z0-9]+$",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-descendant-combinator-no-non-space": true,
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-newline-before": "never-multi-line",
+    "selector-list-comma-space-before": "never",
     "selector-max-attribute": 0,
     "selector-max-class": 3,
     "selector-max-compound-selectors": 3,
+    "selector-max-empty-lines": 0,
     "selector-max-id": 0,
     "selector-max-universal": 0,
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-pseudo-element-case": "lower",
     "selector-pseudo-element-colon-notation": "double",
     "selector-pseudo-element-no-unknown": true,
     "selector-type-case": "lower",
     "selector-type-no-unknown": true,
     "shorthand-property-no-redundant-values": true,
     "string-no-newline": true,
+    "string-quotes": "single",
     "time-min-milliseconds": 100,
+    "unit-case": "lower",
     "unit-no-unknown": true,
+    "value-list-comma-newline-after": "never-multi-line",
+    "value-list-comma-newline-before": "never-multi-line",
+    "value-list-comma-space-after": "always",
+    "value-list-comma-space-before": "never",
+    "value-list-max-empty-lines": 0,
     "value-no-vendor-prefix": true
   }
-}
+}

frontend/.vscode/extensions.json

@@ -1,7 +0,0 @@
-{
-    "recommendations": [
-        "stylelint.vscode-stylelint",
-        "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode"
-    ]
-}

frontend/.vscode/settings.json

@@ -1,23 +0,0 @@
-// Place your settings in this file to overwrite default and user settings.
-{
-  "files.insertFinalNewline": true,
-
-  "files.exclude": {
-    "**/node_modules": true,
-    "**/*.d.css": true
-  },
-
-  "editor.formatOnSave": false,
-  "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit"
-  },
-
-  "typescript.preferences.quoteStyle": "single",
-
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact"
-  ],
-}

frontend/babel.config.js

@@ -2,25 +2,22 @@ const loose = true;
 
 module.exports = {
   plugins: [
-    '@babel/plugin-transform-logical-assignment-operators',
-
     // Stage 1
     '@babel/plugin-proposal-export-default-from',
-    ['@babel/plugin-transform-optional-chaining', { loose }],
-    ['@babel/plugin-transform-nullish-coalescing-operator', { loose }],
+    ['@babel/plugin-proposal-optional-chaining', { loose }],
+    ['@babel/plugin-proposal-nullish-coalescing-operator', { loose }],
 
     // Stage 2
-    '@babel/plugin-transform-export-namespace-from',
+    '@babel/plugin-proposal-export-namespace-from',
 
     // Stage 3
-    ['@babel/plugin-transform-class-properties', { loose }],
+    ['@babel/plugin-proposal-class-properties', { loose }],
     '@babel/plugin-syntax-dynamic-import'
   ],
   env: {
     development: {
       presets: [
-        ['@babel/preset-react', { development: true }],
-        '@babel/preset-typescript'
+        ['@babel/preset-react', { development: true }]
       ],
       plugins: [
         'babel-plugin-inline-classnames'
@@ -28,8 +25,7 @@ module.exports = {
     },
     production: {
       presets: [
-        '@babel/preset-react',
-        '@babel/preset-typescript'
+        '@babel/preset-react'
       ],
       plugins: [
         'babel-plugin-transform-react-remove-prop-types'

frontend/build/webpack.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
 const webpack = require('webpack');
 const FileManagerPlugin = require('filemanager-webpack-plugin');
@@ -6,7 +5,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const LiveReloadPlugin = require('webpack-livereload-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 module.exports = (env) => {
   const uiFolder = 'UI';
@@ -36,22 +34,17 @@ module.exports = (env) => {
     },
 
     entry: {
-      index: 'index.ts'
+      index: 'index.js'
     },
 
     resolve: {
-      extensions: [
-        '.ts',
-        '.tsx',
-        '.js'
-      ],
       modules: [
         srcFolder,
         path.join(srcFolder, 'Shims'),
         'node_modules'
       ],
       alias: {
-        jquery: 'jquery/dist/jquery.min'
+        jquery: 'jquery/src/jquery'
       },
       fallback: {
         buffer: false,
@@ -66,23 +59,23 @@ module.exports = (env) => {
     output: {
       path: distFolder,
       publicPath: '/',
-      filename: isProduction ? '[name]-[contenthash].js' : '[name].js',
+      filename: '[name].js',
       sourceMapFilename: '[file].map'
     },
 
     optimization: {
       moduleIds: 'deterministic',
-      chunkIds: isProduction ? 'deterministic' : 'named'
+      chunkIds: 'named',
+      splitChunks: {
+        chunks: 'initial',
+        name: 'vendors'
+      }
     },
 
     performance: {
       hints: false
     },
 
-    experiments: {
-      topLevelAwait: true
-    },
-
     plugins: [
       new webpack.DefinePlugin({
         __DEV__: !isProduction,
@@ -90,15 +83,13 @@ module.exports = (env) => {
       }),
 
       new MiniCssExtractPlugin({
-        filename: 'Content/styles.css',
-        chunkFilename: isProduction ? 'Content/[id]-[chunkhash].css' : 'Content/[id].css'
+        filename: 'Content/styles.css'
       }),
 
       new HtmlWebpackPlugin({
         template: 'frontend/src/index.ejs',
         filename: 'index.html',
-        publicPath: '/',
-        inject: false
+        publicPath: '/'
       }),
 
       new FileManagerPlugin({
@@ -139,8 +130,6 @@ module.exports = (env) => {
         }
       }),
 
-      new ForkTsCheckerWebpackPlugin(),
-
       new LiveReloadPlugin()
     ],
 
@@ -164,7 +153,7 @@ module.exports = (env) => {
           }
         },
         {
-          test: [/\.jsx?$/, /\.tsx?$/],
+          test: /\.js?$/,
           exclude: /(node_modules|JsLibraries)/,
           use: [
             {
@@ -195,13 +184,12 @@ module.exports = (env) => {
           exclude: /(node_modules|globals.css)/,
           use: [
             { loader: MiniCssExtractPlugin.loader },
-            { loader: 'css-modules-typescript-loader' },
             {
               loader: 'css-loader',
               options: {
                 importLoaders: 1,
                 modules: {
-                  localIdentName: isProduction ? '[name]/[local]/[hash:base64:5]' : '[name]/[local]'
+                  localIdentName: '[name]/[local]/[hash:base64:5]'
                 }
               }
             },
@@ -235,7 +223,7 @@ module.exports = (env) => {
             {
               loader: 'url-loader',
               options: {
-                limit: 10240,
+                limit: 24096,
                 mimetype: 'application/font-woff',
                 emitFile: false,
                 name: 'Content/Fonts/[name].[ext]'
@@ -245,11 +233,12 @@ module.exports = (env) => {
         },
 
         {
-          test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          test: /\.(ttf|eot|eot?#iefix|gif|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
           use: [
             {
               loader: 'file-loader',
               options: {
+                limit: 24096,
                 emitFile: false,
                 name: 'Content/Fonts/[name].[ext]'
               }
@@ -264,19 +253,18 @@ module.exports = (env) => {
     config.resolve.alias['react-dom$'] = 'react-dom/profiling';
     config.resolve.alias['scheduler/tracing'] = 'scheduler/tracing-profiling';
 
-    config.optimization = {
-      minimize: true,
-      minimizer: [
-        new TerserPlugin({
-          terserOptions: {
-            sourceMap: true, // Must be set to true if using source-maps in production
-            mangle: false,
-            keep_classnames: true,
-            keep_fnames: true
-          }
-        })
-      ]
-    };
+    config.optimization.minimizer = [
+      new TerserPlugin({
+        cache: true,
+        parallel: true,
+        sourceMap: true, // Must be set to true if using source-maps in production
+        terserOptions: {
+          mangle: false,
+          keep_classnames: true,
+          keep_fnames: true
+        }
+      })
+    ];
   }
 
   return config;

frontend/build/webpack/css-variables-loader.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line filenames/match-exported
 const loaderUtils = require('loader-utils');
 
 module.exports = function cssVariablesLoader(source) {

frontend/postcss.config.js

@@ -1,6 +1,7 @@
 const reload = require('require-nocache')(module);
 
 const cssVarsFiles = [
+  './src/Styles/Variables/colors',
   './src/Styles/Variables/dimensions',
   './src/Styles/Variables/fonts',
   './src/Styles/Variables/animations',
@@ -16,7 +17,6 @@ const mixinsFiles = [
 
 module.exports = {
   plugins: [
-    'autoprefixer',
     ['postcss-mixins', {
       mixinsFiles
     }],
@@ -29,4 +29,4 @@ module.exports = {
     'postcss-color-function',
     'postcss-nested'
   ]
-};
+};

frontend/src/.vscode/settings.json

@@ -0,0 +1,4 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  "files.insertFinalNewline": true
+}

frontend/src/Activity/Blocklist/Blocklist.js

@@ -0,0 +1,235 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import TablePager from 'Components/Table/TablePager';
+import { align, icons, kinds } from 'Helpers/Props';
+import getRemovedItems from 'Utilities/Object/getRemovedItems';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import BlocklistRowConnector from './BlocklistRowConnector';
+
+class Blocklist extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      allSelected: false,
+      allUnselected: false,
+      lastToggled: null,
+      selectedState: {},
+      isConfirmRemoveModalOpen: false,
+      items: props.items
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items
+    } = this.props;
+
+    if (hasDifferentItems(prevProps.items, items)) {
+      this.setState((state) => {
+        return {
+          ...removeOldSelectedState(state, getRemovedItems(prevProps.items, items)),
+          items
+        };
+      });
+
+      return;
+    }
+  }
+
+  //
+  // Control
+
+  getSelectedIds = () => {
+    return getSelectedIds(this.state.selectedState);
+  };
+
+  //
+  // Listeners
+
+  onSelectAllChange = ({ value }) => {
+    this.setState(selectAll(this.state.selectedState, value));
+  };
+
+  onSelectedChange = ({ id, value, shiftKey = false }) => {
+    this.setState((state) => {
+      return toggleSelected(state, this.props.items, id, value, shiftKey);
+    });
+  };
+
+  onRemoveSelectedPress = () => {
+    this.setState({ isConfirmRemoveModalOpen: true });
+  };
+
+  onRemoveSelectedConfirmed = () => {
+    this.props.onRemoveSelected(this.getSelectedIds());
+    this.setState({ isConfirmRemoveModalOpen: false });
+  };
+
+  onConfirmRemoveModalClose = () => {
+    this.setState({ isConfirmRemoveModalOpen: false });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      columns,
+      totalRecords,
+      isRemoving,
+      isClearingBlocklistExecuting,
+      onClearBlocklistPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      allSelected,
+      allUnselected,
+      selectedState,
+      isConfirmRemoveModalOpen
+    } = this.state;
+
+    const selectedIds = this.getSelectedIds();
+
+    return (
+      <PageContent title={translate('Blocklist')}>
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label={translate('RemoveSelected')}
+              iconName={icons.REMOVE}
+              isDisabled={!selectedIds.length}
+              isSpinning={isRemoving}
+              onPress={this.onRemoveSelectedPress}
+            />
+
+            <PageToolbarButton
+              label={translate('Clear')}
+              iconName={icons.CLEAR}
+              isSpinning={isClearingBlocklistExecuting}
+              onPress={onClearBlocklistPress}
+            />
+          </PageToolbarSection>
+
+          <PageToolbarSection alignContent={align.RIGHT}>
+            <TableOptionsModalWrapper
+              {...otherProps}
+              columns={columns}
+            >
+              <PageToolbarButton
+                label={translate('Options')}
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBody>
+          {
+            isFetching && !isPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!error &&
+              <div>
+                {translate('UnableToLoadBlocklist')}
+              </div>
+          }
+
+          {
+            isPopulated && !error && !items.length &&
+              <div>
+                {translate('NoHistory')}
+              </div>
+          }
+
+          {
+            isPopulated && !error && !!items.length &&
+              <div>
+                <Table
+                  selectAll={true}
+                  allSelected={allSelected}
+                  allUnselected={allUnselected}
+                  columns={columns}
+                  {...otherProps}
+                  onSelectAllChange={this.onSelectAllChange}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return (
+                          <BlocklistRowConnector
+                            key={item.id}
+                            isSelected={selectedState[item.id] || false}
+                            columns={columns}
+                            {...item}
+                            onSelectedChange={this.onSelectedChange}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
+
+                <TablePager
+                  totalRecords={totalRecords}
+                  isFetching={isFetching}
+                  {...otherProps}
+                />
+              </div>
+          }
+        </PageContentBody>
+
+        <ConfirmModal
+          isOpen={isConfirmRemoveModalOpen}
+          kind={kinds.DANGER}
+          title={translate('RemoveSelected')}
+          message={translate('AreYouSureYouWantToRemoveTheSelectedItemsFromBlocklist')}
+          confirmLabel={translate('RemoveSelected')}
+          onConfirm={this.onRemoveSelectedConfirmed}
+          onCancel={this.onConfirmRemoveModalClose}
+        />
+      </PageContent>
+    );
+  }
+}
+
+Blocklist.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  totalRecords: PropTypes.number,
+  isRemoving: PropTypes.bool.isRequired,
+  isClearingBlocklistExecuting: PropTypes.bool.isRequired,
+  onRemoveSelected: PropTypes.func.isRequired,
+  onClearBlocklistPress: PropTypes.func.isRequired
+};
+
+export default Blocklist;

frontend/src/Activity/Blocklist/Blocklist.tsx

@@ -1,329 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { SelectProvider } from 'App/SelectContext';
-import AppState from 'App/State/AppState';
-import * as commandNames from 'Commands/commandNames';
-import Alert from 'Components/Alert';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import FilterMenu from 'Components/Menu/FilterMenu';
-import ConfirmModal from 'Components/Modal/ConfirmModal';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
-import TablePager from 'Components/Table/TablePager';
-import usePaging from 'Components/Table/usePaging';
-import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
-import usePrevious from 'Helpers/Hooks/usePrevious';
-import useSelectState from 'Helpers/Hooks/useSelectState';
-import { align, icons, kinds } from 'Helpers/Props';
-import {
-  clearBlocklist,
-  fetchBlocklist,
-  gotoBlocklistPage,
-  removeBlocklistItems,
-  setBlocklistFilter,
-  setBlocklistSort,
-  setBlocklistTableOption,
-} from 'Store/Actions/blocklistActions';
-import { executeCommand } from 'Store/Actions/commandActions';
-import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
-import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
-import { CheckInputChanged } from 'typings/inputs';
-import { SelectStateInputProps } from 'typings/props';
-import { TableOptionsChangePayload } from 'typings/Table';
-import {
-  registerPagePopulator,
-  unregisterPagePopulator,
-} from 'Utilities/pagePopulator';
-import translate from 'Utilities/String/translate';
-import getSelectedIds from 'Utilities/Table/getSelectedIds';
-import BlocklistFilterModal from './BlocklistFilterModal';
-import BlocklistRow from './BlocklistRow';
-
-function Blocklist() {
-  const requestCurrentPage = useCurrentPage();
-
-  const {
-    isFetching,
-    isPopulated,
-    error,
-    items,
-    columns,
-    selectedFilterKey,
-    filters,
-    sortKey,
-    sortDirection,
-    page,
-    pageSize,
-    totalPages,
-    totalRecords,
-    isRemoving,
-  } = useSelector((state: AppState) => state.blocklist);
-
-  const customFilters = useSelector(createCustomFiltersSelector('blocklist'));
-  const isClearingBlocklistExecuting = useSelector(
-    createCommandExecutingSelector(commandNames.CLEAR_BLOCKLIST)
-  );
-  const dispatch = useDispatch();
-
-  const [isConfirmRemoveModalOpen, setIsConfirmRemoveModalOpen] =
-    useState(false);
-  const [isConfirmClearModalOpen, setIsConfirmClearModalOpen] = useState(false);
-
-  const [selectState, setSelectState] = useSelectState();
-  const { allSelected, allUnselected, selectedState } = selectState;
-
-  const selectedIds = useMemo(() => {
-    return getSelectedIds(selectedState);
-  }, [selectedState]);
-
-  const wasClearingBlocklistExecuting = usePrevious(
-    isClearingBlocklistExecuting
-  );
-
-  const handleSelectAllChange = useCallback(
-    ({ value }: CheckInputChanged) => {
-      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
-    },
-    [items, setSelectState]
-  );
-
-  const handleSelectedChange = useCallback(
-    ({ id, value, shiftKey = false }: SelectStateInputProps) => {
-      setSelectState({
-        type: 'toggleSelected',
-        items,
-        id,
-        isSelected: value,
-        shiftKey,
-      });
-    },
-    [items, setSelectState]
-  );
-
-  const handleRemoveSelectedPress = useCallback(() => {
-    setIsConfirmRemoveModalOpen(true);
-  }, [setIsConfirmRemoveModalOpen]);
-
-  const handleRemoveSelectedConfirmed = useCallback(() => {
-    dispatch(removeBlocklistItems({ ids: selectedIds }));
-    setIsConfirmRemoveModalOpen(false);
-  }, [selectedIds, setIsConfirmRemoveModalOpen, dispatch]);
-
-  const handleConfirmRemoveModalClose = useCallback(() => {
-    setIsConfirmRemoveModalOpen(false);
-  }, [setIsConfirmRemoveModalOpen]);
-
-  const handleClearBlocklistPress = useCallback(() => {
-    setIsConfirmClearModalOpen(true);
-  }, [setIsConfirmClearModalOpen]);
-
-  const handleClearBlocklistConfirmed = useCallback(() => {
-    dispatch(executeCommand({ name: commandNames.CLEAR_BLOCKLIST }));
-    setIsConfirmClearModalOpen(false);
-  }, [setIsConfirmClearModalOpen, dispatch]);
-
-  const handleConfirmClearModalClose = useCallback(() => {
-    setIsConfirmClearModalOpen(false);
-  }, [setIsConfirmClearModalOpen]);
-
-  const {
-    handleFirstPagePress,
-    handlePreviousPagePress,
-    handleNextPagePress,
-    handleLastPagePress,
-    handlePageSelect,
-  } = usePaging({
-    page,
-    totalPages,
-    gotoPage: gotoBlocklistPage,
-  });
-
-  const handleFilterSelect = useCallback(
-    (selectedFilterKey: string) => {
-      dispatch(setBlocklistFilter({ selectedFilterKey }));
-    },
-    [dispatch]
-  );
-
-  const handleSortPress = useCallback(
-    (sortKey: string) => {
-      dispatch(setBlocklistSort({ sortKey }));
-    },
-    [dispatch]
-  );
-
-  const handleTableOptionChange = useCallback(
-    (payload: TableOptionsChangePayload) => {
-      dispatch(setBlocklistTableOption(payload));
-
-      if (payload.pageSize) {
-        dispatch(gotoBlocklistPage({ page: 1 }));
-      }
-    },
-    [dispatch]
-  );
-
-  useEffect(() => {
-    if (requestCurrentPage) {
-      dispatch(fetchBlocklist());
-    } else {
-      dispatch(gotoBlocklistPage({ page: 1 }));
-    }
-
-    return () => {
-      dispatch(clearBlocklist());
-    };
-  }, [requestCurrentPage, dispatch]);
-
-  useEffect(() => {
-    const repopulate = () => {
-      dispatch(fetchBlocklist());
-    };
-
-    registerPagePopulator(repopulate);
-
-    return () => {
-      unregisterPagePopulator(repopulate);
-    };
-  }, [dispatch]);
-
-  useEffect(() => {
-    if (wasClearingBlocklistExecuting && !isClearingBlocklistExecuting) {
-      dispatch(gotoBlocklistPage({ page: 1 }));
-    }
-  }, [isClearingBlocklistExecuting, wasClearingBlocklistExecuting, dispatch]);
-
-  return (
-    <SelectProvider items={items}>
-      <PageContent title={translate('Blocklist')}>
-        <PageToolbar>
-          <PageToolbarSection>
-            <PageToolbarButton
-              label={translate('RemoveSelected')}
-              iconName={icons.REMOVE}
-              isDisabled={!selectedIds.length}
-              isSpinning={isRemoving}
-              onPress={handleRemoveSelectedPress}
-            />
-
-            <PageToolbarButton
-              label={translate('Clear')}
-              iconName={icons.CLEAR}
-              isDisabled={!items.length}
-              isSpinning={isClearingBlocklistExecuting}
-              onPress={handleClearBlocklistPress}
-            />
-          </PageToolbarSection>
-
-          <PageToolbarSection alignContent={align.RIGHT}>
-            <TableOptionsModalWrapper
-              columns={columns}
-              pageSize={pageSize}
-              onTableOptionChange={handleTableOptionChange}
-            >
-              <PageToolbarButton
-                label={translate('Options')}
-                iconName={icons.TABLE}
-              />
-            </TableOptionsModalWrapper>
-
-            <FilterMenu
-              alignMenu={align.RIGHT}
-              selectedFilterKey={selectedFilterKey}
-              filters={filters}
-              customFilters={customFilters}
-              filterModalConnectorComponent={BlocklistFilterModal}
-              onFilterSelect={handleFilterSelect}
-            />
-          </PageToolbarSection>
-        </PageToolbar>
-
-        <PageContentBody>
-          {isFetching && !isPopulated ? <LoadingIndicator /> : null}
-
-          {!isFetching && !!error ? (
-            <Alert kind={kinds.DANGER}>{translate('BlocklistLoadError')}</Alert>
-          ) : null}
-
-          {isPopulated && !error && !items.length ? (
-            <Alert kind={kinds.INFO}>
-              {selectedFilterKey === 'all'
-                ? translate('NoBlocklistItems')
-                : translate('BlocklistFilterHasNoItems')}
-            </Alert>
-          ) : null}
-
-          {isPopulated && !error && !!items.length ? (
-            <div>
-              <Table
-                selectAll={true}
-                allSelected={allSelected}
-                allUnselected={allUnselected}
-                columns={columns}
-                pageSize={pageSize}
-                sortKey={sortKey}
-                sortDirection={sortDirection}
-                onTableOptionChange={handleTableOptionChange}
-                onSelectAllChange={handleSelectAllChange}
-                onSortPress={handleSortPress}
-              >
-                <TableBody>
-                  {items.map((item) => {
-                    return (
-                      <BlocklistRow
-                        key={item.id}
-                        isSelected={selectedState[item.id] || false}
-                        columns={columns}
-                        {...item}
-                        onSelectedChange={handleSelectedChange}
-                      />
-                    );
-                  })}
-                </TableBody>
-              </Table>
-              <TablePager
-                page={page}
-                totalPages={totalPages}
-                totalRecords={totalRecords}
-                isFetching={isFetching}
-                onFirstPagePress={handleFirstPagePress}
-                onPreviousPagePress={handlePreviousPagePress}
-                onNextPagePress={handleNextPagePress}
-                onLastPagePress={handleLastPagePress}
-                onPageSelect={handlePageSelect}
-              />
-            </div>
-          ) : null}
-        </PageContentBody>
-
-        <ConfirmModal
-          isOpen={isConfirmRemoveModalOpen}
-          kind={kinds.DANGER}
-          title={translate('RemoveSelected')}
-          message={translate('RemoveSelectedBlocklistMessageText')}
-          confirmLabel={translate('RemoveSelected')}
-          onConfirm={handleRemoveSelectedConfirmed}
-          onCancel={handleConfirmRemoveModalClose}
-        />
-
-        <ConfirmModal
-          isOpen={isConfirmClearModalOpen}
-          kind={kinds.DANGER}
-          title={translate('ClearBlocklist')}
-          message={translate('ClearBlocklistMessageText')}
-          confirmLabel={translate('Clear')}
-          onConfirm={handleClearBlocklistConfirmed}
-          onCancel={handleConfirmClearModalClose}
-        />
-      </PageContent>
-    </SelectProvider>
-  );
-}
-
-export default Blocklist;

frontend/src/Activity/Blocklist/BlocklistConnector.js

@@ -0,0 +1,152 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import withCurrentPage from 'Components/withCurrentPage';
+import * as blocklistActions from 'Store/Actions/blocklistActions';
+import { executeCommand } from 'Store/Actions/commandActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import Blocklist from './Blocklist';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.blocklist,
+    createCommandExecutingSelector(commandNames.CLEAR_BLOCKLIST),
+    (blocklist, isClearingBlocklistExecuting) => {
+      return {
+        isClearingBlocklistExecuting,
+        ...blocklist
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...blocklistActions,
+  executeCommand
+};
+
+class BlocklistConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchBlocklist,
+      gotoBlocklistFirstPage
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchBlocklist();
+    } else {
+      gotoBlocklistFirstPage();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.isClearingBlocklistExecuting && !this.props.isClearingBlocklistExecuting) {
+      this.props.gotoBlocklistFirstPage();
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.clearBlocklist();
+    unregisterPagePopulator(this.repopulate);
+  }
+
+  //
+  // Control
+
+  repopulate = () => {
+    this.props.fetchBlocklist();
+  };
+  //
+  // Listeners
+
+  onFirstPagePress = () => {
+    this.props.gotoBlocklistFirstPage();
+  };
+
+  onPreviousPagePress = () => {
+    this.props.gotoBlocklistPreviousPage();
+  };
+
+  onNextPagePress = () => {
+    this.props.gotoBlocklistNextPage();
+  };
+
+  onLastPagePress = () => {
+    this.props.gotoBlocklistLastPage();
+  };
+
+  onPageSelect = (page) => {
+    this.props.gotoBlocklistPage({ page });
+  };
+
+  onRemoveSelected = (ids) => {
+    this.props.removeBlocklistItems({ ids });
+  };
+
+  onSortPress = (sortKey) => {
+    this.props.setBlocklistSort({ sortKey });
+  };
+
+  onTableOptionChange = (payload) => {
+    this.props.setBlocklistTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoBlocklistFirstPage();
+    }
+  };
+
+  onClearBlocklistPress = () => {
+    this.props.executeCommand({ name: commandNames.CLEAR_BLOCKLIST });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Blocklist
+        onFirstPagePress={this.onFirstPagePress}
+        onPreviousPagePress={this.onPreviousPagePress}
+        onNextPagePress={this.onNextPagePress}
+        onLastPagePress={this.onLastPagePress}
+        onPageSelect={this.onPageSelect}
+        onRemoveSelected={this.onRemoveSelected}
+        onSortPress={this.onSortPress}
+        onTableOptionChange={this.onTableOptionChange}
+        onClearBlocklistPress={this.onClearBlocklistPress}
+        {...this.props}
+      />
+    );
+  }
+}
+
+BlocklistConnector.propTypes = {
+  useCurrentPage: PropTypes.bool.isRequired,
+  isClearingBlocklistExecuting: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchBlocklist: PropTypes.func.isRequired,
+  gotoBlocklistFirstPage: PropTypes.func.isRequired,
+  gotoBlocklistPreviousPage: PropTypes.func.isRequired,
+  gotoBlocklistNextPage: PropTypes.func.isRequired,
+  gotoBlocklistLastPage: PropTypes.func.isRequired,
+  gotoBlocklistPage: PropTypes.func.isRequired,
+  removeBlocklistItems: PropTypes.func.isRequired,
+  setBlocklistSort: PropTypes.func.isRequired,
+  setBlocklistTableOption: PropTypes.func.isRequired,
+  clearBlocklist: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default withCurrentPage(
+  connect(createMapStateToProps, mapDispatchToProps)(BlocklistConnector)
+);

frontend/src/Activity/Blocklist/BlocklistDetailsModal.js

@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import Button from 'Components/Link/Button';
+import Modal from 'Components/Modal/Modal';
+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 translate from 'Utilities/String/translate';
+
+class BlocklistDetailsModal extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      sourceTitle,
+      protocol,
+      indexer,
+      message,
+      onModalClose
+    } = this.props;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        onModalClose={onModalClose}
+      >
+        <ModalContent
+          onModalClose={onModalClose}
+        >
+          <ModalHeader>
+            Details
+          </ModalHeader>
+
+          <ModalBody>
+            <DescriptionList>
+              <DescriptionListItem
+                title={translate('Name')}
+                data={sourceTitle}
+              />
+
+              <DescriptionListItem
+                title={translate('Protocol')}
+                data={protocol}
+              />
+
+              {
+                !!message &&
+                  <DescriptionListItem
+                    title={translate('Indexer')}
+                    data={indexer}
+                  />
+              }
+
+              {
+                !!message &&
+                  <DescriptionListItem
+                    title={translate('Message')}
+                    data={message}
+                  />
+              }
+            </DescriptionList>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onPress={onModalClose}>
+              {translate('Close')}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  }
+}
+
+BlocklistDetailsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  message: PropTypes.string,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default BlocklistDetailsModal;

frontend/src/Activity/Blocklist/BlocklistDetailsModal.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import DescriptionList from 'Components/DescriptionList/DescriptionList';
-import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
-import Button from 'Components/Link/Button';
-import Modal from 'Components/Modal/Modal';
-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 DownloadProtocol from 'DownloadClient/DownloadProtocol';
-import translate from 'Utilities/String/translate';
-
-interface BlocklistDetailsModalProps {
-  isOpen: boolean;
-  sourceTitle: string;
-  protocol: DownloadProtocol;
-  indexer?: string;
-  message?: string;
-  onModalClose: () => void;
-}
-
-function BlocklistDetailsModal(props: BlocklistDetailsModalProps) {
-  const { isOpen, sourceTitle, protocol, indexer, message, onModalClose } =
-    props;
-
-  return (
-    <Modal isOpen={isOpen} onModalClose={onModalClose}>
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>Details</ModalHeader>
-
-        <ModalBody>
-          <DescriptionList>
-            <DescriptionListItem title={translate('Name')} data={sourceTitle} />
-
-            <DescriptionListItem
-              title={translate('Protocol')}
-              data={protocol}
-            />
-
-            {message ? (
-              <DescriptionListItem
-                title={translate('Indexer')}
-                data={indexer}
-              />
-            ) : null}
-
-            {message ? (
-              <DescriptionListItem
-                title={translate('Message')}
-                data={message}
-              />
-            ) : null}
-          </DescriptionList>
-        </ModalBody>
-
-        <ModalFooter>
-          <Button onPress={onModalClose}>{translate('Close')}</Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
-
-export default BlocklistDetailsModal;

frontend/src/Activity/Blocklist/BlocklistFilterModal.tsx

@@ -1,54 +0,0 @@
-import React, { useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { createSelector } from 'reselect';
-import AppState from 'App/State/AppState';
-import FilterModal from 'Components/Filter/FilterModal';
-import { setBlocklistFilter } from 'Store/Actions/blocklistActions';
-
-function createBlocklistSelector() {
-  return createSelector(
-    (state: AppState) => state.blocklist.items,
-    (blocklistItems) => {
-      return blocklistItems;
-    }
-  );
-}
-
-function createFilterBuilderPropsSelector() {
-  return createSelector(
-    (state: AppState) => state.blocklist.filterBuilderProps,
-    (filterBuilderProps) => {
-      return filterBuilderProps;
-    }
-  );
-}
-
-interface BlocklistFilterModalProps {
-  isOpen: boolean;
-}
-
-export default function BlocklistFilterModal(props: BlocklistFilterModalProps) {
-  const sectionItems = useSelector(createBlocklistSelector());
-  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
-  const customFilterType = 'blocklist';
-
-  const dispatch = useDispatch();
-
-  const dispatchSetFilter = useCallback(
-    (payload: unknown) => {
-      dispatch(setBlocklistFilter(payload));
-    },
-    [dispatch]
-  );
-
-  return (
-    <FilterModal
-      // TODO: Don't spread all the props
-      {...props}
-      sectionItems={sectionItems}
-      filterBuilderProps={filterBuilderProps}
-      customFilterType={customFilterType}
-      dispatchSetFilter={dispatchSetFilter}
-    />
-  );
-}

frontend/src/Activity/Blocklist/BlocklistRow.css

@@ -1,4 +1,4 @@
-.languages,
+.language,
 .quality {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

frontend/src/Activity/Blocklist/BlocklistRow.css.d.ts

@@ -1,10 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'actions': string;
-  'indexer': string;
-  'languages': string;
-  'quality': string;
-}
-export const cssExports: CssExports;
-export default cssExports;

frontend/src/Activity/Blocklist/BlocklistRow.js

@@ -0,0 +1,213 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import IconButton from 'Components/Link/IconButton';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
+import TableRow from 'Components/Table/TableRow';
+import { icons, kinds } from 'Helpers/Props';
+import MovieFormats from 'Movie/MovieFormats';
+import MovieLanguage from 'Movie/MovieLanguage';
+import MovieQuality from 'Movie/MovieQuality';
+import MovieTitleLink from 'Movie/MovieTitleLink';
+import translate from 'Utilities/String/translate';
+import BlocklistDetailsModal from './BlocklistDetailsModal';
+import styles from './BlocklistRow.css';
+
+class BlocklistRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isDetailsModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onDetailsPress = () => {
+    this.setState({ isDetailsModalOpen: true });
+  };
+
+  onDetailsModalClose = () => {
+    this.setState({ isDetailsModalOpen: false });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      movie,
+      sourceTitle,
+      quality,
+      customFormats,
+      languages,
+      date,
+      protocol,
+      indexer,
+      message,
+      isSelected,
+      columns,
+      onSelectedChange,
+      onRemovePress
+    } = this.props;
+
+    if (!movie) {
+      return null;
+    }
+
+    return (
+      <TableRow>
+        <TableSelectCell
+          id={id}
+          isSelected={isSelected}
+          onSelectedChange={onSelectedChange}
+        />
+
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'movies.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieTitleLink
+                    titleSlug={movie.titleSlug}
+                    title={movie.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'sourceTitle') {
+              return (
+                <TableRowCell key={name}>
+                  {sourceTitle}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'languages') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieLanguage
+                    languages={languages}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.quality}
+                >
+                  <MovieQuality
+                    quality={quality}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'customFormats') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieFormats
+                    formats={customFormats}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'date') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  date={date}
+                />
+              );
+            }
+
+            if (name === 'indexer') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.indexer}
+                >
+                  {indexer}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'actions') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.actions}
+                >
+                  <IconButton
+                    name={icons.INFO}
+                    onPress={this.onDetailsPress}
+                  />
+
+                  <IconButton
+                    title={translate('RemoveFromBlocklist')}
+                    name={icons.REMOVE}
+                    kind={kinds.DANGER}
+                    onPress={onRemovePress}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <BlocklistDetailsModal
+          isOpen={this.state.isDetailsModalOpen}
+          sourceTitle={sourceTitle}
+          protocol={protocol}
+          indexer={indexer}
+          message={message}
+          onModalClose={this.onDetailsModalClose}
+        />
+      </TableRow>
+    );
+  }
+
+}
+
+BlocklistRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  movie: PropTypes.object.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  quality: PropTypes.object.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object).isRequired,
+  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  date: PropTypes.string.isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  message: PropTypes.string,
+  isSelected: PropTypes.bool.isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  onRemovePress: PropTypes.func.isRequired
+};
+
+export default BlocklistRow;

frontend/src/Activity/Blocklist/BlocklistRow.tsx

@@ -1,160 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { useDispatch } from 'react-redux';
-import IconButton from 'Components/Link/IconButton';
-import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
-import Column from 'Components/Table/Column';
-import TableRow from 'Components/Table/TableRow';
-import { icons, kinds } from 'Helpers/Props';
-import MovieFormats from 'Movie/MovieFormats';
-import MovieLanguages from 'Movie/MovieLanguages';
-import MovieQuality from 'Movie/MovieQuality';
-import MovieTitleLink from 'Movie/MovieTitleLink';
-import useMovie from 'Movie/useMovie';
-import { removeBlocklistItem } from 'Store/Actions/blocklistActions';
-import Blocklist from 'typings/Blocklist';
-import { SelectStateInputProps } from 'typings/props';
-import translate from 'Utilities/String/translate';
-import BlocklistDetailsModal from './BlocklistDetailsModal';
-import styles from './BlocklistRow.css';
-
-interface BlocklistRowProps extends Blocklist {
-  isSelected: boolean;
-  columns: Column[];
-  onSelectedChange: (options: SelectStateInputProps) => void;
-}
-
-function BlocklistRow(props: BlocklistRowProps) {
-  const {
-    id,
-    movieId,
-    sourceTitle,
-    languages,
-    quality,
-    customFormats,
-    date,
-    protocol,
-    indexer,
-    message,
-    isSelected,
-    columns,
-    onSelectedChange,
-  } = props;
-
-  const movie = useMovie(movieId);
-  const dispatch = useDispatch();
-  const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
-
-  const handleDetailsPress = useCallback(() => {
-    setIsDetailsModalOpen(true);
-  }, [setIsDetailsModalOpen]);
-
-  const handleDetailsModalClose = useCallback(() => {
-    setIsDetailsModalOpen(false);
-  }, [setIsDetailsModalOpen]);
-
-  const handleRemovePress = useCallback(() => {
-    dispatch(removeBlocklistItem({ id }));
-  }, [id, dispatch]);
-
-  if (!movie) {
-    return null;
-  }
-
-  return (
-    <TableRow>
-      <TableSelectCell
-        id={id}
-        isSelected={isSelected}
-        onSelectedChange={onSelectedChange}
-      />
-
-      {columns.map((column) => {
-        const { name, isVisible } = column;
-
-        if (!isVisible) {
-          return null;
-        }
-
-        if (name === 'movieMetadata.sortTitle') {
-          return (
-            <TableRowCell key={name}>
-              <MovieTitleLink titleSlug={movie.titleSlug} title={movie.title} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'sourceTitle') {
-          return <TableRowCell key={name}>{sourceTitle}</TableRowCell>;
-        }
-
-        if (name === 'languages') {
-          return (
-            <TableRowCell key={name} className={styles.languages}>
-              <MovieLanguages languages={languages} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'quality') {
-          return (
-            <TableRowCell key={name} className={styles.quality}>
-              <MovieQuality quality={quality} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'customFormats') {
-          return (
-            <TableRowCell key={name}>
-              <MovieFormats formats={customFormats} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'date') {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore ts(2739)
-          return <RelativeDateCell key={name} date={date} />;
-        }
-
-        if (name === 'indexer') {
-          return (
-            <TableRowCell key={name} className={styles.indexer}>
-              {indexer}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'actions') {
-          return (
-            <TableRowCell key={name} className={styles.actions}>
-              <IconButton name={icons.INFO} onPress={handleDetailsPress} />
-
-              <IconButton
-                title={translate('RemoveFromBlocklist')}
-                name={icons.REMOVE}
-                kind={kinds.DANGER}
-                onPress={handleRemovePress}
-              />
-            </TableRowCell>
-          );
-        }
-
-        return null;
-      })}
-
-      <BlocklistDetailsModal
-        isOpen={isDetailsModalOpen}
-        sourceTitle={sourceTitle}
-        protocol={protocol}
-        indexer={indexer}
-        message={message}
-        onModalClose={handleDetailsModalClose}
-      />
-    </TableRow>
-  );
-}
-
-export default BlocklistRow;

frontend/src/Activity/Blocklist/BlocklistRowConnector.js

@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { removeBlocklistItem } from 'Store/Actions/blocklistActions';
+import createMovieSelector from 'Store/Selectors/createMovieSelector';
+import BlocklistRow from './BlocklistRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createMovieSelector(),
+    (movie) => {
+      return {
+        movie
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onRemovePress() {
+      dispatch(removeBlocklistItem({ id: props.id }));
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(BlocklistRow);

frontend/src/Activity/History/Details/HistoryDetails.css.d.ts

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

frontend/src/Activity/History/Details/HistoryDetails.js

@@ -7,7 +7,6 @@ import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionList
 import Link from 'Components/Link/Link';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import formatAge from 'Utilities/Number/formatAge';
-import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import translate from 'Utilities/String/translate';
 import styles from './HistoryDetails.css';
 
@@ -16,7 +15,6 @@ function HistoryDetails(props) {
     eventType,
     sourceTitle,
     data,
-    downloadId,
     shortDateFormat,
     timeFormat
   } = props;
@@ -25,11 +23,10 @@ function HistoryDetails(props) {
     const {
       indexer,
       releaseGroup,
-      movieMatchType,
-      customFormatScore,
       nzbInfoUrl,
       downloadClient,
       downloadClientName,
+      downloadId,
       age,
       ageHours,
       ageMinutes,
@@ -47,55 +44,33 @@ function HistoryDetails(props) {
         />
 
         {
-          indexer ?
+          !!indexer &&
             <DescriptionListItem
               title={translate('Indexer')}
               data={indexer}
-            /> :
-            null
+            />
         }
 
         {
-          releaseGroup ?
+          !!releaseGroup &&
             <DescriptionListItem
               descriptionClassName={styles.description}
               title={translate('ReleaseGroup')}
               data={releaseGroup}
-            /> :
-            null
+            />
         }
 
         {
-          customFormatScore && customFormatScore !== '0' ?
-            <DescriptionListItem
-              title={translate('CustomFormatScore')}
-              data={formatCustomFormatScore(customFormatScore)}
-            /> :
-            null
-        }
-
-        {
-          movieMatchType ?
-            <DescriptionListItem
-              descriptionClassName={styles.description}
-              title={translate('MovieMatchType')}
-              data={movieMatchType}
-            /> :
-            null
-        }
-
-        {
-          nzbInfoUrl ?
+          !!nzbInfoUrl &&
             <span>
               <DescriptionListItemTitle>
-                {translate('InfoUrl')}
+                Info URL
               </DescriptionListItemTitle>
 
               <DescriptionListItemDescription>
                 <Link to={nzbInfoUrl}>{nzbInfoUrl}</Link>
               </DescriptionListItemDescription>
-            </span> :
-            null
+            </span>
         }
 
         {
@@ -108,30 +83,27 @@ function HistoryDetails(props) {
         }
 
         {
-          downloadId ?
+          !!downloadId &&
             <DescriptionListItem
-              title={translate('GrabId')}
+              title={translate('GrabID')}
               data={downloadId}
-            /> :
-            null
+            />
         }
 
         {
-          indexer ?
+          !!indexer &&
             <DescriptionListItem
               title={translate('AgeWhenGrabbed')}
               data={formatAge(age, ageHours, ageMinutes)}
-            /> :
-            null
+            />
         }
 
         {
-          publishedDate ?
+          !!publishedDate &&
             <DescriptionListItem
               title={translate('PublishedDate')}
               data={formatDateTime(publishedDate, shortDateFormat, timeFormat, { includeSeconds: true })}
-            /> :
-            null
+            />
         }
       </DescriptionList>
     );
@@ -151,21 +123,11 @@ function HistoryDetails(props) {
         />
 
         {
-          downloadId ?
-            <DescriptionListItem
-              title={translate('GrabId')}
-              data={downloadId}
-            /> :
-            null
-        }
-
-        {
-          message ?
+          !!message &&
             <DescriptionListItem
               title={translate('Message')}
               data={message}
-            /> :
-            null
+            />
         }
       </DescriptionList>
     );
@@ -173,7 +135,6 @@ function HistoryDetails(props) {
 
   if (eventType === 'downloadFolderImported') {
     const {
-      customFormatScore,
       droppedPath,
       importedPath
     } = data;
@@ -187,32 +148,21 @@ function HistoryDetails(props) {
         />
 
         {
-          droppedPath ?
+          !!droppedPath &&
             <DescriptionListItem
               descriptionClassName={styles.description}
               title={translate('Source')}
               data={droppedPath}
-            /> :
-            null
+            />
         }
 
         {
-          importedPath ?
+          !!importedPath &&
             <DescriptionListItem
               descriptionClassName={styles.description}
               title={translate('ImportedTo')}
               data={importedPath}
-            /> :
-            null
-        }
-
-        {
-          customFormatScore && customFormatScore !== '0' ?
-            <DescriptionListItem
-              title={translate('CustomFormatScore')}
-              data={formatCustomFormatScore(customFormatScore)}
-            /> :
-            null
+            />
         }
       </DescriptionList>
     );
@@ -220,21 +170,20 @@ function HistoryDetails(props) {
 
   if (eventType === 'movieFileDeleted') {
     const {
-      reason,
-      customFormatScore
+      reason
     } = data;
 
     let reasonMessage = '';
 
     switch (reason) {
       case 'Manual':
-        reasonMessage = translate('DeletedReasonManual');
+        reasonMessage = translate('FileWasDeletedByViaUI');
         break;
       case 'MissingFromDisk':
-        reasonMessage = translate('DeletedReasonMissingFromDisk');
+        reasonMessage = translate('MissingFromDisk');
         break;
       case 'Upgrade':
-        reasonMessage = translate('DeletedReasonUpgrade');
+        reasonMessage = translate('FileWasDeletedByUpgrade');
         break;
       default:
         reasonMessage = '';
@@ -251,15 +200,6 @@ function HistoryDetails(props) {
           title={translate('Reason')}
           data={reasonMessage}
         />
-
-        {
-          customFormatScore && customFormatScore !== '0' ?
-            <DescriptionListItem
-              title={translate('CustomFormatScore')}
-              data={formatCustomFormatScore(customFormatScore)}
-            /> :
-            null
-        }
       </DescriptionList>
     );
   }
@@ -311,21 +251,11 @@ function HistoryDetails(props) {
         />
 
         {
-          downloadId ?
-            <DescriptionListItem
-              title={translate('GrabId')}
-              data={downloadId}
-            /> :
-            null
-        }
-
-        {
-          message ?
+          !!message &&
             <DescriptionListItem
               title={translate('Message')}
               data={message}
-            /> :
-            null
+            />
         }
       </DescriptionList>
     );
@@ -346,7 +276,6 @@ HistoryDetails.propTypes = {
   eventType: PropTypes.string.isRequired,
   sourceTitle: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
-  downloadId: PropTypes.string,
   shortDateFormat: PropTypes.string.isRequired,
   timeFormat: PropTypes.string.isRequired
 };

frontend/src/Activity/History/Details/HistoryDetailsModal.css.d.ts

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

frontend/src/Activity/History/Details/HistoryDetailsModal.js

@@ -15,19 +15,19 @@ import styles from './HistoryDetailsModal.css';
 function getHeaderTitle(eventType) {
   switch (eventType) {
     case 'grabbed':
-      return translate('Grabbed');
+      return 'Grabbed';
     case 'downloadFailed':
-      return translate('DownloadFailed');
+      return 'Download Failed';
     case 'downloadFolderImported':
-      return translate('MovieImported');
+      return 'Movie Imported';
     case 'movieFileDeleted':
-      return translate('MovieFileDeleted');
+      return 'Movie File Deleted';
     case 'movieFileRenamed':
-      return translate('MovieFileRenamed');
+      return 'Movie File Renamed';
     case 'downloadIgnored':
-      return translate('DownloadIgnored');
+      return 'Download Ignored';
     default:
-      return translate('Unknown');
+      return 'Unknown';
   }
 }
 
@@ -37,7 +37,6 @@ function HistoryDetailsModal(props) {
     eventType,
     sourceTitle,
     data,
-    downloadId,
     isMarkingAsFailed,
     shortDateFormat,
     timeFormat,
@@ -60,7 +59,6 @@ function HistoryDetailsModal(props) {
             eventType={eventType}
             sourceTitle={sourceTitle}
             data={data}
-            downloadId={downloadId}
             shortDateFormat={shortDateFormat}
             timeFormat={timeFormat}
           />
@@ -75,7 +73,7 @@ function HistoryDetailsModal(props) {
                 isSpinning={isMarkingAsFailed}
                 onPress={onMarkAsFailedPress}
               >
-                {translate('MarkAsFailed')}
+                Mark as Failed
               </SpinnerButton>
           }
 
@@ -95,7 +93,6 @@ HistoryDetailsModal.propTypes = {
   eventType: PropTypes.string.isRequired,
   sourceTitle: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
-  downloadId: PropTypes.string,
   isMarkingAsFailed: PropTypes.bool.isRequired,
   shortDateFormat: PropTypes.string.isRequired,
   timeFormat: PropTypes.string.isRequired,

frontend/src/Activity/History/History.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FilterMenu from 'Components/Menu/FilterMenu';
 import PageContent from 'Components/Page/PageContent';
@@ -12,9 +11,8 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons, kinds } from 'Helpers/Props';
+import { align, icons } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
-import HistoryFilterModal from './HistoryFilterModal';
 import HistoryRowConnector from './HistoryRowConnector';
 
 class History extends Component {
@@ -34,7 +32,6 @@ class History extends Component {
       columns,
       selectedFilterKey,
       filters,
-      customFilters,
       totalRecords,
       onFilterSelect,
       onFirstPagePress,
@@ -72,8 +69,7 @@ class History extends Component {
               alignMenu={align.RIGHT}
               selectedFilterKey={selectedFilterKey}
               filters={filters}
-              customFilters={customFilters}
-              filterModalConnectorComponent={HistoryFilterModal}
+              customFilters={[]}
               onFilterSelect={onFilterSelect}
             />
           </PageToolbarSection>
@@ -87,9 +83,9 @@ class History extends Component {
 
           {
             !isFetchingAny && hasError &&
-              <Alert kind={kinds.DANGER}>
-                {translate('HistoryLoadError')}
-              </Alert>
+              <div>
+                {translate('UnableToLoadHistory')}
+              </div>
           }
 
           {
@@ -97,9 +93,9 @@ class History extends Component {
             // wait for the episodes to populate because they are never coming.
 
             isPopulated && !hasError && !items.length &&
-              <Alert kind={kinds.INFO}>
-                {translate('NoHistoryFound')}
-              </Alert>
+              <div>
+                {translate('NoHistory')}
+              </div>
           }
 
           {
@@ -147,9 +143,8 @@ History.propTypes = {
   moviesError: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  selectedFilterKey: PropTypes.string.isRequired,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
-  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
   totalRecords: PropTypes.number,
   onFilterSelect: PropTypes.func.isRequired,
   onFirstPagePress: PropTypes.func.isRequired

frontend/src/Activity/History/HistoryConnector.js

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import withCurrentPage from 'Components/withCurrentPage';
 import * as historyActions from 'Store/Actions/historyActions';
-import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
 import History from './History';
 
@@ -12,13 +11,11 @@ function createMapStateToProps() {
   return createSelector(
     (state) => state.history,
     (state) => state.movies,
-    createCustomFiltersSelector('history'),
-    (history, movies, customFilters) => {
+    (history, movies) => {
       return {
         isMoviesFetching: movies.isFetching,
         isMoviesPopulated: movies.isPopulated,
         moviesError: movies.error,
-        customFilters,
         ...history
       };
     }

frontend/src/Activity/History/HistoryEventTypeCell.css.d.ts

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

frontend/src/Activity/History/HistoryEventTypeCell.js

@@ -3,10 +3,9 @@ import React from 'react';
 import Icon from 'Components/Icon';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import { icons, kinds } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
 import styles from './HistoryEventTypeCell.css';
 
-function getIconName(eventType, data) {
+function getIconName(eventType) {
   switch (eventType) {
     case 'grabbed':
       return icons.DOWNLOADING;
@@ -17,7 +16,7 @@ function getIconName(eventType, data) {
     case 'downloadFailed':
       return icons.DOWNLOADING;
     case 'movieFileDeleted':
-      return data.reason === 'MissingFromDisk' ? icons.FILE_MISSING : icons.DELETE;
+      return icons.DELETE;
     case 'movieFileRenamed':
       return icons.ORGANIZE;
     case 'downloadIgnored':
@@ -39,26 +38,26 @@ function getIconKind(eventType) {
 function getTooltip(eventType, data) {
   switch (eventType) {
     case 'grabbed':
-      return translate('MovieGrabbedHistoryTooltip', { indexer: data.indexer, downloadClient: data.downloadClient });
+      return `Movie grabbed from ${data.indexer} and sent to ${data.downloadClient}`;
     case 'movieFolderImported':
-      return translate('MovieFolderImportedTooltip');
+      return 'Movie imported from movie folder';
     case 'downloadFolderImported':
-      return translate('MovieImportedTooltip');
+      return 'Movie downloaded successfully and picked up from download client';
     case 'downloadFailed':
-      return translate('MovieDownloadFailedTooltip');
+      return 'Movie download failed';
     case 'movieFileDeleted':
-      return data.reason === 'MissingFromDisk' ? translate('MovieFileMissingTooltip') : translate('MovieFileDeletedTooltip');
+      return 'Movie file deleted';
     case 'movieFileRenamed':
-      return translate('MovieFileRenamedTooltip');
+      return 'Movie file renamed';
     case 'downloadIgnored':
-      return translate('MovieDownloadIgnoredTooltip');
+      return 'Movie Download Ignored';
     default:
-      return translate('UnknownEventTooltip');
+      return 'Unknown event';
   }
 }
 
 function HistoryEventTypeCell({ eventType, data }) {
-  const iconName = getIconName(eventType, data);
+  const iconName = getIconName(eventType);
   const iconKind = getIconKind(eventType);
   const tooltip = getTooltip(eventType, data);
 

frontend/src/Activity/History/HistoryFilterModal.tsx

@@ -1,54 +0,0 @@
-import React, { useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { createSelector } from 'reselect';
-import AppState from 'App/State/AppState';
-import FilterModal from 'Components/Filter/FilterModal';
-import { setHistoryFilter } from 'Store/Actions/historyActions';
-
-function createHistorySelector() {
-  return createSelector(
-    (state: AppState) => state.history.items,
-    (queueItems) => {
-      return queueItems;
-    }
-  );
-}
-
-function createFilterBuilderPropsSelector() {
-  return createSelector(
-    (state: AppState) => state.history.filterBuilderProps,
-    (filterBuilderProps) => {
-      return filterBuilderProps;
-    }
-  );
-}
-
-interface HistoryFilterModalProps {
-  isOpen: boolean;
-}
-
-export default function HistoryFilterModal(props: HistoryFilterModalProps) {
-  const sectionItems = useSelector(createHistorySelector());
-  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
-  const customFilterType = 'history';
-
-  const dispatch = useDispatch();
-
-  const dispatchSetFilter = useCallback(
-    (payload: unknown) => {
-      dispatch(setHistoryFilter(payload));
-    },
-    [dispatch]
-  );
-
-  return (
-    <FilterModal
-      // TODO: Don't spread all the props
-      {...props}
-      sectionItems={sectionItems}
-      filterBuilderProps={filterBuilderProps}
-      customFilterType={customFilterType}
-      dispatchSetFilter={dispatchSetFilter}
-    />
-  );
-}

frontend/src/Activity/History/HistoryRow.css

@@ -10,12 +10,6 @@
   width: 80px;
 }
 
-.customFormatScore {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
-
-  width: 55px;
-}
-
 .releaseGroup {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

frontend/src/Activity/History/HistoryRow.css.d.ts

@@ -1,11 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'customFormatScore': string;
-  'details': string;
-  'downloadClient': string;
-  'indexer': string;
-  'releaseGroup': string;
-}
-export const cssExports: CssExports;
-export default cssExports;

frontend/src/Activity/History/HistoryRow.js

@@ -1,16 +1,14 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import IconButton from 'Components/Link/IconButton';
-import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
-import Tooltip from 'Components/Tooltip/Tooltip';
-import { icons, tooltipPositions } from 'Helpers/Props';
+import { icons } from 'Helpers/Props';
 import MovieFormats from 'Movie/MovieFormats';
-import MovieLanguages from 'Movie/MovieLanguages';
+import MovieLanguage from 'Movie/MovieLanguage';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
-import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import HistoryDetailsModal from './Details/HistoryDetailsModal';
 import HistoryEventTypeCell from './HistoryEventTypeCell';
 import styles from './HistoryRow.css';
@@ -57,14 +55,12 @@ class HistoryRow extends Component {
       movie,
       quality,
       customFormats,
-      customFormatScore,
       languages,
       qualityCutoffNotMet,
       eventType,
       sourceTitle,
       date,
       data,
-      downloadId,
       isMarkingAsFailed,
       columns,
       shortDateFormat,
@@ -99,7 +95,7 @@ class HistoryRow extends Component {
               );
             }
 
-            if (name === 'movieMetadata.sortTitle') {
+            if (name === 'movies.sortTitle') {
               return (
                 <TableRowCell key={name}>
                   <MovieTitleLink
@@ -113,7 +109,7 @@ class HistoryRow extends Component {
             if (name === 'languages') {
               return (
                 <TableRowCell key={name}>
-                  <MovieLanguages
+                  <MovieLanguage
                     languages={languages}
                   />
                 </TableRowCell>
@@ -143,7 +139,7 @@ class HistoryRow extends Component {
 
             if (name === 'date') {
               return (
-                <RelativeDateCell
+                <RelativeDateCellConnector
                   key={name}
                   date={date}
                 />
@@ -172,24 +168,6 @@ class HistoryRow extends Component {
               );
             }
 
-            if (name === 'customFormatScore') {
-              return (
-                <TableRowCell
-                  key={name}
-                  className={styles.customFormatScore}
-                >
-                  <Tooltip
-                    anchor={formatCustomFormatScore(
-                      customFormatScore,
-                      customFormats.length
-                    )}
-                    tooltip={<MovieFormats formats={customFormats} />}
-                    position={tooltipPositions.BOTTOM}
-                  />
-                </TableRowCell>
-              );
-            }
-
             if (name === 'releaseGroup') {
               return (
                 <TableRowCell
@@ -217,12 +195,10 @@ class HistoryRow extends Component {
                   key={name}
                   className={styles.details}
                 >
-                  <div className={styles.actionContents}>
-                    <IconButton
-                      name={icons.INFO}
-                      onPress={this.onDetailsPress}
-                    />
-                  </div>
+                  <IconButton
+                    name={icons.INFO}
+                    onPress={this.onDetailsPress}
+                  />
                 </TableRowCell>
               );
             }
@@ -236,7 +212,6 @@ class HistoryRow extends Component {
           eventType={eventType}
           sourceTitle={sourceTitle}
           data={data}
-          downloadId={downloadId}
           isMarkingAsFailed={isMarkingAsFailed}
           shortDateFormat={shortDateFormat}
           timeFormat={timeFormat}
@@ -254,14 +229,12 @@ HistoryRow.propTypes = {
   movie: PropTypes.object.isRequired,
   languages: PropTypes.arrayOf(PropTypes.object).isRequired,
   quality: PropTypes.object.isRequired,
-  customFormats: PropTypes.arrayOf(PropTypes.object),
-  customFormatScore: PropTypes.number.isRequired,
   qualityCutoffNotMet: PropTypes.bool.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object).isRequired,
   eventType: PropTypes.string.isRequired,
   sourceTitle: PropTypes.string.isRequired,
   date: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
-  downloadId: PropTypes.string,
   isMarkingAsFailed: PropTypes.bool,
   markAsFailedError: PropTypes.object,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -270,8 +243,4 @@ HistoryRow.propTypes = {
   onMarkAsFailedPress: PropTypes.func.isRequired
 };
 
-HistoryRow.defaultProps = {
-  customFormats: []
-};
-
 export default HistoryRow;

frontend/src/Activity/Queue/ProtocolLabel.css

@@ -1,17 +1,13 @@
 .torrent {
   composes: label from '~Components/Label.css';
 
-  border-color: var(--torrentColor);
-  background-color: var(--torrentColor);
+  border-color: $torrentColor;
+  background-color: $torrentColor;
 }
 
 .usenet {
   composes: label from '~Components/Label.css';
 
-  border-color: var(--usenetColor);
-  background-color: var(--usenetColor);
-}
-
-.unknown {
-  composes: label from '~Components/Label.css';
+  border-color: $usenetColor;
+  background-color: $usenetColor;
 }

frontend/src/Activity/Queue/ProtocolLabel.css.d.ts

@@ -1,9 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'torrent': string;
-  'unknown': string;
-  'usenet': string;
-}
-export const cssExports: CssExports;
-export default cssExports;

frontend/src/Activity/Queue/ProtocolLabel.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Label from 'Components/Label';
+import styles from './ProtocolLabel.css';
+
+function ProtocolLabel({ protocol }) {
+  const protocolName = protocol === 'usenet' ? 'nzb' : protocol;
+
+  return (
+    <Label className={styles[protocol]}>
+      {protocolName}
+    </Label>
+  );
+}
+
+ProtocolLabel.propTypes = {
+  protocol: PropTypes.string.isRequired
+};
+
+export default ProtocolLabel;

frontend/src/Activity/Queue/ProtocolLabel.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import Label from 'Components/Label';
-import DownloadProtocol from 'DownloadClient/DownloadProtocol';
-import styles from './ProtocolLabel.css';
-
-interface ProtocolLabelProps {
-  protocol: DownloadProtocol;
-}
-
-function ProtocolLabel({ protocol }: ProtocolLabelProps) {
-  const protocolName = protocol === 'usenet' ? 'nzb' : protocol;
-
-  return <Label className={styles[protocol]}>{protocolName}</Label>;
-}
-
-export default ProtocolLabel;

frontend/src/Activity/Queue/Queue.js

@@ -0,0 +1,322 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import TablePager from 'Components/Table/TablePager';
+import { align, icons } from 'Helpers/Props';
+import getRemovedItems from 'Utilities/Object/getRemovedItems';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import QueueOptionsConnector from './QueueOptionsConnector';
+import QueueRowConnector from './QueueRowConnector';
+import RemoveQueueItemsModal from './RemoveQueueItemsModal';
+
+class Queue extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._shouldBlockRefresh = false;
+
+    this.state = {
+      allSelected: false,
+      allUnselected: false,
+      lastToggled: null,
+      selectedState: {},
+      isPendingSelected: false,
+      isConfirmRemoveModalOpen: false,
+      items: props.items
+    };
+  }
+
+  shouldComponentUpdate() {
+    if (this._shouldBlockRefresh) {
+      return false;
+    }
+
+    return true;
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      isFetching,
+      isMoviesFetching
+    } = this.props;
+
+    if (
+      (!isMoviesFetching && prevProps.isMoviesFetching) ||
+      (!isFetching && prevProps.isFetching) ||
+      (hasDifferentItems(prevProps.items, items) && !items.some((e) => e.movieId))
+    ) {
+      this.setState((state) => {
+        return {
+          ...removeOldSelectedState(state, getRemovedItems(prevProps.items, items)),
+          items
+        };
+      });
+
+      return;
+    }
+
+    const selectedIds = this.getSelectedIds();
+    const isPendingSelected = _.some(this.props.items, (item) => {
+      return selectedIds.indexOf(item.id) > -1 && item.status === 'delay';
+    });
+
+    if (isPendingSelected !== this.state.isPendingSelected) {
+      this.setState({ isPendingSelected });
+    }
+  }
+
+  //
+  // Control
+
+  getSelectedIds = () => {
+    return getSelectedIds(this.state.selectedState);
+  };
+
+  //
+  // Listeners
+
+  onQueueRowModalOpenOrClose = (isOpen) => {
+    this._shouldBlockRefresh = isOpen;
+  };
+
+  onSelectAllChange = ({ value }) => {
+    this.setState(selectAll(this.state.selectedState, value));
+  };
+
+  onSelectedChange = ({ id, value, shiftKey = false }) => {
+    this.setState((state) => {
+      return toggleSelected(state, this.props.items, id, value, shiftKey);
+    });
+  };
+
+  onGrabSelectedPress = () => {
+    this.props.onGrabSelectedPress(this.getSelectedIds());
+  };
+
+  onRemoveSelectedPress = () => {
+    this.setState({ isConfirmRemoveModalOpen: true }, () => {
+      this._shouldBlockRefresh = true;
+    });
+  };
+
+  onRemoveSelectedConfirmed = (payload) => {
+    this._shouldBlockRefresh = false;
+    this.props.onRemoveSelectedPress({ ids: this.getSelectedIds(), ...payload });
+    this.setState({ isConfirmRemoveModalOpen: false });
+  };
+
+  onConfirmRemoveModalClose = () => {
+    this._shouldBlockRefresh = false;
+    this.setState({ isConfirmRemoveModalOpen: false });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      isMoviesFetching,
+      isMoviesPopulated,
+      moviesError,
+      columns,
+      totalRecords,
+      isGrabbing,
+      isRemoving,
+      isRefreshMonitoredDownloadsExecuting,
+      onRefreshPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      allSelected,
+      allUnselected,
+      selectedState,
+      isConfirmRemoveModalOpen,
+      isPendingSelected,
+      items
+    } = this.state;
+
+    const isRefreshing = isFetching || isMoviesFetching || isRefreshMonitoredDownloadsExecuting;
+    const isAllPopulated = isPopulated && (isMoviesPopulated || !items.length || items.every((e) => !e.movieId));
+    const hasError = error || moviesError;
+    const selectedIds = this.getSelectedIds();
+    const selectedCount = selectedIds.length;
+    const disableSelectedActions = selectedCount === 0;
+
+    return (
+      <PageContent title={translate('Queue')}>
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label={translate('Refresh')}
+              iconName={icons.REFRESH}
+              isSpinning={isRefreshing}
+              onPress={onRefreshPress}
+            />
+
+            <PageToolbarSeparator />
+
+            <PageToolbarButton
+              label={translate('GrabSelected')}
+              iconName={icons.DOWNLOAD}
+              isDisabled={disableSelectedActions || !isPendingSelected}
+              isSpinning={isGrabbing}
+              onPress={this.onGrabSelectedPress}
+            />
+
+            <PageToolbarButton
+              label={translate('RemoveSelected')}
+              iconName={icons.REMOVE}
+              isDisabled={disableSelectedActions}
+              isSpinning={isRemoving}
+              onPress={this.onRemoveSelectedPress}
+            />
+          </PageToolbarSection>
+
+          <PageToolbarSection
+            alignContent={align.RIGHT}
+          >
+            <TableOptionsModalWrapper
+              columns={columns}
+              {...otherProps}
+              optionsComponent={QueueOptionsConnector}
+            >
+              <PageToolbarButton
+                label={translate('Options')}
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBody>
+          {
+            isRefreshing && !isAllPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isRefreshing && hasError &&
+              <div>
+                {translate('FailedToLoadQueue')}
+              </div>
+          }
+
+          {
+            isAllPopulated && !hasError && !items.length &&
+              <div>
+                {translate('QueueIsEmpty')}
+              </div>
+          }
+
+          {
+            isAllPopulated && !hasError && !!items.length &&
+              <div>
+                <Table
+                  columns={columns}
+                  selectAll={true}
+                  allSelected={allSelected}
+                  allUnselected={allUnselected}
+                  {...otherProps}
+                  optionsComponent={QueueOptionsConnector}
+                  onSelectAllChange={this.onSelectAllChange}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return (
+                          <QueueRowConnector
+                            key={item.id}
+                            movieId={item.movieId}
+                            isSelected={selectedState[item.id]}
+                            columns={columns}
+                            {...item}
+                            onSelectedChange={this.onSelectedChange}
+                            onQueueRowModalOpenOrClose={this.onQueueRowModalOpenOrClose}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
+
+                <TablePager
+                  totalRecords={totalRecords}
+                  isFetching={isRefreshing}
+                  {...otherProps}
+                />
+              </div>
+          }
+        </PageContentBody>
+
+        <RemoveQueueItemsModal
+          isOpen={isConfirmRemoveModalOpen}
+          selectedCount={selectedCount}
+          canIgnore={isConfirmRemoveModalOpen && (
+            selectedIds.every((id) => {
+              const item = items.find((i) => i.id === id);
+
+              return !!(item && item.movieId);
+            })
+          )}
+          allPending={isConfirmRemoveModalOpen && (
+            selectedIds.every((id) => {
+              const item = items.find((i) => i.id === id);
+
+              if (!item) {
+                return false;
+              }
+
+              return item.status === 'delay' || item.status === 'downloadClientUnavailable';
+            })
+          )}
+          onRemovePress={this.onRemoveSelectedConfirmed}
+          onModalClose={this.onConfirmRemoveModalClose}
+        />
+      </PageContent>
+    );
+  }
+}
+
+Queue.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isMoviesFetching: PropTypes.bool.isRequired,
+  isMoviesPopulated: PropTypes.bool.isRequired,
+  moviesError: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  totalRecords: PropTypes.number,
+  isGrabbing: PropTypes.bool.isRequired,
+  isRemoving: PropTypes.bool.isRequired,
+  isRefreshMonitoredDownloadsExecuting: PropTypes.bool.isRequired,
+  onRefreshPress: PropTypes.func.isRequired,
+  onGrabSelectedPress: PropTypes.func.isRequired,
+  onRemoveSelectedPress: PropTypes.func.isRequired
+};
+
+export default Queue;

frontend/src/Activity/Queue/Queue.tsx

@@ -1,400 +0,0 @@
-import React, {
-  ReactElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
-import * as commandNames from 'Commands/commandNames';
-import Alert from 'Components/Alert';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import FilterMenu from 'Components/Menu/FilterMenu';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
-import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
-import TablePager from 'Components/Table/TablePager';
-import usePaging from 'Components/Table/usePaging';
-import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
-import useSelectState from 'Helpers/Hooks/useSelectState';
-import { align, icons, kinds } from 'Helpers/Props';
-import createMoviesFetchingSelector from 'Movie/createMoviesFetchingSelector';
-import { executeCommand } from 'Store/Actions/commandActions';
-import {
-  clearQueue,
-  fetchQueue,
-  gotoQueuePage,
-  grabQueueItems,
-  removeQueueItems,
-  setQueueFilter,
-  setQueueSort,
-  setQueueTableOption,
-} from 'Store/Actions/queueActions';
-import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
-import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
-import { CheckInputChanged } from 'typings/inputs';
-import { SelectStateInputProps } from 'typings/props';
-import { TableOptionsChangePayload } from 'typings/Table';
-import {
-  registerPagePopulator,
-  unregisterPagePopulator,
-} from 'Utilities/pagePopulator';
-import translate from 'Utilities/String/translate';
-import getSelectedIds from 'Utilities/Table/getSelectedIds';
-import QueueFilterModal from './QueueFilterModal';
-import QueueOptions from './QueueOptions';
-import QueueRow from './QueueRow';
-import RemoveQueueItemModal, { RemovePressProps } from './RemoveQueueItemModal';
-import createQueueStatusSelector from './Status/createQueueStatusSelector';
-
-function Queue() {
-  const requestCurrentPage = useCurrentPage();
-  const dispatch = useDispatch();
-
-  const {
-    isFetching,
-    isPopulated,
-    error,
-    items,
-    columns,
-    selectedFilterKey,
-    filters,
-    sortKey,
-    sortDirection,
-    page,
-    pageSize,
-    totalPages,
-    totalRecords,
-    isGrabbing,
-    isRemoving,
-  } = useSelector((state: AppState) => state.queue.paged);
-
-  const { count } = useSelector(createQueueStatusSelector());
-  const { isMoviesFetching, isMoviesPopulated, moviesError } = useSelector(
-    createMoviesFetchingSelector()
-  );
-  const customFilters = useSelector(createCustomFiltersSelector('queue'));
-
-  const isRefreshMonitoredDownloadsExecuting = useSelector(
-    createCommandExecutingSelector(commandNames.REFRESH_MONITORED_DOWNLOADS)
-  );
-
-  const shouldBlockRefresh = useRef(false);
-  const currentQueue = useRef<ReactElement | null>(null);
-
-  const [selectState, setSelectState] = useSelectState();
-  const { allSelected, allUnselected, selectedState } = selectState;
-
-  const selectedIds = useMemo(() => {
-    return getSelectedIds(selectedState);
-  }, [selectedState]);
-
-  const isPendingSelected = useMemo(() => {
-    return items.some((item) => {
-      return selectedIds.indexOf(item.id) > -1 && item.status === 'delay';
-    });
-  }, [items, selectedIds]);
-
-  const [isConfirmRemoveModalOpen, setIsConfirmRemoveModalOpen] =
-    useState(false);
-
-  const isRefreshing =
-    isFetching || isMoviesFetching || isRefreshMonitoredDownloadsExecuting;
-  const isAllPopulated =
-    isPopulated &&
-    (isMoviesPopulated || !items.length || items.every((m) => !m.movieId));
-  const hasError = error || moviesError;
-  const selectedCount = selectedIds.length;
-  const disableSelectedActions = selectedCount === 0;
-
-  const handleSelectAllChange = useCallback(
-    ({ value }: CheckInputChanged) => {
-      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
-    },
-    [items, setSelectState]
-  );
-
-  const handleSelectedChange = useCallback(
-    ({ id, value, shiftKey = false }: SelectStateInputProps) => {
-      setSelectState({
-        type: 'toggleSelected',
-        items,
-        id,
-        isSelected: value,
-        shiftKey,
-      });
-    },
-    [items, setSelectState]
-  );
-
-  const handleRefreshPress = useCallback(() => {
-    dispatch(
-      executeCommand({
-        name: commandNames.REFRESH_MONITORED_DOWNLOADS,
-      })
-    );
-  }, [dispatch]);
-
-  const handleQueueRowModalOpenOrClose = useCallback((isOpen: boolean) => {
-    shouldBlockRefresh.current = isOpen;
-  }, []);
-
-  const handleGrabSelectedPress = useCallback(() => {
-    dispatch(grabQueueItems({ ids: selectedIds }));
-  }, [selectedIds, dispatch]);
-
-  const handleRemoveSelectedPress = useCallback(() => {
-    shouldBlockRefresh.current = true;
-    setIsConfirmRemoveModalOpen(true);
-  }, [setIsConfirmRemoveModalOpen]);
-
-  const handleRemoveSelectedConfirmed = useCallback(
-    (payload: RemovePressProps) => {
-      shouldBlockRefresh.current = false;
-      dispatch(removeQueueItems({ ids: selectedIds, ...payload }));
-      setIsConfirmRemoveModalOpen(false);
-    },
-    [selectedIds, setIsConfirmRemoveModalOpen, dispatch]
-  );
-
-  const handleConfirmRemoveModalClose = useCallback(() => {
-    shouldBlockRefresh.current = false;
-    setIsConfirmRemoveModalOpen(false);
-  }, [setIsConfirmRemoveModalOpen]);
-
-  const {
-    handleFirstPagePress,
-    handlePreviousPagePress,
-    handleNextPagePress,
-    handleLastPagePress,
-    handlePageSelect,
-  } = usePaging({
-    page,
-    totalPages,
-    gotoPage: gotoQueuePage,
-  });
-
-  const handleFilterSelect = useCallback(
-    (selectedFilterKey: string) => {
-      dispatch(setQueueFilter({ selectedFilterKey }));
-    },
-    [dispatch]
-  );
-
-  const handleSortPress = useCallback(
-    (sortKey: string) => {
-      dispatch(setQueueSort({ sortKey }));
-    },
-    [dispatch]
-  );
-
-  const handleTableOptionChange = useCallback(
-    (payload: TableOptionsChangePayload) => {
-      dispatch(setQueueTableOption(payload));
-
-      if (payload.pageSize) {
-        dispatch(gotoQueuePage({ page: 1 }));
-      }
-    },
-    [dispatch]
-  );
-
-  useEffect(() => {
-    if (requestCurrentPage) {
-      dispatch(fetchQueue());
-    } else {
-      dispatch(gotoQueuePage({ page: 1 }));
-    }
-
-    return () => {
-      dispatch(clearQueue());
-    };
-  }, [requestCurrentPage, dispatch]);
-
-  useEffect(() => {
-    const repopulate = () => {
-      dispatch(fetchQueue());
-    };
-
-    registerPagePopulator(repopulate);
-
-    return () => {
-      unregisterPagePopulator(repopulate);
-    };
-  }, [dispatch]);
-
-  if (!shouldBlockRefresh.current) {
-    currentQueue.current = (
-      <PageContentBody>
-        {isRefreshing && !isAllPopulated ? <LoadingIndicator /> : null}
-
-        {!isRefreshing && hasError ? (
-          <Alert kind={kinds.DANGER}>{translate('QueueLoadError')}</Alert>
-        ) : null}
-
-        {isAllPopulated && !hasError && !items.length ? (
-          <Alert kind={kinds.INFO}>
-            {selectedFilterKey !== 'all' && count > 0
-              ? translate('QueueFilterHasNoItems')
-              : translate('QueueIsEmpty')}
-          </Alert>
-        ) : null}
-
-        {isAllPopulated && !hasError && !!items.length ? (
-          <div>
-            <Table
-              selectAll={true}
-              allSelected={allSelected}
-              allUnselected={allUnselected}
-              columns={columns}
-              pageSize={pageSize}
-              sortKey={sortKey}
-              sortDirection={sortDirection}
-              optionsComponent={QueueOptions}
-              onTableOptionChange={handleTableOptionChange}
-              onSelectAllChange={handleSelectAllChange}
-              onSortPress={handleSortPress}
-            >
-              <TableBody>
-                {items.map((item) => {
-                  return (
-                    <QueueRow
-                      key={item.id}
-                      movieId={item.movieId}
-                      isSelected={selectedState[item.id]}
-                      columns={columns}
-                      {...item}
-                      onSelectedChange={handleSelectedChange}
-                      onQueueRowModalOpenOrClose={
-                        handleQueueRowModalOpenOrClose
-                      }
-                    />
-                  );
-                })}
-              </TableBody>
-            </Table>
-
-            <TablePager
-              page={page}
-              totalPages={totalPages}
-              totalRecords={totalRecords}
-              isFetching={isFetching}
-              onFirstPagePress={handleFirstPagePress}
-              onPreviousPagePress={handlePreviousPagePress}
-              onNextPagePress={handleNextPagePress}
-              onLastPagePress={handleLastPagePress}
-              onPageSelect={handlePageSelect}
-            />
-          </div>
-        ) : null}
-      </PageContentBody>
-    );
-  }
-
-  return (
-    <PageContent title={translate('Queue')}>
-      <PageToolbar>
-        <PageToolbarSection>
-          <PageToolbarButton
-            label="Refresh"
-            iconName={icons.REFRESH}
-            isSpinning={isRefreshing}
-            onPress={handleRefreshPress}
-          />
-
-          <PageToolbarSeparator />
-
-          <PageToolbarButton
-            label={translate('GrabSelected')}
-            iconName={icons.DOWNLOAD}
-            isDisabled={disableSelectedActions || !isPendingSelected}
-            isSpinning={isGrabbing}
-            onPress={handleGrabSelectedPress}
-          />
-
-          <PageToolbarButton
-            label={translate('RemoveSelected')}
-            iconName={icons.REMOVE}
-            isDisabled={disableSelectedActions}
-            isSpinning={isRemoving}
-            onPress={handleRemoveSelectedPress}
-          />
-        </PageToolbarSection>
-
-        <PageToolbarSection alignContent={align.RIGHT}>
-          <TableOptionsModalWrapper
-            columns={columns}
-            pageSize={pageSize}
-            maxPageSize={200}
-            optionsComponent={QueueOptions}
-            onTableOptionChange={handleTableOptionChange}
-          >
-            <PageToolbarButton
-              label={translate('Options')}
-              iconName={icons.TABLE}
-            />
-          </TableOptionsModalWrapper>
-
-          <FilterMenu
-            alignMenu={align.RIGHT}
-            selectedFilterKey={selectedFilterKey}
-            filters={filters}
-            customFilters={customFilters}
-            filterModalConnectorComponent={QueueFilterModal}
-            onFilterSelect={handleFilterSelect}
-          />
-        </PageToolbarSection>
-      </PageToolbar>
-
-      {currentQueue.current}
-
-      <RemoveQueueItemModal
-        isOpen={isConfirmRemoveModalOpen}
-        selectedCount={selectedCount}
-        canChangeCategory={
-          isConfirmRemoveModalOpen &&
-          selectedIds.every((id) => {
-            const item = items.find((i) => i.id === id);
-
-            return !!(item && item.downloadClientHasPostImportCategory);
-          })
-        }
-        canIgnore={
-          isConfirmRemoveModalOpen &&
-          selectedIds.every((id) => {
-            const item = items.find((i) => i.id === id);
-
-            return !!(item && item.movieId);
-          })
-        }
-        isPending={
-          isConfirmRemoveModalOpen &&
-          selectedIds.every((id) => {
-            const item = items.find((i) => i.id === id);
-
-            if (!item) {
-              return false;
-            }
-
-            return (
-              item.status === 'delay' ||
-              item.status === 'downloadClientUnavailable'
-            );
-          })
-        }
-        onRemovePress={handleRemoveSelectedConfirmed}
-        onModalClose={handleConfirmRemoveModalClose}
-      />
-    </PageContent>
-  );
-}
-
-export default Queue;

frontend/src/Activity/Queue/QueueConnector.js

@@ -0,0 +1,174 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import withCurrentPage from 'Components/withCurrentPage';
+import { executeCommand } from 'Store/Actions/commandActions';
+import * as queueActions from 'Store/Actions/queueActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import Queue from './Queue';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.movies,
+    (state) => state.queue.options,
+    (state) => state.queue.paged,
+    createCommandExecutingSelector(commandNames.REFRESH_MONITORED_DOWNLOADS),
+    (movies, options, queue, isRefreshMonitoredDownloadsExecuting) => {
+      return {
+        isMoviesFetching: movies.isFetching,
+        isMoviesPopulated: movies.isPopulated,
+        moviesError: movies.error,
+        isRefreshMonitoredDownloadsExecuting,
+        ...options,
+        ...queue
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...queueActions,
+  executeCommand
+};
+
+class QueueConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchQueue,
+      fetchQueueStatus,
+      gotoQueueFirstPage
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchQueue();
+    } else {
+      gotoQueueFirstPage();
+    }
+
+    fetchQueueStatus();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.includeUnknownMovieItems !==
+      prevProps.includeUnknownMovieItems
+    ) {
+      this.repopulate();
+    }
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+    this.props.clearQueue();
+  }
+
+  //
+  // Control
+
+  repopulate = () => {
+    this.props.fetchQueue();
+  };
+
+  //
+  // Listeners
+
+  onFirstPagePress = () => {
+    this.props.gotoQueueFirstPage();
+  };
+
+  onPreviousPagePress = () => {
+    this.props.gotoQueuePreviousPage();
+  };
+
+  onNextPagePress = () => {
+    this.props.gotoQueueNextPage();
+  };
+
+  onLastPagePress = () => {
+    this.props.gotoQueueLastPage();
+  };
+
+  onPageSelect = (page) => {
+    this.props.gotoQueuePage({ page });
+  };
+
+  onSortPress = (sortKey) => {
+    this.props.setQueueSort({ sortKey });
+  };
+
+  onTableOptionChange = (payload) => {
+    this.props.setQueueTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoQueueFirstPage();
+    }
+  };
+
+  onRefreshPress = () => {
+    this.props.executeCommand({
+      name: commandNames.REFRESH_MONITORED_DOWNLOADS
+    });
+  };
+
+  onGrabSelectedPress = (ids) => {
+    this.props.grabQueueItems({ ids });
+  };
+
+  onRemoveSelectedPress = (payload) => {
+    this.props.removeQueueItems(payload);
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Queue
+        onFirstPagePress={this.onFirstPagePress}
+        onPreviousPagePress={this.onPreviousPagePress}
+        onNextPagePress={this.onNextPagePress}
+        onLastPagePress={this.onLastPagePress}
+        onPageSelect={this.onPageSelect}
+        onSortPress={this.onSortPress}
+        onTableOptionChange={this.onTableOptionChange}
+        onRefreshPress={this.onRefreshPress}
+        onGrabSelectedPress={this.onGrabSelectedPress}
+        onRemoveSelectedPress={this.onRemoveSelectedPress}
+        {...this.props}
+      />
+    );
+  }
+}
+
+QueueConnector.propTypes = {
+  includeUnknownMovieItems: PropTypes.bool.isRequired,
+  useCurrentPage: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchQueue: PropTypes.func.isRequired,
+  fetchQueueStatus: PropTypes.func.isRequired,
+  gotoQueueFirstPage: PropTypes.func.isRequired,
+  gotoQueuePreviousPage: PropTypes.func.isRequired,
+  gotoQueueNextPage: PropTypes.func.isRequired,
+  gotoQueueLastPage: PropTypes.func.isRequired,
+  gotoQueuePage: PropTypes.func.isRequired,
+  setQueueSort: PropTypes.func.isRequired,
+  setQueueTableOption: PropTypes.func.isRequired,
+  clearQueue: PropTypes.func.isRequired,
+  grabQueueItems: PropTypes.func.isRequired,
+  removeQueueItems: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default withCurrentPage(
+  connect(createMapStateToProps, mapDispatchToProps)(QueueConnector)
+);

frontend/src/Activity/Queue/QueueDetails.css

@@ -1,5 +0,0 @@
-.progressBarContainer {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}

frontend/src/Activity/Queue/QueueDetails.css.d.ts

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

frontend/src/Activity/Queue/QueueDetails.js

@@ -0,0 +1,128 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Icon from 'Components/Icon';
+import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+function QueueDetails(props) {
+  const {
+    title,
+    size,
+    sizeleft,
+    estimatedCompletionTime,
+    status,
+    trackedDownloadState,
+    trackedDownloadStatus,
+    errorMessage,
+    progressBar
+  } = props;
+
+  const progress = size ? (100 - sizeleft / size * 100) : 0;
+
+  if (status === 'pending') {
+    return (
+      <Icon
+        name={icons.PENDING}
+        title={translate('ReleaseWillBeProcessedInterp', [moment(estimatedCompletionTime).fromNow()])}
+      />
+    );
+  }
+
+  if (status === 'completed') {
+    if (errorMessage) {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.DANGER}
+          title={translate('ImportFailedInterp', [errorMessage])}
+        />
+      );
+    }
+
+    if (trackedDownloadStatus === 'warning') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.WARNING}
+          title={translate('UnableToImportCheckLogs')}
+        />
+      );
+    }
+
+    if (trackedDownloadState === 'importPending') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.PURPLE}
+          title={`${translate('Downloaded')} - ${translate('WaitingToImport')}`}
+        />
+      );
+    }
+
+    if (trackedDownloadState === 'importing') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.PURPLE}
+          title={`${translate('Downloaded')} - ${translate('Importing')}`}
+        />
+      );
+    }
+  }
+
+  if (errorMessage) {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.DANGER}
+        title={translate('DownloadFailedInterp', [errorMessage])}
+      />
+    );
+  }
+
+  if (status === 'failed') {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.DANGER}
+        title={translate('DownloadFailedCheckDownloadClientForMoreDetails')}
+      />
+    );
+  }
+
+  if (status === 'warning') {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.WARNING}
+        title={translate('DownloadWarningCheckDownloadClientForMoreDetails')}
+      />
+    );
+  }
+
+  if (progress < 5) {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        title={translate('MovieIsDownloadingInterp', [progress.toFixed(1), title])}
+      />
+    );
+  }
+
+  return progressBar;
+}
+
+QueueDetails.propTypes = {
+  title: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  sizeleft: PropTypes.number.isRequired,
+  estimatedCompletionTime: PropTypes.string,
+  status: PropTypes.string.isRequired,
+  trackedDownloadState: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string.isRequired,
+  errorMessage: PropTypes.string,
+  progressBar: PropTypes.node.isRequired
+};
+
+export default QueueDetails;

frontend/src/Activity/Queue/QueueDetails.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import Icon from 'Components/Icon';
-import Popover from 'Components/Tooltip/Popover';
-import { icons, tooltipPositions } from 'Helpers/Props';
-import {
-  QueueTrackedDownloadState,
-  QueueTrackedDownloadStatus,
-  StatusMessage,
-} from 'typings/Queue';
-import translate from 'Utilities/String/translate';
-import QueueStatus from './QueueStatus';
-import styles from './QueueDetails.css';
-
-interface QueueDetailsProps {
-  title: string;
-  size: number;
-  sizeleft: number;
-  estimatedCompletionTime?: string;
-  status: string;
-  trackedDownloadState?: QueueTrackedDownloadState;
-  trackedDownloadStatus?: QueueTrackedDownloadStatus;
-  statusMessages?: StatusMessage[];
-  errorMessage?: string;
-  progressBar: React.ReactNode;
-}
-
-function QueueDetails(props: QueueDetailsProps) {
-  const {
-    title,
-    size,
-    sizeleft,
-    status,
-    trackedDownloadState = 'downloading',
-    trackedDownloadStatus = 'ok',
-    statusMessages,
-    errorMessage,
-    progressBar,
-  } = props;
-
-  const progress = size ? 100 - (sizeleft / size) * 100 : 0;
-  const isDownloading = status === 'downloading';
-  const isPaused = status === 'paused';
-  const hasWarning = trackedDownloadStatus === 'warning';
-  const hasError = trackedDownloadStatus === 'error';
-
-  if ((isDownloading || isPaused) && !hasWarning && !hasError) {
-    const state = isPaused ? translate('Paused') : translate('Downloading');
-
-    if (progress < 5) {
-      return (
-        <Icon
-          name={icons.DOWNLOADING}
-          title={`${state} - ${progress.toFixed(1)}% ${title}`}
-        />
-      );
-    }
-
-    return (
-      <Popover
-        className={styles.progressBarContainer}
-        anchor={progressBar!}
-        title={`${state} - ${progress.toFixed(1)}%`}
-        body={<div>{title}</div>}
-        position={tooltipPositions.LEFT}
-      />
-    );
-  }
-
-  return (
-    <QueueStatus
-      sourceTitle={title}
-      status={status}
-      trackedDownloadStatus={trackedDownloadStatus}
-      trackedDownloadState={trackedDownloadState}
-      statusMessages={statusMessages}
-      errorMessage={errorMessage}
-      position={tooltipPositions.LEFT}
-    />
-  );
-}
-
-export default QueueDetails;

frontend/src/Activity/Queue/QueueFilterModal.tsx

@@ -1,54 +0,0 @@
-import React, { useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { createSelector } from 'reselect';
-import AppState from 'App/State/AppState';
-import FilterModal from 'Components/Filter/FilterModal';
-import { setQueueFilter } from 'Store/Actions/queueActions';
-
-function createQueueSelector() {
-  return createSelector(
-    (state: AppState) => state.queue.paged.items,
-    (queueItems) => {
-      return queueItems;
-    }
-  );
-}
-
-function createFilterBuilderPropsSelector() {
-  return createSelector(
-    (state: AppState) => state.queue.paged.filterBuilderProps,
-    (filterBuilderProps) => {
-      return filterBuilderProps;
-    }
-  );
-}
-
-interface QueueFilterModalProps {
-  isOpen: boolean;
-}
-
-export default function QueueFilterModal(props: QueueFilterModalProps) {
-  const sectionItems = useSelector(createQueueSelector());
-  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
-  const customFilterType = 'queue';
-
-  const dispatch = useDispatch();
-
-  const dispatchSetFilter = useCallback(
-    (payload: unknown) => {
-      dispatch(setQueueFilter(payload));
-    },
-    [dispatch]
-  );
-
-  return (
-    <FilterModal
-      // TODO: Don't spread all the props
-      {...props}
-      sectionItems={sectionItems}
-      filterBuilderProps={filterBuilderProps}
-      customFilterType={customFilterType}
-      dispatchSetFilter={dispatchSetFilter}
-    />
-  );
-}

frontend/src/Activity/Queue/QueueOptions.js

@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types';
+import React, { Component, Fragment } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+class QueueOptions extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      includeUnknownMovieItems: props.includeUnknownMovieItems
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      includeUnknownMovieItems
+    } = this.props;
+
+    if (includeUnknownMovieItems !== prevProps.includeUnknownMovieItems) {
+      this.setState({
+        includeUnknownMovieItems
+      });
+    }
+  }
+
+  //
+  // Listeners
+
+  onOptionChange = ({ name, value }) => {
+    this.setState({
+      [name]: value
+    }, () => {
+      this.props.onOptionChange({
+        [name]: value
+      });
+    });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      includeUnknownMovieItems
+    } = this.state;
+
+    return (
+      <Fragment>
+        <FormGroup>
+          <FormLabel>{translate('ShowUnknownMovieItems')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.CHECK}
+            name="includeUnknownMovieItems"
+            value={includeUnknownMovieItems}
+            helpText={translate('IncludeUnknownMovieItemsHelpText')}
+            onChange={this.onOptionChange}
+          />
+        </FormGroup>
+      </Fragment>
+    );
+  }
+}
+
+QueueOptions.propTypes = {
+  includeUnknownMovieItems: PropTypes.bool.isRequired,
+  onOptionChange: PropTypes.func.isRequired
+};
+
+export default QueueOptions;

frontend/src/Activity/Queue/QueueOptions.tsx

@@ -1,48 +0,0 @@
-import React, { useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
-import FormGroup from 'Components/Form/FormGroup';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import { inputTypes } from 'Helpers/Props';
-import { gotoQueuePage, setQueueOption } from 'Store/Actions/queueActions';
-import { CheckInputChanged } from 'typings/inputs';
-import translate from 'Utilities/String/translate';
-
-function QueueOptions() {
-  const dispatch = useDispatch();
-  const { includeUnknownMovieItems } = useSelector(
-    (state: AppState) => state.queue.options
-  );
-
-  const handleOptionChange = useCallback(
-    ({ name, value }: CheckInputChanged) => {
-      dispatch(
-        setQueueOption({
-          [name]: value,
-        })
-      );
-
-      if (name === 'includeUnknownMovieItems') {
-        dispatch(gotoQueuePage({ page: 1 }));
-      }
-    },
-    [dispatch]
-  );
-
-  return (
-    <FormGroup>
-      <FormLabel>{translate('ShowUnknownMovieItems')}</FormLabel>
-
-      <FormInputGroup
-        type={inputTypes.CHECK}
-        name="includeUnknownMovieItems"
-        value={includeUnknownMovieItems}
-        helpText={translate('ShowUnknownMovieItemsHelpText')}
-        onChange={handleOptionChange}
-      />
-    </FormGroup>
-  );
-}
-
-export default QueueOptions;

frontend/src/Activity/Queue/QueueOptionsConnector.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setQueueOption } from 'Store/Actions/queueActions';
+import QueueOptions from './QueueOptions';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.queue.options,
+    (options) => {
+      return options;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  onOptionChange: setQueueOption
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(QueueOptions);

frontend/src/Activity/Queue/QueueRow.css

@@ -16,15 +16,8 @@
   width: 150px;
 }
 
-.customFormatScore {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
-
-  width: 55px;
-}
-
 .actions {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 70px;
-  text-align: right;
 }

frontend/src/Activity/Queue/QueueRow.css.d.ts

@@ -1,11 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'actions': string;
-  'customFormatScore': string;
-  'progress': string;
-  'protocol': string;
-  'quality': string;
-}
-export const cssExports: CssExports;
-export default cssExports;

frontend/src/Activity/Queue/QueueRow.js

@@ -0,0 +1,385 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
+import IconButton from 'Components/Link/IconButton';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import ProgressBar from 'Components/ProgressBar';
+// import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
+import TableRow from 'Components/Table/TableRow';
+import { icons, kinds } from 'Helpers/Props';
+import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import MovieFormats from 'Movie/MovieFormats';
+import MovieLanguage from 'Movie/MovieLanguage';
+import MovieQuality from 'Movie/MovieQuality';
+import MovieTitleLink from 'Movie/MovieTitleLink';
+import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
+import QueueStatusCell from './QueueStatusCell';
+import RemoveQueueItemModal from './RemoveQueueItemModal';
+import TimeleftCell from './TimeleftCell';
+import styles from './QueueRow.css';
+
+class QueueRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isRemoveQueueItemModalOpen: false,
+      isInteractiveImportModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onRemoveQueueItemPress = () => {
+    this.setState({ isRemoveQueueItemModalOpen: true });
+  };
+
+  onRemoveQueueItemModalConfirmed = (blocklist) => {
+    const {
+      onRemoveQueueItemPress,
+      onQueueRowModalOpenOrClose
+    } = this.props;
+
+    onQueueRowModalOpenOrClose(false);
+    onRemoveQueueItemPress(blocklist);
+
+    this.setState({ isRemoveQueueItemModalOpen: false });
+  };
+
+  onRemoveQueueItemModalClose = () => {
+    this.props.onQueueRowModalOpenOrClose(false);
+
+    this.setState({ isRemoveQueueItemModalOpen: false });
+  };
+
+  onInteractiveImportPress = () => {
+    this.props.onQueueRowModalOpenOrClose(true);
+
+    this.setState({ isInteractiveImportModalOpen: true });
+  };
+
+  onInteractiveImportModalClose = () => {
+    this.props.onQueueRowModalOpenOrClose(false);
+
+    this.setState({ isInteractiveImportModalOpen: false });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      downloadId,
+      title,
+      status,
+      trackedDownloadStatus,
+      trackedDownloadState,
+      statusMessages,
+      errorMessage,
+      movie,
+      quality,
+      customFormats,
+      languages,
+      protocol,
+      indexer,
+      outputPath,
+      downloadClient,
+      estimatedCompletionTime,
+      timeleft,
+      size,
+      sizeleft,
+      showRelativeDates,
+      shortDateFormat,
+      timeFormat,
+      isGrabbing,
+      grabError,
+      isRemoving,
+      isSelected,
+      columns,
+      onSelectedChange,
+      onGrabPress
+    } = this.props;
+
+    const {
+      isRemoveQueueItemModalOpen,
+      isInteractiveImportModalOpen
+    } = this.state;
+
+    const progress = 100 - (sizeleft / size * 100);
+    const showInteractiveImport = status === 'completed' && trackedDownloadStatus === 'warning';
+    const isPending = status === 'delay' || status === 'downloadClientUnavailable';
+
+    return (
+      <TableRow>
+        <TableSelectCell
+          id={id}
+          isSelected={isSelected}
+          onSelectedChange={onSelectedChange}
+        />
+
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'status') {
+              return (
+                <QueueStatusCell
+                  key={name}
+                  sourceTitle={title}
+                  status={status}
+                  trackedDownloadStatus={trackedDownloadStatus}
+                  trackedDownloadState={trackedDownloadState}
+                  statusMessages={statusMessages}
+                  errorMessage={errorMessage}
+                />
+              );
+            }
+
+            if (name === 'movies.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    movie ?
+                      <MovieTitleLink
+                        titleSlug={movie.titleSlug}
+                        title={movie.title}
+                      /> :
+                      title
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'languages') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieLanguage
+                    languages={languages}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    quality ?
+                      <MovieQuality
+                        quality={quality}
+                      /> :
+                      null
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'customFormats') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieFormats
+                    formats={customFormats}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'protocol') {
+              return (
+                <TableRowCell key={name}>
+                  <ProtocolLabel
+                    protocol={protocol}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'indexer') {
+              return (
+                <TableRowCell key={name}>
+                  {indexer}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'downloadClient') {
+              return (
+                <TableRowCell key={name}>
+                  {downloadClient}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'size') {
+              return (
+                <TableRowCell key={name}>
+                  {formatBytes(size)}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'title') {
+              return (
+                <TableRowCell key={name}>
+                  {title}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'outputPath') {
+              return (
+                <TableRowCell key={name}>
+                  {outputPath}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'estimatedCompletionTime') {
+              return (
+                <TimeleftCell
+                  key={name}
+                  status={status}
+                  estimatedCompletionTime={estimatedCompletionTime}
+                  timeleft={timeleft}
+                  size={size}
+                  sizeleft={sizeleft}
+                  showRelativeDates={showRelativeDates}
+                  shortDateFormat={shortDateFormat}
+                  timeFormat={timeFormat}
+                />
+              );
+            }
+
+            if (name === 'progress') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.progress}
+                >
+                  {
+                    !!progress &&
+                      <ProgressBar
+                        progress={progress}
+                        title={`${progress.toFixed(1)}%`}
+                      />
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'actions') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.actions}
+                >
+                  {
+                    showInteractiveImport &&
+                      <IconButton
+                        name={icons.INTERACTIVE}
+                        onPress={this.onInteractiveImportPress}
+                      />
+                  }
+
+                  {
+                    isPending &&
+                      <SpinnerIconButton
+                        name={icons.DOWNLOAD}
+                        kind={grabError ? kinds.DANGER : kinds.DEFAULT}
+                        isSpinning={isGrabbing}
+                        onPress={onGrabPress}
+                      />
+                  }
+
+                  <SpinnerIconButton
+                    title={translate('RemoveFromQueue')}
+                    name={icons.REMOVE}
+                    isSpinning={isRemoving}
+                    onPress={this.onRemoveQueueItemPress}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <InteractiveImportModal
+          isOpen={isInteractiveImportModalOpen}
+          downloadId={downloadId}
+          title={title}
+          onModalClose={this.onInteractiveImportModalClose}
+        />
+
+        <RemoveQueueItemModal
+          isOpen={isRemoveQueueItemModalOpen}
+          sourceTitle={title}
+          canIgnore={!!movie}
+          isPending={isPending}
+          onRemovePress={this.onRemoveQueueItemModalConfirmed}
+          onModalClose={this.onRemoveQueueItemModalClose}
+        />
+      </TableRow>
+    );
+  }
+
+}
+
+QueueRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  downloadId: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string,
+  trackedDownloadState: PropTypes.string,
+  statusMessages: PropTypes.arrayOf(PropTypes.object),
+  errorMessage: PropTypes.string,
+  movie: PropTypes.object,
+  quality: PropTypes.object.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object),
+  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  outputPath: PropTypes.string,
+  downloadClient: PropTypes.string,
+  estimatedCompletionTime: PropTypes.string,
+  timeleft: PropTypes.string,
+  size: PropTypes.number,
+  sizeleft: PropTypes.number,
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  isGrabbing: PropTypes.bool.isRequired,
+  grabError: PropTypes.object,
+  isRemoving: PropTypes.bool.isRequired,
+  isSelected: PropTypes.bool,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  onGrabPress: PropTypes.func.isRequired,
+  onRemoveQueueItemPress: PropTypes.func.isRequired,
+  onQueueRowModalOpenOrClose: PropTypes.func.isRequired
+};
+
+QueueRow.defaultProps = {
+  isGrabbing: false,
+  isRemoving: false
+};
+
+export default QueueRow;