Fixed: Loading calendar on older browsers

(cherry picked from commit edfc12e27a00fd927df0de6ccb3961efe8f5dc3b)

.devcontainer/Readarr.code-workspace

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

.devcontainer/devcontainer.json

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

.github/dependabot.yml

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

.gitignore

@@ -120,11 +120,13 @@ _artifacts
 _rawPackage/
 _dotTrace*
 _tests/
+_temp*
 *.Result.xml
 coverage*.xml
 coverage*.json
 setup/Output/
 *.~is
+.mono
 
 # .NET Core
 project.lock.json

.vscode/extensions.json

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

.vscode/launch.json

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

.vscode/tasks.json

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

azure-pipelines.yml

@@ -9,18 +9,18 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '0.3.17'
+  majorVersion: '0.4.6'
   minorVersion: $[counter('minorVersion', 1)]
   readarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(readarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.417'
-  nodeVersion: '16.X'
+  dotnetVersion: '6.0.427'
+  nodeVersion: '20.X'
   innoVersion: '6.2.0'
   windowsImage: 'windows-2022'
   linuxImage: 'ubuntu-20.04'
-  macImage: 'macOS-11'
+  macImage: 'macOS-13'
 
 trigger:
   branches:
@@ -166,10 +166,10 @@ stages:
       pool:
         vmImage: $(imageName)
       steps:
-      - task: NodeTool@0
+      - task: UseNode@1
         displayName: Set Node.js version
         inputs:
-          versionSpec: $(nodeVersion)
+          version: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -1075,10 +1075,10 @@ stages:
       pool:
         vmImage: $(imageName)
       steps:
-      - task: NodeTool@0
+      - task: UseNode@1
         displayName: Set Node.js version
         inputs:
-          versionSpec: $(nodeVersion)
+          version: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -1102,7 +1102,7 @@ stages:
         vmImage: ${{ variables.windowsImage }}
       steps:
       - checkout: self # Need history for Sonar analysis
-      - task: SonarCloudPrepare@1
+      - task: SonarCloudPrepare@2
         env:
           SONAR_SCANNER_OPTS: ''
         inputs:
@@ -1114,7 +1114,7 @@ stages:
           cliProjectName: 'ReadarrUI'
           cliProjectVersion: '$(readarrVersion)'
           cliSources: './frontend'
-      - task: SonarCloudAnalyze@1
+      - task: SonarCloudAnalyze@2
 
     - job: Api_Docs
       displayName: API Docs
@@ -1190,7 +1190,7 @@ stages:
         submodules: true
       - powershell: Set-Service SCardSvr -StartupType Manual
         displayName: Enable Windows Test Service
-      - task: SonarCloudPrepare@1
+      - task: SonarCloudPrepare@2
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         inputs:
           SonarCloud: 'SonarCloud'
@@ -1208,21 +1208,16 @@ stages:
           ./build.sh --backend -f net6.0 -r win-x64
           TEST_DIR=_tests/net6.0/win-x64/publish/ ./test.sh Windows Unit Coverage
         displayName: Coverage Unit Tests
-      - task: SonarCloudAnalyze@1
+      - task: SonarCloudAnalyze@2
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         displayName: Publish SonarCloud Results
-      - task: reportgenerator@4
+      - task: reportgenerator@5.3.11
         displayName: Generate Coverage Report
         inputs:
           reports: '$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml'
           targetdir: '$(Build.SourcesDirectory)/CoverageResults/combined'
           reporttypes: 'HtmlInline_AzurePipelines;Cobertura;Badges'
-      - task: PublishCodeCoverageResults@1
-        displayName: Publish Coverage Report
-        inputs:
-          codeCoverageTool: 'cobertura'
-          summaryFileLocation: './CoverageResults/combined/Cobertura.xml'
-          reportDirectory: './CoverageResults/combined/'
+          publishCodeCoverageResults: true
 
   - stage: Report_Out
     dependsOn:

docs.sh

@@ -1,3 +1,7 @@
+#!/bin/bash
+set -e
+
+FRAMEWORK="net6.0"
 PLATFORM=$1
 
 if [ "$PLATFORM" = "Windows" ]; then
@@ -21,15 +25,21 @@ slnFile=src/Readarr.sln
 
 platform=Posix
 
+if [ "$PLATFORM" = "Windows" ]; then
+  application=Readarr.Console.dll
+else
+  application=Readarr.dll
+fi
+
 dotnet clean $slnFile -c Debug
 dotnet clean $slnFile -c Release
 
 dotnet msbuild -restore $slnFile -p:Configuration=Debug -p:Platform=$platform -p:RuntimeIdentifiers=$RUNTIME -t:PublishAllRids
 
 dotnet new tool-manifest
-dotnet tool install --version 6.5.0 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 6.6.2 Swashbuckle.AspNetCore.Cli
 
-dotnet tool run swagger tofile --output ./src/Readarr.Api.V1/openapi.json "$outputFolder/net6.0/$RUNTIME/Readarr.console.dll" v1 &
+dotnet tool run swagger tofile --output ./src/Readarr.Api.V1/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/$application" v1 &
 
 sleep 45
 

frontend/.vscode/settings.json

@@ -9,7 +9,7 @@
 
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
 
   "typescript.preferences.quoteStyle": "single",

frontend/build/webpack.config.js

@@ -26,6 +26,7 @@ module.exports = (env) => {
   const config = {
     mode: isProduction ? 'production' : 'development',
     devtool: isProduction ? 'source-map' : 'eval-source-map',
+    target: 'web',
 
     stats: {
       children: false
@@ -67,7 +68,7 @@ module.exports = (env) => {
     output: {
       path: distFolder,
       publicPath: '/',
-      filename: '[name]-[contenthash].js',
+      filename: isProduction ? '[name]-[contenthash].js' : '[name].js',
       sourceMapFilename: '[file].map'
     },
 
@@ -92,7 +93,7 @@ module.exports = (env) => {
 
       new MiniCssExtractPlugin({
         filename: 'Content/styles.css',
-        chunkFilename: 'Content/[id]-[chunkhash].css'
+        chunkFilename: isProduction ? 'Content/[id]-[chunkhash].css' : 'Content/[id].css'
       }),
 
       new HtmlWebpackPlugin({
@@ -202,7 +203,7 @@ module.exports = (env) => {
               options: {
                 importLoaders: 1,
                 modules: {
-                  localIdentName: '[name]/[local]/[hash:base64:5]'
+                  localIdentName: isProduction ? '[name]/[local]/[hash:base64:5]' : '[name]/[local]'
                 }
               }
             },

frontend/src/Activity/History/HistoryRow.js

@@ -218,10 +218,12 @@ class HistoryRow extends Component {
                   key={name}
                   className={styles.details}
                 >
-                  <IconButton
-                    name={icons.INFO}
-                    onPress={this.onDetailsPress}
-                  />
+                  <div className={styles.actionContents}>
+                    <IconButton
+                      name={icons.INFO}
+                      onPress={this.onDetailsPress}
+                    />
+                  </div>
                 </TableRowCell>
               );
             }

frontend/src/App/AppRoutes.js

@@ -32,7 +32,7 @@ import LogsTableConnector from 'System/Events/LogsTableConnector';
 import Logs from 'System/Logs/Logs';
 import Status from 'System/Status/Status';
 import Tasks from 'System/Tasks/Tasks';
-import UpdatesConnector from 'System/Updates/UpdatesConnector';
+import Updates from 'System/Updates/Updates';
 import UnmappedFilesTableConnector from 'UnmappedFiles/UnmappedFilesTableConnector';
 import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
 import CutoffUnmetConnector from 'Wanted/CutoffUnmet/CutoffUnmetConnector';
@@ -247,7 +247,7 @@ function AppRoutes(props) {
 
       <Route
         path="/system/updates"
-        component={UpdatesConnector}
+        component={Updates}
       />
 
       <Route

frontend/src/App/State/AppState.ts

@@ -1,4 +1,7 @@
+import AuthorsAppState from './AuthorsAppState';
+import CommandAppState from './CommandAppState';
 import SettingsAppState from './SettingsAppState';
+import SystemAppState from './SystemAppState';
 import TagsAppState from './TagsAppState';
 
 interface FilterBuilderPropOption {
@@ -33,8 +36,24 @@ export interface CustomFilter {
   filers: PropertyFilter[];
 }
 
+export interface AppSectionState {
+  isConnected: boolean;
+  isReconnecting: boolean;
+  version: string;
+  prevVersion?: string;
+  dimensions: {
+    isSmallScreen: boolean;
+    width: number;
+    height: number;
+  };
+}
+
 interface AppState {
+  app: AppSectionState;
+  authors: AuthorsAppState;
+  commands: CommandAppState;
   settings: SettingsAppState;
+  system: SystemAppState;
   tags: TagsAppState;
 }
 

frontend/src/App/State/AuthorsAppState.ts

@@ -0,0 +1,18 @@
+import AppSectionState, {
+  AppSectionDeleteState,
+  AppSectionSaveState,
+} from 'App/State/AppSectionState';
+import Author from 'Author/Author';
+
+interface AuthorsAppState
+  extends AppSectionState<Author>,
+    AppSectionDeleteState,
+    AppSectionSaveState {
+  itemMap: Record<number, number>;
+
+  deleteOptions: {
+    addImportListExclusion: boolean;
+  };
+}
+
+export default AuthorsAppState;

frontend/src/App/State/CommandAppState.ts

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

frontend/src/App/State/SettingsAppState.ts

@@ -1,18 +1,23 @@
 import AppSectionState, {
   AppSectionDeleteState,
+  AppSectionItemState,
   AppSectionSaveState,
 } from 'App/State/AppSectionState';
 import DownloadClient from 'typings/DownloadClient';
 import ImportList from 'typings/ImportList';
 import Indexer from 'typings/Indexer';
+import IndexerFlag from 'typings/IndexerFlag';
 import Notification from 'typings/Notification';
-import { UiSettings } from 'typings/UiSettings';
+import General from 'typings/Settings/General';
+import UiSettings from 'typings/Settings/UiSettings';
 
 export interface DownloadClientAppState
   extends AppSectionState<DownloadClient>,
     AppSectionDeleteState,
     AppSectionSaveState {}
 
+export type GeneralAppState = AppSectionItemState<General>;
+
 export interface ImportListAppState
   extends AppSectionState<ImportList>,
     AppSectionDeleteState,
@@ -27,14 +32,17 @@ export interface NotificationAppState
   extends AppSectionState<Notification>,
     AppSectionDeleteState {}
 
+export type IndexerFlagSettingsAppState = AppSectionState<IndexerFlag>;
 export type UiSettingsAppState = AppSectionState<UiSettings>;
 
 interface SettingsAppState {
   downloadClients: DownloadClientAppState;
+  general: GeneralAppState;
   importLists: ImportListAppState;
+  indexerFlags: IndexerFlagSettingsAppState;
   indexers: IndexerAppState;
   notifications: NotificationAppState;
-  uiSettings: UiSettingsAppState;
+  ui: UiSettingsAppState;
 }
 
 export default SettingsAppState;

frontend/src/App/State/SystemAppState.ts

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

frontend/src/Author/Author.ts

@@ -0,0 +1,18 @@
+import ModelBase from 'App/ModelBase';
+
+interface Author extends ModelBase {
+  added: string;
+  genres: string[];
+  monitored: boolean;
+  overview: string;
+  path: string;
+  qualityProfileId: number;
+  metadataProfileId: number;
+  rootFolderPath: string;
+  sortName: string;
+  tags: number[];
+  authorName: string;
+  isSaving?: boolean;
+}
+
+export default Author;

frontend/src/Author/AuthorNameLink.js

@@ -2,11 +2,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Link from 'Components/Link/Link';
 
-function AuthorNameLink({ titleSlug, authorName }) {
+function AuthorNameLink({ titleSlug, authorName, ...otherProps }) {
   const link = `/author/${titleSlug}`;
 
   return (
-    <Link to={link}>
+    <Link to={link} {...otherProps}>
       {authorName}
     </Link>
   );

frontend/src/Author/Details/BookRow.css

@@ -27,3 +27,9 @@
 
   width: 80px;
 }
+
+.indexerFlags {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 50px;
+}

frontend/src/Author/Details/BookRow.css.d.ts

@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'indexerFlags': string;
   'monitored': string;
   'pageCount': string;
   'position': string;

frontend/src/Author/Details/BookRow.js

@@ -2,12 +2,17 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import BookSearchCellConnector from 'Book/BookSearchCellConnector';
 import BookTitleLink from 'Book/BookTitleLink';
+import IndexerFlags from 'Book/IndexerFlags';
+import Icon from 'Components/Icon';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
 import StarRating from 'Components/StarRating';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import TableRow from 'Components/Table/TableRow';
+import Popover from 'Components/Tooltip/Popover';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import BookStatus from './BookStatus';
 import styles from './BookRow.css';
 
@@ -59,6 +64,7 @@ class BookRow extends Component {
       releaseDate,
       title,
       seriesTitle,
+      authorName,
       position,
       pageCount,
       ratings,
@@ -66,6 +72,7 @@ class BookRow extends Component {
       authorMonitored,
       titleSlug,
       bookFiles,
+      indexerFlags,
       isEditorActive,
       isSelected,
       onSelectedChange,
@@ -189,6 +196,24 @@ class BookRow extends Component {
               );
             }
 
+            if (name === 'indexerFlags') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.indexerFlags}
+                >
+                  {indexerFlags ? (
+                    <Popover
+                      anchor={<Icon name={icons.FLAG} kind={kinds.PRIMARY} />}
+                      title={translate('IndexerFlags')}
+                      body={<IndexerFlags indexerFlags={indexerFlags} />}
+                      position={tooltipPositions.LEFT}
+                    />
+                  ) : null}
+                </TableRowCell>
+              );
+            }
+
             if (name === 'status') {
               return (
                 <TableRowCell
@@ -211,6 +236,7 @@ class BookRow extends Component {
                   bookId={id}
                   authorId={authorId}
                   bookTitle={title}
+                  authorName={authorName}
                 />
               );
             }
@@ -229,9 +255,11 @@ BookRow.propTypes = {
   releaseDate: PropTypes.string,
   title: PropTypes.string.isRequired,
   seriesTitle: PropTypes.string.isRequired,
+  authorName: PropTypes.string.isRequired,
   position: PropTypes.string,
   pageCount: PropTypes.number,
   ratings: PropTypes.object.isRequired,
+  indexerFlags: PropTypes.number.isRequired,
   titleSlug: PropTypes.string.isRequired,
   isSaving: PropTypes.bool,
   authorMonitored: PropTypes.bool.isRequired,
@@ -243,4 +271,8 @@ BookRow.propTypes = {
   onMonitorBookPress: PropTypes.func.isRequired
 };
 
+BookRow.defaultProps = {
+  indexerFlags: 0
+};
+
 export default BookRow;

frontend/src/Author/Details/BookRowConnector.js

@@ -7,21 +7,18 @@ import BookRow from './BookRow';
 const selectBookFiles = createSelector(
   (state) => state.bookFiles,
   (bookFiles) => {
-    const {
-      items
-    } = bookFiles;
+    const { items } = bookFiles;
 
-    const bookFileDict = items.reduce((acc, file) => {
+    return items.reduce((acc, file) => {
       const bookId = file.bookId;
       if (!acc.hasOwnProperty(bookId)) {
         acc[bookId] = [];
       }
 
       acc[bookId].push(file);
+
       return acc;
     }, {});
-
-    return bookFileDict;
   }
 );
 
@@ -31,9 +28,14 @@ function createMapStateToProps() {
     selectBookFiles,
     (state, { id }) => id,
     (author = {}, bookFiles, bookId) => {
+      const files = bookFiles[bookId] ?? [];
+      const bookFile = files[0];
+
       return {
         authorMonitored: author.monitored,
-        bookFiles: bookFiles[bookId] ?? []
+        authorName: author.authorName,
+        bookFiles: files,
+        indexerFlags: bookFile ? bookFile.indexerFlags : 0
       };
     }
   );

frontend/src/Author/Editor/AuthorEditorFooter.js

@@ -173,7 +173,7 @@ class AuthorEditorFooter extends Component {
     } = this.state;
 
     const monitoredOptions = [
-      { key: NO_CHANGE, value: translate('NoChange'), disabled: true },
+      { key: NO_CHANGE, value: translate('NoChange'), isDisabled: true },
       { key: 'monitored', value: translate('Monitored') },
       { key: 'unmonitored', value: translate('Unmonitored') }
     ];

frontend/src/Author/Index/Overview/AuthorIndexOverview.js

@@ -90,7 +90,7 @@ class AuthorIndexOverview extends Component {
       status,
       titleSlug,
       nextAiring,
-      statistics,
+      statistics = {},
       images,
       posterWidth,
       posterHeight,
@@ -113,10 +113,11 @@ class AuthorIndexOverview extends Component {
     } = this.props;
 
     const {
-      bookCount,
-      sizeOnDisk,
-      bookFileCount,
-      totalBookCount
+      bookCount = 0,
+      availableBookCount = 0,
+      bookFileCount = 0,
+      totalBookCount = 0,
+      sizeOnDisk = 0
     } = statistics;
 
     const {
@@ -179,6 +180,7 @@ class AuthorIndexOverview extends Component {
               monitored={monitored}
               status={status}
               bookCount={bookCount}
+              availableBookCount={availableBookCount}
               bookFileCount={bookFileCount}
               totalBookCount={totalBookCount}
               posterWidth={posterWidth}

frontend/src/Author/Index/Overview/AuthorIndexOverviewInfo.js

@@ -5,6 +5,7 @@ import dimensions from 'Styles/Variables/dimensions';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import AuthorIndexOverviewInfoRow from './AuthorIndexOverviewInfoRow';
 import styles from './AuthorIndexOverviewInfo.css';
 
@@ -76,9 +77,9 @@ function getInfoRowProps(row, props) {
     };
   }
 
-  if (name === 'qualityProfileId') {
+  if (name === 'qualityProfileId' && !!props.qualityProfile?.name) {
     return {
-      title: 'Quality Profile',
+      title: translate('QualityProfile'),
       iconName: icons.PROFILE,
       label: props.qualityProfile.name
     };

frontend/src/Author/Index/Posters/AuthorIndexPoster.js

@@ -85,7 +85,7 @@ class AuthorIndexPoster extends Component {
       titleSlug,
       status,
       nextAiring,
-      statistics,
+      statistics = {},
       images,
       posterWidth,
       posterHeight,
@@ -110,10 +110,11 @@ class AuthorIndexPoster extends Component {
     } = this.props;
 
     const {
-      bookCount,
-      sizeOnDisk,
-      bookFileCount,
-      totalBookCount
+      bookCount = 0,
+      availableBookCount = 0,
+      bookFileCount = 0,
+      totalBookCount = 0,
+      sizeOnDisk = 0
     } = statistics;
 
     const {
@@ -213,6 +214,7 @@ class AuthorIndexPoster extends Component {
             monitored={monitored}
             status={status}
             bookCount={bookCount}
+            availableBookCount={availableBookCount}
             bookFileCount={bookFileCount}
             totalBookCount={totalBookCount}
             posterWidth={posterWidth}
@@ -233,12 +235,12 @@ class AuthorIndexPoster extends Component {
               </div>
           }
 
-          {
-            showQualityProfile &&
-              <div className={styles.title}>
-                {qualityProfile.name}
-              </div>
-          }
+          {showQualityProfile && !!qualityProfile?.name ? (
+            <div className={styles.title} title={translate('QualityProfile')}>
+              {qualityProfile.name}
+            </div>
+          ) : null}
+
           {
             nextAiring &&
               <div className={styles.nextAiring}>

frontend/src/Author/Index/ProgressBar/AuthorIndexProgressBar.js

@@ -11,14 +11,15 @@ function AuthorIndexProgressBar(props) {
     monitored,
     status,
     bookCount,
+    availableBookCount,
     bookFileCount,
     totalBookCount,
     posterWidth,
     detailedProgressBar
   } = props;
 
-  const progress = bookCount ? bookCount / totalBookCount * 100 : 100;
-  const text = `${bookCount} / ${totalBookCount}`;
+  const progress = bookCount ? (availableBookCount / bookCount) * 100 : 100;
+  const text = `${availableBookCount} / ${bookCount}`;
 
   return (
     <ProgressBar
@@ -29,7 +30,7 @@ function AuthorIndexProgressBar(props) {
       size={detailedProgressBar ? sizes.MEDIUM : sizes.SMALL}
       showText={detailedProgressBar}
       text={text}
-      title={translate('BookFileCountBookCountTotalTotalBookCountInterp', [bookFileCount, bookCount, totalBookCount])}
+      title={translate('AuthorProgressBarText', { bookCount, availableBookCount, bookFileCount, totalBookCount })}
       width={posterWidth}
     />
   );
@@ -39,6 +40,7 @@ AuthorIndexProgressBar.propTypes = {
   monitored: PropTypes.bool.isRequired,
   status: PropTypes.string.isRequired,
   bookCount: PropTypes.number.isRequired,
+  availableBookCount: PropTypes.number.isRequired,
   bookFileCount: PropTypes.number.isRequired,
   totalBookCount: PropTypes.number.isRequired,
   posterWidth: PropTypes.number.isRequired,

frontend/src/Author/Index/Table/AuthorIndexRow.js

@@ -90,7 +90,7 @@ class AuthorIndexRow extends Component {
       nextBook,
       lastBook,
       added,
-      statistics,
+      statistics = {},
       genres,
       ratings,
       path,
@@ -110,10 +110,11 @@ class AuthorIndexRow extends Component {
     } = this.props;
 
     const {
-      bookCount,
-      bookFileCount,
-      totalBookCount,
-      sizeOnDisk
+      bookCount = 0,
+      availableBookCount = 0,
+      bookFileCount = 0,
+      totalBookCount = 0,
+      sizeOnDisk = 0
     } = statistics;
 
     const {
@@ -208,7 +209,7 @@ class AuthorIndexRow extends Component {
                   key={name}
                   className={styles[name]}
                 >
-                  {qualityProfile.name}
+                  {qualityProfile?.name ?? ''}
                 </VirtualTableRowCell>
               );
             }
@@ -219,7 +220,7 @@ class AuthorIndexRow extends Component {
                   key={name}
                   className={styles[name]}
                 >
-                  {metadataProfile.name}
+                  {metadataProfile?.name ?? ''}
                 </VirtualTableRowCell>
               );
             }
@@ -286,7 +287,7 @@ class AuthorIndexRow extends Component {
             }
 
             if (name === 'bookProgress') {
-              const progress = bookCount ? bookFileCount / bookCount * 100 : 100;
+              const progress = bookCount ? (availableBookCount / bookCount) * 100 : 100;
 
               return (
                 <VirtualTableRowCell
@@ -297,8 +298,8 @@ class AuthorIndexRow extends Component {
                     progress={progress}
                     kind={getProgressBarKind(status, monitored, progress)}
                     showText={true}
-                    text={`${bookCount} / ${totalBookCount}`}
-                    title={translate('BookFileCountBookCountTotalTotalBookCountInterp', [bookFileCount, bookCount, totalBookCount])}
+                    text={`${availableBookCount} / ${bookCount}`}
+                    title={translate('AuthorProgressBarText', { bookCount, availableBookCount, bookFileCount, totalBookCount })}
                     width={125}
                   />
                 </VirtualTableRowCell>

frontend/src/Book/BookSearchCell.js

@@ -38,6 +38,7 @@ class BookSearchCell extends Component {
     const {
       bookId,
       bookTitle,
+      authorName,
       isSearching,
       onSearchPress,
       ...otherProps
@@ -60,6 +61,7 @@ class BookSearchCell extends Component {
           isOpen={this.state.isDetailsModalOpen}
           bookId={bookId}
           bookTitle={bookTitle}
+          authorName={authorName}
           onModalClose={this.onDetailsModalClose}
           {...otherProps}
         />
@@ -73,6 +75,7 @@ BookSearchCell.propTypes = {
   bookId: PropTypes.number.isRequired,
   authorId: PropTypes.number.isRequired,
   bookTitle: PropTypes.string.isRequired,
+  authorName: PropTypes.string.isRequired,
   isSearching: PropTypes.bool.isRequired,
   onSearchPress: PropTypes.func.isRequired
 };

frontend/src/Book/Details/BookDetailsHeader.css

@@ -84,9 +84,15 @@
   font-size: 20px;
 }
 
+.authorLink {
+  composes: link from '~Components/Link/Link.css';
+
+  margin-right: 15px;
+  color: var(--white);
+}
+
 .duration {
   margin-right: 15px;
-  margin-left: 10px;
 }
 
 .detailsLabel {

frontend/src/Book/Details/BookDetailsHeader.css.d.ts

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'alternateTitlesIconContainer': string;
+  'authorLink': string;
   'backdrop': string;
   'backdropOverlay': string;
   'cover': string;

frontend/src/Book/Details/BookDetailsHeader.js

@@ -2,6 +2,7 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import TextTruncate from 'react-text-truncate';
+import AuthorNameLink from 'Author/AuthorNameLink';
 import BookCover from 'Book/BookCover';
 import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
@@ -113,7 +114,7 @@ class BookDetailsHeader extends Component {
                     className={styles.monitorToggleButton}
                     monitored={monitored}
                     isSaving={isSaving}
-                    size={isSmallScreen ? 30: 40}
+                    size={isSmallScreen ? 30 : 40}
                     onPress={onMonitorTogglePress}
                   />
                 </div>
@@ -131,7 +132,12 @@ class BookDetailsHeader extends Component {
               </div>
 
               <div>
-                {author.authorName}
+                <AuthorNameLink
+                  className={styles.authorLink}
+                  titleSlug={author.titleSlug}
+                  authorName={author.authorName}
+                />
+
                 {
                   !!pageCount &&
                     <span className={styles.duration}>

frontend/src/Book/Editor/BookEditorFooter.js

@@ -89,7 +89,7 @@ class BookEditorFooter extends Component {
     } = this.state;
 
     const monitoredOptions = [
-      { key: NO_CHANGE, value: translate('NoChange'), disabled: true },
+      { key: NO_CHANGE, value: translate('NoChange'), isDisabled: true },
       { key: 'monitored', value: translate('Monitored') },
       { key: 'unmonitored', value: translate('Unmonitored') }
     ];

frontend/src/Book/Index/Overview/BookIndexOverviewInfo.js

@@ -5,6 +5,7 @@ import dimensions from 'Styles/Variables/dimensions';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import BookIndexOverviewInfoRow from './BookIndexOverviewInfoRow';
 import styles from './BookIndexOverviewInfo.css';
 
@@ -71,9 +72,9 @@ function getInfoRowProps(row, props) {
     };
   }
 
-  if (name === 'qualityProfileId') {
+  if (name === 'qualityProfileId' && !!props.qualityProfile?.name) {
     return {
-      title: 'Quality Profile',
+      title: translate('QualityProfile'),
       iconName: icons.PROFILE,
       label: props.qualityProfile.name
     };

frontend/src/Book/Index/Posters/BookIndexPoster.js

@@ -250,12 +250,12 @@ class BookIndexPoster extends Component {
               </div>
           }
 
-          {
-            showQualityProfile &&
-              <div className={styles.title}>
-                {qualityProfile.name}
-              </div>
-          }
+          {showQualityProfile && !!qualityProfile?.name ? (
+            <div className={styles.title} title={translate('QualityProfile')}>
+              {qualityProfile.name}
+            </div>
+          ) : null}
+
           {
             nextAiring &&
               <div className={styles.nextAiring}>

frontend/src/Book/Index/ProgressBar/BookIndexProgressBar.js

@@ -16,8 +16,8 @@ function BookIndexProgressBar(props) {
     detailedProgressBar
   } = props;
 
-  const progress = bookCount ? bookFileCount / totalBookCount * 100 : 0;
-  const text = `${bookFileCount} / ${bookCount}`;
+  const progress = bookFileCount && bookCount ? (totalBookCount / bookCount) * 100 : 0;
+  const text = `${bookFileCount ? bookCount : 0} / ${totalBookCount}`;
 
   return (
     <ProgressBar
@@ -28,7 +28,11 @@ function BookIndexProgressBar(props) {
       size={detailedProgressBar ? sizes.MEDIUM : sizes.SMALL}
       showText={detailedProgressBar}
       text={text}
-      title={translate('BookFileCountBookCountTotalTotalBookCountInterp', [bookFileCount, bookCount, totalBookCount])}
+      title={translate('BookProgressBarText', {
+        bookCount: bookFileCount ? bookCount : 0,
+        bookFileCount,
+        totalBookCount
+      })}
       width={posterWidth}
     />
   );

frontend/src/Book/Index/Table/BookIndexRow.js

@@ -195,7 +195,7 @@ class BookIndexRow extends Component {
                   key={name}
                   className={styles[name]}
                 >
-                  {qualityProfile.name}
+                  {qualityProfile?.name ?? ''}
                 </VirtualTableRowCell>
               );
             }

frontend/src/Book/IndexerFlags.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import createIndexerFlagsSelector from 'Store/Selectors/createIndexerFlagsSelector';
+
+interface IndexerFlagsProps {
+  indexerFlags: number;
+}
+
+function IndexerFlags({ indexerFlags = 0 }: IndexerFlagsProps) {
+  const allIndexerFlags = useSelector(createIndexerFlagsSelector);
+
+  const flags = allIndexerFlags.items.filter(
+    // eslint-disable-next-line no-bitwise
+    (item) => (indexerFlags & item.id) === item.id
+  );
+
+  return flags.length ? (
+    <ul>
+      {flags.map((flag, index) => {
+        return <li key={index}>{flag.name}</li>;
+      })}
+    </ul>
+  ) : null;
+}
+
+export default IndexerFlags;

frontend/src/Book/Search/BookInteractiveSearchModal.js

@@ -9,19 +9,21 @@ function BookInteractiveSearchModal(props) {
     isOpen,
     bookId,
     bookTitle,
+    authorName,
     onModalClose
   } = props;
 
   return (
     <Modal
       isOpen={isOpen}
-      size={sizes.EXTRA_LARGE}
+      size={sizes.EXTRA_EXTRA_LARGE}
       closeOnBackgroundClick={false}
       onModalClose={onModalClose}
     >
       <BookInteractiveSearchModalContent
         bookId={bookId}
         bookTitle={bookTitle}
+        authorName={authorName}
         onModalClose={onModalClose}
       />
     </Modal>
@@ -32,6 +34,7 @@ BookInteractiveSearchModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   bookId: PropTypes.number.isRequired,
   bookTitle: PropTypes.string.isRequired,
+  authorName: PropTypes.string.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 

frontend/src/Book/Search/BookInteractiveSearchModalContent.js

@@ -7,18 +7,23 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { scrollDirections } from 'Helpers/Props';
 import InteractiveSearchConnector from 'InteractiveSearch/InteractiveSearchConnector';
+import translate from 'Utilities/String/translate';
 
 function BookInteractiveSearchModalContent(props) {
   const {
     bookId,
     bookTitle,
+    authorName,
     onModalClose
   } = props;
 
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        Interactive Search  {bookId != null && `- ${bookTitle}`}
+        {bookId === null ?
+          translate('InteractiveSearchModalHeader') :
+          translate('InteractiveSearchModalHeaderBookAuthor', { bookTitle, authorName })
+        }
       </ModalHeader>
 
       <ModalBody scrollDirection={scrollDirections.BOTH}>
@@ -32,7 +37,7 @@ function BookInteractiveSearchModalContent(props) {
 
       <ModalFooter>
         <Button onPress={onModalClose}>
-          Close
+          {translate('Close')}
         </Button>
       </ModalFooter>
     </ModalContent>
@@ -42,6 +47,7 @@ function BookInteractiveSearchModalContent(props) {
 BookInteractiveSearchModalContent.propTypes = {
   bookId: PropTypes.number.isRequired,
   bookTitle: PropTypes.string.isRequired,
+  authorName: PropTypes.string.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 

frontend/src/BookFile/Editor/BookFileEditorTableContent.js

@@ -116,7 +116,7 @@ class BookFileEditorTableContent extends Component {
       });
 
       return acc;
-    }, [{ key: 'selectQuality', value: 'Select Quality', disabled: true }]);
+    }, [{ key: 'selectQuality', value: translate('SelectQuality'), isDisabled: true }]);
 
     const hasSelectedFiles = this.getSelectedIds().length > 0;
 

frontend/src/Bookshelf/BookshelfBook.js

@@ -27,14 +27,15 @@ class BookshelfBook extends Component {
       title,
       disambiguation,
       monitored,
-      statistics,
+      statistics = {},
       isSaving
     } = this.props;
 
     const {
-      bookFileCount,
-      totalBookCount,
-      percentOfBooks
+      bookCount = 0,
+      bookFileCount = 0,
+      totalBookCount = 0,
+      percentOfBooks = 0
     } = statistics;
 
     return (
@@ -59,10 +60,14 @@ class BookshelfBook extends Component {
             percentOfBooks < 100 && monitored && styles.missingWanted,
             percentOfBooks === 100 && styles.allBooks
           )}
-          title={translate('BookFileCounttotalBookCountBooksDownloadedInterp', [bookFileCount, totalBookCount])}
+          title={translate('BookProgressBarText', {
+            bookCount: bookFileCount ? bookCount : 0,
+            bookFileCount,
+            totalBookCount
+          })}
         >
           {
-            totalBookCount === 0 ? '0/0' : `${bookFileCount}/${totalBookCount}`
+            totalBookCount === 0 ? '0/0' : `${bookFileCount ? bookCount : 0}/${totalBookCount}`
           }
         </div>
       </div>

frontend/src/Bookshelf/BookshelfFooter.js

@@ -88,7 +88,7 @@ class BookshelfFooter extends Component {
     } = this.state;
 
     const monitoredOptions = [
-      { key: NO_CHANGE, value: translate('NoChange'), disabled: true },
+      { key: NO_CHANGE, value: translate('NoChange'), isDisabled: true },
       { key: 'monitored', value: translate('Monitored') },
       { key: 'unmonitored', value: translate('Unmonitored') }
     ];

frontend/src/Commands/Command.ts

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

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

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

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

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

frontend/src/Components/Form/DownloadClientSelectInputConnector.js

@@ -25,7 +25,8 @@ function createMapStateToProps() {
       const values = _.map(filteredItems.sort(sortByName), (downloadClient) => {
         return {
           key: downloadClient.id,
-          value: downloadClient.name
+          value: downloadClient.name,
+          hint: `(${downloadClient.id})`
         };
       });
 

frontend/src/Components/Form/EnhancedSelectInput.css

@@ -19,7 +19,7 @@
 
 .isDisabled {
   opacity: 0.7;
-  cursor: not-allowed;
+  cursor: not-allowed !important;
 }
 
 .dropdownArrowContainer {

frontend/src/Components/Form/FormInputGroup.js

@@ -14,6 +14,7 @@ import DownloadClientSelectInputConnector from './DownloadClientSelectInputConne
 import EnhancedSelectInput from './EnhancedSelectInput';
 import EnhancedSelectInputConnector from './EnhancedSelectInputConnector';
 import FormInputHelpText from './FormInputHelpText';
+import IndexerFlagsSelectInput from './IndexerFlagsSelectInput';
 import IndexerSelectInputConnector from './IndexerSelectInputConnector';
 import KeyValueListInput from './KeyValueListInput';
 import MetadataProfileSelectInputConnector from './MetadataProfileSelectInputConnector';
@@ -83,6 +84,9 @@ function getComponent(type) {
     case inputTypes.INDEXER_SELECT:
       return IndexerSelectInputConnector;
 
+    case inputTypes.INDEXER_FLAGS_SELECT:
+      return IndexerFlagsSelectInput;
+
     case inputTypes.DOWNLOAD_CLIENT_SELECT:
       return DownloadClientSelectInputConnector;
 
@@ -288,6 +292,7 @@ FormInputGroup.propTypes = {
   includeNoChange: PropTypes.bool,
   includeNoChangeDisabled: PropTypes.bool,
   selectedValueOptions: PropTypes.object,
+  indexerFlags: PropTypes.number,
   pending: PropTypes.bool,
   errors: PropTypes.arrayOf(PropTypes.object),
   warnings: PropTypes.arrayOf(PropTypes.object),

frontend/src/Components/Form/IndexerFlagsSelectInput.tsx

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import EnhancedSelectInput from './EnhancedSelectInput';
+
+const selectIndexerFlagsValues = (selectedFlags: number) =>
+  createSelector(
+    (state: AppState) => state.settings.indexerFlags,
+    (indexerFlags) => {
+      const value = indexerFlags.items.reduce((acc: number[], { id }) => {
+        // eslint-disable-next-line no-bitwise
+        if ((selectedFlags & id) === id) {
+          acc.push(id);
+        }
+
+        return acc;
+      }, []);
+
+      const values = indexerFlags.items.map(({ id, name }) => ({
+        key: id,
+        value: name,
+      }));
+
+      return {
+        value,
+        values,
+      };
+    }
+  );
+
+interface IndexerFlagsSelectInputProps {
+  name: string;
+  indexerFlags: number;
+  onChange(payload: object): void;
+}
+
+function IndexerFlagsSelectInput(props: IndexerFlagsSelectInputProps) {
+  const { indexerFlags, onChange } = props;
+
+  const { value, values } = useSelector(selectIndexerFlagsValues(indexerFlags));
+
+  const onChangeWrapper = useCallback(
+    ({ name, value }: { name: string; value: number[] }) => {
+      const indexerFlags = value.reduce((acc, flagId) => acc + flagId, 0);
+
+      onChange({ name, value: indexerFlags });
+    },
+    [onChange]
+  );
+
+  return (
+    <EnhancedSelectInput
+      {...props}
+      value={value}
+      values={values}
+      onChange={onChangeWrapper}
+    />
+  );
+}
+
+export default IndexerFlagsSelectInput;

frontend/src/Components/Form/MetadataProfileSelectInputConnector.js

@@ -39,7 +39,7 @@ function createMapStateToProps() {
         values.unshift({
           key: 'noChange',
           value: translate('NoChange'),
-          disabled: includeNoChangeDisabled
+          isDisabled: includeNoChangeDisabled
         });
       }
 
@@ -47,7 +47,7 @@ function createMapStateToProps() {
         values.unshift({
           key: 'mixed',
           value: '(Mixed)',
-          disabled: true
+          isDisabled: true
         });
       }
 

frontend/src/Components/Form/MonitorBooksSelectInput.js

@@ -18,7 +18,7 @@ function MonitorBooksSelectInput(props) {
     values.unshift({
       key: 'noChange',
       value: translate('NoChange'),
-      disabled: true
+      isDisabled: true
     });
   }
 
@@ -26,7 +26,7 @@ function MonitorBooksSelectInput(props) {
     values.unshift({
       key: 'mixed',
       value: '(Mixed)',
-      disabled: true
+      isDisabled: true
     });
   }
 

frontend/src/Components/Form/MonitorNewItemsSelectInput.js

@@ -17,7 +17,7 @@ function MonitorNewItemsSelectInput(props) {
     values.unshift({
       key: 'noChange',
       value: translate('NoChange'),
-      disabled: true
+      isDisabled: true
     });
   }
 
@@ -25,7 +25,7 @@ function MonitorNewItemsSelectInput(props) {
     values.unshift({
       key: 'mixed',
       value: '(Mixed)',
-      disabled: true
+      isDisabled: true
     });
   }
 

frontend/src/Components/Form/PasswordInput.css

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

frontend/src/Components/Form/PasswordInput.js

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

frontend/src/Components/Form/QualityProfileSelectInputConnector.js

@@ -26,7 +26,7 @@ function createMapStateToProps() {
         values.unshift({
           key: 'noChange',
           value: translate('NoChange'),
-          disabled: includeNoChangeDisabled
+          isDisabled: includeNoChangeDisabled
         });
       }
 
@@ -34,7 +34,7 @@ function createMapStateToProps() {
         values.unshift({
           key: 'mixed',
           value: '(Mixed)',
-          disabled: true
+          isDisabled: true
         });
       }
 

frontend/src/Components/Form/TextTagInputConnector.js

@@ -91,6 +91,7 @@ class TextTagInputConnector extends Component {
   render() {
     return (
       <TagInput
+        delimiters={['Tab', 'Enter', ',']}
         tagList={[]}
         onTagAdd={this.onTagAdd}
         onTagDelete={this.onTagDelete}

frontend/src/Components/HeartRating.css

@@ -2,3 +2,7 @@
   margin-right: 5px;
   color: var(--themeRed);
 }
+
+.rating {
+  margin-right: 15px;
+}

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

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

frontend/src/Components/HeartRating.js

@@ -6,7 +6,7 @@ import styles from './HeartRating.css';
 
 function HeartRating({ rating, iconSize }) {
   return (
-    <span>
+    <span className={styles.rating}>
       <Icon
         className={styles.heart}
         name={icons.HEART}

frontend/src/Components/Modal/Modal.css

@@ -63,6 +63,13 @@
   width: 1280px;
 }
 
+
+.extraExtraLarge {
+  composes: modal;
+
+  width: 1600px;
+}
+
 @media only screen and (max-width: $breakpointExtraLarge) {
   .modal.extraLarge {
     width: 90%;
@@ -90,7 +97,8 @@
   .modal.small,
   .modal.medium,
   .modal.large,
-  .modal.extraLarge {
+  .modal.extraLarge,
+  .modal.extraExtraLarge {
     max-height: 100%;
     width: 100%;
     height: 100% !important;

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

@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'extraExtraLarge': string;
   'extraLarge': string;
   'large': string;
   'medium': string;

frontend/src/Components/MonitorToggleButton.css

@@ -3,9 +3,9 @@
 
   padding: 0;
   font-size: inherit;
-}
 
-.isDisabled {
-  color: var(--disabledColor);
-  cursor: not-allowed;
+  &.isDisabled {
+    color: var(--disabledColor);
+    cursor: not-allowed;
+  }
 }

frontend/src/Components/Page/Page.js

@@ -4,6 +4,7 @@ import AppUpdatedModalConnector from 'App/AppUpdatedModalConnector';
 import ColorImpairedContext from 'App/ColorImpairedContext';
 import ConnectionLostModalConnector from 'App/ConnectionLostModalConnector';
 import SignalRConnector from 'Components/SignalRConnector';
+import AuthenticationRequiredModal from 'FirstRun/AuthenticationRequiredModal';
 import locationShape from 'Helpers/Props/Shapes/locationShape';
 import PageHeader from './Header/PageHeader';
 import PageSidebar from './Sidebar/PageSidebar';
@@ -75,6 +76,7 @@ class Page extends Component {
       isSmallScreen,
       isSidebarVisible,
       enableColorImpairedMode,
+      authenticationEnabled,
       onSidebarToggle,
       onSidebarVisibleChange
     } = this.props;
@@ -108,6 +110,10 @@ class Page extends Component {
             isOpen={this.state.isConnectionLostModalOpen}
             onModalClose={this.onConnectionLostModalClose}
           />
+
+          <AuthenticationRequiredModal
+            isOpen={!authenticationEnabled}
+          />
         </div>
       </ColorImpairedContext.Provider>
     );
@@ -123,6 +129,7 @@ Page.propTypes = {
   isUpdated: PropTypes.bool.isRequired,
   isDisconnected: PropTypes.bool.isRequired,
   enableColorImpairedMode: PropTypes.bool.isRequired,
+  authenticationEnabled: PropTypes.bool.isRequired,
   onResize: PropTypes.func.isRequired,
   onSidebarToggle: PropTypes.func.isRequired,
   onSidebarVisibleChange: PropTypes.func.isRequired

frontend/src/Components/Page/PageConnector.js

@@ -7,10 +7,18 @@ import { fetchTranslations, saveDimensions, setIsSidebarVisible } from 'Store/Ac
 import { fetchAuthor } from 'Store/Actions/authorActions';
 import { fetchBooks } from 'Store/Actions/bookActions';
 import { fetchCustomFilters } from 'Store/Actions/customFilterActions';
-import { fetchImportLists, fetchLanguages, fetchMetadataProfiles, fetchQualityProfiles, fetchUISettings } from 'Store/Actions/settingsActions';
+import {
+  fetchImportLists,
+  fetchIndexerFlags,
+  fetchLanguages,
+  fetchMetadataProfiles,
+  fetchQualityProfiles,
+  fetchUISettings
+} from 'Store/Actions/settingsActions';
 import { fetchStatus } from 'Store/Actions/systemActions';
 import { fetchTags } from 'Store/Actions/tagActions';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
 import ErrorPage from './ErrorPage';
 import LoadingPage from './LoadingPage';
 import Page from './Page';
@@ -44,6 +52,7 @@ const selectAppProps = createSelector(
 );
 
 const selectIsPopulated = createSelector(
+  (state) => state.authors.isPopulated,
   (state) => state.customFilters.isPopulated,
   (state) => state.tags.isPopulated,
   (state) => state.settings.ui.isPopulated,
@@ -51,9 +60,11 @@ const selectIsPopulated = createSelector(
   (state) => state.settings.qualityProfiles.isPopulated,
   (state) => state.settings.metadataProfiles.isPopulated,
   (state) => state.settings.importLists.isPopulated,
+  (state) => state.settings.indexerFlags.isPopulated,
   (state) => state.system.status.isPopulated,
   (state) => state.app.translations.isPopulated,
   (
+    authorsIsPopulated,
     customFiltersIsPopulated,
     tagsIsPopulated,
     uiSettingsIsPopulated,
@@ -61,10 +72,12 @@ const selectIsPopulated = createSelector(
     qualityProfilesIsPopulated,
     metadataProfilesIsPopulated,
     importListsIsPopulated,
+    indexerFlagsIsPopulated,
     systemStatusIsPopulated,
     translationsIsPopulated
   ) => {
     return (
+      authorsIsPopulated &&
       customFiltersIsPopulated &&
       tagsIsPopulated &&
       uiSettingsIsPopulated &&
@@ -72,6 +85,7 @@ const selectIsPopulated = createSelector(
       qualityProfilesIsPopulated &&
       metadataProfilesIsPopulated &&
       importListsIsPopulated &&
+      indexerFlagsIsPopulated &&
       systemStatusIsPopulated &&
       translationsIsPopulated
     );
@@ -79,6 +93,7 @@ const selectIsPopulated = createSelector(
 );
 
 const selectErrors = createSelector(
+  (state) => state.authors.error,
   (state) => state.customFilters.error,
   (state) => state.tags.error,
   (state) => state.settings.ui.error,
@@ -86,9 +101,11 @@ const selectErrors = createSelector(
   (state) => state.settings.qualityProfiles.error,
   (state) => state.settings.metadataProfiles.error,
   (state) => state.settings.importLists.error,
+  (state) => state.settings.indexerFlags.error,
   (state) => state.system.status.error,
   (state) => state.app.translations.error,
   (
+    authorsError,
     customFiltersError,
     tagsError,
     uiSettingsError,
@@ -96,10 +113,12 @@ const selectErrors = createSelector(
     qualityProfilesError,
     metadataProfilesError,
     importListsError,
+    indexerFlagsError,
     systemStatusError,
     translationsError
   ) => {
     const hasError = !!(
+      authorsError ||
       customFiltersError ||
       tagsError ||
       uiSettingsError ||
@@ -107,6 +126,7 @@ const selectErrors = createSelector(
       qualityProfilesError ||
       metadataProfilesError ||
       importListsError ||
+      indexerFlagsError ||
       systemStatusError ||
       translationsError
     );
@@ -120,6 +140,7 @@ const selectErrors = createSelector(
       qualityProfilesError,
       metadataProfilesError,
       importListsError,
+      indexerFlagsError,
       systemStatusError,
       translationsError
     };
@@ -133,18 +154,21 @@ function createMapStateToProps() {
     selectErrors,
     selectAppProps,
     createDimensionsSelector(),
+    createSystemStatusSelector(),
     (
       enableColorImpairedMode,
       isPopulated,
       errors,
       app,
-      dimensions
+      dimensions,
+      systemStatus
     ) => {
       return {
         ...app,
         ...errors,
         isPopulated,
         isSmallScreen: dimensions.isSmallScreen,
+        authenticationEnabled: systemStatus.authentication !== 'none',
         enableColorImpairedMode
       };
     }
@@ -177,6 +201,9 @@ function createMapDispatchToProps(dispatch, props) {
     dispatchFetchImportLists() {
       dispatch(fetchImportLists());
     },
+    dispatchFetchIndexerFlags() {
+      dispatch(fetchIndexerFlags());
+    },
     dispatchFetchUISettings() {
       dispatch(fetchUISettings());
     },
@@ -218,6 +245,7 @@ class PageConnector extends Component {
       this.props.dispatchFetchQualityProfiles();
       this.props.dispatchFetchMetadataProfiles();
       this.props.dispatchFetchImportLists();
+      this.props.dispatchFetchIndexerFlags();
       this.props.dispatchFetchUISettings();
       this.props.dispatchFetchStatus();
       this.props.dispatchFetchTranslations();
@@ -245,6 +273,7 @@ class PageConnector extends Component {
       dispatchFetchQualityProfiles,
       dispatchFetchMetadataProfiles,
       dispatchFetchImportLists,
+      dispatchFetchIndexerFlags,
       dispatchFetchUISettings,
       dispatchFetchStatus,
       dispatchFetchTranslations,
@@ -287,6 +316,7 @@ PageConnector.propTypes = {
   dispatchFetchQualityProfiles: PropTypes.func.isRequired,
   dispatchFetchMetadataProfiles: PropTypes.func.isRequired,
   dispatchFetchImportLists: PropTypes.func.isRequired,
+  dispatchFetchIndexerFlags: PropTypes.func.isRequired,
   dispatchFetchUISettings: PropTypes.func.isRequired,
   dispatchFetchStatus: PropTypes.func.isRequired,
   dispatchFetchTranslations: PropTypes.func.isRequired,

frontend/src/Components/SignalRConnector.js

@@ -253,7 +253,7 @@ class SignalRConnector extends Component {
   handleWantedCutoff = (body) => {
     if (body.action === 'updated') {
       this.props.dispatchUpdateItem({
-        section: 'cutoffUnmet',
+        section: 'wanted.cutoffUnmet',
         updateOnly: true,
         ...body.resource
       });
@@ -263,7 +263,7 @@ class SignalRConnector extends Component {
   handleWantedMissing = (body) => {
     if (body.action === 'updated') {
       this.props.dispatchUpdateItem({
-        section: 'missing',
+        section: 'wanted.missing',
         updateOnly: true,
         ...body.resource
       });

frontend/src/Content/Fonts/fonts.css

@@ -25,14 +25,3 @@
   font-family: 'Ubuntu Mono';
   src: url('UbuntuMono-Regular.eot?#iefix&v=1.3.0') format('embedded-opentype'), url('UbuntuMono-Regular.woff?v=1.3.0') format('woff'), url('UbuntuMono-Regular.ttf?v=1.3.0') format('truetype');
 }
-
-/*
- * text-security-disc
- */
-
-@font-face {
-  font-weight: normal;
-  font-style: normal;
-  font-family: 'text-security-disc';
-  src: url('text-security-disc.woff?v=1.3.0') format('woff'), url('text-security-disc.ttf?v=1.3.0') format('truetype');
-}

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

@@ -15,5 +15,5 @@
     "start_url": "../../../../",
     "theme_color": "#3a3f51",
     "background_color": "#3a3f51",
-    "display": "minimal-ui"
+    "display": "standalone"
 }

frontend/src/FirstRun/AuthenticationRequiredModal.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import AuthenticationRequiredModalContentConnector from './AuthenticationRequiredModalContentConnector';
+
+function onModalClose() {
+  // No-op
+}
+
+function AuthenticationRequiredModal(props) {
+  const {
+    isOpen
+  } = props;
+
+  return (
+    <Modal
+      size={sizes.MEDIUM}
+      isOpen={isOpen}
+      closeOnBackgroundClick={false}
+      onModalClose={onModalClose}
+    >
+      <AuthenticationRequiredModalContentConnector
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+AuthenticationRequiredModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired
+};
+
+export default AuthenticationRequiredModal;

frontend/src/FirstRun/AuthenticationRequiredModalContent.css

@@ -0,0 +1,5 @@
+.authRequiredAlert {
+  composes: alert from '~Components/Alert.css';
+
+  margin-bottom: 20px;
+}

frontend/src/FirstRun/AuthenticationRequiredModalContent.css.d.ts

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

frontend/src/FirstRun/AuthenticationRequiredModalContent.js

@@ -0,0 +1,170 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef } from 'react';
+import Alert from 'Components/Alert';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes, kinds } from 'Helpers/Props';
+import { authenticationMethodOptions, authenticationRequiredOptions } from 'Settings/General/SecuritySettings';
+import translate from 'Utilities/String/translate';
+import styles from './AuthenticationRequiredModalContent.css';
+
+function onModalClose() {
+  // No-op
+}
+
+function AuthenticationRequiredModalContent(props) {
+  const {
+    isPopulated,
+    error,
+    isSaving,
+    settings,
+    onInputChange,
+    onSavePress,
+    dispatchFetchStatus
+  } = props;
+
+  const {
+    authenticationMethod,
+    authenticationRequired,
+    username,
+    password,
+    passwordConfirmation
+  } = settings;
+
+  const authenticationEnabled = authenticationMethod && authenticationMethod.value !== 'none';
+
+  const didMount = useRef(false);
+
+  useEffect(() => {
+    if (!isSaving && didMount.current) {
+      dispatchFetchStatus();
+    }
+
+    didMount.current = true;
+  }, [isSaving, dispatchFetchStatus]);
+
+  return (
+    <ModalContent
+      showCloseButton={false}
+      onModalClose={onModalClose}
+    >
+      <ModalHeader>
+        {translate('AuthenticationRequired')}
+      </ModalHeader>
+
+      <ModalBody>
+        <Alert
+          className={styles.authRequiredAlert}
+          kind={kinds.WARNING}
+        >
+          {translate('AuthenticationRequiredWarning')}
+        </Alert>
+
+        {
+          isPopulated && !error ?
+            <div>
+              <FormGroup>
+                <FormLabel>{translate('AuthenticationMethod')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.SELECT}
+                  name="authenticationMethod"
+                  values={authenticationMethodOptions}
+                  helpText={translate('AuthenticationMethodHelpText')}
+                  helpTextWarning={authenticationMethod.value === 'none' ? translate('AuthenticationMethodHelpTextWarning') : undefined}
+                  helpLink="https://wiki.servarr.com/readarr/faq#forced-authentication"
+                  onChange={onInputChange}
+                  {...authenticationMethod}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('AuthenticationRequired')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.SELECT}
+                  name="authenticationRequired"
+                  values={authenticationRequiredOptions}
+                  helpText={translate('AuthenticationRequiredHelpText')}
+                  onChange={onInputChange}
+                  {...authenticationRequired}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('Username')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.TEXT}
+                  name="username"
+                  onChange={onInputChange}
+                  helpTextWarning={username?.value ? undefined : translate('AuthenticationRequiredUsernameHelpTextWarning')}
+                  {...username}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('Password')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.PASSWORD}
+                  name="password"
+                  onChange={onInputChange}
+                  helpTextWarning={password?.value ? undefined : translate('AuthenticationRequiredPasswordHelpTextWarning')}
+                  {...password}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('PasswordConfirmation')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.PASSWORD}
+                  name="passwordConfirmation"
+                  onChange={onInputChange}
+                  helpTextWarning={passwordConfirmation?.value ? undefined : translate('AuthenticationRequiredPasswordConfirmationHelpTextWarning')}
+                  {...passwordConfirmation}
+                />
+              </FormGroup>
+            </div> :
+            null
+        }
+
+        {
+          !isPopulated && !error ? <LoadingIndicator /> : null
+        }
+      </ModalBody>
+
+      <ModalFooter>
+        <SpinnerButton
+          kind={kinds.PRIMARY}
+          isSpinning={isSaving}
+          isDisabled={!authenticationEnabled}
+          onPress={onSavePress}
+        >
+          {translate('Save')}
+        </SpinnerButton>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+AuthenticationRequiredModalContent.propTypes = {
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  settings: PropTypes.object.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onSavePress: PropTypes.func.isRequired,
+  dispatchFetchStatus: PropTypes.func.isRequired
+};
+
+export default AuthenticationRequiredModalContent;

frontend/src/FirstRun/AuthenticationRequiredModalContentConnector.js

@@ -0,0 +1,86 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import { fetchGeneralSettings, saveGeneralSettings, setGeneralSettingsValue } from 'Store/Actions/settingsActions';
+import { fetchStatus } from 'Store/Actions/systemActions';
+import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
+import AuthenticationRequiredModalContent from './AuthenticationRequiredModalContent';
+
+const SECTION = 'general';
+
+function createMapStateToProps() {
+  return createSelector(
+    createSettingsSectionSelector(SECTION),
+    (sectionSettings) => {
+      return {
+        ...sectionSettings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchClearPendingChanges: clearPendingChanges,
+  dispatchSetGeneralSettingsValue: setGeneralSettingsValue,
+  dispatchSaveGeneralSettings: saveGeneralSettings,
+  dispatchFetchGeneralSettings: fetchGeneralSettings,
+  dispatchFetchStatus: fetchStatus
+};
+
+class AuthenticationRequiredModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.dispatchFetchGeneralSettings();
+  }
+
+  componentWillUnmount() {
+    this.props.dispatchClearPendingChanges({ section: `settings.${SECTION}` });
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.dispatchSetGeneralSettingsValue({ name, value });
+  };
+
+  onSavePress = () => {
+    this.props.dispatchSaveGeneralSettings();
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      dispatchClearPendingChanges,
+      dispatchFetchGeneralSettings,
+      dispatchSetGeneralSettingsValue,
+      dispatchSaveGeneralSettings,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <AuthenticationRequiredModalContent
+        {...otherProps}
+        onInputChange={this.onInputChange}
+        onSavePress={this.onSavePress}
+      />
+    );
+  }
+}
+
+AuthenticationRequiredModalContentConnector.propTypes = {
+  dispatchClearPendingChanges: PropTypes.func.isRequired,
+  dispatchFetchGeneralSettings: PropTypes.func.isRequired,
+  dispatchSetGeneralSettingsValue: PropTypes.func.isRequired,
+  dispatchSaveGeneralSettings: PropTypes.func.isRequired,
+  dispatchFetchStatus: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AuthenticationRequiredModalContentConnector);

frontend/src/Helpers/Hooks/useModalOpenState.ts

@@ -0,0 +1,17 @@
+import { useCallback, useState } from 'react';
+
+export default function useModalOpenState(
+  initialState: boolean
+): [boolean, () => void, () => void] {
+  const [isOpen, setOpen] = useState(initialState);
+
+  const setModalOpen = useCallback(() => {
+    setOpen(true);
+  }, [setOpen]);
+
+  const setModalClosed = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  return [isOpen, setModalOpen, setModalClosed];
+}

frontend/src/Helpers/Props/icons.js

@@ -60,6 +60,7 @@ import {
   faFileImport as fasFileImport,
   faFileInvoice as farFileInvoice,
   faFilter as fasFilter,
+  faFlag as fasFlag,
   faFolderOpen as fasFolderOpen,
   faForward as fasForward,
   faHeart as fasHeart,
@@ -155,6 +156,7 @@ export const FATAL = fasTimesCircle;
 export const FILE = farFile;
 export const FILEIMPORT = fasFileImport;
 export const FILTER = fasFilter;
+export const FLAG = fasFlag;
 export const FOLDER = farFolder;
 export const FOLDER_OPEN = fasFolderOpen;
 export const GROUP = farObjectGroup;

frontend/src/Helpers/Props/inputTypes.js

@@ -15,6 +15,7 @@ export const QUALITY_PROFILE_SELECT = 'qualityProfileSelect';
 export const METADATA_PROFILE_SELECT = 'metadataProfileSelect';
 export const BOOK_EDITION_SELECT = 'bookEditionSelect';
 export const INDEXER_SELECT = 'indexerSelect';
+export const INDEXER_FLAGS_SELECT = 'indexerFlagsSelect';
 export const DOWNLOAD_CLIENT_SELECT = 'downloadClientSelect';
 export const ROOT_FOLDER_SELECT = 'rootFolderSelect';
 export const SELECT = 'select';

frontend/src/Helpers/Props/sizes.js

@@ -3,5 +3,5 @@ export const SMALL = 'small';
 export const MEDIUM = 'medium';
 export const LARGE = 'large';
 export const EXTRA_LARGE = 'extraLarge';
-
-export const all = [EXTRA_SMALL, SMALL, MEDIUM, LARGE, EXTRA_LARGE];
+export const EXTRA_EXTRA_LARGE = 'extraExtraLarge';
+export const all = [EXTRA_SMALL, SMALL, MEDIUM, LARGE, EXTRA_LARGE, EXTRA_EXTRA_LARGE];

frontend/src/InteractiveImport/Author/SelectAuthorModalContent.js

@@ -29,7 +29,7 @@ class SelectAuthorModalContent extends Component {
   // Listeners
 
   onFilterChange = ({ value }) => {
-    this.setState({ filter: value.toLowerCase() });
+    this.setState({ filter: value });
   };
 
   //
@@ -43,6 +43,7 @@ class SelectAuthorModalContent extends Component {
     } = this.props;
 
     const filter = this.state.filter;
+    const filterLower = filter.toLowerCase();
 
     return (
       <ModalContent onModalClose={onModalClose}>
@@ -66,7 +67,7 @@ class SelectAuthorModalContent extends Component {
           <Scroller className={styles.scroller}>
             {
               items.map((item) => {
-                return item.authorName.toLowerCase().includes(filter) ?
+                return item.authorName.toLowerCase().includes(filterLower) ?
                   (
                     <SelectAuthorRow
                       key={item.id}

frontend/src/InteractiveImport/Book/SelectBookModalContent.js

@@ -52,7 +52,7 @@ class SelectBookModalContent extends Component {
   // Listeners
 
   onFilterChange = ({ value }) => {
-    this.setState({ filter: value.toLowerCase() });
+    this.setState({ filter: value });
   };
 
   //
@@ -68,6 +68,7 @@ class SelectBookModalContent extends Component {
     } = this.props;
 
     const filter = this.state.filter;
+    const filterLower = filter.toLowerCase();
 
     return (
       <ModalContent onModalClose={onModalClose}>
@@ -101,7 +102,7 @@ class SelectBookModalContent extends Component {
                 <TableBody>
                   {
                     items.map((item) => {
-                      return item.title.toLowerCase().includes(filter) ?
+                      return item.title.toLowerCase().includes(filterLower) ?
                         (
                           <SelectBookRow
                             key={item.id}

frontend/src/InteractiveImport/IndexerFlags/SelectIndexerFlagsModal.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Modal from 'Components/Modal/Modal';
+import SelectIndexerFlagsModalContentConnector from './SelectIndexerFlagsModalContentConnector';
+
+class SelectIndexerFlagsModal extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      onModalClose,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        onModalClose={onModalClose}
+      >
+        <SelectIndexerFlagsModalContentConnector
+          {...otherProps}
+          onModalClose={onModalClose}
+        />
+      </Modal>
+    );
+  }
+}
+
+SelectIndexerFlagsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default SelectIndexerFlagsModal;

frontend/src/InteractiveImport/IndexerFlags/SelectIndexerFlagsModalContent.css

@@ -0,0 +1,7 @@
+.modalBody {
+  composes: modalBody from '~Components/Modal/ModalBody.css';
+
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}

frontend/src/InteractiveImport/IndexerFlags/SelectIndexerFlagsModalContent.css.d.ts

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

frontend/src/InteractiveImport/IndexerFlags/SelectIndexerFlagsModalContent.js

@@ -0,0 +1,106 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+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 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, scrollDirections } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './SelectIndexerFlagsModalContent.css';
+
+class SelectIndexerFlagsModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    const {
+      indexerFlags
+    } = props;
+
+    this.state = {
+      indexerFlags
+    };
+  }
+
+  //
+  // Listeners
+
+  onIndexerFlagsChange = ({ value }) => {
+    this.setState({ indexerFlags: value });
+  };
+
+  onIndexerFlagsSelect = () => {
+    this.props.onIndexerFlagsSelect(this.state);
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      onModalClose
+    } = this.props;
+
+    const {
+      indexerFlags
+    } = this.state;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Manual Import - Set indexer Flags
+        </ModalHeader>
+
+        <ModalBody
+          className={styles.modalBody}
+          scrollDirection={scrollDirections.NONE}
+        >
+          <Form>
+            <FormGroup>
+              <FormLabel>
+                {translate('IndexerFlags')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.INDEXER_FLAGS_SELECT}
+                name="indexerFlags"
+                indexerFlags={indexerFlags}
+                autoFocus={true}
+                onChange={this.onIndexerFlagsChange}
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            {translate('Cancel')}
+          </Button>
+
+          <Button
+            kind={kinds.SUCCESS}
+            onPress={this.onIndexerFlagsSelect}
+          >
+            {translate('SetIndexerFlags')}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+SelectIndexerFlagsModalContent.propTypes = {
+  indexerFlags: PropTypes.number.isRequired,
+  onIndexerFlagsSelect: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default SelectIndexerFlagsModalContent;

frontend/src/InteractiveImport/IndexerFlags/SelectIndexerFlagsModalContentConnector.js

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { saveInteractiveImportItem, updateInteractiveImportItems } from 'Store/Actions/interactiveImportActions';
+import SelectIndexerFlagsModalContent from './SelectIndexerFlagsModalContent';
+
+const mapDispatchToProps = {
+  dispatchUpdateInteractiveImportItems: updateInteractiveImportItems,
+  dispatchSaveInteractiveImportItems: saveInteractiveImportItem
+};
+
+class SelectIndexerFlagsModalContentConnector extends Component {
+
+  //
+  // Listeners
+
+  onIndexerFlagsSelect = ({ indexerFlags }) => {
+    const {
+      ids,
+      dispatchUpdateInteractiveImportItems,
+      dispatchSaveInteractiveImportItems
+    } = this.props;
+
+    dispatchUpdateInteractiveImportItems({
+      ids,
+      indexerFlags
+    });
+
+    dispatchSaveInteractiveImportItems({ ids });
+
+    this.props.onModalClose(true);
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <SelectIndexerFlagsModalContent
+        {...this.props}
+        onIndexerFlagsSelect={this.onIndexerFlagsSelect}
+      />
+    );
+  }
+}
+
+SelectIndexerFlagsModalContentConnector.propTypes = {
+  ids: PropTypes.arrayOf(PropTypes.number).isRequired,
+  dispatchUpdateInteractiveImportItems: PropTypes.func.isRequired,
+  dispatchSaveInteractiveImportItems: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(null, mapDispatchToProps)(SelectIndexerFlagsModalContentConnector);

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js

@@ -20,6 +20,7 @@ import SelectAuthorModal from 'InteractiveImport/Author/SelectAuthorModal';
 import SelectBookModal from 'InteractiveImport/Book/SelectBookModal';
 import ConfirmImportModal from 'InteractiveImport/Confirmation/ConfirmImportModal';
 import SelectEditionModal from 'InteractiveImport/Edition/SelectEditionModal';
+import SelectIndexerFlagsModal from 'InteractiveImport/IndexerFlags/SelectIndexerFlagsModal';
 import SelectQualityModal from 'InteractiveImport/Quality/SelectQualityModal';
 import SelectReleaseGroupModal from 'InteractiveImport/ReleaseGroup/SelectReleaseGroupModal';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
@@ -30,7 +31,7 @@ import toggleSelected from 'Utilities/Table/toggleSelected';
 import InteractiveImportRow from './InteractiveImportRow';
 import styles from './InteractiveImportModalContent.css';
 
-const columns = [
+const COLUMNS = [
   {
     name: 'path',
     label: 'Path',
@@ -74,11 +75,21 @@ const columns = [
     isSortable: true,
     isVisible: true
   },
+  {
+    name: 'indexerFlags',
+    label: React.createElement(Icon, {
+      name: icons.FLAG,
+      title: () => translate('IndexerFlags')
+    }),
+    isSortable: true,
+    isVisible: true
+  },
   {
     name: 'rejections',
     label: React.createElement(Icon, {
       name: icons.DANGER,
-      kind: kinds.DANGER
+      kind: kinds.DANGER,
+      title: () => translate('Rejections')
     }),
     isSortable: true,
     isVisible: true
@@ -102,6 +113,7 @@ const BOOK = 'book';
 const EDITION = 'edition';
 const RELEASE_GROUP = 'releaseGroup';
 const QUALITY = 'quality';
+const INDEXER_FLAGS = 'indexerFlags';
 
 const replaceExistingFilesOptions = {
   COMBINE: 'combine',
@@ -288,6 +300,21 @@ class InteractiveImportModalContent extends Component {
       inconsistentBookReleases
     } = this.state;
 
+    const allColumns = _.cloneDeep(COLUMNS);
+    const columns = allColumns.map((column) => {
+      const showIndexerFlags = items.some((item) => item.indexerFlags);
+
+      if (!showIndexerFlags) {
+        const indexerFlagsColumn = allColumns.find((c) => c.name === 'indexerFlags');
+
+        if (indexerFlagsColumn) {
+          indexerFlagsColumn.isVisible = false;
+        }
+      }
+
+      return column;
+    });
+
     const selectedIds = this.getSelectedIds();
     const selectedItem = selectedIds.length ? _.find(items, { id: selectedIds[0] }) : null;
     const importIdsByBook = _.chain(items).filter((x) => x.book).groupBy((x) => x.book.id).mapValues((x) => x.map((y) => y.id)).value();
@@ -295,11 +322,12 @@ class InteractiveImportModalContent extends Component {
     const errorMessage = getErrorMessage(error, 'Unable to load manual import items');
 
     const bulkSelectOptions = [
-      { key: SELECT, value: 'Select...', disabled: true },
-      { key: BOOK, value: 'Select Book' },
-      { key: EDITION, value: 'Select Edition' },
-      { key: QUALITY, value: 'Select Quality' },
-      { key: RELEASE_GROUP, value: 'Select ReleaseGroup' }
+      { key: SELECT, value: translate('SelectDropdown'), disabled: true },
+      { key: BOOK, value: translate('SelectBook') },
+      { key: EDITION, value: translate('SelectEdition') },
+      { key: QUALITY, value: translate('SelectQuality') },
+      { key: RELEASE_GROUP, value: translate('SelectReleaseGroup') },
+      { key: INDEXER_FLAGS, value: translate('SelectIndexerFlags') }
     ];
 
     if (allowAuthorChange) {
@@ -422,6 +450,7 @@ class InteractiveImportModalContent extends Component {
                           isSaving={isSaving}
                           {...item}
                           allowAuthorChange={allowAuthorChange}
+                          columns={columns}
                           onSelectedChange={this.onSelectedChange}
                           onValidRowChange={this.onValidRowChange}
                         />
@@ -518,6 +547,13 @@ class InteractiveImportModalContent extends Component {
           onModalClose={this.onSelectModalClose}
         />
 
+        <SelectIndexerFlagsModal
+          isOpen={selectModalOpen === INDEXER_FLAGS}
+          ids={selectedIds}
+          indexerFlags={0}
+          onModalClose={this.onSelectModalClose}
+        />
+
         <ConfirmImportModal
           isOpen={isConfirmImportModalOpen}
           books={booksImported}

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContentConnector.js

@@ -134,6 +134,7 @@ class InteractiveImportModalContentConnector extends Component {
           book,
           foreignEditionId,
           quality,
+          indexerFlags,
           disableReleaseSwitching
         } = item;
 
@@ -158,6 +159,7 @@ class InteractiveImportModalContentConnector extends Component {
           bookId: book.id,
           foreignEditionId,
           quality,
+          indexerFlags,
           downloadId: this.props.downloadId,
           disableReleaseSwitching
         });

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import BookFormats from 'Book/BookFormats';
 import BookQuality from 'Book/BookQuality';
+import IndexerFlags from 'Book/IndexerFlags';
 import FileDetails from 'BookFile/FileDetails';
 import Icon from 'Components/Icon';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
@@ -14,6 +15,7 @@ import Tooltip from 'Components/Tooltip/Tooltip';
 import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
 import SelectAuthorModal from 'InteractiveImport/Author/SelectAuthorModal';
 import SelectBookModal from 'InteractiveImport/Book/SelectBookModal';
+import SelectIndexerFlagsModal from 'InteractiveImport/IndexerFlags/SelectIndexerFlagsModal';
 import SelectQualityModal from 'InteractiveImport/Quality/SelectQualityModal';
 import SelectReleaseGroupModal from 'InteractiveImport/ReleaseGroup/SelectReleaseGroupModal';
 import formatBytes from 'Utilities/Number/formatBytes';
@@ -34,7 +36,8 @@ class InteractiveImportRow extends Component {
       isSelectAuthorModalOpen: false,
       isSelectBookModalOpen: false,
       isSelectReleaseGroupModalOpen: false,
-      isSelectQualityModalOpen: false
+      isSelectQualityModalOpen: false,
+      isSelectIndexerFlagsModalOpen: false
     };
   }
 
@@ -44,14 +47,16 @@ class InteractiveImportRow extends Component {
       author,
       book,
       foreignEditionId,
-      quality
+      quality,
+      size
     } = this.props;
 
     if (
       author &&
       book != null &&
       foreignEditionId &&
-      quality
+      quality &&
+      size > 0
     ) {
       this.props.onSelectedChange({ id, value: true });
     }
@@ -133,6 +138,10 @@ class InteractiveImportRow extends Component {
     this.setState({ isSelectQualityModalOpen: true });
   };
 
+  onSelectIndexerFlagsPress = () => {
+    this.setState({ isSelectIndexerFlagsModalOpen: true });
+  };
+
   onSelectAuthorModalClose = (changed) => {
     this.setState({ isSelectAuthorModalOpen: false });
     this.selectRowAfterChange(changed);
@@ -153,6 +162,11 @@ class InteractiveImportRow extends Component {
     this.selectRowAfterChange(changed);
   };
 
+  onSelectIndexerFlagsModalClose = (changed) => {
+    this.setState({ isSelectIndexerFlagsModalOpen: false });
+    this.selectRowAfterChange(changed);
+  };
+
   //
   // Render
 
@@ -167,7 +181,9 @@ class InteractiveImportRow extends Component {
       releaseGroup,
       size,
       customFormats,
+      indexerFlags,
       rejections,
+      columns,
       additionalFile,
       isSelected,
       isReprocessing,
@@ -180,7 +196,8 @@ class InteractiveImportRow extends Component {
       isSelectAuthorModalOpen,
       isSelectBookModalOpen,
       isSelectReleaseGroupModalOpen,
-      isSelectQualityModalOpen
+      isSelectQualityModalOpen,
+      isSelectIndexerFlagsModalOpen
     } = this.state;
 
     const authorName = author ? author.authorName : '';
@@ -193,6 +210,7 @@ class InteractiveImportRow extends Component {
     const showBookNumberPlaceholder = !isReprocessing && isSelected && !!author && !book;
     const showReleaseGroupPlaceholder = isSelected && !releaseGroup;
     const showQualityPlaceholder = isSelected && !quality;
+    const showIndexerFlagsPlaceholder = isSelected && !indexerFlags;
 
     const pathCellContents = (
       <div onClick={this.onDetailsPress}>
@@ -215,6 +233,8 @@ class InteractiveImportRow extends Component {
       />
     );
 
+    const isIndexerFlagsColumnVisible = columns.find((c) => c.name === 'indexerFlags')?.isVisible ?? false;
+
     return (
       <TableRow
         className={additionalFile ? styles.additionalFile : undefined}
@@ -307,6 +327,28 @@ class InteractiveImportRow extends Component {
           }
         </TableRowCell>
 
+        {isIndexerFlagsColumnVisible ? (
+          <TableRowCellButton
+            title={translate('ClickToChangeIndexerFlags')}
+            onPress={this.onSelectIndexerFlagsPress}
+          >
+            {showIndexerFlagsPlaceholder ? (
+              <InteractiveImportRowCellPlaceholder isOptional={true} />
+            ) : (
+              <>
+                {indexerFlags ? (
+                  <Popover
+                    anchor={<Icon name={icons.FLAG} kind={kinds.PRIMARY} />}
+                    title={translate('IndexerFlags')}
+                    body={<IndexerFlags indexerFlags={indexerFlags} />}
+                    position={tooltipPositions.LEFT}
+                  />
+                ) : null}
+              </>
+            )}
+          </TableRowCellButton>
+        ) : null}
+
         <TableRowCell>
           {
             rejections.length ?
@@ -378,6 +420,13 @@ class InteractiveImportRow extends Component {
           real={quality ? quality.revision.real > 0 : false}
           onModalClose={this.onSelectQualityModalClose}
         />
+
+        <SelectIndexerFlagsModal
+          isOpen={isSelectIndexerFlagsModalOpen}
+          ids={[id]}
+          indexerFlags={indexerFlags ?? 0}
+          onModalClose={this.onSelectIndexerFlagsModalClose}
+        />
       </TableRow>
     );
   }
@@ -395,7 +444,9 @@ InteractiveImportRow.propTypes = {
   quality: PropTypes.object,
   size: PropTypes.number.isRequired,
   customFormats: PropTypes.arrayOf(PropTypes.object),
+  indexerFlags: PropTypes.number.isRequired,
   rejections: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   audioTags: PropTypes.object.isRequired,
   additionalFile: PropTypes.bool.isRequired,
   isReprocessing: PropTypes.bool,

frontend/src/InteractiveImport/InteractiveImportModal.js

@@ -48,7 +48,7 @@ class InteractiveImportModal extends Component {
     return (
       <Modal
         isOpen={isOpen}
-        size={sizes.EXTRA_LARGE}
+        size={sizes.EXTRA_EXTRA_LARGE}
         closeOnBackgroundClick={false}
         onModalClose={onModalClose}
       >

frontend/src/InteractiveSearch/InteractiveSearch.js

@@ -62,6 +62,15 @@ const columns = [
     isSortable: true,
     isVisible: true
   },
+  {
+    name: 'indexerFlags',
+    label: React.createElement(Icon, {
+      name: icons.FLAG,
+      title: () => translate('IndexerFlags')
+    }),
+    isSortable: true,
+    isVisible: true
+  },
   {
     name: 'rejections',
     label: React.createElement(Icon, {

frontend/src/InteractiveSearch/InteractiveSearchRow.css

@@ -8,12 +8,11 @@
   width: 80px;
 }
 
-.title {
-  composes: cell;
-}
-
-.title div {
-  overflow-wrap: break-word;
+.titleContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  word-break: break-all;
 }
 
 .indexer {
@@ -41,6 +40,7 @@
 }
 
 .rejected,
+.indexerFlags,
 .download {
   composes: cell;
 

frontend/src/InteractiveSearch/InteractiveSearchRow.css.d.ts

@@ -6,12 +6,13 @@ interface CssExports {
   'customFormatScore': string;
   'download': string;
   'indexer': string;
+  'indexerFlags': string;
   'peers': string;
   'protocol': string;
   'quality': string;
   'rejected': string;
   'size': string;
-  'title': string;
+  'titleContent': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/InteractiveSearch/InteractiveSearchRow.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
 import BookFormats from 'Book/BookFormats';
 import BookQuality from 'Book/BookQuality';
+import IndexerFlags from 'Book/IndexerFlags';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
@@ -129,6 +130,7 @@ class InteractiveSearchRow extends Component {
       quality,
       customFormatScore,
       customFormats,
+      indexerFlags = 0,
       rejections,
       downloadAllowed,
       isGrabbing,
@@ -153,10 +155,12 @@ class InteractiveSearchRow extends Component {
           {formatAge(age, ageHours, ageMinutes)}
         </TableRowCell>
 
-        <TableRowCell className={styles.title}>
-          <Link to={infoUrl}>
-            {title}
-          </Link>
+        <TableRowCell>
+          <div className={styles.titleContent}>
+            <Link to={infoUrl}>
+              {title}
+            </Link>
+          </div>
         </TableRowCell>
 
         <TableRowCell className={styles.indexer}>
@@ -187,10 +191,21 @@ class InteractiveSearchRow extends Component {
               formatCustomFormatScore(customFormatScore, customFormats.length)
             }
             tooltip={<BookFormats formats={customFormats} />}
-            position={tooltipPositions.BOTTOM}
+            position={tooltipPositions.LEFT}
           />
         </TableRowCell>
 
+        <TableRowCell className={styles.indexerFlags}>
+          {indexerFlags ? (
+            <Popover
+              anchor={<Icon name={icons.FLAG} kind={kinds.PRIMARY} />}
+              title={translate('IndexerFlags')}
+              body={<IndexerFlags indexerFlags={indexerFlags} />}
+              position={tooltipPositions.LEFT}
+            />
+          ) : null}
+        </TableRowCell>
+
         <TableRowCell className={styles.rejected}>
           {
             !!rejections.length &&
@@ -263,6 +278,7 @@ InteractiveSearchRow.propTypes = {
   quality: PropTypes.object.isRequired,
   customFormats: PropTypes.arrayOf(PropTypes.object),
   customFormatScore: PropTypes.number.isRequired,
+  indexerFlags: PropTypes.number.isRequired,
   rejections: PropTypes.arrayOf(PropTypes.string).isRequired,
   downloadAllowed: PropTypes.bool.isRequired,
   isGrabbing: PropTypes.bool.isRequired,
@@ -275,6 +291,7 @@ InteractiveSearchRow.propTypes = {
 };
 
 InteractiveSearchRow.defaultProps = {
+  indexerFlags: 0,
   rejections: [],
   isGrabbing: false,
   isGrabbed: false

frontend/src/Search/AddNewItem.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import TextInput from 'Components/Form/TextInput';
 import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
@@ -7,7 +8,7 @@ import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
-import { icons } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
 import AddNewAuthorSearchResultConnector from './Author/AddNewAuthorSearchResultConnector';
@@ -127,9 +128,16 @@ class AddNewItem extends Component {
             !isFetching && !!error ?
               <div className={styles.message}>
                 <div className={styles.helpText}>
-                  Failed to load search results, please try again.
+                  {translate('FailedLoadingSearchResults')}
+                </div>
+
+                <Alert kind={kinds.WARNING}>{getErrorMessage(error)}</Alert>
+
+                <div>
+                  <Link to="https://wiki.servarr.com/readarr/troubleshooting#invalid-response-received-from-metadata-api">
+                    {translate('WhySearchesCouldBeFailing')}
+                  </Link>
                 </div>
-                <div>{getErrorMessage(error)}</div>
               </div> : null
           }
 

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.css

@@ -25,3 +25,8 @@
   border-radius: 4px;
   background-color: var(--cardCenterBackgroundColor);
 }
+
+.customFormats {
+  display: flex;
+  flex-wrap: wrap;
+}