Fixed: (RadarrImport) Treat redirects as HTTP errors

This reverts commit 1bf3302ec2.

.editorconfig

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

.gitattributes

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

azure-pipelines.yml

@@ -9,7 +9,7 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '4.5.1'
+  majorVersion: '4.6.0'
   minorVersion: $[counter('minorVersion', 2000)]
   radarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
@@ -211,8 +211,8 @@ stages:
         displayName: Fetch Frontend
       - bash: |
           ./build.sh --packages --installer
-          cp setup/output/Radarr.*win-x64.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x64-installer.exe
-          cp setup/output/Radarr.*win-x86.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x86-installer.exe
+          cp distribution/windows/setup/output/Radarr.*win-x64.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x64-installer.exe
+          cp distribution/windows/setup/output/Radarr.*win-x86.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x86-installer.exe
         displayName: Create Installers
       - publish: $(Build.ArtifactStagingDirectory)
         artifact: 'WindowsInstaller'

build.sh

@@ -21,7 +21,7 @@ UpdateVersionNumber()
         echo "Updating Version Info"
         sed -i'' -e "s/<AssemblyVersion>[0-9.*]\+<\/AssemblyVersion>/<AssemblyVersion>$RADARRVERSION<\/AssemblyVersion>/g" src/Directory.Build.props
         sed -i'' -e "s/<AssemblyConfiguration>[\$()A-Za-z-]\+<\/AssemblyConfiguration>/<AssemblyConfiguration>${BUILD_SOURCEBRANCHNAME}<\/AssemblyConfiguration>/g" src/Directory.Build.props
-        sed -i'' -e "s/<string>10.0.0.0<\/string>/<string>$RADARRVERSION<\/string>/g" macOS/Radarr.app/Contents/Info.plist
+        sed -i'' -e "s/<string>10.0.0.0<\/string>/<string>$RADARRVERSION<\/string>/g" distribution/osx/Radarr.app/Contents/Info.plist
     fi
 }
 
@@ -184,7 +184,7 @@ PackageMacOSApp()
 
     rm -rf $folder
     mkdir -p $folder
-    cp -r macOS/Radarr.app $folder
+    cp -r distribution/osx/Radarr.app $folder
     mkdir -p $folder/Radarr.app/Contents/MacOS
 
     echo "Copying Binaries"
@@ -246,7 +246,7 @@ BuildInstaller()
     local framework="$1"
     local runtime="$2"
     
-    ./_inno/ISCC.exe setup/radarr.iss "//DFramework=$framework" "//DRuntime=$runtime"
+    ./_inno/ISCC.exe distribution/windows/setup/radarr.iss "//DFramework=$framework" "//DRuntime=$runtime"
 }
 
 InstallInno()

debian/changelog

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

debian/compat

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

debian/control

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

debian/copyright

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

debian/install

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

debian/rules

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

distribution/windows/setup/radarr.iss

@@ -52,8 +52,8 @@ Name: "none"; Description: "Do not start automatically"; GroupDescription: "Star
 Name: "{app}"; Permissions: users-modify
 
 [Files]
-Source: "..\_artifacts\{#Runtime}\{#Framework}\Radarr\Radarr.exe"; DestDir: "{app}\bin"; Flags: ignoreversion
-Source: "..\_artifacts\{#Runtime}\{#Framework}\Radarr\*"; Excludes: "Radarr.Update"; DestDir: "{app}\bin"; Flags: ignoreversion recursesubdirs createallsubdirs
+Source: "..\..\..\_artifacts\{#Runtime}\{#Framework}\Radarr\Radarr.exe"; DestDir: "{app}\bin"; Flags: ignoreversion
+Source: "..\..\..\_artifacts\{#Runtime}\{#Framework}\Radarr\*"; Excludes: "Radarr.Update"; DestDir: "{app}\bin"; Flags: ignoreversion recursesubdirs createallsubdirs
 ; NOTE: Don't use "Flags: ignoreversion" on any shared system files
 
 [Icons]

frontend/src/App/State/SettingsAppState.ts

@@ -1,14 +1,33 @@
 import AppSectionState, {
   AppSectionDeleteState,
+  AppSectionSaveState,
   AppSectionSchemaState,
 } from 'App/State/AppSectionState';
 import Language from 'Language/Language';
 import DownloadClient from 'typings/DownloadClient';
+import ImportList from 'typings/ImportList';
+import Indexer from 'typings/Indexer';
+import Notification from 'typings/Notification';
 import QualityProfile from 'typings/QualityProfile';
 import { UiSettings } from 'typings/UiSettings';
 
 export interface DownloadClientAppState
   extends AppSectionState<DownloadClient>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface ImportListAppState
+  extends AppSectionState<ImportList>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface IndexerAppState
+  extends AppSectionState<Indexer>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface NotificationAppState
+  extends AppSectionState<Notification>,
     AppSectionDeleteState {}
 
 export interface QualityProfilesAppState
