Fixed: Regression causing updater to fail and added measure to restore bad update

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,41 @@
+<!--
+Before opening a new issue, please ensure:
+- You use the forums for support/questions
+- You search for existing bugs/feature requests
+- Remove extraneous template details
+- Do not prefix title with type of issue (Feature Request, Bug, etc.) The appropriate labels will be added during triage.
+-->
+
+## Support / Questions
+
+Please use https://forums.sonarr.tv/ for support. Support requests or questions will be redirected to the forums and the issue will be closed.
+
+<!--
+Remove if not opening a bug report
+-->
+
+## Bug Report
+
+### System Information/Logs
+
+**Sonarr Version:**
+
+**Operating System:**
+
+**.net Framework (Windows) or mono (macOS/Linux) Version:**
+
+**Link to Log Files (debug or trace):**
+
+**Browser (for UI bugs):**
+
+### Additional Information
+
+<!--
+Remove if not opening a feature request
+-->
+
+## Feature Request
+
+### What problem are you looking to solve?
+
+### Other Information

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,37 +1,28 @@
 ---
-name: Bug Report
-about: Support Requests will be closed immediately, if you are not 100% certain this is a bug please go to our Reddit, Discord, Forums, or IRC first. Exceptions do not mean you found a bug!
-title: ''
-labels: ''
-assignees: ''
+name: Bug report
+about: Create a report to help us improve Sonarr
 
 ---
-<!-- Support Requests will be closed immediately, if you are not 100% certain this is a bug please go to our Reddit, Discord, Forums, or IRC first. Exceptions do not mean you found a bug! -->
+
 **Describe the bug**
-<!-- A clear and concise description of what the bug is. -->
-
-**To Reproduce**
-<!-- Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error -->
-
-**Expected behavior**
-<!-- A clear and concise description of what you expected to happen.-->
+A clear and concise description of what the bug is.
 
 **Screenshots**
-<!-- If applicable, add screenshots to help explain your problem.-->
+If applicable, add screenshots to help explain your problem.
 
-**Platform Information (please complete the following information):**
- - OS: <!-- [e.g. Windows 10 2004 / Ubuntu 20.04] -->
- - Docker: <!-- [Yes/No] -->
- - .net Framework (Windows) or mono (macOS/Linux) (System -> Status): <!--[e.g. Mono 5.8, Mono 6.2, .net 4.5] -->
- - Browser and Version (Only needed for UI issues): <!--[e.g. chrome 86.0.4240.198] -->
- - Sonarr Version: <!--[e.g. 2.0.0.5344 , 3.0.4.1077]-->
- - Sonarr Branch: <!--[e.g. master, develop , phantom-develop]-->
+**Logs**
+Link to debug or trace log files.
 
