Implemented experimental Script Console for debugging with editor in the diag ui.

Fixes #3791

.gitattributes

@@ -1,22 +1,12 @@
 # Auto detect text files and perform LF normalization
-*text eol=lf
+* text=auto
+
+# Explicitly set bash scripts to have unix endings
+# when checked out on windows
+*.sh text eol=lf
+distribution/debian/* text eol=lf
+macOS/Sonarr text eol=lf
 
 # Custom for Visual Studio
 *.cs     diff=csharp
 *.sln    merge=union
-*.csproj merge=union
-*.vbproj merge=union
-*.fsproj merge=union
-*.dbproj merge=union
-
-# Standard to msysgit
-*.doc   diff=astextplain
-*.DOC   diff=astextplain
-*.docx diff=astextplain
-*.DOCX diff=astextplain
-*.dot  diff=astextplain
-*.DOT  diff=astextplain
-*.pdf  diff=astextplain
-*.PDF   diff=astextplain
-*.rtf   diff=astextplain
-*.RTF   diff=astextplain 

.gitignore

@@ -45,6 +45,10 @@ _dotCover*
 # DevExpress CodeRush
 src/.cr/
 
+# Emacs
+*~
+\#*\#
+
 # NCrunch
 *.ncrunch*
 .*crunch*.local.xml
@@ -115,7 +119,9 @@ node_modules/
 _output*
 _rawPackage/
 _dotTrace*
-_tests/
+_tests*
+_publish*
+_temp*
 *.Result.xml
 setup/Output/
 *.~is
@@ -133,6 +139,5 @@ output/*
 .DS_Store
 
 _start
-_temp_*/**/*
 
 src/.idea/

.gitmodules

@@ -1,4 +0,0 @@
-[submodule "src/ExternalModules/CurlSharp"]
-	path = src/ExternalModules/CurlSharp
-	url = https://github.com/Sonarr/CurlSharp.git
-	branch = master

README.md

@@ -1,58 +1,73 @@
-# Sonarr
+# <img width="24px" src="./Logo/256.png" alt="Sonarr"></img> Sonarr 
 
 Sonarr is a PVR for Usenet and BitTorrent users. It can monitor multiple RSS feeds for new episodes of your favorite shows and will grab, sort and rename them. It can also be configured to automatically upgrade the quality of files already downloaded when a better quality format becomes available.
 
-## Major Features Include:
+## Getting Started
 
-* Support for major platforms: Windows, Linux, macOS, Raspberry Pi, etc.
-* Automatically detects new episodes
-* Can scan your existing library and download any missing episodes
-* Can watch for better quality of the episodes you already have and do an automatic upgrade. *eg. from DVD to Blu-Ray*
-* Automatic failed download handling will try another release if one fails
-* Manual search so you can pick any release or to see why a release was not downloaded automatically
-* Fully configurable episode renaming
-* Full integration with SABnzbd and NZBGet
-* Full integration with Kodi, Plex (notification, library update, metadata)
-* Full support for specials and multi-episode releases
-* And a beautiful UI
+- [Download](https://sonarr.tv/#download) (Linux, MacOS, Windows, Docker, etc.)
+- [Installation](https://github.com/Sonarr/Sonarr/wiki/Installation)
+- [FAQ](https://github.com/Sonarr/Sonarr/wiki/FAQ)
+- [Wiki](https://github.com/Sonarr/Sonarr/wiki)
+- [API Documentation](https://github.com/Sonarr/Sonarr/wiki/API)
+
+## Support
+
+- [Donate](https://sonarr.tv/donate)
+- [Discord](https://discord.gg/M6BvZn5)
+- [Reddit](https://www.reddit.com/r/sonarr)
+
+## Features
+
+### Current Features
+
+- Support for major platforms: Windows, Linux, macOS, Raspberry Pi, etc.
+- Automatically detects new episodes
+- Can scan your existing library and download any missing episodes
+- Can watch for better quality of the episodes you already have and do an automatic upgrade. *eg. from DVD to Blu-Ray*
+- Automatic failed download handling will try another release if one fails
+- Manual search so you can pick any release or to see why a release was not downloaded automatically
+- Fully configurable episode renaming
+- Full integration with SABnzbd and NZBGet
+- Full integration with Kodi, Plex (notification, library update, metadata)
+- Full support for specials and multi-episode releases
+- And a beautiful UI
 
 ## Configuring Development Environment:
 
 ### Requirements
 
-* [Visual Studio 2017] (https://www.visualstudio.com/vs/)
-* [Git](https://git-scm.com/downloads)
-* [NodeJS](https://nodejs.org/en/download/)
-* [Yarn](https://yarnpkg.com/)
+- [Visual Studio 2017](https://www.visualstudio.com/vs)
+- [Git](https://git-scm.com/downloads)
+- [NodeJS](https://nodejs.org/en/download)
+- [Yarn](https://yarnpkg.com)
 
 ### Setup
 
-* Make sure all the required software mentioned above are installed
-* Clone the repository into your development machine. [*info*](https://help.github.com/en/articles/working-with-forks)
-* Grab the submodules `git submodule init && git submodule update`
-* Install the required Node Packages `yarn`
+- Make sure all the required software mentioned above are installed
+- Clone the repository recursively to get Sonarr and it's submodules
+    - You can do this by running `git clone --recursive https://github.com/Sonarr/Sonarr.git`
+- Install the required Node Packages using `yarn`
 
 ### Backend Development
 
-* Run `yarn build` to build the UI
-* Open `Sonarr.sln` in Visual Studio
-* Make sure `NzbDrone.Console` is set as the startup project
-* Build `NzbDrone.Windows` and `NzbDrone.Mono` projects
-* Build Solution
+- Run `yarn build` to build the UI
+- Open `Sonarr.sln` in Visual Studio
+- Make sure `Sonarr.Console` is set as the startup project
+- Build `Sonarr.Windows` and `Sonarr.Mono` projects
+- Build Solution
 
 ### UI Development
 
-* Run `yarn watch` to build UI and rebuild automatically when changes are detected
-* Run Sonarr.Console.exe (or debug in Visual Studio)
+- Run `yarn watch` to build UI and rebuild automatically when changes are detected
+- Run Sonarr.Console.exe (or debug in Visual Studio)
 
-### License
+### Licenses
 
-
-* [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)
-* Copyright 2010-2019
+- [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)	
+- Copyright 2010-2020
 
 ### Sponsors
 
-* [JetBrains](http://www.jetbrains.com/) for providing us with free licenses to their great tools
-    * [ReSharper](http://www.jetbrains.com/resharper/)
-    * [TeamCity](http://www.jetbrains.com/teamcity/)
+- [JetBrains](http://www.jetbrains.com/) for providing us with free licenses to their great tools
+    - [ReSharper](http://www.jetbrains.com/resharper/)
+    - [TeamCity](http://www.jetbrains.com/teamcity/)

build.sh

@@ -1,15 +1,16 @@
 #! /bin/bash
 msBuildVersion='15.0'
 outputFolder='./_output'
+outputFolderWindows='./_output_windows'
 outputFolderLinux='./_output_linux'
 outputFolderMacOS='./_output_macos'
 outputFolderMacOSApp='./_output_macos_app'
-testPackageFolder='./_tests/'
-testSearchPattern='*.Test/bin/x86/Release'
+testPackageFolder='./_tests'
+testPackageFolderWindows='./_tests_windows'
+testPackageFolderLinux='./_tests_linux'
 sourceFolder='./src'
 slnFile=$sourceFolder/Sonarr.sln
-updateFolder=$outputFolder/Sonarr.Update
-updateFolderMono=$outputFolderLinux/Sonarr.Update
+updateSubFolder=Sonarr.Update
 
 nuget='tools/nuget/nuget.exe';
 vswhere='tools/vswhere/vswhere.exe';
@@ -47,7 +48,8 @@ UpdateVersionNumber()
         verBuild=`echo "${BUILD_NUMBER}" | cut -d. -f4`
         BUILD_NUMBER=$verMajorMinorRevision.$verBuild
         echo "##teamcity[buildNumber '$BUILD_NUMBER']"
-        sed -i "s/^[[]assembly: Assembly\(File\|Informational\)\?Version[(]\"[0-9.*]\+\"[)]/[assembly: Assembly\1Version(\"$BUILD_NUMBER\")/g" ./src/NzbDrone*/Properties/AssemblyInfo.cs ./src/Sonarr*/Properties/AssemblyInfo.cs ./src/ServiceHelpers/*/Properties/AssemblyInfo.cs ./src/Common/CommonVersionInfo.cs
+        sed -i "s/<AssemblyVersion>[0-9.*]\+<\/AssemblyVersion>/<AssemblyVersion>$BUILD_NUMBER<\/AssemblyVersion>/g" ./src/Directory.Build.props
+        sed -i "s/<AssemblyConfiguration>[\$()A-Za-z-]\+<\/AssemblyConfiguration>/<AssemblyConfiguration>${BRANCH:-dev}<\/AssemblyConfiguration>/g" ./src/Directory.Build.props
     fi
 }
 
@@ -86,13 +88,14 @@ CleanFolder()
 
 BuildWithMSBuild()
 {
-    installationPath=`$vswhere -latest -products \* -requires Microsoft.Component.MSBuild -property installationPath`
-    installationPath=${installationPath/C:\\/\/c\/}
-    installationPath=${installationPath//\\/\/}
-    msBuild="$installationPath/MSBuild/$msBuildVersion/Bin"
-    echo $msBuild
+    msBuildPath=`$vswhere -latest -products \* -requires Microsoft.Component.MSBuild -find MSBuild\\\\\*\*\\\\Bin\\\\MSBuild.exe`
+    msBuildPath=${msBuildPath/C:\\/\/c\/}
+    msBuildPath=${msBuildPath//\\/\/}
+    msBuildDir=$(dirname "$msBuildPath")
 
-    export PATH=$msBuild:$PATH
+    echo $msBuildDir
+
+    export PATH=$msBuildDir:$PATH
     CheckExitCode MSBuild.exe $slnFile //p:Configuration=Release //p:Platform=x86 //t:Clean //m
     $nuget restore $slnFile
     CheckExitCode MSBuild.exe $slnFile //p:Configuration=Release //p:Platform=x86 //t:Build //m //p:AllowedReferenceRelatedFileExtensions=.pdb
@@ -101,15 +104,15 @@ BuildWithMSBuild()
 BuildWithXbuild()
 {
     export MONO_IOMAP=case
-    CheckExitCode xbuild /t:Clean $slnFile
+    CheckExitCode msbuild /t:Clean $slnFile
     mono $nuget restore $slnFile
-    CheckExitCode xbuild /p:Configuration=Release /p:Platform=x86 /t:Build /p:AllowedReferenceRelatedFileExtensions=.pdb $slnFile
+    CheckExitCode msbuild /p:Configuration=Release /p:Platform=x86 /t:Build /p:AllowedReferenceRelatedFileExtensions=.pdb $slnFile
 }
 
 LintUI()
 {
     ProgressStart 'ESLint'
-    CheckExitCode yarn eslint
+    CheckExitCode yarn lint
     ProgressEnd 'ESLint'
 
     ProgressStart 'Stylelint'
@@ -122,6 +125,7 @@ Build()
     ProgressStart 'Build'
 
     rm -rf $outputFolder
+    rm -rf $testPackageFolder
 
     if [ $runtime = "dotnet" ] ; then
         BuildWithMSBuild
@@ -167,6 +171,48 @@ CreateMdbs()
     fi
 }
 
+PatchMono()
+{
+    local path=$1
+
+    # Below we deal with some mono incompatibilities with windows-only dotnet core/standard libs    
+    # See: https://github.com/mono/mono/blob/master/tools/nuget-hash-extractor/download.sh
+    # That list defines assemblies that are prohibited from being loaded from the appdir, instead loading from mono GAC.
+
+    # We have debian dependencies to get these installed or facades from mono 5.10+
+    for assembly in System.IO.Compression System.Runtime.InteropServices.RuntimeInformation System.Net.Http System.Globalization.Extensions System.Text.Encoding.CodePages System.Threading.Overlapped
+    do
+        if [ -e $path/$assembly.dll ]; then
+            if [ -e $sourceFolder/Libraries/Mono/$assembly.dll ]; then
+                echo "Copy Mono-specific facade $assembly.dll (uses win32 interop)"
+                cp $sourceFolder/Libraries/Mono/$assembly.dll $path/$assembly.dll
+            else
+                echo "Remove $assembly.dll (uses win32 interop)"
+                rm $path/$assembly.dll
+            fi
+            
+        fi
+    done
+
+    # Copy more stable version of Vectors for mono <5.12
+    if [ -e $path/System.Numerics.Vectors.dll ]; then
+        packageDir="$HOME/.nuget/packages/system.numerics.vectors/4.5.0"
+
+        if [ ! -d "$HOME/.nuget/packages/system.numerics.vectors/4.5.0" ]; then
+            # May reside in the NuGetFallback folder, which is harder to find
+            # Download somewhere to get the real cache populated
+            if [ $runtime = "dotnet" ] ; then
+                $nuget install System.Numerics.Vectors -Version 4.5.0 -Output ./_temp/System.Numerics.Vectors
+            else
+                mono $nuget install System.Numerics.Vectors -Version 4.5.0 -Output ./_temp/System.Numerics.Vectors
+            fi
+            rm -rf ./_temp/System.Numerics.Vectors
+        fi
+        # Copy the netstandard2.0 version rather than net46
+        cp "$packageDir/lib/netstandard2.0/System.Numerics.Vectors.dll" $path/
+    fi
+}
+
 PackageMono()
 {
     ProgressStart 'Creating Mono Package'
@@ -190,15 +236,14 @@ PackageMono()
     rm -f $outputFolderLinux/sqlite3.*
     rm -f $outputFolderLinux/MediaInfo.*
 
+    PatchMono $outputFolderLinux
+
     echo "Adding Sonarr.Core.dll.config (for dllmap)"
     cp $sourceFolder/NzbDrone.Core/Sonarr.Core.dll.config $outputFolderLinux
 
-    echo "Adding CurlSharp.dll.config (for dllmap)"
-    cp $sourceFolder/NzbDrone.Common/CurlSharp.dll.config $outputFolderLinux
-
-    echo "Adding unix System.Runtime.InteropServices.RuntimeInformation.dll (for SharpRaven)"
-    cp $sourceFolder/packages/System.Runtime.InteropServices.RuntimeInformation.4.3.0/runtimes/unix/lib/netstandard1.1/System.Runtime.InteropServices.RuntimeInformation.dll $outputFolderLinux
-    cp $sourceFolder/packages/System.Runtime.InteropServices.RuntimeInformation.4.3.0/runtimes/unix/lib/netstandard1.1/System.Runtime.InteropServices.RuntimeInformation.dll $outputFolderLinux/Sonarr.Update
+    # Remove Http binding redirect by renaming it
+    # We don't need this anymore once our minimum mono version is 5.10
+    sed -i "s/System.Net.Http/System.Net.Http.Mono/g" $outputFolderLinux/Sonarr.Console.exe.config
 
     echo "Renaming Sonarr.Console.exe to Sonarr.exe"
     rm $outputFolderLinux/Sonarr.exe*
@@ -210,7 +255,7 @@ PackageMono()
     rm $outputFolderLinux/Sonarr.Windows.*
 
     echo "Adding Sonarr.Mono to UpdatePackage"
-    cp $outputFolderLinux/Sonarr.Mono.* $updateFolderMono
+    cp $outputFolderLinux/Sonarr.Mono.* $outputFolderLinux/$updateSubFolder/
 
     ProgressEnd 'Creating Mono Package'
 }
@@ -266,54 +311,92 @@ PackageMacOSApp()
     ProgressEnd 'Creating macOS App Package'
 }
 
-PackageTests()
+PackageTestsMono()
 {
-    ProgressStart 'Creating Test Package'
+    ProgressStart 'Creating Mono Test Package'
 
-    rm -rf $testPackageFolder
-    mkdir $testPackageFolder
+    rm -rf $testPackageFolderLinux
 
-    find $sourceFolder -path $testSearchPattern -exec cp -r -u -T "{}" $testPackageFolder \;
+    echo "Copying Binaries"
+    cp -r $testPackageFolder $testPackageFolderLinux
 
     if [ $runtime = "dotnet" ] ; then
-        $nuget install NUnit.ConsoleRunner -Version 3.2.0 -Output $testPackageFolder
+        $nuget install NUnit.ConsoleRunner -Version 3.10.0 -Output $testPackageFolderLinux
     else
-        mono $nuget install NUnit.ConsoleRunner -Version 3.2.0 -Output $testPackageFolder
+        mono $nuget install NUnit.ConsoleRunner -Version 3.10.0 -Output $testPackageFolderLinux
     fi
 
-    cp $outputFolder/*.dll $testPackageFolder
-    cp ./test.sh $testPackageFolder
+    echo "Creating MDBs"
+    CreateMdbs $testPackageFolderLinux
 
-    echo "Creating MDBs for tests"
-    CreateMdbs $testPackageFolder
+    echo "Removing PDBs"
+    find $testPackageFolderLinux -name "*.pdb" -exec rm "{}" \;
 
-    rm -f $testPackageFolder/*.log.config
-
-    CleanFolder $testPackageFolder true
+    PatchMono $testPackageFolderLinux
 
     echo "Adding Sonarr.Core.dll.config (for dllmap)"
-    cp $sourceFolder/NzbDrone.Core/Sonarr.Core.dll.config $testPackageFolder
+    cp $sourceFolder/NzbDrone.Core/Sonarr.Core.dll.config $testPackageFolderLinux
 
-    echo "Adding CurlSharp.dll.config (for dllmap)"
-    cp $sourceFolder/NzbDrone.Common/CurlSharp.dll.config $testPackageFolder
+    # Remove Http binding redirect by renaming it
+    # We don't need this anymore once our minimum mono version is 5.10
+    sed -i "s/System.Net.Http/System.Net.Http.Mono/g" $testPackageFolderLinux/Sonarr.Common.Test.dll.config
 
-    echo "Copying CurlSharp libraries"
-    cp $sourceFolder/ExternalModules/CurlSharp/libs/i386/* $testPackageFolder
+    cp ./test.sh $testPackageFolderLinux/
+    dos2unix $testPackageFolderLinux/test.sh
 
-    ProgressEnd 'Creating Test Package'
+    echo "Removing Sonarr.Windows"
+    rm $testPackageFolderLinux/Sonarr.Windows.*
+
+    rm -f $testPackageFolderLinux/*.log.config
+
+    CleanFolder $testPackageFolderLinux true
+
+    ProgressEnd 'Creating Linux Test Package'
 }
 
-CleanupWindowsPackage()
+PackageTestsWindows()
 {
-    ProgressStart 'Cleaning Windows Package'
+    ProgressStart 'Creating Windows Test Package'
+
+    rm -rf $testPackageFolderWindows
+
+    echo "Copying Binaries"
+    cp -r $testPackageFolder $testPackageFolderWindows
+
+    if [ $runtime = "dotnet" ] ; then
+        $nuget install NUnit.ConsoleRunner -Version 3.10.0 -Output $testPackageFolderWindows
+    else
+        mono $nuget install NUnit.ConsoleRunner -Version 3.10.0 -Output $testPackageFolderWindows
+    fi
+
+    cp ./test.sh $testPackageFolderWindows
 
     echo "Removing Sonarr.Mono"
-    rm -f $outputFolder/Sonarr.Mono.*
+    rm -f $testPackageFolderWindows/Sonarr.Mono.*
+
+    rm -f $testPackageFolderWindows/*.log.config
+
+    CleanFolder $testPackageFolderWindows true
+
+    ProgressEnd 'Creating Windows Test Package'
+}
+
+PackageWindows()
+{
+    ProgressStart 'Creating Windows Package'
+
+    rm -rf $outputFolderWindows
+    
+    echo "Copying Binaries"
+    cp -r $outputFolder $outputFolderWindows
+
+    echo "Removing Sonarr.Mono"
+    rm -f $outputFolderWindows/Sonarr.Mono.*
 
     echo "Adding Sonarr.Windows to UpdatePackage"
-    cp $outputFolder/Sonarr.Windows.* $updateFolder
+    cp $outputFolderWindows/Sonarr.Windows.* $outputFolderWindows/$updateSubFolder/
 
-    ProgressEnd 'Cleaning Windows Package'
+    ProgressEnd 'Creating Windows Package'
 }
 
 PublishArtifacts()
@@ -321,10 +404,11 @@ PublishArtifacts()
     ProgressStart 'Publishing Artifacts'
 
     # Tests
-    echo "##teamcity[publishArtifacts '_tests/** => tests.zip']"
+    echo "##teamcity[publishArtifacts '$testPackageFolderWindows/** => tests.windows.zip']"
+    echo "##teamcity[publishArtifacts '$testPackageFolderLinux/** => tests.linux.zip']"
 
     # Releases
-    echo "##teamcity[publishArtifacts '$outputFolder/** => Sonarr.$BRANCH.$BUILD_NUMBER.windows.zip!Sonarr']"
+    echo "##teamcity[publishArtifacts '$outputFolderWindows/** => Sonarr.$BRANCH.$BUILD_NUMBER.windows.zip!Sonarr']"
     echo "##teamcity[publishArtifacts '$outputFolderLinux/** => Sonarr.$BRANCH.$BUILD_NUMBER.linux.tar.gz!Sonarr']"
     echo "##teamcity[publishArtifacts '$outputFolderMacOS/** => Sonarr.$BRANCH.$BUILD_NUMBER.macos.tar.gz!Sonarr']"
     echo "##teamcity[publishArtifacts '$outputFolderMacOSApp/** => Sonarr.$BRANCH.$BUILD_NUMBER.macos.zip']"
@@ -354,6 +438,7 @@ RunGulp
 PackageMono
 PackageMacOS
 PackageMacOSApp
-PackageTests
-CleanupWindowsPackage
+PackageTestsMono
+PackageTestsWindows
+PackageWindows
 PublishArtifacts

distribution/build-package.sh

@@ -0,0 +1,7 @@
+# Note, this script is only used for local dev tests, this is not the script used for building the official sonarr package
+
+mkdir -p /${PWD}/../_output_debian
+
+docker build -f docker-build/Dockerfile -t sonarr-packager ./docker-build
+
+docker run --rm -v /${PWD}/../_output_linux:/data/sonarr_bin:ro -v /${PWD}:/data/build -v /${PWD}/../_output_debian:/data/output sonarr-packager

distribution/debian.sh

@@ -19,7 +19,11 @@ sed -i '/#BEGIN BUILTIN UPDATER/,/#END BUILTIN UPDATER/d' debian/preinst debian/
 echo "# Do Not Edit\nPackageVersion=$BuildVersion\nReleaseVersion=$BuildVersion\nUpdateMethod=$PackageUpdater\nBranch=$BuildBranch" > package_info
 
 echo Running debuild for $BuildVersion
-debuild -b
+if [ -z "${TEST_OUTPUT}" ]; then
+    debuild -b
+else
+    debuild -us -uc -b
+fi
 
 # Restore debian directory to the original files
 rm -rf ./debian
@@ -32,16 +36,28 @@ sed -i '/#BEGIN BUILTIN UPDATER/d; /#END BUILTIN UPDATER/d' debian/preinst debia
 echo "# Do Not Edit\nPackageVersion=$BootstrapVersion\nReleaseVersion=$BuildVersion\nUpdateMethod=$BootstrapUpdater\nBranch=$BuildBranch" > package_info
 
 echo Running debuild for $BootstrapVersion
-debuild -b
+if [ -z "${TEST_OUTPUT}" ]; then
+    debuild -b
+else
+    debuild -us -uc -b
+fi
 
 echo Moving stuff around
 mv ../sonarr_*.deb ./
 mv ../sonarr_*.changes ./
 rm ../sonarr_*.build
 
-echo Signing Package
-dpkg-sig -k 884589CE --sign builder "sonarr_${BuildVersion}_all.deb"
-dpkg-sig -k 884589CE --sign builder "sonarr_${BootstrapVersion}_all.deb"
+if [ -z "${TEST_OUTPUT}" ]; then
+    echo Signing Package
+    dpkg-sig -k 884589CE --sign builder "sonarr_${BuildVersion}_all.deb"
+    dpkg-sig -k 884589CE --sign builder "sonarr_${BootstrapVersion}_all.deb"
 
-echo running alien
-alien -r -v ./*.deb
+    echo running alien
+    alien -r -v ./*.deb
+else
+    echo "Exporting packages to ${TEST_OUTPUT}"
+    dpkg -e "sonarr_${BuildVersion}_all.deb" ${TEST_OUTPUT}/sonarr-build
+    dpkg -e "sonarr_${BootstrapVersion}_all.deb" ${TEST_OUTPUT}/sonarr-release
+
+    cp *.deb ${TEST_OUTPUT}/
+fi

distribution/debian/control

@@ -7,15 +7,16 @@ Vcs-Git: git@github.com:Sonarr/Sonarr.git
 Vcs-Browser: https://github.com/Sonarr/Sonarr
 Build-Depends:  debhelper (>= 9),
                 dh-systemd (>= 1.5),
-                mono-devel (>= 4.6),
-                libmono-cil-dev (>= 4.6),
-                cli-common-dev (>= 0.5.7)
+                mono-devel (>= 5.18),
+                libmono-cil-dev (>= 5.18),
+                cli-common-dev (>= 0.9+xamarin5)
 
 Package: sonarr
 Architecture: all
 Provides: nzbdrone
 Conflicts: nzbdrone
 Replaces: nzbdrone
-Depends: adduser, libsqlite3-0 (>= 3.7), libmediainfo0v5 (>= 0.7.52), mono-runtime (>= 5.4), ${cli:Depends}, ${misc:Depends}
-Recommends: sqlite3 (>= 3.7), mediainfo (>= 0.7.52), ${cli:Recommends}
+Depends: adduser, libsqlite3-0 (>= 3.7), libmediainfo0v5 (>= 0.7.52) | libmediainfo0 (>= 0.7.52), mono-runtime (>= 5.18), ca-certificates-mono, libmono-system-net-http4.0-cil (>= 4.0.0~alpha1), ${cli:Depends}, ${misc:Depends}
+Recommends: libmediainfo0v5 (>= 18.03) | libmediainfo0 (>= 18.03)
+Suggests: sqlite3 (>= 3.7), mediainfo (>= 0.7.52)
 Description: Internet PVR

distribution/debian/install

@@ -1,2 +1,2 @@
-sonarr_bin/* /usr/lib/sonarr/bin
-package_info /usr/lib/sonarr
+sonarr_bin/* usr/lib/sonarr/bin
+package_info usr/lib/sonarr

distribution/debian/postinst

@@ -95,7 +95,7 @@ chown -R $USER:$GROUP /usr/lib/sonarr
 sed -i "s:User=sonarr:User=$USER:g; s:Group=sonarr:Group=$GROUP:g; s:-data=/var/lib/sonarr:-data=$CONFDIR:g" /lib/systemd/system/sonarr.service
 
 #BEGIN BUILTIN UPDATER
-if [ $1 = "upgrade" ] && [ "$UPDATER" = "BuiltIn" ]; then
+if [ "$UPDATER" = "BuiltIn" ]; then
   # If we upgraded, signal Sonarr to do an update check on startup instead of scheduled.
   touch $CONFDIR/update_required
   chown $USER:$GROUP $CONFDIR/update_required
@@ -104,4 +104,4 @@ fi
 
 #DEBHELPER#
 
-exit 0
+exit 0

distribution/debian/preinst

@@ -22,10 +22,25 @@ if [ $1 = "install" ]; then
     fi
 
     if [ "$psNzbDroneUnit" != "-" ] && [ -d /run/systemd/system ]; then
-      # The user used a systemd auto-startup for NzbDrone, we can deal with that.
-      echo "NzbDrone systemd startup detected at $psNzbDroneUnit, stopping and disabling..."
-      deb-systemd-invoke stop $psNzbDroneUnit >/dev/null
-      deb-systemd-invoke mask $psNzbDroneUnit >/dev/null
+      if [ "$psNzbDroneUnit" = "sonarr.service" ]; then
+        # Conflicts with our new sonarr.service so we have to remove it
+        echo "NzbDrone systemd startup detected at $psNzbDroneUnit, stopping and removing..."
+        deb-systemd-invoke stop $psNzbDroneUnit >/dev/null
+        if [ -f "/etc/systemd/system/$psNzbDroneUnit" ]; then
+          rm /etc/systemd/system/$psNzbDroneUnit
+        fi
+        if [ -f "/usr/lib/systemd/system/$psNzbDroneUnit" ]; then
+          rm /usr/lib/systemd/system/$psNzbDroneUnit
+        fi
+        deb-systemd-helper purge $psNzbDroneUnit >/dev/null
+		    deb-systemd-helper unmask $psNzbDroneUnit >/dev/null
+        systemctl --system daemon-reload >/dev/null || true
+      else
+        # Just disable it, so the user can revisit the settings later
+        echo "NzbDrone systemd startup detected at $psNzbDroneUnit, stopping and disabling..."
+        deb-systemd-invoke stop $psNzbDroneUnit >/dev/null
+        deb-systemd-invoke mask $psNzbDroneUnit >/dev/null
+      fi
     else
       # We don't support auto migration for other startup methods, so bail.
       # This leaves the sonarr package in an incomplete state.

distribution/debian/rules

@@ -1,17 +1,9 @@
 #!/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
 
-# Note: System.Native is a dependency of System.Runtime.InteropServices.RuntimeInformation used by SharpRaven,
-#       but SharpRaven doesn't use any functions that need System.Native
-EXCLUDE_MODULEREFS = crypt32 httpapi System.Native
+EXCLUDE_MODULEREFS = crypt32 httpapi __Internal ole32.dll libmonosgen-2.0 clr mscorlib mscoree.dll Microsoft.DiaSymReader.Native.x86.dll Microsoft.DiaSymReader.Native.amd64.dll
 
 %:
 	dh $@ --with=systemd --with=cli
@@ -20,7 +12,7 @@ EXCLUDE_MODULEREFS = crypt32 httpapi System.Native
 override_dh_installinit:
 	true
 
-# Sonarr like debug symbols for logging
+# Sonarr likes debug symbols for logging
 override_dh_clistrip:
 
 override_dh_makeclilibs:

distribution/debian/sonarr.clideps-override

@@ -1,2 +1,2 @@
-recommends libcurl3
-ignores msbuild
+ignores msbuild
+ignores libmediainfo0v5

distribution/docker-build/Dockerfile

@@ -0,0 +1,23 @@
+FROM ubuntu:xenial AS builder
+
+ENV DEBIAN_FRONTEND noninteractive 
+ENV MONO_VERSION 5.18
+
+RUN apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF && \
+    echo "deb http://download.mono-project.com/repo/debian stable-xenial/snapshots/$MONO_VERSION main" > /etc/apt/sources.list.d/mono-official-stable.list && \
+    apt-get update && apt-get install -y \ 
+        devscripts build-essential tofrodos \
+        dh-make dh-systemd \
+        cli-common-dev \
+        mono-complete \
+        sqlite3 libcurl3 mediainfo
+
+RUN apt-cache policy mono-complete
+RUN apt-cache policy cli-common-dev
+
+COPY debian-start.sh /debian-start.sh
+RUN  fromdos /debian-start.sh
+
+WORKDIR /data
+VOLUME [ "/data/sonarr_bin", "/data/build", "/data/output" ]
+CMD /debian-start.sh

distribution/docker-build/debian-start.sh

@@ -0,0 +1,18 @@
+echo "Debian Build Dev bootstrap..."
+
+export TEST_OUTPUT=/data/output
+
+mkdir ${TEST_OUTPUT}
+
+mkdir /data/temp
+
+cp -rf /data/build/debian.sh /data/temp
+cp -rf /data/build/debian /data/temp
+cp -rf /data/sonarr_bin /data/temp/sonarr_bin
+
+cd /data/temp
+
+ls -al .
+
+fromdos debian.sh
+sh debian.sh

docker/tests/mono/complete/Dockerfile

@@ -0,0 +1,22 @@
+FROM ubuntu:xenial
+
+ENV DEBIAN_FRONTEND noninteractive
+ARG MONO_VERSION=5.20
+ARG MONO_URL=stable-xenial/snapshots/$MONO_VERSION
+
+RUN apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF && \
+    echo "deb http://download.mono-project.com/repo/debian $MONO_URL main" > /etc/apt/sources.list.d/mono-official-stable.list && \
+    apt-get update && apt-get install -y \ 
+        tofrodos tzdata \
+        mono-complete \
+        sqlite3 mediainfo \
+        && rm -rf /var/lib/apt/lists/*
+
+COPY startup.sh /startup.sh
+RUN  fromdos /startup.sh
+
+WORKDIR /data/
+VOLUME ["/data/_tests_linux", "/data/_output_linux", "/data/_tests_results"]
+
+CMD bash /startup.sh
+

docker/tests/mono/sonarr/Dockerfile

@@ -0,0 +1,29 @@
+FROM ubuntu:xenial
+
+ENV DEBIAN_FRONTEND noninteractive
+ARG MONO_VERSION=5.20
+ARG MONO_URL=stable-xenial/snapshots/$MONO_VERSION
+
+RUN apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF && \
+    echo "deb http://download.mono-project.com/repo/debian $MONO_URL main" > /etc/apt/sources.list.d/mono-official-stable.list && \
+    apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 2009837CBFFD68F45BC180471F4F90DE2A9B4BF8 && \
+    echo "deb http://apt.sonarr.tv/ubuntu xenial main" > /etc/apt/sources.list.d/sonarr.list && \
+    apt-get update && apt-get install -y \ 
+        tofrodos tzdata \
+        sonarr \
+        sqlite3 mediainfo \
+        && rm -rf /var/lib/apt/lists/*
+
+RUN apt-get update && apt-get install -y \ 
+        libmono-system-runtime4.0-cil \
+        libmono-system-net-http4.0-cil \
+        && rm -rf /var/lib/apt/lists/*
+
+COPY startup.sh /startup.sh
+RUN  fromdos /startup.sh
+
+WORKDIR /data/
+VOLUME ["/data/_tests_linux", "/data/_output_linux", "/data/_tests_results"]
+
+CMD bash /startup.sh
+

docker/tests/mono/startup.sh

@@ -0,0 +1,15 @@
+echo "Preparing Test..."
+mkdir -p /data/test
+cp -r /data/_tests_linux/* /data/test/
+cp -r /data/_output_linux /data/test/bin
+
+cd /data/test
+
+runTest()
+{
+    bash test.sh Linux $1
+    cp TestResult.xml /data/_tests_results/TestResult_$1.xml
+}
+
+runTest Integration
+runTest Unit

docker/tests/run-all.sh

@@ -0,0 +1,121 @@
+
+opt_parallel=
+opt_version=
+opt_mode=both
+while getopts 'pv:m:r?h' c
+do
+  case $c in
+    p)   opt_parallel=1 ;;
+    v)   opt_version=$OPTARG ;;
+    m)   opt_mode=$OPTARG ;;
+    r)   opt_report=1 ;;
+    ?|h) printf "Usage: %s [-p] [-v mono-ver] [-m sonarr|complete]\n" $0 
+         printf " -p  run parallel\n"
+         printf " -v  run specified mono version\n"
+         printf " -m  run only mono-'complete' or 'sonarr' package variants\n"
+         printf " -r  only report\n"
+         exit 2
+  esac
+done
+# NOTE:
+# each container has a 1gb tmpfs mounted since it greatly speeds up the normally intensive db operations
+# make sure that the docker host has enough memory to handle about ~300 MB per container, so 2-3 GB total
+# excess goes to the swap and will slow down the entire system
+
+MONO_VERSIONS=""
+
+# Future versions
+MONO_VERSIONS="$MONO_VERSIONS 6.10=preview-xenial"
+
+# Semi-Supported versions
+MONO_VERSIONS="$MONO_VERSIONS 6.8 6.6 6.4 6.0"
+
+# Supported versions 
+MONO_VERSIONS="$MONO_VERSIONS 5.20 5.18"
+
+# Legacy unsupported versions (but appear to work)
+MONO_VERSIONS="$MONO_VERSIONS 5.16 5.14 5.12"
+
+# Legacy unsupported versions
+MONO_VERSIONS="$MONO_VERSIONS 5.10 5.8 5.4 5.0"
+#MONO_VERSIONS="$MONO_VERSIONS 4.8=stable-wheezy/snapshots/4.8"
+
+if [ "$opt_version" != "" ]; then
+    MONO_VERSIONS="$opt_version"
+fi
+
+mkdir -p ${PWD}/../../_tests_results
+
+prepOne() {
+    local MONO_VERSION_PAIR=$1
+
+    MONO_VERSION_SPLIT=(${MONO_VERSION_PAIR//=/ })
+    MONO_VERSION=${MONO_VERSION_SPLIT[0]}
+    MONO_URL=${MONO_VERSION_SPLIT[1]:-"stable-xenial/snapshots/$MONO_VERSION"}
+
+    echo "Building Test Docker for mono $MONO_VERSION"
+    
+    if [ "$opt_mode" != "sonarr" ]; then
+        docker build -t sonarr-test-$MONO_VERSION --build-arg MONO_VERSION=$MONO_VERSION --build-arg MONO_URL=$MONO_URL --file mono/complete/Dockerfile mono
+    fi
+
+    if [ "$opt_mode" != "complete" ] && [ "$MONO_VERSION" != "5.0" ]; then    
+        docker build -t sonarr-test-$MONO_VERSION-sonarr --build-arg MONO_VERSION=$MONO_VERSION --build-arg MONO_URL=$MONO_URL --file mono/sonarr/Dockerfile mono
+    fi
+}
+
+runOne() {
+    local MONO_VERSION_PAIR=$1
+
+    MONO_VERSION_SPLIT=(${MONO_VERSION_PAIR//=/ })
+    MONO_VERSION=${MONO_VERSION_SPLIT[0]}
+        
+    echo "Running Test Docker for mono $MONO_VERSION"
+
+    if [ "$opt_mode" != "sonarr" ]; then
+        dockerArgs="--rm"
+        dockerArgs="$dockerArgs -v /${PWD}/../../_tests_linux:/data/_tests_linux:ro"
+        dockerArgs="$dockerArgs -v /${PWD}/../../_output_linux:/data/_output_linux:ro"
+        dockerArgs="$dockerArgs -v /${PWD}/../../_tests_results/mono-$MONO_VERSION:/data/_tests_results"
+        dockerArgs="$dockerArgs --mount type=tmpfs,destination=//data/test,tmpfs-size=1g"
+        docker run $dockerArgs sonarr-test-$MONO_VERSION
+    fi
+
+    if [ "$opt_mode" != "complete" ] && [ "$MONO_VERSION" != "5.0" ]; then   
+        dockerArgs="--rm"
+        dockerArgs="$dockerArgs -v /${PWD}/../../_tests_linux:/data/_tests_linux:ro"
+        dockerArgs="$dockerArgs -v /${PWD}/../../_output_linux:/data/_output_linux:ro"
+        dockerArgs="$dockerArgs -v /${PWD}/../../_tests_results/mono-$MONO_VERSION-sonarr:/data/_tests_results"
+        dockerArgs="$dockerArgs --mount type=tmpfs,destination=//data/test,tmpfs-size=1g"
+        docker run $dockerArgs sonarr-test-$MONO_VERSION-sonarr
+    fi
+    
+    echo "Finished Test Docker for mono $MONO_VERSION"
+}
+
+if [ "$opt_report" != "1" ]; then
+
+    if [ "$opt_parallel" == "1" ]; then
+        for MONO_VERSION_PAIR in $MONO_VERSIONS; do
+            prepOne "$MONO_VERSION_PAIR"
+        done
+    fi
+
+    for MONO_VERSION_PAIR in $MONO_VERSIONS; do
+        if [ "$opt_parallel" == "1" ]; then
+            runOne "$MONO_VERSION_PAIR" &
+        else
+            prepOne "$MONO_VERSION_PAIR"
+            runOne "$MONO_VERSION_PAIR"
+        fi
+    done
+
+    if [ "$opt_parallel" == "1" ]; then
+        echo "Waiting for all runs to finish"
+        wait
+        echo "Finished all runs"
+    fi
+
+fi
+
+grep "<test-run" ../../_tests_results/**/*.xml | sed -r 's/.*?mono-([0-9.]+(-s)?).*?_([IU]).*?\.xml.*?failed="([0-9]*)".*/\1\t\3:\tfailed \4/g' | sort -V -t.