@@ -20,6 +39,9 @@ export type UiSettingsAppState = AppSectionState<UiSettings>;
 
 interface SettingsAppState {
   downloadClients: DownloadClientAppState;
+  importLists: ImportListAppState;
+  indexers: IndexerAppState;
+  notifications: NotificationAppState;
   language: LanguageSettingsAppState;
   uiSettings: UiSettingsAppState;
   qualityProfiles: QualityProfilesAppState;

frontend/src/Components/Form/FormInputGroup.js

@@ -265,6 +265,8 @@ FormInputGroup.propTypes = {
   values: PropTypes.arrayOf(PropTypes.any),
   type: PropTypes.string.isRequired,
   kind: PropTypes.oneOf(kinds.all),
+  min: PropTypes.number,
+  max: PropTypes.number,
   unit: PropTypes.string,
   buttons: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   helpText: PropTypes.string,

frontend/src/Components/Form/NumberInput.js

@@ -10,7 +10,7 @@ function parseValue(props, value) {
   } = props;
 
   if (value == null || value === '') {
-    return min;
+    return null;
   }
 
   let newValue = isFloat ? parseFloat(value) : parseInt(value);

frontend/src/Components/Loading/LoadingMessage.js

@@ -13,7 +13,7 @@ const messages = [
   'Loading humorous message... Please Wait',
   'I could\'ve been faster in Python',
   'Don\'t forget to rewind your movies',
-  'Congratulations! you are the 1000th visitor.',
+  'Congratulations! You are the 1000th visitor.',
   'HELP! I\'m being held hostage and forced to write these stupid lines!',
   'RE-calibrating the internet...',
   'I\'ll be here all week',

frontend/src/Components/ProgressBar.css

@@ -45,6 +45,10 @@
   cursor: default;
 }
 
+.default {
+  background-color: var(--darkGray);
+}
+
 .primary {
   background-color: var(--primaryColor);
 }

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

@@ -5,6 +5,7 @@ interface CssExports {
   'backTextContainer': string;
   'container': string;
   'danger': string;
+  'default': string;
   'frontText': string;
   'frontTextContainer': string;
   'info': string;

frontend/src/Components/Table/VirtualTableRowButton.css

@@ -0,0 +1,4 @@
+.row {
+  composes: link from '~Components/Link/Link.css';
+  composes: row from '~./VirtualTableRow.css';
+}

frontend/src/Components/Table/VirtualTableRowButton.css.d.ts

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

frontend/src/Components/Table/VirtualTableRowButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Link from 'Components/Link/Link';
+import VirtualTableRow from './VirtualTableRow';
+import styles from './VirtualTableRowButton.css';
+
+function VirtualTableRowButton(props) {
+  return (
+    <Link
+      className={styles.row}
+      component={VirtualTableRow}
+      {...props}
+    />
+  );
+}
+
+export default VirtualTableRowButton;

frontend/src/Components/TagList.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { kinds } from 'Helpers/Props';
@@ -6,16 +5,15 @@ import Label from './Label';
 import styles from './TagList.css';
 
 function TagList({ tags, tagList }) {
+  const sortedTags = tags
+    .map((tagId) => tagList.find((tag) => tag.id === tagId))
+    .filter((tag) => !!tag)
+    .sort((a, b) => a.label.localeCompare(b.label));
+
   return (
     <div className={styles.tags}>
       {
-        tags.map((t) => {
-          const tag = _.find(tagList, { id: t });
-
-          if (!tag) {
-            return null;
-          }
-
+        sortedTags.map((tag) => {
           return (
             <Label
               key={tag.id}

frontend/src/Content/Images/Icons/manifest.json

@@ -2,16 +2,17 @@
     "name": "Radarr",
     "icons": [
         {
-            "src": "/Content/Images/Icons/android-chrome-192x192.png",
+            "src": "android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/Content/Images/Icons/android-chrome-512x512.png",
+            "src": "android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }
     ],
+    "start_url": "../../../../",
     "theme_color": "#3a3f51",
     "background_color": "#3a3f51",
     "display": "standalone"

frontend/src/Helpers/Props/icons.js

@@ -71,6 +71,7 @@ import {
   faLanguage as fasLanguage,
   faLaptop as fasLaptop,
   faLevelUpAlt as fasLevelUpAlt,
+  faListCheck as fasListCheck,
   faMedkit as fasMedkit,
   faMinus as fasMinus,
   faPause as fasPause,
@@ -172,6 +173,7 @@ export const INFO = fasInfoCircle;
 export const INTERACTIVE = fasUser;
 export const KEYBOARD = farKeyboard;
 export const LOGOUT = fasSignOutAlt;
+export const MANAGE = fasListCheck;
 export const MEDIA_INFO = farFileInvoice;
 export const MISSING = fasExclamationTriangle;
 export const MONITORED = fasBookmark;

frontend/src/InteractiveImport/Movie/SelectMovieModalContent.tsx

@@ -15,13 +15,40 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import Scroller from 'Components/Scroller/Scroller';
+import Column from 'Components/Table/Column';
+import VirtualTableRowButton from 'Components/Table/VirtualTableRowButton';
 import { scrollDirections } from 'Helpers/Props';
 import Movie from 'Movie/Movie';
 import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
 import dimensions from 'Styles/Variables/dimensions';
+import translate from 'Utilities/String/translate';
+import SelectMovieModalTableHeader from './SelectMovieModalTableHeader';
 import SelectMovieRow from './SelectMovieRow';
 import styles from './SelectMovieModalContent.css';
 
+const columns = [
+  {
+    name: 'title',
+    label: translate('Title'),
+    isVisible: true,
+  },
+  {
+    name: 'year',
+    label: translate('Year'),
+    isVisible: true,
+  },
+  {
+    name: 'imdbId',
+    label: translate('ImdbId'),
+    isVisible: true,
+  },
+  {
+    name: 'tmdbId',
+    label: translate('TmdbId'),
+    isVisible: true,
+  },
+];
+
 const bodyPadding = parseInt(dimensions.pageContentBodyPadding);
 
 interface SelectMovieModalContentProps {
@@ -32,6 +59,7 @@ interface SelectMovieModalContentProps {
 
 interface RowItemData {
   items: Movie[];
+  columns: Column[];
   onMovieSelect(movieId: number): void;
 }
 
@@ -40,7 +68,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
   style,
   data,
 }) => {
-  const { items, onMovieSelect } = data;
+  const { items, columns, onMovieSelect } = data;
 
   if (index >= items.length) {
     return null;
@@ -49,20 +77,24 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
   const movie = items[index];
 
   return (
-    <div
+    <VirtualTableRowButton
       style={{
         display: 'flex',
         justifyContent: 'space-between',
         ...style,
       }}
+      onPress={() => onMovieSelect(movie.id)}
     >
       <SelectMovieRow
         id={movie.id}
         title={movie.title}
+        tmdbId={movie.tmdbId}
+        imdbId={movie.imdbId}
         year={movie.year}
+        columns={columns}
         onMovieSelect={onMovieSelect}
       />
-    </div>
+    </VirtualTableRowButton>
   );
 };
 
@@ -161,6 +193,7 @@ function SelectMovieModalContent(props: SelectMovieModalContentProps) {
           autoFocus={false}
           ref={scrollerRef}
         >
+          <SelectMovieModalTableHeader columns={columns} />
           <List<RowItemData>
             ref={listRef}
             style={{
@@ -174,6 +207,7 @@ function SelectMovieModalContent(props: SelectMovieModalContentProps) {
             itemSize={38}
             itemData={{
               items,
+              columns,
               onMovieSelect: onMovieSelectWrapper,
             }}
           >

frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.css

@@ -0,0 +1,18 @@
+.title {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 4 0 140px;
+}
+
+.year {
+  composes: headerCell  from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 70px;
+}
+
+.imdbId,
+.tmdbId {
+  composes: headerCell  from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 110px;
+}

frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.css.d.ts

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

frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Column from 'Components/Table/Column';
+import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
+import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
+import styles from './SelectMovieModalTableHeader.css';
+
+interface SelectMovieModalTableHeaderProps {
+  columns: Column[];
+}
+
+function SelectMovieModalTableHeader(props: SelectMovieModalTableHeaderProps) {
+  const { columns } = props;
+
+  return (
+    <VirtualTableHeader>
+      {columns.map((column) => {
+        const { name, label, isVisible } = column;
+
+        if (!isVisible) {
+          return null;
+        }
+
+        return (
+          <VirtualTableHeaderCell
+            key={name}
+            className={
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              styles[name]
+            }
+            name={name}
+          >
+            {label}
+          </VirtualTableHeaderCell>
+        );
+      })}
+    </VirtualTableHeader>
+  );
+}
+
+export default SelectMovieModalTableHeader;

frontend/src/InteractiveImport/Movie/SelectMovieRow.css

@@ -1,5 +1,25 @@
-.movie {
-  padding: 8px;
-  width: 100%;
-  border-bottom: 1px solid var(--borderColor);
+.cell {
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
+
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  composes: cell;
+
+  flex: 4 0 140px;
+}
+
+.year {
+  composes: cell;
+
+  flex: 0 0 70px;
+}
+
+.tmdbId,
+.imdbId {
+  composes: cell;
+
+  flex: 0 0 110px;
 }

frontend/src/InteractiveImport/Movie/SelectMovieRow.css.d.ts

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

frontend/src/InteractiveImport/Movie/SelectMovieRow.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import Link from 'Components/Link/Link';
+import Label from 'Components/Label';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import styles from './SelectMovieRow.css';
 
 class SelectMovieRow extends Component {
@@ -17,13 +18,23 @@ class SelectMovieRow extends Component {
 
   render() {
     return (
-      <Link
-        className={styles.movie}
-        component="div"
-        onPress={this.onPress}
-      >
-        {this.props.title} ({this.props.year})
-      </Link>
+      <>
+        <VirtualTableRowCell className={styles.title}>
+          {this.props.title}
+        </VirtualTableRowCell>
+
+        <VirtualTableRowCell className={styles.year}>
+          {this.props.year}
+        </VirtualTableRowCell>
+
+        <VirtualTableRowCell className={styles.imdbId}>
+          <Label>{this.props.imdbId}</Label>
+        </VirtualTableRowCell>
+
+        <VirtualTableRowCell className={styles.tmdbId}>
+          <Label>{this.props.tmdbId}</Label>
+        </VirtualTableRowCell>
+      </>
     );
   }
 }
@@ -31,6 +42,8 @@ class SelectMovieRow extends Component {
 SelectMovieRow.propTypes = {
   id: PropTypes.number.isRequired,
   title: PropTypes.string.isRequired,
+  tmdbId: PropTypes.number.isRequired,
+  imdbId: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,
   onMovieSelect: PropTypes.func.isRequired
 };

frontend/src/Movie/Details/MovieTagsConnector.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createMovieSelector from 'Store/Selectors/createMovieSelector';
@@ -10,15 +9,11 @@ function createMapStateToProps() {
     createMovieSelector(),
     createTagsSelector(),
     (movie, tagList) => {
-      const tags = _.reduce(movie.tags, (acc, tag) => {
-        const matchingTag = _.find(tagList, { id: tag });
-
-        if (matchingTag) {
-          acc.push(matchingTag.label);
-        }
-
-        return acc;
-      }, []);
+      const tags = movie.tags
+        .map((tagId) => tagList.find((tag) => tag.id === tagId))
+        .filter((tag) => !!tag)
+        .map((tag) => tag.label)
+        .sort((a, b) => a.localeCompare(b));
 
       return {
         tags

frontend/src/Movie/Index/MovieIndex.tsx

@@ -25,7 +25,6 @@ import SortDirection from 'Helpers/Props/SortDirection';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import NoMovie from 'Movie/NoMovie';
 import { executeCommand } from 'Store/Actions/commandActions';
-import { fetchMovies } from 'Store/Actions/movieActions';
 import {
   setMovieFilter,
   setMovieSort,
@@ -105,7 +104,6 @@ const MovieIndex = withScrollPosition((props: MovieIndexProps) => {
   const [isSelectMode, setIsSelectMode] = useState(false);
 
   useEffect(() => {
-    dispatch(fetchMovies());
     dispatch(fetchQueueDetails({ all: true }));
   }, [dispatch]);
 

frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx

@@ -16,6 +16,7 @@ import MovieIndexPosterSelect from 'Movie/Index/Select/MovieIndexPosterSelect';
 import MoviePoster from 'Movie/MoviePoster';
 import { executeCommand } from 'Store/Actions/commandActions';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import translate from 'Utilities/String/translate';
 import createMovieIndexItemSelector from '../createMovieIndexItemSelector';
 import MovieIndexPosterInfo from './MovieIndexPosterInfo';
@@ -41,13 +42,13 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     showTitle,
     showMonitored,
     showQualityProfile,
+    showCinemaRelease,
     showReleaseDate,
     showSearchAction,
   } = useSelector(selectPosterOptions);
 
-  const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
-    createUISettingsSelector()
-  );
+  const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } =
+    useSelector(createUISettingsSelector());
 
   const {
     title,
@@ -59,12 +60,19 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     youTubeTrailerId,
     hasFile,
     isAvailable,
+    studio,
+    added,
+    year,
     inCinemas,
     physicalRelease,
     digitalRelease,
     path,
     movieFile,
+    ratings,
+    sizeOnDisk,
     certification,
+    originalTitle,
+    originalLanguage,
   } = movie;
 
   const dispatch = useDispatch();
@@ -122,9 +130,23 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     height: `${posterHeight}px`,
   };
 
+  let releaseDate = '';
+  let releaseDateType = '';
+  if (physicalRelease && digitalRelease) {
+    releaseDate =
+      physicalRelease < digitalRelease ? physicalRelease : digitalRelease;
+    releaseDateType = physicalRelease < digitalRelease ? 'Released' : 'Digital';
+  } else if (physicalRelease && !digitalRelease) {
+    releaseDate = physicalRelease;
+    releaseDateType = 'Released';
+  } else if (digitalRelease && !physicalRelease) {
+    releaseDate = digitalRelease;
+    releaseDateType = 'Digital';
+  }
+
   return (
     <div className={styles.content}>
-      <div className={styles.posterContainer}>
+      <div className={styles.posterContainer} title={title}>
         {isSelectMode ? <MovieIndexPosterSelect movieId={movieId} /> : null}
 
         <Label className={styles.controls}>
@@ -195,31 +217,68 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         bottomRadius={false}
       />
 
-      {showTitle ? <div className={styles.title}>{title}</div> : null}
+      {showTitle ? (
+        <div className={styles.title} title={title}>
+          {title}
+        </div>
+      ) : null}
 
       {showMonitored ? (
         <div className={styles.title}>
-          {monitored ? translate('monitored') : translate('unmonitored')}
+          {monitored ? translate('Monitored') : translate('Unmonitored')}
         </div>
       ) : null}
 
       {showQualityProfile ? (
-        <div className={styles.title}>{qualityProfile.name}</div>
+        <div className={styles.title} title={translate('QualityProfile')}>
+          {qualityProfile.name}
+        </div>
+      ) : null}
+
+      {showCinemaRelease && inCinemas ? (
+        <div className={styles.title} title={translate('InCinemas')}>
+          <Icon name={icons.IN_CINEMAS} />{' '}
+          {getRelativeDate(inCinemas, shortDateFormat, showRelativeDates, {
+            timeFormat,
+            timeForToday: false,
+          })}
+        </div>
+      ) : null}
+
+      {showReleaseDate && releaseDate ? (
+        <div className={styles.title}>
+          <Icon
+            name={releaseDateType === 'Digital' ? icons.MOVIE_FILE : icons.DISC}
+          />{' '}
+          {getRelativeDate(releaseDate, shortDateFormat, showRelativeDates, {
+            timeFormat,
+            timeForToday: false,
+          })}
+        </div>
       ) : null}
 
       <MovieIndexPosterInfo
+        studio={studio}
         qualityProfile={qualityProfile}
+        added={added}
+        year={year}
         showQualityProfile={showQualityProfile}
+        showCinemaRelease={showCinemaRelease}
         showReleaseDate={showReleaseDate}
         showRelativeDates={showRelativeDates}
         shortDateFormat={shortDateFormat}
+        longDateFormat={longDateFormat}
         timeFormat={timeFormat}
         inCinemas={inCinemas}
         physicalRelease={physicalRelease}
         digitalRelease={digitalRelease}
+        ratings={ratings}
+        sizeOnDisk={sizeOnDisk}
         sortKey={sortKey}
         path={path}
         certification={certification}
+        originalTitle={originalTitle}
+        originalLanguage={originalLanguage}
       />
 
       <EditMovieModalConnector

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css

@@ -3,3 +3,9 @@
   text-align: center;
   font-size: $smallFontSize;
 }
+
+.title {
+  @add-mixin truncate;
+
+  composes: info;
+}

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css.d.ts

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'info': string;
+  'title': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import Icon from 'Components/Icon';
+import ImdbRating from 'Components/ImdbRating';
+import TmdbRating from 'Components/TmdbRating';
 import { icons } from 'Helpers/Props';
+import { Language, Ratings } from 'Movie/Movie';
+import QualityProfile from 'typings/QualityProfile';
+import formatDateTime from 'Utilities/Date/formatDateTime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
@@ -9,19 +14,24 @@ import styles from './MovieIndexPosterInfo.css';
 interface MovieIndexPosterInfoProps {
   studio?: string;
   showQualityProfile: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  qualityProfile: any;
+  qualityProfile: QualityProfile;
   added?: string;
+  year: number;
   inCinemas?: string;
   digitalRelease?: string;
   physicalRelease?: string;
   path: string;
+  ratings: Ratings;
   certification: string;
+  originalTitle: string;
+  originalLanguage: Language;
   sizeOnDisk?: number;
   sortKey: string;
   showRelativeDates: boolean;
+  showCinemaRelease: boolean;
   showReleaseDate: boolean;
   shortDateFormat: string;
+  longDateFormat: string;
   timeFormat: string;
 }
 
@@ -31,25 +41,39 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     showQualityProfile,
     qualityProfile,
     added,
+    year,
     inCinemas,
     digitalRelease,
     physicalRelease,
     path,
+    ratings,
     certification,
+    originalTitle,
+    originalLanguage,
     sizeOnDisk,
     sortKey,
     showRelativeDates,
+    showCinemaRelease,
     showReleaseDate,
     shortDateFormat,
+    longDateFormat,
     timeFormat,
   } = props;
 
   if (sortKey === 'studio' && studio) {
-    return <div className={styles.info}>{studio}</div>;
+    return (
+      <div className={styles.info} title={translate('Studio')}>
+        {studio}
+      </div>
+    );
   }
 
   if (sortKey === 'qualityProfileId' && !showQualityProfile) {
-    return <div className={styles.info}>{qualityProfile.name}</div>;
+    return (
+      <div className={styles.info} title={translate('QualityProfile')}>
+        {qualityProfile.name}
+      </div>
+    );
   }
 
   if (sortKey === 'added' && added) {
@@ -64,13 +88,24 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
 
     return (
-      <div className={styles.info}>
+      <div
+        className={styles.info}
+        title={formatDateTime(added, longDateFormat, timeFormat)}
+      >
         {translate('Added')}: {addedDate}
       </div>
     );
   }
 
-  if (sortKey === 'inCinemas' && inCinemas && !showReleaseDate) {
+  if (sortKey === 'year' && year) {
+    return (
+      <div className={styles.info} title={translate('Year')}>
+        {year}
+      </div>
+    );
+  }
+
+  if (sortKey === 'inCinemas' && inCinemas && !showCinemaRelease) {
     const inCinemasDate = getRelativeDate(
       inCinemas,
       shortDateFormat,
@@ -82,7 +117,7 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
 
     return (
-      <div className={styles.info}>
+      <div className={styles.info} title={translate('InCinemas')}>
         <Icon name={icons.IN_CINEMAS} /> {inCinemasDate}
       </div>
     );
@@ -124,18 +159,58 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
   }
 
+  if (sortKey === 'imdbRating' && !!ratings.imdb) {
+    return (
+      <div className={styles.info}>
+        <ImdbRating ratings={ratings} iconSize={12} />
+      </div>
+    );
+  }
+
+  if (sortKey === 'tmdbRating' && !!ratings.tmdb) {
+    return (
+      <div className={styles.info}>
+        <TmdbRating ratings={ratings} iconSize={12} />
+      </div>
+    );
+  }
+
   if (sortKey === 'path') {
-    return <div className={styles.info}>{path}</div>;
+    return (
+      <div className={styles.info} title={translate('Path')}>
+        {path}
+      </div>
+    );
   }
 
   if (sortKey === 'sizeOnDisk') {
-    return <div className={styles.info}>{formatBytes(sizeOnDisk)}</div>;
+    return (
+      <div className={styles.info} title={translate('SizeOnDisk')}>
+        {formatBytes(sizeOnDisk)}
+      </div>
+    );
   }
 
   if (sortKey === 'certification') {
     return <div className={styles.info}>{certification}</div>;
   }
 
+  if (sortKey === 'originalTitle' && originalTitle) {
+    return (
+      <div className={styles.title} title={originalTitle}>
+        {originalTitle}
+      </div>
+    );
+  }
+
+  if (sortKey === 'originalLanguage' && originalLanguage) {
+    return (
+      <div className={styles.info} title={translate('OriginalLanguage')}>
+        {originalLanguage.name}
+      </div>
+    );
+  }
+
   return null;
 }
 

frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx

@@ -143,6 +143,7 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
       showTitle,
       showMonitored,
       showQualityProfile,
+      showCinemaRelease,
       showReleaseDate,
     } = posterOptions;
 
@@ -167,6 +168,10 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
       heights.push(19);
     }
 
+    if (showCinemaRelease) {
+      heights.push(19);
+    }
+
     if (showReleaseDate) {
       heights.push(19);
     }
@@ -174,8 +179,13 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
     switch (sortKey) {
       case 'studio':
       case 'added':
+      case 'year':
+      case 'imdbRating':
+      case 'tmdbRating':
       case 'path':
       case 'sizeOnDisk':
+      case 'originalTitle':
+      case 'originalLanguage':
         heights.push(19);
         break;
       case 'qualityProfileId':
@@ -183,6 +193,17 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
           heights.push(19);
         }
         break;
+      case 'inCinemas':
+        if (!showCinemaRelease) {
+          heights.push(19);
+        }
+        break;
+      case 'digitalRelease':
+      case 'physicalRelease':
+        if (!showReleaseDate) {
+          heights.push(19);
+        }
+        break;
       default:
       // No need to add a height of 0
     }

frontend/src/Movie/Movie.ts

@@ -16,6 +16,13 @@ export interface Collection {
   title: string;
 }
 
+export interface Ratings {
+  imdb: object;
+  tmdb: object;
+  metacritic: object;
+  rottenTomatoes: object;
+}
+
 interface Movie extends ModelBase {
   tmdbId: number;
   imdbId: string;
@@ -41,7 +48,7 @@ interface Movie extends ModelBase {
   path: string;
   sizeOnDisk: number;
   genres: string[];
-  ratings: object;
+  ratings: Ratings;
   certification: string;
   tags: number[];
   images: Image[];

frontend/src/Settings/AdvancedSettingsButton.js

@@ -10,7 +10,8 @@ import styles from './AdvancedSettingsButton.css';
 function AdvancedSettingsButton(props) {
   const {
     advancedSettings,
-    onAdvancedSettingsPress
+    onAdvancedSettingsPress,
+    showLabel
   } = props;
 
   return (
@@ -43,18 +44,27 @@ function AdvancedSettingsButton(props) {
         />
       </span>
 
-      <div className={styles.labelContainer}>
-        <div className={styles.label}>
-          {advancedSettings ? translate('HideAdvanced') : translate('ShowAdvanced')}
-        </div>
-      </div>
+      {
+        showLabel ?
+          <div className={styles.labelContainer}>
+            <div className={styles.label}>
+              {advancedSettings ? translate('HideAdvanced') : translate('ShowAdvanced')}
+            </div>
+          </div> :
+          null
+      }
     </Link>
   );
 }
 
 AdvancedSettingsButton.propTypes = {
   advancedSettings: PropTypes.bool.isRequired,
-  onAdvancedSettingsPress: PropTypes.func.isRequired
+  onAdvancedSettingsPress: PropTypes.func.isRequired,
+  showLabel: PropTypes.bool.isRequired
+};
+
+AdvancedSettingsButton.defaultProps = {
+  showLabel: true
 };
 
 export default AdvancedSettingsButton;

frontend/src/Settings/DownloadClients/DownloadClientSettings.js

@@ -8,6 +8,7 @@ import { icons } from 'Helpers/Props';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import translate from 'Utilities/String/translate';
 import DownloadClientsConnector from './DownloadClients/DownloadClientsConnector';
+import ManageDownloadClientsModal from './DownloadClients/Manage/ManageDownloadClientsModal';
 import DownloadClientOptionsConnector from './Options/DownloadClientOptionsConnector';
 import RemotePathMappingsConnector from './RemotePathMappings/RemotePathMappingsConnector';
 
@@ -23,7 +24,8 @@ class DownloadClientSettings extends Component {
 
     this.state = {
       isSaving: false,
-      hasPendingChanges: false
+      hasPendingChanges: false,
+      isManageDownloadClientsOpen: false
     };
   }
 
@@ -38,6 +40,14 @@ class DownloadClientSettings extends Component {
     this.setState(payload);
   };
 
+  onManageDownloadClientsPress = () => {
+    this.setState({ isManageDownloadClientsOpen: true });
+  };
+
+  onManageDownloadClientsModalClose = () => {
+    this.setState({ isManageDownloadClientsOpen: false });
+  };
+
   onSavePress = () => {
     if (this._saveCallback) {
       this._saveCallback();
@@ -55,7 +65,8 @@ class DownloadClientSettings extends Component {
 
     const {
       isSaving,
-      hasPendingChanges
+      hasPendingChanges,
+      isManageDownloadClientsOpen
     } = this.state;
 
     return (
@@ -73,6 +84,12 @@ class DownloadClientSettings extends Component {
                 isSpinning={isTestingAll}
                 onPress={dispatchTestAllDownloadClients}
               />
+
+              <PageToolbarButton
+                label="Manage Clients"
+                iconName={icons.MANAGE}
+                onPress={this.onManageDownloadClientsPress}
+              />
             </Fragment>
           }
           onSavePress={this.onSavePress}
@@ -87,6 +104,11 @@ class DownloadClientSettings extends Component {
           />
 
           <RemotePathMappingsConnector />
+
+          <ManageDownloadClientsModal
+            isOpen={isManageDownloadClientsOpen}
+            onModalClose={this.onManageDownloadClientsModalClose}
+          />
         </PageContentBody>
       </PageContent>
     );

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Edit/ManageDownloadClientsEditModal.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageDownloadClientsEditModalContent from './ManageDownloadClientsEditModalContent';
+
+interface ManageDownloadClientsEditModalProps {
+  isOpen: boolean;
+  downloadClientIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+function ManageDownloadClientsEditModal(
+  props: ManageDownloadClientsEditModalProps
+) {
+  const { isOpen, downloadClientIds, onSavePress, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageDownloadClientsEditModalContent
+        downloadClientIds={downloadClientIds}
+        onSavePress={onSavePress}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default ManageDownloadClientsEditModal;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Edit/ManageDownloadClientsEditModalContent.css

@@ -0,0 +1,16 @@
+.modalFooter {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  justify-content: space-between;
+}
+
+.selected {
+  font-weight: bold;
+}
+
+@media only screen and (max-width: $breakpointExtraSmall) {
+  .modalFooter {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Edit/ManageDownloadClientsEditModalContent.css.d.ts

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

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Edit/ManageDownloadClientsEditModalContent.tsx

@@ -0,0 +1,180 @@
+import React, { useCallback, useState } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './ManageDownloadClientsEditModalContent.css';
+
+interface SavePayload {
+  enable?: boolean;
+  removeCompletedDownloads?: boolean;
+  removeFailedDownloads?: boolean;
+  priority?: number;
+}
+
+interface ManageDownloadClientsEditModalContentProps {
+  downloadClientIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+const NO_CHANGE = 'noChange';
+
+const enableOptions = [
+  { key: NO_CHANGE, value: 'No Change', disabled: true },
+  { key: 'enabled', value: 'Enabled' },
+  { key: 'disabled', value: 'Disabled' },
+];
+
+function ManageDownloadClientsEditModalContent(
+  props: ManageDownloadClientsEditModalContentProps
+) {
+  const { downloadClientIds, onSavePress, onModalClose } = props;
+
+  const [enable, setEnable] = useState(NO_CHANGE);
+  const [removeCompletedDownloads, setRemoveCompletedDownloads] =
+    useState(NO_CHANGE);
+  const [removeFailedDownloads, setRemoveFailedDownloads] = useState(NO_CHANGE);
+  const [priority, setPriority] = useState<null | string | number>(null);
+
+  const save = useCallback(() => {
+    let hasChanges = false;
+    const payload: SavePayload = {};
+
+    if (enable !== NO_CHANGE) {
+      hasChanges = true;
+      payload.enable = enable === 'enabled';
+    }
+
+    if (removeCompletedDownloads !== NO_CHANGE) {
+      hasChanges = true;
+      payload.removeCompletedDownloads = removeCompletedDownloads === 'enabled';
+    }
+
+    if (removeFailedDownloads !== NO_CHANGE) {
+      hasChanges = true;
+      payload.removeFailedDownloads = removeFailedDownloads === 'enabled';
+    }
+
+    if (priority !== null) {
+      hasChanges = true;
+      payload.priority = priority as number;
+    }
+
+    if (hasChanges) {
+      onSavePress(payload);
+    }
+
+    onModalClose();
+  }, [
+    enable,
+    priority,
+    removeCompletedDownloads,
+    removeFailedDownloads,
+    onSavePress,
+    onModalClose,
+  ]);
+
+  const onInputChange = useCallback(
+    ({ name, value }: { name: string; value: string }) => {
+      switch (name) {
+        case 'enable':
+          setEnable(value);
+          break;
+        case 'priority':
+          setPriority(value);
+          break;
+        case 'removeCompletedDownloads':
+          setRemoveCompletedDownloads(value);
+          break;
+        case 'removeFailedDownloads':
+          setRemoveFailedDownloads(value);
+          break;
+        default:
+          console.warn('EditDownloadClientsModalContent Unknown Input');
+      }
+    },
+    []
+  );
+
+  const selectedCount = downloadClientIds.length;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('EditSelectedDownloadClients')}</ModalHeader>
+
+      <ModalBody>
+        <FormGroup>
+          <FormLabel>{translate('Enabled')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="enable"
+            value={enable}
+            values={enableOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('Priority')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.NUMBER}
+            name="priority"
+            value={priority}
+            min={1}
+            max={50}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('RemoveCompletedDownloads')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="removeCompletedDownloads"
+            value={removeCompletedDownloads}
+            values={enableOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('RemoveFailedDownloads')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="removeFailedDownloads"
+            value={removeFailedDownloads}
+            values={enableOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+      </ModalBody>
+
+      <ModalFooter className={styles.modalFooter}>
+        <div className={styles.selected}>
+          {translate('{count} download clients selected', {
+            count: selectedCount,
+          })}
+        </div>
+
+        <div>
+          <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+          <Button onPress={save}>{translate('Apply Changes')}</Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default ManageDownloadClientsEditModalContent;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModal.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageDownloadClientsModalContent from './ManageDownloadClientsModalContent';
+
+interface ManageDownloadClientsModalProps {
+  isOpen: boolean;
+  onModalClose(): void;
+}
+
+function ManageDownloadClientsModal(props: ManageDownloadClientsModalProps) {
+  const { isOpen, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageDownloadClientsModalContent onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default ManageDownloadClientsModal;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.css

@@ -0,0 +1,16 @@
+.leftButtons,
+.rightButtons {
+  display: flex;
+  flex: 1 0 50%;
+  flex-wrap: wrap;
+}
+
+.rightButtons {
+  justify-content: flex-end;
+}
+
+.deleteButton {
+  composes: button from '~Components/Link/Button.css';
+
+  margin-right: 10px;
+}

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.css.d.ts

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

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx

@@ -0,0 +1,241 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { DownloadClientAppState } from 'App/State/SettingsAppState';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import useSelectState from 'Helpers/Hooks/useSelectState';
+import { kinds } from 'Helpers/Props';
+import {
+  bulkDeleteDownloadClients,
+  bulkEditDownloadClients,
+} from 'Store/Actions/settingsActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import { SelectStateInputProps } from 'typings/props';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import ManageDownloadClientsEditModal from './Edit/ManageDownloadClientsEditModal';
+import ManageDownloadClientsModalRow from './ManageDownloadClientsModalRow';
+import styles from './ManageDownloadClientsModalContent.css';
+
+// TODO: This feels janky to do, but not sure of a better way currently
+type OnSelectedChangeCallback = React.ComponentProps<
+  typeof ManageDownloadClientsModalRow
+>['onSelectedChange'];
+
+const COLUMNS = [
+  {
+    name: 'name',
+    label: 'Name',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'implementation',
+    label: 'Implementation',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'enable',
+    label: 'Enabled',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'priority',
+    label: 'Priority',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'removeCompletedDownloads',
+    label: 'Remove Completed',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'removeFailedDownloads',
+    label: 'Remove Failed',
+    isSortable: true,
+    isVisible: true,
+  },
+];
+
+interface ManageDownloadClientsModalContentProps {
+  onModalClose(): void;
+}
+
+function ManageDownloadClientsModalContent(
+  props: ManageDownloadClientsModalContentProps
+) {
+  const { onModalClose } = props;
+
+  const {
+    isFetching,
+    isPopulated,
+    isDeleting,
+    isSaving,
+    error,
+    items,
+  }: DownloadClientAppState = useSelector(
+    createClientSideCollectionSelector('settings.downloadClients')
+  );
+  const dispatch = useDispatch();
+
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+
+  const [selectState, setSelectState] = useSelectState();
+
+  const { allSelected, allUnselected, selectedState } = selectState;
+
+  const selectedIds: number[] = useMemo(() => {
+    return getSelectedIds(selectedState);
+  }, [selectedState]);
+
+  const selectedCount = selectedIds.length;
+
+  const onDeletePress = useCallback(() => {
+    setIsDeleteModalOpen(true);
+  }, [setIsDeleteModalOpen]);
+
+  const onDeleteModalClose = useCallback(() => {
+    setIsDeleteModalOpen(false);
+  }, [setIsDeleteModalOpen]);
+
+  const onEditPress = useCallback(() => {
+    setIsEditModalOpen(true);
+  }, [setIsEditModalOpen]);
+
+  const onEditModalClose = useCallback(() => {
+    setIsEditModalOpen(false);
+  }, [setIsEditModalOpen]);
+
+  const onConfirmDelete = useCallback(() => {
+    dispatch(bulkDeleteDownloadClients({ ids: selectedIds }));
+    setIsDeleteModalOpen(false);
+  }, [selectedIds, dispatch]);
+
+  const onSavePress = useCallback(
+    (payload: object) => {
+      setIsEditModalOpen(false);
+
+      dispatch(
+        bulkEditDownloadClients({
+          ids: selectedIds,
+          ...payload,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
+  const onSelectAllChange = useCallback(
+    ({ value }: SelectStateInputProps) => {
+      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
+    },
+    [items, setSelectState]
+  );
+
+  const onSelectedChange = useCallback<OnSelectedChangeCallback>(
+    ({ id, value, shiftKey = false }) => {
+      setSelectState({
+        type: 'toggleSelected',
+        items,
+        id,
+        isSelected: value,
+        shiftKey,
+      });
+    },
+    [items, setSelectState]
+  );
+
+  const errorMessage = getErrorMessage(error, 'Unable to load import lists.');
+  const anySelected = selectedCount > 0;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>Manage Import Lists</ModalHeader>
+      <ModalBody>
+        {isFetching ? <LoadingIndicator /> : null}
+
+        {error ? <div>{errorMessage}</div> : null}
+
+        {isPopulated && !!items.length && !isFetching && !isFetching ? (
+          <Table
+            columns={COLUMNS}
+            horizontalScroll={true}
+            selectAll={true}
+            allSelected={allSelected}
+            allUnselected={allUnselected}
+            onSelectAllChange={onSelectAllChange}
+          >
+            <TableBody>
+              {items.map((item) => {
+                return (
+                  <ManageDownloadClientsModalRow
+                    key={item.id}
+                    isSelected={selectedState[item.id]}
+                    {...item}
+                    columns={COLUMNS}
+                    onSelectedChange={onSelectedChange}
+                  />
+                );
+              })}
+            </TableBody>
+          </Table>
+        ) : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <div className={styles.leftButtons}>
+          <SpinnerButton
+            kind={kinds.DANGER}
+            isSpinning={isDeleting}
+            isDisabled={!anySelected}
+            onPress={onDeletePress}
+          >
+            Delete
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving}
+            isDisabled={!anySelected}
+            onPress={onEditPress}
+          >
+            Edit
+          </SpinnerButton>
+        </div>
+
+        <Button onPress={onModalClose}>Close</Button>
+      </ModalFooter>
+
+      <ManageDownloadClientsEditModal
+        isOpen={isEditModalOpen}
+        onModalClose={onEditModalClose}
+        onSavePress={onSavePress}
+        downloadClientIds={selectedIds}
+      />
+
+      <ConfirmModal
+        isOpen={isDeleteModalOpen}
+        kind={kinds.DANGER}
+        title="Delete Download Clients(s)"
+        message={`Are you sure you want to delete ${selectedIds.length} download clients(s)?`}
+        confirmLabel="Delete"
+        onConfirm={onConfirmDelete}
+        onCancel={onDeleteModalClose}
+      />
+    </ModalContent>
+  );
+}
+
+export default ManageDownloadClientsModalContent;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.css

@@ -0,0 +1,11 @@
+.name,
+.enable,
+.tags,
+.priority,
+.removeCompletedDownloads,
+.removeFailedDownloads,
+.implementation {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  word-break: break-all;
+}

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.css.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'enable': string;
+  'implementation': string;
+  'name': string;
+  'priority': string;
+  'removeCompletedDownloads': string;
+  'removeFailedDownloads': string;
+  'tags': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback } from 'react';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
+import Column from 'Components/Table/Column';
+import TableRow from 'Components/Table/TableRow';
+import { SelectStateInputProps } from 'typings/props';
+import styles from './ManageDownloadClientsModalRow.css';
+
+interface ManageDownloadClientsModalRowProps {
+  id: number;
+  name: string;
+  enable: boolean;
+  priority: number;
+  removeCompletedDownloads: boolean;
+  removeFailedDownloads: boolean;
+  implementation: string;
+  columns: Column[];
+  isSelected?: boolean;
+  onSelectedChange(result: SelectStateInputProps): void;
+}
+
+function ManageDownloadClientsModalRow(
+  props: ManageDownloadClientsModalRowProps
+) {
+  const {
+    id,
+    isSelected,
+    name,
+    enable,
+    priority,
+    removeCompletedDownloads,
+    removeFailedDownloads,
+    implementation,
+    onSelectedChange,
+  } = props;
+
+  const onSelectedChangeWrapper = useCallback(
+    (result: SelectStateInputProps) => {
+      onSelectedChange({
+        ...result,
+      });
+    },
+    [onSelectedChange]
+  );
+
+  return (
+    <TableRow>
+      <TableSelectCell
+        id={id}
+        isSelected={isSelected}
+        onSelectedChange={onSelectedChangeWrapper}
+      />
+
+      <TableRowCell className={styles.name}>{name}</TableRowCell>
+
+      <TableRowCell className={styles.implementation}>
+        {implementation}
+      </TableRowCell>
+
+      <TableRowCell className={styles.enable}>
+        {enable ? 'Yes' : 'No'}
+      </TableRowCell>
+
+      <TableRowCell className={styles.priority}>{priority}</TableRowCell>
+
+      <TableRowCell className={styles.removeCompletedDownloads}>
+        {removeCompletedDownloads ? 'Yes' : 'No'}
+      </TableRowCell>
+
+      <TableRowCell className={styles.removeFailedDownloads}>
+        {removeFailedDownloads ? 'Yes' : 'No'}
+      </TableRowCell>
+    </TableRow>
+  );
+}
+
+export default ManageDownloadClientsModalRow;

frontend/src/Settings/ImportLists/ImportListSettings.js

@@ -9,6 +9,7 @@ import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import translate from 'Utilities/String/translate';
 import ImportListExclusionsConnector from './ImportListExclusions/ImportListExclusionsConnector';
 import ImportListsConnector from './ImportLists/ImportListsConnector';
+import ManageImportListsModal from './ImportLists/Manage/ManageImportListsModal';
 import ImportListOptionsConnector from './Options/ImportListOptionsConnector';
 
 class ImportListSettings extends Component {
@@ -23,7 +24,8 @@ class ImportListSettings extends Component {
 
     this.state = {
       isSaving: false,
-      hasPendingChanges: false
+      hasPendingChanges: false,
+      isManageImportListsOpen: false
     };
   }
 
@@ -38,6 +40,14 @@ class ImportListSettings extends Component {
     this.setState(payload);
   };
 
+  onManageImportListsPress = () => {
+    this.setState({ isManageImportListsOpen: true });
+  };
+
+  onManageImportListsModalClose = () => {
+    this.setState({ isManageImportListsOpen: false });
+  };
+
   onSavePress = () => {
     if (this._saveCallback) {
       this._saveCallback();
@@ -55,7 +65,8 @@ class ImportListSettings extends Component {
 
     const {
       isSaving,
-      hasPendingChanges
+      hasPendingChanges,
+      isManageImportListsOpen
     } = this.state;
 
     return (
@@ -73,6 +84,12 @@ class ImportListSettings extends Component {
                 isSpinning={isTestingAll}
                 onPress={dispatchTestAllImportList}
               />
+
+              <PageToolbarButton
+                label="Manage Lists"
+                iconName={icons.MANAGE}
+                onPress={this.onManageImportListsPress}
+              />
             </Fragment>
           }
           onSavePress={this.onSavePress}
@@ -88,6 +105,11 @@ class ImportListSettings extends Component {
 
           <ImportListExclusionsConnector />
 
+          <ManageImportListsModal
+            isOpen={isManageImportListsOpen}
+            onModalClose={this.onManageImportListsModalClose}
+          />
+
         </PageContentBody>
       </PageContent>
     );

frontend/src/Settings/ImportLists/ImportLists/Manage/Edit/ManageImportListsEditModal.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageImportListsEditModalContent from './ManageImportListsEditModalContent';
+
+interface ManageImportListsEditModalProps {
+  isOpen: boolean;
+  importListIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+function ManageImportListsEditModal(props: ManageImportListsEditModalProps) {
+  const { isOpen, importListIds, onSavePress, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageImportListsEditModalContent
+        importListIds={importListIds}
+        onSavePress={onSavePress}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default ManageImportListsEditModal;

frontend/src/Settings/ImportLists/ImportLists/Manage/Edit/ManageImportListsEditModalContent.css

@@ -0,0 +1,16 @@
+.modalFooter {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  justify-content: space-between;
+}
+
+.selected {
+  font-weight: bold;
+}
+
+@media only screen and (max-width: $breakpointExtraSmall) {
+  .modalFooter {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

frontend/src/Settings/ImportLists/ImportLists/Manage/Edit/ManageImportListsEditModalContent.css.d.ts

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

frontend/src/Settings/ImportLists/ImportLists/Manage/Edit/ManageImportListsEditModalContent.tsx

@@ -0,0 +1,152 @@
+import React, { useCallback, useState } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './ManageImportListsEditModalContent.css';
+
+interface SavePayload {
+  enableAuto?: boolean;
+  qualityProfileId?: number;
+  rootFolderPath?: string;
+}
+
+interface ManageImportListsEditModalContentProps {
+  importListIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+const NO_CHANGE = 'noChange';
+
+const autoAddOptions = [
+  { key: NO_CHANGE, value: 'No Change', disabled: true },
+  { key: 'enabled', value: 'Enabled' },
+  { key: 'disabled', value: 'Disabled' },
+];
+
+function ManageImportListsEditModalContent(
+  props: ManageImportListsEditModalContentProps
+) {
+  const { importListIds, onSavePress, onModalClose } = props;
+
+  const [enableAuto, setenableAuto] = useState(NO_CHANGE);
+  const [qualityProfileId, setQualityProfileId] = useState<string | number>(
+    NO_CHANGE
+  );
+  const [rootFolderPath, setRootFolderPath] = useState(NO_CHANGE);
+
+  const save = useCallback(() => {
+    let hasChanges = false;
+    const payload: SavePayload = {};
+
+    if (enableAuto !== NO_CHANGE) {
+      hasChanges = true;
+      payload.enableAuto = enableAuto === 'enabled';
+    }
+
+    if (qualityProfileId !== NO_CHANGE) {
+      hasChanges = true;
+      payload.qualityProfileId = qualityProfileId as number;
+    }
+
+    if (rootFolderPath !== NO_CHANGE) {
+      hasChanges = true;
+      payload.rootFolderPath = rootFolderPath;
+    }
+
+    if (hasChanges) {
+      onSavePress(payload);
+    }
+
+    onModalClose();
+  }, [enableAuto, qualityProfileId, rootFolderPath, onSavePress, onModalClose]);
+
+  const onInputChange = useCallback(
+    ({ name, value }: { name: string; value: string }) => {
+      switch (name) {
+        case 'enableAuto':
+          setenableAuto(value);
+          break;
+        case 'qualityProfileId':
+          setQualityProfileId(value);
+          break;
+        case 'rootFolderPath':
+          setRootFolderPath(value);
+          break;
+        default:
+          console.warn('EditImportListModalContent Unknown Input');
+      }
+    },
+    []
+  );
+
+  const selectedCount = importListIds.length;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('EditSelectedImportLists')}</ModalHeader>
+
+      <ModalBody>
+        <FormGroup>
+          <FormLabel>{translate('AutomaticAdd')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="enableAuto"
+            value={enableAuto}
+            values={autoAddOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('QualityProfile')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.QUALITY_PROFILE_SELECT}
+            name="qualityProfileId"
+            value={qualityProfileId}
+            includeNoChange={true}
+            includeNoChangeDisabled={false}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('RootFolder')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.ROOT_FOLDER_SELECT}
+            name="rootFolderPath"
+            value={rootFolderPath}
+            includeNoChange={true}
+            includeNoChangeDisabled={false}
+            selectedValueOptions={{ includeFreeSpace: false }}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+      </ModalBody>
+
+      <ModalFooter className={styles.modalFooter}>
+        <div className={styles.selected}>
+          {translate('{count} import lists selected', { count: selectedCount })}
+        </div>
+
+        <div>
+          <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+          <Button onPress={save}>{translate('ApplyChanges')}</Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default ManageImportListsEditModalContent;

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModal.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageImportListsModalContent from './ManageImportListsModalContent';
+
+interface ManageImportListsModalProps {
+  isOpen: boolean;
+  onModalClose(): void;
+}
+
+function ManageImportListsModal(props: ManageImportListsModalProps) {
+  const { isOpen, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageImportListsModalContent onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default ManageImportListsModal;

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalContent.css

@@ -0,0 +1,16 @@
+.leftButtons,
+.rightButtons {
+  display: flex;
+  flex: 1 0 50%;
+  flex-wrap: wrap;
+}
+
+.rightButtons {
+  justify-content: flex-end;
+}
+
+.deleteButton {
+  composes: button from '~Components/Link/Button.css';
+
+  margin-right: 10px;
+}

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalContent.css.d.ts

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

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalContent.tsx

@@ -0,0 +1,283 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { ImportListAppState } from 'App/State/SettingsAppState';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import useSelectState from 'Helpers/Hooks/useSelectState';
+import { kinds } from 'Helpers/Props';
+import {
+  bulkDeleteImportLists,
+  bulkEditImportLists,
+} from 'Store/Actions/settingsActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import { SelectStateInputProps } from 'typings/props';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import ManageImportListsEditModal from './Edit/ManageImportListsEditModal';
+import ManageImportListsModalRow from './ManageImportListsModalRow';
+import TagsModal from './Tags/TagsModal';
+import styles from './ManageImportListsModalContent.css';
+
+// TODO: This feels janky to do, but not sure of a better way currently
+type OnSelectedChangeCallback = React.ComponentProps<
+  typeof ManageImportListsModalRow
+>['onSelectedChange'];
+
+const COLUMNS = [
+  {
+    name: 'name',
+    label: 'Name',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'implementation',
+    label: 'Implementation',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'qualityProfileId',
+    label: 'Quality Profile',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'rootFolderPath',
+    label: 'Root Folder',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'enableAuto',
+    label: 'Auto Add',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'tags',
+    label: 'Tags',
+    isSortable: true,
+    isVisible: true,
+  },
+];
+
+interface ManageImportListsModalContentProps {
+  onModalClose(): void;
+}
+
+function ManageImportListsModalContent(
+  props: ManageImportListsModalContentProps
+) {
+  const { onModalClose } = props;
+
+  const {
+    isFetching,
+    isPopulated,
+    isDeleting,
+    isSaving,
+    error,
+    items,
+  }: ImportListAppState = useSelector(
+    createClientSideCollectionSelector('settings.importLists')
+  );
+  const dispatch = useDispatch();
+
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isTagsModalOpen, setIsTagsModalOpen] = useState(false);
+  const [isSavingTags, setIsSavingTags] = useState(false);
+
+  const [selectState, setSelectState] = useSelectState();
+
+  const { allSelected, allUnselected, selectedState } = selectState;
+
+  const selectedIds: number[] = useMemo(() => {
+    return getSelectedIds(selectedState);
+  }, [selectedState]);
+
+  const selectedCount = selectedIds.length;
+
+  const onDeletePress = useCallback(() => {
+    setIsDeleteModalOpen(true);
+  }, [setIsDeleteModalOpen]);
+
+  const onDeleteModalClose = useCallback(() => {
+    setIsDeleteModalOpen(false);
+  }, [setIsDeleteModalOpen]);
+
+  const onEditPress = useCallback(() => {
+    setIsEditModalOpen(true);
+  }, [setIsEditModalOpen]);
+
+  const onEditModalClose = useCallback(() => {
+    setIsEditModalOpen(false);
+  }, [setIsEditModalOpen]);
+
+  const onConfirmDelete = useCallback(() => {
+    dispatch(bulkDeleteImportLists({ ids: selectedIds }));
+    setIsDeleteModalOpen(false);
+  }, [selectedIds, dispatch]);
+
+  const onSavePress = useCallback(
+    (payload: object) => {
+      setIsEditModalOpen(false);
+
+      dispatch(
+        bulkEditImportLists({
+          ids: selectedIds,
+          ...payload,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
+  const onTagsPress = useCallback(() => {
+    setIsTagsModalOpen(true);
+  }, [setIsTagsModalOpen]);
+
+  const onTagsModalClose = useCallback(() => {
+    setIsTagsModalOpen(false);
+  }, [setIsTagsModalOpen]);
+
+  const onApplyTagsPress = useCallback(
+    (tags: number[], applyTags: string) => {
+      setIsSavingTags(true);
+      setIsTagsModalOpen(false);
+
+      dispatch(
+        bulkEditImportLists({
+          ids: selectedIds,
+          tags,
+          applyTags,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
+  const onSelectAllChange = useCallback(
+    ({ value }: SelectStateInputProps) => {
+      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
+    },
+    [items, setSelectState]
+  );
+
+  const onSelectedChange = useCallback<OnSelectedChangeCallback>(
+    ({ id, value, shiftKey = false }) => {
+      setSelectState({
+        type: 'toggleSelected',
+        items,
+        id,
+        isSelected: value,
+        shiftKey,
+      });
+    },
+    [items, setSelectState]
+  );
+
+  const errorMessage = getErrorMessage(error, 'Unable to load import lists.');
+  const anySelected = selectedCount > 0;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>Manage Import Lists</ModalHeader>
+      <ModalBody>
+        {isFetching ? <LoadingIndicator /> : null}
+
+        {error ? <div>{errorMessage}</div> : null}
+
+        {isPopulated && !!items.length && !isFetching && !isFetching ? (
+          <Table
+            columns={COLUMNS}
+            horizontalScroll={true}
+            selectAll={true}
+            allSelected={allSelected}
+            allUnselected={allUnselected}
+            onSelectAllChange={onSelectAllChange}
+          >
+            <TableBody>
+              {items.map((item) => {
+                return (
+                  <ManageImportListsModalRow
+                    key={item.id}
+                    isSelected={selectedState[item.id]}
+                    {...item}
+                    columns={COLUMNS}
+                    onSelectedChange={onSelectedChange}
+                  />
+                );
+              })}
+            </TableBody>
+          </Table>
+        ) : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <div className={styles.leftButtons}>
+          <SpinnerButton
+            kind={kinds.DANGER}
+            isSpinning={isDeleting}
+            isDisabled={!anySelected}
+            onPress={onDeletePress}
+          >
+            Delete
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving}
+            isDisabled={!anySelected}
+            onPress={onEditPress}
+          >
+            Edit
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving && isSavingTags}
+            isDisabled={!anySelected}
+            onPress={onTagsPress}
+          >
+            Set Tags
+          </SpinnerButton>
+        </div>
+
+        <Button onPress={onModalClose}>Close</Button>
+      </ModalFooter>
+
+      <ManageImportListsEditModal
+        isOpen={isEditModalOpen}
+        onModalClose={onEditModalClose}
+        onSavePress={onSavePress}
+        importListIds={selectedIds}
+      />
+
+      <TagsModal
+        isOpen={isTagsModalOpen}
+        ids={selectedIds}
+        onApplyTagsPress={onApplyTagsPress}
+        onModalClose={onTagsModalClose}
+      />
+
+      <ConfirmModal
+        isOpen={isDeleteModalOpen}
+        kind={kinds.DANGER}
+        title="Delete Import List(s)"
+        message={`Are you sure you want to delete ${selectedIds.length} import list(s)?`}
+        confirmLabel="Delete"
+        onConfirm={onConfirmDelete}
+        onCancel={onDeleteModalClose}
+      />
+    </ModalContent>
+  );
+}
+
+export default ManageImportListsModalContent;

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.css

@@ -0,0 +1,10 @@
+.name,
+.tags,
+.enableAuto,
+.qualityProfileId,
+.rootFolderPath,
+.implementation {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  word-break: break-all;
+}

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.css.d.ts

@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'enableAuto': string;
+  'implementation': string;
+  'name': string;
+  'qualityProfileId': string;
+  'rootFolderPath': string;
+  'tags': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.tsx

@@ -0,0 +1,84 @@
+import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
+import Column from 'Components/Table/Column';
+import TableRow from 'Components/Table/TableRow';
+import TagListConnector from 'Components/TagListConnector';
+import { createQualityProfileSelectorForHook } from 'Store/Selectors/createQualityProfileSelector';
+import { SelectStateInputProps } from 'typings/props';
+import styles from './ManageImportListsModalRow.css';
+
+interface ManageImportListsModalRowProps {
+  id: number;
+  name: string;
+  rootFolderPath: string;
+  qualityProfileId: number;
+  implementation: string;
+  tags: number[];
+  enableAuto: boolean;
+  columns: Column[];
+  isSelected?: boolean;
+  onSelectedChange(result: SelectStateInputProps): void;
+}
+
+function ManageImportListsModalRow(props: ManageImportListsModalRowProps) {
+  const {
+    id,
+    isSelected,
+    name,
+    rootFolderPath,
+    qualityProfileId,
+    implementation,
+    enableAuto,
+    tags,
+    onSelectedChange,
+  } = props;
+
+  const qualityProfile = useSelector(
+    createQualityProfileSelectorForHook(qualityProfileId)
+  );
+
+  const onSelectedChangeWrapper = useCallback(
+    (result: SelectStateInputProps) => {
+      onSelectedChange({
+        ...result,
+      });
+    },
+    [onSelectedChange]
+  );
+
+  return (
+    <TableRow>
+      <TableSelectCell
+        id={id}
+        isSelected={isSelected}
+        onSelectedChange={onSelectedChangeWrapper}
+      />
+
+      <TableRowCell className={styles.name}>{name}</TableRowCell>
+
+      <TableRowCell className={styles.implementation}>
+        {implementation}
+      </TableRowCell>
+
+      <TableRowCell className={styles.qualityProfileId}>
+        {qualityProfile?.name ?? 'None'}
+      </TableRowCell>
+
+      <TableRowCell className={styles.rootFolderPath}>
+        {rootFolderPath}
+      </TableRowCell>
+
+      <TableRowCell className={styles.enableAuto}>
+        {enableAuto ? 'Yes' : 'No'}
+      </TableRowCell>
+
+      <TableRowCell className={styles.tags}>
+        <TagListConnector tags={tags} />
+      </TableRowCell>
+    </TableRow>
+  );
+}
+
+export default ManageImportListsModalRow;

frontend/src/Settings/ImportLists/ImportLists/Manage/Tags/TagsModal.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import TagsModalContent from './TagsModalContent';
+
+interface TagsModalProps {
+  isOpen: boolean;
+  ids: number[];
+  onApplyTagsPress: (tags: number[], applyTags: string) => void;
+  onModalClose: () => void;
+}
+
+function TagsModal(props: TagsModalProps) {
+  const { isOpen, onModalClose, ...otherProps } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <TagsModalContent {...otherProps} onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default TagsModal;

frontend/src/Settings/ImportLists/ImportLists/Manage/Tags/TagsModalContent.css

@@ -0,0 +1,12 @@
+.renameIcon {
+  margin-left: 5px;
+}
+
+.message {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.result {
+  padding-top: 4px;
+}

frontend/src/Settings/ImportLists/ImportLists/Manage/Tags/TagsModalContent.css.d.ts

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

frontend/src/Settings/ImportLists/ImportLists/Manage/Tags/TagsModalContent.tsx

@@ -0,0 +1,178 @@
+import { uniq } from 'lodash';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import { ImportListAppState } from 'App/State/SettingsAppState';
+import { Tag } from 'App/State/TagsAppState';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Label from 'Components/Label';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import ImportList from 'typings/ImportList';
+import styles from './TagsModalContent.css';
+
+interface TagsModalContentProps {
+  ids: number[];
+  onApplyTagsPress: (tags: number[], applyTags: string) => void;
+  onModalClose: () => void;
+}
+
+function TagsModalContent(props: TagsModalContentProps) {
+  const { ids, onModalClose, onApplyTagsPress } = props;
+
+  const allImportLists: ImportListAppState = useSelector(
+    (state: AppState) => state.settings.importLists
+  );
+  const tagList: Tag[] = useSelector(createTagsSelector());
+
+  const [tags, setTags] = useState<number[]>([]);
+  const [applyTags, setApplyTags] = useState('add');
+
+  const seriesTags = useMemo(() => {
+    const tags = ids.reduce((acc: number[], id) => {
+      const s = allImportLists.items.find((s: ImportList) => s.id === id);
+
+      if (s) {
+        acc.push(...s.tags);
+      }
+
+      return acc;
+    }, []);
+
+    return uniq(tags);
+  }, [ids, allImportLists]);
+
+  const onTagsChange = useCallback(
+    ({ value }: { value: number[] }) => {
+      setTags(value);
+    },
+    [setTags]
+  );
+
+  const onApplyTagsChange = useCallback(
+    ({ value }: { value: string }) => {
+      setApplyTags(value);
+    },
+    [setApplyTags]
+  );
+
+  const onApplyPress = useCallback(() => {
+    onApplyTagsPress(tags, applyTags);
+  }, [tags, applyTags, onApplyTagsPress]);
+
+  const applyTagsOptions = [
+    { key: 'add', value: 'Add' },
+    { key: 'remove', value: 'Remove' },
+    { key: 'replace', value: 'Replace' },
+  ];
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>Tags</ModalHeader>
+
+      <ModalBody>
+        <Form>
+          <FormGroup>
+            <FormLabel>Tags</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.TAG}
+              name="tags"
+              value={tags}
+              onChange={onTagsChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Apply Tags</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.SELECT}
+              name="applyTags"
+              value={applyTags}
+              values={applyTagsOptions}
+              helpTexts={[
+                'How to apply tags to the selected list',
+                'Add: Add the tags the existing list of tags',
+                'Remove: Remove the entered tags',
+                'Replace: Replace the tags with the entered tags (enter no tags to clear all tags)',
+              ]}
+              onChange={onApplyTagsChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Result</FormLabel>
+
+            <div className={styles.result}>
+              {seriesTags.map((id) => {
+                const tag = tagList.find((t) => t.id === id);
+
+                if (!tag) {
+                  return null;
+                }
+
+                const removeTag =
+                  (applyTags === 'remove' && tags.indexOf(id) > -1) ||
+                  (applyTags === 'replace' && tags.indexOf(id) === -1);
+
+                return (
+                  <Label
+                    key={tag.id}
+                    title={removeTag ? 'Removing tag' : 'Existing tag'}
+                    kind={removeTag ? kinds.INVERSE : kinds.INFO}
+                    size={sizes.LARGE}
+                  >
+                    {tag.label}
+                  </Label>
+                );
+              })}
+
+              {(applyTags === 'add' || applyTags === 'replace') &&
+                tags.map((id) => {
+                  const tag = tagList.find((t) => t.id === id);
+
+                  if (!tag) {
+                    return null;
+                  }
+
+                  if (seriesTags.indexOf(id) > -1) {
+                    return null;
+                  }
+
+                  return (
+                    <Label
+                      key={tag.id}
+                      title={'Adding tag'}
+                      kind={kinds.SUCCESS}
+                      size={sizes.LARGE}
+                    >
+                      {tag.label}
+                    </Label>
+                  );
+                })}
+            </div>
+          </FormGroup>
+        </Form>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>Cancel</Button>
+
+        <Button kind={kinds.PRIMARY} onPress={onApplyPress}>
+          Apply
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default TagsModalContent;

frontend/src/Settings/Indexers/IndexerSettings.js

@@ -8,6 +8,7 @@ import { icons } from 'Helpers/Props';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import translate from 'Utilities/String/translate';
 import IndexersConnector from './Indexers/IndexersConnector';
+import ManageIndexersModal from './Indexers/Manage/ManageIndexersModal';
 import IndexerOptionsConnector from './Options/IndexerOptionsConnector';
 import RestrictionsConnector from './Restrictions/RestrictionsConnector';
 
@@ -23,7 +24,8 @@ class IndexerSettings extends Component {
 
     this.state = {
       isSaving: false,
-      hasPendingChanges: false
+      hasPendingChanges: false,
+      isManageIndexersOpen: false
     };
   }
 
@@ -38,6 +40,14 @@ class IndexerSettings extends Component {
     this.setState(payload);
   };
 
+  onManageIndexersPress = () => {
+    this.setState({ isManageIndexersOpen: true });
+  };
+
+  onManageIndexersModalClose = () => {
+    this.setState({ isManageIndexersOpen: false });
+  };
+
   onSavePress = () => {
     if (this._saveCallback) {
       this._saveCallback();
@@ -55,7 +65,8 @@ class IndexerSettings extends Component {
 
     const {
       isSaving,
-      hasPendingChanges
+      hasPendingChanges,
+      isManageIndexersOpen
     } = this.state;
 
     return (
@@ -73,6 +84,12 @@ class IndexerSettings extends Component {
                 isSpinning={isTestingAll}
                 onPress={dispatchTestAllIndexers}
               />
+
+              <PageToolbarButton
+                label="Manage Indexers"
+                iconName={icons.MANAGE}
+                onPress={this.onManageIndexersPress}
+              />
             </Fragment>
           }
           onSavePress={this.onSavePress}
@@ -87,6 +104,11 @@ class IndexerSettings extends Component {
           />
 
           <RestrictionsConnector />
+
+          <ManageIndexersModal
+            isOpen={isManageIndexersOpen}
+            onModalClose={this.onManageIndexersModalClose}
+          />
         </PageContentBody>
       </PageContent>
     );

frontend/src/Settings/Indexers/Indexers/EditIndexerModalContent.js

@@ -13,6 +13,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
+import AdvancedSettingsButton from 'Settings/AdvancedSettingsButton';
 import translate from 'Utilities/String/translate';
 import styles from './EditIndexerModalContent.css';
 
@@ -31,6 +32,7 @@ function EditIndexerModalContent(props) {
     onSavePress,
     onTestPress,
     onDeleteIndexerPress,
+    onAdvancedSettingsPress,
     ...otherProps
   } = props;
 
@@ -200,6 +202,12 @@ function EditIndexerModalContent(props) {
             </Button>
         }
 
+        <AdvancedSettingsButton
+          advancedSettings={advancedSettings}
+          onAdvancedSettingsPress={onAdvancedSettingsPress}
+          showLabel={false}
+        />
+
         <SpinnerErrorButton
           isSpinning={isTesting}
           error={saveError}
@@ -239,6 +247,7 @@ EditIndexerModalContent.propTypes = {
   onModalClose: PropTypes.func.isRequired,
   onSavePress: PropTypes.func.isRequired,
   onTestPress: PropTypes.func.isRequired,
+  onAdvancedSettingsPress: PropTypes.func.isRequired,
   onDeleteIndexerPress: PropTypes.func
 };
 

frontend/src/Settings/Indexers/Indexers/EditIndexerModalContentConnector.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { saveIndexer, setIndexerFieldValue, setIndexerValue, testIndexer } from 'Store/Actions/settingsActions';
+import { saveIndexer, setIndexerFieldValue, setIndexerValue, testIndexer, toggleAdvancedSettings } from 'Store/Actions/settingsActions';
 import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
 import EditIndexerModalContent from './EditIndexerModalContent';
 
@@ -23,7 +23,8 @@ const mapDispatchToProps = {
   setIndexerValue,
   setIndexerFieldValue,
   saveIndexer,
-  testIndexer
+  testIndexer,
+  toggleAdvancedSettings
 };
 
 class EditIndexerModalContentConnector extends Component {
@@ -56,6 +57,10 @@ class EditIndexerModalContentConnector extends Component {
     this.props.testIndexer({ id: this.props.id });
   };
 
+  onAdvancedSettingsPress = () => {
+    this.props.toggleAdvancedSettings();
+  };
+
   //
   // Render
 
@@ -65,6 +70,7 @@ class EditIndexerModalContentConnector extends Component {
         {...this.props}
         onSavePress={this.onSavePress}
         onTestPress={this.onTestPress}
+        onAdvancedSettingsPress={this.onAdvancedSettingsPress}
         onInputChange={this.onInputChange}
         onFieldChange={this.onFieldChange}
       />
@@ -80,6 +86,7 @@ EditIndexerModalContentConnector.propTypes = {
   item: PropTypes.object.isRequired,
   setIndexerValue: PropTypes.func.isRequired,
   setIndexerFieldValue: PropTypes.func.isRequired,
+  toggleAdvancedSettings: PropTypes.func.isRequired,
   saveIndexer: PropTypes.func.isRequired,
   testIndexer: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired

frontend/src/Settings/Indexers/Indexers/Manage/Edit/ManageIndexersEditModal.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageIndexersEditModalContent from './ManageIndexersEditModalContent';
+
+interface ManageIndexersEditModalProps {
+  isOpen: boolean;
+  indexerIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+function ManageIndexersEditModal(props: ManageIndexersEditModalProps) {
+  const { isOpen, indexerIds, onSavePress, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageIndexersEditModalContent
+        indexerIds={indexerIds}
+        onSavePress={onSavePress}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default ManageIndexersEditModal;

frontend/src/Settings/Indexers/Indexers/Manage/Edit/ManageIndexersEditModalContent.css

@@ -0,0 +1,16 @@
+.modalFooter {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  justify-content: space-between;
+}
+
+.selected {
+  font-weight: bold;
+}
+
+@media only screen and (max-width: $breakpointExtraSmall) {
+  .modalFooter {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

frontend/src/Settings/Indexers/Indexers/Manage/Edit/ManageIndexersEditModalContent.css.d.ts

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

frontend/src/Settings/Indexers/Indexers/Manage/Edit/ManageIndexersEditModalContent.tsx

@@ -0,0 +1,178 @@
+import React, { useCallback, useState } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './ManageIndexersEditModalContent.css';
+
+interface SavePayload {
+  enableRss?: boolean;
+  enableAutomaticSearch?: boolean;
+  enableInteractiveSearch?: boolean;
+  priority?: number;
+}
+
+interface ManageIndexersEditModalContentProps {
+  indexerIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+const NO_CHANGE = 'noChange';
+
+const enableOptions = [
+  { key: NO_CHANGE, value: 'No Change', disabled: true },
+  { key: 'enabled', value: 'Enabled' },
+  { key: 'disabled', value: 'Disabled' },
+];
+
+function ManageIndexersEditModalContent(
+  props: ManageIndexersEditModalContentProps
+) {
+  const { indexerIds, onSavePress, onModalClose } = props;
+
+  const [enableRss, setEnableRss] = useState(NO_CHANGE);
+  const [enableAutomaticSearch, setEnableAutomaticSearch] = useState(NO_CHANGE);
+  const [enableInteractiveSearch, setEnableInteractiveSearch] =
+    useState(NO_CHANGE);
+  const [priority, setPriority] = useState<null | string | number>(null);
+
+  const save = useCallback(() => {
+    let hasChanges = false;
+    const payload: SavePayload = {};
+
+    if (enableRss !== NO_CHANGE) {
+      hasChanges = true;
+      payload.enableRss = enableRss === 'enabled';
+    }
+
+    if (enableAutomaticSearch !== NO_CHANGE) {
+      hasChanges = true;
+      payload.enableAutomaticSearch = enableAutomaticSearch === 'enabled';
+    }
+
+    if (enableInteractiveSearch !== NO_CHANGE) {
+      hasChanges = true;
+      payload.enableInteractiveSearch = enableInteractiveSearch === 'enabled';
+    }
+
+    if (priority !== null) {
+      hasChanges = true;
+      payload.priority = priority as number;
+    }
+
+    if (hasChanges) {
+      onSavePress(payload);
+    }
+
+    onModalClose();
+  }, [
+    enableRss,
+    enableAutomaticSearch,
+    enableInteractiveSearch,
+    priority,
+    onSavePress,
+    onModalClose,
+  ]);
+
+  const onInputChange = useCallback(
+    ({ name, value }: { name: string; value: string }) => {
+      switch (name) {
+        case 'enableRss':
+          setEnableRss(value);
+          break;
+        case 'enableAutomaticSearch':
+          setEnableAutomaticSearch(value);
+          break;
+        case 'enableInteractiveSearch':
+          setEnableInteractiveSearch(value);
+          break;
+        case 'priority':
+          setPriority(value);
+          break;
+        default:
+          console.warn('EditIndexersModalContent Unknown Input');
+      }
+    },
+    []
+  );
+
+  const selectedCount = indexerIds.length;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('EditSelectedIndexers')}</ModalHeader>
+
+      <ModalBody>
+        <FormGroup>
+          <FormLabel>{translate('EnableRss')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="enableRss"
+            value={enableRss}
+            values={enableOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('EnableAutomaticSearch')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="enableAutomaticSearch"
+            value={enableAutomaticSearch}
+            values={enableOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('EnableInteractiveSearch')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="enableInteractiveSearch"
+            value={enableInteractiveSearch}
+            values={enableOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('Priority')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.NUMBER}
+            name="priority"
+            value={priority}
+            min={1}
+            max={50}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+      </ModalBody>
+
+      <ModalFooter className={styles.modalFooter}>
+        <div className={styles.selected}>
+          {translate('{count} indexers selected', { count: selectedCount })}
+        </div>
+
+        <div>
+          <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+          <Button onPress={save}>{translate('Apply Changes')}</Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default ManageIndexersEditModalContent;

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModal.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageIndexersModalContent from './ManageIndexersModalContent';
+
+interface ManageIndexersModalProps {
+  isOpen: boolean;
+  onModalClose(): void;
+}
+
+function ManageIndexersModal(props: ManageIndexersModalProps) {
+  const { isOpen, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageIndexersModalContent onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default ManageIndexersModal;

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalContent.css

@@ -0,0 +1,16 @@
+.leftButtons,
+.rightButtons {
+  display: flex;
+  flex: 1 0 50%;
+  flex-wrap: wrap;
+}
+
+.rightButtons {
+  justify-content: flex-end;
+}
+
+.deleteButton {
+  composes: button from '~Components/Link/Button.css';
+
+  margin-right: 10px;
+}

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalContent.css.d.ts

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

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalContent.tsx

@@ -0,0 +1,287 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { IndexerAppState } from 'App/State/SettingsAppState';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import useSelectState from 'Helpers/Hooks/useSelectState';
+import { kinds } from 'Helpers/Props';
+import {
+  bulkDeleteIndexers,
+  bulkEditIndexers,
+} from 'Store/Actions/settingsActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import { SelectStateInputProps } from 'typings/props';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import ManageIndexersEditModal from './Edit/ManageIndexersEditModal';
+import ManageIndexersModalRow from './ManageIndexersModalRow';
+import TagsModal from './Tags/TagsModal';
+import styles from './ManageIndexersModalContent.css';
+
+// TODO: This feels janky to do, but not sure of a better way currently
+type OnSelectedChangeCallback = React.ComponentProps<
+  typeof ManageIndexersModalRow
+>['onSelectedChange'];
+
+const COLUMNS = [
+  {
+    name: 'name',
+    label: 'Name',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'implementation',
+    label: 'Implementation',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'enableRss',
+    label: 'Enable RSS',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'enableAutomaticSearch',
+    label: 'Enable Automatic Search',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'enableInteractiveSearch',
+    label: 'Enable Interactive Search',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'priority',
+    label: 'Priority',
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'tags',
+    label: 'Tags',
+    isSortable: true,
+    isVisible: true,
+  },
+];
+
+interface ManageIndexersModalContentProps {
+  onModalClose(): void;
+}
+
+function ManageIndexersModalContent(props: ManageIndexersModalContentProps) {
+  const { onModalClose } = props;
+
+  const {
+    isFetching,
+    isPopulated,
+    isDeleting,
+    isSaving,
+    error,
+    items,
+  }: IndexerAppState = useSelector(
+    createClientSideCollectionSelector('settings.indexers')
+  );
+  const dispatch = useDispatch();
+
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isTagsModalOpen, setIsTagsModalOpen] = useState(false);
+  const [isSavingTags, setIsSavingTags] = useState(false);
+
+  const [selectState, setSelectState] = useSelectState();
+
+  const { allSelected, allUnselected, selectedState } = selectState;
+
+  const selectedIds: number[] = useMemo(() => {
+    return getSelectedIds(selectedState);
+  }, [selectedState]);
+
+  const selectedCount = selectedIds.length;
+
+  const onDeletePress = useCallback(() => {
+    setIsDeleteModalOpen(true);
+  }, [setIsDeleteModalOpen]);
+
+  const onDeleteModalClose = useCallback(() => {
+    setIsDeleteModalOpen(false);
+  }, [setIsDeleteModalOpen]);
+
+  const onEditPress = useCallback(() => {
+    setIsEditModalOpen(true);
+  }, [setIsEditModalOpen]);
+
+  const onEditModalClose = useCallback(() => {
+    setIsEditModalOpen(false);
+  }, [setIsEditModalOpen]);
+
+  const onConfirmDelete = useCallback(() => {
+    dispatch(bulkDeleteIndexers({ ids: selectedIds }));
+    setIsDeleteModalOpen(false);
+  }, [selectedIds, dispatch]);
+
+  const onSavePress = useCallback(
+    (payload: object) => {
+      setIsEditModalOpen(false);
+
+      dispatch(
+        bulkEditIndexers({
+          ids: selectedIds,
+          ...payload,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
+  const onTagsPress = useCallback(() => {
+    setIsTagsModalOpen(true);
+  }, [setIsTagsModalOpen]);
+
+  const onTagsModalClose = useCallback(() => {
+    setIsTagsModalOpen(false);
+  }, [setIsTagsModalOpen]);
+
+  const onApplyTagsPress = useCallback(
+    (tags: number[], applyTags: string) => {
+      setIsSavingTags(true);
+      setIsTagsModalOpen(false);
+
+      dispatch(
+        bulkEditIndexers({
+          ids: selectedIds,
+          tags,
+          applyTags,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
+  const onSelectAllChange = useCallback(
+    ({ value }: SelectStateInputProps) => {
+      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
+    },
+    [items, setSelectState]
+  );
+
+  const onSelectedChange = useCallback<OnSelectedChangeCallback>(
+    ({ id, value, shiftKey = false }) => {
+      setSelectState({
+        type: 'toggleSelected',
+        items,
+        id,
+        isSelected: value,
+        shiftKey,
+      });
+    },
+    [items, setSelectState]
+  );
+
+  const errorMessage = getErrorMessage(error, 'Unable to load import lists.');
+  const anySelected = selectedCount > 0;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>Manage Import Lists</ModalHeader>
+      <ModalBody>
+        {isFetching ? <LoadingIndicator /> : null}
+
+        {error ? <div>{errorMessage}</div> : null}
+
+        {isPopulated && !!items.length && !isFetching && !isFetching ? (
+          <Table
+            columns={COLUMNS}
+            horizontalScroll={true}
+            selectAll={true}
+            allSelected={allSelected}
+            allUnselected={allUnselected}
+            onSelectAllChange={onSelectAllChange}
+          >
+            <TableBody>
+              {items.map((item) => {
+                return (
+                  <ManageIndexersModalRow
+                    key={item.id}
+                    isSelected={selectedState[item.id]}
+                    {...item}
+                    columns={COLUMNS}
+                    onSelectedChange={onSelectedChange}
+                  />
+                );
+              })}
+            </TableBody>
+          </Table>
+        ) : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <div className={styles.leftButtons}>
+          <SpinnerButton
+            kind={kinds.DANGER}
+            isSpinning={isDeleting}
+            isDisabled={!anySelected}
+            onPress={onDeletePress}
+          >
+            Delete
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving}
+            isDisabled={!anySelected}
+            onPress={onEditPress}
+          >
+            Edit
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving && isSavingTags}
+            isDisabled={!anySelected}
+            onPress={onTagsPress}
+          >
+            Set Tags
+          </SpinnerButton>
+        </div>
+
+        <Button onPress={onModalClose}>Close</Button>
+      </ModalFooter>
+
+      <ManageIndexersEditModal
+        isOpen={isEditModalOpen}
+        onModalClose={onEditModalClose}
+        onSavePress={onSavePress}
+        indexerIds={selectedIds}
+      />
+
+      <TagsModal
+        isOpen={isTagsModalOpen}
+        ids={selectedIds}
+        onApplyTagsPress={onApplyTagsPress}
+        onModalClose={onTagsModalClose}
+      />
+
+      <ConfirmModal
+        isOpen={isDeleteModalOpen}
+        kind={kinds.DANGER}
+        title="Delete Import List(s)"
+        message={`Are you sure you want to delete ${selectedIds.length} import list(s)?`}
+        confirmLabel="Delete"
+        onConfirm={onConfirmDelete}
+        onCancel={onDeleteModalClose}
+      />
+    </ModalContent>
+  );
+}
+
+export default ManageIndexersModalContent;

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.css

@@ -0,0 +1,11 @@
+.name,
+.tags,
+.enableRss,
+.enableAutomaticSearch,
+.enableInteractiveSearch,
+.priority,
+.implementation {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  word-break: break-all;
+}

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.css.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'enableAutomaticSearch': string;
+  'enableInteractiveSearch': string;
+  'enableRss': string;
+  'implementation': string;
+  'name': string;
+  'priority': string;
+  'tags': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback } from 'react';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
+import Column from 'Components/Table/Column';
+import TableRow from 'Components/Table/TableRow';
+import TagListConnector from 'Components/TagListConnector';
+import { SelectStateInputProps } from 'typings/props';
+import styles from './ManageIndexersModalRow.css';
+
+interface ManageIndexersModalRowProps {
+  id: number;
+  name: string;
+  enableRss: boolean;
+  enableAutomaticSearch: boolean;
+  enableInteractiveSearch: boolean;
+  priority: number;
+  implementation: string;
+  tags: number[];
+  columns: Column[];
+  isSelected?: boolean;
+  onSelectedChange(result: SelectStateInputProps): void;
+}
+
+function ManageIndexersModalRow(props: ManageIndexersModalRowProps) {
+  const {
+    id,
+    isSelected,
+    name,
+    enableRss,
+    enableAutomaticSearch,
+    enableInteractiveSearch,
+    priority,
+    implementation,
+    tags,
+    onSelectedChange,
+  } = props;
+
+  const onSelectedChangeWrapper = useCallback(
+    (result: SelectStateInputProps) => {
+      onSelectedChange({
+        ...result,
+      });
+    },
+    [onSelectedChange]
+  );
+
+  return (
+    <TableRow>
+      <TableSelectCell
+        id={id}
+        isSelected={isSelected}
+        onSelectedChange={onSelectedChangeWrapper}
+      />
+
+      <TableRowCell className={styles.name}>{name}</TableRowCell>
+
+      <TableRowCell className={styles.implementation}>
+        {implementation}
+      </TableRowCell>
+
+      <TableRowCell className={styles.enableRss}>
+        {enableRss ? 'Yes' : 'No'}
+      </TableRowCell>
+
+      <TableRowCell className={styles.enableAutomaticSearch}>
+        {enableAutomaticSearch ? 'Yes' : 'No'}
+      </TableRowCell>
+
+      <TableRowCell className={styles.enableInteractiveSearch}>
+        {enableInteractiveSearch ? 'Yes' : 'No'}
+      </TableRowCell>
+
+      <TableRowCell className={styles.priority}>{priority}</TableRowCell>
+
+      <TableRowCell className={styles.tags}>
+        <TagListConnector tags={tags} />
+      </TableRowCell>
+    </TableRow>
+  );
+}
+
+export default ManageIndexersModalRow;

frontend/src/Settings/Indexers/Indexers/Manage/Tags/TagsModal.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import TagsModalContent from './TagsModalContent';
+
+interface TagsModalProps {
+  isOpen: boolean;
+  ids: number[];
+  onApplyTagsPress: (tags: number[], applyTags: string) => void;
+  onModalClose: () => void;
+}
+
+function TagsModal(props: TagsModalProps) {
+  const { isOpen, onModalClose, ...otherProps } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <TagsModalContent {...otherProps} onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default TagsModal;

frontend/src/Settings/Indexers/Indexers/Manage/Tags/TagsModalContent.css

@@ -0,0 +1,12 @@
+.renameIcon {
+  margin-left: 5px;
+}
+
+.message {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.result {
+  padding-top: 4px;
+}

frontend/src/Settings/Indexers/Indexers/Manage/Tags/TagsModalContent.css.d.ts

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

frontend/src/Settings/Indexers/Indexers/Manage/Tags/TagsModalContent.tsx

@@ -0,0 +1,178 @@
+import { uniq } from 'lodash';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import { IndexerAppState } from 'App/State/SettingsAppState';
+import { Tag } from 'App/State/TagsAppState';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Label from 'Components/Label';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import Indexer from 'typings/Indexer';
+import styles from './TagsModalContent.css';
+
+interface TagsModalContentProps {
+  ids: number[];
+  onApplyTagsPress: (tags: number[], applyTags: string) => void;
+  onModalClose: () => void;
+}
+
+function TagsModalContent(props: TagsModalContentProps) {
+  const { ids, onModalClose, onApplyTagsPress } = props;
+
+  const allIndexers: IndexerAppState = useSelector(
+    (state: AppState) => state.settings.indexers
+  );
+  const tagList: Tag[] = useSelector(createTagsSelector());
+
+  const [tags, setTags] = useState<number[]>([]);
+  const [applyTags, setApplyTags] = useState('add');
+
+  const seriesTags = useMemo(() => {
+    const tags = ids.reduce((acc: number[], id) => {
+      const s = allIndexers.items.find((s: Indexer) => s.id === id);
+
+      if (s) {
+        acc.push(...s.tags);
+      }
+
+      return acc;
+    }, []);
+
+    return uniq(tags);
+  }, [ids, allIndexers]);
+
+  const onTagsChange = useCallback(
+    ({ value }: { value: number[] }) => {
+      setTags(value);
+    },
+    [setTags]
+  );
+
+  const onApplyTagsChange = useCallback(
+    ({ value }: { value: string }) => {
+      setApplyTags(value);
+    },
+    [setApplyTags]
+  );
+
+  const onApplyPress = useCallback(() => {
+    onApplyTagsPress(tags, applyTags);
+  }, [tags, applyTags, onApplyTagsPress]);
+
+  const applyTagsOptions = [
+    { key: 'add', value: 'Add' },
+    { key: 'remove', value: 'Remove' },
+    { key: 'replace', value: 'Replace' },
+  ];
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>Tags</ModalHeader>
+
+      <ModalBody>
+        <Form>
+          <FormGroup>
+            <FormLabel>Tags</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.TAG}
+              name="tags"
+              value={tags}
+              onChange={onTagsChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Apply Tags</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.SELECT}
+              name="applyTags"
+              value={applyTags}
+              values={applyTagsOptions}
+              helpTexts={[
+                'How to apply tags to the selected indexer(s)',
+                'Add: Add the tags the existing list of tags',
+                'Remove: Remove the entered tags',
+                'Replace: Replace the tags with the entered tags (enter no tags to clear all tags)',
+              ]}
+              onChange={onApplyTagsChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Result</FormLabel>
+
+            <div className={styles.result}>
+              {seriesTags.map((id) => {
+                const tag = tagList.find((t) => t.id === id);
+
+                if (!tag) {
+                  return null;
+                }
+
+                const removeTag =
+                  (applyTags === 'remove' && tags.indexOf(id) > -1) ||
+                  (applyTags === 'replace' && tags.indexOf(id) === -1);
+
+                return (
+                  <Label
+                    key={tag.id}
+                    title={removeTag ? 'Removing tag' : 'Existing tag'}
+                    kind={removeTag ? kinds.INVERSE : kinds.INFO}
+                    size={sizes.LARGE}
+                  >
+                    {tag.label}
+                  </Label>
+                );
+              })}
+
+              {(applyTags === 'add' || applyTags === 'replace') &&
+                tags.map((id) => {
+                  const tag = tagList.find((t) => t.id === id);
+
+                  if (!tag) {
+                    return null;
+                  }
+
+                  if (seriesTags.indexOf(id) > -1) {
+                    return null;
+                  }
+
+                  return (
+                    <Label
+                      key={tag.id}
+                      title={'Adding tag'}
+                      kind={kinds.SUCCESS}
+                      size={sizes.LARGE}
+                    >
+                      {tag.label}
+                    </Label>
+                  );
+                })}
+            </div>
+          </FormGroup>
+        </Form>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>Cancel</Button>
+
+        <Button kind={kinds.PRIMARY} onPress={onApplyPress}>
+          Apply
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default TagsModalContent;

frontend/src/Settings/MediaManagement/MediaManagement.js

@@ -63,29 +63,29 @@ class MediaManagement extends Component {
           <NamingConnector />
 
           {
-            isFetching &&
+            isFetching ?
               <FieldSet legend={translate('NamingSettings')}>
                 <LoadingIndicator />
-              </FieldSet>
+              </FieldSet> : null
           }
 
           {
-            !isFetching && error &&
+            !isFetching && error ?
               <FieldSet legend={translate('NamingSettings')}>
                 <div>
                   {translate('UnableToLoadMediaManagementSettings')}
                 </div>
-              </FieldSet>
+              </FieldSet> : null
           }
 
           {
-            hasSettings && !isFetching && !error &&
+            hasSettings && !isFetching && !error ?
               <Form
                 id="mediaManagementSettings"
                 {...otherProps}
               >
                 {
-                  advancedSettings &&
+                  advancedSettings ?
                     <FieldSet legend={translate('Folders')}>
                       <FormGroup
                         advancedSettings={advancedSettings}
@@ -120,11 +120,11 @@ class MediaManagement extends Component {
                           {...settings.deleteEmptyFolders}
                         />
                       </FormGroup>
-                    </FieldSet>
+                    </FieldSet> : null
                 }
 
                 {
-                  advancedSettings &&
+                  advancedSettings ?
                     <FieldSet
                       legend={translate('Importing')}
                     >
@@ -181,6 +181,41 @@ class MediaManagement extends Component {
                         />
                       </FormGroup>
 
+                      <FormGroup
+                        advancedSettings={advancedSettings}
+                        isAdvanced={true}
+                        size={sizes.MEDIUM}
+                      >
+                        <FormLabel>{translate('ImportUsingScript')}</FormLabel>
+
+                        <FormInputGroup
+                          type={inputTypes.CHECK}
+                          name="useScriptImport"
+                          helpText={translate('UseScriptImportHelpText')}
+                          onChange={onInputChange}
+                          {...settings.useScriptImport}
+                        />
+                      </FormGroup>
+
+                      {
+                        settings.useScriptImport.value ?
+                          <FormGroup
+                            advancedSettings={advancedSettings}
+                            isAdvanced={true}
+                          >
+                            <FormLabel>{translate('ImportScriptPath')}</FormLabel>
+
+                            <FormInputGroup
+                              type={inputTypes.PATH}
+                              includeFiles={true}
+                              name="scriptImportPath"
+                              helpText={translate('ScriptImportPathHelpText')}
+                              onChange={onInputChange}
+                              {...settings.scriptImportPath}
+                            />
+                          </FormGroup> : null
+                      }
+
                       <FormGroup size={sizes.MEDIUM}>
                         <FormLabel>{translate('ImportExtraFiles')}</FormLabel>
 
@@ -194,7 +229,7 @@ class MediaManagement extends Component {
                       </FormGroup>
 
                       {
-                        settings.importExtraFiles.value &&
+                        settings.importExtraFiles.value ?
                           <FormGroup
                             advancedSettings={advancedSettings}
                             isAdvanced={true}
@@ -211,9 +246,9 @@ class MediaManagement extends Component {
                               onChange={onInputChange}
                               {...settings.extraFileExtensions}
                             />
-                          </FormGroup>
+                          </FormGroup> : null
                       }
-                    </FieldSet>
+                    </FieldSet> : null
                 }
 
                 <FieldSet
@@ -339,7 +374,7 @@ class MediaManagement extends Component {
                 </FieldSet>
 
                 {
-                  advancedSettings && !isWindows &&
+                  advancedSettings && !isWindows ?
                     <FieldSet
                       legend={translate('Permissions')}
                     >
@@ -392,9 +427,9 @@ class MediaManagement extends Component {
                           {...settings.chownGroup}
                         />
                       </FormGroup>
-                    </FieldSet>
+                    </FieldSet> : null
                 }
-              </Form>
+              </Form> : null
           }
 
           <FieldSet legend={translate('RootFolders')}>

frontend/src/Settings/Notifications/Notifications/Notification.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import Card from 'Components/Card';
 import Label from 'Components/Label';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
+import TagList from 'Components/TagList';
 import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import EditNotificationModalConnector from './EditNotificationModalConnector';
@@ -78,7 +79,9 @@ class Notification extends Component {
       supportsOnHealthIssue,
       supportsOnHealthRestored,
       supportsOnApplicationUpdate,
-      supportsOnManualInteractionRequired
+      supportsOnManualInteractionRequired,
+      tags,
+      tagList
     } = this.props;
 
     return (
@@ -198,6 +201,11 @@ class Notification extends Component {
             null
         }
 
+        <TagList
+          tags={tags}
+          tagList={tagList}
+        />
+
         <EditNotificationModalConnector
           id={id}
           isOpen={this.state.isEditNotificationModalOpen}
@@ -246,6 +254,8 @@ Notification.propTypes = {
   supportsOnHealthRestored: PropTypes.bool.isRequired,
   supportsOnApplicationUpdate: PropTypes.bool.isRequired,
   supportsOnManualInteractionRequired: PropTypes.bool.isRequired,
+  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   onConfirmDeleteNotification: PropTypes.func.isRequired
 };
 

frontend/src/Settings/Notifications/Notifications/Notifications.js

@@ -49,6 +49,7 @@ class Notifications extends Component {
   render() {
     const {
       items,
+      tagList,
       onConfirmDeleteNotification,
       ...otherProps
     } = this.props;
@@ -71,6 +72,7 @@ class Notifications extends Component {
                   <Notification
                     key={item.id}
                     {...item}
+                    tagList={tagList}
                     onConfirmDeleteNotification={onConfirmDeleteNotification}
                   />
                 );
@@ -109,6 +111,7 @@ Notifications.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   onConfirmDeleteNotification: PropTypes.func.isRequired
 };
 

frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js

@@ -4,13 +4,20 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { deleteNotification, fetchNotifications } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
 import sortByName from 'Utilities/Array/sortByName';
 import Notifications from './Notifications';
 
 function createMapStateToProps() {
   return createSelector(
     createSortedSectionSelector('settings.notifications', sortByName),
-    (notifications) => notifications
+    createTagsSelector(),
+    (notifications, tagList) => {
+      return {
+        ...notifications,
+        tagList
+      };
+    }
   );
 }
 

frontend/src/Store/Actions/Creators/createBulkEditItemHandler.js

@@ -0,0 +1,54 @@
+import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
+import { set, updateItem } from '../baseActions';
+
+function createBulkEditItemHandler(section, url) {
+  return function(getState, payload, dispatch) {
+
+    dispatch(set({ section, isSaving: true }));
+
+    const ajaxOptions = {
+      url: `${url}`,
+      method: 'PUT',
+      data: JSON.stringify(payload),
+      dataType: 'json'
+    };
+
+    const promise = createAjaxRequest(ajaxOptions).request;
+
+    promise.done((data) => {
+      dispatch(batchActions([
+        set({
+          section,
+          isSaving: false,
+          saveError: null
+        }),
+
+        ...data.map((provider) => {
+
+          const {
+            ...propsToUpdate
+          } = provider;
+
+          return updateItem({
+            id: provider.id,
+            section,
+            ...propsToUpdate
+          });
+        })
+      ]));
+    });
+
+    promise.fail((xhr) => {
+      dispatch(set({
+        section,
+        isSaving: false,
+        saveError: xhr
+      }));
+    });
+
+    return promise;
+  };
+}
+
+export default createBulkEditItemHandler;

frontend/src/Store/Actions/Creators/createBulkRemoveItemHandler.js

@@ -0,0 +1,48 @@
+import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
+import { removeItem, set } from '../baseActions';
+
+function createBulkRemoveItemHandler(section, url) {
+  return function(getState, payload, dispatch) {
+    const {
+      ids
+    } = payload;
+
+    dispatch(set({ section, isDeleting: true }));
+
+    const ajaxOptions = {
+      url: `${url}`,
+      method: 'DELETE',
+      data: JSON.stringify(payload),
+      dataType: 'json'
+    };
+
+    const promise = createAjaxRequest(ajaxOptions).request;
+
+    promise.done((data) => {
+      dispatch(batchActions([
+        set({
+          section,
+          isDeleting: false,
+          deleteError: null
+        }),
+
+        ...ids.map((id) => {
+          return removeItem({ section, id });
+        })
+      ]));
+    });
+
+    promise.fail((xhr) => {
+      dispatch(set({
+        section,
+        isDeleting: false,
+        deleteError: xhr
+      }));
+    });
+
+    return promise;
+  };
+}
+
+export default createBulkRemoveItemHandler;

frontend/src/Store/Actions/Creators/createSaveProviderHandler.js

@@ -32,9 +32,9 @@ function createSaveProviderHandler(section, url, options = {}) {
     const params = { ...queryParams };
 
     // If the user is re-saving the same provider without changes
-    // force it to be saved. Only applies to editing existing providers.
+    // force it to be saved.
 
-    if (id && _.isEqual(saveData, lastSaveData)) {
+    if (_.isEqual(saveData, lastSaveData)) {
       params.forceSave = true;
     }
 

frontend/src/Store/Actions/Settings/downloadClients.js

@@ -1,4 +1,6 @@
 import { createAction } from 'redux-actions';
+import createBulkEditItemHandler from 'Store/Actions/Creators/createBulkEditItemHandler';
+import createBulkRemoveItemHandler from 'Store/Actions/Creators/createBulkRemoveItemHandler';
 import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
 import createFetchSchemaHandler from 'Store/Actions/Creators/createFetchSchemaHandler';
 import createRemoveItemHandler from 'Store/Actions/Creators/createRemoveItemHandler';
@@ -30,6 +32,9 @@ export const TEST_DOWNLOAD_CLIENT = 'settings/downloadClients/testDownloadClient
 export const CANCEL_TEST_DOWNLOAD_CLIENT = 'settings/downloadClients/cancelTestDownloadClient';
 export const TEST_ALL_DOWNLOAD_CLIENTS = 'settings/downloadClients/testAllDownloadClients';
 
+export const BULK_DELETE_DOWNLOAD_CLIENTS = 'settings/downloadClients/bulkDeleteDownloadClients';
+export const BULK_EDIT_DOWNLOAD_CLIENTS = 'settings/downloadClients/bulkEditDownloadClients';
+
 //
 // Action Creators
 
@@ -44,6 +49,9 @@ export const testDownloadClient = createThunk(TEST_DOWNLOAD_CLIENT);
 export const cancelTestDownloadClient = createThunk(CANCEL_TEST_DOWNLOAD_CLIENT);
 export const testAllDownloadClients = createThunk(TEST_ALL_DOWNLOAD_CLIENTS);
 
+export const bulkDeleteDownloadClients = createThunk(BULK_DELETE_DOWNLOAD_CLIENTS);
+export const bulkEditDownloadClients = createThunk(BULK_EDIT_DOWNLOAD_CLIENTS);
+
 export const setDownloadClientValue = createAction(SET_DOWNLOAD_CLIENT_VALUE, (payload) => {
   return {
     section,
@@ -77,6 +85,8 @@ export default {
     selectedSchema: {},
     isSaving: false,
     saveError: null,
+    isDeleting: false,
+    deleteError: null,
     isTesting: false,
     isTestingAll: false,
     items: [],
@@ -95,7 +105,9 @@ export default {
     [DELETE_DOWNLOAD_CLIENT]: createRemoveItemHandler(section, '/downloadclient'),
     [TEST_DOWNLOAD_CLIENT]: createTestProviderHandler(section, '/downloadclient'),
     [CANCEL_TEST_DOWNLOAD_CLIENT]: createCancelTestProviderHandler(section),
-    [TEST_ALL_DOWNLOAD_CLIENTS]: createTestAllProvidersHandler(section, '/downloadclient')
+    [TEST_ALL_DOWNLOAD_CLIENTS]: createTestAllProvidersHandler(section, '/downloadclient'),
+    [BULK_DELETE_DOWNLOAD_CLIENTS]: createBulkRemoveItemHandler(section, '/downloadclient/bulk'),
+    [BULK_EDIT_DOWNLOAD_CLIENTS]: createBulkEditItemHandler(section, '/downloadclient/bulk')
   },
 
   //

frontend/src/Store/Actions/Settings/importLists.js

@@ -1,4 +1,6 @@
 import { createAction } from 'redux-actions';
+import createBulkEditItemHandler from 'Store/Actions/Creators/createBulkEditItemHandler';
+import createBulkRemoveItemHandler from 'Store/Actions/Creators/createBulkRemoveItemHandler';
 import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
 import createFetchSchemaHandler from 'Store/Actions/Creators/createFetchSchemaHandler';
 import createRemoveItemHandler from 'Store/Actions/Creators/createRemoveItemHandler';
@@ -30,6 +32,9 @@ export const TEST_IMPORT_LIST = 'settings/importLists/testImportList';
 export const CANCEL_TEST_IMPORT_LIST = 'settings/importLists/cancelTestImportList';
 export const TEST_ALL_IMPORT_LIST = 'settings/importLists/testAllImportList';
 
+export const BULK_DELETE_IMPORT_LISTS = 'settings/importlists/bulkDeleteImportLists';
+export const BULK_EDIT_IMPORT_LISTS = 'settings/importlists/bulkEditImportLists';
+
 //
 // Action Creators
 
@@ -44,6 +49,9 @@ export const testImportList = createThunk(TEST_IMPORT_LIST);
 export const cancelTestImportList = createThunk(CANCEL_TEST_IMPORT_LIST);
 export const testAllImportList = createThunk(TEST_ALL_IMPORT_LIST);
 
+export const bulkDeleteImportLists = createThunk(BULK_DELETE_IMPORT_LISTS);
+export const bulkEditImportLists = createThunk(BULK_EDIT_IMPORT_LISTS);
+
 export const setImportListValue = createAction(SET_IMPORT_LIST_VALUE, (payload) => {
   return {
     section,
@@ -77,6 +85,8 @@ export default {
     selectedSchema: {},
     isSaving: false,
     saveError: null,
+    isDeleting: false,
+    deleteError: null,
     isTesting: false,
     isTestingAll: false,
     items: [],
@@ -95,7 +105,10 @@ export default {
     [DELETE_IMPORT_LIST]: createRemoveItemHandler(section, '/importlist'),
     [TEST_IMPORT_LIST]: createTestProviderHandler(section, '/importlist'),
     [CANCEL_TEST_IMPORT_LIST]: createCancelTestProviderHandler(section),
-    [TEST_ALL_IMPORT_LIST]: createTestAllProvidersHandler(section, '/importlist')
+    [TEST_ALL_IMPORT_LIST]: createTestAllProvidersHandler(section, '/importlist'),
+
+    [BULK_DELETE_IMPORT_LISTS]: createBulkRemoveItemHandler(section, '/importlist/bulk'),
+    [BULK_EDIT_IMPORT_LISTS]: createBulkEditItemHandler(section, '/importlist/bulk')
   },
 
   //

frontend/src/Store/Actions/Settings/indexers.js

@@ -11,6 +11,8 @@ import { createThunk } from 'Store/thunks';
 import getSectionState from 'Utilities/State/getSectionState';
 import selectProviderSchema from 'Utilities/State/selectProviderSchema';
 import updateSectionState from 'Utilities/State/updateSectionState';
+import createBulkEditItemHandler from '../Creators/createBulkEditItemHandler';
+import createBulkRemoveItemHandler from '../Creators/createBulkRemoveItemHandler';
 
 //
 // Variables
@@ -33,6 +35,9 @@ export const TEST_INDEXER = 'settings/indexers/testIndexer';
 export const CANCEL_TEST_INDEXER = 'settings/indexers/cancelTestIndexer';
 export const TEST_ALL_INDEXERS = 'settings/indexers/testAllIndexers';
 
+export const BULK_DELETE_INDEXERS = 'settings/indexers/bulkDeleteIndexers';
+export const BULK_EDIT_INDEXERS = 'settings/indexers/bulkEditIndexers';
+
 //
 // Action Creators
 
@@ -48,6 +53,9 @@ export const testIndexer = createThunk(TEST_INDEXER);
 export const cancelTestIndexer = createThunk(CANCEL_TEST_INDEXER);
 export const testAllIndexers = createThunk(TEST_ALL_INDEXERS);
 
+export const bulkDeleteIndexers = createThunk(BULK_DELETE_INDEXERS);
+export const bulkEditIndexers = createThunk(BULK_EDIT_INDEXERS);
+
 export const setIndexerValue = createAction(SET_INDEXER_VALUE, (payload) => {
   return {
     section,
@@ -81,6 +89,8 @@ export default {
     selectedSchema: {},
     isSaving: false,
     saveError: null,
+    isDeleting: false,
+    deleteError: null,
     isTesting: false,
     isTestingAll: false,
     items: [],
@@ -99,7 +109,10 @@ export default {
     [DELETE_INDEXER]: createRemoveItemHandler(section, '/indexer'),
     [TEST_INDEXER]: createTestProviderHandler(section, '/indexer'),
     [CANCEL_TEST_INDEXER]: createCancelTestProviderHandler(section),
-    [TEST_ALL_INDEXERS]: createTestAllProvidersHandler(section, '/indexer')
+    [TEST_ALL_INDEXERS]: createTestAllProvidersHandler(section, '/indexer'),
+
+    [BULK_DELETE_INDEXERS]: createBulkRemoveItemHandler(section, '/indexer/bulk'),
+    [BULK_EDIT_INDEXERS]: createBulkEditItemHandler(section, '/indexer/bulk')
   },
 
   //

frontend/src/Store/Actions/releaseActions.js

@@ -43,7 +43,7 @@ export const defaultState = {
         return 10000;
       }
 
-      return item.languages[0].id;
+      return item.languages[0]?.id ?? 0;
     },
 
     indexerFlags: function(item, direction) {

frontend/src/Store/Selectors/createQualityProfileSelector.js

@@ -1,5 +1,16 @@
 import { createSelector } from 'reselect';
 
+export function createQualityProfileSelectorForHook(qualityProfileId) {
+  return createSelector(
+    (state) => state.settings.qualityProfiles.items,
+    (qualityProfiles) => {
+      return qualityProfiles.find((profile) => {
+        return profile.id === qualityProfileId;
+      });
+    }
+  );
+}
+
 function createQualityProfileSelector() {
   return createSelector(
     (state, { qualityProfileId }) => qualityProfileId,

frontend/src/Utilities/Number/formatBytes.js

@@ -7,10 +7,10 @@ function formatBytes(input) {
     return '';
   }
 
-  return filesize(size, {
+  return `${filesize(size, {
     base: 2,
     round: 1
-  }).toString();
+  })}`;
 }
 
 export default formatBytes;