Multiple Translations updated by Weblate

ignore-downstream

Co-authored-by: Dani Talens <databio@gmail.com>
Co-authored-by: Deleted User <noreply+2593@weblate.org>
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/ca/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/pl/
Translation: Servarr/Prowlarr

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,5 +1,5 @@
 name: Bug Report
-description: 'Report a new bug, if you are not 100% certain this is a bug please go to our Reddit or Discord first'
+description: 'Report a new bug, if you are not 100% certain this is a bug please go to our Discord first'
 labels: ['Type: Bug', 'Status: Needs Triage']
 body:
 - type: checkboxes

.github/ISSUE_TEMPLATE/config.yml

@@ -6,6 +6,3 @@ contact_links:
   - name: Support via Discord
     url: https://prowlarr.com/discord
     about: Chat with users and devs on support and setup related topics.
-  - name: Support via Reddit
-    url: https://reddit.com/r/prowlarr
-    about: Discuss and search thru support topics.

.github/label-actions.yml

@@ -4,8 +4,7 @@
   comment: >
     :wave: @{issue-author}, we use the issue tracker exclusively
     for bug reports and feature requests. However, this issue appears
-    to be a support request. Please hop over onto our [Discord](https://prowlarr.com/discord) 
-    or [Subreddit](https://reddit.com/r/prowlarr)
+    to be a support request. Please hop over onto our [Discord](https://prowlarr.com/discord).
   close: true
   close-reason: 'not planned'
 

README.md

@@ -2,7 +2,7 @@
 
 [![Build Status](https://dev.azure.com/Prowlarr/Prowlarr/_apis/build/status/Prowlarr.Prowlarr?branchName=develop)](https://dev.azure.com/Prowlarr/Prowlarr/_build/latest?definitionId=1&branchName=develop)
 [![Translated](https://translate.servarr.com/widgets/servarr/-/prowlarr/svg-badge.svg)](https://translate.servarr.com/engage/prowlarr/?utm_source=widget)
-[![Docker Pulls](https://img.shields.io/docker/pulls/hotio/prowlarr.svg)](https://wiki.servarr.com/prowlarr/installation#docker)
+[![Docker Pulls](https://img.shields.io/docker/pulls/hotio/prowlarr.svg)](https://wiki.servarr.com/prowlarr/installation/docker)
 ![Github Downloads](https://img.shields.io/github/downloads/Prowlarr/Prowlarr/total.svg)
 [![Backers on Open Collective](https://opencollective.com/Prowlarr/backers/badge.svg)](#backers)
 [![Sponsors on Open Collective](https://opencollective.com/Prowlarr/sponsors/badge.svg)](#sponsors)
@@ -29,7 +29,6 @@ Prowlarr is an indexer manager/proxy built on the popular \*arr .net/reactjs bas
 
 [![Wiki](https://img.shields.io/badge/servarr-wiki-181717.svg?maxAge=60)](https://wiki.servarr.com/prowlarr)
 [![Discord](https://img.shields.io/badge/discord-chat-7289DA.svg?maxAge=60)](https://prowlarr.com/discord)
-[![Reddit](https://img.shields.io/badge/reddit-discussion-FF4500.svg?maxAge=60)](https://www.reddit.com/r/Prowlarr)
 
 Note: GitHub Issues are for Bugs and Feature Requests Only
 

azure-pipelines.yml

@@ -9,15 +9,15 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '1.8.0'
+  majorVersion: '1.12.2'
   minorVersion: $[counter('minorVersion', 1)]
   prowlarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(prowlarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.408'
-  innoVersion: '6.2.0'
-  nodeVersion: '16.x'
+  dotnetVersion: '6.0.417'
+  nodeVersion: '16.X'
+  innoVersion: '6.2.2'
   windowsImage: 'windows-2022'
   linuxImage: 'ubuntu-20.04'
   macImage: 'macOS-11'
@@ -27,6 +27,10 @@ trigger:
     include:
     - develop
     - master
+  paths:
+    exclude:
+      - .github
+      - src/Prowlarr.Api.*/openapi.json
 
 pr:
   branches:
@@ -34,8 +38,9 @@ pr:
     - develop
   paths:
     exclude:
+    - .github
     - src/NzbDrone.Core/Localization/Core
-    - src/Prowlarr.API.*/openapi.json
+    - src/Prowlarr.Api.*/openapi.json
 
 stages:
   - stage: Setup
@@ -349,7 +354,7 @@ stages:
           includeRootFolder: false
           rootFolderOrFile: $(artifactsFolder)/linux-musl-arm64/net6.0
       - task: ArchiveFiles@2
-        displayName: Create FreeBSD Core Core tar
+        displayName: Create freebsd-x64 tar
         inputs:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).freebsd-core-x64.tar.gz'
           archiveType: 'tar'
@@ -528,8 +533,8 @@ stages:
           testRunTitle: '$(testName) Unit Tests'
           failTaskOnFailedTests: true
           
-    - job: Unit_LinuxCore_Postgres
-      displayName: Unit Native LinuxCore with Postgres Database
+    - job: Unit_LinuxCore_Postgres14
+      displayName: Unit Native LinuxCore with Postgres14 Database
       dependsOn: Prepare
       condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       variables:
@@ -565,6 +570,7 @@ stages:
           -e POSTGRES_PASSWORD=prowlarr \
           -e POSTGRES_USER=prowlarr \
           -p 5432:5432/tcp \
+          -v /usr/share/zoneinfo/America/Chicago:/etc/localtime:ro \
           postgres:14
         displayName: Start postgres
       - bash: |
@@ -577,7 +583,60 @@ stages:
         inputs:
           testResultsFormat: 'NUnit'
           testResultsFiles: '**/TestResult.xml'
-          testRunTitle: 'LinuxCore Postgres Unit Tests'
+          testRunTitle: 'LinuxCore Postgres14 Unit Tests'
+          failTaskOnFailedTests: true
+
+    - job: Unit_LinuxCore_Postgres15
+      displayName: Unit Native LinuxCore with Postgres15 Database
+      dependsOn: Prepare
+      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
+      variables:
+        pattern: 'Prowlarr.*.linux-core-x64.tar.gz'
+        artifactName: linux-x64-tests
+        Prowlarr__Postgres__Host: 'localhost'
+        Prowlarr__Postgres__Port: '5432'
+        Prowlarr__Postgres__User: 'prowlarr'
+        Prowlarr__Postgres__Password: 'prowlarr'
+  
+      pool:
+        vmImage: ${{ variables.linuxImage }}
+
+      timeoutInMinutes: 10
+        
+      steps:
+      - task: UseDotNet@2
+        displayName: 'Install .net core'
+        inputs:
+          version: $(dotnetVersion)
+      - checkout: none
+      - task: DownloadPipelineArtifact@2
+        displayName: Download Test Artifact
+        inputs:
+          buildType: 'current'
+          artifactName: $(artifactName)
+          targetPath: $(testsFolder)
+      - bash: find ${TESTSFOLDER} -name "Prowlarr.Test.Dummy" -exec chmod a+x {} \;
+        displayName: Make Test Dummy Executable
+        condition: and(succeeded(), ne(variables['osName'], 'Windows'))
+      - bash: |
+          docker run -d --name=postgres15 \
+          -e POSTGRES_PASSWORD=prowlarr \
+          -e POSTGRES_USER=prowlarr \
+          -p 5432:5432/tcp \
+          -v /usr/share/zoneinfo/America/Chicago:/etc/localtime:ro \
+          postgres:15
+        displayName: Start postgres
+      - bash: |
+          chmod a+x ${TESTSFOLDER}/test.sh
+          ls -lR ${TESTSFOLDER}
+          ${TESTSFOLDER}/test.sh Linux Unit Test
+        displayName: Run Tests
+      - task: PublishTestResults@2
+        displayName: Publish Test Results
+        inputs:
+          testResultsFormat: 'NUnit'
+          testResultsFiles: '**/TestResult.xml'
+          testRunTitle: 'LinuxCore Postgres15 Unit Tests'
           failTaskOnFailedTests: true
 
   - stage: Integration
@@ -663,8 +722,8 @@ stages:
           failTaskOnFailedTests: true
         displayName: Publish Test Results
 
-    - job: Integration_LinuxCore_Postgres
-      displayName: Integration Native LinuxCore with Postgres Database
+    - job: Integration_LinuxCore_Postgres14
+      displayName: Integration Native LinuxCore with Postgres14 Database
       dependsOn: Prepare
       condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       variables:
@@ -710,6 +769,7 @@ stages:
             -e POSTGRES_PASSWORD=prowlarr \
             -e POSTGRES_USER=prowlarr \
             -p 5432:5432/tcp \
+            -v /usr/share/zoneinfo/America/Chicago:/etc/localtime:ro \
             postgres:14
           displayName: Start postgres
         - bash: |
@@ -720,7 +780,70 @@ stages:
           inputs:
             testResultsFormat: 'NUnit'
             testResultsFiles: '**/TestResult.xml'
-            testRunTitle: 'Integration LinuxCore Postgres Database Integration Tests'
+            testRunTitle: 'Integration LinuxCore Postgres14 Database Integration Tests'
+            failTaskOnFailedTests: true
+          displayName: Publish Test Results
+
+
+    - job: Integration_LinuxCore_Postgres15
+      displayName: Integration Native LinuxCore with Postgres Database
+      dependsOn: Prepare
+      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
+      variables:
+        pattern: 'Prowlarr.*.linux-core-x64.tar.gz'
+        Prowlarr__Postgres__Host: 'localhost'
+        Prowlarr__Postgres__Port: '5432'
+        Prowlarr__Postgres__User: 'prowlarr'
+        Prowlarr__Postgres__Password: 'prowlarr'
+
+      pool:
+        vmImage: ${{ variables.linuxImage }}
+
+      steps:
+        - task: UseDotNet@2
+          displayName: 'Install .net core'
+          inputs:
+            version: $(dotnetVersion)
+        - checkout: none
+        - task: DownloadPipelineArtifact@2
+          displayName: Download Test Artifact
+          inputs:
+            buildType: 'current'
+            artifactName: 'linux-x64-tests'
+            targetPath: $(testsFolder)
+        - task: DownloadPipelineArtifact@2
+          displayName: Download Build Artifact
+          inputs:
+            buildType: 'current'
+            artifactName: Packages
+            itemPattern: '**/$(pattern)'
+            targetPath: $(Build.ArtifactStagingDirectory)
+        - task: ExtractFiles@1
+          inputs:
+            archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)' 
+            destinationFolder: '$(Build.ArtifactStagingDirectory)/bin'
+          displayName: Extract Package
+        - bash: |
+            mkdir -p ./bin/
+            cp -r -v ${BUILD_ARTIFACTSTAGINGDIRECTORY}/bin/Prowlarr/. ./bin/
+          displayName: Move Package Contents
+        - bash: |
+            docker run -d --name=postgres15 \
+            -e POSTGRES_PASSWORD=prowlarr \
+            -e POSTGRES_USER=prowlarr \
+            -p 5432:5432/tcp \
+            -v /usr/share/zoneinfo/America/Chicago:/etc/localtime:ro \
+            postgres:15
+          displayName: Start postgres
+        - bash: |
+            chmod a+x ${TESTSFOLDER}/test.sh
+            ${TESTSFOLDER}/test.sh Linux Integration Test
+          displayName: Run Integration Tests
+        - task: PublishTestResults@2
+          inputs:
+            testResultsFormat: 'NUnit'
+            testResultsFiles: '**/TestResult.xml'
+            testRunTitle: 'Integration LinuxCore Postgres15 Database Integration Tests'
             failTaskOnFailedTests: true
           displayName: Publish Test Results
 
@@ -1003,7 +1126,7 @@ stages:
           git add .
           if git status | grep -q modified
           then
-            git commit -am 'Automated API Docs update [skip ci]'
+            git commit -am 'Automated API Docs update'
             git push -f --set-upstream origin api-docs
             curl -X POST -H "Authorization: token ${GITHUBTOKEN}" -H "Accept: application/vnd.github.v3+json" https://api.github.com/repos/prowlarr/prowlarr/pulls -d '{"head":"api-docs","base":"develop","title":"Update API docs"}'
           else
@@ -1083,6 +1206,7 @@ stages:
   - stage: Report_Out
     dependsOn:
     - Analyze
+    - Installer
     - Unit_Test
     - Integration
     - Automation

build.sh

@@ -254,7 +254,7 @@ InstallInno()
     ProgressStart "Installing portable Inno Setup"
     
     rm -rf _inno
-    curl -s --output innosetup.exe "https://files.jrsoftware.org/is/6/innosetup-${INNOVERSION:-6.2.0}.exe"
+    curl -s --output innosetup.exe "https://files.jrsoftware.org/is/6/innosetup-${INNOVERSION:-6.2.2}.exe"
     mkdir _inno
     ./innosetup.exe //portable=1 //silent //currentuser //dir=.\\_inno
     rm innosetup.exe
@@ -392,22 +392,21 @@ then
     fi
 fi
 
-if [ "$FRONTEND" = "YES" ];
+if [[ "$LINT" = "YES" || "$FRONTEND" = "YES" ]];
 then
     YarnInstall
-    RunWebpack
 fi
 
 if [ "$LINT" = "YES" ];
 then
-    if [ -z "$FRONTEND" ];
-    then
-        YarnInstall
-    fi
-    
     LintUI
 fi
 
+if [ "$FRONTEND" = "YES" ];
+then
+    RunWebpack
+fi
+
 if [ "$PACKAGES" = "YES" ];
 then
     UpdateVersionNumber

frontend/babel.config.js

@@ -4,14 +4,14 @@ module.exports = {
   plugins: [
     // Stage 1
     '@babel/plugin-proposal-export-default-from',
-    ['@babel/plugin-proposal-optional-chaining', { loose }],
-    ['@babel/plugin-proposal-nullish-coalescing-operator', { loose }],
+    ['@babel/plugin-transform-optional-chaining', { loose }],
+    ['@babel/plugin-transform-nullish-coalescing-operator', { loose }],
 
     // Stage 2
-    '@babel/plugin-proposal-export-namespace-from',
+    '@babel/plugin-transform-export-namespace-from',
 
     // Stage 3
-    ['@babel/plugin-proposal-class-properties', { loose }],
+    ['@babel/plugin-transform-class-properties', { loose }],
     '@babel/plugin-syntax-dynamic-import'
   ],
   env: {

frontend/build/webpack.config.js

@@ -35,7 +35,7 @@ module.exports = (env) => {
     },
 
     entry: {
-      index: 'index.js'
+      index: 'index.ts'
     },
 
     resolve: {
@@ -96,7 +96,8 @@ module.exports = (env) => {
       new HtmlWebpackPlugin({
         template: 'frontend/src/index.ejs',
         filename: 'index.html',
-        publicPath: '/'
+        publicPath: '/',
+        inject: false
       }),
 
       new FileManagerPlugin({

frontend/src/App/App.js

@@ -7,13 +7,13 @@ import PageConnector from 'Components/Page/PageConnector';
 import ApplyTheme from './ApplyTheme';
 import AppRoutes from './AppRoutes';
 
-function App({ store, history, hasTranslationsError }) {
+function App({ store, history }) {
   return (
     <DocumentTitle title={window.Prowlarr.instanceName}>
       <Provider store={store}>
         <ConnectedRouter history={history}>
           <ApplyTheme>
-            <PageConnector hasTranslationsError={hasTranslationsError}>
+            <PageConnector>
               <AppRoutes app={App} />
             </PageConnector>
           </ApplyTheme>
@@ -25,8 +25,7 @@ function App({ store, history, hasTranslationsError }) {
 
 App.propTypes = {
   store: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired,
-  hasTranslationsError: PropTypes.bool.isRequired
+  history: PropTypes.object.isRequired
 };
 
 export default App;

frontend/src/App/AppRoutes.js

@@ -7,7 +7,7 @@ import HistoryConnector from 'History/HistoryConnector';
 import IndexerIndex from 'Indexer/Index/IndexerIndex';
 import IndexerStats from 'Indexer/Stats/IndexerStats';
 import SearchIndexConnector from 'Search/SearchIndexConnector';
-import ApplicationSettingsConnector from 'Settings/Applications/ApplicationSettingsConnector';
+import ApplicationSettings from 'Settings/Applications/ApplicationSettings';
 import DevelopmentSettingsConnector from 'Settings/Development/DevelopmentSettingsConnector';
 import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
 import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
@@ -98,7 +98,7 @@ function AppRoutes(props) {
 
       <Route
         path="/settings/applications"
-        component={ApplicationSettingsConnector}
+        component={ApplicationSettings}
       />
 
       <Route

frontend/src/App/AppUpdatedModalContent.css

@@ -1,6 +1,7 @@
 .version {
   margin: 0 3px;
   font-weight: bold;
+  font-family: var(--defaultFontFamily);
 }
 
 .maintenance {

frontend/src/App/AppUpdatedModalContent.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Button from 'Components/Link/Button';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
@@ -64,12 +65,12 @@ function AppUpdatedModalContent(props) {
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        Prowlarr Updated
+        {translate('AppUpdated')}
       </ModalHeader>
 
       <ModalBody>
         <div>
-          Version <span className={styles.version}>{version}</span> of Prowlarr has been installed, in order to get the latest changes you'll need to reload Prowlarr.
+          <InlineMarkdown data={translate('AppUpdatedVersion', { version })} blockClassName={styles.version} />
         </div>
 
         {
@@ -77,16 +78,14 @@ function AppUpdatedModalContent(props) {
             <div>
               {
                 !update.changes &&
-                  <div className={styles.maintenance}>
-                    {translate('MaintenanceRelease')}
-                  </div>
+                  <div className={styles.maintenance}>{translate('MaintenanceRelease')}</div>
               }
 
               {
                 !!update.changes &&
                   <div>
                     <div className={styles.changes}>
-                      What's new?
+                      {translate('WhatsNew')}
                     </div>
 
                     <UpdateChanges
@@ -113,14 +112,14 @@ function AppUpdatedModalContent(props) {
         <Button
           onPress={onSeeChangesPress}
         >
-          Recent Changes
+          {translate('RecentChanges')}
         </Button>
 
         <Button
           kind={kinds.PRIMARY}
           onPress={onModalClose}
         >
-          Reload
+          {translate('Reload')}
         </Button>
       </ModalFooter>
     </ModalContent>

frontend/src/App/ConnectionLostModal.js

@@ -28,11 +28,11 @@ function ConnectionLostModal(props) {
 
         <ModalBody>
           <div>
-            {translate('ConnectionLostMessage')}
+            {translate('ConnectionLostToBackend')}
           </div>
 
           <div className={styles.automatic}>
-            {translate('ConnectionLostAutomaticMessage')}
+            {translate('ConnectionLostReconnect')}
           </div>
         </ModalBody>
         <ModalFooter>

frontend/src/App/State/AppSectionState.ts

@@ -1,4 +1,5 @@
 import SortDirection from 'Helpers/Props/SortDirection';
+import { FilterBuilderProp } from './AppState';
 
 export interface Error {
   responseJSON: {
@@ -20,6 +21,10 @@ export interface PagedAppSectionState {
   pageSize: number;
 }
 
+export interface AppSectionFilterState<T> {
+  filterBuilderProps: FilterBuilderProp<T>[];
+}
+
 export interface AppSectionSchemaState<T> {
   isSchemaFetching: boolean;
   isSchemaPopulated: boolean;

frontend/src/App/State/AppState.ts

@@ -1,10 +1,13 @@
 import CommandAppState from './CommandAppState';
+import HistoryAppState from './HistoryAppState';
 import IndexerAppState, {
+  IndexerHistoryAppState,
   IndexerIndexAppState,
   IndexerStatusAppState,
 } from './IndexerAppState';
 import IndexerStatsAppState from './IndexerStatsAppState';
 import SettingsAppState from './SettingsAppState';
+import SystemAppState from './SystemAppState';
 import TagsAppState from './TagsAppState';
 
 interface FilterBuilderPropOption {
@@ -41,11 +44,14 @@ export interface CustomFilter {
 
 interface AppState {
   commands: CommandAppState;
+  history: HistoryAppState;
+  indexerHistory: IndexerHistoryAppState;
   indexerIndex: IndexerIndexAppState;
   indexerStats: IndexerStatsAppState;
   indexerStatus: IndexerStatusAppState;
   indexers: IndexerAppState;
   settings: SettingsAppState;
+  system: SystemAppState;
   tags: TagsAppState;
 }
 

frontend/src/App/State/HistoryAppState.ts

@@ -0,0 +1,14 @@
+import AppSectionState, {
+  AppSectionFilterState,
+} from 'App/State/AppSectionState';
+import Column from 'Components/Table/Column';
+import History from 'typings/History';
+
+interface HistoryAppState
+  extends AppSectionState<History>,
+    AppSectionFilterState<History> {
+  pageSize: number;
+  columns: Column[];
+}
+
+export default HistoryAppState;

frontend/src/App/State/IndexerAppState.ts

@@ -1,6 +1,7 @@
 import Column from 'Components/Table/Column';
 import SortDirection from 'Helpers/Props/SortDirection';
 import Indexer, { IndexerStatus } from 'Indexer/Indexer';
+import History from 'typings/History';
 import AppSectionState, {
   AppSectionDeleteState,
   AppSectionSaveState,
@@ -28,8 +29,12 @@ export interface IndexerIndexAppState {
 interface IndexerAppState
   extends AppSectionState<Indexer>,
     AppSectionDeleteState,
-    AppSectionSaveState {}
+    AppSectionSaveState {
+  itemMap: Record<number, number>;
+}
 
 export type IndexerStatusAppState = AppSectionState<IndexerStatus>;
 
+export type IndexerHistoryAppState = AppSectionState<History>;
+
 export default IndexerAppState;

frontend/src/App/State/IndexerStatsAppState.ts

@@ -1,9 +1,11 @@
 import { AppSectionItemState } from 'App/State/AppSectionState';
-import { Filter } from 'App/State/AppState';
+import { Filter, FilterBuilderProp } from 'App/State/AppState';
+import Indexer from 'Indexer/Indexer';
 import { IndexerStats } from 'typings/IndexerStats';
 
 export interface IndexerStatsAppState
   extends AppSectionItemState<IndexerStats> {
+  filterBuilderProps: FilterBuilderProp<Indexer>[];
   selectedFilterKey: string;
   filters: Filter[];
 }

frontend/src/App/State/ReleaseAppState.ts

@@ -0,0 +1,10 @@
+import AppSectionState, {
+  AppSectionDeleteState,
+} from 'App/State/AppSectionState';
+import Release from 'typings/Release';
+
+interface ReleaseAppState
+  extends AppSectionState<Release>,
+    AppSectionDeleteState {}
+
+export default ReleaseAppState;

frontend/src/App/State/SettingsAppState.ts

@@ -1,5 +1,6 @@
 import AppSectionState, {
   AppSectionDeleteState,
+  AppSectionItemState,
   AppSectionSaveState,
 } from 'App/State/AppSectionState';
 import Application from 'typings/Application';
@@ -15,7 +16,9 @@ export interface AppProfileAppState
 export interface ApplicationAppState
   extends AppSectionState<Application>,
     AppSectionDeleteState,
-    AppSectionSaveState {}
+    AppSectionSaveState {
+  isTestingAll: boolean;
+}
 
 export interface DownloadClientAppState
   extends AppSectionState<DownloadClient>,
@@ -26,14 +29,14 @@ export interface NotificationAppState
   extends AppSectionState<Notification>,
     AppSectionDeleteState {}
 
-export type UiSettingsAppState = AppSectionState<UiSettings>;
+export type UiSettingsAppState = AppSectionItemState<UiSettings>;
 
 interface SettingsAppState {
   appProfiles: AppProfileAppState;
   applications: ApplicationAppState;
   downloadClients: DownloadClientAppState;
   notifications: NotificationAppState;
-  uiSettings: UiSettingsAppState;
+  ui: UiSettingsAppState;
 }
 
 export default SettingsAppState;

frontend/src/App/State/SystemAppState.ts

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

frontend/src/App/State/TagsAppState.ts

@@ -1,12 +1,28 @@
 import ModelBase from 'App/ModelBase';
 import AppSectionState, {
   AppSectionDeleteState,
+  AppSectionSaveState,
 } from 'App/State/AppSectionState';
 
 export interface Tag extends ModelBase {
   label: string;
 }
 
-interface TagsAppState extends AppSectionState<Tag>, AppSectionDeleteState {}
+export interface TagDetail extends ModelBase {
+  label: string;
+  applicationIds: number[];
+  indexerIds: number[];
+  indexerProxyIds: number[];
+  notificationIds: number[];
+}
+
+export interface TagDetailAppState
+  extends AppSectionState<TagDetail>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+interface TagsAppState extends AppSectionState<Tag>, AppSectionDeleteState {
+  details: TagDetailAppState;
+}
 
 export default TagsAppState;

frontend/src/Components/Chart/BarChart.js

@@ -2,6 +2,7 @@ import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { kinds } from 'Helpers/Props';
+import { defaultFontFamily } from 'Styles/Variables/fonts';
 
 function getColors(kind) {
 
@@ -39,7 +40,15 @@ class BarChart extends Component {
         plugins: {
           title: {
             display: true,
-            text: this.props.title
+            align: 'start',
+            text: this.props.title,
+            padding: {
+              bottom: 30
+            },
+            font: {
+              size: 14,
+              family: defaultFontFamily
+            }
           },
           legend: {
             display: this.props.legend

frontend/src/Components/Chart/DoughnutChart.js

@@ -1,6 +1,7 @@
 import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { defaultFontFamily } from 'Styles/Variables/fonts';
 
 function getColors(kind) {
 
@@ -22,7 +23,15 @@ class DoughnutChart extends Component {
         plugins: {
           title: {
             display: true,
-            text: this.props.title
+            align: 'start',
+            text: this.props.title,
+            padding: {
+              bottom: 30
+            },
+            font: {
+              size: 14,
+              family: defaultFontFamily
+            }
           },
           legend: {
             position: 'bottom'

frontend/src/Components/Chart/StackedBarChart.js

@@ -1,6 +1,7 @@
 import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { defaultFontFamily } from 'Styles/Variables/fonts';
 
 function getColors(index) {
 
@@ -36,7 +37,15 @@ class StackedBarChart extends Component {
         plugins: {
           title: {
             display: true,
-            text: this.props.title
+            align: 'start',
+            text: this.props.title,
+            padding: {
+              bottom: 30
+            },
+            font: {
+              size: 14,
+              family: defaultFontFamily
+            }
           }
         }
       },

frontend/src/Components/FileBrowser/FileBrowserModalContent.js

@@ -20,12 +20,12 @@ import styles from './FileBrowserModalContent.css';
 const columns = [
   {
     name: 'type',
-    label: translate('Type'),
+    label: () => translate('Type'),
     isVisible: true
   },
   {
     name: 'name',
-    label: translate('Name'),
+    label: () => translate('Name'),
     isVisible: true
   }
 ];

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

@@ -7,6 +7,7 @@ import AppProfileFilterBuilderRowValueConnector from './AppProfileFilterBuilderR
 import BoolFilterBuilderRowValue from './BoolFilterBuilderRowValue';
 import DateFilterBuilderRowValue from './DateFilterBuilderRowValue';
 import FilterBuilderRowValueConnector from './FilterBuilderRowValueConnector';
+import HistoryEventTypeFilterBuilderRowValue from './HistoryEventTypeFilterBuilderRowValue';
 import IndexerFilterBuilderRowValueConnector from './IndexerFilterBuilderRowValueConnector';
 import PrivacyFilterBuilderRowValue from './PrivacyFilterBuilderRowValue';
 import ProtocolFilterBuilderRowValue from './ProtocolFilterBuilderRowValue';
@@ -58,6 +59,9 @@ function getRowValueConnector(selectedFilterBuilderProp) {
     case filterBuilderValueTypes.DATE:
       return DateFilterBuilderRowValue;
 
+    case filterBuilderValueTypes.HISTORY_EVENT_TYPE:
+      return HistoryEventTypeFilterBuilderRowValue;
+
     case filterBuilderValueTypes.INDEXER:
       return IndexerFilterBuilderRowValueConnector;
 
@@ -198,9 +202,11 @@ class FilterBuilderRow extends Component {
     const selectedFilterBuilderProp = this.selectedFilterBuilderProp;
 
     const keyOptions = filterBuilderProps.map((availablePropFilter) => {
+      const { name, label } = availablePropFilter;
+
       return {
-        key: availablePropFilter.name,
-        value: availablePropFilter.label
+        key: name,
+        value: typeof label === 'function' ? label() : label
       };
     }).sort((a, b) => a.value.localeCompare(b.value));
 

frontend/src/Components/Filter/Builder/FilterBuilderRowValueProps.ts

@@ -0,0 +1,16 @@
+import { FilterBuilderProp } from 'App/State/AppState';
+
+interface FilterBuilderRowOnChangeProps {
+  name: string;
+  value: unknown[];
+}
+
+interface FilterBuilderRowValueProps {
+  filterType?: string;
+  filterValue: string | number | object | string[] | number[] | object[];
+  selectedFilterBuilderProp: FilterBuilderProp<unknown>;
+  sectionItem: unknown[];
+  onChange: (payload: FilterBuilderRowOnChangeProps) => void;
+}
+
+export default FilterBuilderRowValueProps;

frontend/src/Components/Filter/Builder/HistoryEventTypeFilterBuilderRowValue.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import translate from 'Utilities/String/translate';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
+
+const EVENT_TYPE_OPTIONS = [
+  {
+    id: 1,
+    get name() {
+      return translate('Grabbed');
+    },
+  },
+  {
+    id: 3,
+    get name() {
+      return translate('IndexerRss');
+    },
+  },
+  {
+    id: 2,
+    get name() {
+      return translate('IndexerQuery');
+    },
+  },
+  {
+    id: 4,
+    get name() {
+      return translate('IndexerAuth');
+    },
+  },
+];
+
+function HistoryEventTypeFilterBuilderRowValue(
+  props: FilterBuilderRowValueProps
+) {
+  return <FilterBuilderRowValue {...props} tagList={EVENT_TYPE_OPTIONS} />;
+}
+
+export default HistoryEventTypeFilterBuilderRowValue;

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

@@ -3,9 +3,24 @@ import translate from 'Utilities/String/translate';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 const privacyTypes = [
-  { id: 'public', name: translate('Public') },
-  { id: 'private', name: translate('Private') },
-  { id: 'semiPrivate', name: translate('SemiPrivate') }
+  {
+    id: 'public',
+    get name() {
+      return translate('Public');
+    }
+  },
+  {
+    id: 'private',
+    get name() {
+      return translate('Private');
+    }
+  },
+  {
+    id: 'semiPrivate',
+    get name() {
+      return translate('SemiPrivate');
+    }
+  }
 ];
 
 function PrivacyFilterBuilderRowValue(props) {

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

@@ -30,22 +30,24 @@ function CustomFiltersModalContent(props) {
 
       <ModalBody>
         {
-          customFilters.map((customFilter) => {
-            return (
-              <CustomFilter
-                key={customFilter.id}
-                id={customFilter.id}
-                label={customFilter.label}
-                filters={customFilter.filters}
-                selectedFilterKey={selectedFilterKey}
-                isDeleting={isDeleting}
-                deleteError={deleteError}
-                dispatchSetFilter={dispatchSetFilter}
-                dispatchDeleteCustomFilter={dispatchDeleteCustomFilter}
-                onEditPress={onEditCustomFilter}
-              />
-            );
-          })
+          customFilters
+            .sort((a, b) => a.label.localeCompare(b.label))
+            .map((customFilter) => {
+              return (
+                <CustomFilter
+                  key={customFilter.id}
+                  id={customFilter.id}
+                  label={customFilter.label}
+                  filters={customFilter.filters}
+                  selectedFilterKey={selectedFilterKey}
+                  isDeleting={isDeleting}
+                  deleteError={deleteError}
+                  dispatchSetFilter={dispatchSetFilter}
+                  dispatchDeleteCustomFilter={dispatchDeleteCustomFilter}
+                  onEditPress={onEditCustomFilter}
+                />
+              );
+            })
         }
 
         <div className={styles.addButtonContainer}>

frontend/src/Components/Form/EnhancedSelectInputOption.css

@@ -9,6 +9,10 @@
   &:hover {
     background-color: var(--inputHoverBackgroundColor);
   }
+
+  &.isDisabled {
+    cursor: not-allowed;
+  }
 }
 
 .optionCheck {

frontend/src/Components/Form/FormLabel.css

@@ -2,8 +2,10 @@
   display: flex;
   justify-content: flex-end;
   margin-right: $formLabelRightMarginWidth;
+  padding-top: 8px;
+  min-height: 35px;
+  text-align: end;
   font-weight: bold;
-  line-height: 35px;
 }
 
 .hasError {

frontend/src/Components/Form/HintedSelectInputOption.js

@@ -33,7 +33,7 @@ function HintedSelectInputOption(props) {
         isMobile && styles.isMobile
       )}
       >
-        <div>{value}</div>
+        <div>{typeof value === 'function' ? value() : value}</div>
 
         {
           hint != null &&
@@ -48,7 +48,7 @@ function HintedSelectInputOption(props) {
 
 HintedSelectInputOption.propTypes = {
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  value: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   hint: PropTypes.node,
   depth: PropTypes.number,
   isSelected: PropTypes.bool.isRequired,

frontend/src/Components/Form/InfoInput.css

@@ -0,0 +1,13 @@
+.message {
+  composes: alert from '~Components/Alert.css';
+
+  a {
+    color: var(--linkColor);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--linkHoverColor);
+      text-decoration: underline;
+    }
+  }
+}

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

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

frontend/src/Components/Form/InfoInput.js

@@ -1,5 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import { kinds } from 'Helpers/Props';
+import styles from './InfoInput.css';
 
 class InfoInput extends Component {
 
@@ -7,12 +10,15 @@ class InfoInput extends Component {
   // Render
 
   render() {
-    const {
-      value
-    } = this.props;
+    const { value } = this.props;
 
     return (
-      <span dangerouslySetInnerHTML={{ __html: value }} />
+      <Alert
+        kind={kinds.INFO}
+        className={styles.message}
+      >
+        <span dangerouslySetInnerHTML={{ __html: value }} />
+      </Alert>
     );
   }
 }

frontend/src/Components/Form/NumberInput.js

@@ -41,7 +41,7 @@ class NumberInput extends Component {
   componentDidUpdate(prevProps, prevState) {
     const { value } = this.props;
 
-    if (value !== prevProps.value && !this.state.isFocused) {
+    if (!isNaN(value) && value !== prevProps.value && !this.state.isFocused) {
       this.setState({
         value: value == null ? '' : value.toString()
       });

frontend/src/Components/Form/SelectInput.js

@@ -61,7 +61,7 @@ class SelectInput extends Component {
                 value={key}
                 {...otherOptionProps}
               >
-                {optionValue}
+                {typeof optionValue === 'function' ? optionValue() : optionValue}
               </option>
             );
           })
@@ -75,7 +75,7 @@ SelectInput.propTypes = {
   className: PropTypes.string,
   disabledClassName: PropTypes.string,
   name: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.func]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   isDisabled: PropTypes.bool,
   hasError: PropTypes.bool,

frontend/src/Components/Icon.js

@@ -41,7 +41,7 @@ class Icon extends PureComponent {
       return (
         <span
           className={containerClassName}
-          title={title}
+          title={typeof title === 'function' ? title() : title}
         >
           {icon}
         </span>
@@ -58,7 +58,7 @@ Icon.propTypes = {
   name: PropTypes.object.isRequired,
   kind: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   isSpinning: PropTypes.bool.isRequired,
   fixedWidth: PropTypes.bool.isRequired
 };

frontend/src/Components/Link/SpinnerErrorButton.js

@@ -97,6 +97,7 @@ class SpinnerErrorButton extends Component {
 
   render() {
     const {
+      kind,
       isSpinning,
       error,
       children,
@@ -112,7 +113,7 @@ class SpinnerErrorButton extends Component {
     const showIcon = wasSuccessful || hasWarning || hasError;
 
     let iconName = icons.CHECK;
-    let iconKind = kinds.SUCCESS;
+    let iconKind = kind === kinds.PRIMARY ? kinds.DEFAULT : kinds.SUCCESS;
 
     if (hasWarning) {
       iconName = icons.WARNING;
@@ -126,6 +127,7 @@ class SpinnerErrorButton extends Component {
 
     return (
       <SpinnerButton
+        kind={kind}
         isSpinning={isSpinning}
         {...otherProps}
       >
@@ -154,6 +156,7 @@ class SpinnerErrorButton extends Component {
 }
 
 SpinnerErrorButton.propTypes = {
+  kind: PropTypes.oneOf(kinds.all),
   isSpinning: PropTypes.bool.isRequired,
   error: PropTypes.object,
   children: PropTypes.node.isRequired

frontend/src/Components/Markdown/InlineMarkdown.js

@@ -10,27 +10,55 @@ class InlineMarkdown extends Component {
   render() {
     const {
       className,
-      data
+      data,
+      blockClassName
     } = this.props;
 
-    // For now only replace links
+    // For now only replace links or code blocks (not both)
     const markdownBlocks = [];
     if (data) {
-      const regex = RegExp(/\[(.+?)\]\((.+?)\)/g);
+      const linkRegex = RegExp(/\[(.+?)\]\((.+?)\)/g);
 
       let endIndex = 0;
       let match = null;
-      while ((match = regex.exec(data)) !== null) {
+
+      while ((match = linkRegex.exec(data)) !== null) {
         if (match.index > endIndex) {
           markdownBlocks.push(data.substr(endIndex, match.index - endIndex));
         }
+
         markdownBlocks.push(<Link key={match.index} to={match[2]}>{match[1]}</Link>);
         endIndex = match.index + match[0].length;
       }
 
-      if (endIndex !== data.length) {
+      if (endIndex !== data.length && markdownBlocks.length > 0) {
         markdownBlocks.push(data.substr(endIndex, data.length - endIndex));
       }
+
+      const codeRegex = RegExp(/(?=`)`(?!`)[^`]*(?=`)`(?!`)/g);
+
+      endIndex = 0;
+      match = null;
+      let matchedCode = false;
+
+      while ((match = codeRegex.exec(data)) !== null) {
+        matchedCode = true;
+
+        if (match.index > endIndex) {
+          markdownBlocks.push(data.substr(endIndex, match.index - endIndex));
+        }
+
+        markdownBlocks.push(<code key={`code-${match.index}`} className={blockClassName ?? null}>{match[0].substring(1, match[0].length - 1)}</code>);
+        endIndex = match.index + match[0].length;
+      }
+
+      if (endIndex !== data.length && markdownBlocks.length > 0 && matchedCode) {
+        markdownBlocks.push(data.substr(endIndex, data.length - endIndex));
+      }
+
+      if (markdownBlocks.length === 0) {
+        markdownBlocks.push(data);
+      }
     }
 
     return <span className={className}>{markdownBlocks}</span>;
@@ -39,7 +67,8 @@ class InlineMarkdown extends Component {
 
 InlineMarkdown.propTypes = {
   className: PropTypes.string,
-  data: PropTypes.string
+  data: PropTypes.string,
+  blockClassName: PropTypes.string
 };
 
 export default InlineMarkdown;

frontend/src/Components/Menu/FilterMenuContent.js

@@ -33,25 +33,33 @@ class FilterMenuContent extends Component {
                 selectedFilterKey={selectedFilterKey}
                 onPress={onFilterSelect}
               >
-                {filter.label}
+                {typeof filter.label === 'function' ? filter.label() : filter.label}
               </FilterMenuItem>
             );
           })
         }
 
         {
-          customFilters.map((filter) => {
-            return (
-              <FilterMenuItem
-                key={filter.id}
-                filterKey={filter.id}
-                selectedFilterKey={selectedFilterKey}
-                onPress={onFilterSelect}
-              >
-                {filter.label}
-              </FilterMenuItem>
-            );
-          })
+          customFilters.length > 0 ?
+            <MenuItemSeparator /> :
+            null
+        }
+
+        {
+          customFilters
+            .sort((a, b) => a.label.localeCompare(b.label))
+            .map((filter) => {
+              return (
+                <FilterMenuItem
+                  key={filter.id}
+                  filterKey={filter.id}
+                  selectedFilterKey={selectedFilterKey}
+                  onPress={onFilterSelect}
+                >
+                  {filter.label}
+                </FilterMenuItem>
+              );
+            })
         }
 
         {

frontend/src/Components/Modal/ModalContent.js

@@ -3,6 +3,7 @@ import React from 'react';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './ModalContent.css';
 
 function ModalContent(props) {
@@ -28,6 +29,7 @@ function ModalContent(props) {
             <Icon
               name={icons.CLOSE}
               size={18}
+              title={translate('Close')}
             />
           </Link>
       }

frontend/src/Components/Page/ErrorPage.js

@@ -7,7 +7,7 @@ function ErrorPage(props) {
   const {
     version,
     isLocalStorageSupported,
-    hasTranslationsError,
+    translationsError,
     indexersError,
     indexerStatusError,
     indexerCategoriesError,
@@ -22,8 +22,8 @@ function ErrorPage(props) {
 
   if (!isLocalStorageSupported) {
     errorMessage = 'Local Storage is not supported or disabled. A plugin or private browsing may have disabled it.';
-  } else if (hasTranslationsError) {
-    errorMessage = 'Failed to load translations from API';
+  } else if (translationsError) {
+    errorMessage = getErrorMessage(translationsError, 'Failed to load translations from API');
   } else if (indexersError) {
     errorMessage = getErrorMessage(indexersError, 'Failed to load indexers from API');
   } else if (indexerStatusError) {
@@ -58,7 +58,7 @@ function ErrorPage(props) {
 ErrorPage.propTypes = {
   version: PropTypes.string.isRequired,
   isLocalStorageSupported: PropTypes.bool.isRequired,
-  hasTranslationsError: PropTypes.bool.isRequired,
+  translationsError: PropTypes.object,
   indexersError: PropTypes.object,
   indexerStatusError: PropTypes.object,
   indexerCategoriesError: PropTypes.object,

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

@@ -78,6 +78,7 @@ class PageHeader extends Component {
             aria-label="Donate"
             to="https://prowlarr.com/donate"
             size={14}
+            title={translate('Donate')}
           />
           <IconButton
             className={styles.translate}

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

@@ -24,6 +24,7 @@ function PageHeaderActionsMenu(props) {
         <MenuButton className={styles.menuButton} aria-label="Menu Button">
           <Icon
             name={icons.INTERACTIVE}
+            title={translate('Menu')}
           />
         </MenuButton>
 

frontend/src/Components/Page/PageConnector.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { createSelector } from 'reselect';
-import { saveDimensions, setIsSidebarVisible } from 'Store/Actions/appActions';
+import { fetchTranslations, saveDimensions, setIsSidebarVisible } from 'Store/Actions/appActions';
 import { fetchCustomFilters } from 'Store/Actions/customFilterActions';
 import { fetchIndexers } from 'Store/Actions/indexerActions';
 import { fetchIndexerStatus } from 'Store/Actions/indexerStatusActions';
@@ -54,6 +54,7 @@ const selectIsPopulated = createSelector(
   (state) => state.indexerStatus.isPopulated,
   (state) => state.settings.indexerCategories.isPopulated,
   (state) => state.system.status.isPopulated,
+  (state) => state.app.translations.isPopulated,
   (
     customFiltersIsPopulated,
     tagsIsPopulated,
@@ -63,7 +64,8 @@ const selectIsPopulated = createSelector(
     indexersIsPopulated,
     indexerStatusIsPopulated,
     indexerCategoriesIsPopulated,
-    systemStatusIsPopulated
+    systemStatusIsPopulated,
+    translationsIsPopulated
   ) => {
     return (
       customFiltersIsPopulated &&
@@ -74,7 +76,8 @@ const selectIsPopulated = createSelector(
       indexersIsPopulated &&
       indexerStatusIsPopulated &&
       indexerCategoriesIsPopulated &&
-      systemStatusIsPopulated
+      systemStatusIsPopulated &&
+      translationsIsPopulated
     );
   }
 );
@@ -89,6 +92,7 @@ const selectErrors = createSelector(
   (state) => state.indexerStatus.error,
   (state) => state.settings.indexerCategories.error,
   (state) => state.system.status.error,
+  (state) => state.app.translations.error,
   (
     customFiltersError,
     tagsError,
@@ -98,7 +102,8 @@ const selectErrors = createSelector(
     indexersError,
     indexerStatusError,
     indexerCategoriesError,
-    systemStatusError
+    systemStatusError,
+    translationsError
   ) => {
     const hasError = !!(
       customFiltersError ||
@@ -109,7 +114,8 @@ const selectErrors = createSelector(
       indexersError ||
       indexerStatusError ||
       indexerCategoriesError ||
-      systemStatusError
+      systemStatusError ||
+      translationsError
     );
 
     return {
@@ -122,7 +128,8 @@ const selectErrors = createSelector(
       indexersError,
       indexerStatusError,
       indexerCategoriesError,
-      systemStatusError
+      systemStatusError,
+      translationsError
     };
   }
 );
@@ -184,6 +191,9 @@ function createMapDispatchToProps(dispatch, props) {
     dispatchFetchStatus() {
       dispatch(fetchStatus());
     },
+    dispatchFetchTranslations() {
+      dispatch(fetchTranslations());
+    },
     onResize(dimensions) {
       dispatch(saveDimensions(dimensions));
     },
@@ -217,6 +227,7 @@ class PageConnector extends Component {
       this.props.dispatchFetchUISettings();
       this.props.dispatchFetchGeneralSettings();
       this.props.dispatchFetchStatus();
+      this.props.dispatchFetchTranslations();
     }
   }
 
@@ -232,7 +243,6 @@ class PageConnector extends Component {
 
   render() {
     const {
-      hasTranslationsError,
       isPopulated,
       hasError,
       dispatchFetchTags,
@@ -243,15 +253,15 @@ class PageConnector extends Component {
       dispatchFetchUISettings,
       dispatchFetchGeneralSettings,
       dispatchFetchStatus,
+      dispatchFetchTranslations,
       ...otherProps
     } = this.props;
 
-    if (hasTranslationsError || hasError || !this.state.isLocalStorageSupported) {
+    if (hasError || !this.state.isLocalStorageSupported) {
       return (
         <ErrorPage
           {...this.state}
           {...otherProps}
-          hasTranslationsError={hasTranslationsError}
         />
       );
     }
@@ -272,7 +282,6 @@ class PageConnector extends Component {
 }
 
 PageConnector.propTypes = {
-  hasTranslationsError: PropTypes.bool.isRequired,
   isPopulated: PropTypes.bool.isRequired,
   hasError: PropTypes.bool.isRequired,
   isSidebarVisible: PropTypes.bool.isRequired,
@@ -285,6 +294,7 @@ PageConnector.propTypes = {
   dispatchFetchUISettings: PropTypes.func.isRequired,
   dispatchFetchGeneralSettings: PropTypes.func.isRequired,
   dispatchFetchStatus: PropTypes.func.isRequired,
+  dispatchFetchTranslations: PropTypes.func.isRequired,
   onSidebarVisibleChange: PropTypes.func.isRequired
 };
 

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

@@ -20,12 +20,12 @@ const SIDEBAR_WIDTH = parseInt(dimensions.sidebarWidth);
 const links = [
   {
     iconName: icons.MOVIE_CONTINUING,
-    title: translate('Indexers'),
+    title: () => translate('Indexers'),
     to: '/',
     alias: '/indexers',
     children: [
       {
-        title: translate('Stats'),
+        title: () => translate('Stats'),
         to: '/indexers/stats'
       }
     ]
@@ -33,47 +33,47 @@ const links = [
 
   {
     iconName: icons.SEARCH,
-    title: translate('Search'),
+    title: () => translate('Search'),
     to: '/search'
   },
 
   {
     iconName: icons.ACTIVITY,
-    title: translate('History'),
+    title: () => translate('History'),
     to: '/history'
   },
 
   {
     iconName: icons.SETTINGS,
-    title: translate('Settings'),
+    title: () => translate('Settings'),
     to: '/settings',
     children: [
       {
-        title: translate('Indexers'),
+        title: () => translate('Indexers'),
         to: '/settings/indexers'
       },
       {
-        title: translate('Apps'),
+        title: () => translate('Apps'),
         to: '/settings/applications'
       },
       {
-        title: translate('DownloadClients'),
+        title: () => translate('DownloadClients'),
         to: '/settings/downloadclients'
       },
       {
-        title: translate('Connect'),
+        title: () => translate('Connect'),
         to: '/settings/connect'
       },
       {
-        title: translate('Tags'),
+        title: () => translate('Tags'),
         to: '/settings/tags'
       },
       {
-        title: translate('General'),
+        title: () => translate('General'),
         to: '/settings/general'
       },
       {
-        title: translate('UI'),
+        title: () => translate('UI'),
         to: '/settings/ui'
       }
     ]
@@ -81,32 +81,32 @@ const links = [
 
   {
     iconName: icons.SYSTEM,
-    title: translate('System'),
+    title: () => translate('System'),
     to: '/system/status',
     children: [
       {
-        title: translate('Status'),
+        title: () => translate('Status'),
         to: '/system/status',
         statusComponent: HealthStatusConnector
       },
       {
-        title: translate('Tasks'),
+        title: () => translate('Tasks'),
         to: '/system/tasks'
       },
       {
-        title: translate('Backup'),
+        title: () => translate('Backup'),
         to: '/system/backup'
       },
       {
-        title: translate('Updates'),
+        title: () => translate('Updates'),
         to: '/system/updates'
       },
       {
-        title: translate('Events'),
+        title: () => translate('Events'),
         to: '/system/events'
       },
       {
-        title: translate('LogFiles'),
+        title: () => translate('LogFiles'),
         to: '/system/logs/files'
       }
     ]

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

@@ -64,7 +64,7 @@ class PageSidebarItem extends Component {
           }
 
           <span className={isChildItem ? styles.noIcon : null}>
-            {title}
+            {typeof title === 'function' ? title() : title}
           </span>
 
           {
@@ -88,7 +88,7 @@ class PageSidebarItem extends Component {
 
 PageSidebarItem.propTypes = {
   iconName: PropTypes.object,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   to: PropTypes.string.isRequired,
   isActive: PropTypes.bool,
   isActiveParent: PropTypes.bool,

frontend/src/Components/Table/Cells/RelativeDateCell.js

@@ -1,58 +1,66 @@
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import TableRowCell from './TableRowCell';
 import styles from './RelativeDateCell.css';
 
-class RelativeDateCell extends PureComponent {
+function createRelativeDateCellSelector() {
+  return createSelector(createUISettingsSelector(), (uiSettings) => {
+    return {
+      showRelativeDates: uiSettings.showRelativeDates,
+      shortDateFormat: uiSettings.shortDateFormat,
+      longDateFormat: uiSettings.longDateFormat,
+      timeFormat: uiSettings.timeFormat
+    };
+  });
+}
 
+function RelativeDateCell(props) {
   //
   // Render
 
-  render() {
-    const {
-      className,
-      date,
-      includeSeconds,
-      showRelativeDates,
-      shortDateFormat,
-      longDateFormat,
-      timeFormat,
-      component: Component,
-      dispatch,
-      ...otherProps
-    } = this.props;
+  const {
+    className,
+    date,
+    includeSeconds,
+    component: Component,
+    dispatch,
+    ...otherProps
+  } = props;
 
-    if (!date) {
-      return (
-        <Component
-          className={className}
-          {...otherProps}
-        />
-      );
-    }
+  const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } =
+    useSelector(createRelativeDateCellSelector());
 
-    return (
-      <Component
-        className={className}
-        title={formatDateTime(date, longDateFormat, timeFormat, { includeSeconds, includeRelativeDay: !showRelativeDates })}
-        {...otherProps}
-      >
-        {getRelativeDate(date, shortDateFormat, showRelativeDates, { timeFormat, includeSeconds, timeForToday: true })}
-      </Component>
-    );
+  if (!date) {
+    return <Component className={className} {...otherProps} />;
   }
+
+  return (
+    <Component
+      className={className}
+      title={formatDateTime(date, longDateFormat, timeFormat, {
+        includeSeconds,
+        includeRelativeDay: !showRelativeDates
+      })}
+      {...otherProps}
+    >
+      {getRelativeDate(date, shortDateFormat, showRelativeDates, {
+        timeFormat,
+        includeSeconds,
+        timeForToday: true
+      })}
+    </Component>
+  );
 }
 
 RelativeDateCell.propTypes = {
   className: PropTypes.string.isRequired,
   date: PropTypes.string,
   includeSeconds: PropTypes.bool.isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
   component: PropTypes.elementType,
   dispatch: PropTypes.func
 };

frontend/src/Components/Table/Column.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 
+type PropertyFunction<T> = () => T;
+
 interface Column {
   name: string;
-  label: string | React.ReactNode;
+  label: string | PropertyFunction<string> | React.ReactNode;
   columnLabel?: string;
   isSortable?: boolean;
   isVisible: boolean;

frontend/src/Components/Table/Table.js

@@ -107,7 +107,7 @@ function Table(props) {
                   {...getTableHeaderCellProps(otherProps)}
                   {...column}
                 >
-                  {column.label}
+                  {typeof column.label === 'function' ? column.label() : column.label}
                 </TableHeaderCell>
               );
             })

frontend/src/Components/Table/TableHeaderCell.js

@@ -30,6 +30,7 @@ class TableHeaderCell extends Component {
     const {
       className,
       name,
+      label,
       columnLabel,
       isSortable,
       isVisible,
@@ -53,7 +54,8 @@ class TableHeaderCell extends Component {
           {...otherProps}
           component="th"
           className={className}
-          title={columnLabel}
+          label={typeof label === 'function' ? label() : label}
+          title={typeof columnLabel === 'function' ? columnLabel() : columnLabel}
           onPress={this.onPress}
         >
           {children}
@@ -77,7 +79,8 @@ class TableHeaderCell extends Component {
 TableHeaderCell.propTypes = {
   className: PropTypes.string,
   name: PropTypes.string.isRequired,
-  columnLabel: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
+  columnLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   isSortable: PropTypes.bool,
   isVisible: PropTypes.bool,
   isModifiable: PropTypes.bool,

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

@@ -35,7 +35,7 @@ function TableOptionsColumn(props) {
             isDisabled={isModifiable === false}
             onChange={onVisibleChange}
           />
-          {label}
+          {typeof label === 'function' ? label() : label}
         </label>
 
         {
@@ -56,7 +56,7 @@ function TableOptionsColumn(props) {
 
 TableOptionsColumn.propTypes = {
   name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   isVisible: PropTypes.bool.isRequired,
   isModifiable: PropTypes.bool.isRequired,
   index: PropTypes.number.isRequired,

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

@@ -112,7 +112,7 @@ class TableOptionsColumnDragSource extends Component {
 
         <TableOptionsColumn
           name={name}
-          label={label}
+          label={typeof label === 'function' ? label() : label}
           isVisible={isVisible}
           isModifiable={isModifiable}
           index={index}
@@ -138,7 +138,7 @@ class TableOptionsColumnDragSource extends Component {
 
 TableOptionsColumnDragSource.propTypes = {
   name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   isVisible: PropTypes.bool.isRequired,
   isModifiable: PropTypes.bool.isRequired,
   index: PropTypes.number.isRequired,

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

@@ -192,7 +192,7 @@ class TableOptionsModal extends Component {
                                       <TableOptionsColumnDragSource
                                         key={name}
                                         name={name}
-                                        label={label || columnLabel}
+                                        label={columnLabel || label}
                                         isVisible={isVisible}
                                         isModifiable={true}
                                         index={index}
@@ -210,7 +210,7 @@ class TableOptionsModal extends Component {
                                     <TableOptionsColumn
                                       key={name}
                                       name={name}
-                                      label={label || columnLabel}
+                                      label={columnLabel || label}
                                       isVisible={isVisible}
                                       index={index}
                                       isModifiable={false}

frontend/src/Components/keyboardShortcuts.js

@@ -6,37 +6,51 @@ import translate from 'Utilities/String/translate';
 export const shortcuts = {
   OPEN_KEYBOARD_SHORTCUTS_MODAL: {
     key: '?',
-    name: translate('OpenThisModal')
+    get name() {
+      return translate('OpenThisModal');
+    }
   },
 
   CLOSE_MODAL: {
     key: 'Esc',
-    name: translate('CloseCurrentModal')
+    get name() {
+      return translate('CloseCurrentModal');
+    }
   },
 
   ACCEPT_CONFIRM_MODAL: {
     key: 'Enter',
-    name: translate('AcceptConfirmationModal')
+    get name() {
+      return translate('AcceptConfirmationModal');
+    }
   },
 
   MOVIE_SEARCH_INPUT: {
     key: 's',
-    name: translate('FocusSearchBox')
+    get name() {
+      return translate('FocusSearchBox');
+    }
   },
 
   SAVE_SETTINGS: {
     key: 'mod+s',
-    name: translate('SaveSettings')
+    get name() {
+      return translate('SaveSettings');
+    }
   },
 
   SCROLL_TOP: {
     key: 'mod+home',
-    name: translate('MovieIndexScrollTop')
+    get name() {
+      return translate('MovieIndexScrollTop');
+    }
   },
 
   SCROLL_BOTTOM: {
     key: 'mod+end',
-    name: translate('MovieIndexScrollBottom')
+    get name() {
+      return translate('MovieIndexScrollBottom');
+    }
   }
 };
 

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

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

frontend/src/FirstRun/AuthenticationRequiredModalContent.js

@@ -11,7 +11,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
-import { authenticationMethodOptions, authenticationRequiredOptions, authenticationRequiredWarning } from 'Settings/General/SecuritySettings';
+import { authenticationMethodOptions, authenticationRequiredOptions } from 'Settings/General/SecuritySettings';
 import translate from 'Utilities/String/translate';
 import styles from './AuthenticationRequiredModalContent.css';
 
@@ -34,7 +34,8 @@ function AuthenticationRequiredModalContent(props) {
     authenticationMethod,
     authenticationRequired,
     username,
-    password
+    password,
+    passwordConfirmation
   } = settings;
 
   const authenticationEnabled = authenticationMethod && authenticationMethod.value !== 'none';
@@ -63,71 +64,75 @@ function AuthenticationRequiredModalContent(props) {
           className={styles.authRequiredAlert}
           kind={kinds.WARNING}
         >
-          {authenticationRequiredWarning}
+          {translate('AuthenticationRequiredWarning')}
         </Alert>
 
         {
           isPopulated && !error ?
             <div>
               <FormGroup>
-                <FormLabel>{translate('Authentication')}</FormLabel>
+                <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/prowlarr/faq#forced-authentication"
                   onChange={onInputChange}
                   {...authenticationMethod}
                 />
               </FormGroup>
 
-              {
-                authenticationEnabled ?
-                  <FormGroup>
-                    <FormLabel>{translate('AuthenticationRequired')}</FormLabel>
+              <FormGroup>
+                <FormLabel>{translate('AuthenticationRequired')}</FormLabel>
 
-                    <FormInputGroup
-                      type={inputTypes.SELECT}
-                      name="authenticationRequired"
-                      values={authenticationRequiredOptions}
-                      helpText={translate('AuthenticationRequiredHelpText')}
-                      onChange={onInputChange}
-                      {...authenticationRequired}
-                    />
-                  </FormGroup> :
-                  null
-              }
+                <FormInputGroup
+                  type={inputTypes.SELECT}
+                  name="authenticationRequired"
+                  values={authenticationRequiredOptions}
+                  helpText={translate('AuthenticationRequiredHelpText')}
+                  onChange={onInputChange}
+                  {...authenticationRequired}
+                />
+              </FormGroup>
 
-              {
-                authenticationEnabled ?
-                  <FormGroup>
-                    <FormLabel>{translate('Username')}</FormLabel>
+              <FormGroup>
+                <FormLabel>{translate('Username')}</FormLabel>
 
-                    <FormInputGroup
-                      type={inputTypes.TEXT}
-                      name="username"
-                      onChange={onInputChange}
-                      {...username}
-                    />
-                  </FormGroup> :
-                  null
-              }
+                <FormInputGroup
+                  type={inputTypes.TEXT}
+                  name="username"
+                  onChange={onInputChange}
+                  helpTextWarning={username?.value ? undefined : translate('AuthenticationRequiredUsernameHelpTextWarning')}
+                  {...username}
+                />
+              </FormGroup>
 
-              {
-                authenticationEnabled ?
-                  <FormGroup>
-                    <FormLabel>{translate('Password')}</FormLabel>
+              <FormGroup>
+                <FormLabel>{translate('Password')}</FormLabel>
 
-                    <FormInputGroup
-                      type={inputTypes.PASSWORD}
-                      name="password"
-                      onChange={onInputChange}
-                      {...password}
-                    />
-                  </FormGroup> :
-                  null
-              }
+                <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
         }

frontend/src/Helpers/Props/filterBuilderValueTypes.js

@@ -2,6 +2,7 @@ export const BOOL = 'bool';
 export const BYTES = 'bytes';
 export const DATE = 'date';
 export const DEFAULT = 'default';
+export const HISTORY_EVENT_TYPE = 'historyEventType';
 export const INDEXER = 'indexer';
 export const PROTOCOL = 'protocol';
 export const PRIVACY = 'privacy';

frontend/src/Helpers/Props/icons.js

@@ -75,6 +75,7 @@ import {
   faListCheck as fasListCheck,
   faLocationArrow as fasLocationArrow,
   faLock as fasLock,
+  faMagnet as fasMagnet,
   faMedkit as fasMedkit,
   faMinus as fasMinus,
   faMusic as fasMusic,
@@ -181,6 +182,7 @@ export const INTERACTIVE = fasUser;
 export const KEYBOARD = farKeyboard;
 export const LOCK = fasLock;
 export const LOGOUT = fasSignOutAlt;
+export const MAGNET = fasMagnet;
 export const MANAGE = fasListCheck;
 export const MEDIA_INFO = farFileInvoice;
 export const MISSING = fasExclamationTriangle;

frontend/src/Helpers/Props/inputTypes.js

@@ -10,6 +10,7 @@ export const INFO = 'info';
 export const MOVIE_MONITORED_SELECT = 'movieMonitoredSelect';
 export const CATEGORY_SELECT = 'newznabCategorySelect';
 export const DOWNLOAD_CLIENT_SELECT = 'downloadClientSelect';
+export const FLOAT = 'float';
 export const NUMBER = 'number';
 export const OAUTH = 'oauth';
 export const PASSWORD = 'password';
@@ -35,6 +36,7 @@ export const all = [
   INFO,
   MOVIE_MONITORED_SELECT,
   CATEGORY_SELECT,
+  FLOAT,
   NUMBER,
   OAUTH,
   PASSWORD,

frontend/src/History/Details/HistoryDetailsModal.css

@@ -1,5 +0,0 @@
-.markAsFailedButton {
-  composes: button from '~Components/Link/Button.css';
-
-  margin-right: auto;
-}

frontend/src/History/Details/HistoryDetailsModal.js

@@ -1,16 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Button from 'Components/Link/Button';
-import SpinnerButton from 'Components/Link/SpinnerButton';
 import Modal from 'Components/Modal/Modal';
 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 { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import HistoryDetails from './HistoryDetails';
-import styles from './HistoryDetailsModal.css';
 
 function getHeaderTitle(eventType) {
   switch (eventType) {
@@ -33,10 +30,8 @@ function HistoryDetailsModal(props) {
     eventType,
     indexer,
     data,
-    isMarkingAsFailed,
     shortDateFormat,
     timeFormat,
-    onMarkAsFailedPress,
     onModalClose
   } = props;
 
@@ -61,18 +56,6 @@ function HistoryDetailsModal(props) {
         </ModalBody>
 
         <ModalFooter>
-          {
-            eventType === 'grabbed' &&
-              <SpinnerButton
-                className={styles.markAsFailedButton}
-                kind={kinds.DANGER}
-                isSpinning={isMarkingAsFailed}
-                onPress={onMarkAsFailedPress}
-              >
-                Mark as Failed
-              </SpinnerButton>
-          }
-
           <Button
             onPress={onModalClose}
           >
@@ -89,10 +72,8 @@ HistoryDetailsModal.propTypes = {
   eventType: PropTypes.string.isRequired,
   indexer: PropTypes.object.isRequired,
   data: PropTypes.object.isRequired,
-  isMarkingAsFailed: PropTypes.bool.isRequired,
   shortDateFormat: PropTypes.string.isRequired,
   timeFormat: PropTypes.string.isRequired,
-  onMarkAsFailedPress: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 

frontend/src/History/History.js

@@ -15,6 +15,7 @@ import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptions
 import TablePager from 'Components/Table/TablePager';
 import { align, icons, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
+import HistoryFilterModal from './HistoryFilterModal';
 import HistoryOptionsConnector from './HistoryOptionsConnector';
 import HistoryRowConnector from './HistoryRowConnector';
 
@@ -63,6 +64,7 @@ class History extends Component {
       columns,
       selectedFilterKey,
       filters,
+      customFilters,
       totalRecords,
       onFilterSelect,
       onFirstPagePress,
@@ -108,7 +110,8 @@ class History extends Component {
               alignMenu={align.RIGHT}
               selectedFilterKey={selectedFilterKey}
               filters={filters}
-              customFilters={[]}
+              customFilters={customFilters}
+              filterModalConnectorComponent={HistoryFilterModal}
               onFilterSelect={onFilterSelect}
             />
           </PageToolbarSection>
@@ -193,8 +196,9 @@ History.propTypes = {
   indexersError: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  selectedFilterKey: PropTypes.string.isRequired,
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
   totalRecords: PropTypes.number,
   onFilterSelect: PropTypes.func.isRequired,
   onFirstPagePress: PropTypes.func.isRequired,

frontend/src/History/HistoryConnector.js

@@ -6,6 +6,7 @@ import * as commandNames from 'Commands/commandNames';
 import withCurrentPage from 'Components/withCurrentPage';
 import { executeCommand } from 'Store/Actions/commandActions';
 import * as historyActions from 'Store/Actions/historyActions';
+import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
 import History from './History';
@@ -14,13 +15,15 @@ function createMapStateToProps() {
   return createSelector(
     (state) => state.history,
     (state) => state.indexers,
+    createCustomFiltersSelector('history'),
     createCommandExecutingSelector(commandNames.CLEAR_HISTORY),
-    (history, indexers, isHistoryClearing) => {
+    (history, indexers, customFilters, isHistoryClearing) => {
       return {
         isIndexersFetching: indexers.isFetching,
         isIndexersPopulated: indexers.isPopulated,
         indexersError: indexers.error,
         isHistoryClearing,
+        customFilters,
         ...history
       };
     }

frontend/src/History/HistoryFilterModal.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import FilterModal from 'Components/Filter/FilterModal';
+import { setHistoryFilter } from 'Store/Actions/historyActions';
+
+function createHistorySelector() {
+  return createSelector(
+    (state: AppState) => state.history.items,
+    (queueItems) => {
+      return queueItems;
+    }
+  );
+}
+
+function createFilterBuilderPropsSelector() {
+  return createSelector(
+    (state: AppState) => state.history.filterBuilderProps,
+    (filterBuilderProps) => {
+      return filterBuilderProps;
+    }
+  );
+}
+
+interface HistoryFilterModalProps {
+  isOpen: boolean;
+}
+
+export default function HistoryFilterModal(props: HistoryFilterModalProps) {
+  const sectionItems = useSelector(createHistorySelector());
+  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
+  const customFilterType = 'history';
+
+  const dispatch = useDispatch();
+
+  const dispatchSetFilter = useCallback(
+    (payload: unknown) => {
+      dispatch(setHistoryFilter(payload));
+    },
+    [dispatch]
+  );
+
+  return (
+    <FilterModal
+      // TODO: Don't spread all the props
+      {...props}
+      sectionItems={sectionItems}
+      filterBuilderProps={filterBuilderProps}
+      customFilterType={customFilterType}
+      dispatchSetFilter={dispatchSetFilter}
+    />
+  );
+}

frontend/src/History/HistoryRow.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import { icons, kinds } from 'Helpers/Props';
@@ -14,24 +14,79 @@ import HistoryEventTypeCell from './HistoryEventTypeCell';
 import HistoryRowParameter from './HistoryRowParameter';
 import styles from './HistoryRow.css';
 
-const historyParameters = [
+export const historyParameters = [
   { key: historyDataTypes.IMDB_ID, title: 'IMDb' },
   { key: historyDataTypes.TMDB_ID, title: 'TMDb' },
   { key: historyDataTypes.TVDB_ID, title: 'TVDb' },
   { key: historyDataTypes.TRAKT_ID, title: 'Trakt' },
   { key: historyDataTypes.R_ID, title: 'TvRage' },
   { key: historyDataTypes.TVMAZE_ID, title: 'TvMaze' },
-  { key: historyDataTypes.SEASON, title: translate('Season') },
-  { key: historyDataTypes.EPISODE, title: translate('Episode') },
-  { key: historyDataTypes.ARTIST, title: translate('Artist') },
-  { key: historyDataTypes.ALBUM, title: translate('Album') },
-  { key: historyDataTypes.LABEL, title: translate('Label') },
-  { key: historyDataTypes.TRACK, title: translate('Track') },
-  { key: historyDataTypes.YEAR, title: translate('Year') },
-  { key: historyDataTypes.GENRE, title: translate('Genre') },
-  { key: historyDataTypes.AUTHOR, title: translate('Author') },
-  { key: historyDataTypes.TITLE, title: translate('Title') },
-  { key: historyDataTypes.PUBLISHER, title: translate('Publisher') }
+  {
+    key: historyDataTypes.SEASON,
+    get title() {
+      return translate('Season');
+    }
+  },
+  {
+    key: historyDataTypes.EPISODE,
+    get title() {
+      return translate('Episode');
+    }
+  },
+  {
+    key: historyDataTypes.ARTIST,
+    get title() {
+      return translate('Artist');
+    }
+  },
+  {
+    key: historyDataTypes.ALBUM,
+    get title() {
+      return translate('Album');
+    }
+  },
+  {
+    key: historyDataTypes.LABEL,
+    get title() {
+      return translate('Label');
+    }
+  },
+  {
+    key: historyDataTypes.TRACK,
+    get title() {
+      return translate('Track');
+    }
+  },
+  {
+    key: historyDataTypes.YEAR,
+    get title() {
+      return translate('Year');
+    }
+  },
+  {
+    key: historyDataTypes.GENRE,
+    get title() {
+      return translate('Genre');
+    }
+  },
+  {
+    key: historyDataTypes.AUTHOR,
+    get title() {
+      return translate('Author');
+    }
+  },
+  {
+    key: historyDataTypes.TITLE,
+    get title() {
+      return translate('Title');
+    }
+  },
+  {
+    key: historyDataTypes.PUBLISHER,
+    get title() {
+      return translate('Publisher');
+    }
+  }
 ];
 
 class HistoryRow extends Component {
@@ -298,7 +353,7 @@ class HistoryRow extends Component {
 
             if (name === 'date') {
               return (
-                <RelativeDateCellConnector
+                <RelativeDateCell
                   key={name}
                   date={date}
                   className={styles.date}

frontend/src/History/HistoryRowParameter.js

@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import styles from './HistoryRowParameter.css';
-
-class HistoryRowParameter extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      title,
-      value
-    } = this.props;
-
-    return (
-      <div className={styles.parameter}>
-        <div className={styles.info}>
-          <span>
-            {
-              title
-            }
-          </span>
-        </div>
-
-        <div
-          className={styles.value}
-        >
-          {
-            value
-          }
-        </div>
-      </div>
-    );
-  }
-}
-
-HistoryRowParameter.propTypes = {
-  title: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired
-};
-
-export default HistoryRowParameter;

frontend/src/History/HistoryRowParameter.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Link from 'Components/Link/Link';
+import styles from './HistoryRowParameter.css';
+
+interface HistoryRowParameterProps {
+  title: string;
+  value: string;
+}
+
+function HistoryRowParameter(props: HistoryRowParameterProps) {
+  const { title, value } = props;
+
+  const type = title.toLowerCase();
+
+  let link = null;
+
+  if (type === 'imdb') {
+    link = <Link to={`https://imdb.com/title/${value}/`}>{value}</Link>;
+  } else if (type === 'tmdb') {
+    link = (
+      <Link to={`https://www.themoviedb.org/movie/${value}`}>{value}</Link>
+    );
+  } else if (type === 'tvdb') {
+    link = (
+      <Link to={`https://www.thetvdb.com/?tab=series&id=${value}`}>
+        {value}
+      </Link>
+    );
+  } else if (type === 'tvmaze') {
+    link = <Link to={`https://www.tvmaze.com/shows/${value}/_`}>{value}</Link>;
+  }
+
+  return (
+    <div className={styles.parameter}>
+      <div className={styles.info}>
+        <span>{title}</span>
+      </div>
+
+      <div className={styles.value}>{link ? link : value}</div>
+    </div>
+  );
+}
+
+export default HistoryRowParameter;

frontend/src/Indexer/Add/AddIndexerModal.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
 import AddIndexerModalContentConnector from './AddIndexerModalContentConnector';
 import styles from './AddIndexerModal.css';
 
@@ -8,6 +9,7 @@ function AddIndexerModal({ isOpen, onModalClose, onSelectIndexer, ...otherProps
   return (
     <Modal
       isOpen={isOpen}
+      size={sizes.EXTRA_LARGE}
       onModalClose={onModalClose}
       className={styles.modal}
     >

frontend/src/Indexer/Add/AddIndexerModalContent.js

@@ -16,39 +16,45 @@ import TableBody from 'Components/Table/TableBody';
 import { kinds, scrollDirections } from 'Helpers/Props';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
-import SelectIndexerRowConnector from './SelectIndexerRowConnector';
+import SelectIndexerRow from './SelectIndexerRow';
 import styles from './AddIndexerModalContent.css';
 
 const columns = [
   {
     name: 'protocol',
-    label: translate('Protocol'),
+    label: () => translate('Protocol'),
     isSortable: true,
     isVisible: true
   },
   {
     name: 'sortName',
-    label: translate('Name'),
+    label: () => translate('Name'),
     isSortable: true,
     isVisible: true
   },
   {
     name: 'language',
-    label: translate('Language'),
+    label: () => translate('Language'),
     isSortable: true,
     isVisible: true
   },
   {
     name: 'description',
-    label: translate('Description'),
+    label: () => translate('Description'),
     isSortable: false,
     isVisible: true
   },
   {
     name: 'privacy',
-    label: translate('Privacy'),
+    label: () => translate('Privacy'),
     isSortable: true,
     isVisible: true
+  },
+  {
+    name: 'categories',
+    label: () => translate('Categories'),
+    isSortable: false,
+    isVisible: true
   }
 ];
 
@@ -66,15 +72,21 @@ const protocols = [
 const privacyLevels = [
   {
     key: 'private',
-    value: translate('Private')
+    get value() {
+      return translate('Private');
+    }
   },
   {
     key: 'semiPrivate',
-    value: translate('SemiPrivate')
+    get value() {
+      return translate('SemiPrivate');
+    }
   },
   {
     key: 'public',
-    value: translate('Public')
+    get value() {
+      return translate('Public');
+    }
   }
 ];
 
@@ -254,9 +266,10 @@ class AddIndexerModalContent extends Component {
                   <TableBody>
                     {
                       filteredIndexers.map((indexer) => (
-                        <SelectIndexerRowConnector
+                        <SelectIndexerRow
                           key={`${indexer.implementation}-${indexer.name}`}
                           implementation={indexer.implementation}
+                          implementationName={indexer.implementationName}
                           {...indexer}
                           onIndexerSelect={onIndexerSelect}
                         />
@@ -282,7 +295,7 @@ class AddIndexerModalContent extends Component {
           <div className={styles.available}>
             {
               isPopulated ?
-                translate('CountIndexersAvailable', [filteredIndexers.length]) :
+                translate('CountIndexersAvailable', { count: filteredIndexers.length }) :
                 null
             }
           </div>

frontend/src/Indexer/Add/AddIndexerModalContentConnector.js

@@ -1,15 +1,18 @@
+import { some } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchIndexerSchema, selectIndexerSchema, setIndexerSchemaSort } from 'Store/Actions/indexerActions';
+import createAllIndexersSelector from 'Store/Selectors/createAllIndexersSelector';
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import AddIndexerModalContent from './AddIndexerModalContent';
 
 function createMapStateToProps() {
   return createSelector(
     createClientSideCollectionSelector('indexers.schema'),
-    (indexers) => {
+    createAllIndexersSelector(),
+    (indexers, allIndexers) => {
       const {
         isFetching,
         isPopulated,
@@ -19,11 +22,19 @@ function createMapStateToProps() {
         sortKey
       } = indexers;
 
+      const indexerList = items.map((item) => {
+        const { definitionName } = item;
+        return {
+          ...item,
+          isExistingIndexer: some(allIndexers, { definitionName })
+        };
+      });
+
       return {
         isFetching,
         isPopulated,
         error,
-        indexers: items,
+        indexers: indexerList,
         sortKey,
         sortDirection
       };
@@ -49,8 +60,8 @@ class AddIndexerModalContentConnector extends Component {
   //
   // Listeners
 
-  onIndexerSelect = ({ implementation, name }) => {
-    this.props.selectIndexerSchema({ implementation, name });
+  onIndexerSelect = ({ implementation, implementationName, name }) => {
+    this.props.selectIndexerSchema({ implementation, implementationName, name });
     this.props.onSelectIndexer();
   };
 

frontend/src/Indexer/Add/AddIndexerPresetMenuItem.js

@@ -10,12 +10,14 @@ class AddIndexerPresetMenuItem extends Component {
   onPress = () => {
     const {
       name,
-      implementation
+      implementation,
+      implementationName
     } = this.props;
 
     this.props.onPress({
       name,
-      implementation
+      implementation,
+      implementationName
     });
   };
 
@@ -26,6 +28,7 @@ class AddIndexerPresetMenuItem extends Component {
     const {
       name,
       implementation,
+      implementationName,
       ...otherProps
     } = this.props;
 
@@ -43,6 +46,7 @@ class AddIndexerPresetMenuItem extends Component {
 AddIndexerPresetMenuItem.propTypes = {
   name: PropTypes.string.isRequired,
   implementation: PropTypes.string.isRequired,
+  implementationName: PropTypes.string.isRequired,
   onPress: PropTypes.func.isRequired
 };
 

frontend/src/Indexer/Add/SelectIndexerRow.js

@@ -1,88 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Icon from 'Components/Icon';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import TableRowButton from 'Components/Table/TableRowButton';
-import { icons } from 'Helpers/Props';
-import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
-import firstCharToUpper from 'Utilities/String/firstCharToUpper';
-import translate from 'Utilities/String/translate';
-import styles from './SelectIndexerRow.css';
-
-class SelectIndexerRow extends Component {
-
-  //
-  // Listeners
-
-  onPress = () => {
-    const {
-      implementation,
-      name
-    } = this.props;
-
-    this.props.onIndexerSelect({ implementation, name });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      protocol,
-      privacy,
-      name,
-      language,
-      description,
-      isExistingIndexer
-    } = this.props;
-
-    return (
-      <TableRowButton onPress={this.onPress}>
-        <TableRowCell className={styles.protocol}>
-          <ProtocolLabel
-            protocol={protocol}
-          />
-        </TableRowCell>
-
-        <TableRowCell>
-          {name}
-          {
-            isExistingIndexer ?
-              <Icon
-                className={styles.alreadyExistsIcon}
-                name={icons.CHECK_CIRCLE}
-                size={15}
-                title={translate('IndexerAlreadySetup')}
-              /> :
-              null
-          }
-        </TableRowCell>
-
-        <TableRowCell>
-          {language}
-        </TableRowCell>
-
-        <TableRowCell>
-          {description}
-        </TableRowCell>
-
-        <TableRowCell>
-          {translate(firstCharToUpper(privacy))}
-        </TableRowCell>
-      </TableRowButton>
-    );
-  }
-}
-
-SelectIndexerRow.propTypes = {
-  name: PropTypes.string.isRequired,
-  protocol: PropTypes.string.isRequired,
-  privacy: PropTypes.string.isRequired,
-  language: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  implementation: PropTypes.string.isRequired,
-  onIndexerSelect: PropTypes.func.isRequired,
-  isExistingIndexer: PropTypes.bool.isRequired
-};
-
-export default SelectIndexerRow;

frontend/src/Indexer/Add/SelectIndexerRow.tsx

@@ -0,0 +1,75 @@
+import React, { useCallback } from 'react';
+import Icon from 'Components/Icon';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRowButton from 'Components/Table/TableRowButton';
+import { icons } from 'Helpers/Props';
+import CapabilitiesLabel from 'Indexer/Index/Table/CapabilitiesLabel';
+import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
+import { IndexerCapabilities } from 'Indexer/Indexer';
+import firstCharToUpper from 'Utilities/String/firstCharToUpper';
+import translate from 'Utilities/String/translate';
+import styles from './SelectIndexerRow.css';
+
+interface SelectIndexerRowProps {
+  name: string;
+  protocol: string;
+  privacy: string;
+  language: string;
+  description: string;
+  capabilities: IndexerCapabilities;
+  implementation: string;
+  implementationName: string;
+  isExistingIndexer: boolean;
+  onIndexerSelect(...args: unknown[]): void;
+}
+
+function SelectIndexerRow(props: SelectIndexerRowProps) {
+  const {
+    name,
+    protocol,
+    privacy,
+    language,
+    description,
+    capabilities,
+    implementation,
+    implementationName,
+    isExistingIndexer,
+    onIndexerSelect,
+  } = props;
+
+  const onPress = useCallback(() => {
+    onIndexerSelect({ implementation, implementationName, name });
+  }, [implementation, implementationName, name, onIndexerSelect]);
+
+  return (
+    <TableRowButton onPress={onPress}>
+      <TableRowCell className={styles.protocol}>
+        <ProtocolLabel protocol={protocol} />
+      </TableRowCell>
+
+      <TableRowCell>
+        {name}
+        {isExistingIndexer ? (
+          <Icon
+            className={styles.alreadyExistsIcon}
+            name={icons.CHECK_CIRCLE}
+            size={15}
+            title={translate('IndexerAlreadySetup')}
+          />
+        ) : null}
+      </TableRowCell>
+
+      <TableRowCell>{language}</TableRowCell>
+
+      <TableRowCell>{description}</TableRowCell>
+
+      <TableRowCell>{translate(firstCharToUpper(privacy))}</TableRowCell>
+
+      <TableRowCell>
+        <CapabilitiesLabel capabilities={capabilities} />
+      </TableRowCell>
+    </TableRowButton>
+  );
+}
+
+export default SelectIndexerRow;

frontend/src/Indexer/Add/SelectIndexerRowConnector.js

@@ -1,18 +0,0 @@
-
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createExistingIndexerSelector from 'Store/Selectors/createExistingIndexerSelector';
-import SelectIndexerRow from './SelectIndexerRow';
-
-function createMapStateToProps() {
-  return createSelector(
-    createExistingIndexerSelector(),
-    (isExistingIndexer, dimensions) => {
-      return {
-        isExistingIndexer
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(SelectIndexerRow);

frontend/src/Indexer/Delete/DeleteIndexerModalContent.tsx

@@ -6,6 +6,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { kinds } from 'Helpers/Props';
+import Indexer from 'Indexer/Indexer';
 import { deleteIndexer } from 'Store/Actions/indexerActions';
 import { createIndexerSelectorForHook } from 'Store/Selectors/createIndexerSelector';
 import translate from 'Utilities/String/translate';
@@ -18,7 +19,9 @@ interface DeleteIndexerModalContentProps {
 function DeleteIndexerModalContent(props: DeleteIndexerModalContentProps) {
   const { indexerId, onModalClose } = props;
 
-  const { name } = useSelector(createIndexerSelectorForHook(indexerId));
+  const { name } = useSelector(
+    createIndexerSelectorForHook(indexerId)
+  ) as Indexer;
   const dispatch = useDispatch();
 
   const onConfirmDelete = useCallback(() => {
@@ -34,7 +37,7 @@ function DeleteIndexerModalContent(props: DeleteIndexerModalContentProps) {
       </ModalHeader>
 
       <ModalBody>
-        {translate('AreYouSureYouWantToDeleteIndexer', [name])}
+        {translate('AreYouSureYouWantToDeleteIndexer', { name })}
       </ModalBody>
 
       <ModalFooter>

frontend/src/Indexer/Edit/EditIndexerModalContent.js

@@ -61,7 +61,7 @@ function EditIndexerModalContent(props) {
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        {`${id ? translate('EditIndexer') : translate('AddIndexer')} - ${indexerDisplayName}`}
+        {id ? translate('EditIndexerImplementation', { implementationName: indexerDisplayName }) : translate('AddIndexerImplementation', { implementationName: indexerDisplayName })}
       </ModalHeader>
 
       <ModalBody>
@@ -187,6 +187,7 @@ function EditIndexerModalContent(props) {
                   type={inputTypes.TAG}
                   name="tags"
                   helpText={translate('IndexerTagsHelpText')}
+                  helpTextWarning={translate('IndexerTagsHelpTextWarning')}
                   {...tags}
                   onChange={onInputChange}
                 />

frontend/src/Indexer/Index/IndexerIndex.tsx

@@ -22,7 +22,7 @@ import AddIndexerModal from 'Indexer/Add/AddIndexerModal';
 import EditIndexerModalConnector from 'Indexer/Edit/EditIndexerModalConnector';
 import NoIndexer from 'Indexer/NoIndexer';
 import { executeCommand } from 'Store/Actions/commandActions';
-import { testAllIndexers } from 'Store/Actions/indexerActions';
+import { cloneIndexer, testAllIndexers } from 'Store/Actions/indexerActions';
 import {
   setIndexerFilter,
   setIndexerSort,
@@ -45,9 +45,7 @@ import IndexerIndexTable from './Table/IndexerIndexTable';
 import IndexerIndexTableOptions from './Table/IndexerIndexTableOptions';
 import styles from './IndexerIndex.css';
 
-function getViewComponent() {
-  return IndexerIndexTable;
-}
+const getViewComponent = () => IndexerIndexTable;
 
 interface IndexerIndexProps {
   initialScrollTop?: number;
@@ -84,14 +82,6 @@ const IndexerIndex = withScrollPosition((props: IndexerIndexProps) => {
   );
   const [isSelectMode, setIsSelectMode] = useState(false);
 
-  const onAppIndexerSyncPress = useCallback(() => {
-    dispatch(
-      executeCommand({
-        name: APP_INDEXER_SYNC,
-      })
-    );
-  }, [dispatch]);
-
   const onAddIndexerPress = useCallback(() => {
     setIsAddIndexerModalOpen(true);
   }, [setIsAddIndexerModalOpen]);
@@ -108,6 +98,24 @@ const IndexerIndex = withScrollPosition((props: IndexerIndexProps) => {
     setIsEditIndexerModalOpen(false);
   }, [setIsEditIndexerModalOpen]);
 
+  const onCloneIndexerPress = useCallback(
+    (id: number) => {
+      dispatch(cloneIndexer({ id }));
+
+      setIsEditIndexerModalOpen(true);
+    },
+    [dispatch, setIsEditIndexerModalOpen]
+  );
+
+  const onAppIndexerSyncPress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: APP_INDEXER_SYNC,
+        forceSync: true,
+      })
+    );
+  }, [dispatch]);
+
   const onTestAllPress = useCallback(() => {
     dispatch(testAllIndexers());
   }, [dispatch]);
@@ -304,6 +312,7 @@ const IndexerIndex = withScrollPosition((props: IndexerIndexProps) => {
                   jumpToCharacter={jumpToCharacter}
                   isSelectMode={isSelectMode}
                   isSmallScreen={isSmallScreen}
+                  onCloneIndexerPress={onCloneIndexerPress}
                 />
 
                 <IndexerIndexFooter />

frontend/src/Indexer/Index/Select/Delete/DeleteIndexerModalContent.tsx

@@ -48,7 +48,9 @@ function DeleteIndexerModalContent(props: DeleteIndexerModalContentProps) {
 
       <ModalBody>
         <div className={styles.message}>
-          {translate('DeleteSelectedIndexersMessageText', [indexers.length])}
+          {translate('DeleteSelectedIndexersMessageText', {
+            count: indexers.length,
+          })}
         </div>
 
         <ul>

frontend/src/Indexer/Index/Select/Edit/EditIndexerModalContent.tsx

@@ -30,9 +30,25 @@ interface EditIndexerModalContentProps {
 const NO_CHANGE = 'noChange';
 
 const enableOptions = [
-  { key: NO_CHANGE, value: translate('NoChange'), disabled: true },
-  { key: 'true', value: translate('Enabled') },
-  { key: 'false', value: translate('Disabled') },
+  {
+    key: NO_CHANGE,
+    get value() {
+      return translate('NoChange');
+    },
+    disabled: true,
+  },
+  {
+    key: 'true',
+    get value() {
+      return translate('Enabled');
+    },
+  },
+  {
+    key: 'false',
+    get value() {
+      return translate('Disabled');
+    },
+  },
 ];
 
 function EditIndexerModalContent(props: EditIndexerModalContentProps) {
@@ -241,7 +257,7 @@ function EditIndexerModalContent(props: EditIndexerModalContentProps) {
 
       <ModalFooter className={styles.modalFooter}>
         <div className={styles.selected}>
-          {translate('CountIndexersSelected', [selectedCount])}
+          {translate('CountIndexersSelected', { count: selectedCount })}
         </div>
 
         <div>

frontend/src/Indexer/Index/Select/IndexerIndexSelectFooter.tsx

@@ -165,7 +165,7 @@ function IndexerIndexSelectFooter() {
       </div>
 
       <div className={styles.selected}>
-        {translate('CountIndexersSelected', [selectedCount])}
+        {translate('CountIndexersSelected', { count: selectedCount })}
       </div>
 
       <EditIndexerModal

frontend/src/Indexer/Index/Table/CapabilitiesLabel.tsx

@@ -1,3 +1,4 @@
+import { uniqBy } from 'lodash';
 import React from 'react';
 import Label from 'Components/Label';
 import { IndexerCapabilities } from 'Indexer/Indexer';
@@ -23,14 +24,18 @@ function CapabilitiesLabel(props: CapabilitiesLabelProps) {
     );
   }
 
-  const nameList = Array.from(
-    new Set(filteredList.map((item) => item.name).sort())
+  const indexerCategories = uniqBy(filteredList, 'id').sort(
+    (a, b) => a.id - b.id
   );
 
   return (
     <span>
-      {nameList.map((category) => {
-        return <Label key={category}>{category}</Label>;
+      {indexerCategories.map((category) => {
+        return (
+          <Label key={category.id} title={`${category.id}`}>
+            {category.name}
+          </Label>
+        );
       })}
 
       {filteredList.length === 0 ? <Label>{'None'}</Label> : null}

frontend/src/Indexer/Index/Table/IndexerIndexRow.css

@@ -11,6 +11,12 @@
   flex: 0 0 60px;
 }
 
+.id {
+  composes: cell;
+
+  flex: 0 0 60px;
+}
+
 .sortName {
   composes: cell;
 

frontend/src/Indexer/Index/Table/IndexerIndexRow.css.d.ts

@@ -8,6 +8,7 @@ interface CssExports {
   'cell': string;
   'checkInput': string;
   'externalLink': string;
+  'id': string;
   'minimumSeeders': string;
   'packSeedTime': string;
   'priority': string;

frontend/src/Indexer/Index/Table/IndexerIndexRow.tsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { useSelect } from 'App/SelectContext';
 import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import Column from 'Components/Table/Column';
@@ -12,6 +12,7 @@ import { icons } from 'Helpers/Props';
 import DeleteIndexerModal from 'Indexer/Delete/DeleteIndexerModal';
 import EditIndexerModalConnector from 'Indexer/Edit/EditIndexerModalConnector';
 import createIndexerIndexItemSelector from 'Indexer/Index/createIndexerIndexItemSelector';
+import Indexer from 'Indexer/Indexer';
 import IndexerTitleLink from 'Indexer/IndexerTitleLink';
 import { SelectStateInputProps } from 'typings/props';
 import firstCharToUpper from 'Utilities/String/firstCharToUpper';
@@ -26,13 +27,14 @@ interface IndexerIndexRowProps {
   sortKey: string;
   columns: Column[];
   isSelectMode: boolean;
+  onCloneIndexerPress(id: number): void;
 }
 
 function IndexerIndexRow(props: IndexerIndexRowProps) {
-  const { indexerId, columns, isSelectMode } = props;
+  const { indexerId, columns, isSelectMode, onCloneIndexerPress } = props;
 
   const { indexer, appProfile, status, longDateFormat, timeFormat } =
-    useSelector(createIndexerIndexItemSelector(props.indexerId));
+    useSelector(createIndexerIndexItemSelector(indexerId));
 
   const {
     id,
@@ -47,7 +49,7 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
     fields,
     added,
     capabilities,
-  } = indexer;
+  } = indexer as Indexer;
 
   const baseUrl =
     fields.find((field) => field.name === 'baseUrl')?.value ??
@@ -146,12 +148,25 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
           );
         }
 
+        if (name === 'id') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <IndexerTitleLink
+                indexerId={indexerId}
+                title={`${indexerId}`}
+                onCloneIndexerPress={onCloneIndexerPress}
+              />
+            </VirtualTableRowCell>
+          );
+        }
+
         if (name === 'sortName') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>
               <IndexerTitleLink
                 indexerId={indexerId}
-                indexerName={indexerName}
+                title={indexerName}
+                onCloneIndexerPress={onCloneIndexerPress}
               />
             </VirtualTableRowCell>
           );
@@ -201,7 +216,7 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
           return (
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore ts(2739)
-            <RelativeDateCellConnector
+            <RelativeDateCell
               key={name}
               className={styles[name]}
               date={added.toString()}
@@ -214,7 +229,7 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
           return (
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore ts(2739)
-            <RelativeDateCellConnector
+            <RelativeDateCell
               key={name}
               className={styles[name]}
               date={vipExpiration}

frontend/src/Indexer/Index/Table/IndexerIndexTable.tsx

@@ -26,6 +26,7 @@ interface RowItemData {
   sortKey: string;
   columns: Column[];
   isSelectMode: boolean;
+  onCloneIndexerPress(id: number): void;
 }
 
 interface IndexerIndexTableProps {
@@ -37,6 +38,7 @@ interface IndexerIndexTableProps {
   scrollerRef: RefObject<HTMLElement>;
   isSelectMode: boolean;
   isSmallScreen: boolean;
+  onCloneIndexerPress(id: number): void;
 }
 
 const columnsSelector = createSelector(
@@ -49,7 +51,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
   style,
   data,
 }) => {
-  const { items, sortKey, columns, isSelectMode } = data;
+  const { items, sortKey, columns, isSelectMode, onCloneIndexerPress } = data;
 
   if (index >= items.length) {
     return null;
@@ -71,6 +73,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
         sortKey={sortKey}
         columns={columns}
         isSelectMode={isSelectMode}
+        onCloneIndexerPress={onCloneIndexerPress}
       />
     </div>
   );
@@ -89,6 +92,7 @@ function IndexerIndexTable(props: IndexerIndexTableProps) {
     isSelectMode,
     isSmallScreen,
     scrollerRef,
+    onCloneIndexerPress,
   } = props;
 
   const columns = useSelector(columnsSelector);
@@ -198,6 +202,7 @@ function IndexerIndexTable(props: IndexerIndexTableProps) {
             sortKey,
             columns,
             isSelectMode,
+            onCloneIndexerPress,
           }}
         >
           {Row}

frontend/src/Indexer/Index/Table/IndexerIndexTableHeader.css

@@ -4,6 +4,12 @@
   flex: 0 0 60px;
 }
 
+.id {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 60px;
+}
+
 .sortName {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 

frontend/src/Indexer/Index/Table/IndexerIndexTableHeader.css.d.ts

@@ -5,6 +5,7 @@ interface CssExports {
   'added': string;
   'appProfileId': string;
   'capabilities': string;
+  'id': string;
   'minimumSeeders': string;
   'packSeedTime': string;
   'priority': string;

frontend/src/Indexer/Index/Table/IndexerIndexTableHeader.tsx

@@ -103,7 +103,7 @@ function IndexerIndexTableHeader(props: IndexerIndexTableHeaderProps) {
             isSortable={isSortable}
             onSortPress={onSortPress}
           >
-            {label}
+            {typeof label === 'function' ? label() : label}
           </VirtualTableHeaderCell>
         );
       })}

frontend/src/Indexer/Index/createIndexerIndexItemSelector.ts

@@ -1,5 +1,4 @@
 import { createSelector } from 'reselect';
-import Indexer from 'Indexer/Indexer';
 import createIndexerAppProfileSelector from 'Store/Selectors/createIndexerAppProfileSelector';
 import { createIndexerSelectorForHook } from 'Store/Selectors/createIndexerSelector';
 import createIndexerStatusSelector from 'Store/Selectors/createIndexerStatusSelector';
@@ -11,7 +10,7 @@ function createIndexerIndexItemSelector(indexerId: number) {
     createIndexerAppProfileSelector(indexerId),
     createIndexerStatusSelector(indexerId),
     createUISettingsSelector(),
-    (indexer: Indexer, appProfile, status, uiSettings) => {
+    (indexer, appProfile, status, uiSettings) => {
       return {
         indexer,
         appProfile,

frontend/src/Indexer/Indexer.ts

@@ -25,11 +25,13 @@ export interface IndexerCapabilities extends ModelBase {
 }
 
 export interface IndexerField extends ModelBase {
+  order: number;
   name: string;
   label: string;
   advanced: boolean;
   type: string;
   value: string;
+  privacy: string;
 }
 
 interface Indexer extends ModelBase {
@@ -54,6 +56,11 @@ interface Indexer extends ModelBase {
   capabilities: IndexerCapabilities;
   indexerUrls: string[];
   legacyUrls: string[];
+  appProfileId: number;
+  implementationName: string;
+  implementation: string;
+  configContract: string;
+  infoLink: string;
 }
 
 export default Indexer;

frontend/src/Indexer/IndexerTitleLink.tsx

@@ -1,16 +1,16 @@
-import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
 import Link from 'Components/Link/Link';
 import IndexerInfoModal from './Info/IndexerInfoModal';
 import styles from './IndexerTitleLink.css';
 
 interface IndexerTitleLinkProps {
-  indexerName: string;
   indexerId: number;
+  title: string;
+  onCloneIndexerPress(id: number): void;
 }
 
 function IndexerTitleLink(props: IndexerTitleLinkProps) {
-  const { indexerName, indexerId } = props;
+  const { title, indexerId, onCloneIndexerPress } = props;
 
   const [isIndexerInfoModalOpen, setIsIndexerInfoModalOpen] = useState(false);
 
@@ -25,20 +25,17 @@ function IndexerTitleLink(props: IndexerTitleLinkProps) {
   return (
     <div>
       <Link className={styles.link} onPress={onIndexerInfoPress}>
-        {indexerName}
+        {title}
       </Link>
 
       <IndexerInfoModal
         indexerId={indexerId}
         isOpen={isIndexerInfoModalOpen}
         onModalClose={onIndexerInfoModalClose}
+        onCloneIndexerPress={onCloneIndexerPress}
       />
     </div>
   );
 }
 
-IndexerTitleLink.propTypes = {
-  indexerName: PropTypes.string.isRequired,
-};
-
 export default IndexerTitleLink;

frontend/src/Indexer/Info/History/IndexerHistory.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import { IndexerHistoryAppState } from 'App/State/IndexerAppState';
+import Alert from 'Components/Alert';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import { kinds } from 'Helpers/Props';
+import Indexer from 'Indexer/Indexer';
+import {
+  clearIndexerHistory,
+  fetchIndexerHistory,
+} from 'Store/Actions/indexerHistoryActions';
+import { createIndexerSelectorForHook } from 'Store/Selectors/createIndexerSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import translate from 'Utilities/String/translate';
+import IndexerHistoryRow from './IndexerHistoryRow';
+
+const columns = [
+  {
+    name: 'eventType',
+    isVisible: true,
+  },
+  {
+    name: 'query',
+    label: () => translate('Query'),
+    isVisible: true,
+  },
+  {
+    name: 'parameters',
+    label: () => translate('Parameters'),
+    isVisible: true,
+  },
+  {
+    name: 'date',
+    label: () => translate('Date'),
+    isVisible: true,
+  },
+  {
+    name: 'source',
+    label: () => translate('Source'),
+    isVisible: true,
+  },
+  {
+    name: 'details',
+    label: () => translate('Details'),
+    isVisible: true,
+  },
+];
+
+function createIndexerHistorySelector() {
+  return createSelector(
+    (state: AppState) => state.indexerHistory,
+    createUISettingsSelector(),
+    (state: AppState) => state.history.pageSize,
+    (indexerHistory: IndexerHistoryAppState, uiSettings, pageSize) => {
+      return {
+        ...indexerHistory,
+        shortDateFormat: uiSettings.shortDateFormat,
+        timeFormat: uiSettings.timeFormat,
+        pageSize,
+      };
+    }
+  );
+}
+
+interface IndexerHistoryProps {
+  indexerId: number;
+}
+
+function IndexerHistory(props: IndexerHistoryProps) {
+  const {
+    isFetching,
+    isPopulated,
+    error,
+    items,
+    shortDateFormat,
+    timeFormat,
+    pageSize,
+  } = useSelector(createIndexerHistorySelector());
+
+  const indexer = useSelector(
+    createIndexerSelectorForHook(props.indexerId)
+  ) as Indexer;
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(
+      fetchIndexerHistory({ indexerId: props.indexerId, limit: pageSize })
+    );
+
+    return () => {
+      dispatch(clearIndexerHistory());
+    };
+  }, [props, pageSize, dispatch]);
+
+  const hasItems = !!items.length;
+
+  if (isFetching) {
+    return <LoadingIndicator />;
+  }
+
+  if (!isFetching && !!error) {
+    return (
+      <Alert kind={kinds.DANGER}>{translate('IndexerHistoryLoadError')}</Alert>
+    );
+  }
+
+  if (isPopulated && !hasItems && !error) {
+    return <Alert kind={kinds.INFO}>{translate('NoIndexerHistory')}</Alert>;
+  }
+
+  if (isPopulated && hasItems && !error) {
+    return (
+      <Table columns={columns}>
+        <TableBody>
+          {items.map((item) => {
+            return (
+              <IndexerHistoryRow
+                key={item.id}
+                indexer={indexer}
+                shortDateFormat={shortDateFormat}
+                timeFormat={timeFormat}
+                {...item}
+              />
+            );
+          })}
+        </TableBody>
+      </Table>
+    );
+  }
+
+  return null;
+}
+
+export default IndexerHistory;

frontend/src/Indexer/Info/History/IndexerHistoryRow.css

@@ -0,0 +1,23 @@
+.query {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 120px;
+}
+
+.elapsedTime,
+.source {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 150px;
+}
+
+.details {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 70px;
+}
+
+.parametersContent {
+  display: flex;
+  flex-wrap: wrap;
+}

frontend/src/Indexer/Info/History/IndexerHistoryRow.css.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'details': string;
+  'elapsedTime': string;
+  'parametersContent': string;
+  'query': string;
+  'source': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Indexer/Info/History/IndexerHistoryRow.tsx

@@ -0,0 +1,104 @@
+import React, { useCallback, useState } from 'react';
+import IconButton from 'Components/Link/IconButton';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRow from 'Components/Table/TableRow';
+import { icons } from 'Helpers/Props';
+import HistoryDetailsModal from 'History/Details/HistoryDetailsModal';
+import HistoryEventTypeCell from 'History/HistoryEventTypeCell';
+import { historyParameters } from 'History/HistoryRow';
+import HistoryRowParameter from 'History/HistoryRowParameter';
+import Indexer from 'Indexer/Indexer';
+import { HistoryData } from 'typings/History';
+import translate from 'Utilities/String/translate';
+import styles from './IndexerHistoryRow.css';
+
+interface IndexerHistoryRowProps {
+  data: HistoryData;
+  date: string;
+  eventType: string;
+  successful: boolean;
+  indexer: Indexer;
+  shortDateFormat: string;
+  timeFormat: string;
+}
+
+function IndexerHistoryRow(props: IndexerHistoryRowProps) {
+  const {
+    data,
+    date,
+    eventType,
+    successful,
+    indexer,
+    shortDateFormat,
+    timeFormat,
+  } = props;
+
+  const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
+
+  const onDetailsModalPress = useCallback(() => {
+    setIsDetailsModalOpen(true);
+  }, [setIsDetailsModalOpen]);
+
+  const onDetailsModalClose = useCallback(() => {
+    setIsDetailsModalOpen(false);
+  }, [setIsDetailsModalOpen]);
+
+  const parameters = historyParameters.filter(
+    (parameter) =>
+      parameter.key in data && data[parameter.key as keyof HistoryData]
+  );
+
+  return (
+    <TableRow>
+      <HistoryEventTypeCell
+        indexer={indexer}
+        eventType={eventType}
+        data={data}
+        successful={successful}
+      />
+
+      <TableRowCell className={styles.query}>{data.query}</TableRowCell>
+
+      <TableRowCell>
+        <div className={styles.parametersContent}>
+          {parameters.map((parameter) => {
+            return (
+              <HistoryRowParameter
+                key={parameter.key}
+                title={parameter.title}
+                value={data[parameter.key as keyof HistoryData].toString()}
+              />
+            );
+          })}
+        </div>
+      </TableRowCell>
+
+      <RelativeDateCell date={date} />
+
+      <TableRowCell className={styles.source}>
+        {data.source ? data.source : null}
+      </TableRowCell>
+
+      <TableRowCell className={styles.details}>
+        <IconButton
+          name={icons.INFO}
+          onPress={onDetailsModalPress}
+          title={translate('HistoryDetails')}
+        />
+      </TableRowCell>
+
+      <HistoryDetailsModal
+        isOpen={isDetailsModalOpen}
+        eventType={eventType}
+        data={data}
+        indexer={indexer}
+        shortDateFormat={shortDateFormat}
+        timeFormat={timeFormat}
+        onModalClose={onDetailsModalClose}
+      />
+    </TableRow>
+  );
+}
+
+export default IndexerHistoryRow;

frontend/src/Indexer/Info/IndexerInfoModal.tsx

@@ -7,16 +7,18 @@ interface IndexerInfoModalProps {
   isOpen: boolean;
   indexerId: number;
   onModalClose(): void;
+  onCloneIndexerPress(id: number): void;
 }
 
 function IndexerInfoModal(props: IndexerInfoModalProps) {
-  const { isOpen, onModalClose, indexerId } = props;
+  const { isOpen, indexerId, onModalClose, onCloneIndexerPress } = props;
 
   return (
-    <Modal size={sizes.MEDIUM} isOpen={isOpen} onModalClose={onModalClose}>
+    <Modal size={sizes.LARGE} isOpen={isOpen} onModalClose={onModalClose}>
       <IndexerInfoModalContent
         indexerId={indexerId}
         onModalClose={onModalClose}
+        onCloneIndexerPress={onCloneIndexerPress}
       />
     </Modal>
   );