Retirement announcement

ignore-downstream

Co-authored-by: Fixer <ygj59783@zslsz.com>
Co-authored-by: Ilbebino <tommasobellandi08@gmail.com>
Co-authored-by: NanderTGA <nander.roobaert@gmail.com>
Co-authored-by: Weblate <noreply-mt-weblate@weblate.org>
Co-authored-by: Weblate <noreply@weblate.org>
Translate-URL: https://translate.servarr.com/projects/servarr/readarr/it/
Translate-URL: https://translate.servarr.com/projects/servarr/readarr/nl/
Translate-URL: https://translate.servarr.com/projects/servarr/readarr/sk/
Translate-URL: https://translate.servarr.com/projects/servarr/readarr/uk/
Translate-URL: https://translate.servarr.com/projects/servarr/readarr/zh_Hans/
Translation: Servarr/Readarr

.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"
+    }
+  ]
+}

README.md

@@ -1,3 +1,23 @@
+# Announcement: Retirement of Readarr
+
+We would like to announce that the [Readarr project](<https://github.com/Readarr/Readarr>) has been retired. This difficult decision was made due to a combination of factors: the project's metadata has become unusable, we no longer have the time to remake or repair it, and the community effort to transition to using Open Library as the source has stalled without much progress.
+
+Third-party metadata mirrors exist, but as we're not involved with them at all, we cannot provide support for them. Use of them is entirely at your own risk. The most popular mirror appears to be [rreading-glasses](<https://github.com/blampe/rreading-glasses>).
+
+Without anyone to take over Readarr development, we expect it to wither away, so we still encourage you to seek alternatives to Readarr.
+
+## Key Points:
+- **Effective Immediately**: The retirement takes effect immediately. Please stay tuned for any possible further communications.
+- **Support Window**: We will provide support during a brief transition period to help with troubleshooting non metadata related issues.
+- **Alternative Solutions**: Users are encouraged to explore and adopt any other possible solutions as alternatives to Readarr.
+- **Opportunities for Revival**: We are open to someone taking over and revitalizing the project. If you are interested, please get in touch.
+- **Gratitude**: We extend our deepest gratitude to all the contributors and community members who supported Readarr over the years.
+
+Thank you for being part of the Readarr journey. For any inquiries or assistance during this transition, please contact our team.
+
+Sincerely,  
+The Servarr Team
+
 # Readarr
 
 [![Build Status](https://dev.azure.com/Readarr/Readarr/_apis/build/status/Readarr.Readarr?branchName=develop)](https://dev.azure.com/Readarr/Readarr/_build/latest?definitionId=1&branchName=develop)

azure-pipelines.yml

@@ -9,18 +9,18 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '0.3.20'
+  majorVersion: '0.4.19'
   minorVersion: $[counter('minorVersion', 1)]
   readarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(readarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.417'
+  dotnetVersion: '6.0.427'
   nodeVersion: '20.X'
   innoVersion: '6.2.0'
   windowsImage: 'windows-2022'
-  linuxImage: 'ubuntu-20.04'
-  macImage: 'macOS-11'
+  linuxImage: 'ubuntu-22.04'
+  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,19 +1102,19 @@ stages:
         vmImage: ${{ variables.windowsImage }}
       steps:
       - checkout: self # Need history for Sonar analysis
-      - task: SonarCloudPrepare@1
+      - task: SonarCloudPrepare@3
         env:
           SONAR_SCANNER_OPTS: ''
         inputs:
           SonarCloud: 'SonarCloud'
           organization: 'readarr'
-          scannerMode: 'CLI'
+          scannerMode: 'cli'
           configMode: 'manual'
           cliProjectKey: 'readarrui'
           cliProjectName: 'ReadarrUI'
           cliProjectVersion: '$(readarrVersion)'
           cliSources: './frontend'
-      - task: SonarCloudAnalyze@1
+      - task: SonarCloudAnalyze@3
 
     - job: Api_Docs
       displayName: API Docs
@@ -1190,12 +1190,12 @@ stages:
         submodules: true
       - powershell: Set-Service SCardSvr -StartupType Manual
         displayName: Enable Windows Test Service
-      - task: SonarCloudPrepare@1
+      - task: SonarCloudPrepare@3
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         inputs:
           SonarCloud: 'SonarCloud'
           organization: 'readarr'
-          scannerMode: 'MSBuild'
+          scannerMode: 'dotnet'
           projectKey: 'Readarr_Readarr'
           projectName: 'Readarr'
           projectVersion: '$(readarrVersion)'
@@ -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@3
         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({
@@ -181,7 +182,7 @@ module.exports = (env) => {
                       loose: true,
                       debug: false,
                       useBuiltIns: 'entry',
-                      corejs: 3
+                      corejs: '3.39'
                     }
                   ]
                 ]
@@ -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/Details/HistoryDetails.js

@@ -165,7 +165,8 @@ function HistoryDetails(props) {
 
   if (eventType === 'downloadFailed') {
     const {
-      message
+      message,
+      indexer
     } = data;
 
     return (
@@ -177,11 +178,21 @@ function HistoryDetails(props) {
         />
 
         {
-          !!message &&
+          indexer ?
+            <DescriptionListItem
+              title={translate('Indexer')}
+              data={indexer}
+            /> :
+            null
+        }
+
+        {
+          message ?
             <DescriptionListItem
               title={translate('Message')}
               data={message}
-            />
+            /> :
+            null
         }
       </DescriptionList>
     );

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,21 @@
+import ModelBase from 'App/ModelBase';
+
+export type AuthorStatus = 'continuing' | 'ended';
+
+interface Author extends ModelBase {
+  added: string;
+  genres: string[];
+  monitored: boolean;
+  overview: string;
+  path: string;
+  qualityProfileId: number;
+  metadataProfileId: number;
+  rootFolderPath: string;
+  sortName: string;
+  status: AuthorStatus;
+  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/AuthorStatus.ts

@@ -0,0 +1,21 @@
+import { AuthorStatus } from 'Author/Author';
+import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+export function getAuthorStatusDetails(status: AuthorStatus) {
+  let statusDetails = {
+    icon: icons.AUTHOR_CONTINUING,
+    title: translate('StatusEndedContinuing'),
+    message: translate('ContinuingMoreBooksAreExpected'),
+  };
+
+  if (status === 'ended') {
+    statusDetails = {
+      icon: icons.AUTHOR_ENDED,
+      title: translate('StatusEndedEnded'),
+      message: translate('ContinuingNoAdditionalBooksAreExpected'),
+    };
+  }
+
+  return statusDetails;
+}

frontend/src/Author/Details/AuthorDetails.js

@@ -7,6 +7,7 @@ import AuthorHistoryTable from 'Author/History/AuthorHistoryTable';
 import MonitoringOptionsModal from 'Author/MonitoringOptions/MonitoringOptionsModal';
 import BookEditorFooter from 'Book/Editor/BookEditorFooter';
 import BookFileEditorTable from 'BookFile/Editor/BookFileEditorTable';
+import Alert from 'Components/Alert';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -17,7 +18,7 @@ import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import SwipeHeaderConnector from 'Components/Swipe/SwipeHeaderConnector';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector';
 import InteractiveSearchTable from 'InteractiveSearch/InteractiveSearchTable';
 import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector';
@@ -412,22 +413,25 @@ class AuthorDetails extends Component {
 
           <div className={styles.contentContainer}>
             {
-              !isPopulated && !booksError && !bookFilesError &&
-                <LoadingIndicator />
+              !isPopulated && !booksError && !bookFilesError ?
+                <LoadingIndicator /> :
+                null
             }
 
             {
-              !isFetching && booksError &&
-                <div>
+              !isFetching && booksError ?
+                <Alert kind={kinds.DANGER}>
                   {translate('LoadingBooksFailed')}
-                </div>
+                </Alert> :
+                null
             }
 
             {
-              !isFetching && bookFilesError &&
-                <div>
+              !isFetching && bookFilesError ?
+                <Alert kind={kinds.DANGER}>
                   {translate('LoadingBookFilesFailed')}
-                </div>
+                </Alert> :
+                null
             }
 
             {

frontend/src/Author/Details/AuthorDetailsHeader.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import TextTruncate from 'react-text-truncate';
 import AuthorPoster from 'Author/AuthorPoster';
+import { getAuthorStatusDetails } from 'Author/AuthorStatus';
 import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
 import Label from 'Components/Label';
@@ -11,7 +12,7 @@ import MonitorToggleButton from 'Components/MonitorToggleButton';
 import Popover from 'Components/Tooltip/Popover';
 import Tooltip from 'Components/Tooltip/Tooltip';
 import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
-import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
+import QualityProfileName from 'Settings/Profiles/Quality/QualityProfileName';
 import fonts from 'Styles/Variables/fonts';
 import formatBytes from 'Utilities/Number/formatBytes';
 import stripHtml from 'Utilities/String/stripHtml';
@@ -87,11 +88,11 @@ class AuthorDetailsHeader extends Component {
       titleWidth
     } = this.state;
 
+    const statusDetails = getAuthorStatusDetails(status);
+
     const fanartUrl = getFanartUrl(images);
     const marqueeWidth = titleWidth - (isSmallScreen ? 85 : 160);
 
-    const continuing = status === 'continuing';
-
     let bookFilesCountMessage = translate('BookFilesCountMessage');
 
     if (bookFileCount === 1) {
@@ -213,7 +214,7 @@ class AuthorDetailsHeader extends Component {
 
                 <span className={styles.qualityProfileName}>
                   {
-                    <QualityProfileNameConnector
+                    <QualityProfileName
                       qualityProfileId={qualityProfileId}
                     />
                   }
@@ -236,16 +237,16 @@ class AuthorDetailsHeader extends Component {
 
               <Label
                 className={styles.detailsLabel}
-                title={continuing ? translate('ContinuingMoreBooksAreExpected') : translate('ContinuingNoAdditionalBooksAreExpected')}
+                title={statusDetails.message}
                 size={sizes.LARGE}
               >
                 <Icon
-                  name={continuing ? icons.AUTHOR_CONTINUING : icons.AUTHOR_ENDED}
+                  name={statusDetails.icon}
                   size={17}
                 />
 
                 <span className={styles.qualityProfileName}>
-                  {continuing ? 'Continuing' : 'Deceased'}
+                  {statusDetails.title}
                 </span>
               </Label>
 

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';
 
@@ -67,6 +72,7 @@ class BookRow extends Component {
       authorMonitored,
       titleSlug,
       bookFiles,
+      indexerFlags,
       isEditorActive,
       isSelected,
       onSelectedChange,
@@ -190,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
@@ -235,6 +259,7 @@ BookRow.propTypes = {
   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,
@@ -246,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,10 +28,14 @@ function createMapStateToProps() {
     selectBookFiles,
     (state, { id }) => id,
     (author = {}, bookFiles, bookId) => {
+      const files = bookFiles[bookId] ?? [];
+      const bookFile = files[0];
+
       return {
         authorMonitored: author.monitored,
         authorName: author.authorName,
-        bookFiles: bookFiles[bookId] ?? []
+        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/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

@@ -235,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/Table/AuthorIndexRow.js

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

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

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { getAuthorStatusDetails } from 'Author/AuthorStatus';
 import Icon from 'Components/Icon';
 import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
 import { icons } from 'Helpers/Props';
@@ -15,6 +16,8 @@ function AuthorStatusCell(props) {
     ...otherProps
   } = props;
 
+  const statusDetails = getAuthorStatusDetails(status);
+
   return (
     <Component
       className={className}
@@ -28,8 +31,8 @@ function AuthorStatusCell(props) {
 
       <Icon
         className={styles.statusIcon}
-        name={status === 'ended' ? icons.AUTHOR_ENDED : icons.AUTHOR_CONTINUING}
-        title={status === 'ended' ? translate('StatusEndedDeceased') : translate('StatusEndedContinuing')}
+        name={statusDetails.icon}
+        title={`${statusDetails.title}: ${statusDetails.message}`}
       />
     </Component>
   );

frontend/src/Author/NoAuthor.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Button from 'Components/Link/Button';
 import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './NoAuthor.css';
 
 function NoAuthor(props) {
@@ -31,7 +32,7 @@ function NoAuthor(props) {
           to="/settings/mediamanagement"
           kind={kinds.PRIMARY}
         >
-          Add Root Folder
+          {translate('AddRootFolder')}
         </Button>
       </div>
 
@@ -40,7 +41,7 @@ function NoAuthor(props) {
           to="/add/search"
           kind={kinds.PRIMARY}
         >
-          Add New Author
+          {translate('AddNewAuthor')}
         </Button>
       </div>
     </div>

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/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/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/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/Bookshelf/BookshelfRow.js

@@ -1,12 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import AuthorNameLink from 'Author/AuthorNameLink';
+import { getAuthorStatusDetails } from 'Author/AuthorStatus';
 import Icon from 'Components/Icon';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
-import { icons } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
 import BookshelfBook from './BookshelfBook';
 import styles from './BookshelfRow.css';
 
@@ -30,6 +29,8 @@ class BookshelfRow extends Component {
       onBookMonitoredPress
     } = this.props;
 
+    const statusDetails = getAuthorStatusDetails(status);
+
     return (
       <>
         <VirtualTableSelectCell
@@ -52,8 +53,8 @@ class BookshelfRow extends Component {
         <VirtualTableRowCell className={styles.status}>
           <Icon
             className={styles.statusIcon}
-            name={status === 'ended' ? icons.AUTHOR_ENDED : icons.AUTHOR_CONTINUING}
-            title={status === 'ended' ? translate('StatusEndedEnded') : translate('StatusEndedContinuing')}
+            name={statusDetails.icon}
+            title={statusDetails.title}
           />
         </VirtualTableRowCell>
 

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/Form/EnhancedSelectInput.css

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

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -20,6 +20,8 @@ import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
 import TextInput from './TextInput';
 import styles from './EnhancedSelectInput.css';
 
+const MINIMUM_DISTANCE_FROM_EDGE = 10;
+
 function isArrowKey(keyCode) {
   return keyCode === keyCodes.UP_ARROW || keyCode === keyCodes.DOWN_ARROW;
 }
@@ -137,18 +139,9 @@ class EnhancedSelectInput extends Component {
   // Listeners
 
   onComputeMaxHeight = (data) => {
-    const {
-      top,
-      bottom
-    } = data.offsets.reference;
-
     const windowHeight = window.innerHeight;
 
-    if ((/^botton/).test(data.placement)) {
-      data.styles.maxHeight = windowHeight - bottom;
-    } else {
-      data.styles.maxHeight = top;
-    }
+    data.styles.maxHeight = windowHeight - MINIMUM_DISTANCE_FROM_EDGE;
 
     return data;
   };
@@ -457,6 +450,10 @@ class EnhancedSelectInput extends Component {
                   order: 851,
                   enabled: true,
                   fn: this.onComputeMaxHeight
+                },
+                preventOverflow: {
+                  enabled: true,
+                  boundariesElement: 'viewport'
                 }
               }}
             >

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/RootFolderSelectInputConnector.js

@@ -28,8 +28,7 @@ function createMapStateToProps() {
       if (includeNoChange) {
         values.unshift({
           key: 'noChange',
-          value: '',
-          name: translate('NoChange'),
+          value: translate('NoChange'),
           isDisabled: includeNoChangeDisabled,
           isMissing: false
         });
@@ -39,7 +38,6 @@ function createMapStateToProps() {
         values.push({
           key: '',
           value: '',
-          name: '',
           isDisabled: true,
           isHidden: true
         });
@@ -56,8 +54,7 @@ function createMapStateToProps() {
 
       values.push({
         key: ADD_NEW_KEY,
-        value: '',
-        name: 'Add a new path'
+        value: 'Add a new path'
       });
 
       return {
@@ -105,6 +102,27 @@ class RootFolderSelectInputConnector extends Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    const {
+      name,
+      value,
+      values,
+      onChange
+    } = this.props;
+
+    if (prevProps.values === values) {
+      return;
+    }
+
+    if (!value && values.length && values.some((v) => !!v.key && v.key !== ADD_NEW_KEY)) {
+      const defaultValue = values[0];
+
+      if (defaultValue.key !== ADD_NEW_KEY) {
+        onChange({ name, value: defaultValue.key });
+      }
+    }
+  }
+
   //
   // Render
 

frontend/src/Components/Form/RootFolderSelectInputOption.css

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

frontend/src/Components/Form/RootFolderSelectInputOption.css.d.ts

@@ -1,10 +1,12 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'authorFolder': string;
   'freeSpace': string;
   'isMissing': string;
   'isMobile': string;
   'optionText': string;
+  'value': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Components/Form/RootFolderSelectInputOption.js

@@ -7,18 +7,24 @@ import styles from './RootFolderSelectInputOption.css';
 
 function RootFolderSelectInputOption(props) {
   const {
+    id,
     value,
     name,
     freeSpace,
+    authorFolder,
     isMissing,
     isMobile,
+    isWindows,
     ...otherProps
   } = props;
 
-  const text = value === '' ? name : `${name} [${value}]`;
+  const slashCharacter = isWindows ? '\\' : '/';
+
+  const text = name === '' ? value : `[${name}] ${value}`;
 
   return (
     <EnhancedSelectInputOption
+      id={id}
       isMobile={isMobile}
       {...otherProps}
     >
@@ -27,7 +33,18 @@ function RootFolderSelectInputOption(props) {
         isMobile && styles.isMobile
       )}
       >
-        <div>{text}</div>
+        <div className={styles.value}>
+          {text}
+
+          {
+            authorFolder && id !== 'addNew' ?
+              <div className={styles.authorFolder}>
+                {slashCharacter}
+                {authorFolder}
+              </div> :
+              null
+          }
+        </div>
 
         {
           freeSpace == null ?
@@ -50,11 +67,18 @@ function RootFolderSelectInputOption(props) {
 }
 
 RootFolderSelectInputOption.propTypes = {
+  id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   freeSpace: PropTypes.number,
+  authorFolder: PropTypes.string,
   isMissing: PropTypes.bool,
-  isMobile: PropTypes.bool.isRequired
+  isMobile: PropTypes.bool.isRequired,
+  isWindows: PropTypes.bool
+};
+
+RootFolderSelectInputOption.defaultProps = {
+  name: ''
 };
 
 export default RootFolderSelectInputOption;

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css

@@ -7,12 +7,22 @@
   overflow: hidden;
 }
 
-.path {
+.pathContainer {
   @add-mixin truncate;
-
+  display: flex;
   flex: 1 0 0;
 }
 
+.path {
+  flex: 0 1 auto;
+}
+
+.authorFolder {
+  @add-mixin truncate;
+  flex: 0 1 auto;
+  color: var(--disabledColor);
+}
+
 .freeSpace {
   flex: 0 0 auto;
   margin-left: 15px;

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css.d.ts

@@ -1,8 +1,10 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'authorFolder': string;
   'freeSpace': string;
   'path': string;
+  'pathContainer': string;
   'selectedValue': string;
 }
 export const cssExports: CssExports;

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.js

@@ -9,19 +9,34 @@ function RootFolderSelectInputSelectedValue(props) {
     name,
     value,
     freeSpace,
+    authorFolder,
     includeFreeSpace,
+    isWindows,
     ...otherProps
   } = props;
 
-  const text = value === '' ? name : `${name} [${value}]`;
+  const slashCharacter = isWindows ? '\\' : '/';
+
+  const text = name === '' ? value : `[${name}] ${value}`;
 
   return (
     <EnhancedSelectInputSelectedValue
       className={styles.selectedValue}
       {...otherProps}
     >
-      <div className={styles.path}>
-        {text}
+      <div className={styles.pathContainer}>
+        <div className={styles.path}>
+          {text}
+        </div>
+
+        {
+          authorFolder ?
+            <div className={styles.authorFolder}>
+              {slashCharacter}
+              {authorFolder}
+            </div> :
+            null
+        }
       </div>
 
       {
@@ -38,10 +53,13 @@ RootFolderSelectInputSelectedValue.propTypes = {
   name: PropTypes.string,
   value: PropTypes.string,
   freeSpace: PropTypes.number,
+  authorFolder: PropTypes.string,
+  isWindows: PropTypes.bool,
   includeFreeSpace: PropTypes.bool.isRequired
 };
 
 RootFolderSelectInputSelectedValue.defaultProps = {
+  name: '',
   includeFreeSpace: true
 };
 

frontend/src/Components/Form/SelectInput.js

@@ -52,6 +52,7 @@ class SelectInput extends Component {
             const {
               key,
               value: optionValue,
+              isDisabled: optionIsDisabled = false,
               ...otherOptionProps
             } = option;
 
@@ -59,6 +60,7 @@ class SelectInput extends Component {
               <option
                 key={key}
                 value={key}
+                disabled={optionIsDisabled}
                 {...otherOptionProps}
               >
                 {typeof optionValue === 'function' ? optionValue() : optionValue}

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

@@ -83,13 +83,6 @@
 }
 
 @media only screen and (max-width: $breakpointMedium) {
-  .modal.small,
-  .modal.medium {
-    width: 90%;
-  }
-}
-
-@media only screen and (max-width: $breakpointSmall) {
   .modalContainer {
     position: fixed;
   }

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/Components/Table/Cells/TableRowCell.css

@@ -4,7 +4,7 @@
   line-height: 1.52857143;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .cell {
     white-space: nowrap;
   }

frontend/src/Components/Table/Cells/VirtualTableRowCell.css

@@ -7,7 +7,7 @@
   white-space: nowrap;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .cell {
     white-space: nowrap;
   }

frontend/src/Components/Table/Table.css

@@ -10,7 +10,7 @@
   border-collapse: collapse;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .tableContainer {
     min-width: 100%;
     width: fit-content;

frontend/src/Components/Table/TableHeaderCell.css

@@ -9,7 +9,7 @@
   margin-left: 10px;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .headerCell {
     white-space: nowrap;
   }

frontend/src/Components/Table/TablePager.css

@@ -60,7 +60,7 @@
   height: 25px;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .pager {
     flex-wrap: wrap;
   }

frontend/src/Components/Table/VirtualTableHeaderCell.css

@@ -9,7 +9,7 @@
   margin-left: 10px;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .headerCell {
     white-space: nowrap;
   }

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/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();
@@ -299,7 +326,8 @@ class InteractiveImportModalContent extends Component {
       { key: BOOK, value: translate('SelectBook') },
       { key: EDITION, value: translate('SelectEdition') },
       { key: QUALITY, value: translate('SelectQuality') },
-      { key: RELEASE_GROUP, value: translate('SelectReleaseGroup') }
+      { 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,