frontend/browsers.js

@@ -1,6 +0,0 @@
-module.exports = [
-  '>0.25%',
-  'not ie 11',
-  'not op_mini all',
-  'not chrome < 60'
-];

frontend/gulp/build.js

@@ -10,8 +10,7 @@ gulp.task('build',
       'webpack',
       'copyHtml',
       'copyFonts',
-      'copyImages',
-      'copyJs'
+      'copyImages'
     )
   )
 );

frontend/gulp/copy.js

@@ -5,17 +5,6 @@ const cache = require('gulp-cached');
 const livereload = require('gulp-livereload');
 const paths = require('./helpers/paths.js');
 
-gulp.task('copyJs', () => {
-  return gulp.src(
-    [
-      path.join(paths.src.root, 'polyfills.js')
-    ], { base: paths.src.root })
-    .pipe(cache('copyJs'))
-    .pipe(print())
-    .pipe(gulp.dest(paths.dest.root))
-    .pipe(livereload());
-});
-
 gulp.task('copyHtml', () => {
   return gulp.src(paths.src.html, { base: paths.src.root })
     .pipe(cache('copyHtml'))

frontend/gulp/webpack.js

@@ -5,15 +5,22 @@ const path = require('path');
 const webpack = require('webpack');
 const errorHandler = require('./helpers/errorHandler');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const browsers = require('../browsers');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const uiFolder = 'UI';
 const frontendFolder = path.join(__dirname, '..');
 const srcFolder = path.join(frontendFolder, 'src');
 const isProduction = process.argv.indexOf('--production') > -1;
+const isProfiling = isProduction && process.argv.indexOf('--profile') > -1;
+const inlineWebWorkers = true;
+
+const distFolder = path.resolve(frontendFolder, '..', '_output', uiFolder);
 
 console.log('Source Folder:', srcFolder);
+console.log('Output Folder:', distFolder);
 console.log('isProduction:', isProduction);
+console.log('isProfiling:', isProfiling);
 
 const cssVarsFiles = [
   '../src/Styles/Variables/colors',
@@ -23,6 +30,22 @@ const cssVarsFiles = [
   '../src/Styles/Variables/zIndexes'
 ].map(require.resolve);
 
+// Override the way HtmlWebpackPlugin injects the scripts
+HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, assets, assetTags) {
+  const head = assetTags.head.map((v) => {
+    v.attributes = { rel: 'stylesheet', type: 'text/css', href: `/${v.attributes.href.replace('\\', '/')}` };
+    return this.createHtmlTag(v);
+  });
+  const body = assetTags.body.map((v) => {
+    v.attributes = { src: `/${v.attributes.src}` };
+    return this.createHtmlTag(v);
+  });
+
+  return html
+    .replace('<!-- webpack bundles head -->', head.join('\r\n  '))
+    .replace('<!-- webpack bundles body -->', body.join('\r\n  '));
+};
+
 const plugins = [
   new webpack.DefinePlugin({
     __DEV__: !isProduction,
@@ -30,7 +53,12 @@ const plugins = [
   }),
 
   new MiniCssExtractPlugin({
-    filename: path.join('_output', uiFolder, 'Content', 'styles.css')
+    filename: path.join('Content', 'styles.css')
+  }),
+
+  new HtmlWebpackPlugin({
+    template: 'frontend/src/index.html',
+    filename: 'index.html'
   })
 ];
 
@@ -47,8 +75,6 @@ const config = {
   },
 
   entry: {
-    preload: 'preload.js',
-    vendor: 'vendor.js',
     index: 'index.js'
   },
 
@@ -64,12 +90,20 @@ const config = {
   },
 
   output: {
-    filename: path.join('_output', uiFolder, '[name].js'),
+    path: distFolder,
+    filename: '[name].js',
     sourceMapFilename: '[file].map'
   },
 
   optimization: {
-    chunkIds: 'named'
+    chunkIds: 'named',
+    splitChunks: {
+      chunks: 'initial'
+    }
+  },
+
+  performance: {
+    hints: false
   },
 
   plugins,
@@ -83,6 +117,22 @@ const config = {
 
   module: {
     rules: [
+      {
+        test: /\.worker\.js$/,
+        issuer: {
+          // monaco-editor includes the editor.worker.js in other language workers,
+          // don't use worker-loader in that case
+          exclude: /monaco-editor/
+        },
+        use: {
+          loader: 'worker-loader',
+          options: {
+            name: '[name].js',
+            inline: inlineWebWorkers,
+            fallback: !inlineWebWorkers
+          }
+        }
+      },
       {
         test: /\.js?$/,
         exclude: /(node_modules|JsLibraries)/,
@@ -100,7 +150,7 @@ const config = {
                     loose: true,
                     debug: false,
                     useBuiltIns: 'entry',
-                    targets: browsers
+                    corejs: 3
                   }
                 ]
               ]
@@ -119,8 +169,9 @@ const config = {
             loader: 'css-loader',
             options: {
               importLoaders: 1,
-              localIdentName: '[name]/[local]/[hash:base64:5]',
-              modules: true
+              modules: {
+                localIdentName: '[name]/[local]/[hash:base64:5]'
+              }
             }
           },
           {
@@ -182,9 +233,27 @@ const config = {
   }
 };
 
+if (isProfiling) {
+  config.resolve.alias['react-dom$'] = 'react-dom/profiling';
+  config.resolve.alias['scheduler/tracing'] = 'scheduler/tracing-profiling';
+
+  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
+      }
+    })
+  ];
+}
+
 gulp.task('webpack', () => {
   return webpackStream(config)
-    .pipe(gulp.dest('./'));
+    .pipe(gulp.dest('_output/UI'));
 });
 
 gulp.task('webpackWatch', () => {
@@ -192,7 +261,7 @@ gulp.task('webpackWatch', () => {
 
   return webpackStream(config)
     .on('error', errorHandler)
-    .pipe(gulp.dest('./'))
+    .pipe(gulp.dest('_output/UI'))
     .on('error', errorHandler)
     .pipe(livereload())
     .on('error', errorHandler);

frontend/jsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "target": "es6",
+        "checkJs": false,
+        "baseUrl": "src",
+        "jsx": "react",
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "paths": {
+            "*": [
+                "*"
+            ]
+        }
+    },
+    "include": [
+        "./src/**/*"
+    ],
+    "exclude": [
+    ]
+}

frontend/postcss.config.js

@@ -1,5 +1,4 @@
 const reload = require('require-nocache')(module);
-const browsers = require('./browsers');
 
 module.exports = (ctx, configPath, options) => {
   const config = {
@@ -16,10 +15,7 @@ module.exports = (ctx, configPath, options) => {
           }, {})
       },
       'postcss-color-function': {},
-      'postcss-nested': {},
-      autoprefixer: {
-        browsers
-      }
+      'postcss-nested': {}
     }
   };
 

frontend/src/Activity/Blacklist/Blacklist.js

@@ -7,7 +7,7 @@ import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
@@ -56,7 +56,7 @@ class Blacklist extends Component {
           </PageToolbarSection>
         </PageToolbar>
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isFetching && !isPopulated &&
               <LoadingIndicator />
@@ -103,7 +103,7 @@ class Blacklist extends Component {
                 />
               </div>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }

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

@@ -232,6 +232,30 @@ function HistoryDetails(props) {
     );
   }
 
+  if (eventType === 'downloadIgnored') {
+    const {
+      message
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          descriptionClassName={styles.description}
+          title="Name"
+          data={sourceTitle}
+        />
+
+        {
+          !!message &&
+            <DescriptionListItem
+              title="Message"
+              data={message}
+            />
+        }
+      </DescriptionList>
+    );
+  }
+
   return (
     <DescriptionList>
       <DescriptionListItem

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

@@ -23,6 +23,8 @@ function getHeaderTitle(eventType) {
       return 'Episode File Deleted';
     case 'episodeFileRenamed':
       return 'Episode File Renamed';
+    case 'downloadIgnored':
+      return 'Download Ignored';
     default:
       return 'Unknown';
   }

frontend/src/Activity/History/History.js

@@ -8,7 +8,7 @@ import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
@@ -96,7 +96,7 @@ class History extends Component {
           </PageToolbarSection>
         </PageToolbar>
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isFetchingAny && !isAllPopulated &&
               <LoadingIndicator />
@@ -147,7 +147,7 @@ class History extends Component {
                 />
               </div>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }

frontend/src/Activity/History/HistoryEventTypeCell.js

@@ -19,6 +19,8 @@ function getIconName(eventType) {
       return icons.DELETE;
     case 'episodeFileRenamed':
       return icons.ORGANIZE;
+    case 'downloadIgnored':
+      return icons.IGNORE;
     default:
       return icons.UNKNOWN;
   }
@@ -47,6 +49,8 @@ function getTooltip(eventType, data) {
       return 'Episode file deleted';
     case 'episodeFileRenamed':
       return 'Episode file renamed';
+    case 'downloadIgnored':
+      return 'Episode Download Ignored';
     default:
       return 'Unknown event';
   }

frontend/src/Activity/Queue/Queue.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import getRemovedItems from 'Utilities/Object/getRemovedItems';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
@@ -12,7 +13,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TablePager from 'Components/Table/TablePager';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
@@ -36,34 +37,26 @@ class Queue extends Component {
       lastToggled: null,
       selectedState: {},
       isPendingSelected: false,
-      isConfirmRemoveModalOpen: false
+      isConfirmRemoveModalOpen: false,
+      items: props.items
     };
   }
 
-  shouldComponentUpdate(nextProps) {
-    // Don't update when fetching has completed if items have changed,
-    // before episodes start fetching or when episodes start fetching.
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      isEpisodesFetching
+    } = this.props;
 
     if (
-      this.props.isFetching &&
-      nextProps.isPopulated &&
-      hasDifferentItems(this.props.items, nextProps.items) &&
-      nextProps.items.some((e) => e.episodeId)
+      (!isEpisodesFetching && prevProps.isEpisodesFetching) ||
+      (hasDifferentItems(prevProps.items, items) && !items.some((e) => e.episodeId))
     ) {
-      return false;
-    }
-
-    if (!this.props.isEpisodesFetching && nextProps.isEpisodesFetching) {
-      return false;
-    }
-
-    return true;
-  }
-
-  componentDidUpdate(prevProps) {
-    if (hasDifferentItems(prevProps.items, this.props.items)) {
       this.setState((state) => {
-        return removeOldSelectedState(state, prevProps.items);
+        return {
+          ...removeOldSelectedState(state, getRemovedItems(prevProps.items, items)),
+          items
+        };
       });
 
       return;
@@ -71,7 +64,7 @@ class Queue extends Component {
 
     const selectedIds = this.getSelectedIds();
     const isPendingSelected = _.some(this.props.items, (item) => {
-      return selectedIds.indexOf(item.id) > -1 && item.status === 'Delay';
+      return selectedIds.indexOf(item.id) > -1 && item.status === 'delay';
     });
 
     if (isPendingSelected !== this.state.isPendingSelected) {
@@ -107,8 +100,8 @@ class Queue extends Component {
     this.setState({ isConfirmRemoveModalOpen: true });
   }
 
-  onRemoveSelectedConfirmed = (blacklist) => {
-    this.props.onRemoveSelectedPress(this.getSelectedIds(), blacklist);
+  onRemoveSelectedConfirmed = (payload) => {
+    this.props.onRemoveSelectedPress({ ids: this.getSelectedIds(), ...payload });
     this.setState({ isConfirmRemoveModalOpen: false });
   }
 
@@ -124,7 +117,6 @@ class Queue extends Component {
       isFetching,
       isPopulated,
       error,
-      items,
       isEpisodesFetching,
       isEpisodesPopulated,
       episodesError,
@@ -132,7 +124,7 @@ class Queue extends Component {
       totalRecords,
       isGrabbing,
       isRemoving,
-      isCheckForFinishedDownloadExecuting,
+      isRefreshMonitoredDownloadsExecuting,
       onRefreshPress,
       ...otherProps
     } = this.props;
@@ -142,13 +134,15 @@ class Queue extends Component {
       allUnselected,
       selectedState,
       isConfirmRemoveModalOpen,
-      isPendingSelected
+      isPendingSelected,
+      items
     } = this.state;
 
-    const isRefreshing = isFetching || isEpisodesFetching || isCheckForFinishedDownloadExecuting;
+    const isRefreshing = isFetching || isEpisodesFetching || isRefreshMonitoredDownloadsExecuting;
     const isAllPopulated = isPopulated && (isEpisodesPopulated || !items.length || items.every((e) => !e.episodeId));
     const hasError = error || episodesError;
-    const selectedCount = this.getSelectedIds().length;
+    const selectedIds = this.getSelectedIds();
+    const selectedCount = selectedIds.length;
     const disableSelectedActions = selectedCount === 0;
 
     return (
@@ -197,7 +191,7 @@ class Queue extends Component {
           </PageToolbarSection>
         </PageToolbar>
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isRefreshing && !isAllPopulated &&
               <LoadingIndicator />
@@ -254,11 +248,18 @@ class Queue extends Component {
                 />
               </div>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
 
         <RemoveQueueItemsModal
           isOpen={isConfirmRemoveModalOpen}
           selectedCount={selectedCount}
+          canIgnore={isConfirmRemoveModalOpen && (
+            selectedIds.every((id) => {
+              const item = items.find((i) => i.id === id);
+
+              return !!(item && item.seriesId && item.episodeId);
+            })
+          )}
           onRemovePress={this.onRemoveSelectedConfirmed}
           onModalClose={this.onConfirmRemoveModalClose}
         />
@@ -279,7 +280,7 @@ Queue.propTypes = {
   totalRecords: PropTypes.number,
   isGrabbing: PropTypes.bool.isRequired,
   isRemoving: PropTypes.bool.isRequired,
-  isCheckForFinishedDownloadExecuting: PropTypes.bool.isRequired,
+  isRefreshMonitoredDownloadsExecuting: PropTypes.bool.isRequired,
   onRefreshPress: PropTypes.func.isRequired,
   onGrabSelectedPress: PropTypes.func.isRequired,
   onRemoveSelectedPress: PropTypes.func.isRequired

frontend/src/Activity/Queue/QueueConnector.js

@@ -18,13 +18,13 @@ function createMapStateToProps() {
     (state) => state.episodes,
     (state) => state.queue.options,
     (state) => state.queue.paged,
-    createCommandExecutingSelector(commandNames.CHECK_FOR_FINISHED_DOWNLOAD),
-    (episodes, options, queue, isCheckForFinishedDownloadExecuting) => {
+    createCommandExecutingSelector(commandNames.REFRESH_MONITORED_DOWNLOADS),
+    (episodes, options, queue, isRefreshMonitoredDownloadsExecuting) => {
       return {
         isEpisodesFetching: episodes.isFetching,
         isEpisodesPopulated: episodes.isPopulated,
         episodesError: episodes.error,
-        isCheckForFinishedDownloadExecuting,
+        isRefreshMonitoredDownloadsExecuting,
         ...options,
         ...queue
       };
@@ -129,7 +129,7 @@ class QueueConnector extends Component {
 
   onRefreshPress = () => {
     this.props.executeCommand({
-      name: commandNames.CHECK_FOR_FINISHED_DOWNLOAD
+      name: commandNames.REFRESH_MONITORED_DOWNLOADS
     });
   }
 
@@ -137,8 +137,8 @@ class QueueConnector extends Component {
     this.props.grabQueueItems({ ids });
   }
 
-  onRemoveSelectedPress = (ids, blacklist) => {
-    this.props.removeQueueItems({ ids, blacklist });
+  onRemoveSelectedPress = (payload) => {
+    this.props.removeQueueItems(payload);
   }
 
   //

frontend/src/Activity/Queue/QueueDetails.js

@@ -10,13 +10,13 @@ function QueueDetails(props) {
     size,
     sizeleft,
     estimatedCompletionTime,
-    status: queueStatus,
+    status,
+    trackedDownloadState,
+    trackedDownloadStatus,
     errorMessage,
     progressBar
   } = props;
 
-  const status = queueStatus.toLowerCase();
-
   const progress = (100 - sizeleft / size * 100);
 
   if (status === 'pending') {
@@ -39,7 +39,35 @@ function QueueDetails(props) {
       );
     }
 
-    // TODO: show an icon when download is complete, but not imported yet?
+    if (trackedDownloadStatus === 'warning') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.WARNING}
+          title={'Downloaded - Unable to Import: check logs for details'}
+        />
+      );
+    }
+
+    if (trackedDownloadState === 'importPending') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.PURPLE}
+          title={'Downloaded - Waiting to Import'}
+        />
+      );
+    }
+
+    if (trackedDownloadState === 'importing') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.PURPLE}
+          title={'Downloaded - Importing'}
+        />
+      );
+    }
   }
 
   if (errorMessage) {
@@ -90,6 +118,8 @@ QueueDetails.propTypes = {
   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
 };

frontend/src/Activity/Queue/QueueRow.js

@@ -68,6 +68,7 @@ class QueueRow extends Component {
       title,
       status,
       trackedDownloadStatus,
+      trackedDownloadState,
       statusMessages,
       errorMessage,
       series,
@@ -100,8 +101,8 @@ class QueueRow extends Component {
     } = this.state;
 
     const progress = 100 - (sizeleft / size * 100);
-    const showInteractiveImport = status === 'Completed' && trackedDownloadStatus === 'Warning';
-    const isPending = status === 'Delay' || status === 'DownloadClientUnavailable';
+    const showInteractiveImport = status === 'completed' && trackedDownloadStatus === 'warning';
+    const isPending = status === 'delay' || status === 'downloadClientUnavailable';
 
     return (
       <TableRow>
@@ -129,6 +130,7 @@ class QueueRow extends Component {
                   sourceTitle={title}
                   status={status}
                   trackedDownloadStatus={trackedDownloadStatus}
+                  trackedDownloadState={trackedDownloadState}
                   statusMessages={statusMessages}
                   errorMessage={errorMessage}
                 />
@@ -220,9 +222,13 @@ class QueueRow extends Component {
             if (name === 'quality') {
               return (
                 <TableRowCell key={name}>
-                  <EpisodeQuality
-                    quality={quality}
-                  />
+                  {
+                    quality ?
+                      <EpisodeQuality
+                        quality={quality}
+                      /> :
+                      null
+                  }
                 </TableRowCell>
               );
             }
@@ -350,6 +356,7 @@ class QueueRow extends Component {
         <RemoveQueueItemModal
           isOpen={isRemoveQueueItemModalOpen}
           sourceTitle={title}
+          canIgnore={!!series}
           onRemovePress={this.onRemoveQueueItemModalConfirmed}
           onModalClose={this.onRemoveQueueItemModalClose}
         />
@@ -365,6 +372,7 @@ QueueRow.propTypes = {
   title: PropTypes.string.isRequired,
   status: PropTypes.string.isRequired,
   trackedDownloadStatus: PropTypes.string,
+  trackedDownloadState: PropTypes.string,
   statusMessages: PropTypes.arrayOf(PropTypes.object),
   errorMessage: PropTypes.string,
   series: PropTypes.object,

frontend/src/Activity/Queue/QueueRowConnector.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -15,11 +14,11 @@ function createMapStateToProps() {
     createEpisodeSelector(),
     createUISettingsSelector(),
     (series, episode, uiSettings) => {
-      const result = _.pick(uiSettings, [
-        'showRelativeDates',
-        'shortDateFormat',
-        'timeFormat'
-      ]);
+      const result = {
+        showRelativeDates: uiSettings.showRelativeDates,
+        shortDateFormat: uiSettings.shortDateFormat,
+        timeFormat: uiSettings.timeFormat
+      };
 
       result.series = series;
       result.episode = episode;
@@ -43,8 +42,8 @@ class QueueRowConnector extends Component {
     this.props.grabQueueItem({ id: this.props.id });
   }
 
-  onRemoveQueueItemPress = (blacklist) => {
-    this.props.removeQueueItem({ id: this.props.id, blacklist });
+  onRemoveQueueItemPress = (payload) => {
+    this.props.removeQueueItem({ id: this.props.id, ...payload });
   }
 
   //

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -37,63 +37,79 @@ function QueueStatusCell(props) {
   const {
     sourceTitle,
     status,
-    trackedDownloadStatus = 'Ok',
+    trackedDownloadStatus,
+    trackedDownloadState,
     statusMessages,
     errorMessage
   } = props;
 
-  const hasWarning = trackedDownloadStatus === 'Warning';
-  const hasError = trackedDownloadStatus === 'Error';
+  const hasWarning = trackedDownloadStatus === 'warning';
+  const hasError = trackedDownloadStatus === 'error';
 
   // status === 'downloading'
   let iconName = icons.DOWNLOADING;
   let iconKind = kinds.DEFAULT;
   let title = 'Downloading';
 
-  if (hasWarning) {
-    iconKind = kinds.WARNING;
-  }
-
-  if (status === 'Paused') {
+  if (status === 'paused') {
     iconName = icons.PAUSED;
     title = 'Paused';
   }
 
-  if (status === 'Queued') {
+  if (status === 'queued') {
     iconName = icons.QUEUED;
     title = 'Queued';
   }
 
-  if (status === 'Completed') {
+  if (status === 'completed') {
     iconName = icons.DOWNLOADED;
     title = 'Downloaded';
+
+    if (trackedDownloadState === 'importPending') {
+      title += ' - Waiting to Import';
+      iconKind = kinds.PURPLE;
+    }
+
+    if (trackedDownloadState === 'importing') {
+      title += ' - Importing';
+      iconKind = kinds.PURPLE;
+    }
+
+    if (trackedDownloadState === 'failedPending') {
+      title += ' - Waiting to Process';
+      iconKind = kinds.DANGER;
+    }
   }
 
-  if (status === 'Delay') {
+  if (hasWarning) {
+    iconKind = kinds.WARNING;
+  }
+
+  if (status === 'delay') {
     iconName = icons.PENDING;
     title = 'Pending';
   }
 
-  if (status === 'DownloadClientUnavailable') {
+  if (status === 'downloadClientUnavailable') {
     iconName = icons.PENDING;
     iconKind = kinds.WARNING;
     title = 'Pending - Download client is unavailable';
   }
 
-  if (status === 'Failed') {
+  if (status === 'failed') {
     iconName = icons.DOWNLOADING;
     iconKind = kinds.DANGER;
     title = 'Download failed';
   }
 
-  if (status === 'Warning') {
+  if (status === 'warning') {
     iconName = icons.DOWNLOADING;
     iconKind = kinds.WARNING;
     title = `Download warning: ${errorMessage || 'check download client for more details'}`;
   }
 
   if (hasError) {
-    if (status === 'Completed') {
+    if (status === 'completed') {
       iconName = icons.DOWNLOAD;
       iconKind = kinds.DANGER;
       title = `Import failed: ${sourceTitle}`;
@@ -125,9 +141,15 @@ function QueueStatusCell(props) {
 QueueStatusCell.propTypes = {
   sourceTitle: PropTypes.string.isRequired,
   status: PropTypes.string.isRequired,
-  trackedDownloadStatus: PropTypes.string,
+  trackedDownloadStatus: PropTypes.string.isRequired,
+  trackedDownloadState: PropTypes.string.isRequired,
   statusMessages: PropTypes.arrayOf(PropTypes.object),
   errorMessage: PropTypes.string
 };
 
+QueueStatusCell.defaultProps = {
+  trackedDownloadStatus: 'Ok',
+  trackedDownloadState: 'Downloading'
+};
+
 export default QueueStatusCell;

frontend/src/Activity/Queue/RemoveQueueItemModal.css

@@ -1,3 +0,0 @@
-.message {
-  margin-bottom: 30px;
-}

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -10,7 +10,6 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
-import styles from './RemoveQueueItemModal.css';
 
 class RemoveQueueItemModal extends Component {
 
@@ -21,26 +20,41 @@ class RemoveQueueItemModal extends Component {
     super(props, context);
 
     this.state = {
+      remove: true,
       blacklist: false
     };
   }
 
+  //
+  // Control
+
+  resetState = function() {
+    this.setState({
+      remove: true,
+      blacklist: false
+    });
+  }
+
   //
   // Listeners
 
+  onRemoveChange = ({ value }) => {
+    this.setState({ remove: value });
+  }
+
   onBlacklistChange = ({ value }) => {
     this.setState({ blacklist: value });
   }
 
-  onRemoveQueueItemConfirmed = () => {
-    const blacklist = this.state.blacklist;
+  onRemoveConfirmed = () => {
+    const state = this.state;
 
-    this.setState({ blacklist: false });
-    this.props.onRemovePress(blacklist);
+    this.resetState();
+    this.props.onRemovePress(state);
   }
 
   onModalClose = () => {
-    this.setState({ blacklist: false });
+    this.resetState();
     this.props.onModalClose();
   }
 
@@ -50,10 +64,11 @@ class RemoveQueueItemModal extends Component {
   render() {
     const {
       isOpen,
-      sourceTitle
+      sourceTitle,
+      canIgnore
     } = this.props;
 
-    const blacklist = this.state.blacklist;
+    const { remove, blacklist } = this.state;
 
     return (
       <Modal
@@ -69,17 +84,31 @@ class RemoveQueueItemModal extends Component {
           </ModalHeader>
 
           <ModalBody>
-            <div className={styles.message}>
+            <div>
               Are you sure you want to remove '{sourceTitle}' from the queue?
             </div>
 
+            <FormGroup>
+              <FormLabel>Remove From Download Client</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="remove"
+                value={remove}
+                helpTextWarning="Removing will remove the download and the file(s) from the download client."
+                isDisabled={!canIgnore}
+                onChange={this.onRemoveChange}
+              />
+            </FormGroup>
+
             <FormGroup>
               <FormLabel>Blacklist Release</FormLabel>
+
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="blacklist"
                 value={blacklist}
-                helpText="Prevents Sonarr from automatically grabbing this episode again"
+                helpText="Starts a search for this episode again and prevents this release from being grabbed again"
                 onChange={this.onBlacklistChange}
               />
             </FormGroup>
@@ -93,7 +122,7 @@ class RemoveQueueItemModal extends Component {
 
             <Button
               kind={kinds.DANGER}
-              onPress={this.onRemoveQueueItemConfirmed}
+              onPress={this.onRemoveConfirmed}
             >
               Remove
             </Button>
@@ -107,6 +136,7 @@ class RemoveQueueItemModal extends Component {
 RemoveQueueItemModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   sourceTitle: PropTypes.string.isRequired,
+  canIgnore: PropTypes.bool.isRequired,
   onRemovePress: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -21,26 +21,41 @@ class RemoveQueueItemsModal extends Component {
     super(props, context);
 
     this.state = {
+      remove: true,
       blacklist: false
     };
   }
 
   //
-  // Listeners
+  // Control
+
+   resetState = function() {
+     this.setState({
+       remove: true,
+       blacklist: false
+     });
+   }
+
+   //
+   // Listeners
+
+   onRemoveChange = ({ value }) => {
+     this.setState({ remove: value });
+   }
 
   onBlacklistChange = ({ value }) => {
     this.setState({ blacklist: value });
   }
 
-  onRemoveQueueItemConfirmed = () => {
-    const blacklist = this.state.blacklist;
+  onRemoveConfirmed = () => {
+    const state = this.state;
 
-    this.setState({ blacklist: false });
-    this.props.onRemovePress(blacklist);
+    this.resetState();
+    this.props.onRemovePress(state);
   }
 
   onModalClose = () => {
-    this.setState({ blacklist: false });
+    this.resetState();
     this.props.onModalClose();
   }
 
@@ -50,10 +65,11 @@ class RemoveQueueItemsModal extends Component {
   render() {
     const {
       isOpen,
-      selectedCount
+      selectedCount,
+      canIgnore
     } = this.props;
 
-    const blacklist = this.state.blacklist;
+    const { remove, blacklist } = this.state;
 
     return (
       <Modal
@@ -74,7 +90,23 @@ class RemoveQueueItemsModal extends Component {
             </div>
 
             <FormGroup>
-              <FormLabel>Blacklist Release</FormLabel>
+              <FormLabel>Remove From Download Client</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="remove"
+                value={remove}
+                helpTextWarning="Removing will remove the download and the file(s) from the download client."
+                isDisabled={!canIgnore}
+                onChange={this.onRemoveChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                Blacklist Release{selectedCount > 1 ? 's' : ''}
+              </FormLabel>
+
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="blacklist"
@@ -93,7 +125,7 @@ class RemoveQueueItemsModal extends Component {
 
             <Button
               kind={kinds.DANGER}
-              onPress={this.onRemoveQueueItemConfirmed}
+              onPress={this.onRemoveConfirmed}
             >
               Remove
             </Button>
@@ -107,6 +139,7 @@ class RemoveQueueItemsModal extends Component {
 RemoveQueueItemsModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   selectedCount: PropTypes.number.isRequired,
+  canIgnore: PropTypes.bool.isRequired,
   onRemovePress: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };

frontend/src/Activity/Queue/TimeleftCell.js

@@ -19,7 +19,7 @@ function TimeleftCell(props) {
     timeFormat
   } = props;
 
-  if (status === 'Delay') {
+  if (status === 'delay') {
     const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
@@ -33,7 +33,7 @@ function TimeleftCell(props) {
     );
   }
 
-  if (status === 'DownloadClientUnavailable') {
+  if (status === 'downloadClientUnavailable') {
     const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
@@ -47,7 +47,7 @@ function TimeleftCell(props) {
     );
   }
 
-  if (!timeleft) {
+  if (!timeleft || status === 'completed' || status === 'failed') {
     return (
       <TableRowCell className={styles.timeleft}>
         -

frontend/src/AddSeries/AddNewSeries/AddNewSeries.css

@@ -35,14 +35,20 @@
 .message {
   margin-top: 30px;
   text-align: center;
+  font-weight: 300;
+  font-size: $largeFontSize;
 }
 
 .helpText {
   margin-bottom: 10px;
-  font-weight: 300;
   font-size: 24px;
 }
 
+.noSeriesText {
+  margin-top: 80px;
+  margin-bottom: 20px;
+}
+
 .noResults {
   margin-bottom: 10px;
   font-weight: 300;

frontend/src/AddSeries/AddNewSeries/AddNewSeries.js

@@ -1,13 +1,14 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { icons } from 'Helpers/Props';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import { icons, kinds } from 'Helpers/Props';
 import Button from 'Components/Link/Button';
 import Link from 'Components/Link/Link';
 import Icon from 'Components/Icon';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import TextInput from 'Components/Form/TextInput';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import AddNewSeriesSearchResultConnector from './AddNewSeriesSearchResultConnector';
 import styles from './AddNewSeries.css';
 
@@ -78,7 +79,8 @@ class AddNewSeries extends Component {
   render() {
     const {
       error,
-      items
+      items,
+      hasExistingSeries
     } = this.props;
 
     const term = this.state.term;
@@ -86,7 +88,7 @@ class AddNewSeries extends Component {
 
     return (
       <PageContent title="Add New Series">
-        <PageContentBodyConnector>
+        <PageContentBody>
           <div className={styles.searchContainer}>
             <div className={styles.searchIconContainer}>
               <Icon
@@ -121,8 +123,13 @@ class AddNewSeries extends Component {
           }
 
           {
-            !isFetching && !!error &&
-              <div>Failed to load search results, please try again.</div>
+            !isFetching && !!error ?
+              <div className={styles.message}>
+                <div className={styles.helpText}>
+                  Failed to load search results, please try again.
+                </div>
+                <div>{getErrorMessage(error)}</div>
+              </div> : null
           }
 
           {
@@ -155,15 +162,36 @@ class AddNewSeries extends Component {
           }
 
           {
-            !term &&
+            term ?
+              null :
               <div className={styles.message}>
-                <div className={styles.helpText}>It's easy to add a new series, just start typing the name the series you want to add.</div>
+                <div className={styles.helpText}>
+                  It's easy to add a new series, just start typing the name the series you want to add.
+                </div>
                 <div>You can also search using TVDB ID of a show. eg. tvdb:71663</div>
               </div>
           }
 
+          {
+            !term && !hasExistingSeries ?
+              <div className={styles.message}>
+                <div className={styles.noSeriesText}>
+                  You haven't added any series yet, do you want to import some or all of your series first?
+                </div>
+                <div>
+                  <Button
+                    to="/add/import"
+                    kind={kinds.PRIMARY}
+                  >
+                    Import Existing Series
+                  </Button>
+                </div>
+              </div> :
+              null
+          }
+
           <div />
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
@@ -176,6 +204,7 @@ AddNewSeries.propTypes = {
   isAdding: PropTypes.bool.isRequired,
   addError: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  hasExistingSeries: PropTypes.bool.isRequired,
   onSeriesLookupChange: PropTypes.func.isRequired,
   onClearSeriesLookup: PropTypes.func.isRequired
 };

frontend/src/AddSeries/AddNewSeries/AddNewSeriesConnector.js

@@ -10,13 +10,15 @@ import AddNewSeries from './AddNewSeries';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.addSeries,
+    (state) => state.series.items.length,
     (state) => state.router.location,
-    (addSeries, location) => {
+    (addSeries, existingSeriesCount, location) => {
       const { params } = parseUrl(location.search);
 
       return {
+        ...addSeries,
         term: params.term,
-        ...addSeries
+        hasExistingSeries: existingSeriesCount > 0
       };
     }
   );

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.js

@@ -14,6 +14,7 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import Popover from 'Components/Tooltip/Popover';
 import SeriesPoster from 'Series/SeriesPoster';
+import * as seriesTypes from 'Utilities/Series/seriesTypes';
 import SeriesMonitoringOptionsPopoverContent from 'AddSeries/SeriesMonitoringOptionsPopoverContent';
 import SeriesTypePopoverContent from 'AddSeries/SeriesTypePopoverContent';
 import styles from './AddNewSeriesModalContent.css';
@@ -27,10 +28,19 @@ class AddNewSeriesModalContent extends Component {
     super(props, context);
 
     this.state = {
+      seriesType: props.initialSeriesType === seriesTypes.STANDARD ?
+        props.seriesType.value :
+        props.initialSeriesType,
       searchForMissingEpisodes: false
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.seriesType.value !== prevProps.seriesType.value) {
+      this.setState({ seriesType: this.props.seriesType.value });
+    }
+  }
+
   //
   // Listeners
 
@@ -47,7 +57,12 @@ class AddNewSeriesModalContent extends Component {
   }
 
   onAddSeriesPress = () => {
-    this.props.onAddSeriesPress(this.state.searchForMissingEpisodes);
+    const {
+      searchForMissingEpisodes,
+      seriesType
+    } = this.state;
+
+    this.props.onAddSeriesPress(searchForMissingEpisodes, seriesType);
   }
 
   //
@@ -66,9 +81,11 @@ class AddNewSeriesModalContent extends Component {
       languageProfileId,
       seriesType,
       seasonFolder,
+      folder,
       tags,
       showLanguageProfile,
       isSmallScreen,
+      isWindows,
       onModalClose,
       onInputChange,
       ...otherProps
@@ -115,6 +132,15 @@ class AddNewSeriesModalContent extends Component {
                   <FormInputGroup
                     type={inputTypes.ROOT_FOLDER_SELECT}
                     name="rootFolderPath"
+                    valueOptions={{
+                      seriesFolder: folder,
+                      isWindows
+                    }}
+                    selectedValueOptions={{
+                      seriesFolder: folder,
+                      isWindows
+                    }}
+                    helpText={`'${folder}' subfolder will be created automatically`}
                     onChange={onInputChange}
                     {...rootFolderPath}
                   />
@@ -189,6 +215,7 @@ class AddNewSeriesModalContent extends Component {
                     name="seriesType"
                     onChange={onInputChange}
                     {...seriesType}
+                    value={this.state.seriesType}
                   />
                 </FormGroup>
 
@@ -251,6 +278,7 @@ AddNewSeriesModalContent.propTypes = {
   title: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,
   overview: PropTypes.string,
+  initialSeriesType: PropTypes.string.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   isAdding: PropTypes.bool.isRequired,
   addError: PropTypes.object,
@@ -260,9 +288,11 @@ AddNewSeriesModalContent.propTypes = {
   languageProfileId: PropTypes.object,
   seriesType: PropTypes.object.isRequired,
   seasonFolder: PropTypes.object.isRequired,
+  folder: PropTypes.string.isRequired,
   tags: PropTypes.object.isRequired,
   showLanguageProfile: PropTypes.bool.isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
+  isWindows: PropTypes.bool.isRequired,
   onModalClose: PropTypes.func.isRequired,
   onInputChange: PropTypes.func.isRequired,
   onAddSeriesPress: PropTypes.func.isRequired

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContentConnector.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { setAddSeriesDefault, addSeries } from 'Store/Actions/addSeriesActions';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
 import selectSettings from 'Store/Selectors/selectSettings';
 import AddNewSeriesModalContent from './AddNewSeriesModalContent';
 
@@ -12,7 +13,8 @@ function createMapStateToProps() {
     (state) => state.addSeries,
     (state) => state.settings.languageProfiles,
     createDimensionsSelector(),
-    (addSeriesState, languageProfiles, dimensions) => {
+    createSystemStatusSelector(),
+    (addSeriesState, languageProfiles, dimensions, systemStatus) => {
       const {
         isAdding,
         addError,
@@ -32,6 +34,7 @@ function createMapStateToProps() {
         isSmallScreen: dimensions.isSmallScreen,
         validationErrors,
         validationWarnings,
+        isWindows: systemStatus.isWindows,
         ...settings
       };
     }
@@ -52,14 +55,13 @@ class AddNewSeriesModalContentConnector extends Component {
     this.props.setAddSeriesDefault({ [name]: value });
   }
 
-  onAddSeriesPress = (searchForMissingEpisodes) => {
+  onAddSeriesPress = (searchForMissingEpisodes, seriesType) => {
     const {
       tvdbId,
       rootFolderPath,
       monitor,
       qualityProfileId,
       languageProfileId,
-      seriesType,
       seasonFolder,
       tags
     } = this.props;
@@ -70,7 +72,7 @@ class AddNewSeriesModalContentConnector extends Component {
       monitor: monitor.value,
       qualityProfileId: qualityProfileId.value,
       languageProfileId: languageProfileId.value,
-      seriesType: seriesType.value,
+      seriesType,
       seasonFolder: seasonFolder.value,
       tags: tags.value,
       searchForMissingEpisodes

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css

@@ -1,10 +1,15 @@
 .searchResult {
-  display: flex;
+  position: relative;
   margin: 20px 0;
   padding: 20px;
   width: 100%;
-  background-color: $white;
   color: inherit;
+}
+
+.underlay {
+  @add-mixin cover;
+
+  background-color: $white;
   transition: background 500ms;
 
   &:hover {
@@ -14,13 +19,25 @@
   }
 }
 
+.overlay {
+  @add-mixin linkOverlay;
+
+  position: relative;
+  display: flex;
+}
+
 .poster {
   flex: 0 0 170px;
   margin-right: 20px;
   height: 250px;
 }
 
+.content {
+  flex: 0 1 100%;
+}
+
 .title {
+  display: flex;
   font-weight: 300;
   font-size: 36px;
 }
@@ -30,9 +47,22 @@
   color: $disabledColor;
 }
 
+.tvdbLink {
+  composes: link from '~Components/Link/Link.css';
+
+  margin-top: -4px;
+  margin-left: auto;
+  color: $textColor;
+}
+
+.tvdbLinkIcon {
+  margin-left: 10px;
+}
+
 .alreadyExistsIcon {
   margin-left: 10px;
   color: #37bc9b;
+  pointer-events: all;
 }
 
 .overview {

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js

@@ -24,7 +24,7 @@ class AddNewSeriesSearchResult extends Component {
 
   componentDidUpdate(prevProps) {
     if (!prevProps.isExistingSeries && this.props.isExistingSeries) {
-      this.onAddSerisModalClose();
+      this.onAddSeriesModalClose();
     }
   }
 
@@ -35,10 +35,14 @@ class AddNewSeriesSearchResult extends Component {
     this.setState({ isNewAddSeriesModalOpen: true });
   }
 
-  onAddSerisModalClose = () => {
+  onAddSeriesModalClose = () => {
     this.setState({ isNewAddSeriesModalOpen: false });
   }
 
+  onTVDBLinkPress = (event) => {
+    event.stopPropagation();
+  }
+
   //
   // Render
 
@@ -53,6 +57,8 @@ class AddNewSeriesSearchResult extends Component {
       overview,
       statistics,
       ratings,
+      folder,
+      seriesType,
       images,
       isExistingSeries,
       isSmallScreen
@@ -72,11 +78,13 @@ class AddNewSeriesSearchResult extends Component {
     }
 
     return (
-      <div>
+      <div className={styles.searchResult}>
         <Link
-          className={styles.searchResult}
+          className={styles.underlay}
           {...linkProps}
-        >
+        />
+
+        <div className={styles.overlay}>
           {
             isSmallScreen ?
               null :
@@ -88,7 +96,7 @@ class AddNewSeriesSearchResult extends Component {
               />
           }
 
-          <div>
+          <div className={styles.content}>
             <div className={styles.title}>
               {title}
 
@@ -110,6 +118,18 @@ class AddNewSeriesSearchResult extends Component {
                   /> :
                   null
               }
+
+              <Link
+                className={styles.tvdbLink}
+                to={`http://www.thetvdb.com/?tab=series&id=${tvdbId}`}
+                onPress={this.onTVDBLinkPress}
+              >
+                <Icon
+                  className={styles.tvdbLinkIcon}
+                  name={icons.EXTERNAL_LINK}
+                  size={28}
+                />
+              </Link>
             </div>
 
             <div>
@@ -146,13 +166,24 @@ class AddNewSeriesSearchResult extends Component {
                   </Label> :
                   null
               }
+
+              {
+                status === 'upcoming' ?
+                  <Label
+                    kind={kinds.INFO}
+                    size={sizes.LARGE}
+                  >
+                  Upcoming
+                  </Label> :
+                  null
+              }
             </div>
 
             <div className={styles.overview}>
               {overview}
             </div>
           </div>
-        </Link>
+        </div>
 
         <AddNewSeriesModal
           isOpen={isNewAddSeriesModalOpen && !isExistingSeries}
@@ -160,8 +191,10 @@ class AddNewSeriesSearchResult extends Component {
           title={title}
           year={year}
           overview={overview}
+          folder={folder}
+          initialSeriesType={seriesType}
           images={images}
-          onModalClose={this.onAddSerisModalClose}
+          onModalClose={this.onAddSeriesModalClose}
         />
       </div>
     );
@@ -178,6 +211,8 @@ AddNewSeriesSearchResult.propTypes = {
   overview: PropTypes.string,
   statistics: PropTypes.object.isRequired,
   ratings: PropTypes.object.isRequired,
+  folder: PropTypes.string.isRequired,
+  seriesType: PropTypes.string.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   isExistingSeries: PropTypes.bool.isRequired,
   isSmallScreen: PropTypes.bool.isRequired

frontend/src/AddSeries/ImportSeries/Import/ImportSeries.js

@@ -5,7 +5,7 @@ import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import ImportSeriesTableConnector from './ImportSeriesTableConnector';
 import ImportSeriesFooterConnector from './ImportSeriesFooterConnector';
 
@@ -21,17 +21,15 @@ class ImportSeries extends Component {
       allSelected: false,
       allUnselected: false,
       lastToggled: null,
-      selectedState: {},
-      contentBody: null,
-      scrollTop: 0
+      selectedState: {}
     };
   }
 
   //
   // Control
 
-  setContentBodyRef = (ref) => {
-    this.setState({ contentBody: ref });
+  setScrollerRef = (ref) => {
+    this.setState({ scroller: ref });
   }
 
   //
@@ -94,13 +92,13 @@ class ImportSeries extends Component {
       allSelected,
       allUnselected,
       selectedState,
-      contentBody
+      scroller
     } = this.state;
 
     return (
       <PageContent title="Import Series">
-        <PageContentBodyConnector
-          ref={this.setContentBodyRef}
+        <PageContentBody
+          registerScroller={this.setScrollerRef}
           onScroll={this.onScroll}
         >
           {
@@ -121,23 +119,21 @@ class ImportSeries extends Component {
           }
 
           {
-            !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length && contentBody &&
+            !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length && scroller &&
               <ImportSeriesTableConnector
                 rootFolderId={rootFolderId}
                 unmappedFolders={unmappedFolders}
                 allSelected={allSelected}
                 allUnselected={allUnselected}
                 selectedState={selectedState}
-                contentBody={contentBody}
+                scroller={scroller}
                 showLanguageProfile={showLanguageProfile}
-                scrollTop={this.state.scrollTop}
                 onSelectAllChange={this.onSelectAllChange}
                 onSelectedChange={this.onSelectedChange}
                 onRemoveSelectedStateItem={this.onRemoveSelectedStateItem}
-                onScroll={this.onScroll}
               />
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
 
         {
           !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length &&

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesRow.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { inputTypes } from 'Helpers/Props';
 import FormInputGroup from 'Components/Form/FormInputGroup';
-import VirtualTableRow from 'Components/Table/VirtualTableRow';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import ImportSeriesSelectSeriesConnector from './SelectSeries/ImportSeriesSelectSeriesConnector';
@@ -10,7 +9,6 @@ import styles from './ImportSeriesRow.css';
 
 function ImportSeriesRow(props) {
   const {
-    style,
     id,
     monitor,
     qualityProfileId,
@@ -26,7 +24,7 @@ function ImportSeriesRow(props) {
   } = props;
 
   return (
-    <VirtualTableRow style={style}>
+    <>
       <VirtualTableSelectCell
         inputClassName={styles.selectInput}
         id={id}
@@ -90,14 +88,14 @@ function ImportSeriesRow(props) {
         <ImportSeriesSelectSeriesConnector
           id={id}
           isExistingSeries={isExistingSeries}
+          onInputChange={onInputChange}
         />
       </VirtualTableRowCell>
-    </VirtualTableRow>
+    </>
   );
 }
 
 ImportSeriesRow.propTypes = {
-  style: PropTypes.object.isRequired,
   id: PropTypes.string.isRequired,
   monitor: PropTypes.string.isRequired,
   qualityProfileId: PropTypes.number.isRequired,

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesTable.js

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import VirtualTable from 'Components/Table/VirtualTable';
+import VirtualTableRow from 'Components/Table/VirtualTableRow';
 import ImportSeriesHeader from './ImportSeriesHeader';
 import ImportSeriesRowConnector from './ImportSeriesRowConnector';
 
@@ -112,15 +113,19 @@ class ImportSeriesTable extends Component {
     const item = items[rowIndex];
 
     return (
-      <ImportSeriesRowConnector
+      <VirtualTableRow
         key={key}
         style={style}
-        rootFolderId={rootFolderId}
-        showLanguageProfile={showLanguageProfile}
-        isSelected={selectedState[item.id]}
-        onSelectedChange={onSelectedChange}
-        id={item.id}
-      />
+      >
+        <ImportSeriesRowConnector
+          key={item.id}
+          rootFolderId={rootFolderId}
+          showLanguageProfile={showLanguageProfile}
+          isSelected={selectedState[item.id]}
+          onSelectedChange={onSelectedChange}
+          id={item.id}
+        />
+      </VirtualTableRow>
     );
   }
 
@@ -133,12 +138,10 @@ class ImportSeriesTable extends Component {
       allSelected,
       allUnselected,
       isSmallScreen,
-      contentBody,
+      scroller,
       showLanguageProfile,
-      scrollTop,
       selectedState,
-      onSelectAllChange,
-      onScroll
+      onSelectAllChange
     } = this.props;
 
     if (!items.length) {
@@ -148,10 +151,9 @@ class ImportSeriesTable extends Component {
     return (
       <VirtualTable
         items={items}
-        contentBody={contentBody}
+        scroller={scroller}
         isSmallScreen={isSmallScreen}
         rowHeight={52}
-        scrollTop={scrollTop}
         overscanRowCount={2}
         rowRenderer={this.rowRenderer}
         header={
@@ -163,7 +165,6 @@ class ImportSeriesTable extends Component {
           />
         }
         selectedState={selectedState}
-        onScroll={onScroll}
       />
     );
   }
@@ -183,15 +184,13 @@ ImportSeriesTable.propTypes = {
   selectedState: PropTypes.object.isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
   allSeries: PropTypes.arrayOf(PropTypes.object),
-  contentBody: PropTypes.object.isRequired,
+  scroller: PropTypes.instanceOf(Element).isRequired,
   showLanguageProfile: PropTypes.bool.isRequired,
-  scrollTop: PropTypes.number.isRequired,
   onSelectAllChange: PropTypes.func.isRequired,
   onSelectedChange: PropTypes.func.isRequired,
   onRemoveSelectedStateItem: PropTypes.func.isRequired,
   onSeriesLookup: PropTypes.func.isRequired,
-  onSetImportSeriesValue: PropTypes.func.isRequired,
-  onScroll: PropTypes.func.isRequired
+  onSetImportSeriesValue: PropTypes.func.isRequired
 };
 
 export default ImportSeriesTable;

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeriesConnector.js

@@ -1,10 +1,10 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { queueLookupSeries, setImportSeriesValue } from 'Store/Actions/importSeriesActions';
 import createImportSeriesItemSelector from 'Store/Selectors/createImportSeriesItemSelector';
+import * as seriesTypes from 'Utilities/Series/seriesTypes';
 import ImportSeriesSelectSeries from './ImportSeriesSelectSeries';
 
 function createMapStateToProps() {
@@ -41,13 +41,23 @@ class ImportSeriesSelectSeriesConnector extends Component {
   onSeriesSelect = (tvdbId) => {
     const {
       id,
-      items
+      items,
+      onInputChange
     } = this.props;
 
+    const selectedSeries = items.find((item) => item.tvdbId === tvdbId);
+
     this.props.setImportSeriesValue({
       id,
-      selectedSeries: _.find(items, { tvdbId })
+      selectedSeries
     });
+
+    if (selectedSeries.seriesType !== seriesTypes.STANDARD) {
+      onInputChange({
+        name: 'seriesType',
+        value: selectedSeries.seriesType
+      });
+    }
   }
 
   //
@@ -69,6 +79,7 @@ ImportSeriesSelectSeriesConnector.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object),
   selectedSeries: PropTypes.object,
   isSelected: PropTypes.bool,
+  onInputChange: PropTypes.func.isRequired,
   queueLookupSeries: PropTypes.func.isRequired,
   setImportSeriesValue: PropTypes.func.isRequired
 };

frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.js

@@ -7,7 +7,7 @@ import FieldSet from 'Components/FieldSet';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import RootFolders from 'RootFolder/RootFolders';
 import styles from './ImportSeriesSelectFolder.css';
 
@@ -53,7 +53,7 @@ class ImportSeriesSelectFolder extends Component {
 
     return (
       <PageContent title="Import Series">
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isFetching && !isPopulated &&
               <LoadingIndicator />
@@ -75,10 +75,10 @@ class ImportSeriesSelectFolder extends Component {
                   Some tips to ensure the import goes smoothly:
                   <ul>
                     <li className={styles.tip}>
-                      Make sure your files include the quality in the name. eg. <span className={styles.code}>episode.s02e15.bluray.mkv</span>
+                      Make sure that your files include the quality in their filenames. eg. <span className={styles.code}>episode.s02e15.bluray.mkv</span>
                     </li>
                     <li className={styles.tip}>
-                      Point Sonarr to the folder containing all of your tv shows not a specific one. eg. <span className={styles.code}>"{isWindows ? 'C:\\tv shows' : '/tv shows'}"</span> and not <span className={styles.code}>"{isWindows ? 'C:\\tv shows\\the simpsons' : '/tv shows/the simpsons'}"</span>
+                      Point Sonarr to the folder containing all of your tv shows, not a specific one. eg. <span className={styles.code}>"{isWindows ? 'C:\\tv shows' : '/tv shows'}"</span> and not <span className={styles.code}>"{isWindows ? 'C:\\tv shows\\the simpsons' : '/tv shows/the simpsons'}"</span>
                     </li>
                   </ul>
                 </div>
@@ -132,7 +132,7 @@ class ImportSeriesSelectFolder extends Component {
                 />
               </div>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }

frontend/src/App/AppRoutes.js

@@ -33,6 +33,7 @@ import BackupsConnector from 'System/Backup/BackupsConnector';
 import UpdatesConnector from 'System/Updates/UpdatesConnector';
 import LogsTableConnector from 'System/Events/LogsTableConnector';
 import Logs from 'System/Logs/Logs';
+import Diagnostic from 'Diagnostic/Diagnostic';
 
 function AppRoutes(props) {
   const {
@@ -229,6 +230,15 @@ function AppRoutes(props) {
         component={Logs}
       />
 
+      {/*
+        Diagnostics
+      */}
+
+      <Route
+        path="/diag"
+        component={Diagnostic}
+      />
+
       {/*
         Not Found
       */}

frontend/src/Calendar/CalendarPage.js

@@ -3,9 +3,10 @@ import React, { Component } from 'react';
 import { align, icons } from 'Helpers/Props';
 import PageContent from 'Components/Page/PageContent';
 import Measure from 'Components/Measure';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import FilterMenu from 'Components/Menu/FilterMenu';
 import NoSeries from 'Series/NoSeries';
@@ -76,8 +77,10 @@ class CalendarPage extends Component {
       filters,
       hasSeries,
       missingEpisodeIds,
+      isRssSyncExecuting,
       isSearchingForMissing,
       useCurrentPage,
+      onRssSyncPress,
       onFilterSelect
     } = this.props;
 
@@ -99,6 +102,15 @@ class CalendarPage extends Component {
               onPress={this.onGetCalendarLinkPress}
             />
 
+            <PageToolbarSeparator />
+
+            <PageToolbarButton
+              label="RSS Sync"
+              iconName={icons.RSS}
+              isSpinning={isRssSyncExecuting}
+              onPress={onRssSyncPress}
+            />
+
             <PageToolbarButton
               label="Search for Missing"
               iconName={icons.SEARCH}
@@ -126,7 +138,7 @@ class CalendarPage extends Component {
           </PageToolbarSection>
         </PageToolbar>
 
-        <PageContentBodyConnector
+        <PageContentBody
           className={styles.calendarPageBody}
           innerClassName={styles.calendarInnerPageBody}
         >
@@ -147,7 +159,7 @@ class CalendarPage extends Component {
             hasSeries &&
               <LegendConnector />
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
 
         <CalendarLinkModal
           isOpen={isCalendarLinkModalOpen}
@@ -168,10 +180,12 @@ CalendarPage.propTypes = {
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   hasSeries: PropTypes.bool.isRequired,
   missingEpisodeIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+  isRssSyncExecuting: PropTypes.bool.isRequired,
   isSearchingForMissing: PropTypes.bool.isRequired,
   useCurrentPage: PropTypes.bool.isRequired,
   onSearchMissingPress: PropTypes.func.isRequired,
   onDaysCountChange: PropTypes.func.isRequired,
+  onRssSyncPress: PropTypes.func.isRequired,
   onFilterSelect: PropTypes.func.isRequired
 };
 

frontend/src/Calendar/CalendarPageConnector.js

@@ -3,11 +3,14 @@ import { createSelector } from 'reselect';
 import moment from 'moment';
 import { isCommandExecuting } from 'Utilities/Command';
 import isBefore from 'Utilities/Date/isBefore';
+import * as commandNames from 'Commands/commandNames';
 import withCurrentPage from 'Components/withCurrentPage';
+import { executeCommand } from 'Store/Actions/commandActions';
 import { searchMissing, setCalendarDaysCount, setCalendarFilter } from 'Store/Actions/calendarActions';
 import createSeriesCountSelector from 'Store/Selectors/createSeriesCountSelector';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import CalendarPage from './CalendarPage';
 
 function createMissingEpisodeIdsSelector() {
@@ -59,6 +62,7 @@ function createMapStateToProps() {
     createSeriesCountSelector(),
     createUISettingsSelector(),
     createMissingEpisodeIdsSelector(),
+    createCommandExecutingSelector(commandNames.RSS_SYNC),
     createIsSearchingSelector(),
     (
       selectedFilterKey,
@@ -66,6 +70,7 @@ function createMapStateToProps() {
       seriesCount,
       uiSettings,
       missingEpisodeIds,
+      isRssSyncExecuting,
       isSearchingForMissing
     ) => {
       return {
@@ -74,6 +79,7 @@ function createMapStateToProps() {
         colorImpairedMode: uiSettings.enableColorImpairedMode,
         hasSeries: !!seriesCount,
         missingEpisodeIds,
+        isRssSyncExecuting,
         isSearchingForMissing
       };
     }
@@ -82,6 +88,12 @@ function createMapStateToProps() {
 
 function createMapDispatchToProps(dispatch, props) {
   return {
+    onRssSyncPress() {
+      dispatch(executeCommand({
+        name: commandNames.RSS_SYNC
+      }));
+    },
+
     onSearchMissingPress(episodeIds) {
       dispatch(searchMissing({ episodeIds }));
     },

frontend/src/Calendar/Day/CalendarDay.css

@@ -2,8 +2,8 @@
   flex: 1 0 14.28%;
   overflow: hidden;
   min-height: 70px;
-  border-bottom: 1px solid $borderColor;
-  border-left: 1px solid $borderColor;
+  border-bottom: 1px solid $calendarBorderColor;
+  border-left: 1px solid $calendarBorderColor;
 }
 
 .isSingleDay {
@@ -12,7 +12,7 @@
 
 .dayOfMonth {
   padding-right: 5px;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid $calendarBorderColor;
   text-align: right;
 }
 

frontend/src/Calendar/Day/CalendarDays.css

@@ -1,6 +1,6 @@
 .days {
   display: flex;
-  border-right: 1px solid $borderColor;
+  border-right: 1px solid $calendarBorderColor;
 }
 
 .day,

frontend/src/Calendar/Events/CalendarEvent.css

@@ -16,10 +16,13 @@
   display: flex;
 }
 
+.episodeInfo {
+  color: $calendarTextDim;
+}
+
 .seriesTitle,
 .episodeTitle {
   @add-mixin truncate;
-
   flex: 1 0 1px;
   margin-right: 10px;
 }
@@ -37,6 +40,10 @@
   margin-left: 3px;
 }
 
+.airTime {
+  color: $calendarTextDim;
+}
+
 /*
  * Status
  */

frontend/src/Calendar/Events/CalendarEvent.js

@@ -200,7 +200,7 @@ class CalendarEvent extends Component {
               </div>
           }
 
-          <div>
+          <div className={styles.airTime}>
             {formatTime(airDateUtc, timeFormat)} - {formatTime(endTime.toISOString(), timeFormat, { includeMinuteZero: true })}
           </div>
         </Link>

frontend/src/Calendar/Events/CalendarEventGroup.css

@@ -14,7 +14,6 @@
 
 .seriesTitle {
   @add-mixin truncate;
-
   flex: 1 0 1px;
   margin-right: 10px;
   color: #3a3f51;
@@ -23,10 +22,12 @@
 
 .airTime {
   flex: 1 0 1px;
+  color: $calendarTextDim;
 }
 
 .episodeInfo {
   margin-left: 10px;
+  color: $calendarTextDim;
 }
 
 .absoluteEpisodeNumber {
@@ -80,3 +81,7 @@
 .premiere {
   composes: premiere from '~Calendar/Events/CalendarEvent.css';
 }
+
+.unaired {
+  composes: unaired from '~Calendar/Events/CalendarEvent.css';
+}

frontend/src/Calendar/Events/CalendarEventQueueDetails.js

@@ -11,10 +11,12 @@ function CalendarEventQueueDetails(props) {
     sizeleft,
     estimatedCompletionTime,
     status,
+    trackedDownloadState,
+    trackedDownloadStatus,
     errorMessage
   } = props;
 
-  const progress = (100 - sizeleft / size * 100);
+  const progress = size ? (100 - sizeleft / size * 100) : 0;
 
   return (
     <QueueDetails
@@ -23,6 +25,8 @@ function CalendarEventQueueDetails(props) {
       sizeleft={sizeleft}
       estimatedCompletionTime={estimatedCompletionTime}
       status={status}
+      trackedDownloadState={trackedDownloadState}
+      trackedDownloadStatus={trackedDownloadStatus}
       errorMessage={errorMessage}
       progressBar={
         <div title={`Episode is downloading - ${progress.toFixed(1)}% ${title}`}>
@@ -44,6 +48,8 @@ CalendarEventQueueDetails.propTypes = {
   sizeleft: PropTypes.number.isRequired,
   estimatedCompletionTime: PropTypes.string,
   status: PropTypes.string.isRequired,
+  trackedDownloadState: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string.isRequired,
   errorMessage: PropTypes.string
 };
 

frontend/src/Commands/commandNames.js

@@ -1,6 +1,6 @@
 export const APPLICATION_UPDATE = 'ApplicationUpdate';
 export const BACKUP = 'Backup';
-export const CHECK_FOR_FINISHED_DOWNLOAD = 'CheckForFinishedDownload';
+export const REFRESH_MONITORED_DOWNLOADS = 'RefreshMonitoredDownloads';
 export const CLEAR_BLACKLIST = 'ClearBlacklist';
 export const CLEAR_LOGS = 'ClearLog';
 export const CUTOFF_UNMET_EPISODE_SEARCH = 'CutoffUnmetEpisodeSearch';

frontend/src/Components/Error/ErrorBoundary.js

@@ -56,7 +56,7 @@ class ErrorBoundary extends Component {
 
 ErrorBoundary.propTypes = {
   children: PropTypes.node.isRequired,
-  errorComponent: PropTypes.func.isRequired
+  errorComponent: PropTypes.elementType.isRequired
 };
 
 export default ErrorBoundary;

frontend/src/Components/FileBrowser/FileBrowserModalContent.js

@@ -144,6 +144,7 @@ class FileBrowserModalContent extends Component {
           <Scroller
             ref={this.setScrollerRef}
             className={styles.scroller}
+            scrollDirection={scrollDirections.BOTH}
           >
             {
               !!error &&
@@ -152,7 +153,10 @@ class FileBrowserModalContent extends Component {
 
             {
               isPopulated && !error &&
-                <Table columns={columns}>
+                <Table
+                  horizontalScroll={false}
+                  columns={columns}
+                >
                   <TableBody>
                     {
                       emptyParent &&

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

@@ -132,6 +132,7 @@ class FilterBuilderModalContent extends Component {
       filterBuilderProps,
       isSaving,
       saveError,
+      onCancelPress,
       onModalClose
     } = this.props;
 
@@ -171,7 +172,7 @@ class FilterBuilderModalContent extends Component {
               filters.map((filter, index) => {
                 return (
                   <FilterBuilderRow
-                    key={index}
+                    key={`${filter.key}-${index}`}
                     index={index}
                     sectionItems={sectionItems}
                     filterBuilderProps={filterBuilderProps}
@@ -190,7 +191,7 @@ class FilterBuilderModalContent extends Component {
         </ModalBody>
 
         <ModalFooter>
-          <Button onPress={onModalClose}>
+          <Button onPress={onCancelPress}>
             Cancel
           </Button>
 
@@ -220,6 +221,7 @@ FilterBuilderModalContent.propTypes = {
   dispatchDeleteCustomFilter: PropTypes.func.isRequired,
   onSaveCustomFilterPress: PropTypes.func.isRequired,
   dispatchSetFilter: PropTypes.func.isRequired,
+  onCancelPress: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 

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

@@ -135,7 +135,7 @@ class FilterBuilderRowValue extends Component {
         tagList={tagList}
         allowNew={!tagList.length}
         kind={kinds.DEFAULT}
-        delimiters={[9, 13]}
+        delimiters={['Tab', 'Enter']}
         maxSuggestionsLength={100}
         minQueryLength={0}
         tagComponent={FilterBuilderRowValueTag}

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

@@ -3,16 +3,21 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import sortByName from 'Utilities/Array/sortByName';
 import { filterBuilderTypes } from 'Helpers/Props';
+import * as filterTypes from 'Helpers/Props/filterTypes';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 function createTagListSelector() {
   return createSelector(
+    (state, { filterType }) => filterType,
     (state, { sectionItems }) => sectionItems,
     (state, { selectedFilterBuilderProp }) => selectedFilterBuilderProp,
-    (sectionItems, selectedFilterBuilderProp) => {
+    (filterType, sectionItems, selectedFilterBuilderProp) => {
       if (
-        selectedFilterBuilderProp.type === filterBuilderTypes.NUMBER ||
-        selectedFilterBuilderProp.type === filterBuilderTypes.STRING
+        (selectedFilterBuilderProp.type === filterBuilderTypes.NUMBER ||
+        selectedFilterBuilderProp.type === filterBuilderTypes.STRING) &&
+        filterType !== filterTypes.EQUAL &&
+        filterType !== filterBuilderTypes.NOT_EQUAL ||
+        !selectedFilterBuilderProp.optionsSelector
       ) {
         return [];
       }

frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css

@@ -1,4 +1,6 @@
 .tag {
+  height: 21px;
+
   &.isLastTag {
     .or {
       display: none;

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

@@ -1,15 +1,16 @@
 import React from 'react';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
-const protocols = [
+const seriesStatusList = [
   { id: 'continuing', name: 'Continuing' },
+  { id: 'upcoming', name: 'Upcoming' },
   { id: 'ended', name: 'Ended' }
 ];
 
 function SeriesStatusFilterBuilderRowValue(props) {
   return (
     <FilterBuilderRowValue
-      tagList={protocols}
+      tagList={seriesStatusList}
       {...props}
     />
   );

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

@@ -29,10 +29,10 @@ function CustomFiltersModalContent(props) {
 
       <ModalBody>
         {
-          customFilters.map((customFilter, index) => {
+          customFilters.map((customFilter) => {
             return (
               <CustomFilter
-                key={index}
+                key={customFilter.id}
                 id={customFilter.id}
                 label={customFilter.label}
                 filters={customFilter.filters}

frontend/src/Components/Filter/FilterModal.js

@@ -34,6 +34,17 @@ class FilterModal extends Component {
     });
   }
 
+  onCancelPress = () => {
+    if (this.state.filterBuilder) {
+      this.setState({
+        filterBuilder: false,
+        id: null
+      });
+    } else {
+      this.onModalClose();
+    }
+  }
+
   onModalClose = () => {
     this.setState({
       filterBuilder: false,
@@ -67,6 +78,7 @@ class FilterModal extends Component {
             <FilterBuilderModalContentConnector
               {...otherProps}
               id={id}
+              onCancelPress={this.onCancelPress}
               onModalClose={this.onModalClose}
             /> :
             <CustomFiltersModalContentConnector

frontend/src/Components/Form/AutoSuggestInput.css

@@ -37,6 +37,7 @@
 .suggestionsList {
   margin: 5px 0;
   padding-left: 0;
+  max-height: 200px;
   list-style-type: none;
 }
 

frontend/src/Components/Form/AutoSuggestInput.js

@@ -176,7 +176,7 @@ class AutoSuggestInput extends Component {
       className: classNames(
         className,
         hasError && styles.hasError,
-        hasWarning && styles.hasWarning,
+        hasWarning && styles.hasWarning
       ),
       name,
       value,
@@ -234,7 +234,7 @@ AutoSuggestInput.propTypes = {
   minHeight: PropTypes.number.isRequired,
   maxHeight: PropTypes.number.isRequired,
   getSuggestionValue: PropTypes.func.isRequired,
-  renderInputComponent: PropTypes.func,
+  renderInputComponent: PropTypes.elementType,
   renderSuggestion: PropTypes.func.isRequired,
   onInputChange: PropTypes.func,
   onInputKeyDown: PropTypes.func,

frontend/src/Components/Form/DeviceInputConnector.js

@@ -2,13 +2,13 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { fetchDevices, clearDevices } from 'Store/Actions/deviceActions';
+import { fetchOptions, clearOptions } from 'Store/Actions/providerOptionActions';
 import DeviceInput from './DeviceInput';
 
 function createMapStateToProps() {
   return createSelector(
     (state, { value }) => value,
-    (state) => state.devices,
+    (state) => state.providerOptions,
     (value, devices) => {
 
       return {
@@ -37,8 +37,8 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  dispatchFetchDevices: fetchDevices,
-  dispatchClearDevices: clearDevices
+  dispatchFetchOptions: fetchOptions,
+  dispatchClearOptions: clearOptions
 };
 
 class DeviceInputConnector extends Component {
@@ -51,7 +51,7 @@ class DeviceInputConnector extends Component {
   }
 
   componentWillUnmount = () => {
-    // this.props.dispatchClearDevices();
+    this.props.dispatchClearOptions();
   }
 
   //
@@ -61,10 +61,14 @@ class DeviceInputConnector extends Component {
     const {
       provider,
       providerData,
-      dispatchFetchDevices
+      dispatchFetchOptions
     } = this.props;
 
-    dispatchFetchDevices({ provider, providerData });
+    dispatchFetchOptions({
+      action: 'getDevices',
+      provider,
+      providerData
+    });
   }
 
   //
@@ -92,8 +96,8 @@ DeviceInputConnector.propTypes = {
   providerData: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
-  dispatchFetchDevices: PropTypes.func.isRequired,
-  dispatchClearDevices: PropTypes.func.isRequired
+  dispatchFetchOptions: PropTypes.func.isRequired,
+  dispatchClearOptions: PropTypes.func.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(DeviceInputConnector);

frontend/src/Components/Form/EnhancedSelectInput.css

@@ -1,19 +1,8 @@
 .enhancedSelect {
   composes: input from '~Components/Form/Input.css';
-  composes: link from '~Components/Link/Link.css';
 
-  position: relative;
   display: flex;
   align-items: center;
-  padding: 6px 16px;
-  width: 100%;
-  height: 35px;
-  border: 1px solid $inputBorderColor;
-  border-radius: 4px;
-  background-color: $white;
-  box-shadow: inset 0 1px 1px $inputBoxShadowColor;
-  color: $black;
-  cursor: default;
 }
 
 .hasError {
@@ -56,6 +45,7 @@
   display: flex;
   justify-content: center;
   max-width: 90%;
+  max-height: 100%;
   width: 350px !important;
   height: auto !important;
 }

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { Manager, Popper, Reference } from 'react-popper';
 import classNames from 'classnames';
 import getUniqueElememtId from 'Utilities/getUniqueElementId';
-import isMobileUtil from 'Utilities/isMobile';
+import { isMobile as isMobileUtil } from 'Utilities/mobile';
 import * as keyCodes from 'Utilities/Constants/keyCodes';
 import { icons, sizes, scrollDirections } from 'Helpers/Props';
 import Icon from 'Components/Icon';
@@ -262,6 +262,7 @@ class EnhancedSelectInput extends Component {
       isDisabled,
       hasError,
       hasWarning,
+      valueOptions,
       selectedValueOptions,
       selectedValueComponent: SelectedValueComponent,
       optionComponent: OptionComponent
@@ -363,6 +364,7 @@ class EnhancedSelectInput extends Component {
                                   key={v.key}
                                   id={v.key}
                                   isSelected={index === selectedIndex}
+                                  {...valueOptions}
                                   {...v}
                                   isMobile={false}
                                   onSelect={this.onSelect}
@@ -404,6 +406,7 @@ class EnhancedSelectInput extends Component {
                           key={v.key}
                           id={v.key}
                           isSelected={index === selectedIndex}
+                          {...valueOptions}
                           {...v}
                           isMobile={true}
                           onSelect={this.onSelect}
@@ -431,9 +434,10 @@ EnhancedSelectInput.propTypes = {
   isDisabled: PropTypes.bool,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
+  valueOptions: PropTypes.object.isRequired,
   selectedValueOptions: PropTypes.object.isRequired,
   selectedValueComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-  optionComponent: PropTypes.func,
+  optionComponent: PropTypes.elementType,
   onChange: PropTypes.func.isRequired
 };
 
@@ -441,6 +445,7 @@ EnhancedSelectInput.defaultProps = {
   className: styles.enhancedSelect,
   disabledClassName: styles.isDisabled,
   isDisabled: false,
+  valueOptions: {},
   selectedValueOptions: {},
   selectedValueComponent: HintedSelectInputSelectedValue,
   optionComponent: HintedSelectInputOption

frontend/src/Components/Form/EnhancedSelectInputOption.js

@@ -63,7 +63,7 @@ class EnhancedSelectInputOption extends Component {
 
 EnhancedSelectInputOption.propTypes = {
   className: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   isSelected: PropTypes.bool.isRequired,
   isDisabled: PropTypes.bool.isRequired,
   isHidden: PropTypes.bool.isRequired,

frontend/src/Components/Form/FormInputGroup.js

@@ -14,6 +14,7 @@ import PasswordInput from './PasswordInput';
 import PathInputConnector from './PathInputConnector';
 import QualityProfileSelectInputConnector from './QualityProfileSelectInputConnector';
 import LanguageProfileSelectInputConnector from './LanguageProfileSelectInputConnector';
+import IndexerSelectInputConnector from './IndexerSelectInputConnector';
 import RootFolderSelectInputConnector from './RootFolderSelectInputConnector';
 import SeriesTypeSelectInput from './SeriesTypeSelectInput';
 import EnhancedSelectInput from './EnhancedSelectInput';
@@ -61,6 +62,9 @@ function getComponent(type) {
     case inputTypes.LANGUAGE_PROFILE_SELECT:
       return LanguageProfileSelectInputConnector;
 
+    case inputTypes.INDEXER_SELECT:
+      return IndexerSelectInputConnector;
+
     case inputTypes.ROOT_FOLDER_SELECT:
       return RootFolderSelectInputConnector;
 

frontend/src/Components/Form/IndexerSelectInputConnector.js

@@ -0,0 +1,96 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import sortByName from 'Utilities/Array/sortByName';
+import { fetchIndexers } from 'Store/Actions/settingsActions';
+import EnhancedSelectInput from './EnhancedSelectInput';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.indexers,
+    (state, { includeAny }) => includeAny,
+    (indexers, includeAny) => {
+      const {
+        isFetching,
+        isPopulated,
+        error,
+        items
+      } = indexers;
+
+      const values = _.map(items.sort(sortByName), (indexer) => {
+        return {
+          key: indexer.id,
+          value: indexer.name
+        };
+      });
+
+      if (includeAny) {
+        values.unshift({
+          key: 0,
+          value: '(Any)'
+        });
+      }
+
+      return {
+        isFetching,
+        isPopulated,
+        error,
+        values
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchFetchIndexers: fetchIndexers
+};
+
+class IndexerSelectInputConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    if (!this.props.isPopulated) {
+      this.props.dispatchFetchIndexers();
+    }
+  }
+
+  //
+  // Listeners
+
+  onChange = ({ name, value }) => {
+    this.props.onChange({ name, value: parseInt(value) });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EnhancedSelectInput
+        {...this.props}
+        onChange={this.onChange}
+      />
+    );
+  }
+}
+
+IndexerSelectInputConnector.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  values: PropTypes.arrayOf(PropTypes.object).isRequired,
+  includeAny: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  dispatchFetchIndexers: PropTypes.func.isRequired
+};
+
+IndexerSelectInputConnector.defaultProps = {
+  includeAny: false
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(IndexerSelectInputConnector);

frontend/src/Components/Form/KeyValueListInput.js

@@ -98,7 +98,9 @@ class KeyValueListInput extends Component {
       className,
       value,
       keyPlaceholder,
-      valuePlaceholder
+      valuePlaceholder,
+      hasError,
+      hasWarning
     } = this.props;
 
     const { isFocused } = this.state;
@@ -106,7 +108,9 @@ class KeyValueListInput extends Component {
     return (
       <div className={classNames(
         className,
-        isFocused && styles.isFocused
+        isFocused && styles.isFocused,
+        hasError && styles.hasError,
+        hasWarning && styles.hasWarning
       )}
       >
         {

frontend/src/Components/Form/KeyValueListInputItem.css

@@ -8,7 +8,16 @@
   }
 }
 
+.inputWrapper {
+  flex: 1 0 0;
+}
+
+.buttonWrapper {
+  flex: 0 0 22px;
+}
+
 .keyInput,
 .valueInput {
+  width: 100%;
   border: none;
 }

frontend/src/Components/Form/KeyValueListInputItem.js

@@ -63,34 +63,41 @@ class KeyValueListInputItem extends Component {
 
     return (
       <div className={styles.itemContainer}>
-        <TextInput
-          className={styles.keyInput}
-          name="key"
-          value={keyValue}
-          placeholder={keyPlaceholder}
-          onChange={this.onKeyChange}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-        />
+        <div className={styles.inputWrapper}>
+          <TextInput
+            className={styles.keyInput}
+            name="key"
+            value={keyValue}
+            placeholder={keyPlaceholder}
+            onChange={this.onKeyChange}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+          />
+        </div>
 
-        <TextInput
-          className={styles.valueInput}
-          name="value"
-          value={value}
-          placeholder={valuePlaceholder}
-          onChange={this.onValueChange}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-        />
+        <div className={styles.inputWrapper}>
+          <TextInput
+            className={styles.valueInput}
+            name="value"
+            value={value}
+            placeholder={valuePlaceholder}
+            onChange={this.onValueChange}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+          />
+        </div>
 
-        {
-          !isNew &&
-            <IconButton
-              name={icons.REMOVE}
-              tabIndex={-1}
-              onPress={this.onRemovePress}
-            />
-        }
+        <div className={styles.buttonWrapper}>
+          {
+            isNew ?
+              null :
+              <IconButton
+                name={icons.REMOVE}
+                tabIndex={-1}
+                onPress={this.onRemovePress}
+              />
+          }
+        </div>
       </div>
     );
   }

frontend/src/Components/Form/LanguageProfileSelectInputConnector.js

@@ -4,15 +4,16 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import sortByName from 'Utilities/Array/sortByName';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import SelectInput from './SelectInput';
 
 function createMapStateToProps() {
   return createSelector(
-    (state) => state.settings.languageProfiles,
+    createSortedSectionSelector('settings.languageProfiles', sortByName),
     (state, { includeNoChange }) => includeNoChange,
     (state, { includeMixed }) => includeMixed,
     (languageProfiles, includeNoChange, includeMixed) => {
-      const values = _.map(languageProfiles.items.sort(sortByName), (languageProfile) => {
+      const values = _.map(languageProfiles.items, (languageProfile) => {
         return {
           key: languageProfile.id,
           value: languageProfile.name

frontend/src/Components/Form/PathInput.js

@@ -18,10 +18,19 @@ class PathInput extends Component {
     this._node = document.getElementById('portal-root');
 
     this.state = {
+      value: props.value,
       isFileBrowserModalOpen: false
     };
   }
 
+  componentDidUpdate(prevProps) {
+    const { value } = this.props;
+
+    if (prevProps.value !== value) {
+      this.setState({ value });
+    }
+  }
+
   //
   // Control
 
@@ -51,11 +60,8 @@ class PathInput extends Component {
   //
   // Listeners
 
-  onInputChange = (event, { newValue }) => {
-    this.props.onChange({
-      name: this.props.name,
-      value: newValue
-    });
+  onInputChange = ({ value }) => {
+    this.setState({ value });
   }
 
   onInputKeyDown = (event) => {
@@ -77,6 +83,11 @@ class PathInput extends Component {
   }
 
   onInputBlur = () => {
+    this.props.onChange({
+      name: this.props.name,
+      value: this.state.value
+    });
+
     this.props.onClearPaths();
   }
 
@@ -108,13 +119,18 @@ class PathInput extends Component {
     const {
       className,
       name,
-      value,
       paths,
       includeFiles,
       hasFileBrowser,
       onChange,
       ...otherProps
     } = this.props;
+
+    const {
+      value,
+      isFileBrowserModalOpen
+    } = this.state;
+
     return (
       <div className={className}>
         <AutoSuggestInput
@@ -130,7 +146,7 @@ class PathInput extends Component {
           onSuggestionSelected={this.onSuggestionSelected}
           onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
           onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-          onChange={onChange}
+          onChange={this.onInputChange}
         />
 
         {
@@ -144,7 +160,7 @@ class PathInput extends Component {
               </FormInputButton>
 
               <FileBrowserModal
-                isOpen={this.state.isFileBrowserModalOpen}
+                isOpen={isFileBrowserModalOpen}
                 name={name}
                 value={value}
                 includeFiles={includeFiles}

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -20,7 +20,7 @@ function getType(type) {
       return inputTypes.NUMBER;
     case 'path':
       return inputTypes.PATH;
-    case 'filepath':
+    case 'filePath':
       return inputTypes.PATH;
     case 'select':
       return inputTypes.SELECT;
@@ -28,7 +28,7 @@ function getType(type) {
       return inputTypes.TEXT_TAG;
     case 'textbox':
       return inputTypes.TEXT;
-    case 'oauth':
+    case 'oAuth':
       return inputTypes.OAUTH;
     default:
       return inputTypes.TEXT;
@@ -60,6 +60,7 @@ function ProviderFieldFormGroup(props) {
     value,
     type,
     advanced,
+    hidden,
     pending,
     errors,
     warnings,
@@ -68,6 +69,13 @@ function ProviderFieldFormGroup(props) {
     ...otherProps
   } = props;
 
+  if (
+    hidden === 'hidden' ||
+    (hidden === 'hiddenIfNotSet' && !value)
+  ) {
+    return null;
+  }
+
   return (
     <FormGroup
       advancedSettings={advancedSettings}
@@ -86,7 +94,7 @@ function ProviderFieldFormGroup(props) {
         errors={errors}
         warnings={warnings}
         pending={pending}
-        includeFiles={type === 'filepath' ? true : undefined}
+        includeFiles={type === 'filePath' ? true : undefined}
         onChange={onChange}
         {...otherProps}
       />
@@ -108,6 +116,7 @@ ProviderFieldFormGroup.propTypes = {
   value: PropTypes.any,
   type: PropTypes.string.isRequired,
   advanced: PropTypes.bool.isRequired,
+  hidden: PropTypes.string,
   pending: PropTypes.bool.isRequired,
   errors: PropTypes.arrayOf(PropTypes.object).isRequired,
   warnings: PropTypes.arrayOf(PropTypes.object).isRequired,

frontend/src/Components/Form/QualityProfileSelectInputConnector.js

@@ -4,15 +4,16 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import sortByName from 'Utilities/Array/sortByName';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import SelectInput from './SelectInput';
 
 function createMapStateToProps() {
   return createSelector(
-    (state) => state.settings.qualityProfiles,
+    createSortedSectionSelector('settings.qualityProfiles', sortByName),
     (state, { includeNoChange }) => includeNoChange,
     (state, { includeMixed }) => includeMixed,
     (qualityProfiles, includeNoChange, includeMixed) => {
-      const values = _.map(qualityProfiles.items.sort(sortByName), (qualityProfile) => {
+      const values = _.map(qualityProfiles.items, (qualityProfile) => {
         return {
           key: qualityProfile.id,
           value: qualityProfile.name

frontend/src/Components/Form/RootFolderSelectInputConnector.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -13,7 +12,7 @@ function createMapStateToProps() {
     (state) => state.rootFolders,
     (state, { includeNoChange }) => includeNoChange,
     (rootFolders, includeNoChange) => {
-      const values = _.map(rootFolders.items, (rootFolder) => {
+      const values = rootFolders.items.map((rootFolder) => {
         return {
           key: rootFolder.path,
           value: rootFolder.path,
@@ -85,7 +84,7 @@ class RootFolderSelectInputConnector extends Component {
       onChange
     } = this.props;
 
-    if (!value || !_.some(values, (v) => v.key === value) || value === ADD_NEW_KEY) {
+    if (!value || !values.some((v) => v.key === value) || value === ADD_NEW_KEY) {
       const defaultValue = values[0];
 
       if (defaultValue.key === ADD_NEW_KEY) {
@@ -96,6 +95,27 @@ class RootFolderSelectInputConnector extends Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    const {
+      name,
+      value,
+      values,
+      onChange
+    } = this.props;
+
+    if (prevProps.values === values) {
+      return;
+    }
+
+    if (!value && values.length && values.some((v) => !!v.key && v.key !== ADD_NEW_KEY)) {
+      const defaultValue = values[0];
+
+      if (defaultValue.key !== ADD_NEW_KEY) {
+        onChange({ name, value: defaultValue.key });
+      }
+    }
+  }
+
   //
   // Listeners
 

frontend/src/Components/Form/RootFolderSelectInputOption.css

@@ -13,6 +13,15 @@
   }
 }
 
+.value {
+  display: flex;
+}
+
+.seriesFolder {
+  flex: 0 0 auto;
+  color: $disabledColor;
+}
+
 .freeSpace {
   margin-left: 15px;
   color: $darkGray;

frontend/src/Components/Form/RootFolderSelectInputOption.js

@@ -7,14 +7,20 @@ import styles from './RootFolderSelectInputOption.css';
 
 function RootFolderSelectInputOption(props) {
   const {
+    id,
     value,
     freeSpace,
+    seriesFolder,
     isMobile,
+    isWindows,
     ...otherProps
   } = props;
 
+  const slashCharacter = isWindows ? '\\' : '/';
+
   return (
     <EnhancedSelectInputOption
+      id={id}
       isMobile={isMobile}
       {...otherProps}
     >
@@ -23,7 +29,18 @@ function RootFolderSelectInputOption(props) {
         isMobile && styles.isMobile
       )}
       >
-        <div>{value}</div>
+        <div className={styles.value}>
+          {value}
+
+          {
+            seriesFolder && id !== 'addNew' ?
+              <div className={styles.seriesFolder}>
+                {slashCharacter}
+                {seriesFolder}
+              </div> :
+              null
+          }
+        </div>
 
         {
           freeSpace != null &&
@@ -37,9 +54,12 @@ function RootFolderSelectInputOption(props) {
 }
 
 RootFolderSelectInputOption.propTypes = {
+  id: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   freeSpace: PropTypes.number,
-  isMobile: PropTypes.bool.isRequired
+  seriesFolder: PropTypes.string,
+  isMobile: PropTypes.bool.isRequired,
+  isWindows: PropTypes.bool
 };
 
 export default RootFolderSelectInputOption;

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css

@@ -7,10 +7,20 @@
   overflow: hidden;
 }
 
+.pathContainer {
+  @add-mixin truncate;
+  display: flex;
+  flex: 1 0 0;
+}
+
 .path {
   @add-mixin truncate;
+  flex: 0 1 auto;
+}
 
-  flex: 1 0 0;
+.seriesFolder {
+  flex: 0 1 auto;
+  color: $disabledColor;
 }
 
 .freeSpace {

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.js

@@ -8,17 +8,32 @@ function RootFolderSelectInputSelectedValue(props) {
   const {
     value,
     freeSpace,
+    seriesFolder,
     includeFreeSpace,
+    isWindows,
     ...otherProps
   } = props;
 
+  const slashCharacter = isWindows ? '\\' : '/';
+
   return (
     <EnhancedSelectInputSelectedValue
       className={styles.selectedValue}
       {...otherProps}
     >
-      <div className={styles.path}>
-        {value}
+      <div className={styles.pathContainer}>
+        <div className={styles.path}>
+          {value}
+        </div>
+
+        {
+          seriesFolder ?
+            <div className={styles.seriesFolder}>
+              {slashCharacter}
+              {seriesFolder}
+            </div> :
+            null
+        }
       </div>
 
       {
@@ -34,6 +49,8 @@ function RootFolderSelectInputSelectedValue(props) {
 RootFolderSelectInputSelectedValue.propTypes = {
   value: PropTypes.string,
   freeSpace: PropTypes.number,
+  seriesFolder: PropTypes.string,
+  isWindows: PropTypes.bool,
   includeFreeSpace: PropTypes.bool.isRequired
 };
 

frontend/src/Components/Form/SeriesTypeSelectInput.js

@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import * as seriesTypes from 'Utilities/Series/seriesTypes';
 import SelectInput from './SelectInput';
 
 const seriesTypeOptions = [
-  { key: 'standard', value: 'Standard' },
-  { key: 'daily', value: 'Daily' },
-  { key: 'anime', value: 'Anime' }
+  { key: seriesTypes.STANDARD, value: 'Standard' },
+  { key: seriesTypes.DAILY, value: 'Daily' },
+  { key: seriesTypes.ANIME, value: 'Anime' }
 ];
 
 function SeriesTypeSelectInput(props) {

frontend/src/Components/Form/TagInput.css

@@ -12,12 +12,20 @@
   }
 }
 
+.hasError {
+  composes: hasError from '~Components/Form/Input.css';
+}
+
+.hasWarning {
+  composes: hasWarning from '~Components/Form/Input.css';
+}
+
 .internalInput {
   flex: 1 1 0%;
   margin-left: 3px;
   min-width: 20%;
   max-width: 100%;
   width: 0%;
-  height: 21px;
+  height: 31px;
   border: none;
 }

frontend/src/Components/Form/TagInput.js

@@ -100,9 +100,9 @@ class TagInput extends Component {
       suggestions
     } = this.state;
 
-    const keyCode = event.keyCode;
+    const key = event.key;
 
-    if (keyCode === 8 && !value.length) {
+    if (key === 'Backspace' && !value.length) {
       const index = tags.length - 1;
 
       if (index >= 0) {
@@ -116,7 +116,7 @@ class TagInput extends Component {
       event.preventDefault();
     }
 
-    if (delimiters.includes(keyCode)) {
+    if (delimiters.includes(key)) {
       const selectedIndex = this._autosuggestRef.highlightedSuggestionIndex;
       const tag = getTag(value, selectedIndex, suggestions, allowNew);
 
@@ -210,6 +210,8 @@ class TagInput extends Component {
     const {
       className,
       inputContainerClassName,
+      hasError,
+      hasWarning,
       ...otherProps
     } = this.props;
 
@@ -227,6 +229,8 @@ class TagInput extends Component {
         inputContainerClassName={classNames(
           inputContainerClassName,
           isFocused && styles.isFocused,
+          hasError && styles.hasError,
+          hasWarning && styles.hasWarning
         )}
         value={value}
         suggestions={suggestions}
@@ -256,11 +260,11 @@ TagInput.propTypes = {
   allowNew: PropTypes.bool.isRequired,
   kind: PropTypes.oneOf(kinds.all).isRequired,
   placeholder: PropTypes.string.isRequired,
-  delimiters: PropTypes.arrayOf(PropTypes.number).isRequired,
+  delimiters: PropTypes.arrayOf(PropTypes.string).isRequired,
   minQueryLength: PropTypes.number.isRequired,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
-  tagComponent: PropTypes.func.isRequired,
+  tagComponent: PropTypes.elementType.isRequired,
   onTagAdd: PropTypes.func.isRequired,
   onTagDelete: PropTypes.func.isRequired
 };
@@ -271,8 +275,7 @@ TagInput.defaultProps = {
   allowNew: true,
   kind: kinds.INFO,
   placeholder: '',
-  // Tab, enter, space and comma
-  delimiters: [9, 13, 32, 188],
+  delimiters: ['Tab', 'Enter', ' ', ','],
   minQueryLength: 1,
   tagComponent: TagInputTag
 };

frontend/src/Components/Form/TagInputInput.css

@@ -4,7 +4,9 @@
   bottom: -1px;
   left: -1px;
   display: flex;
+  align-items: start;
   flex-wrap: wrap;
-  padding: 6px 16px;
+  padding: 1px 16px;
+  min-height: 33px;
   cursor: default;
 }

frontend/src/Components/Form/TagInputInput.js

@@ -67,7 +67,7 @@ TagInputInput.propTypes = {
   inputProps: PropTypes.object.isRequired,
   kind: PropTypes.oneOf(kinds.all).isRequired,
   isFocused: PropTypes.bool.isRequired,
-  tagComponent: PropTypes.func.isRequired,
+  tagComponent: PropTypes.elementType.isRequired,
   onTagDelete: PropTypes.func.isRequired,
   onInputContainerPress: PropTypes.func.isRequired
 };

frontend/src/Components/Form/TagInputTag.css

@@ -0,0 +1,5 @@
+.tag {
+  composes: link from '~Components/Link/Link.css';
+
+  height: 31px;
+}

frontend/src/Components/Form/TagInputTag.js

@@ -4,6 +4,7 @@ import { kinds } from 'Helpers/Props';
 import tagShape from 'Helpers/Props/Shapes/tagShape';
 import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
+import styles from './TagInputTag.css';
 
 class TagInputTag extends Component {
 
@@ -31,9 +32,9 @@ class TagInputTag extends Component {
       tag,
       kind
     } = this.props;
-
     return (
       <Link
+        className={styles.tag}
         tabIndex={-1}
         onPress={this.onDelete}
       >

frontend/src/Components/Icon.css

@@ -25,3 +25,7 @@
 .warning {
   color: $warningColor;
 }
+
+.purple {
+  color: $purple;
+}

frontend/src/Components/Loading/LoadingIndicator.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './LoadingIndicator.css';
 
-function LoadingIndicator({ className, size }) {
+function LoadingIndicator({ className, rippleClassName, size }) {
   const sizeInPx = `${size}px`;
   const width = sizeInPx;
   const height = sizeInPx;
@@ -17,17 +17,17 @@ function LoadingIndicator({ className, size }) {
         style={{ width, height }}
       >
         <div
-          className={styles.ripple}
+          className={rippleClassName}
           style={{ width, height }}
         />
 
         <div
-          className={styles.ripple}
+          className={rippleClassName}
           style={{ width, height }}
         />
 
         <div
-          className={styles.ripple}
+          className={rippleClassName}
           style={{ width, height }}
         />
       </div>
@@ -37,11 +37,13 @@ function LoadingIndicator({ className, size }) {
 
 LoadingIndicator.propTypes = {
   className: PropTypes.string,
+  rippleClassName: PropTypes.string,
   size: PropTypes.number
 };
 
 LoadingIndicator.defaultProps = {
   className: styles.loading,
+  rippleClassName: styles.ripple,
   size: 50
 };