-**Trace Logs**
-Turn on Trace logs under Settings -> General and wait for the bug to occur again.
-**Upload the full log file here (or another site (e.g. pastebin) and link it). Issues will be closed, if they do not include this!**
-<!-- Trace logs are named Sonarr.trace.txt or Sonarr.trace.#.txt and will contain "trace" in them-->
+**System Information**
+
+ - Sonarr Version: [e.g. 2.0.0.1]
+ - Operating System: [e.g. Windows 10]
+ - .net Framework (Windows) or mono (macOS/Linux) Version: [e.g. 4.5 or 5.12]
+
+**UI Bugs:**
+ - OS: [e.g. Windows]
+ - Browser: [e.g. chrome, firefox]
+ - Version: [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -1,14 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Support via Discord
-    url: https://discord.gg/M6BvZn5
-    about: Chat with users and devs on support and setup related topics.
-  - name: Support via Reddit
-    url: https://reddit.com/r/Sonarr
-    about: Discuss and search through support topics.
-  - name: Support via Forums
-    url: https://forums.sonarr.tv/
-    about: Discuss and search through support topics.
-  - name: Support via IRC
-    url: http://webchat.freenode.net/?channels=#sonarr
-    about: Chat with users and devs on support and setup related topics.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +1,14 @@
 ---
 name: Feature request
 about: Suggest an idea for Sonarr
-title: ''
-labels: ''
-assignees: ''
 
 ---
 
-**Is your feature request related to a problem? Please describe.**
-<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
+**Describe the problem**
+A clear and concise description of the problem you're looking to solve.
 
-**Describe the solution you'd like**
-<!-- A clear and concise description of what you want to happen. -->
-
-**Describe alternatives you've considered**
-<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+**Describe any solutions you think might work**
+A clear and concise description of any solutions or features you've considered.
 
 **Additional context**
-<!-- Add any other context or screenshots about the feature request here. -->
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/other-issues.md

@@ -0,0 +1,7 @@
+---
+name: Other issues
+about: How to get support or ask questions
+
+---
+
+Please use https://forums.sonarr.tv/ for support. Support requests or questions will be redirected to the forums and the issue will be closed.

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,7 +6,7 @@ A few sentences describing the overall goals of the pull request's commits.
 
 #### Todos
 - [ ] Tests
-- [ ] Wiki Updates
+- [ ] Documentation
 
 
 #### Issues Fixed or Closed by this PR

.github/SUPPORT.md

@@ -1,7 +1,7 @@
 ## Support
 
-There are a number of frequently asked questions that have been answered in our [FAQ](https://wiki.servarr.com/Sonarr_FAQ)
+There are a number of frequently asked questions that have been answered in our [FAQ](https://github.com/Sonarr/Sonarr/wiki/FAQ)
 
-The [wiki](https://wiki.servarr.com/Sonarr) contains other information and guides
+The [wiki](https://github.com/Sonarr/Sonarr/wiki) contains other information and guides
 
-Please use one of the support channels: [forums](https://forums.sonarr.tv/), [subreddit](https://www.reddit.com/r/sonarr/), [discord ](https://discord.gg/M6BvZn5), or [IRC ](http://webchat.freenode.net/?channels=#sonarr)for support/questions.
+If you have a support question, please use the [support forums](https://forums.sonarr.tv/).

.github/workflows/lock.yml

@@ -1,21 +0,0 @@
-name: 'Lock threads'
-
-on:
-  workflow_dispatch:
-  schedule:
-    - cron: '0 0 * * *'
-
-jobs:
-  lock:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: dessant/lock-threads@v2
-        with:
-          github-token: ${{ github.token }}
-          issue-lock-inactive-days: '90'
-          issue-exclude-created-before: ''
-          issue-exclude-labels: 'one-day-maybe'
-          issue-lock-labels: ''
-          issue-lock-comment: ''
-          issue-lock-reason: 'resolved'
-          process-only: ''

.gitignore

@@ -141,4 +141,3 @@ output/*
 _start
 
 src/.idea/
-/distribution/windows/setup/output/*

CONTRIBUTING.md

@@ -3,40 +3,25 @@
 We're always looking for people to help make Sonarr even better, there are a number of ways to contribute.
 
 ## Documentation ##
-Setup guides, [FAQ](https://wiki.servarr.com/Sonarr_FAQ), the more information we have on the [wiki](https://wiki.servarr.com/Sonarr) the better.
+Setup guides, FAQ, the more information we have on the wiki the better.
 
 ## Development ##
 
-### Tools required ###
-- Visual Studio 2019 or higher (https://www.visualstudio.com/vs/).  The community version is free and works (https://www.visualstudio.com/downloads/).
-- HTML/Javascript editor of choice (VS Code/Sublime Text/Webstorm/Atom/etc)
-- [Git](https://git-scm.com/downloads)
-- [NodeJS](https://nodejs.org/en/download/) (Node 10.X.X or higher)
-- [Yarn](https://yarnpkg.com/)
-
-### Getting started ###
-
-1. Fork Sonarr
-2. Clone the repository into your development machine. [*info*](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github)
-3. Install the required Node Packages `yarn install`
-4. Start gulp to monitor your dev environment for any changes that need post processing using `yarn start` command.
-5. Build the project in Visual Studio, Setting startup project to `Sonarr.Console` and framework to `x86`
-6. Debug the project in Visual Studio
-7. Open http://localhost:8989
+See the readme for information on setting up your development environment.
 
 ### Contributing Code ###
 - If you're adding a new, already requested feature, please comment on [Github Issues](https://github.com/Sonarr/Sonarr/issues "Github Issues") so work is not duplicated (If you want to add something not already on there, please talk to us first)
-- Rebase from Sonarr's develop (currently phantom-develop) branch, don't merge
+- Rebase from Sonarr's develop branch, don't merge
 - Make meaningful commits, or squash them
 - Feel free to make a pull request before work is complete, this will let us see where its at and make comments/suggest improvements
-- Reach out to us on our [forums](https://forums.sonarr.tv/), [subreddit](https://www.reddit.com/r/sonarr/), [discord](https://discord.gg/Ex7FmFK), or [IRC](http://webchat.freenode.net/?channels=#sonarr) if you have any questions
+- Reach out to us on the forums or on IRC if you have any questions
 - Add tests (unit/integration)
 - Commit with *nix line endings for consistency (We checkout Windows and commit *nix)
 - One feature/bug fix per pull request to keep things clean and easy to understand
-- Use 4 spaces instead of tabs, this should be the default for VS 2019 and WebStorm
+- Use 4 spaces instead of tabs, this is the default for VS 2012 and WebStorm (to my knowledge)
 
 ### Pull Requesting ###
-- Only make pull requests to develop (currently phantom-develop), never master, if you make a PR to master we'll comment on it and close it
+- Only make pull requests to develop, never master, if you make a PR to master we'll comment on it and close it
 - You're probably going to get some comments or questions from us, they will be to ensure consistency and maintainability
 - We'll try to respond to pull requests as soon as possible, if its been a day or two, please reach out to us, we may have missed it
 - Each PR should come from its own [feature branch](http://martinfowler.com/bliki/FeatureBranch.html) not develop in your fork, it should have a meaningful branch name (what is being added/fixed)

README.md

@@ -4,23 +4,17 @@ Sonarr is a PVR for Usenet and BitTorrent users. It can monitor multiple RSS fee
 
 ## Getting Started
 
-- [Download/Installation](https://sonarr.tv/#downloads-v3)
-- [FAQ](https://wiki.servarr.com/Sonarr_FAQ)
-- [Wiki](https://wiki.servarr.com/Sonarr)
-- [(WIP) API Documentation](https://github.com/Sonarr/Sonarr/wiki/API)
-- [Donate](https://sonarr.tv/donate)
+- [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
-Note: GitHub Issues are for Bugs and Feature Requests Only
 
-- [Forums](https://forums.sonarr.tv/)
+- [Donate](https://sonarr.tv/donate)
 - [Discord](https://discord.gg/M6BvZn5)
-- [GitHub - Bugs and Feature Requests Only](https://github.com/Sonarr/Sonarr/issues)
-- [IRC ](http://webchat.freenode.net/?channels=#sonarr)
 - [Reddit](https://www.reddit.com/r/sonarr)
-- [Wiki](https://wiki.servarr.com/Sonarr)
-
-
 
 ## Features
 
@@ -38,16 +32,43 @@ Note: GitHub Issues are for Bugs and Feature Requests Only
 - Full support for specials and multi-episode releases
 - And a beautiful UI
 
-## Contributing
+## Configuring Development Environment:
 
-### Development
-This project exists thanks to all the people who contribute. [Contribute](CONTRIBUTING.md).
-<a href="https://github.com/Sonarr/Sonarr/graphs/contributors"><img src="https://opencollective.com/Sonarr/contributors.svg?width=890&button=false" /></a>
+### 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)
+
+### Setup
+
+- 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 `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)
+
+### Licenses
+
+- [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)	
+- Copyright 2010-2020
 
 ### Supporters
 
-This project would not be possible without the support of our users and software providers. 
-[**Become a sponsor or backer**](https://opencollective.com/sonarr) to help us out!
+This project would not be possible without the support of our users and software providers. [**Become a sponsor or backer**](https://opencollective.com/sonarr) to help us out!
 
 #### Sponsors
 
@@ -69,7 +90,3 @@ Thank you to [<img src="/Logo/Jetbrains/jetbrains.svg" alt="JetBrains" width="32
 * [<img src="/Logo/Jetbrains/resharper.svg" alt="ReSharper" width="32"> ReSharper](http://www.jetbrains.com/resharper/)
 * [<img src="/Logo/Jetbrains/dottrace.svg" alt="dotTrace" width="32"> dotTrace](http://www.jetbrains.com/dottrace/)
 
-### Licenses
-
-- [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)	
-- Copyright 2010-2021

build.sh

@@ -141,7 +141,7 @@ Build()
     ProgressEnd 'Build'
 }
 
-RunWebpack()
+RunGulp()
 {
     ProgressStart 'yarn install'
     yarn install
@@ -149,9 +149,9 @@ RunWebpack()
 
     LintUI
 
-    ProgressStart 'Running webpack'
-    CheckExitCode yarn run build --env production
-    ProgressEnd 'Running webpack'
+    ProgressStart 'Running gulp'
+    CheckExitCode yarn run build --production
+    ProgressEnd 'Running gulp'
 }
 
 CreateMdbs()
@@ -447,7 +447,7 @@ esac
 UpdateVersionNumber
 Build
 CreateReleaseInfo
-RunWebpack
+RunGulp
 PackageMono
 PackageMacOS
 PackageMacOSApp

distribution/debian.sh

@@ -1,5 +1,4 @@
 fromdos ./debian/*
-chmod ugo-x ./debian/*
 cp -r ./debian ./debian_backup
 
 BuildVersion=${dependent_build_number:-3.10.0.999}

distribution/debian/compat

@@ -1 +1 @@
-10
+8

distribution/debian/config

@@ -8,10 +8,7 @@ db_input high sonarr/owning_group || true
 db_endblock
 db_go
 
-db_beginblock
-db_input low sonarr/owning_umask || true
 db_input low sonarr/config_directory || true
-db_endblock
 db_go
 
 exit 0

distribution/debian/postinst

@@ -9,8 +9,6 @@ db_get sonarr/owning_user
 USER="$RET"
 db_get sonarr/owning_group
 GROUP="$RET"
-db_get sonarr/owning_umask
-UMASK="$RET"
 db_get sonarr/config_directory
 CONFDIR="$RET"
 
@@ -66,11 +64,9 @@ fi
 # Create data directory
 if [ ! -d "$CONFDIR" ]; then
   mkdir -p "$CONFDIR"
+  chown -R $USER:$GROUP "$CONFDIR"
 fi
 
-# Set permissions on data directory (always do this instead only on creation in case user was changed via dpkg-reconfigure)
-chown -R $USER:$GROUP "$CONFDIR"
-
 #BEGIN BUILTIN UPDATER
 # Apply patch if present
 if [ "$UPDATER" = "BuiltIn" ] && [ -f /usr/lib/sonarr/bin_patch/release_info ]; then
@@ -96,7 +92,7 @@ fi
 chown -R $USER:$GROUP /usr/lib/sonarr
 
 # Update sonarr.service file
-sed -i "s:User=\w*:User=$USER:g; s:Group=\w*:Group=$GROUP:g; s:UMask=[0-9]*:UMask=$UMASK:g; s:-data=.*$:-data=$CONFDIR:g" /lib/systemd/system/sonarr.service
+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 [ "$UPDATER" = "BuiltIn" ]; then

distribution/debian/preinst

@@ -9,7 +9,7 @@ UPDATER={updater}
 # Existing nzbdrone packages do not have startup scripts and the process might still be running.
 # If the user manually installed nzbdrone then the process might still be running too.
 if [ $1 = "install" ]; then
-  psNzbDrone=`ps ax -o'user:20,pid,ppid,unit,args' | grep mono.*NzbDrone\\\\.exe || true`
+  psNzbDrone=`ps ax -o'user,pid,ppid,unit,args' | grep mono.*NzbDrone\\\\.exe || true`
   if [ ! -z "$psNzbDrone" ]; then
     # Get the user and optional systemd unit
     psNzbDroneUser=`echo "$psNzbDrone" | tr -s ' ' | cut -d ' ' -f 1`

distribution/debian/sonarr.clideps-override

@@ -1,3 +1,2 @@
 ignores msbuild
 ignores libmediainfo0v5
-ignores libc6

distribution/debian/sonarr.service

@@ -1,6 +1,3 @@
-# This file is owned by the sonarr package, DO NOT MODIFY MANUALLY
-# Instead use 'dpkg-reconfigure -plow sonarr' to modify User/Group/UMask/-data
-# Or use systemd built-in override functionality using 'systemctl edit sonarr'
 [Unit]
 Description=Sonarr Daemon
 After=network.target

distribution/debian/templates

@@ -14,12 +14,6 @@ Description: Sonarr group:
   Any media files created by Sonarr will be writeable by this group.
   It's advisable to keep the group the same between download client, Sonarr and media centers.
 
-Template: sonarr/owning_umask
-Type: string
-Default: 0002
-Description: Sonarr umask:
-  Specifies the umask of the files created by Sonarr. 0002 means the files will be created with 664 as permissions.
-
 Template: sonarr/config_directory
 Type: string
 Default: /var/lib/sonarr

distribution/docker-build/Dockerfile

@@ -1,25 +1,16 @@
-FROM ubuntu:focal AS builder
+FROM ubuntu:xenial AS builder
 
 ENV DEBIAN_FRONTEND noninteractive 
 ENV MONO_VERSION 5.18
 
-RUN apt-get update && \
-    apt-get -y -o Dpkg::Options::="--force-confold" install --no-install-recommends \
-        apt-transport-https \
-        wget dirmngr gpg gpg-agent \
-        # add-apt-repository for PPAs
-        software-properties-common && \
-    rm -rf /var/lib/apt/lists/*
-	
 RUN apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF && \
-    echo "deb http://download.mono-project.com/repo/debian stable-focal main" > /etc/apt/sources.list.d/mono-official-stable.list && \
+    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 libcurl4 mediainfo
-RUN apt-get upgrade -y
+        sqlite3 libcurl3 mediainfo
 
 RUN apt-cache policy mono-complete
 RUN apt-cache policy cli-common-dev

distribution/windows/setup/sonarr.iss

@@ -37,7 +37,6 @@ Compression=lzma2/normal
 AppContact={#ForumsURL}
 VersionInfoVersion={#BuildNumber}
 SetupLogging=yes
-OutputDir=output
 
 [Languages]
 Name: "english"; MessagesFile: "compiler:Default.isl"
@@ -60,12 +59,11 @@ Name: "{userstartup}\{#AppName}"; Filename: "{app}\Sonarr.exe"; WorkingDir: "{ap
 
 [InstallDelete]
 Name: "{commonappdata}\NzbDrone\bin"; Type: filesandordirs
-Name: "{app}"; Type: filesandordirs
 
 [Run]
-Filename: "{app}\Sonarr.Console.exe"; StatusMsg: "Removing previous Windows Service"; Parameters: "/u /exitimmediately"; Flags: runhidden waituntilterminated;
-Filename: "{app}\Sonarr.Console.exe"; Description: "Enable Access from Other Devices"; StatusMsg: "Enabling Remote access"; Parameters: "/registerurl /exitimmediately"; Flags: postinstall runascurrentuser runhidden waituntilterminated; Tasks: startupShortcut none;
-Filename: "{app}\Sonarr.Console.exe"; StatusMsg: "Installing Windows Service"; Parameters: "/i /exitimmediately"; Flags: runhidden waituntilterminated; Tasks: windowsService
+Filename: "{app}\Sonarr.Console.exe"; StatusMsg: "Removing previous Windows Service"; Parameters: "/u"; Flags: runhidden waituntilterminated;
+Filename: "{app}\Sonarr.Console.exe"; Description: "Enable Access from Other Devices"; StatusMsg: "Enabling Remote access"; Parameters: "/registerurl"; Flags: postinstall runascurrentuser runhidden waituntilterminated; Tasks: startupShortcut none;
+Filename: "{app}\Sonarr.Console.exe"; StatusMsg: "Installing Windows Service"; Parameters: "/i"; Flags: runhidden waituntilterminated; Tasks: windowsService
 Filename: "{app}\Sonarr.exe"; Description: "Open Sonarr Web UI"; Flags: postinstall skipifsilent nowait; Tasks: windowsService;
 Filename: "{app}\Sonarr.exe"; Description: "Start Sonarr"; Flags: postinstall skipifsilent nowait; Tasks: startupShortcut none;
 

docker/tests/mono/complete/Dockerfile

@@ -17,9 +17,6 @@ RUN  fromdos /startup.sh
 
 WORKDIR /data/
 VOLUME ["/data/_tests_linux", "/data/_output_linux", "/data/_tests_results"]
- 
-RUN groupadd sonarrtst -g 4020 && useradd sonarrtst -u 4021 -g 4020 -m -s /bin/bash
-USER sonarrtst
 
 CMD bash /startup.sh
 

docker/tests/mono/sonarr/Dockerfile

@@ -25,8 +25,5 @@ RUN  fromdos /startup.sh
 WORKDIR /data/
 VOLUME ["/data/_tests_linux", "/data/_output_linux", "/data/_tests_results"]
 
-RUN groupadd sonarrtst -g 4020 && useradd sonarrtst -u 4021 -g 4020 -m -s /bin/bash
-USER sonarrtst
-
 CMD bash /startup.sh
 

frontend/.stylelintrc

@@ -75,7 +75,7 @@
     "function-parentheses-newline-inside": "never-multi-line",
     "function-parentheses-space-inside": "never",
     "function-url-quotes": "always",
-    "function-url-scheme-disallowed-list": [
+    "function-url-scheme-blacklist": [
       "data"
     ],
     "function-whitespace-after": "always",

frontend/build/webpack.config.js

@@ -1,262 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const FileManagerPlugin = require('filemanager-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const LiveReloadPlugin = require('webpack-livereload-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-
-module.exports = (env) => {
-  const uiFolder = 'UI';
-  const frontendFolder = path.join(__dirname, '..');
-  const srcFolder = path.join(frontendFolder, 'src');
-  const isProduction = !!env.production;
-  const isProfiling = isProduction && !!env.profile;
-  const inlineWebWorkers = 'no-fallback';
-
-  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 config = {
-    mode: isProduction ? 'production' : 'development',
-    devtool: isProduction ? 'source-map' : 'eval-source-map',
-
-    stats: {
-      children: false
-    },
-
-    watchOptions: {
-      ignored: /node_modules/
-    },
-
-    entry: {
-      index: 'index.js'
-    },
-
-    resolve: {
-      modules: [
-        srcFolder,
-        path.join(srcFolder, 'Shims'),
-        'node_modules'
-      ],
-      alias: {
-        jquery: 'jquery/src/jquery'
-      }
-    },
-
-    output: {
-      path: distFolder,
-      publicPath: '/',
-      filename: '[name].js',
-      sourceMapFilename: '[file].map'
-    },
-
-    optimization: {
-      moduleIds: 'deterministic',
-      chunkIds: 'named',
-      splitChunks: {
-        chunks: 'initial',
-        name: 'vendors'
-      }
-    },
-
-    performance: {
-      hints: false
-    },
-
-    plugins: [
-      new webpack.DefinePlugin({
-        __DEV__: !isProduction,
-        'process.env.NODE_ENV': isProduction ? JSON.stringify('production') : JSON.stringify('development')
-      }),
-
-      new MiniCssExtractPlugin({
-        filename: 'Content/styles.css'
-      }),
-
-      new HtmlWebpackPlugin({
-        template: 'frontend/src/index.ejs',
-        filename: 'index.html',
-        publicPath: '/'
-      }),
-
-      new FileManagerPlugin({
-        events: {
-          onEnd: {
-            copy: [
-              // HTML
-              {
-                source: 'frontend/src/*.html',
-                destination: distFolder
-              },
-
-              // Fonts
-              {
-                source: 'frontend/src/Content/Fonts/*.*',
-                destination: path.join(distFolder, 'Content/Fonts')
-              },
-
-              // Icon Images
-              {
-                source: 'frontend/src/Content/Images/Icons/*.*',
-                destination: path.join(distFolder, 'Content/Images/Icons')
-              },
-
-              // Images
-              {
-                source: 'frontend/src/Content/Images/*.*',
-                destination: path.join(distFolder, 'Content/Images')
-              },
-
-              // Robots
-              {
-                source: 'frontend/src/Content/robots.txt',
-                destination: path.join(distFolder, 'Content/robots.txt')
-              }
-            ]
-          }
-        }
-      }),
-
-      new LiveReloadPlugin()
-    ],
-
-    resolveLoader: {
-      modules: [
-        'node_modules',
-        'frontend/build/webpack/'
-      ]
-    },
-
-    module: {
-      rules: [
-        {
-          test: /\.worker\.js$/,
-          use: {
-            loader: 'worker-loader',
-            options: {
-              filename: '[name].js',
-              inline: inlineWebWorkers
-            }
-          }
-        },
-        {
-          test: /\.js?$/,
-          exclude: /(node_modules|JsLibraries)/,
-          use: [
-            {
-              loader: 'babel-loader',
-              options: {
-                configFile: `${frontendFolder}/babel.config.js`,
-                envName: isProduction ? 'production' : 'development',
-                presets: [
-                  [
-                    '@babel/preset-env',
-                    {
-                      modules: false,
-                      loose: true,
-                      debug: false,
-                      useBuiltIns: 'entry',
-                      corejs: 3
-                    }
-                  ]
-                ]
-              }
-            }
-          ]
-        },
-
-        // CSS Modules
-        {
-          test: /\.css$/,
-          exclude: /(node_modules|globals.css)/,
-          use: [
-            { loader: MiniCssExtractPlugin.loader },
-            {
-              loader: 'css-loader',
-              options: {
-                importLoaders: 1,
-                modules: {
-                  localIdentName: '[name]/[local]/[hash:base64:5]'
-                }
-              }
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                postcssOptions: {
-                  config: 'frontend/postcss.config.js'
-                }
-              }
-            }
-          ]
-        },
-
-        // Global styles
-        {
-          test: /\.css$/,
-          include: /(node_modules|globals.css)/,
-          use: [
-            'style-loader',
-            {
-              loader: 'css-loader'
-            }
-          ]
-        },
-
-        // Fonts
-        {
-          test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-          use: [
-            {
-              loader: 'url-loader',
-              options: {
-                limit: 10240,
-                mimetype: 'application/font-woff',
-                emitFile: false,
-                name: 'Content/Fonts/[name].[ext]'
-              }
-            }
-          ]
-        },
-
-        {
-          test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-          use: [
-            {
-              loader: 'file-loader',
-              options: {
-                emitFile: false,
-                name: 'Content/Fonts/[name].[ext]'
-              }
-            }
-          ]
-        }
-      ]
-    }
-  };
-
-  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
-        }
-      })
-    ];
-  }
-
-  return config;
-};

frontend/gulp/build.js

@@ -0,0 +1,17 @@
+const gulp = require('gulp');
+
+require('./clean');
+require('./copy');
+require('./webpack');
+
+gulp.task('build',
+  gulp.series('clean',
+    gulp.parallel(
+      'webpack',
+      'copyHtml',
+      'copyFonts',
+      'copyImages'
+    )
+  )
+);
+

frontend/gulp/clean.js

@@ -0,0 +1,8 @@
+const gulp = require('gulp');
+const del = require('del');
+
+const paths = require('./helpers/paths');
+
+gulp.task('clean', () => {
+  return del([paths.dest.root]);
+});

frontend/gulp/copy.js

@@ -0,0 +1,34 @@
+const path = require('path');
+const gulp = require('gulp');
+const print = require('gulp-print').default;
+const cache = require('gulp-cached');
+const livereload = require('gulp-livereload');
+const paths = require('./helpers/paths.js');
+
+gulp.task('copyHtml', () => {
+  return gulp.src(paths.src.html, { base: paths.src.root })
+    .pipe(cache('copyHtml'))
+    .pipe(print())
+    .pipe(gulp.dest(paths.dest.root))
+    .pipe(livereload());
+});
+
+gulp.task('copyFonts', () => {
+  return gulp.src(
+    path.join(paths.src.fonts, '**', '*.*'), { base: paths.src.root }
+  )
+    .pipe(cache('copyFonts'))
+    .pipe(print())
+    .pipe(gulp.dest(paths.dest.root))
+    .pipe(livereload());
+});
+
+gulp.task('copyImages', () => {
+  return gulp.src(
+    path.join(paths.src.images, '**', '*.*'), { base: paths.src.root }
+  )
+    .pipe(cache('copyImages'))
+    .pipe(print())
+    .pipe(gulp.dest(paths.dest.root))
+    .pipe(livereload());
+});

frontend/gulp/gulpFile.js

@@ -0,0 +1,5 @@
+require('./build.js');
+require('./clean.js');
+require('./copy.js');
+require('./watch.js');
+require('./webpack.js');

frontend/gulp/helpers/errorHandler.js

@@ -0,0 +1,6 @@
+const colors = require('ansi-colors');
+
+module.exports = function errorHandler(error) {
+  console.log(colors.red(`Error (${error.plugin}): ${error.message}`));
+  this.emit('end');
+};

frontend/gulp/helpers/paths.js

@@ -0,0 +1,23 @@
+const root = './frontend/src';
+
+const paths = {
+  src: {
+    root,
+    html: `${root}/*.html`,
+    scripts: `${root}/**/*.js`,
+    content: `${root}/Content/`,
+    fonts: `${root}/Content/Fonts/`,
+    images: `${root}/Content/Images/`,
+    exclude: {
+      libs: `!${root}/JsLibraries/**`
+    }
+  },
+  dest: {
+    root: './_output/UI/',
+    content: './_output/UI/Content/',
+    fonts: './_output/UI/Content/Fonts/',
+    images: './_output/UI/Content/Images/'
+  }
+};
+
+module.exports = paths;

frontend/gulp/watch.js

@@ -0,0 +1,18 @@
+const gulp = require('gulp');
+const livereload = require('gulp-livereload');
+const gulpWatch = require('gulp-watch');
+const paths = require('./helpers/paths.js');
+
+require('./copy.js');
+require('./webpack.js');
+
+function watch() {
+  livereload.listen({ start: true });
+
+  gulp.task('webpackWatch')();
+  gulpWatch(paths.src.html, gulp.series('copyHtml'));
+  gulpWatch(`${paths.src.fonts}**/*.*`, gulp.series('copyFonts'));
+  gulpWatch(`${paths.src.images}**/*.*`, gulp.series('copyImages'));
+}
+
+gulp.task('watch', gulp.series('build', watch));

frontend/gulp/webpack.js

@@ -0,0 +1,268 @@
+const gulp = require('gulp');
+const webpackStream = require('webpack-stream');
+const livereload = require('gulp-livereload');
+const path = require('path');
+const webpack = require('webpack');
+const errorHandler = require('./helpers/errorHandler');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackPluginHtmlTags = require('html-webpack-plugin/lib/html-tags');
+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 = 'no-fallback';
+
+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',
+  '../src/Styles/Variables/dimensions',
+  '../src/Styles/Variables/fonts',
+  '../src/Styles/Variables/animations',
+  '../src/Styles/Variables/zIndexes'
+].map(require.resolve);
+
+// Override the way HtmlWebpackPlugin injects the scripts
+// TODO: Find a better way to get these paths without
+HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, assets, assetTags) {
+  const head = assetTags.headTags.map((v) => {
+    const href = v.attributes.href
+      .replace('\\', '/')
+      .replace('%5C', '/');
+
+    v.attributes = { rel: 'stylesheet', type: 'text/css', href: `/${href}` };
+    return HtmlWebpackPluginHtmlTags.htmlTagObjectToString(v, this.options.xhtml);
+  });
+  const body = assetTags.bodyTags.map((v) => {
+    v.attributes = { src: `/${v.attributes.src}` };
+    return HtmlWebpackPluginHtmlTags.htmlTagObjectToString(v, this.options.xhtml);
+  });
+
+  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,
+    'process.env.NODE_ENV': isProduction ? JSON.stringify('production') : JSON.stringify('development')
+  }),
+
+  new MiniCssExtractPlugin({
+    filename: path.join('Content', 'styles.css')
+  }),
+
+  new HtmlWebpackPlugin({
+    template: 'frontend/src/index.html',
+    filename: 'index.html'
+  })
+];
+
+const config = {
+  mode: isProduction ? 'production' : 'development',
+  devtool: '#source-map',
+
+  stats: {
+    children: false
+  },
+
+  watchOptions: {
+    ignored: /node_modules/
+  },
+
+  entry: {
+    index: 'index.js'
+  },
+
+  resolve: {
+    modules: [
+      srcFolder,
+      path.join(srcFolder, 'Shims'),
+      'node_modules'
+    ],
+    alias: {
+      jquery: 'jquery/src/jquery'
+    }
+  },
+
+  output: {
+    path: distFolder,
+    filename: '[name].js',
+    sourceMapFilename: '[file].map'
+  },
+
+  optimization: {
+    chunkIds: 'named',
+    splitChunks: {
+      chunks: 'initial'
+    }
+  },
+
+  performance: {
+    hints: false
+  },
+
+  plugins,
+
+  resolveLoader: {
+    modules: [
+      'node_modules',
+      'frontend/gulp/webpack/'
+    ]
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.worker\.js$/,
+        use: {
+          loader: 'worker-loader',
+          options: {
+            filename: '[name].js',
+            inline: inlineWebWorkers
+          }
+        }
+      },
+      {
+        test: /\.js?$/,
+        exclude: /(node_modules|JsLibraries)/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              configFile: `${frontendFolder}/babel.config.js`,
+              envName: isProduction ? 'production' : 'development',
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    modules: false,
+                    loose: true,
+                    debug: false,
+                    useBuiltIns: 'entry',
+                    corejs: 3
+                  }
+                ]
+              ]
+            }
+          }
+        ]
+      },
+
+      // CSS Modules
+      {
+        test: /\.css$/,
+        exclude: /(node_modules|globals.css)/,
+        use: [
+          { loader: MiniCssExtractPlugin.loader },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              modules: {
+                localIdentName: '[name]/[local]/[hash:base64:5]'
+              }
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              config: {
+                ctx: {
+                  cssVarsFiles
+                },
+                path: 'frontend/postcss.config.js'
+              }
+            }
+          }
+        ]
+      },
+
+      // Global styles
+      {
+        test: /\.css$/,
+        include: /(node_modules|globals.css)/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader'
+          }
+        ]
+      },
+
+      // Fonts
+      {
+        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10240,
+              mimetype: 'application/font-woff',
+              emitFile: false,
+              name: 'Content/Fonts/[name].[ext]'
+            }
+          }
+        ]
+      },
+
+      {
+        test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              emitFile: false,
+              name: 'Content/Fonts/[name].[ext]'
+            }
+          }
+        ]
+      }
+    ]
+  }
+};
+
+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('_output/UI'));
+});
+
+gulp.task('webpackWatch', () => {
+  config.watch = true;
+
+  return webpackStream(config)
+    .on('error', errorHandler)
+    .pipe(gulp.dest('_output/UI'))
+    .on('error', errorHandler)
+    .pipe(livereload())
+    .on('error', errorHandler);
+});

frontend/postcss.config.js

@@ -1,32 +1,23 @@
 const reload = require('require-nocache')(module);
 
-const cssVarsFiles = [
-  './src/Styles/Variables/colors',
-  './src/Styles/Variables/dimensions',
-  './src/Styles/Variables/fonts',
-  './src/Styles/Variables/animations',
-  './src/Styles/Variables/zIndexes'
-].map(require.resolve);
+module.exports = (ctx, configPath, options) => {
+  const config = {
+    plugins: {
+      'postcss-mixins': {
+        mixinsDir: [
+          'frontend/src/Styles/Mixins'
+        ]
+      },
+      'postcss-simple-vars': {
+        variables: () =>
+          ctx.options.cssVarsFiles.reduce((acc, vars) => {
+            return Object.assign(acc, reload(vars));
+          }, {})
+      },
+      'postcss-color-function': {},
+      'postcss-nested': {}
+    }
+  };
 
-const mixinsFiles = [
-  'frontend/src/Styles/Mixins/cover.css',
-  'frontend/src/Styles/Mixins/linkOverlay.css',
-  'frontend/src/Styles/Mixins/scroller.css',
-  'frontend/src/Styles/Mixins/truncate.css'
-];
-
-module.exports = {
-  plugins: [
-    ['postcss-mixins', {
-      mixinsFiles
-    }],
-    ['postcss-simple-vars', {
-      variables: () =>
-        cssVarsFiles.reduce((acc, vars) => {
-          return Object.assign(acc, reload(vars));
-        }, {})
-    }],
-    'postcss-color-function',
-    'postcss-nested'
-  ]
+  return config;
 };

frontend/src/Activity/Blacklist/Blacklist.js

@@ -1,14 +1,7 @@
 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';
-import selectAll from 'Utilities/Table/selectAll';
-import toggleSelected from 'Utilities/Table/toggleSelected';
-import { align, icons, kinds } from 'Helpers/Props';
+import { align, icons } from 'Helpers/Props';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import ConfirmModal from 'Components/Modal/ConfirmModal';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
@@ -22,72 +15,6 @@ import BlacklistRowConnector from './BlacklistRowConnector';
 
 class Blacklist extends Component {
 
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      allSelected: false,
-      allUnselected: false,
-      lastToggled: null,
-      selectedState: {},
-      isConfirmRemoveModalOpen: false,
-      items: props.items
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      items
-    } = this.props;
-
-    if (hasDifferentItems(prevProps.items, items)) {
-      this.setState((state) => {
-        return {
-          ...removeOldSelectedState(state, getRemovedItems(prevProps.items, items)),
-          items
-        };
-      });
-
-      return;
-    }
-  }
-
-  //
-  // Control
-
-  getSelectedIds = () => {
-    return getSelectedIds(this.state.selectedState);
-  }
-
-  //
-  // Listeners
-
-  onSelectAllChange = ({ value }) => {
-    this.setState(selectAll(this.state.selectedState, value));
-  }
-
-  onSelectedChange = ({ id, value, shiftKey = false }) => {
-    this.setState((state) => {
-      return toggleSelected(state, this.props.items, id, value, shiftKey);
-    });
-  }
-
-  onRemoveSelectedPress = () => {
-    this.setState({ isConfirmRemoveModalOpen: true });
-  }
-
-  onRemoveSelectedConfirmed = () => {
-    this.props.onRemoveSelected(this.getSelectedIds());
-    this.setState({ isConfirmRemoveModalOpen: false });
-  }
-
-  onConfirmRemoveModalClose = () => {
-    this.setState({ isConfirmRemoveModalOpen: false });
-  }
-
   //
   // Render
 
@@ -99,33 +26,15 @@ class Blacklist extends Component {
       items,
       columns,
       totalRecords,
-      isRemoving,
       isClearingBlacklistExecuting,
       onClearBlacklistPress,
       ...otherProps
     } = this.props;
 
-    const {
-      allSelected,
-      allUnselected,
-      selectedState,
-      isConfirmRemoveModalOpen
-    } = this.state;
-
-    const selectedIds = this.getSelectedIds();
-
     return (
       <PageContent title="Blacklist">
         <PageToolbar>
           <PageToolbarSection>
-            <PageToolbarButton
-              label="Remove Selected"
-              iconName={icons.REMOVE}
-              isDisabled={!selectedIds.length}
-              isSpinning={isRemoving}
-              onPress={this.onRemoveSelectedPress}
-            />
-
             <PageToolbarButton
               label="Clear"
               iconName={icons.CLEAR}
@@ -150,67 +59,51 @@ class Blacklist extends Component {
         <PageContentBody>
           {
             isFetching && !isPopulated &&
-            <LoadingIndicator />
+              <LoadingIndicator />
           }
 
           {
             !isFetching && !!error &&
-            <div>Unable to load blacklist</div>
+              <div>Unable to load blacklist</div>
           }
 
           {
             isPopulated && !error && !items.length &&
-            <div>
-              No history blacklist
-            </div>
+              <div>
+                No history blacklist
+              </div>
           }
 
           {
             isPopulated && !error && !!items.length &&
-            <div>
-              <Table
-                selectAll={true}
-                allSelected={allSelected}
-                allUnselected={allUnselected}
-                columns={columns}
-                {...otherProps}
-                onSelectAllChange={this.onSelectAllChange}
-              >
-                <TableBody>
-                  {
-                    items.map((item) => {
-                      return (
-                        <BlacklistRowConnector
-                          key={item.id}
-                          isSelected={selectedState[item.id] || false}
-                          columns={columns}
-                          {...item}
-                          onSelectedChange={this.onSelectedChange}
-                        />
-                      );
-                    })
-                  }
-                </TableBody>
-              </Table>
+              <div>
+                <Table
+                  columns={columns}
+                  {...otherProps}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return (
+                          <BlacklistRowConnector
+                            key={item.id}
+                            columns={columns}
+                            {...item}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
 
-              <TablePager
-                totalRecords={totalRecords}
-                isFetching={isFetching}
-                {...otherProps}
-              />
-            </div>
+                <TablePager
+                  totalRecords={totalRecords}
+                  isFetching={isFetching}
+                  {...otherProps}
+                />
+              </div>
           }
         </PageContentBody>
-
-        <ConfirmModal
-          isOpen={isConfirmRemoveModalOpen}
-          kind={kinds.DANGER}
-          title="Remove Selected"
-          message={'Are you sure you want to remove the selected items from the blacklist?'}
-          confirmLabel="Remove Selected"
-          onConfirm={this.onRemoveSelectedConfirmed}
-          onCancel={this.onConfirmRemoveModalClose}
-        />
       </PageContent>
     );
   }
@@ -223,9 +116,7 @@ Blacklist.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   totalRecords: PropTypes.number,
-  isRemoving: PropTypes.bool.isRequired,
   isClearingBlacklistExecuting: PropTypes.bool.isRequired,
-  onRemoveSelected: PropTypes.func.isRequired,
   onClearBlacklistPress: PropTypes.func.isRequired
 };
 

frontend/src/Activity/Blacklist/BlacklistConnector.js

@@ -89,10 +89,6 @@ class BlacklistConnector extends Component {
     this.props.gotoBlacklistPage({ page });
   }
 
-  onRemoveSelected = (ids) => {
-    this.props.removeBlacklistItems({ ids });
-  }
-
   onSortPress = (sortKey) => {
     this.props.setBlacklistSort({ sortKey });
   }
@@ -128,7 +124,6 @@ class BlacklistConnector extends Component {
         onNextPagePress={this.onNextPagePress}
         onLastPagePress={this.onLastPagePress}
         onPageSelect={this.onPageSelect}
-        onRemoveSelected={this.onRemoveSelected}
         onSortPress={this.onSortPress}
         onTableOptionChange={this.onTableOptionChange}
         onClearBlacklistPress={this.onClearBlacklistPress}
@@ -148,7 +143,6 @@ BlacklistConnector.propTypes = {
   gotoBlacklistNextPage: PropTypes.func.isRequired,
   gotoBlacklistLastPage: PropTypes.func.isRequired,
   gotoBlacklistPage: PropTypes.func.isRequired,
-  removeBlacklistItems: PropTypes.func.isRequired,
   setBlacklistSort: PropTypes.func.isRequired,
   setBlacklistTableOption: PropTypes.func.isRequired,
   clearBlacklist: PropTypes.func.isRequired,

frontend/src/Activity/Blacklist/BlacklistRow.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { icons, kinds } from 'Helpers/Props';
 import IconButton from 'Components/Link/IconButton';
-import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRow from 'Components/Table/TableRow';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
@@ -41,7 +40,6 @@ class BlacklistRow extends Component {
 
   render() {
     const {
-      id,
       series,
       sourceTitle,
       language,
@@ -50,20 +48,12 @@ class BlacklistRow extends Component {
       protocol,
       indexer,
       message,
-      isSelected,
       columns,
-      onSelectedChange,
       onRemovePress
     } = this.props;
 
     return (
       <TableRow>
-        <TableSelectCell
-          id={id}
-          isSelected={isSelected}
-          onSelectedChange={onSelectedChange}
-        />
-
         {
           columns.map((column) => {
             const {
@@ -189,9 +179,7 @@ BlacklistRow.propTypes = {
   protocol: PropTypes.string.isRequired,
   indexer: PropTypes.string,
   message: PropTypes.string,
-  isSelected: PropTypes.bool.isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onSelectedChange: PropTypes.func.isRequired,
   onRemovePress: PropTypes.func.isRequired
 };
 

frontend/src/Activity/Blacklist/BlacklistRowConnector.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { removeBlacklistItem } from 'Store/Actions/blacklistActions';
+import { removeFromBlacklist } from 'Store/Actions/blacklistActions';
 import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
 import BlacklistRow from './BlacklistRow';
 
@@ -18,7 +18,7 @@ function createMapStateToProps() {
 function createMapDispatchToProps(dispatch, props) {
   return {
     onRemovePress() {
-      dispatch(removeBlacklistItem({ id: props.id }));
+      dispatch(removeFromBlacklist({ id: props.id }));
     }
   };
 }

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

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import formatAge from 'Utilities/Number/formatAge';
 import formatDateTime from 'Utilities/Date/formatDateTime';
-import formatPreferredWordScore from 'Utilities/Number/formatPreferredWordScore';
+import formatAge from 'Utilities/Number/formatAge';
 import Link from 'Components/Link/Link';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
@@ -23,7 +22,6 @@ function HistoryDetails(props) {
     const {
       indexer,
       releaseGroup,
-      preferredWordScore,
       nzbInfoUrl,
       downloadClient,
       downloadId,
@@ -42,35 +40,24 @@ function HistoryDetails(props) {
         />
 
         {
-          indexer ?
+          !!indexer &&
             <DescriptionListItem
               title="Indexer"
               data={indexer}
-            /> :
-            null
+            />
         }
 
         {
-          releaseGroup ?
+          !!releaseGroup &&
             <DescriptionListItem
               descriptionClassName={styles.description}
               title="Release Group"
               data={releaseGroup}
-            /> :
-            null
+            />
         }
 
         {
-          preferredWordScore && preferredWordScore !== '0' ?
-            <DescriptionListItem
-              title="Preferred Word Score"
-              data={formatPreferredWordScore(preferredWordScore)}
-            /> :
-            null
-        }
-
-        {
-          nzbInfoUrl ?
+          !!nzbInfoUrl &&
             <span>
               <DescriptionListItemTitle>
                 Info URL
@@ -79,44 +66,39 @@ function HistoryDetails(props) {
               <DescriptionListItemDescription>
                 <Link to={nzbInfoUrl}>{nzbInfoUrl}</Link>
               </DescriptionListItemDescription>
-            </span> :
-            null
+            </span>
         }
 
         {
-          downloadClient ?
+          !!downloadClient &&
             <DescriptionListItem
               title="Download Client"
               data={downloadClient}
-            /> :
-            null
+            />
         }
 
         {
-          downloadId ?
+          !!downloadId &&
             <DescriptionListItem
               title="Grab ID"
               data={downloadId}
-            /> :
-            null
+            />
         }
 
         {
-          age || ageHours || ageMinutes ?
+          !!indexer &&
             <DescriptionListItem
               title="Age (when grabbed)"
               data={formatAge(age, ageHours, ageMinutes)}
-            /> :
-            null
+            />
         }
 
         {
-          publishedDate ?
+          !!publishedDate &&
             <DescriptionListItem
               title="Published Date"
               data={formatDateTime(publishedDate, shortDateFormat, timeFormat, { includeSeconds: true })}
-            /> :
-            null
+            />
         }
       </DescriptionList>
     );
@@ -136,12 +118,11 @@ function HistoryDetails(props) {
         />
 
         {
-          message ?
+          !!message &&
             <DescriptionListItem
               title="Message"
               data={message}
-            /> :
-            null
+            />
         }
       </DescriptionList>
     );
@@ -149,7 +130,6 @@ function HistoryDetails(props) {
 
   if (eventType === 'downloadFolderImported') {
     const {
-      preferredWordScore,
       droppedPath,
       importedPath
     } = data;
@@ -163,32 +143,21 @@ function HistoryDetails(props) {
         />
 
         {
-          droppedPath ?
+          !!droppedPath &&
             <DescriptionListItem
               descriptionClassName={styles.description}
               title="Source"
               data={droppedPath}
-            /> :
-            null
+            />
         }
 
         {
-          importedPath ?
+          !!importedPath &&
             <DescriptionListItem
               descriptionClassName={styles.description}
               title="Imported To"
               data={importedPath}
-            /> :
-            null
-        }
-
-        {
-          preferredWordScore && preferredWordScore !== '0' ?
-            <DescriptionListItem
-              title="Preferred Word Score"
-              data={formatPreferredWordScore(preferredWordScore)}
-            /> :
-            null
+            />
         }
       </DescriptionList>
     );
@@ -196,8 +165,7 @@ function HistoryDetails(props) {
 
   if (eventType === 'episodeFileDeleted') {
     const {
-      reason,
-      preferredWordScore
+      reason
     } = data;
 
     let reasonMessage = '';
@@ -227,15 +195,6 @@ function HistoryDetails(props) {
           title="Reason"
           data={reasonMessage}
         />
-
-        {
-          preferredWordScore && preferredWordScore !== '0' ?
-            <DescriptionListItem
-              title="Preferred Word Score"
-              data={formatPreferredWordScore(preferredWordScore)}
-            /> :
-            null
-        }
       </DescriptionList>
     );
   }
@@ -287,12 +246,11 @@ function HistoryDetails(props) {
         />
 
         {
-          message ?
+          !!message &&
             <DescriptionListItem
               title="Message"
               data={message}
-            /> :
-            null
+            />
         }
       </DescriptionList>
     );

frontend/src/Activity/History/HistoryRow.css

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

frontend/src/Activity/History/HistoryRow.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import formatPreferredWordScore from 'Utilities/Number/formatPreferredWordScore';
 import { icons } from 'Helpers/Props';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
@@ -195,17 +194,6 @@ class HistoryRow extends Component {
               );
             }
 
-            if (name === 'preferredWordScore') {
-              return (
-                <TableRowCell
-                  key={name}
-                  className={styles.preferredWordScore}
-                >
-                  {formatPreferredWordScore(data.preferredWordScore)}
-                </TableRowCell>
-              );
-            }
-
             if (name === 'releaseGroup') {
               return (
                 <TableRowCell

frontend/src/Activity/Queue/Queue.js

@@ -31,8 +31,6 @@ class Queue extends Component {
   constructor(props, context) {
     super(props, context);
 
-    this._shouldBlockRefresh = false;
-
     this.state = {
       allSelected: false,
       allUnselected: false,
@@ -44,14 +42,6 @@ class Queue extends Component {
     };
   }
 
-  shouldComponentUpdate() {
-    if (this._shouldBlockRefresh) {
-      return false;
-    }
-
-    return true;
-  }
-
   componentDidUpdate(prevProps) {
     const {
       items,
@@ -92,10 +82,6 @@ class Queue extends Component {
   //
   // Listeners
 
-  onQueueRowModalOpenOrClose = (isOpen) => {
-    this._shouldBlockRefresh = isOpen;
-  }
-
   onSelectAllChange = ({ value }) => {
     this.setState(selectAll(this.state.selectedState, value));
   }
@@ -111,19 +97,15 @@ class Queue extends Component {
   }
 
   onRemoveSelectedPress = () => {
-    this.setState({ isConfirmRemoveModalOpen: true }, () => {
-      this._shouldBlockRefresh = true;
-    });
+    this.setState({ isConfirmRemoveModalOpen: true });
   }
 
   onRemoveSelectedConfirmed = (payload) => {
-    this._shouldBlockRefresh = false;
     this.props.onRemoveSelectedPress({ ids: this.getSelectedIds(), ...payload });
     this.setState({ isConfirmRemoveModalOpen: false });
   }
 
   onConfirmRemoveModalClose = () => {
-    this._shouldBlockRefresh = false;
     this.setState({ isConfirmRemoveModalOpen: false });
   }
 
@@ -223,7 +205,7 @@ class Queue extends Component {
           }
 
           {
-            isAllPopulated && !hasError && !items.length &&
+            isPopulated && !hasError && !items.length &&
               <div>
                 Queue is empty
               </div>
@@ -252,7 +234,6 @@ class Queue extends Component {
                             columns={columns}
                             {...item}
                             onSelectedChange={this.onSelectedChange}
-                            onQueueRowModalOpenOrClose={this.onQueueRowModalOpenOrClose}
                           />
                         );
                       })

frontend/src/Activity/Queue/QueueConnector.js

@@ -48,7 +48,6 @@ class QueueConnector extends Component {
     const {
       useCurrentPage,
       fetchQueue,
-      fetchQueueStatus,
       gotoQueueFirstPage
     } = this.props;
 
@@ -59,8 +58,6 @@ class QueueConnector extends Component {
     } else {
       gotoQueueFirstPage();
     }
-
-    fetchQueueStatus();
   }
 
   componentDidUpdate(prevProps) {
@@ -171,7 +168,6 @@ QueueConnector.propTypes = {
   useCurrentPage: PropTypes.bool.isRequired,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   fetchQueue: PropTypes.func.isRequired,
-  fetchQueueStatus: PropTypes.func.isRequired,
   gotoQueueFirstPage: PropTypes.func.isRequired,
   gotoQueuePreviousPage: PropTypes.func.isRequired,
   gotoQueueNextPage: PropTypes.func.isRequired,

frontend/src/Activity/Queue/QueueRow.js

@@ -42,32 +42,19 @@ class QueueRow extends Component {
   }
 
   onRemoveQueueItemModalConfirmed = (blacklist) => {
-    const {
-      onRemoveQueueItemPress,
-      onQueueRowModalOpenOrClose
-    } = this.props;
-
-    onQueueRowModalOpenOrClose(false);
-    onRemoveQueueItemPress(blacklist);
-
+    this.props.onRemoveQueueItemPress(blacklist);
     this.setState({ isRemoveQueueItemModalOpen: false });
   }
 
   onRemoveQueueItemModalClose = () => {
-    this.props.onQueueRowModalOpenOrClose(false);
-
     this.setState({ isRemoveQueueItemModalOpen: false });
   }
 
   onInteractiveImportPress = () => {
-    this.props.onQueueRowModalOpenOrClose(true);
-
     this.setState({ isInteractiveImportModalOpen: true });
   }
 
   onInteractiveImportModalClose = () => {
-    this.props.onQueueRowModalOpenOrClose(false);
-
     this.setState({ isInteractiveImportModalOpen: false });
   }
 
@@ -410,8 +397,7 @@ QueueRow.propTypes = {
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   onSelectedChange: PropTypes.func.isRequired,
   onGrabPress: PropTypes.func.isRequired,
-  onRemoveQueueItemPress: PropTypes.func.isRequired,
-  onQueueRowModalOpenOrClose: PropTypes.func.isRequired
+  onRemoveQueueItemPress: PropTypes.func.isRequired
 };
 
 QueueRow.defaultProps = {

frontend/src/Activity/Queue/QueueStatusCell.css

@@ -3,7 +3,3 @@
 
   width: 30px;
 }
-
-.noMessages {
-  margin-bottom: 10px;
-}

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -12,10 +12,7 @@ function getDetailedPopoverBody(statusMessages) {
       {
         statusMessages.map(({ title, messages }) => {
           return (
-            <div
-              key={title}
-              className={messages.length ? undefined: styles.noMessages}
-            >
+            <div key={title}>
               {title}
               <ul>
                 {

frontend/src/AddSeries/AddNewSeries/AddNewSeries.js

@@ -154,7 +154,7 @@ class AddNewSeries extends Component {
                 <div className={styles.noResults}>Couldn't find any results for '{term}'</div>
                 <div>You can also search using TVDB ID of a show. eg. tvdb:71663</div>
                 <div>
-                  <Link to="https://wiki.servarr.com/Sonarr_FAQ#Why_cant_I_add_a_new_series_when_I_know_the_TVDB_ID">
+                  <Link to="https://github.com/Sonarr/Sonarr/wiki/FAQ#why-cant-i-add-a-new-series-when-i-know-the-tvdb-id">
                     Why can't I find my show?
                   </Link>
                 </div>

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.js

@@ -30,7 +30,9 @@ class AddNewSeriesModalContent extends Component {
     this.state = {
       seriesType: props.initialSeriesType === seriesTypes.STANDARD ?
         props.seriesType.value :
-        props.initialSeriesType
+        props.initialSeriesType,
+      searchForMissingEpisodes: false,
+      searchForCutoffUnmetEpisodes: false
     };
   }
 
@@ -43,6 +45,14 @@ class AddNewSeriesModalContent extends Component {
   //
   // Listeners
 
+  onSearchForMissingEpisodesChange = ({ value }) => {
+    this.setState({ searchForMissingEpisodes: value });
+  }
+
+  onSearchForCutoffUnmetEpisodesChange = ({ value }) => {
+    this.setState({ searchForCutoffUnmetEpisodes: value });
+  }
+
   onQualityProfileIdChange = ({ value }) => {
     this.props.onInputChange({ name: 'qualityProfileId', value: parseInt(value) });
   }
@@ -53,10 +63,14 @@ class AddNewSeriesModalContent extends Component {
 
   onAddSeriesPress = () => {
     const {
+      searchForMissingEpisodes,
+      searchForCutoffUnmetEpisodes,
       seriesType
     } = this.state;
 
     this.props.onAddSeriesPress(
+      searchForMissingEpisodes,
+      searchForCutoffUnmetEpisodes,
       seriesType
     );
   }
@@ -77,8 +91,6 @@ class AddNewSeriesModalContent extends Component {
       languageProfileId,
       seriesType,
       seasonFolder,
-      searchForMissingEpisodes,
-      searchForCutoffUnmetEpisodes,
       folder,
       tags,
       showLanguageProfile,
@@ -89,6 +101,11 @@ class AddNewSeriesModalContent extends Component {
       ...otherProps
     } = this.props;
 
+    const {
+      searchForMissingEpisodes,
+      searchForCutoffUnmetEpisodes
+    } = this.state;
+
     return (
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
@@ -254,8 +271,8 @@ class AddNewSeriesModalContent extends Component {
                 containerClassName={styles.searchInputContainer}
                 className={styles.searchInput}
                 name="searchForMissingEpisodes"
-                onChange={onInputChange}
-                {...searchForMissingEpisodes}
+                value={searchForMissingEpisodes}
+                onChange={this.onSearchForMissingEpisodesChange}
               />
             </label>
 
@@ -268,8 +285,8 @@ class AddNewSeriesModalContent extends Component {
                 containerClassName={styles.searchInputContainer}
                 className={styles.searchInput}
                 name="searchForCutoffUnmetEpisodes"
-                onChange={onInputChange}
-                {...searchForCutoffUnmetEpisodes}
+                value={searchForCutoffUnmetEpisodes}
+                onChange={this.onSearchForCutoffUnmetEpisodesChange}
               />
             </label>
           </div>
@@ -302,8 +319,6 @@ AddNewSeriesModalContent.propTypes = {
   languageProfileId: PropTypes.object,
   seriesType: PropTypes.object.isRequired,
   seasonFolder: PropTypes.object.isRequired,
-  searchForMissingEpisodes: PropTypes.object.isRequired,
-  searchForCutoffUnmetEpisodes: PropTypes.object.isRequired,
   folder: PropTypes.string.isRequired,
   tags: PropTypes.object.isRequired,
   showLanguageProfile: PropTypes.bool.isRequired,

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContentConnector.js

@@ -55,7 +55,7 @@ class AddNewSeriesModalContentConnector extends Component {
     this.props.setAddSeriesDefault({ [name]: value });
   }
 
-  onAddSeriesPress = (seriesType) => {
+  onAddSeriesPress = (searchForMissingEpisodes, searchForCutoffUnmetEpisodes, seriesType) => {
     const {
       tvdbId,
       rootFolderPath,
@@ -63,8 +63,6 @@ class AddNewSeriesModalContentConnector extends Component {
       qualityProfileId,
       languageProfileId,
       seasonFolder,
-      searchForMissingEpisodes,
-      searchForCutoffUnmetEpisodes,
       tags
     } = this.props;
 
@@ -76,9 +74,9 @@ class AddNewSeriesModalContentConnector extends Component {
       languageProfileId: languageProfileId.value,
       seriesType,
       seasonFolder: seasonFolder.value,
-      searchForMissingEpisodes: searchForMissingEpisodes.value,
-      searchForCutoffUnmetEpisodes: searchForCutoffUnmetEpisodes.value,
-      tags: tags.value
+      tags: tags.value,
+      searchForMissingEpisodes,
+      searchForCutoffUnmetEpisodes
     });
   }
 
@@ -104,8 +102,6 @@ AddNewSeriesModalContentConnector.propTypes = {
   languageProfileId: PropTypes.object,
   seriesType: PropTypes.object.isRequired,
   seasonFolder: PropTypes.object.isRequired,
-  searchForMissingEpisodes: PropTypes.object.isRequired,
-  searchForCutoffUnmetEpisodes: PropTypes.object.isRequired,
   tags: PropTypes.object.isRequired,
   onModalClose: PropTypes.func.isRequired,
   setAddSeriesDefault: PropTypes.func.isRequired,

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

@@ -78,10 +78,7 @@ class ImportSeriesSelectFolder extends Component {
                       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> Additionally, each series must be in its own folder within the root/library folder.
-                    </li>
-                    <li className={styles.tip}>
-                      Do not use for importing downloads from your download client, this is only for existing organized libraries, not unsorted files.
+                      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>

frontend/src/Calendar/Agenda/AgendaEvent.css

@@ -25,7 +25,7 @@
 }
 
 .time {
-  flex: 0 0 125px;
+  flex: 0 0 120px;
   margin-right: 10px;
   border: none !important;
 }

frontend/src/Calendar/Events/CalendarEvent.css

@@ -1,5 +1,3 @@
-$fullColorGradient: rgba(244, 245, 246, 0.2);
-
 .event {
   overflow-x: hidden;
   margin: 4px 2px;
@@ -38,11 +36,6 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
   margin-left: 3px;
 }
 
-.statusContainer {
-  display: flex;
-  align-items: center;
-}
-
 .statusIcon {
   margin-left: 3px;
 }
@@ -58,10 +51,6 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
 .downloaded {
   border-left-color: $successColor !important;
 
-  &:global(.fullColor) {
-    background-color: rgba(39, 194, 76, 0.4) !important;
-  }
-
   &:global(.colorImpaired) {
     border-left-color: color($successColor, saturation(+15%)) !important;
   }
@@ -69,73 +58,37 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
 
 .downloading {
   border-left-color: $purple !important;
-
-  &:global(.fullColor) {
-    background-color: rgba(122, 67, 182, 0.4) !important;
-  }
 }
 
 .unmonitored {
   border-left-color: $gray !important;
 
-  &:global(.fullColor) {
-    background-color: rgba(173, 173, 173, 0.5) !important;
-  }
-
   &:global(.colorImpaired) {
     background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
-
-  &:global(.fullColor.colorImpaired) {
-    background: repeating-linear-gradient(45deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
-  }
 }
 
 .onAir {
   border-left-color: $warningColor !important;
 
-  &:global(.fullColor) {
-    background-color: rgba(255, 165, 0, 0.6) !important;
-  }
-
   &:global(.colorImpaired) {
     background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
-
-  &:global(.fullColor.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
-  }
 }
 
 .missing {
   border-left-color: $dangerColor !important;
 
-  &:global(.fullColor) {
-    background-color: rgba(240, 80, 80, 0.6) !important;
-  }
-
   &:global(.colorImpaired) {
     border-left-color: color($dangerColor saturation(+15%)) !important;
     background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
-
-  &:global(.fullColor.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
-  }
 }
 
 .unaired {
   border-left-color: $primaryColor !important;
 
-  &:global(.fullColor) {
-    background-color: rgba(93, 156, 236, 0.4) !important;
-  }
-
   &:global(.colorImpaired) {
     background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
-
-  &:global(.fullColor.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
-  }
 }

frontend/src/Calendar/Events/CalendarEvent.js

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import classNames from 'classnames';
 import { icons, kinds } from 'Helpers/Props';
 import formatTime from 'Utilities/Date/formatTime';
@@ -62,7 +62,6 @@ class CalendarEvent extends Component {
       showFinaleIcon,
       showSpecialIcon,
       showCutoffUnmetIcon,
-      fullColorEvents,
       timeFormat,
       colorImpairedMode
     } = this.props;
@@ -81,13 +80,12 @@ class CalendarEvent extends Component {
     const seasonStatistics = season.statistics || {};
 
     return (
-      <Fragment>
+      <div>
         <Link
           className={classNames(
             styles.event,
             styles[statusStyle],
-            colorImpairedMode && 'colorImpaired',
-            fullColorEvents && 'fullColor'
+            colorImpairedMode && 'colorImpaired'
           )}
           component="div"
           onPress={this.onPress}
@@ -97,107 +95,95 @@ class CalendarEvent extends Component {
               {series.title}
             </div>
 
-            <div className={styles.statusContainer}>
-              {
-                missingAbsoluteNumber ?
-                  <Icon
-                    className={styles.statusIcon}
-                    name={icons.WARNING}
-                    title="Episode does not have an absolute episode number"
-                  /> :
-                  null
-              }
+            {
+              missingAbsoluteNumber &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.WARNING}
+                  title="Episode does not have an absolute episode number"
+                />
+            }
 
-              {
-                queueItem ?
-                  <span className={styles.statusIcon}>
-                    <CalendarEventQueueDetails
-                      {...queueItem}
-                    />
-                  </span> :
-                  null
-              }
+            {
+              !!queueItem &&
+                <span className={styles.statusIcon}>
+                  <CalendarEventQueueDetails
+                    {...queueItem}
+                  />
+                </span>
+            }
 
-              {
-                !queueItem && grabbed ?
-                  <Icon
-                    className={styles.statusIcon}
-                    name={icons.DOWNLOADING}
-                    title="Episode is downloading"
-                  /> :
-                  null
-              }
+            {
+              !queueItem && grabbed &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.DOWNLOADING}
+                  title="Episode is downloading"
+                />
+            }
 
-              {
-                showCutoffUnmetIcon &&
-                !!episodeFile &&
-                episodeFile.qualityCutoffNotMet ?
-                  <Icon
-                    className={styles.statusIcon}
-                    name={icons.EPISODE_FILE}
-                    kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
-                    title="Quality cutoff has not been met"
-                  /> :
-                  null
-              }
+            {
+              showCutoffUnmetIcon &&
+              !!episodeFile &&
+              episodeFile.qualityCutoffNotMet &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.EPISODE_FILE}
+                  kind={kinds.WARNING}
+                  title="Quality cutoff has not been met"
+                />
+            }
 
-              {
-                showCutoffUnmetIcon &&
-                !!episodeFile &&
-                episodeFile.languageCutoffNotMet &&
-                !episodeFile.qualityCutoffNotMet ?
-                  <Icon
-                    className={styles.statusIcon}
-                    name={icons.EPISODE_FILE}
-                    kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
-                    title="Language cutoff has not been met"
-                  /> :
-                  null
-              }
+            {
+              showCutoffUnmetIcon &&
+              !!episodeFile &&
+              episodeFile.languageCutoffNotMet &&
+              !episodeFile.qualityCutoffNotMet &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.EPISODE_FILE}
+                  kind={kinds.WARNING}
+                  title="Language cutoff has not been met"
+                />
+            }
 
-              {
-                episodeNumber === 1 && seasonNumber > 0 ?
-                  <Icon
-                    className={styles.statusIcon}
-                    name={icons.INFO}
-                    kind={kinds.INFO}
-                    darken={fullColorEvents}
-                    title={seasonNumber === 1 ? 'Series premiere' : 'Season premiere'}
-                  /> :
-                  null
-              }
+            {
+              episodeNumber === 1 && seasonNumber > 0 &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.INFO}
+                  kind={kinds.INFO}
+                  title={seasonNumber === 1 ? 'Series premiere' : 'Season premiere'}
+                />
+            }
 
-              {
-                showFinaleIcon &&
-                episodeNumber !== 1 &&
-                seasonNumber > 0 &&
-                episodeNumber === seasonStatistics.totalEpisodeCount ?
-                  <Icon
-                    className={styles.statusIcon}
-                    name={icons.INFO}
-                    kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
-                    title={series.status === 'ended' ? 'Series finale' : 'Season finale'}
-                  /> :
-                  null
-              }
+            {
+              showFinaleIcon &&
+              episodeNumber !== 1 &&
+              seasonNumber > 0 &&
+              episodeNumber === seasonStatistics.totalEpisodeCount &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.INFO}
+                  kind={kinds.WARNING}
+                  title={series.status === 'ended' ? 'Series finale' : 'Season finale'}
+                />
+            }
 
-              {
-                showSpecialIcon &&
-                (episodeNumber === 0 || seasonNumber === 0) ?
-                  <Icon
-                    className={styles.statusIcon}
-                    name={icons.INFO}
-                    kind={kinds.PINK}
-                    darken={fullColorEvents}
-                    title="Special"
-                  /> :
-                  null
-              }
-            </div>
+            {
+              showSpecialIcon &&
+              (episodeNumber === 0 || seasonNumber === 0) &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.INFO}
+                  kind={kinds.PINK}
+                  title="Special"
+                />
+            }
           </div>
 
           {
-            showEpisodeInformation ?
+            showEpisodeInformation &&
               <div className={styles.episodeInfo}>
                 <div className={styles.episodeTitle}>
                   {title}
@@ -207,12 +193,11 @@ class CalendarEvent extends Component {
                   {seasonNumber}x{padNumber(episodeNumber, 2)}
 
                   {
-                    series.seriesType === 'anime' && absoluteEpisodeNumber ?
-                      <span className={styles.absoluteEpisodeNumber}>({absoluteEpisodeNumber})</span> : null
+                    series.seriesType === 'anime' && absoluteEpisodeNumber &&
+                      <span className={styles.absoluteEpisodeNumber}>({absoluteEpisodeNumber})</span>
                   }
                 </div>
-              </div> :
-              null
+              </div>
           }
 
           <div className={styles.airTime}>
@@ -229,7 +214,7 @@ class CalendarEvent extends Component {
           showOpenSeriesButton={true}
           onModalClose={this.onDetailsModalClose}
         />
-      </Fragment>
+      </div>
     );
   }
 }
@@ -251,7 +236,6 @@ CalendarEvent.propTypes = {
   showFinaleIcon: PropTypes.bool.isRequired,
   showSpecialIcon: PropTypes.bool.isRequired,
   showCutoffUnmetIcon: PropTypes.bool.isRequired,
-  fullColorEvents: PropTypes.bool.isRequired,
   timeFormat: PropTypes.string.isRequired,
   colorImpairedMode: PropTypes.bool.isRequired,
   onEventModalOpenToggle: PropTypes.func.isRequired

frontend/src/Calendar/Events/CalendarEventGroup.js

@@ -74,7 +74,6 @@ class CalendarEventGroup extends Component {
       showEpisodeInformation,
       showFinaleIcon,
       timeFormat,
-      fullColorEvents,
       colorImpairedMode,
       onEventModalOpenToggle
     } = this.props;
@@ -134,8 +133,7 @@ class CalendarEventGroup extends Component {
         className={classNames(
           styles.eventGroup,
           styles[statusStyle],
-          colorImpairedMode && 'colorImpaired',
-          fullColorEvents && 'fullColor'
+          colorImpairedMode && 'colorImpaired'
         )}
       >
         <div className={styles.info}>
@@ -146,7 +144,7 @@ class CalendarEventGroup extends Component {
           {
             isMissingAbsoluteNumber &&
               <Icon
-                containerClassName={styles.statusIcon}
+                className={styles.statusIcon}
                 name={icons.WARNING}
                 title="Episode does not have an absolute episode number"
               />
@@ -155,7 +153,7 @@ class CalendarEventGroup extends Component {
           {
             anyDownloading &&
               <Icon
-                containerClassName={styles.statusIcon}
+                className={styles.statusIcon}
                 name={icons.DOWNLOADING}
                 title="An episode is downloading"
               />
@@ -164,10 +162,9 @@ class CalendarEventGroup extends Component {
           {
             firstEpisode.episodeNumber === 1 && seasonNumber > 0 &&
               <Icon
-                containerClassName={styles.statusIcon}
+                className={styles.statusIcon}
                 name={icons.INFO}
                 kind={kinds.INFO}
-                darken={fullColorEvents}
                 title={seasonNumber === 1 ? 'Series Premiere' : 'Season Premiere'}
               />
           }
@@ -178,9 +175,9 @@ class CalendarEventGroup extends Component {
             seasonNumber > 0 &&
             lastEpisode.episodeNumber === series.seasons.find((season) => season.seasonNumber === seasonNumber).statistics.totalEpisodeCount &&
               <Icon
-                containerClassName={styles.statusIcon}
+                className={styles.statusIcon}
                 name={icons.INFO}
-                kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
+                kind={kinds.WARNING}
                 title={series.status === 'ended' ? 'Series finale' : 'Season finale'}
               />
           }
@@ -240,7 +237,6 @@ CalendarEventGroup.propTypes = {
   isDownloading: PropTypes.bool.isRequired,
   showEpisodeInformation: PropTypes.bool.isRequired,
   showFinaleIcon: PropTypes.bool.isRequired,
-  fullColorEvents: PropTypes.bool.isRequired,
   timeFormat: PropTypes.string.isRequired,
   colorImpairedMode: PropTypes.bool.isRequired,
   onEventModalOpenToggle: PropTypes.func.isRequired

frontend/src/Calendar/Legend/Legend.js

@@ -7,23 +7,19 @@ import styles from './Legend.css';
 
 function Legend(props) {
   const {
-    view,
     showFinaleIcon,
     showSpecialIcon,
     showCutoffUnmetIcon,
-    fullColorEvents,
     colorImpairedMode
   } = props;
 
   const iconsToShow = [];
-  const isAgendaView = view === 'agenda';
-
   if (showFinaleIcon) {
     iconsToShow.push(
       <LegendIconItem
         name="Finale"
         icon={icons.INFO}
-        kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
+        kind={kinds.WARNING}
         tooltip="Series or season finale"
       />
     );
@@ -35,7 +31,6 @@ function Legend(props) {
         name="Special"
         icon={icons.INFO}
         kind={kinds.PINK}
-        darken={fullColorEvents}
         tooltip="Special episode"
       />
     );
@@ -46,7 +41,7 @@ function Legend(props) {
       <LegendIconItem
         name="Cutoff Not Met"
         icon={icons.EPISODE_FILE}
-        kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
+        kind={kinds.WARNING}
         tooltip="Quality or language cutoff has not been met"
       />
     );
@@ -58,16 +53,12 @@ function Legend(props) {
         <LegendItem
           status="unaired"
           tooltip="Episode hasn't aired yet"
-          isAgendaView={isAgendaView}
-          fullColorEvents={fullColorEvents}
           colorImpairedMode={colorImpairedMode}
         />
 
         <LegendItem
           status="unmonitored"
           tooltip="Episode is unmonitored"
-          isAgendaView={isAgendaView}
-          fullColorEvents={fullColorEvents}
           colorImpairedMode={colorImpairedMode}
         />
       </div>
@@ -77,16 +68,12 @@ function Legend(props) {
           status="onAir"
           name="On Air"
           tooltip="Episode is currently airing"
-          isAgendaView={isAgendaView}
-          fullColorEvents={fullColorEvents}
           colorImpairedMode={colorImpairedMode}
         />
 
         <LegendItem
           status="missing"
           tooltip="Episode has aired and is missing from disk"
-          isAgendaView={isAgendaView}
-          fullColorEvents={fullColorEvents}
           colorImpairedMode={colorImpairedMode}
         />
       </div>
@@ -95,16 +82,12 @@ function Legend(props) {
         <LegendItem
           status="downloading"
           tooltip="Episode is currently downloading"
-          isAgendaView={isAgendaView}
-          fullColorEvents={fullColorEvents}
           colorImpairedMode={colorImpairedMode}
         />
 
         <LegendItem
           status="downloaded"
           tooltip="Episode was downloaded and sorted"
-          isAgendaView={isAgendaView}
-          fullColorEvents={fullColorEvents}
           colorImpairedMode={colorImpairedMode}
         />
       </div>
@@ -114,7 +97,6 @@ function Legend(props) {
           name="Premiere"
           icon={icons.INFO}
           kind={kinds.INFO}
-          darken={true}
           tooltip="Series or season premiere"
         />
 
@@ -133,11 +115,9 @@ function Legend(props) {
 }
 
 Legend.propTypes = {
-  view: PropTypes.string.isRequired,
   showFinaleIcon: PropTypes.bool.isRequired,
   showSpecialIcon: PropTypes.bool.isRequired,
   showCutoffUnmetIcon: PropTypes.bool.isRequired,
-  fullColorEvents: PropTypes.bool.isRequired,
   colorImpairedMode: PropTypes.bool.isRequired
 };
 

frontend/src/Calendar/Legend/LegendConnector.js

@@ -6,12 +6,10 @@ import Legend from './Legend';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.calendar.options,
-    (state) => state.calendar.view,
     createUISettingsSelector(),
-    (calendarOptions, view, uiSettings) => {
+    (calendarOptions, uiSettings) => {
       return {
         ...calendarOptions,
-        view,
         colorImpairedMode: uiSettings.enableColorImpairedMode
       };
     }

frontend/src/Calendar/Legend/LegendIconItem.js

@@ -8,7 +8,6 @@ function LegendIconItem(props) {
     name,
     icon,
     kind,
-    darken,
     tooltip
   } = props;
 
@@ -20,7 +19,6 @@ function LegendIconItem(props) {
       <Icon
         className={styles.icon}
         name={icon}
-        darken={darken}
         kind={kind}
       />
 
@@ -33,12 +31,7 @@ LegendIconItem.propTypes = {
   name: PropTypes.string.isRequired,
   icon: PropTypes.object.isRequired,
   kind: PropTypes.string.isRequired,
-  darken: PropTypes.bool.isRequired,
   tooltip: PropTypes.string.isRequired
 };
 
-LegendIconItem.defaultProps = {
-  darken: false
-};
-
 export default LegendIconItem;

frontend/src/Calendar/Legend/LegendItem.js

@@ -9,8 +9,6 @@ function LegendItem(props) {
     name,
     status,
     tooltip,
-    isAgendaView,
-    fullColorEvents,
     colorImpairedMode
   } = props;
 
@@ -19,8 +17,7 @@ function LegendItem(props) {
       className={classNames(
         styles.legendItem,
         styles[status],
-        colorImpairedMode && 'colorImpaired',
-        fullColorEvents && !isAgendaView && 'fullColor'
+        colorImpairedMode && 'colorImpaired'
       )}
       title={tooltip}
     >
@@ -33,8 +30,6 @@ LegendItem.propTypes = {
   name: PropTypes.string,
   status: PropTypes.string.isRequired,
   tooltip: PropTypes.string.isRequired,
-  isAgendaView: PropTypes.bool.isRequired,
-  fullColorEvents: PropTypes.bool.isRequired,
   colorImpairedMode: PropTypes.bool.isRequired
 };
 

frontend/src/Calendar/Options/CalendarOptionsModalContent.js

@@ -25,16 +25,14 @@ class CalendarOptionsModalContent extends Component {
       firstDayOfWeek,
       calendarWeekColumnHeader,
       timeFormat,
-      enableColorImpairedMode,
-      fullColorEvents
+      enableColorImpairedMode
     } = props;
 
     this.state = {
       firstDayOfWeek,
       calendarWeekColumnHeader,
       timeFormat,
-      enableColorImpairedMode,
-      fullColorEvents
+      enableColorImpairedMode
     };
   }
 
@@ -98,7 +96,6 @@ class CalendarOptionsModalContent extends Component {
       showFinaleIcon,
       showSpecialIcon,
       showCutoffUnmetIcon,
-      fullColorEvents,
       onModalClose
     } = this.props;
 
@@ -177,18 +174,6 @@ class CalendarOptionsModalContent extends Component {
                   onChange={this.onOptionInputChange}
                 />
               </FormGroup>
-
-              <FormGroup>
-                <FormLabel>Full Color Events</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="fullColorEvents"
-                  value={fullColorEvents}
-                  helpText="Altered style to color the entire event with the status color, instead of just the left edge. Does not apply to Agenda"
-                  onChange={this.onOptionInputChange}
-                />
-              </FormGroup>
             </Form>
           </FieldSet>
 
@@ -229,9 +214,7 @@ class CalendarOptionsModalContent extends Component {
                   value={timeFormat}
                   onChange={this.onGlobalInputChange}
                 />
-              </FormGroup>
-
-              <FormGroup>
+              </FormGroup><FormGroup>
                 <FormLabel>Enable Color-Impaired Mode</FormLabel>
 
                 <FormInputGroup
@@ -242,6 +225,7 @@ class CalendarOptionsModalContent extends Component {
                   onChange={this.onGlobalInputChange}
                 />
               </FormGroup>
+
             </Form>
           </FieldSet>
         </ModalBody>
@@ -266,7 +250,6 @@ CalendarOptionsModalContent.propTypes = {
   calendarWeekColumnHeader: PropTypes.string.isRequired,
   timeFormat: PropTypes.string.isRequired,
   enableColorImpairedMode: PropTypes.bool.isRequired,
-  fullColorEvents: PropTypes.bool.isRequired,
   dispatchSetCalendarOption: PropTypes.func.isRequired,
   dispatchSaveUISettings: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired

frontend/src/Components/FieldSet.css

@@ -16,9 +16,4 @@
   color: #3a3f51;
   font-size: 21px;
   line-height: inherit;
-
-  &.small {
-    color: #909293;
-    font-size: 18px;
-  }
 }

frontend/src/Components/FieldSet.js

@@ -1,7 +1,5 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import classNames from 'classnames';
-import { sizes } from 'Helpers/Props';
 import styles from './FieldSet.css';
 
 class FieldSet extends Component {
@@ -11,14 +9,13 @@ class FieldSet extends Component {
 
   render() {
     const {
-      size,
       legend,
       children
     } = this.props;
 
     return (
       <fieldset className={styles.fieldSet}>
-        <legend className={classNames(styles.legend, (size === sizes.SMALL) && styles.small)}>
+        <legend className={styles.legend}>
           {legend}
         </legend>
         {children}
@@ -29,13 +26,8 @@ class FieldSet extends Component {
 }
 
 FieldSet.propTypes = {
-  size: PropTypes.oneOf(sizes.all).isRequired,
   legend: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   children: PropTypes.node
 };
 
-FieldSet.defaultProps = {
-  size: sizes.MEDIUM
-};
-
 export default FieldSet;

frontend/src/Components/FileBrowser/FileBrowserModalContent.js

@@ -128,7 +128,7 @@ class FileBrowserModalContent extends Component {
                 className={styles.mappedDrivesWarning}
                 kind={kinds.WARNING}
               >
-                Mapped network drives are not available when running as a Windows Service, see the <Link className={styles.faqLink} to="https://wiki.servarr.com/Sonarr_FAQ#Why_cant_Sonarr_see_my_files_on_a_remote_server">FAQ</Link> for more information.
+                Mapped network drives are not available when running as a Windows Service, see the <Link className={styles.faqLink} to="https://github.com/Sonarr/Sonarr/wiki/FAQ">FAQ</Link> for more information.
               </Alert>
           }
 

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

@@ -12,7 +12,6 @@ import ProtocolFilterBuilderRowValue from './ProtocolFilterBuilderRowValue';
 import QualityFilterBuilderRowValueConnector from './QualityFilterBuilderRowValueConnector';
 import QualityProfileFilterBuilderRowValueConnector from './QualityProfileFilterBuilderRowValueConnector';
 import SeriesStatusFilterBuilderRowValue from './SeriesStatusFilterBuilderRowValue';
-import SeriesTypeFilterBuilderRowValue from './SeriesTypeFilterBuilderRowValue';
 import TagFilterBuilderRowValueConnector from './TagFilterBuilderRowValueConnector';
 import styles from './FilterBuilderRow.css';
 
@@ -76,9 +75,6 @@ function getRowValueConnector(selectedFilterBuilderProp) {
     case filterBuilderValueTypes.SERIES_STATUS:
       return SeriesStatusFilterBuilderRowValue;
 
-    case filterBuilderValueTypes.SERIES_TYPES:
-      return SeriesTypeFilterBuilderRowValue;
-
     case filterBuilderValueTypes.TAG:
       return TagFilterBuilderRowValueConnector;
 

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

@@ -16,7 +16,7 @@ function createTagListSelector() {
         (selectedFilterBuilderProp.type === filterBuilderTypes.NUMBER ||
         selectedFilterBuilderProp.type === filterBuilderTypes.STRING) &&
         filterType !== filterTypes.EQUAL &&
-        filterType !== filterTypes.NOT_EQUAL ||
+        filterType !== filterBuilderTypes.NOT_EQUAL ||
         !selectedFilterBuilderProp.optionsSelector
       ) {
         return [];

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

@@ -1,5 +1,5 @@
 .tag {
-  display: flex;
+  height: 21px;
 
   &.isLastTag {
     .or {
@@ -18,5 +18,4 @@
 .or {
   margin: 0 3px;
   color: $themeDarkColor;
-  line-height: 31px;
 }

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

@@ -6,7 +6,7 @@ import styles from './FilterBuilderRowValueTag.css';
 
 function FilterBuilderRowValueTag(props) {
   return (
-    <div
+    <span
       className={styles.tag}
     >
       <TagInputTag
@@ -15,13 +15,12 @@ function FilterBuilderRowValueTag(props) {
       />
 
       {
-        props.isLastTag ?
-          null :
-          <div className={styles.or}>
+        !props.isLastTag &&
+          <span className={styles.or}>
             or
-          </div>
+          </span>
       }
-    </div>
+    </span>
   );
 }
 

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

@@ -1,19 +0,0 @@
-import React from 'react';
-import FilterBuilderRowValue from './FilterBuilderRowValue';
-
-const seriesTypeList = [
-  { id: 'anime', name: 'Anime' },
-  { id: 'daily', name: 'Daily' },
-  { id: 'standard', name: 'Standard' }
-];
-
-function SeriesTypeFilterBuilderRowValue(props) {
-  return (
-    <FilterBuilderRowValue
-      tagList={seriesTypeList}
-      {...props}
-    />
-  );
-}
-
-export default SeriesTypeFilterBuilderRowValue;

frontend/src/Components/Form/EnhancedSelectInput.css

@@ -5,10 +5,6 @@
   align-items: center;
 }
 
-.editableContainer {
-  width: 100%;
-}
-
 .hasError {
   composes: hasError from '~Components/Form/Input.css';
 }
@@ -26,16 +22,6 @@
   margin-left: 12px;
 }
 
-.dropdownArrowContainerEditable {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding-right: 17px;
-  width: 30%;
-  height: 35px;
-  text-align: right;
-}
-
 .dropdownArrowContainerDisabled {
   composes: dropdownArrowContainer;
 
@@ -85,21 +71,3 @@
   display: inline-block;
   margin: 5px -5px 5px 0;
 }
-
-.mobileCloseButtonContainer {
-  display: flex;
-  justify-content: flex-end;
-  height: 40px;
-  border-bottom: 1px solid $borderColor;
-}
-
-.mobileCloseButton {
-  width: 40px;
-  height: 40px;
-  text-align: center;
-  line-height: 40px;
-
-  &:hover {
-    color: $modalCloseButtonHoverColor;
-  }
-}

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -15,7 +15,6 @@ import Measure from 'Components/Measure';
 import Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
 import Scroller from 'Components/Scroller/Scroller';
-import TextInput from './TextInput';
 import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
 import HintedSelectInputOption from './HintedSelectInputOption';
 import styles from './EnhancedSelectInput.css';
@@ -170,21 +169,11 @@ class EnhancedSelectInput extends Component {
     }
   }
 
-  onFocus = () => {
-    if (this.state.isOpen) {
-      this._removeListener();
-      this.setState({ isOpen: false });
-    }
-  }
-
   onBlur = () => {
-    if (!this.props.isEditable) {
-      // Calling setState without this check prevents the click event from being properly handled on Chrome (it is on firefox)
-      const origIndex = getSelectedIndex(this.props);
-
-      if (origIndex !== this.state.selectedIndex) {
-        this.setState({ selectedIndex: origIndex });
-      }
+    // Calling setState without this check prevents the click event from being properly handled on Chrome (it is on firefox)
+    const origIndex = getSelectedIndex(this.props);
+    if (origIndex !== this.state.selectedIndex) {
+      this.setState({ selectedIndex: origIndex });
     }
   }
 
@@ -308,19 +297,16 @@ class EnhancedSelectInput extends Component {
     const {
       className,
       disabledClassName,
-      name,
       value,
       values,
       isDisabled,
-      isEditable,
       isFetching,
       hasError,
       hasWarning,
       valueOptions,
       selectedValueOptions,
       selectedValueComponent: SelectedValueComponent,
-      optionComponent: OptionComponent,
-      onChange
+      optionComponent: OptionComponent
     } = this.props;
 
     const {
@@ -346,94 +332,52 @@ class EnhancedSelectInput extends Component {
                   whitelist={['width']}
                   onMeasure={this.onMeasure}
                 >
-                  {
-                    isEditable ?
-                      <div
-                        className={styles.editableContainer}
-                      >
-                        <TextInput
-                          className={className}
-                          name={name}
-                          value={value}
-                          readOnly={isDisabled}
-                          hasError={hasError}
-                          hasWarning={hasWarning}
-                          onFocus={this.onFocus}
-                          onBlur={this.onBlur}
-                          onChange={onChange}
-                        />
-                        <Link
-                          className={classNames(
-                            styles.dropdownArrowContainerEditable,
-                            isDisabled ?
-                              styles.dropdownArrowContainerDisabled :
-                              styles.dropdownArrowContainer)
-                          }
-                          onPress={this.onPress}
-                        >
-                          {
-                            isFetching &&
-                              <LoadingIndicator
-                                className={styles.loading}
-                                size={20}
-                              />
-                          }
+                  <Link
+                    className={classNames(
+                      className,
+                      hasError && styles.hasError,
+                      hasWarning && styles.hasWarning,
+                      isDisabled && disabledClassName
+                    )}
+                    isDisabled={isDisabled}
+                    onBlur={this.onBlur}
+                    onKeyDown={this.onKeyDown}
+                    onPress={this.onPress}
+                  >
+                    <SelectedValueComponent
+                      value={value}
+                      values={values}
+                      {...selectedValueOptions}
+                      {...selectedOption}
+                      isDisabled={isDisabled}
+                      isMultiSelect={isMultiSelect}
+                    >
+                      {selectedOption ? selectedOption.value : null}
+                    </SelectedValueComponent>
 
-                          {
-                            !isFetching &&
-                              <Icon
-                                name={icons.CARET_DOWN}
-                              />
-                          }
-                        </Link>
-                      </div> :
-                      <Link
-                        className={classNames(
-                          className,
-                          hasError && styles.hasError,
-                          hasWarning && styles.hasWarning,
-                          isDisabled && disabledClassName
-                        )}
-                        isDisabled={isDisabled}
-                        onBlur={this.onBlur}
-                        onKeyDown={this.onKeyDown}
-                        onPress={this.onPress}
-                      >
-                        <SelectedValueComponent
-                          value={value}
-                          values={values}
-                          {...selectedValueOptions}
-                          {...selectedOption}
-                          isDisabled={isDisabled}
-                          isMultiSelect={isMultiSelect}
-                        >
-                          {selectedOption ? selectedOption.value : null}
-                        </SelectedValueComponent>
+                    <div
+                      className={isDisabled ?
+                        styles.dropdownArrowContainerDisabled :
+                        styles.dropdownArrowContainer
+                      }
+                    >
 
-                        <div
-                          className={isDisabled ?
-                            styles.dropdownArrowContainerDisabled :
-                            styles.dropdownArrowContainer
-                          }
-                        >
+                      {
+                        isFetching &&
+                          <LoadingIndicator
+                            className={styles.loading}
+                            size={20}
+                          />
+                      }
 
-                          {
-                            isFetching &&
-                              <LoadingIndicator
-                                className={styles.loading}
-                                size={20}
-                              />
-                          }
-
-                          {
-                            !isFetching &&
-                              <Icon
-                                name={icons.CARET_DOWN}
-                              />
-                          }
-                        </div>
-                      </Link>
-                  }
+                      {
+                        !isFetching &&
+                          <Icon
+                            name={icons.CARET_DOWN}
+                          />
+                      }
+                    </div>
+                  </Link>
                 </Measure>
               </div>
             )}
@@ -518,18 +462,6 @@ class EnhancedSelectInput extends Component {
                 scrollDirection={scrollDirections.NONE}
               >
                 <Scroller className={styles.optionsModalScroller}>
-                  <div className={styles.mobileCloseButtonContainer}>
-                    <Link
-                      className={styles.mobileCloseButton}
-                      onPress={this.onOptionsModalClose}
-                    >
-                      <Icon
-                        name={icons.CLOSE}
-                        size={18}
-                      />
-                    </Link>
-                  </div>
-
                   {
                     values.map((v, index) => {
                       const hasParent = v.parentKey !== undefined;
@@ -570,7 +502,6 @@ EnhancedSelectInput.propTypes = {
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   isDisabled: PropTypes.bool.isRequired,
   isFetching: PropTypes.bool.isRequired,
-  isEditable: PropTypes.bool.isRequired,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
   valueOptions: PropTypes.object.isRequired,
@@ -586,7 +517,6 @@ EnhancedSelectInput.defaultProps = {
   disabledClassName: styles.isDisabled,
   isDisabled: false,
   isFetching: false,
-  isEditable: false,
   valueOptions: {},
   selectedValueOptions: {},
   selectedValueComponent: HintedSelectInputSelectedValue,

frontend/src/Components/Form/EnhancedSelectInputOption.css

@@ -54,8 +54,4 @@
   &:last-child {
     border: none;
   }
-
-  &:hover {
-    background-color: unset;
-  }
 }

frontend/src/Components/Form/EnhancedSelectInputOption.js

@@ -12,9 +12,7 @@ class EnhancedSelectInputOption extends Component {
   //
   // Listeners
 
-  onPress = (e) => {
-    e.preventDefault();
-
+  onPress = () => {
     const {
       id,
       onSelect

frontend/src/Components/Form/FormInputGroup.js

@@ -20,10 +20,8 @@ import SeriesTypeSelectInput from './SeriesTypeSelectInput';
 import EnhancedSelectInput from './EnhancedSelectInput';
 import EnhancedSelectInputConnector from './EnhancedSelectInputConnector';
 import TagInputConnector from './TagInputConnector';
-import TagSelectInputConnector from './TagSelectInputConnector';
 import TextTagInputConnector from './TextTagInputConnector';
 import TextInput from './TextInput';
-import UMaskInput from './UMaskInput';
 import FormInputHelpText from './FormInputHelpText';
 import styles from './FormInputGroup.css';
 
@@ -86,12 +84,6 @@ function getComponent(type) {
     case inputTypes.TEXT_TAG:
       return TextTagInputConnector;
 
-    case inputTypes.TAG_SELECT:
-      return TagSelectInputConnector;
-
-    case inputTypes.UMASK:
-      return UMaskInput;
-
     default:
       return TextInput;
   }
@@ -199,7 +191,7 @@ function FormInputGroup(props) {
       }
 
       {
-        (!checkInput || helpText) && helpTextWarning &&
+        !checkInput && helpTextWarning &&
           <FormInputHelpText
             text={helpTextWarning}
             isWarning={true}

frontend/src/Components/Form/PasswordInput.js

@@ -3,17 +3,10 @@ import React from 'react';
 import TextInput from './TextInput';
 import styles from './PasswordInput.css';
 
-// Prevent a user from copying (or cutting) the password from the input
-function onCopy(e) {
-  e.preventDefault();
-  e.nativeEvent.stopImmediatePropagation();
-}
-
 function PasswordInput(props) {
   return (
     <TextInput
       {...props}
-      onCopy={onCopy}
     />
   );
 }

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -29,8 +29,6 @@ function getType({ type, selectOptionsProviderAction }) {
       return inputTypes.SELECT;
     case 'tag':
       return inputTypes.TEXT_TAG;
-    case 'tagSelect':
-      return inputTypes.TAG_SELECT;
     case 'textbox':
       return inputTypes.TEXT;
     case 'oAuth':

frontend/src/Components/Form/RootFolderSelectInputConnector.js

@@ -10,16 +10,13 @@ const ADD_NEW_KEY = 'addNew';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.rootFolders,
-    (state, { value }) => value,
-    (state, { includeMissingValue }) => includeMissingValue,
     (state, { includeNoChange }) => includeNoChange,
-    (rootFolders, value, includeMissingValue, includeNoChange) => {
+    (rootFolders, includeNoChange) => {
       const values = rootFolders.items.map((rootFolder) => {
         return {
           key: rootFolder.path,
           value: rootFolder.path,
-          freeSpace: rootFolder.freeSpace,
-          isMissing: false
+          freeSpace: rootFolder.freeSpace
         };
       });
 
@@ -27,8 +24,7 @@ function createMapStateToProps() {
         values.unshift({
           key: 'noChange',
           value: 'No Change',
-          isDisabled: true,
-          isMissing: false
+          isDisabled: true
         });
       }
 
@@ -41,15 +37,6 @@ function createMapStateToProps() {
         });
       }
 
-      if (includeMissingValue && !values.find((v) => v.key === value)) {
-        values.push({
-          key: value,
-          value,
-          isMissing: true,
-          isDisabled: true
-        });
-      }
-
       values.push({
         key: ADD_NEW_KEY,
         value: 'Add a new path'

frontend/src/Components/Form/RootFolderSelectInputOption.css

@@ -27,9 +27,3 @@
   color: $darkGray;
   font-size: $smallFontSize;
 }
-
-.isMissing {
-  margin-left: 15px;
-  color: $dangerColor;
-  font-size: $smallFontSize;
-}

frontend/src/Components/Form/RootFolderSelectInputOption.js

@@ -10,7 +10,6 @@ function RootFolderSelectInputOption(props) {
     id,
     value,
     freeSpace,
-    isMissing,
     seriesFolder,
     isMobile,
     isWindows,
@@ -44,20 +43,11 @@ function RootFolderSelectInputOption(props) {
         </div>
 
         {
-          freeSpace == null ?
-            null :
+          freeSpace != null &&
             <div className={styles.freeSpace}>
               {formatBytes(freeSpace)} Free
             </div>
         }
-
-        {
-          isMissing ?
-            <div className={styles.isMissing}>
-              Missing
-            </div> :
-            null
-        }
       </div>
     </EnhancedSelectInputOption>
   );
@@ -67,7 +57,6 @@ RootFolderSelectInputOption.propTypes = {
   id: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   freeSpace: PropTypes.number,
-  isMissing: PropTypes.boolean,
   seriesFolder: PropTypes.string,
   isMobile: PropTypes.bool.isRequired,
   isWindows: PropTypes.bool

frontend/src/Components/Form/TagInput.js

@@ -75,12 +75,6 @@ class TagInput extends Component {
   //
   // Listeners
 
-  onTagEdit = ({ value, ...otherProps }) => {
-    this.setState({ value });
-
-    this.props.onTagDelete(otherProps);
-  }
-
   onInputContainerPress = () => {
     this._autosuggestRef.input.focus();
   }
@@ -194,7 +188,6 @@ class TagInput extends Component {
     const {
       tags,
       kind,
-      canEdit,
       tagComponent,
       onTagDelete
     } = this.props;
@@ -206,10 +199,8 @@ class TagInput extends Component {
         kind={kind}
         inputProps={inputProps}
         isFocused={this.state.isFocused}
-        canEdit={canEdit}
         tagComponent={tagComponent}
         onTagDelete={onTagDelete}
-        onTagEdit={this.onTagEdit}
         onInputContainerPress={this.onInputContainerPress}
       />
     );
@@ -271,7 +262,6 @@ TagInput.propTypes = {
   placeholder: PropTypes.string.isRequired,
   delimiters: PropTypes.arrayOf(PropTypes.string).isRequired,
   minQueryLength: PropTypes.number.isRequired,
-  canEdit: PropTypes.bool,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
   tagComponent: PropTypes.elementType.isRequired,
@@ -287,7 +277,6 @@ TagInput.defaultProps = {
   placeholder: '',
   delimiters: ['Tab', 'Enter', ' ', ','],
   minQueryLength: 1,
-  canEdit: false,
   tagComponent: TagInputTag
 };
 

frontend/src/Components/Form/TagInputInput.js

@@ -28,10 +28,8 @@ class TagInputInput extends Component {
       tags,
       inputProps,
       kind,
-      canEdit,
       tagComponent: TagComponent,
-      onTagDelete,
-      onTagEdit
+      onTagDelete
     } = this.props;
 
     return (
@@ -49,10 +47,8 @@ class TagInputInput extends Component {
                 index={index}
                 tag={tag}
                 kind={kind}
-                canEdit={canEdit}
                 isLastTag={index === tags.length - 1}
                 onDelete={onTagDelete}
-                onEdit={onTagEdit}
               />
             );
           })
@@ -71,10 +67,8 @@ TagInputInput.propTypes = {
   inputProps: PropTypes.object.isRequired,
   kind: PropTypes.oneOf(kinds.all).isRequired,
   isFocused: PropTypes.bool.isRequired,
-  canEdit: PropTypes.bool.isRequired,
   tagComponent: PropTypes.elementType.isRequired,
   onTagDelete: PropTypes.func.isRequired,
-  onTagEdit: PropTypes.func.isRequired,
   onInputContainerPress: PropTypes.func.isRequired
 };
 

frontend/src/Components/Form/TagInputTag.css

@@ -1,19 +1,5 @@
 .tag {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
+  composes: link from '~Components/Link/Link.css';
+
   height: 31px;
 }
-
-.editContainer {
-  display: inline-block;
-  margin-left: 4px;
-  padding-left: 2px;
-  border-left: 1px solid #eee;
-}
-
-.editButton {
-  composes: button from '~Components/Link/IconButton.css';
-
-  width: auto;
-}

frontend/src/Components/Form/TagInputTag.js

@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { icons, kinds } from 'Helpers/Props';
+import { kinds } from 'Helpers/Props';
 import tagShape from 'Helpers/Props/Shapes/tagShape';
 import Label from 'Components/Label';
-import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import styles from './TagInputTag.css';
 
@@ -25,59 +24,24 @@ class TagInputTag extends Component {
     });
   }
 
-  onEdit = () => {
-    const {
-      index,
-      tag,
-      onEdit
-    } = this.props;
-
-    onEdit({
-      index,
-      id: tag.id,
-      value: tag.name
-    });
-  }
-
   //
   // Render
 
   render() {
     const {
       tag,
-      kind,
-      canEdit
+      kind
     } = this.props;
     return (
-      <div
+      <Link
         className={styles.tag}
         tabIndex={-1}
+        onPress={this.onDelete}
       >
-        <Label
-          kind={kind}
-        >
-          <Link
-            tabIndex={-1}
-            onPress={this.onDelete}
-          >
-
-            {tag.name}
-          </Link>
-
-          {
-            canEdit ?
-              <div className={styles.editContainer}>
-                <IconButton
-                  className={styles.editButton}
-                  name={icons.EDIT}
-                  size={9}
-                  onPress={this.onEdit}
-                />
-              </div> :
-              null
-          }
+        <Label kind={kind}>
+          {tag.name}
         </Label>
-      </div>
+      </Link>
     );
   }
 }
@@ -86,9 +50,7 @@ TagInputTag.propTypes = {
   index: PropTypes.number.isRequired,
   tag: PropTypes.shape(tagShape),
   kind: PropTypes.oneOf(kinds.all).isRequired,
-  canEdit: PropTypes.bool.isRequired,
-  onDelete: PropTypes.func.isRequired,
-  onEdit: PropTypes.func.isRequired
+  onDelete: PropTypes.func.isRequired
 };
 
 export default TagInputTag;

frontend/src/Components/Form/TagSelectInputConnector.js

@@ -1,102 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import TagInput from './TagInput';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state, { value }) => value,
-    (state, { values }) => values,
-    (tags, tagList) => {
-      const sortedTags = _.sortBy(tagList, 'value');
-
-      return {
-        tags: tags.reduce((acc, tag) => {
-          const matchingTag = _.find(tagList, { key: tag });
-
-          if (matchingTag) {
-            acc.push({
-              id: tag,
-              name: matchingTag.value
-            });
-          }
-
-          return acc;
-        }, []),
-
-        tagList: sortedTags.map(({ key: id, value: name }) => {
-          return {
-            id,
-            name
-          };
-        }),
-
-        allTags: sortedTags
-      };
-    }
-  );
-}
-
-class TagSelectInputConnector extends Component {
-
-  //
-  // Listeners
-
-  onTagAdd = (tag) => {
-    const {
-      name,
-      value,
-      allTags
-    } = this.props;
-
-    const existingTag =_.some(allTags, { key: tag.id });
-
-    const newValue = value.slice();
-
-    if (existingTag) {
-      newValue.push(tag.id);
-    }
-
-    this.props.onChange({ name, value: newValue });
-  }
-
-  onTagDelete = ({ index }) => {
-    const {
-      name,
-      value
-    } = this.props;
-
-    const newValue = value.slice();
-    newValue.splice(index, 1);
-
-    this.props.onChange({
-      name,
-      value: newValue
-    });
-  }
-
-  //
-  // Render
-
-  render() {
-    return (
-      <TagInput
-        onTagAdd={this.onTagAdd}
-        onTagDelete={this.onTagDelete}
-        {...this.props}
-      />
-    );
-  }
-}
-
-TagSelectInputConnector.propTypes = {
-  name: PropTypes.string.isRequired,
-  value: PropTypes.arrayOf(PropTypes.number).isRequired,
-  values: PropTypes.arrayOf(PropTypes.object).isRequired,
-  allTags: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onChange: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps)(TagSelectInputConnector);

frontend/src/Components/Form/TextInput.js

@@ -130,8 +130,7 @@ class TextInput extends Component {
       step,
       min,
       max,
-      onBlur,
-      onCopy
+      onBlur
     } = this.props;
 
     return (
@@ -156,8 +155,6 @@ class TextInput extends Component {
         onChange={this.onChange}
         onFocus={this.onFocus}
         onBlur={onBlur}
-        onCopy={onCopy}
-        onCut={onCopy}
         onKeyUp={this.onKeyUp}
         onMouseDown={this.onMouseDown}
         onMouseUp={this.onMouseUp}
@@ -183,7 +180,6 @@ TextInput.propTypes = {
   onChange: PropTypes.func.isRequired,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
-  onCopy: PropTypes.func,
   onSelectionChange: PropTypes.func
 };
 

frontend/src/Components/Form/UMaskInput.css

@@ -1,53 +0,0 @@
-.inputWrapper {
-  display: flex;
-}
-
-.inputFolder {
-  composes: input from '~Components/Form/Input.css';
-
-  max-width: 100px;
-}
-
-.inputUnitWrapper {
-  position: relative;
-  width: 100%;
-}
-
-.inputUnit {
-  composes: inputUnit from '~Components/Form/FormInputGroup.css';
-
-  right: 40px;
-  font-family: $monoSpaceFontFamily;
-}
-
-.unit {
-  font-family: $monoSpaceFontFamily;
-}
-
-.details {
-  margin-top: 5px;
-  margin-left: 17px;
-  line-height: 20px;
-
-  > div {
-    display: flex;
-
-    label {
-      flex: 0 0 50px;
-    }
-
-    .value {
-      width: 50px;
-      text-align: right;
-    }
-
-    .unit {
-      width: 90px;
-      text-align: right;
-    }
-  }
-}
-
-.readOnly {
-  background-color: #eee;
-}

frontend/src/Components/Form/UMaskInput.js

@@ -1,133 +0,0 @@
-/* eslint-disable no-bitwise */
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import styles from './UMaskInput.css';
-import EnhancedSelectInput from './EnhancedSelectInput';
-
-const umaskOptions = [
-  {
-    key: '755',
-    value: '755 - Owner write, Everyone else read',
-    hint: 'drwxr-xr-x'
-  },
-  {
-    key: '775',
-    value: '775 - Owner & Group write, Other read',
-    hint: 'drwxrwxr-x'
-  },
-  {
-    key: '770',
-    value: '770 - Owner & Group write',
-    hint: 'drwxrwx---'
-  },
-  {
-    key: '750',
-    value: '750 - Owner write, Group read',
-    hint: 'drwxr-x---'
-  },
-  {
-    key: '777',
-    value: '777 - Everyone write',
-    hint: 'drwxrwxrwx'
-  }
-];
-
-function formatPermissions(permissions) {
-
-  const hasSticky = permissions & 0o1000;
-  const hasSetGID = permissions & 0o2000;
-  const hasSetUID = permissions & 0o4000;
-
-  let result = '';
-
-  for (let i = 0; i < 9; i++) {
-    const bit = (permissions & (1 << i)) !== 0;
-    let digit = bit ? 'xwr'[i % 3] : '-';
-    if (i === 6 && hasSetUID) {
-      digit = bit ? 's' : 'S';
-    } else if (i === 3 && hasSetGID) {
-      digit = bit ? 's' : 'S';
-    } else if (i === 0 && hasSticky) {
-      digit = bit ? 't' : 'T';
-    }
-    result = digit + result;
-  }
-
-  return result;
-}
-
-class UMaskInput extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      name,
-      value,
-      onChange
-    } = this.props;
-
-    const valueNum = parseInt(value, 8);
-    const umaskNum = 0o777 & ~valueNum;
-    const umask = umaskNum.toString(8).padStart(4, '0');
-    const folderNum = 0o777 & ~umaskNum;
-    const folder = folderNum.toString(8).padStart(3, '0');
-    const fileNum = 0o666 & ~umaskNum;
-    const file = fileNum.toString(8).padStart(3, '0');
-
-    const unit = formatPermissions(folderNum);
-
-    const values = umaskOptions.map((v) => {
-      return { ...v, hint: <span className={styles.unit}>{v.hint}</span> };
-    });
-
-    return (
-      <div>
-        <div className={styles.inputWrapper}>
-          <div className={styles.inputUnitWrapper}>
-            <EnhancedSelectInput
-              name={name}
-              value={value}
-              values={values}
-              isEditable={true}
-              onChange={onChange}
-            />
-
-            <div className={styles.inputUnit}>
-              d{unit}
-            </div>
-          </div>
-        </div>
-        <div className={styles.details}>
-          <div>
-            <label>UMask</label>
-            <div className={styles.value}>{umask}</div>
-          </div>
-          <div>
-            <label>Folder</label>
-            <div className={styles.value}>{folder}</div>
-            <div className={styles.unit}>d{formatPermissions(folderNum)}</div>
-          </div>
-          <div>
-            <label>File</label>
-            <div className={styles.value}>{file}</div>
-            <div className={styles.unit}>{formatPermissions(fileNum)}</div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-UMaskInput.propTypes = {
-  name: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  hasError: PropTypes.bool,
-  hasWarning: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func
-};
-
-export default UMaskInput;

frontend/src/Components/Icon.css

@@ -12,18 +12,10 @@
 
 .info {
   color: $infoColor;
-
-  &:global(.darken) {
-    color: color($infoColor shade(30%));
-  }
 }
 
 .pink {
   color: $pink;
-
-  &:global(.darken) {
-    color: color($pink shade(30%));
-  }
 }
 
 .success {

frontend/src/Components/Icon.js

@@ -18,7 +18,6 @@ class Icon extends PureComponent {
       kind,
       size,
       title,
-      darken,
       isSpinning,
       ...otherProps
     } = this.props;
@@ -27,8 +26,7 @@ class Icon extends PureComponent {
       <FontAwesomeIcon
         className={classNames(
           className,
-          styles[kind],
-          darken && 'darken'
+          styles[kind]
         )}
         icon={name}
         spin={isSpinning}
@@ -61,7 +59,6 @@ Icon.propTypes = {
   kind: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
   title: PropTypes.string,
-  darken: PropTypes.bool.isRequired,
   isSpinning: PropTypes.bool.isRequired,
   fixedWidth: PropTypes.bool.isRequired
 };
@@ -69,7 +66,6 @@ Icon.propTypes = {
 Icon.defaultProps = {
   kind: kinds.DEFAULT,
   size: 14,
-  darken: false,
   isSpinning: false,
   fixedWidth: false
 };

frontend/src/Components/Link/Link.js

@@ -43,11 +43,14 @@ class Link extends Component {
         el = 'a';
         linkProps.href = to;
         linkProps.target = target || '_blank';
-        linkProps.rel = 'noreferrer';
       } else if (noRouter) {
         el = 'a';
         linkProps.href = to;
         linkProps.target = target || '_self';
+      } else if (to.startsWith(`${window.Sonarr.urlBase}/`)) {
+        el = RouterLink;
+        linkProps.to = to;
+        linkProps.target = target;
       } else {
         el = RouterLink;
         linkProps.to = `${window.Sonarr.urlBase}/${to.replace(/^\//, '')}`;

frontend/src/Components/Loading/LoadingMessage.css

@@ -1,5 +1,5 @@
 .loadingMessage {
-  margin: 10px 10px 0;
+  margin: 50px 10px 0;
   text-align: center;
   font-weight: 300;
   font-size: 36px;

frontend/src/Components/Page/Header/PageHeader.js

@@ -53,7 +53,7 @@ class PageHeader extends Component {
         <div className={styles.logoContainer}>
           <Link
             className={styles.logoLink}
-            to={'/'}
+            to={`${window.Sonarr.urlBase}/`}
           >
             <img
               className={styles.logo}

frontend/src/Components/Page/LoadingPage.css

@@ -1,12 +1,3 @@
 .page {
   composes: page from '~./Page.css';
 }
-
-.logoFull {
-  margin-top: 50px;
-  margin-right: auto;
-  margin-left: auto;
-  width: 48px;
-  height: 48px;
-  opacity: 0.65;
-}

frontend/src/Components/Page/LoadingPage.js

@@ -3,15 +3,9 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import LoadingMessage from 'Components/Loading/LoadingMessage';
 import styles from './LoadingPage.css';
 
-const sonarrLogo = 'data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIxNi45IiB2aWV3Qm94PSIwIDAgMjE2LjcgMjE2LjkiIHdpZHRoPSIyMTYuNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMTYuNyAxMDguNDVjMCAyOS44MzMtMTAuNTMzIDU1LjQtMzEuNiA3Ni43LS43LjgzMy0xLjQ4MyAxLjYtMi4zNSAyLjMtMy40NjYgMy40LTcuMTMzIDYuNDg0LTExIDkuMjUtMTguMjY3IDEzLjQ2Ny0zOS4zNjcgMjAuMi02My4zIDIwLjItMjMuOTY3IDAtNDUuMDMzLTYuNzMzLTYzLjItMjAuMi00LjgtMy40LTkuMy03LjI1LTEzLjUtMTEuNTUtMTYuMzY3LTE2LjI2Ni0yNi40MTctMzUuMTY3LTMwLjE1LTU2LjctLjczMy00LjItMS4yMTctOC40NjctMS40NS0xMi44LS4xLTIuNC0uMTUtNC44LS4xNS03LjIgMC0yLjUzMy4wNS00Ljk1LjE1LTcuMjUgMC0uMjMzLjA2Ni0uNDY3LjItLjcgMS41NjctMjYuNiAxMi4wMzMtNDkuNTgzIDMxLjQtNjguOTVDNTMuMDUgMTAuNTE3IDc4LjYxNyAwIDEwOC40NSAwYzI5LjkzMyAwIDU1LjQ4NCAxMC41MTcgNzYuNjUgMzEuNTUgMjEuMDY3IDIxLjQzMyAzMS42IDQ3LjA2NyAzMS42IDc2Ljl6IiBmaWxsPSIjRUVFIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KICA8cGF0aCBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOTQuNjUgNDIuNWwtMjIuNCAyMi40QzE1OS4xNTIgNzcuOTk4IDE1OCA4OS40IDE1OCAxMDkuNWMwIDE3LjkzNCAyLjg1MiAzNC4zNTIgMTYuMiA0Ny43IDkuNzQ2IDkuNzQ2IDE5IDE4Ljk1IDE5IDE4Ljk1LTIuNSAzLjA2Ny01LjIgNi4wNjctOC4xIDktLjcuODMzLTEuNDgzIDEuNi0yLjM1IDIuMy0yLjUzMyAyLjUtNS4xNjcgNC44MTctNy45IDYuOTVsLTE3LjU1LTE3LjU1Yy0xNS41OTgtMTUuNi0yNy45OTYtMTcuMS00OC42LTE3LjEtMTkuNzcgMC0zMy4yMjMgMS44MjItNDcuNyAxNi4zLTguNjQ3IDguNjQ3LTE4LjU1IDE4LjYtMTguNTUgMTguNi0zLjc2Ny0yLjg2Ny03LjMzMy02LjAzNC0xMC43LTkuNS0yLjgtMi44LTUuNDE3LTUuNjY3LTcuODUtOC42IDAgMCA5Ljc5OC05Ljg0OCAxOS4xNS0xOS4yIDEzLjg1Mi0xMy44NTMgMTYuMS0yOS45MTYgMTYuMS00Ny44NSAwLTE3LjUtMi44NzQtMzMuODIzLTE1LjYtNDYuNTUtOC44MzUtOC44MzYtMjEuMDUtMjEtMjEuMDUtMjEgMi44MzMtMy42IDUuOTE3LTcuMDY3IDkuMjUtMTAuNCAyLjkzNC0yLjg2NyA1LjkzNC01LjU1IDktOC4wNUw2MS4xIDQzLjg1Qzc0LjEwMiA1Ni44NTIgOTAuNzY3IDYwLjIgMTA4LjcgNjAuMmMxOC40NjcgMCAzNS4wNzctMy41NzcgNDguNi0xNy4xIDguMzItOC4zMiAxOS4zLTE5LjI1IDE5LjMtMTkuMjUgMi45IDIuMzY3IDUuNzMzIDQuOTMzIDguNSA3LjcgMy40NjcgMy41MzMgNi42NSA3LjE4MyA5LjU1IDEwLjk1eiIgZmlsbD0iIzNBM0Y1MSIgZmlsbC1ydWxlPSJldmVub2RkIi8+CiAgPGcgY2xpcC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGQ9Ik03OC43IDExNGMtLjItMS4xNjctLjMzMi0yLjM1LS40LTMuNTUtLjAzMi0uNjY3LS4wNS0xLjMzMy0uMDUtMiAwLS43LjAxOC0xLjM2Ny4wNS0yIDAtLjA2Ny4wMTgtLjEzMy4wNS0uMi40MzUtNy4zNjcgMy4zMzQtMTMuNzMzIDguNy0xOS4xIDUuOS01LjgzMyAxMi45ODQtOC43NSAyMS4yNS04Ljc1IDguMyAwIDE1LjM4NCAyLjkxNyAyMS4yNSA4Ljc1IDUuODM0IDUuOTM0IDguNzUgMTMuMDMzIDguNzUgMjEuMyAwIDguMjY3LTIuOTE2IDE1LjM1LTguNzUgMjEuMjUtLjIuMjMzLS40MTYuNDUtLjY1LjY1LS45NjYuOTMzLTEuOTgyIDEuNzgzLTMuMDUgMi41NS01LjA2NSAzLjczMy0xMC45MTYgNS42LTE3LjU1IDUuNnMtMTIuNDY2LTEuODY2LTE3LjUtNS42Yy0xLjMzMi0uOTM0LTIuNTgyLTItMy43NS0zLjItNC41MzItNC41LTcuMzE2LTkuNzM0LTguMzUtMTUuN3oiIGZpbGw9IiMwQ0YiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgogICAgPHBhdGggZD0iTTE1Ny44IDU5Ljc1bC0xNSAxNC42NU0zMC43ODUgMzIuNTI2TDcxLjY1IDczLjI1bTg0LjYgODQuMjVsMjcuODA4IDI4Ljc4bTEuODU1LTE1My44OTRMMTU3LjggNTkuNzVtLTEyNS40NSAxMjZsMjcuMzUtMjcuNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMENGIiBzdHJva2UtbWl0ZXJsaW1pdD0iMSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cGF0aCBkPSJNMTU3LjggNTkuNzVsLTE2Ljk1IDE3LjJNNTguOTcgNjAuNjA0bDE3LjIgMTcuMTVNNTkuNjIzIDE1OC40M2wxNi43NS0xNy40bTYxLjkyOC0xLjM5NmwxOC4wMjggMTcuOTQ1IiBmaWxsPSJub25lIiBzdHJva2U9IiMwQ0YiIHN0cm9rZS1taXRlcmxpbWl0PSIxIiBzdHJva2Utd2lkdGg9IjciLz4KICA8L2c+Cjwvc3ZnPg==';
-
 function LoadingPage() {
   return (
     <div className={styles.page}>
-      <img
-        className={styles.logoFull}
-        src={sonarrLogo}
-      />
       <LoadingMessage />
       <LoadingIndicator />
     </div>

frontend/src/Components/Page/Sidebar/PageSidebar.js

@@ -29,7 +29,7 @@ const links = [
         to: '/add/new'
       },
       {
-        title: 'Library Import',
+        title: 'Import',
         to: '/add/import'
       },
       {

frontend/src/Components/Table/TableOptions/TableOptionsModal.js

@@ -1,8 +1,8 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { DndProvider } from 'react-dnd-multi-backend';
-import HTML5toTouch from 'react-dnd-multi-backend/dist/esm/HTML5toTouch';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { inputTypes } from 'Helpers/Props';
 import Button from 'Components/Link/Button';
 import Form from 'Components/Form/Form';
@@ -127,7 +127,7 @@ class TableOptionsModal extends Component {
     const isDraggingDown = isDragging && dropIndex > dragIndex;
 
     return (
-      <DndProvider options={HTML5toTouch}>
+      <DndProvider backend={HTML5Backend}>
         <Modal
           isOpen={isOpen}
           onModalClose={onModalClose}
@@ -191,7 +191,7 @@ class TableOptionsModal extends Component {
                                       <TableOptionsColumnDragSource
                                         key={name}
                                         name={name}
-                                        label={columnLabel || label}
+                                        label={label || columnLabel}
                                         isVisible={isVisible}
                                         isModifiable={true}
                                         index={index}
@@ -209,7 +209,7 @@ class TableOptionsModal extends Component {
                                     <TableOptionsColumn
                                       key={name}
                                       name={name}
-                                      label={columnLabel || label}
+                                      label={label || columnLabel}
                                       isVisible={isVisible}
                                       index={index}
                                       isModifiable={false}

frontend/src/Components/Table/VirtualTable.js

@@ -7,6 +7,8 @@ import { WindowScroller, Grid } from 'react-virtualized';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import styles from './VirtualTable.css';
 
+const ROW_HEIGHT = 38;
+
 function overscanIndicesGetter(options) {
   const {
     cellCount,
@@ -45,7 +47,8 @@ class VirtualTable extends Component {
 
   componentDidUpdate(prevProps, prevState) {
     const {
-      items
+      items,
+      scrollIndex
     } = this.props;
 
     const {
@@ -56,6 +59,13 @@ class VirtualTable extends Component {
       // recomputeGridSize also forces Grid to discard its cache of rendered cells
       this._grid.recomputeGridSize();
     }
+
+    if (scrollIndex != null && scrollIndex !== prevProps.scrollIndex) {
+      this._grid.scrollToCell({
+        rowIndex: scrollIndex,
+        columnIndex: 0
+      });
+    }
   }
 
   //
@@ -86,8 +96,6 @@ class VirtualTable extends Component {
       header,
       headerHeight,
       rowRenderer,
-      rowHeight,
-      scrollIndex,
       ...otherProps
     } = this.props;
 
@@ -117,11 +125,6 @@ class VirtualTable extends Component {
           if (!height) {
             return null;
           }
-
-          const finalScrollTop = scrollIndex == null ?
-            scrollTop :
-            scrollIndex * rowHeight;
-
           return (
             <Measure
               whitelist={['width']}
@@ -141,11 +144,11 @@ class VirtualTable extends Component {
                     width={width}
                     height={height}
                     headerHeight={height - headerHeight}
-                    rowHeight={rowHeight}
+                    rowHeight={ROW_HEIGHT}
                     rowCount={items.length}
                     columnCount={1}
                     columnWidth={width}
-                    scrollTop={finalScrollTop}
+                    scrollTop={scrollTop}
                     onScroll={onChildScroll}
                     overscanRowCount={2}
                     cellRenderer={rowRenderer}

frontend/src/Components/Tooltip/Tooltip.css

@@ -14,7 +14,6 @@
   &.inverse {
     background-color: $themeDarkColor;
     box-shadow: 0 5px 10px $popoverShadowInverseColor;
-    color: $white;
   }
 }
 

frontend/src/Components/Tooltip/Tooltip.js

@@ -22,8 +22,6 @@ function getMaxWidth() {
   } else {
     maxWidth = 450;
   }
-
-  return maxWidth;
 }
 
 class Tooltip extends Component {

frontend/src/Content/robots.txt

@@ -1,2 +0,0 @@
-User-agent: *
-Disallow: /