Multiple Translations updated by Weblate

ignore-downstream

Co-authored-by: Anonymous <noreply@weblate.org>
Co-authored-by: Fixer <ygj59783@zslsz.com>
Co-authored-by: Havok Dan <havokdan@yahoo.com.br>
Co-authored-by: Weblate <noreply@weblate.org>
Co-authored-by: fordas <fordas15@gmail.com>
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/ca/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/es/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/fi/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/fr/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/hu/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/it/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/pt/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/pt_BR/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/ro/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/tr/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/zh_CN/
Translation: Servarr/Prowlarr

azure-pipelines.yml

@@ -9,13 +9,13 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '1.20.1'
+  majorVersion: '1.22.0'
   minorVersion: $[counter('minorVersion', 1)]
   prowlarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(prowlarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.421'
+  dotnetVersion: '6.0.424'
   nodeVersion: '20.X'
   innoVersion: '6.2.2'
   windowsImage: 'windows-2022'
@@ -1169,7 +1169,7 @@ stages:
         submodules: true
       - powershell: Set-Service SCardSvr -StartupType Manual
         displayName: Enable Windows Test Service
-      - task: SonarCloudPrepare@1
+      - task: SonarCloudPrepare@2
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         inputs:
           SonarCloud: 'SonarCloud'
@@ -1187,21 +1187,16 @@ stages:
           ./build.sh --backend -f net6.0 -r win-x64
           TEST_DIR=_tests/net6.0/win-x64/publish/ ./test.sh Windows Unit Coverage
         displayName: Coverage Unit Tests
-      - task: SonarCloudAnalyze@1
+      - task: SonarCloudAnalyze@2
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         displayName: Publish SonarCloud Results
-      - task: reportgenerator@4
+      - task: reportgenerator@5
         displayName: Generate Coverage Report
         inputs:
           reports: '$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml'
           targetdir: '$(Build.SourcesDirectory)/CoverageResults/combined'
           reporttypes: 'HtmlInline_AzurePipelines;Cobertura;Badges'
-      - task: PublishCodeCoverageResults@1
-        displayName: Publish Coverage Report
-        inputs:
-          codeCoverageTool: 'cobertura'
-          summaryFileLocation: './CoverageResults/combined/Cobertura.xml'
-          reportDirectory: './CoverageResults/combined/'
+          publishCodeCoverageResults: true
 
   - stage: Report_Out
     dependsOn:

frontend/.eslintrc.js

@@ -357,11 +357,16 @@ module.exports = {
       ],
 
       rules: Object.assign(typescriptEslintRecommended.rules, {
-        'no-shadow': 'off',
-        // These should be enabled after cleaning things up
-        '@typescript-eslint/no-unused-vars': 'warn',
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            args: 'after-used',
+            argsIgnorePattern: '^_',
+            ignoreRestSiblings: true
+          }
+        ],
         '@typescript-eslint/explicit-function-return-type': 'off',
-        'react/prop-types': 'off',
+        'no-shadow': 'off',
         'prettier/prettier': 'error',
         'simple-import-sort/imports': [
           'error',
@@ -374,7 +379,41 @@ module.exports = {
               ['^@?\\w', `^(${dirs})(/.*|$)`, '^\\.', '^\\..*css$']
             ]
           }
-        ]
+        ],
+
+        // React Hooks
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'error',
+
+        // React
+        'react/function-component-definition': 'error',
+        'react/hook-use-state': 'error',
+        'react/jsx-boolean-value': ['error', 'always'],
+        'react/jsx-curly-brace-presence': [
+          'error',
+          { props: 'never', children: 'never' }
+        ],
+        'react/jsx-fragments': 'error',
+        'react/jsx-handler-names': [
+          'error',
+          {
+            eventHandlerPrefix: 'on',
+            eventHandlerPropPrefix: 'on'
+          }
+        ],
+        'react/jsx-no-bind': ['error', { ignoreRefs: true }],
+        'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
+        'react/jsx-pascal-case': ['error', { allowAllCaps: true }],
+        'react/jsx-sort-props': [
+          'error',
+          {
+            callbacksLast: true,
+            noSortAlphabetically: true,
+            reservedFirst: true
+          }
+        ],
+        'react/prop-types': 'off',
+        'react/self-closing-comp': 'error'
       })
     },
     {

frontend/build/webpack.config.js

@@ -65,7 +65,7 @@ module.exports = (env) => {
     output: {
       path: distFolder,
       publicPath: '/',
-      filename: '[name]-[contenthash].js',
+      filename: isProduction ? '[name]-[contenthash].js' : '[name].js',
       sourceMapFilename: '[file].map'
     },
 
@@ -90,7 +90,7 @@ module.exports = (env) => {
 
       new MiniCssExtractPlugin({
         filename: 'Content/styles.css',
-        chunkFilename: 'Content/[id]-[chunkhash].css'
+        chunkFilename: isProduction ? 'Content/[id]-[chunkhash].css' : 'Content/[id].css'
       }),
 
       new HtmlWebpackPlugin({
@@ -190,7 +190,7 @@ module.exports = (env) => {
               options: {
                 importLoaders: 1,
                 modules: {
-                  localIdentName: '[name]/[local]/[hash:base64:5]'
+                  localIdentName: isProduction ? '[name]/[local]/[hash:base64:5]' : '[name]/[local]'
                 }
               }
             },

frontend/postcss.config.js

@@ -16,6 +16,7 @@ const mixinsFiles = [
 
 module.exports = {
   plugins: [
+    'autoprefixer',
     ['postcss-mixins', {
       mixinsFiles
     }],

frontend/src/App/App.tsx

@@ -1,20 +1,25 @@
-import { ConnectedRouter } from 'connected-react-router';
-import PropTypes from 'prop-types';
+import { ConnectedRouter, ConnectedRouterProps } from 'connected-react-router';
 import React from 'react';
 import DocumentTitle from 'react-document-title';
 import { Provider } from 'react-redux';
+import { Store } from 'redux';
 import PageConnector from 'Components/Page/PageConnector';
 import ApplyTheme from './ApplyTheme';
 import AppRoutes from './AppRoutes';
 
-function App({ store, history }) {
+interface AppProps {
+  store: Store;
+  history: ConnectedRouterProps['history'];
+}
+
+function App({ store, history }: AppProps) {
   return (
     <DocumentTitle title={window.Prowlarr.instanceName}>
       <Provider store={store}>
         <ConnectedRouter history={history}>
           <ApplyTheme />
           <PageConnector>
-            <AppRoutes app={App} />
+            <AppRoutes />
           </PageConnector>
         </ConnectedRouter>
       </Provider>
@@ -22,9 +27,4 @@ function App({ store, history }) {
   );
 }
 
-App.propTypes = {
-  store: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired
-};
-
 export default App;

frontend/src/App/AppRoutes.js

@@ -1,184 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Redirect, Route } from 'react-router-dom';
-import NotFound from 'Components/NotFound';
-import Switch from 'Components/Router/Switch';
-import HistoryConnector from 'History/HistoryConnector';
-import IndexerIndex from 'Indexer/Index/IndexerIndex';
-import IndexerStats from 'Indexer/Stats/IndexerStats';
-import SearchIndexConnector from 'Search/SearchIndexConnector';
-import ApplicationSettings from 'Settings/Applications/ApplicationSettings';
-import DevelopmentSettingsConnector from 'Settings/Development/DevelopmentSettingsConnector';
-import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
-import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
-import IndexerSettings from 'Settings/Indexers/IndexerSettings';
-import NotificationSettings from 'Settings/Notifications/NotificationSettings';
-import Settings from 'Settings/Settings';
-import TagSettings from 'Settings/Tags/TagSettings';
-import UISettingsConnector from 'Settings/UI/UISettingsConnector';
-import BackupsConnector from 'System/Backup/BackupsConnector';
-import LogsTableConnector from 'System/Events/LogsTableConnector';
-import Logs from 'System/Logs/Logs';
-import Status from 'System/Status/Status';
-import Tasks from 'System/Tasks/Tasks';
-import UpdatesConnector from 'System/Updates/UpdatesConnector';
-import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
-
-function AppRoutes(props) {
-  const {
-    app
-  } = props;
-
-  return (
-    <Switch>
-      {/*
-        Indexers
-      */}
-
-      <Route
-        exact={true}
-        path="/"
-        component={IndexerIndex}
-      />
-
-      {
-        window.Prowlarr.urlBase &&
-          <Route
-            exact={true}
-            path="/"
-            addUrlBase={false}
-            render={() => {
-              return (
-                <Redirect
-                  to={getPathWithUrlBase('/')}
-                  component={app}
-                />
-              );
-            }}
-          />
-      }
-
-      <Route
-        path="/indexers/stats"
-        component={IndexerStats}
-      />
-
-      {/*
-        Search
-      */}
-
-      <Route
-        path="/search"
-        component={SearchIndexConnector}
-      />
-
-      {/*
-        Activity
-      */}
-
-      <Route
-        path="/history"
-        component={HistoryConnector}
-      />
-
-      {/*
-        Settings
-      */}
-
-      <Route
-        exact={true}
-        path="/settings"
-        component={Settings}
-      />
-
-      <Route
-        path="/settings/indexers"
-        component={IndexerSettings}
-      />
-
-      <Route
-        path="/settings/applications"
-        component={ApplicationSettings}
-      />
-
-      <Route
-        path="/settings/downloadclients"
-        component={DownloadClientSettingsConnector}
-      />
-
-      <Route
-        path="/settings/connect"
-        component={NotificationSettings}
-      />
-
-      <Route
-        path="/settings/tags"
-        component={TagSettings}
-      />
-
-      <Route
-        path="/settings/general"
-        component={GeneralSettingsConnector}
-      />
-
-      <Route
-        path="/settings/ui"
-        component={UISettingsConnector}
-      />
-
-      <Route
-        path="/settings/development"
-        component={DevelopmentSettingsConnector}
-      />
-
-      {/*
-        System
-      */}
-
-      <Route
-        path="/system/status"
-        component={Status}
-      />
-
-      <Route
-        path="/system/tasks"
-        component={Tasks}
-      />
-
-      <Route
-        path="/system/backup"
-        component={BackupsConnector}
-      />
-
-      <Route
-        path="/system/updates"
-        component={UpdatesConnector}
-      />
-
-      <Route
-        path="/system/events"
-        component={LogsTableConnector}
-      />
-
-      <Route
-        path="/system/logs/files"
-        component={Logs}
-      />
-
-      {/*
-        Not Found
-      */}
-
-      <Route
-        path="*"
-        component={NotFound}
-      />
-    </Switch>
-  );
-}
-
-AppRoutes.propTypes = {
-  app: PropTypes.func.isRequired
-};
-
-export default AppRoutes;

frontend/src/App/AppRoutes.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import NotFound from 'Components/NotFound';
+import Switch from 'Components/Router/Switch';
+import HistoryConnector from 'History/HistoryConnector';
+import IndexerIndex from 'Indexer/Index/IndexerIndex';
+import IndexerStats from 'Indexer/Stats/IndexerStats';
+import SearchIndexConnector from 'Search/SearchIndexConnector';
+import ApplicationSettings from 'Settings/Applications/ApplicationSettings';
+import DevelopmentSettingsConnector from 'Settings/Development/DevelopmentSettingsConnector';
+import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
+import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
+import IndexerSettings from 'Settings/Indexers/IndexerSettings';
+import NotificationSettings from 'Settings/Notifications/NotificationSettings';
+import Settings from 'Settings/Settings';
+import TagSettings from 'Settings/Tags/TagSettings';
+import UISettingsConnector from 'Settings/UI/UISettingsConnector';
+import BackupsConnector from 'System/Backup/BackupsConnector';
+import LogsTableConnector from 'System/Events/LogsTableConnector';
+import Logs from 'System/Logs/Logs';
+import Status from 'System/Status/Status';
+import Tasks from 'System/Tasks/Tasks';
+import UpdatesConnector from 'System/Updates/UpdatesConnector';
+import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
+
+function RedirectWithUrlBase() {
+  return <Redirect to={getPathWithUrlBase('/')} />;
+}
+
+function AppRoutes() {
+  return (
+    <Switch>
+      {/*
+        Indexers
+      */}
+
+      <Route exact={true} path="/" component={IndexerIndex} />
+
+      {window.Prowlarr.urlBase && (
+        <Route
+          exact={true}
+          path="/"
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          addUrlBase={false}
+          render={RedirectWithUrlBase}
+        />
+      )}
+
+      <Route path="/indexers/stats" component={IndexerStats} />
+
+      {/*
+        Search
+      */}
+
+      <Route path="/search" component={SearchIndexConnector} />
+
+      {/*
+        Activity
+      */}
+
+      <Route path="/history" component={HistoryConnector} />
+
+      {/*
+        Settings
+      */}
+
+      <Route exact={true} path="/settings" component={Settings} />
+
+      <Route path="/settings/indexers" component={IndexerSettings} />
+
+      <Route path="/settings/applications" component={ApplicationSettings} />
+
+      <Route
+        path="/settings/downloadclients"
+        component={DownloadClientSettingsConnector}
+      />
+
+      <Route path="/settings/connect" component={NotificationSettings} />
+
+      <Route path="/settings/tags" component={TagSettings} />
+
+      <Route path="/settings/general" component={GeneralSettingsConnector} />
+
+      <Route path="/settings/ui" component={UISettingsConnector} />
+
+      <Route
+        path="/settings/development"
+        component={DevelopmentSettingsConnector}
+      />
+
+      {/*
+        System
+      */}
+
+      <Route path="/system/status" component={Status} />
+
+      <Route path="/system/tasks" component={Tasks} />
+
+      <Route path="/system/backup" component={BackupsConnector} />
+
+      <Route path="/system/updates" component={UpdatesConnector} />
+
+      <Route path="/system/events" component={LogsTableConnector} />
+
+      <Route path="/system/logs/files" component={Logs} />
+
+      {/*
+        Not Found
+      */}
+
+      <Route path="*" component={NotFound} />
+    </Switch>
+  );
+}
+
+export default AppRoutes;

frontend/src/App/AppUpdatedModal.js

@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import AppUpdatedModalContentConnector from './AppUpdatedModalContentConnector';
-
-function AppUpdatedModal(props) {
-  const {
-    isOpen,
-    onModalClose
-  } = props;
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      closeOnBackgroundClick={false}
-      onModalClose={onModalClose}
-    >
-      <AppUpdatedModalContentConnector
-        onModalClose={onModalClose}
-      />
-    </Modal>
-  );
-}
-
-AppUpdatedModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default AppUpdatedModal;

frontend/src/App/AppUpdatedModal.tsx

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+import Modal from 'Components/Modal/Modal';
+import AppUpdatedModalContent from './AppUpdatedModalContent';
+
+interface AppUpdatedModalProps {
+  isOpen: boolean;
+  onModalClose: (...args: unknown[]) => unknown;
+}
+
+function AppUpdatedModal(props: AppUpdatedModalProps) {
+  const { isOpen, onModalClose } = props;
+
+  const handleModalClose = useCallback(() => {
+    location.reload();
+  }, []);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      closeOnBackgroundClick={false}
+      onModalClose={onModalClose}
+    >
+      <AppUpdatedModalContent onModalClose={handleModalClose} />
+    </Modal>
+  );
+}
+
+export default AppUpdatedModal;

frontend/src/App/AppUpdatedModalConnector.js

@@ -1,12 +0,0 @@
-import { connect } from 'react-redux';
-import AppUpdatedModal from './AppUpdatedModal';
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onModalClose() {
-      location.reload();
-    }
-  };
-}
-
-export default connect(null, createMapDispatchToProps)(AppUpdatedModal);

frontend/src/App/AppUpdatedModalContent.js

@@ -1,139 +0,0 @@
-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';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import { kinds } from 'Helpers/Props';
-import UpdateChanges from 'System/Updates/UpdateChanges';
-import translate from 'Utilities/String/translate';
-import styles from './AppUpdatedModalContent.css';
-
-function mergeUpdates(items, version, prevVersion) {
-  let installedIndex = items.findIndex((u) => u.version === version);
-  let installedPreviouslyIndex = items.findIndex((u) => u.version === prevVersion);
-
-  if (installedIndex === -1) {
-    installedIndex = 0;
-  }
-
-  if (installedPreviouslyIndex === -1) {
-    installedPreviouslyIndex = items.length;
-  } else if (installedPreviouslyIndex === installedIndex && items.length) {
-    installedPreviouslyIndex += 1;
-  }
-
-  const appliedUpdates = items.slice(installedIndex, installedPreviouslyIndex);
-
-  if (!appliedUpdates.length) {
-    return null;
-  }
-
-  const appliedChanges = { new: [], fixed: [] };
-  appliedUpdates.forEach((u) => {
-    if (u.changes) {
-      appliedChanges.new.push(... u.changes.new);
-      appliedChanges.fixed.push(... u.changes.fixed);
-    }
-  });
-
-  const mergedUpdate = Object.assign({}, appliedUpdates[0], { changes: appliedChanges });
-
-  if (!appliedChanges.new.length && !appliedChanges.fixed.length) {
-    mergedUpdate.changes = null;
-  }
-
-  return mergedUpdate;
-}
-
-function AppUpdatedModalContent(props) {
-  const {
-    version,
-    prevVersion,
-    isPopulated,
-    error,
-    items,
-    onSeeChangesPress,
-    onModalClose
-  } = props;
-
-  const update = mergeUpdates(items, version, prevVersion);
-
-  return (
-    <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>
-        {translate('AppUpdated')}
-      </ModalHeader>
-
-      <ModalBody>
-        <div>
-          <InlineMarkdown data={translate('AppUpdatedVersion', { version })} blockClassName={styles.version} />
-        </div>
-
-        {
-          isPopulated && !error && !!update &&
-            <div>
-              {
-                !update.changes &&
-                  <div className={styles.maintenance}>{translate('MaintenanceRelease')}</div>
-              }
-
-              {
-                !!update.changes &&
-                  <div>
-                    <div className={styles.changes}>
-                      {translate('WhatsNew')}
-                    </div>
-
-                    <UpdateChanges
-                      title={translate('New')}
-                      changes={update.changes.new}
-                    />
-
-                    <UpdateChanges
-                      title={translate('Fixed')}
-                      changes={update.changes.fixed}
-                    />
-                  </div>
-              }
-            </div>
-        }
-
-        {
-          !isPopulated && !error &&
-            <LoadingIndicator />
-        }
-      </ModalBody>
-
-      <ModalFooter>
-        <Button
-          onPress={onSeeChangesPress}
-        >
-          {translate('RecentChanges')}
-        </Button>
-
-        <Button
-          kind={kinds.PRIMARY}
-          onPress={onModalClose}
-        >
-          {translate('Reload')}
-        </Button>
-      </ModalFooter>
-    </ModalContent>
-  );
-}
-
-AppUpdatedModalContent.propTypes = {
-  version: PropTypes.string.isRequired,
-  prevVersion: PropTypes.string,
-  isPopulated: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onSeeChangesPress: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default AppUpdatedModalContent;

frontend/src/App/AppUpdatedModalContent.tsx

@@ -0,0 +1,145 @@
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+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';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { kinds } from 'Helpers/Props';
+import { fetchUpdates } from 'Store/Actions/systemActions';
+import UpdateChanges from 'System/Updates/UpdateChanges';
+import Update from 'typings/Update';
+import translate from 'Utilities/String/translate';
+import AppState from './State/AppState';
+import styles from './AppUpdatedModalContent.css';
+
+function mergeUpdates(items: Update[], version: string, prevVersion?: string) {
+  let installedIndex = items.findIndex((u) => u.version === version);
+  let installedPreviouslyIndex = items.findIndex(
+    (u) => u.version === prevVersion
+  );
+
+  if (installedIndex === -1) {
+    installedIndex = 0;
+  }
+
+  if (installedPreviouslyIndex === -1) {
+    installedPreviouslyIndex = items.length;
+  } else if (installedPreviouslyIndex === installedIndex && items.length) {
+    installedPreviouslyIndex += 1;
+  }
+
+  const appliedUpdates = items.slice(installedIndex, installedPreviouslyIndex);
+
+  if (!appliedUpdates.length) {
+    return null;
+  }
+
+  const appliedChanges: Update['changes'] = { new: [], fixed: [] };
+
+  appliedUpdates.forEach((u: Update) => {
+    if (u.changes) {
+      appliedChanges.new.push(...u.changes.new);
+      appliedChanges.fixed.push(...u.changes.fixed);
+    }
+  });
+
+  const mergedUpdate: Update = Object.assign({}, appliedUpdates[0], {
+    changes: appliedChanges,
+  });
+
+  if (!appliedChanges.new.length && !appliedChanges.fixed.length) {
+    mergedUpdate.changes = null;
+  }
+
+  return mergedUpdate;
+}
+
+interface AppUpdatedModalContentProps {
+  onModalClose: () => void;
+}
+
+function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
+  const dispatch = useDispatch();
+  const { version, prevVersion } = useSelector((state: AppState) => state.app);
+  const { isPopulated, error, items } = useSelector(
+    (state: AppState) => state.system.updates
+  );
+  const previousVersion = usePrevious(version);
+
+  const { onModalClose } = props;
+
+  const update = mergeUpdates(items, version, prevVersion);
+
+  const handleSeeChangesPress = useCallback(() => {
+    window.location.href = `${window.Prowlarr.urlBase}/system/updates`;
+  }, []);
+
+  useEffect(() => {
+    dispatch(fetchUpdates());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (version !== previousVersion) {
+      dispatch(fetchUpdates());
+    }
+  }, [version, previousVersion, dispatch]);
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('AppUpdated')}</ModalHeader>
+
+      <ModalBody>
+        <div>
+          <InlineMarkdown
+            data={translate('AppUpdatedVersion', { version })}
+            blockClassName={styles.version}
+          />
+        </div>
+
+        {isPopulated && !error && !!update ? (
+          <div>
+            {update.changes ? (
+              <div className={styles.maintenance}>
+                {translate('MaintenanceRelease')}
+              </div>
+            ) : null}
+
+            {update.changes ? (
+              <div>
+                <div className={styles.changes}>{translate('WhatsNew')}</div>
+
+                <UpdateChanges
+                  title={translate('New')}
+                  changes={update.changes.new}
+                />
+
+                <UpdateChanges
+                  title={translate('Fixed')}
+                  changes={update.changes.fixed}
+                />
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {!isPopulated && !error ? <LoadingIndicator /> : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={handleSeeChangesPress}>
+          {translate('RecentChanges')}
+        </Button>
+
+        <Button kind={kinds.PRIMARY} onPress={onModalClose}>
+          {translate('Reload')}
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default AppUpdatedModalContent;

frontend/src/App/AppUpdatedModalContentConnector.js

@@ -1,78 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchUpdates } from 'Store/Actions/systemActions';
-import AppUpdatedModalContent from './AppUpdatedModalContent';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.app.version,
-    (state) => state.app.prevVersion,
-    (state) => state.system.updates,
-    (version, prevVersion, updates) => {
-      const {
-        isPopulated,
-        error,
-        items
-      } = updates;
-
-      return {
-        version,
-        prevVersion,
-        isPopulated,
-        error,
-        items
-      };
-    }
-  );
-}
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    dispatchFetchUpdates() {
-      dispatch(fetchUpdates());
-    },
-
-    onSeeChangesPress() {
-      window.location = `${window.Prowlarr.urlBase}/system/updates`;
-    }
-  };
-}
-
-class AppUpdatedModalContentConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.dispatchFetchUpdates();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.version !== this.props.version) {
-      this.props.dispatchFetchUpdates();
-    }
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      dispatchFetchUpdates,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <AppUpdatedModalContent {...otherProps} />
-    );
-  }
-}
-
-AppUpdatedModalContentConnector.propTypes = {
-  version: PropTypes.string.isRequired,
-  dispatchFetchUpdates: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, createMapDispatchToProps)(AppUpdatedModalContentConnector);

frontend/src/App/ApplyTheme.tsx

@@ -1,13 +1,9 @@
-import React, { Fragment, ReactNode, useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import themes from 'Styles/Themes';
 import AppState from './State/AppState';
 
-interface ApplyThemeProps {
-  children: ReactNode;
-}
-
 function createThemeSelector() {
   return createSelector(
     (state: AppState) => state.settings.ui.item.theme || window.Prowlarr.theme,
@@ -17,7 +13,7 @@ function createThemeSelector() {
   );
 }
 
-function ApplyTheme({ children }: ApplyThemeProps) {
+function ApplyTheme() {
   const theme = useSelector(createThemeSelector());
 
   const updateCSSVariables = useCallback(() => {
@@ -31,7 +27,7 @@ function ApplyTheme({ children }: ApplyThemeProps) {
     updateCSSVariables();
   }, [updateCSSVariables, theme]);
 
-  return <Fragment>{children}</Fragment>;
+  return null;
 }
 
 export default ApplyTheme;

frontend/src/App/ConnectionLostModal.tsx

@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useCallback } from 'react';
 import Button from 'Components/Link/Button';
 import Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
@@ -10,36 +9,31 @@ import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './ConnectionLostModal.css';
 
-function ConnectionLostModal(props) {
-  const {
-    isOpen,
-    onModalClose
-  } = props;
+interface ConnectionLostModalProps {
+  isOpen: boolean;
+}
+
+function ConnectionLostModal(props: ConnectionLostModalProps) {
+  const { isOpen } = props;
+
+  const handleModalClose = useCallback(() => {
+    location.reload();
+  }, []);
 
   return (
-    <Modal
-      isOpen={isOpen}
-      onModalClose={onModalClose}
-    >
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>
-          {translate('ConnectionLost')}
-        </ModalHeader>
+    <Modal isOpen={isOpen} onModalClose={handleModalClose}>
+      <ModalContent onModalClose={handleModalClose}>
+        <ModalHeader>{translate('ConnectionLost')}</ModalHeader>
 
         <ModalBody>
-          <div>
-            {translate('ConnectionLostToBackend')}
-          </div>
+          <div>{translate('ConnectionLostToBackend')}</div>
 
           <div className={styles.automatic}>
             {translate('ConnectionLostReconnect')}
           </div>
         </ModalBody>
         <ModalFooter>
-          <Button
-            kind={kinds.PRIMARY}
-            onPress={onModalClose}
-          >
+          <Button kind={kinds.PRIMARY} onPress={handleModalClose}>
             {translate('Reload')}
           </Button>
         </ModalFooter>
@@ -48,9 +42,4 @@ function ConnectionLostModal(props) {
   );
 }
 
-ConnectionLostModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
 export default ConnectionLostModal;

frontend/src/App/ConnectionLostModalConnector.js

@@ -1,12 +0,0 @@
-import { connect } from 'react-redux';
-import ConnectionLostModal from './ConnectionLostModal';
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onModalClose() {
-      location.reload();
-    }
-  };
-}
-
-export default connect(undefined, createMapDispatchToProps)(ConnectionLostModal);

frontend/src/App/State/AppSectionState.ts

@@ -1,5 +1,6 @@
+import Column from 'Components/Table/Column';
 import SortDirection from 'Helpers/Props/SortDirection';
-import { FilterBuilderProp } from './AppState';
+import { FilterBuilderProp, PropertyFilter } from './AppState';
 
 export interface Error {
   responseJSON: {
@@ -18,10 +19,18 @@ export interface AppSectionSaveState {
 }
 
 export interface PagedAppSectionState {
+  page: number;
   pageSize: number;
+  totalPages: number;
+  totalRecords?: number;
+}
+export interface TableAppSectionState {
+  columns: Column[];
 }
 
 export interface AppSectionFilterState<T> {
+  selectedFilterKey: string;
+  filters: PropertyFilter[];
   filterBuilderProps: FilterBuilderProp<T>[];
 }
 
@@ -38,6 +47,7 @@ export interface AppSectionItemState<T> {
   isFetching: boolean;
   isPopulated: boolean;
   error: Error;
+  pendingChanges: Partial<T>;
   item: T;
 }
 

frontend/src/App/State/AppState.ts

@@ -43,6 +43,10 @@ export interface CustomFilter {
 }
 
 export interface AppSectionState {
+  isConnected: boolean;
+  isReconnecting: boolean;
+  version: string;
+  prevVersion?: string;
   dimensions: {
     isSmallScreen: boolean;
     width: number;

frontend/src/App/State/IndexerAppState.ts

@@ -31,6 +31,8 @@ interface IndexerAppState
     AppSectionDeleteState,
     AppSectionSaveState {
   itemMap: Record<number, number>;
+
+  isTestingAll: boolean;
 }
 
 export type IndexerStatusAppState = AppSectionState<IndexerStatus>;

frontend/src/App/State/SettingsAppState.ts

@@ -24,7 +24,9 @@ export interface ApplicationAppState
 export interface DownloadClientAppState
   extends AppSectionState<DownloadClient>,
     AppSectionDeleteState,
-    AppSectionSaveState {}
+    AppSectionSaveState {
+  isTestingAll: boolean;
+}
 
 export interface IndexerCategoryAppState
   extends AppSectionState<IndexerCategory>,

frontend/src/App/State/SystemAppState.ts

@@ -1,10 +1,19 @@
+import Health from 'typings/Health';
 import SystemStatus from 'typings/SystemStatus';
-import { AppSectionItemState } from './AppSectionState';
+import Task from 'typings/Task';
+import Update from 'typings/Update';
+import AppSectionState, { AppSectionItemState } from './AppSectionState';
 
+export type HealthAppState = AppSectionState<Health>;
 export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
+export type TaskAppState = AppSectionState<Task>;
+export type UpdateAppState = AppSectionState<Update>;
 
 interface SystemAppState {
+  health: HealthAppState;
   status: SystemStatusAppState;
+  tasks: TaskAppState;
+  updates: UpdateAppState;
 }
 
 export default SystemAppState;

frontend/src/Components/Chart/StackedBarChart.js

@@ -46,6 +46,10 @@ class StackedBarChart extends Component {
               size: 14,
               family: defaultFontFamily
             }
+          },
+          tooltip: {
+            mode: 'index',
+            position: 'average'
           }
         }
       },

frontend/src/Components/Error/ErrorBoundaryError.tsx

@@ -63,11 +63,7 @@ function ErrorBoundaryError(props: ErrorBoundaryErrorProps) {
           <div>{info.componentStack}</div>
         )}
 
-        {
-          <div className={styles.version}>
-            Version: {window.Prowlarr.version}
-          </div>
-        }
+        <div className={styles.version}>Version: {window.Prowlarr.version}</div>
       </details>
     </div>
   );

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

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import SelectInput from 'Components/Form/SelectInput';
 import IconButton from 'Components/Link/IconButton';
 import { filterBuilderTypes, filterBuilderValueTypes, icons } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
 import AppProfileFilterBuilderRowValueConnector from './AppProfileFilterBuilderRowValueConnector';
 import BoolFilterBuilderRowValue from './BoolFilterBuilderRowValue';
 import CategoryFilterBuilderRowValue from './CategoryFilterBuilderRowValue';
@@ -212,7 +213,7 @@ class FilterBuilderRow extends Component {
         key: name,
         value: typeof label === 'function' ? label() : label
       };
-    }).sort((a, b) => a.value.localeCompare(b.value));
+    }).sort(sortByProp('value'));
 
     const ValueComponent = getRowValueConnector(selectedFilterBuilderProp);
 

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

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { filterBuilderTypes } from 'Helpers/Props';
 import * as filterTypes from 'Helpers/Props/filterTypes';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 function createTagListSelector() {
@@ -38,7 +38,7 @@ function createTagListSelector() {
           }
 
           return acc;
-        }, []).sort(sortByName);
+        }, []).sort(sortByProp('name'));
       }
 
       return _.uniqBy(items, 'id');

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

@@ -5,6 +5,7 @@ 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 sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import CustomFilter from './CustomFilter';
 import styles from './CustomFiltersModalContent.css';
@@ -31,7 +32,7 @@ function CustomFiltersModalContent(props) {
       <ModalBody>
         {
           customFilters
-            .sort((a, b) => a.label.localeCompare(b.label))
+            .sort((a, b) => sortByProp(a, b, 'label'))
             .map((customFilter) => {
               return (
                 <CustomFilter

frontend/src/Components/Form/AppProfileSelectInputConnector.js

@@ -4,13 +4,13 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import SelectInput from './SelectInput';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.appProfiles', sortByName),
+    createSortedSectionSelector('settings.appProfiles', sortByProp('name')),
     (state, { includeNoChange }) => includeNoChange,
     (state, { includeMixed }) => includeMixed,
     (appProfiles, includeNoChange, includeMixed) => {

frontend/src/Components/Form/DownloadClientSelectInputConnector.js

@@ -3,7 +3,8 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchDownloadClients } from 'Store/Actions/settingsActions';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
@@ -21,7 +22,7 @@ function createMapStateToProps() {
 
       const values = items
         .filter((downloadClient) => downloadClient.protocol === protocolFilter)
-        .sort(sortByName)
+        .sort(sortByProp('name'))
         .map((downloadClient) => ({
           key: downloadClient.id,
           value: downloadClient.name,
@@ -31,7 +32,7 @@ function createMapStateToProps() {
       if (includeAny) {
         values.unshift({
           key: 0,
-          value: '(Any)'
+          value: `(${translate('Any')})`
         });
       }
 

frontend/src/Components/Form/IndexersSelectInputConnector.js

@@ -4,14 +4,14 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import titleCase from 'Utilities/String/titleCase';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
   return createSelector(
     (state, { value }) => value,
-    createSortedSectionSelector('indexers', sortByName),
+    createSortedSectionSelector('indexers', sortByProp('name')),
     (value, indexers) => {
       const values = [];
       const groupedIndexers = map(groupBy(indexers.items, 'protocol'), (val, key) => ({ protocol: key, indexers: val }));

frontend/src/Components/Form/SelectInput.css

@@ -1,7 +1,14 @@
 .select {
+  @add-mixin truncate;
+
   composes: input from '~Components/Form/Input.css';
 
-  padding: 0 11px;
+  padding: 0 30px 0 11px;
+  background-image: none, linear-gradient(-135deg, transparent 50%, var(--inputBackgroundColor) 50%), linear-gradient(-225deg, transparent 50%, var(--inputBackgroundColor) 50%), linear-gradient(var(--inputBackgroundColor) 42%, var(--textColor) 42%);
+  background-position: right 30px center, right bottom, right bottom, right bottom;
+  background-size: 1px 100%, 35px 27px, 30px 35px, 30px 100%;
+  background-repeat: no-repeat;
+  appearance: none;
 }
 
 .hasError {

frontend/src/Components/Menu/FilterMenuContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import FilterMenuItem from './FilterMenuItem';
 import MenuContent from './MenuContent';
@@ -47,7 +48,7 @@ class FilterMenuContent extends Component {
 
         {
           customFilters
-            .sort((a, b) => a.label.localeCompare(b.label))
+            .sort(sortByProp('label'))
             .map((filter) => {
               return (
                 <FilterMenuItem

frontend/src/Components/Page/Page.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import AppUpdatedModalConnector from 'App/AppUpdatedModalConnector';
+import AppUpdatedModal from 'App/AppUpdatedModal';
 import ColorImpairedContext from 'App/ColorImpairedContext';
-import ConnectionLostModalConnector from 'App/ConnectionLostModalConnector';
+import ConnectionLostModal from 'App/ConnectionLostModal';
 import SignalRConnector from 'Components/SignalRConnector';
 import AuthenticationRequiredModal from 'FirstRun/AuthenticationRequiredModal';
 import locationShape from 'Helpers/Props/Shapes/locationShape';
@@ -102,12 +102,12 @@ class Page extends Component {
             {children}
           </div>
 
-          <AppUpdatedModalConnector
+          <AppUpdatedModal
             isOpen={this.state.isUpdatedModalOpen}
             onModalClose={this.onUpdatedModalClose}
           />
 
-          <ConnectionLostModalConnector
+          <ConnectionLostModal
             isOpen={this.state.isConnectionLostModalOpen}
             onModalClose={this.onConnectionLostModalClose}
           />

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

@@ -8,7 +8,7 @@ import Scroller from 'Components/Scroller/Scroller';
 import { icons } from 'Helpers/Props';
 import locationShape from 'Helpers/Props/Shapes/locationShape';
 import dimensions from 'Styles/Variables/dimensions';
-import HealthStatusConnector from 'System/Status/Health/HealthStatusConnector';
+import HealthStatus from 'System/Status/Health/HealthStatus';
 import translate from 'Utilities/String/translate';
 import MessagesConnector from './Messages/MessagesConnector';
 import PageSidebarItem from './PageSidebarItem';
@@ -87,7 +87,7 @@ const links = [
       {
         title: () => translate('Status'),
         to: '/system/status',
-        statusComponent: HealthStatusConnector
+        statusComponent: HealthStatus
       },
       {
         title: () => translate('Tasks'),

frontend/src/Components/Table/Column.ts

@@ -2,9 +2,11 @@ import React from 'react';
 
 type PropertyFunction<T> = () => T;
 
+// TODO: Convert to generic so `name` can be a type
 interface Column {
   name: string;
   label: string | PropertyFunction<string> | React.ReactNode;
+  className?: string;
   columnLabel?: string;
   isSortable?: boolean;
   isVisible: boolean;

frontend/src/Components/Table/usePaging.ts

@@ -0,0 +1,54 @@
+import { useCallback, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+
+interface PagingOptions {
+  page: number;
+  totalPages: number;
+  gotoPage: ({ page }: { page: number }) => void;
+}
+
+function usePaging(options: PagingOptions) {
+  const { page, totalPages, gotoPage } = options;
+  const dispatch = useDispatch();
+
+  const handleFirstPagePress = useCallback(() => {
+    dispatch(gotoPage({ page: 1 }));
+  }, [dispatch, gotoPage]);
+
+  const handlePreviousPagePress = useCallback(() => {
+    dispatch(gotoPage({ page: Math.max(page - 1, 1) }));
+  }, [page, dispatch, gotoPage]);
+
+  const handleNextPagePress = useCallback(() => {
+    dispatch(gotoPage({ page: Math.min(page + 1, totalPages) }));
+  }, [page, totalPages, dispatch, gotoPage]);
+
+  const handleLastPagePress = useCallback(() => {
+    dispatch(gotoPage({ page: totalPages }));
+  }, [totalPages, dispatch, gotoPage]);
+
+  const handlePageSelect = useCallback(
+    (page: number) => {
+      dispatch(gotoPage({ page }));
+    },
+    [dispatch, gotoPage]
+  );
+
+  return useMemo(() => {
+    return {
+      handleFirstPagePress,
+      handlePreviousPagePress,
+      handleNextPagePress,
+      handleLastPagePress,
+      handlePageSelect,
+    };
+  }, [
+    handleFirstPagePress,
+    handlePreviousPagePress,
+    handleNextPagePress,
+    handleLastPagePress,
+    handlePageSelect,
+  ]);
+}
+
+export default usePaging;

frontend/src/Components/TagList.js

@@ -1,14 +1,15 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { kinds } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Label from './Label';
 import styles from './TagList.css';
 
 function TagList({ tags, tagList }) {
   const sortedTags = tags
     .map((tagId) => tagList.find((tag) => tag.id === tagId))
-    .filter((t) => t !== undefined)
-    .sort((a, b) => a.label.localeCompare(b.label));
+    .filter((tag) => !!tag)
+    .sort(sortByProp('label'));
 
   return (
     <div className={styles.tags}>

frontend/src/DownloadClient/DownloadProtocol.ts

@@ -1,7 +1,3 @@
-enum DownloadProtocol {
-  Unknown = 'unknown',
-  Usenet = 'usenet',
-  Torrent = 'torrent',
-}
+type DownloadProtocol = 'usenet' | 'torrent' | 'unknown';
 
 export default DownloadProtocol;

frontend/src/Helpers/Hooks/useCurrentPage.ts

@@ -0,0 +1,9 @@
+import { useHistory } from 'react-router-dom';
+
+function useCurrentPage() {
+  const history = useHistory();
+
+  return history.action === 'POP';
+}
+
+export default useCurrentPage;

frontend/src/Helpers/Hooks/useModalOpenState.ts

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

frontend/src/Helpers/Props/TooltipPosition.ts

@@ -0,0 +1,3 @@
+type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
+
+export default TooltipPosition;

frontend/src/History/Details/HistoryDetails.js

@@ -3,6 +3,7 @@ import React from 'react';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import Link from 'Components/Link/Link';
+import formatDateTime from 'Utilities/Date/formatDateTime';
 import translate from 'Utilities/String/translate';
 import styles from './HistoryDetails.css';
 
@@ -10,7 +11,10 @@ function HistoryDetails(props) {
   const {
     indexer,
     eventType,
-    data
+    date,
+    data,
+    shortDateFormat,
+    timeFormat
   } = props;
 
   if (eventType === 'indexerQuery' || eventType === 'indexerRss') {
@@ -22,7 +26,9 @@ function HistoryDetails(props) {
       offset,
       source,
       host,
-      url
+      url,
+      elapsedTime,
+      cached
     } = data;
 
     return (
@@ -104,6 +110,24 @@ function HistoryDetails(props) {
             /> :
             null
         }
+
+        {
+          elapsedTime ?
+            <DescriptionListItem
+              title={translate('ElapsedTime')}
+              data={`${elapsedTime}ms${cached === '1' ? ' (cached)' : ''}`}
+            /> :
+            null
+        }
+
+        {
+          date ?
+            <DescriptionListItem
+              title={translate('Date')}
+              data={formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds: true })}
+            /> :
+            null
+        }
       </DescriptionList>
     );
   }
@@ -111,10 +135,19 @@ function HistoryDetails(props) {
   if (eventType === 'releaseGrabbed') {
     const {
       source,
+      host,
       grabTitle,
-      url
+      url,
+      publishedDate,
+      infoUrl,
+      downloadClient,
+      downloadClientName,
+      elapsedTime,
+      grabMethod
     } = data;
 
+    const downloadClientNameInfo = downloadClientName ?? downloadClient;
+
     return (
       <DescriptionList>
         {
@@ -135,6 +168,15 @@ function HistoryDetails(props) {
             null
         }
 
+        {
+          data ?
+            <DescriptionListItem
+              title={translate('Host')}
+              data={host}
+            /> :
+            null
+        }
+
         {
           data ?
             <DescriptionListItem
@@ -144,6 +186,33 @@ function HistoryDetails(props) {
             null
         }
 
+        {
+          infoUrl ?
+            <DescriptionListItem
+              title={translate('InfoUrl')}
+              data={<Link to={infoUrl}>{infoUrl}</Link>}
+            /> :
+            null
+        }
+
+        {
+          publishedDate ?
+            <DescriptionListItem
+              title={translate('PublishedDate')}
+              data={formatDateTime(publishedDate, shortDateFormat, timeFormat, { includeSeconds: true })}
+            /> :
+            null
+        }
+
+        {
+          downloadClientNameInfo ?
+            <DescriptionListItem
+              title={translate('DownloadClient')}
+              data={downloadClientNameInfo}
+            /> :
+            null
+        }
+
         {
           data ?
             <DescriptionListItem
@@ -152,11 +221,40 @@ function HistoryDetails(props) {
             /> :
             null
         }
+
+        {
+          elapsedTime ?
+            <DescriptionListItem
+              title={translate('ElapsedTime')}
+              data={`${elapsedTime}ms`}
+            /> :
+            null
+        }
+
+        {
+          grabMethod ?
+            <DescriptionListItem
+              title={translate('Redirected')}
+              data={grabMethod.toLowerCase() === 'redirect' ? translate('Yes') : translate('No')}
+            /> :
+            null
+        }
+
+        {
+          date ?
+            <DescriptionListItem
+              title={translate('Date')}
+              data={formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds: true })}
+            /> :
+            null
+        }
       </DescriptionList>
     );
   }
 
   if (eventType === 'indexerAuth') {
+    const { elapsedTime } = data;
+
     return (
       <DescriptionList
         descriptionClassName={styles.description}
@@ -170,6 +268,24 @@ function HistoryDetails(props) {
             /> :
             null
         }
+
+        {
+          elapsedTime ?
+            <DescriptionListItem
+              title={translate('ElapsedTime')}
+              data={`${elapsedTime}ms`}
+            /> :
+            null
+        }
+
+        {
+          date ?
+            <DescriptionListItem
+              title={translate('Date')}
+              data={formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds: true })}
+            /> :
+            null
+        }
       </DescriptionList>
     );
   }
@@ -181,6 +297,15 @@ function HistoryDetails(props) {
         title={translate('Name')}
         data={data.query}
       />
+
+      {
+        date ?
+          <DescriptionListItem
+            title={translate('Date')}
+            data={formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds: true })}
+          /> :
+          null
+      }
     </DescriptionList>
   );
 }
@@ -188,6 +313,7 @@ function HistoryDetails(props) {
 HistoryDetails.propTypes = {
   indexer: PropTypes.object.isRequired,
   eventType: PropTypes.string.isRequired,
+  date: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   shortDateFormat: PropTypes.string.isRequired,
   timeFormat: PropTypes.string.isRequired

frontend/src/History/Details/HistoryDetailsModal.js

@@ -29,6 +29,7 @@ function HistoryDetailsModal(props) {
     isOpen,
     eventType,
     indexer,
+    date,
     data,
     shortDateFormat,
     timeFormat,
@@ -49,6 +50,7 @@ function HistoryDetailsModal(props) {
           <HistoryDetails
             eventType={eventType}
             indexer={indexer}
+            date={date}
             data={data}
             shortDateFormat={shortDateFormat}
             timeFormat={timeFormat}
@@ -71,6 +73,7 @@ HistoryDetailsModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   eventType: PropTypes.string.isRequired,
   indexer: PropTypes.object.isRequired,
+  date: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   shortDateFormat: PropTypes.string.isRequired,
   timeFormat: PropTypes.string.isRequired,

frontend/src/History/HistoryEventTypeCell.js

@@ -20,21 +20,22 @@ function getIconName(eventType) {
   }
 }
 
-function getIconKind(successful) {
-  switch (successful) {
-    case false:
-      return kinds.DANGER;
-    default:
-      return kinds.DEFAULT;
+function getIconKind(successful, redirect) {
+  if (redirect) {
+    return kinds.INFO;
+  } else if (!successful) {
+    return kinds.DANGER;
   }
+
+  return kinds.DEFAULT;
 }
 
-function getTooltip(eventType, data, indexer) {
+function getTooltip(eventType, data, indexer, redirect) {
   switch (eventType) {
     case 'indexerQuery':
       return `Query "${data.query}" sent to ${indexer.name}`;
     case 'releaseGrabbed':
-      return `Release grabbed from ${indexer.name}`;
+      return redirect ? `Release grabbed via redirect from ${indexer.name}` : `Release grabbed from ${indexer.name}`;
     case 'indexerAuth':
       return `Auth attempted for ${indexer.name}`;
     case 'indexerRss':
@@ -45,9 +46,12 @@ function getTooltip(eventType, data, indexer) {
 }
 
 function HistoryEventTypeCell({ eventType, successful, data, indexer }) {
+  const { grabMethod } = data;
+  const redirect = grabMethod && grabMethod.toLowerCase() === 'redirect';
+
   const iconName = getIconName(eventType);
-  const iconKind = getIconKind(successful);
-  const tooltip = getTooltip(eventType, data, indexer);
+  const iconKind = getIconKind(successful, redirect);
+  const tooltip = getTooltip(eventType, data, indexer, redirect);
 
   return (
     <TableRowCell

frontend/src/History/HistoryRow.js

@@ -370,8 +370,9 @@ class HistoryRow extends Component {
               return (
                 <RelativeDateCell
                   key={name}
-                  date={date}
                   className={styles.date}
+                  date={date}
+                  includeSeconds={true}
                 />
               );
             }
@@ -408,6 +409,7 @@ class HistoryRow extends Component {
         <HistoryDetailsModal
           isOpen={this.state.isDetailsModalOpen}
           eventType={eventType}
+          date={date}
           data={data}
           indexer={indexer}
           isMarkingAsFailed={isMarkingAsFailed}

frontend/src/Indexer/Add/AddIndexerModal.js

@@ -1,31 +0,0 @@
-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';
-
-function AddIndexerModal({ isOpen, onModalClose, onSelectIndexer, ...otherProps }) {
-  return (
-    <Modal
-      isOpen={isOpen}
-      size={sizes.EXTRA_LARGE}
-      onModalClose={onModalClose}
-      className={styles.modal}
-    >
-      <AddIndexerModalContentConnector
-        {...otherProps}
-        onModalClose={onModalClose}
-        onSelectIndexer={onSelectIndexer}
-      />
-    </Modal>
-  );
-}
-
-AddIndexerModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired,
-  onSelectIndexer: PropTypes.func.isRequired
-};
-
-export default AddIndexerModal;

frontend/src/Indexer/Add/AddIndexerModal.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import { clearIndexerSchema } from 'Store/Actions/indexerActions';
+import AddIndexerModalContent from './AddIndexerModalContent';
+import styles from './AddIndexerModal.css';
+
+interface AddIndexerModalProps {
+  isOpen: boolean;
+  onSelectIndexer(): void;
+  onModalClose(): void;
+}
+
+function AddIndexerModal({
+  isOpen,
+  onSelectIndexer,
+  onModalClose,
+  ...otherProps
+}: AddIndexerModalProps) {
+  const dispatch = useDispatch();
+
+  const onModalClosePress = useCallback(() => {
+    dispatch(clearIndexerSchema());
+    onModalClose();
+  }, [dispatch, onModalClose]);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      size={sizes.EXTRA_LARGE}
+      className={styles.modal}
+      onModalClose={onModalClosePress}
+    >
+      <AddIndexerModalContent
+        {...otherProps}
+        onSelectIndexer={onSelectIndexer}
+        onModalClose={onModalClosePress}
+      />
+    </Modal>
+  );
+}
+
+export default AddIndexerModal;

frontend/src/Indexer/Add/AddIndexerModalContent.css

@@ -19,12 +19,18 @@
   margin-bottom: 16px;
 }
 
-.alert {
+.notice {
   composes: alert from '~Components/Alert.css';
 
   margin-bottom: 20px;
 }
 
+.alert {
+  composes: alert from '~Components/Alert.css';
+
+  text-align: center;
+}
+
 .scroller {
   flex: 1 1 auto;
 }

frontend/src/Indexer/Add/AddIndexerModalContent.css.d.ts

@@ -10,6 +10,7 @@ interface CssExports {
   'indexers': string;
   'modalBody': string;
   'modalFooter': string;
+  'notice': string;
   'scroller': string;
 }
 export const cssExports: CssExports;

frontend/src/Indexer/Add/AddIndexerModalContent.js

@@ -1,324 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Alert from 'Components/Alert';
-import EnhancedSelectInput from 'Components/Form/EnhancedSelectInput';
-import NewznabCategorySelectInputConnector from 'Components/Form/NewznabCategorySelectInputConnector';
-import TextInput from 'Components/Form/TextInput';
-import Button from 'Components/Link/Button';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import ModalBody from 'Components/Modal/ModalBody';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalFooter from 'Components/Modal/ModalFooter';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import Scroller from 'Components/Scroller/Scroller';
-import Table from 'Components/Table/Table';
-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 SelectIndexerRow from './SelectIndexerRow';
-import styles from './AddIndexerModalContent.css';
-
-const columns = [
-  {
-    name: 'protocol',
-    label: () => translate('Protocol'),
-    isSortable: true,
-    isVisible: true
-  },
-  {
-    name: 'sortName',
-    label: () => translate('Name'),
-    isSortable: true,
-    isVisible: true
-  },
-  {
-    name: 'language',
-    label: () => translate('Language'),
-    isSortable: true,
-    isVisible: true
-  },
-  {
-    name: 'description',
-    label: () => translate('Description'),
-    isSortable: false,
-    isVisible: true
-  },
-  {
-    name: 'privacy',
-    label: () => translate('Privacy'),
-    isSortable: true,
-    isVisible: true
-  },
-  {
-    name: 'categories',
-    label: () => translate('Categories'),
-    isSortable: false,
-    isVisible: true
-  }
-];
-
-const protocols = [
-  {
-    key: 'torrent',
-    value: 'torrent'
-  },
-  {
-    key: 'usenet',
-    value: 'nzb'
-  }
-];
-
-const privacyLevels = [
-  {
-    key: 'private',
-    get value() {
-      return translate('Private');
-    }
-  },
-  {
-    key: 'semiPrivate',
-    get value() {
-      return translate('SemiPrivate');
-    }
-  },
-  {
-    key: 'public',
-    get value() {
-      return translate('Public');
-    }
-  }
-];
-
-class AddIndexerModalContent extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      filter: '',
-      filterProtocols: [],
-      filterLanguages: [],
-      filterPrivacyLevels: [],
-      filterCategories: []
-    };
-  }
-
-  //
-  // Listeners
-
-  onFilterChange = ({ value }) => {
-    this.setState({ filter: value });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      indexers,
-      onIndexerSelect,
-      sortKey,
-      sortDirection,
-      isFetching,
-      isPopulated,
-      error,
-      onSortPress,
-      onModalClose
-    } = this.props;
-
-    const languages = Array.from(new Set(indexers.map(({ language }) => language)))
-      .sort((a, b) => a.localeCompare(b))
-      .map((language) => ({ key: language, value: language }));
-
-    const filteredIndexers = indexers.filter((indexer) => {
-      const {
-        filter,
-        filterProtocols,
-        filterLanguages,
-        filterPrivacyLevels,
-        filterCategories
-      } = this.state;
-
-      if (!indexer.name.toLowerCase().includes(filter.toLocaleLowerCase()) && !indexer.description.toLowerCase().includes(filter.toLocaleLowerCase())) {
-        return false;
-      }
-
-      if (filterProtocols.length && !filterProtocols.includes(indexer.protocol)) {
-        return false;
-      }
-
-      if (filterLanguages.length && !filterLanguages.includes(indexer.language)) {
-        return false;
-      }
-
-      if (filterPrivacyLevels.length && !filterPrivacyLevels.includes(indexer.privacy)) {
-        return false;
-      }
-
-      if (filterCategories.length) {
-        const { categories = [] } = indexer.capabilities || {};
-        const flat = ({ id, subCategories = [] }) => [id, ...subCategories.flatMap(flat)];
-        const flatCategories = categories
-          .filter((item) => item.id < 100000)
-          .flatMap(flat);
-
-        if (!filterCategories.every((item) => flatCategories.includes(item))) {
-          return false;
-        }
-      }
-
-      return true;
-    });
-
-    const errorMessage = getErrorMessage(error, translate('UnableToLoadIndexers'));
-
-    return (
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>
-          {translate('AddIndexer')}
-        </ModalHeader>
-
-        <ModalBody
-          className={styles.modalBody}
-          scrollDirection={scrollDirections.NONE}
-        >
-          <TextInput
-            className={styles.filterInput}
-            placeholder={translate('FilterPlaceHolder')}
-            name="filter"
-            value={this.state.filter}
-            autoFocus={true}
-            onChange={this.onFilterChange}
-          />
-
-          <div className={styles.filterRow}>
-            <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>{translate('Protocol')}</label>
-              <EnhancedSelectInput
-                name="indexerProtocols"
-                value={this.state.filterProtocols}
-                values={protocols}
-                onChange={({ value }) => this.setState({ filterProtocols: value })}
-              />
-            </div>
-
-            <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>{translate('Language')}</label>
-              <EnhancedSelectInput
-                name="indexerLanguages"
-                value={this.state.filterLanguages}
-                values={languages}
-                onChange={({ value }) => this.setState({ filterLanguages: value })}
-              />
-            </div>
-
-            <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>{translate('Privacy')}</label>
-              <EnhancedSelectInput
-                name="indexerPrivacyLevels"
-                value={this.state.filterPrivacyLevels}
-                values={privacyLevels}
-                onChange={({ value }) => this.setState({ filterPrivacyLevels: value })}
-              />
-            </div>
-
-            <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>{translate('Categories')}</label>
-              <NewznabCategorySelectInputConnector
-                name="indexerCategories"
-                value={this.state.filterCategories}
-                onChange={({ value }) => this.setState({ filterCategories: value })}
-              />
-            </div>
-          </div>
-
-          <Alert
-            kind={kinds.INFO}
-            className={styles.alert}
-          >
-            <div>
-              {translate('ProwlarrSupportsAnyIndexer')}
-            </div>
-          </Alert>
-
-          <Scroller
-            className={styles.scroller}
-            autoFocus={false}
-          >
-            {
-              isFetching ? <LoadingIndicator /> : null
-            }
-            {
-              error ? <Alert kind={kinds.DANGER}>{errorMessage}</Alert> : null
-            }
-            {
-              isPopulated && !!indexers.length ?
-                <Table
-                  columns={columns}
-                  sortKey={sortKey}
-                  sortDirection={sortDirection}
-                  onSortPress={onSortPress}
-                >
-                  <TableBody>
-                    {
-                      filteredIndexers.map((indexer) => (
-                        <SelectIndexerRow
-                          key={`${indexer.implementation}-${indexer.name}`}
-                          implementation={indexer.implementation}
-                          implementationName={indexer.implementationName}
-                          {...indexer}
-                          onIndexerSelect={onIndexerSelect}
-                        />
-                      ))
-                    }
-                  </TableBody>
-                </Table> :
-                null
-            }
-            {
-              isPopulated && !!indexers.length && !filteredIndexers.length ?
-                <Alert
-                  kind={kinds.WARNING}
-                >
-                  {translate('NoIndexersFound')}
-                </Alert> :
-                null
-            }
-          </Scroller>
-        </ModalBody>
-
-        <ModalFooter className={styles.modalFooter}>
-          <div className={styles.available}>
-            {
-              isPopulated ?
-                translate('CountIndexersAvailable', { count: filteredIndexers.length }) :
-                null
-            }
-          </div>
-
-          <div>
-            <Button onPress={onModalClose}>{translate('Close')}</Button>
-          </div>
-        </ModalFooter>
-      </ModalContent>
-    );
-  }
-}
-
-AddIndexerModalContent.propTypes = {
-  isFetching: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  sortKey: PropTypes.string,
-  sortDirection: PropTypes.string,
-  onSortPress: PropTypes.func.isRequired,
-  indexers: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onIndexerSelect: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default AddIndexerModalContent;

frontend/src/Indexer/Add/AddIndexerModalContent.tsx

@@ -0,0 +1,434 @@
+import { some } from 'lodash';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import IndexerAppState from 'App/State/IndexerAppState';
+import Alert from 'Components/Alert';
+import EnhancedSelectInput from 'Components/Form/EnhancedSelectInput';
+import NewznabCategorySelectInputConnector from 'Components/Form/NewznabCategorySelectInputConnector';
+import TextInput from 'Components/Form/TextInput';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import Scroller from 'Components/Scroller/Scroller';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import { kinds, scrollDirections } from 'Helpers/Props';
+import Indexer, { IndexerCategory } from 'Indexer/Indexer';
+import {
+  fetchIndexerSchema,
+  selectIndexerSchema,
+  setIndexerSchemaSort,
+} from 'Store/Actions/indexerActions';
+import createAllIndexersSelector from 'Store/Selectors/createAllIndexersSelector';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import { SortCallback } from 'typings/callbacks';
+import sortByProp from 'Utilities/Array/sortByProp';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
+import SelectIndexerRow from './SelectIndexerRow';
+import styles from './AddIndexerModalContent.css';
+
+const COLUMNS = [
+  {
+    name: 'protocol',
+    label: () => translate('Protocol'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'sortName',
+    label: () => translate('Name'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'language',
+    label: () => translate('Language'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'description',
+    label: () => translate('Description'),
+    isSortable: false,
+    isVisible: true,
+  },
+  {
+    name: 'privacy',
+    label: () => translate('Privacy'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'categories',
+    label: () => translate('Categories'),
+    isSortable: false,
+    isVisible: true,
+  },
+];
+
+const PROTOCOLS = [
+  {
+    key: 'torrent',
+    value: 'torrent',
+  },
+  {
+    key: 'usenet',
+    value: 'nzb',
+  },
+];
+
+const PRIVACY_LEVELS = [
+  {
+    key: 'private',
+    get value() {
+      return translate('Private');
+    },
+  },
+  {
+    key: 'semiPrivate',
+    get value() {
+      return translate('SemiPrivate');
+    },
+  },
+  {
+    key: 'public',
+    get value() {
+      return translate('Public');
+    },
+  },
+];
+
+interface IndexerSchema extends Indexer {
+  isExistingIndexer: boolean;
+}
+
+function createAddIndexersSelector() {
+  return createSelector(
+    createClientSideCollectionSelector('indexers.schema'),
+    createAllIndexersSelector(),
+    (indexers: IndexerAppState, allIndexers) => {
+      const { isFetching, isPopulated, error, items, sortDirection, sortKey } =
+        indexers;
+
+      const indexerList: IndexerSchema[] = items.map((item) => {
+        const { definitionName } = item;
+        return {
+          ...item,
+          isExistingIndexer: some(allIndexers, { definitionName }),
+        };
+      });
+
+      return {
+        isFetching,
+        isPopulated,
+        error,
+        indexers: indexerList,
+        sortKey,
+        sortDirection,
+      };
+    }
+  );
+}
+
+interface AddIndexerModalContentProps {
+  onSelectIndexer(): void;
+  onModalClose(): void;
+}
+
+function AddIndexerModalContent(props: AddIndexerModalContentProps) {
+  const { onSelectIndexer, onModalClose } = props;
+
+  const { isFetching, isPopulated, error, indexers, sortKey, sortDirection } =
+    useSelector(createAddIndexersSelector());
+  const dispatch = useDispatch();
+
+  const [filter, setFilter] = useState('');
+  const [filterProtocols, setFilterProtocols] = useState<string[]>([]);
+  const [filterLanguages, setFilterLanguages] = useState<string[]>([]);
+  const [filterPrivacyLevels, setFilterPrivacyLevels] = useState<string[]>([]);
+  const [filterCategories, setFilterCategories] = useState<number[]>([]);
+
+  useEffect(
+    () => {
+      dispatch(fetchIndexerSchema());
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const onFilterChange = useCallback(
+    ({ value }: { value: string }) => {
+      setFilter(value);
+    },
+    [setFilter]
+  );
+
+  const onFilterProtocolsChange = useCallback(
+    ({ value }: { value: string[] }) => {
+      setFilterProtocols(value);
+    },
+    [setFilterProtocols]
+  );
+
+  const onFilterLanguagesChange = useCallback(
+    ({ value }: { value: string[] }) => {
+      setFilterLanguages(value);
+    },
+    [setFilterLanguages]
+  );
+
+  const onFilterPrivacyLevelsChange = useCallback(
+    ({ value }: { value: string[] }) => {
+      setFilterPrivacyLevels(value);
+    },
+    [setFilterPrivacyLevels]
+  );
+
+  const onFilterCategoriesChange = useCallback(
+    ({ value }: { value: number[] }) => {
+      setFilterCategories(value);
+    },
+    [setFilterCategories]
+  );
+
+  const onIndexerSelect = useCallback(
+    ({
+      implementation,
+      implementationName,
+      name,
+    }: {
+      implementation: string;
+      implementationName: string;
+      name: string;
+    }) => {
+      dispatch(
+        selectIndexerSchema({
+          implementation,
+          implementationName,
+          name,
+        })
+      );
+
+      onSelectIndexer();
+    },
+    [dispatch, onSelectIndexer]
+  );
+
+  const onSortPress = useCallback<SortCallback>(
+    (sortKey, sortDirection) => {
+      dispatch(setIndexerSchemaSort({ sortKey, sortDirection }));
+    },
+    [dispatch]
+  );
+
+  const languages = useMemo(
+    () =>
+      Array.from(new Set(indexers.map(({ language }) => language)))
+        .map((language) => ({ key: language, value: language }))
+        .sort(sortByProp('value')),
+    [indexers]
+  );
+
+  const filteredIndexers = useMemo(() => {
+    const flat = ({
+      id,
+      subCategories = [],
+    }: {
+      id: number;
+      subCategories: IndexerCategory[];
+    }): number[] => [id, ...subCategories.flatMap(flat)];
+
+    return indexers.filter((indexer) => {
+      if (
+        filter.length &&
+        !indexer.name.toLowerCase().includes(filter.toLocaleLowerCase()) &&
+        !indexer.description.toLowerCase().includes(filter.toLocaleLowerCase())
+      ) {
+        return false;
+      }
+
+      if (
+        filterProtocols.length &&
+        !filterProtocols.includes(indexer.protocol)
+      ) {
+        return false;
+      }
+
+      if (
+        filterLanguages.length &&
+        !filterLanguages.includes(indexer.language)
+      ) {
+        return false;
+      }
+
+      if (
+        filterPrivacyLevels.length &&
+        !filterPrivacyLevels.includes(indexer.privacy)
+      ) {
+        return false;
+      }
+
+      if (filterCategories.length) {
+        const { categories = [] } = indexer.capabilities || {};
+
+        const flatCategories = categories
+          .filter((item) => item.id < 100000)
+          .flatMap(flat);
+
+        if (
+          !filterCategories.every((categoryId) =>
+            flatCategories.includes(categoryId)
+          )
+        ) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+  }, [
+    indexers,
+    filter,
+    filterProtocols,
+    filterLanguages,
+    filterPrivacyLevels,
+    filterCategories,
+  ]);
+
+  const errorMessage = getErrorMessage(
+    error,
+    translate('UnableToLoadIndexers')
+  );
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('AddIndexer')}</ModalHeader>
+
+      <ModalBody
+        className={styles.modalBody}
+        scrollDirection={scrollDirections.NONE}
+      >
+        <TextInput
+          className={styles.filterInput}
+          placeholder={translate('FilterPlaceHolder')}
+          name="filter"
+          value={filter}
+          autoFocus={true}
+          onChange={onFilterChange}
+        />
+
+        <div className={styles.filterRow}>
+          <div className={styles.filterContainer}>
+            <label className={styles.filterLabel}>
+              {translate('Protocol')}
+            </label>
+
+            <EnhancedSelectInput
+              name="indexerProtocols"
+              value={filterProtocols}
+              values={PROTOCOLS}
+              onChange={onFilterProtocolsChange}
+            />
+          </div>
+
+          <div className={styles.filterContainer}>
+            <label className={styles.filterLabel}>
+              {translate('Language')}
+            </label>
+
+            <EnhancedSelectInput
+              name="indexerLanguages"
+              value={filterLanguages}
+              values={languages}
+              onChange={onFilterLanguagesChange}
+            />
+          </div>
+
+          <div className={styles.filterContainer}>
+            <label className={styles.filterLabel}>{translate('Privacy')}</label>
+            <EnhancedSelectInput
+              name="indexerPrivacyLevels"
+              value={filterPrivacyLevels}
+              values={PRIVACY_LEVELS}
+              onChange={onFilterPrivacyLevelsChange}
+            />
+          </div>
+
+          <div className={styles.filterContainer}>
+            <label className={styles.filterLabel}>
+              {translate('Categories')}
+            </label>
+
+            <NewznabCategorySelectInputConnector
+              name="indexerCategories"
+              value={filterCategories}
+              onChange={onFilterCategoriesChange}
+            />
+          </div>
+        </div>
+
+        <Alert kind={kinds.INFO} className={styles.notice}>
+          <div>{translate('ProwlarrSupportsAnyIndexer')}</div>
+        </Alert>
+
+        <Scroller className={styles.scroller} autoFocus={false}>
+          {isFetching ? <LoadingIndicator /> : null}
+
+          {error ? (
+            <Alert kind={kinds.DANGER} className={styles.alert}>
+              {errorMessage}
+            </Alert>
+          ) : null}
+
+          {isPopulated && !!indexers.length ? (
+            <Table
+              columns={COLUMNS}
+              sortKey={sortKey}
+              sortDirection={sortDirection}
+              onSortPress={onSortPress}
+            >
+              <TableBody>
+                {filteredIndexers.map((indexer) => (
+                  <SelectIndexerRow
+                    {...indexer}
+                    key={`${indexer.implementation}-${indexer.name}`}
+                    implementation={indexer.implementation}
+                    implementationName={indexer.implementationName}
+                    onIndexerSelect={onIndexerSelect}
+                  />
+                ))}
+              </TableBody>
+            </Table>
+          ) : null}
+
+          {isPopulated && !!indexers.length && !filteredIndexers.length ? (
+            <Alert kind={kinds.WARNING} className={styles.alert}>
+              {translate('NoIndexersFound')}
+            </Alert>
+          ) : null}
+        </Scroller>
+      </ModalBody>
+
+      <ModalFooter className={styles.modalFooter}>
+        <div className={styles.available}>
+          {isPopulated
+            ? translate('CountIndexersAvailable', {
+                count: filteredIndexers.length,
+              })
+            : null}
+        </div>
+
+        <div>
+          <Button onPress={onModalClose}>{translate('Close')}</Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default AddIndexerModalContent;

frontend/src/Indexer/Add/AddIndexerModalContentConnector.js

@@ -1,94 +0,0 @@
-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'),
-    createAllIndexersSelector(),
-    (indexers, allIndexers) => {
-      const {
-        isFetching,
-        isPopulated,
-        error,
-        items,
-        sortDirection,
-        sortKey
-      } = indexers;
-
-      const indexerList = items.map((item) => {
-        const { definitionName } = item;
-        return {
-          ...item,
-          isExistingIndexer: some(allIndexers, { definitionName })
-        };
-      });
-
-      return {
-        isFetching,
-        isPopulated,
-        error,
-        indexers: indexerList,
-        sortKey,
-        sortDirection
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  fetchIndexerSchema,
-  selectIndexerSchema,
-  setIndexerSchemaSort
-};
-
-class AddIndexerModalContentConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.fetchIndexerSchema();
-  }
-
-  //
-  // Listeners
-
-  onIndexerSelect = ({ implementation, implementationName, name }) => {
-    this.props.selectIndexerSchema({ implementation, implementationName, name });
-    this.props.onSelectIndexer();
-  };
-
-  onSortPress = (sortKey, sortDirection) => {
-    this.props.setIndexerSchemaSort({ sortKey, sortDirection });
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <AddIndexerModalContent
-        {...this.props}
-        onSortPress={this.onSortPress}
-        onIndexerSelect={this.onIndexerSelect}
-      />
-    );
-  }
-}
-
-AddIndexerModalContentConnector.propTypes = {
-  fetchIndexerSchema: PropTypes.func.isRequired,
-  selectIndexerSchema: PropTypes.func.isRequired,
-  setIndexerSchemaSort: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired,
-  onSelectIndexer: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(AddIndexerModalContentConnector);

frontend/src/Indexer/Add/SelectIndexerRow.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import Icon from 'Components/Icon';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRowButton from 'Components/Table/TableRowButton';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
 import { icons } from 'Helpers/Props';
 import CapabilitiesLabel from 'Indexer/Index/Table/CapabilitiesLabel';
 import PrivacyLabel from 'Indexer/Index/Table/PrivacyLabel';
@@ -12,7 +13,7 @@ import styles from './SelectIndexerRow.css';
 
 interface SelectIndexerRowProps {
   name: string;
-  protocol: string;
+  protocol: DownloadProtocol;
   privacy: IndexerPrivacy;
   language: string;
   description: string;

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

@@ -2,6 +2,7 @@ import { uniqBy } from 'lodash';
 import React from 'react';
 import Label from 'Components/Label';
 import { IndexerCapabilities } from 'Indexer/Indexer';
+import translate from 'Utilities/String/translate';
 
 interface CapabilitiesLabelProps {
   capabilities: IndexerCapabilities;
@@ -38,7 +39,7 @@ function CapabilitiesLabel(props: CapabilitiesLabelProps) {
         );
       })}
 
-      {filteredList.length === 0 ? <Label>{'None'}</Label> : null}
+      {filteredList.length === 0 ? <Label>{translate('None')}</Label> : null}
     </span>
   );
 }

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

@@ -46,11 +46,7 @@ const columnsSelector = createSelector(
   (columns) => columns
 );
 
-const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
-  index,
-  style,
-  data,
-}) => {
+function Row({ index, style, data }: ListChildComponentProps<RowItemData>) {
   const { items, sortKey, columns, isSelectMode, onCloneIndexerPress } = data;
 
   if (index >= items.length) {
@@ -77,7 +73,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
       />
     </div>
   );
-};
+}
 
 function getWindowScrollTopPosition() {
   return document.documentElement.scrollTop || document.body.scrollTop || 0;

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -32,19 +32,17 @@ function IndexerIndexTableOptions(props: IndexerIndexTableOptionsProps) {
   );
 
   return (
-    <Fragment>
-      <FormGroup>
-        <FormLabel>{translate('ShowSearch')}</FormLabel>
+    <FormGroup>
+      <FormLabel>{translate('ShowSearch')}</FormLabel>
 
-        <FormInputGroup
-          type={inputTypes.CHECK}
-          name="showSearchAction"
-          value={showSearchAction}
-          helpText={translate('ShowSearchHelpText')}
-          onChange={onTableOptionChangeWrapper}
-        />
-      </FormGroup>
-    </Fragment>
+      <FormInputGroup
+        type={inputTypes.CHECK}
+        name="showSearchAction"
+        value={showSearchAction}
+        helpText={translate('ShowSearchHelpText')}
+        onChange={onTableOptionChangeWrapper}
+      />
+    </FormGroup>
   );
 }
 

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

@@ -38,14 +38,12 @@ function IndexerStatusCell(props: IndexerStatusCellProps) {
 
   return (
     <Component className={className} {...otherProps}>
-      {
-        <Icon
-          className={styles.statusIcon}
-          kind={enabled ? enableKind : kinds.DEFAULT}
-          name={enabled ? enableIcon : icons.BLOCKLIST}
-          title={enabled ? enableTitle : translate('Disabled')}
-        />
-      }
+      <Icon
+        className={styles.statusIcon}
+        kind={enabled ? enableKind : kinds.DEFAULT}
+        name={enabled ? enableIcon : icons.BLOCKLIST}
+        title={enabled ? enableTitle : translate('Disabled')}
+      />
       {status ? (
         <Popover
           className={styles.indexerStatusTooltip}

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

@@ -11,3 +11,7 @@
   border-color: var(--usenetColor);
   background-color: var(--usenetColor);
 }
+
+.unknown {
+  composes: label from '~Components/Label.css';
+}

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

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

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

@@ -1,18 +1,15 @@
 import React from 'react';
 import Label from 'Components/Label';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
 import styles from './ProtocolLabel.css';
 
 interface ProtocolLabelProps {
-  protocol: string;
+  protocol: DownloadProtocol;
 }
 
-function ProtocolLabel(props: ProtocolLabelProps) {
-  const { protocol } = props;
-
+function ProtocolLabel({ protocol }: ProtocolLabelProps) {
   const protocolName = protocol === 'usenet' ? 'nzb' : protocol;
 
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore ts(7053)
   return <Label className={styles[protocol]}>{protocolName}</Label>;
 }
 

frontend/src/Indexer/Indexer.ts

@@ -1,4 +1,5 @@
 import ModelBase from 'App/ModelBase';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
 
 export interface IndexerStatus extends ModelBase {
   disabledTill: Date;
@@ -38,6 +39,7 @@ export interface IndexerField extends ModelBase {
 
 interface Indexer extends ModelBase {
   name: string;
+  definitionName: string;
   description: string;
   encoding: string;
   language: string;
@@ -48,7 +50,7 @@ interface Indexer extends ModelBase {
   supportsSearch: boolean;
   supportsRedirect: boolean;
   supportsPagination: boolean;
-  protocol: string;
+  protocol: DownloadProtocol;
   privacy: IndexerPrivacy;
   priority: number;
   fields: IndexerField[];

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

@@ -74,7 +74,7 @@ function IndexerHistoryRow(props: IndexerHistoryRowProps) {
         </div>
       </TableRowCell>
 
-      <RelativeDateCell date={date} />
+      <RelativeDateCell date={date} includeSeconds={true} />
 
       <TableRowCell className={styles.source}>
         {data.source ? data.source : null}
@@ -83,14 +83,15 @@ function IndexerHistoryRow(props: IndexerHistoryRowProps) {
       <TableRowCell className={styles.details}>
         <IconButton
           name={icons.INFO}
-          onPress={onDetailsModalPress}
           title={translate('HistoryDetails')}
+          onPress={onDetailsModalPress}
         />
       </TableRowCell>
 
       <HistoryDetailsModal
         isOpen={isDetailsModalOpen}
         eventType={eventType}
+        date={date}
         data={data}
         indexer={indexer}
         shortDateFormat={shortDateFormat}

frontend/src/Indexer/NoIndexer.css

@@ -1,4 +1,6 @@
 .message {
+  composes: alert from '~Components/Alert.css';
+
   margin-top: 10px;
   margin-bottom: 30px;
   text-align: center;

frontend/src/Indexer/NoIndexer.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Alert from 'Components/Alert';
 import Button from 'Components/Link/Button';
 import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
@@ -14,11 +15,9 @@ function NoIndexer(props: NoIndexerProps) {
 
   if (totalItems > 0) {
     return (
-      <div>
-        <div className={styles.message}>
-          {translate('AllIndexersHiddenDueToFilter')}
-        </div>
-      </div>
+      <Alert kind={kinds.WARNING} className={styles.message}>
+        {translate('AllIndexersHiddenDueToFilter')}
+      </Alert>
     );
   }
 
@@ -29,7 +28,7 @@ function NoIndexer(props: NoIndexerProps) {
       </div>
 
       <div className={styles.buttonContainer}>
-        <Button onPress={onAddIndexerPress} kind={kinds.PRIMARY}>
+        <Button kind={kinds.PRIMARY} onPress={onAddIndexerPress}>
           {translate('AddNewIndexer')}
         </Button>
       </div>

frontend/src/Indexer/Stats/IndexerStats.tsx

@@ -32,136 +32,125 @@ import IndexerStatsFilterModal from './IndexerStatsFilterModal';
 import styles from './IndexerStats.css';
 
 function getAverageResponseTimeData(indexerStats: IndexerStatsIndexer[]) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.indexerName,
-      value: indexer.averageResponseTime,
-    };
-  });
+  const statistics = [...indexerStats].sort((a, b) =>
+    a.averageResponseTime === b.averageResponseTime
+      ? b.averageGrabResponseTime - a.averageGrabResponseTime
+      : b.averageResponseTime - a.averageResponseTime
+  );
 
-  data.sort((a, b) => {
-    return b.value - a.value;
-  });
-
-  return data;
+  return {
+    labels: statistics.map((indexer) => indexer.indexerName),
+    datasets: [
+      {
+        label: translate('AverageQueries'),
+        data: statistics.map((indexer) => indexer.averageResponseTime),
+      },
+      {
+        label: translate('AverageGrabs'),
+        data: statistics.map((indexer) => indexer.averageGrabResponseTime),
+      },
+    ],
+  };
 }
 
 function getFailureRateData(indexerStats: IndexerStatsIndexer[]) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.indexerName,
-      value:
-        (indexer.numberOfFailedQueries +
-          indexer.numberOfFailedRssQueries +
-          indexer.numberOfFailedAuthQueries +
-          indexer.numberOfFailedGrabs) /
-        (indexer.numberOfQueries +
-          indexer.numberOfRssQueries +
-          indexer.numberOfAuthQueries +
-          indexer.numberOfGrabs),
-    };
-  });
+  const data = indexerStats.map((indexer) => ({
+    label: indexer.indexerName,
+    value:
+      (indexer.numberOfFailedQueries +
+        indexer.numberOfFailedRssQueries +
+        indexer.numberOfFailedAuthQueries +
+        indexer.numberOfFailedGrabs) /
+      (indexer.numberOfQueries +
+        indexer.numberOfRssQueries +
+        indexer.numberOfAuthQueries +
+        indexer.numberOfGrabs),
+  }));
 
-  data.sort((a, b) => {
-    return b.value - a.value;
-  });
+  data.sort((a, b) => b.value - a.value);
 
   return data;
 }
 
 function getTotalRequestsData(indexerStats: IndexerStatsIndexer[]) {
-  const data = {
-    labels: indexerStats.map((indexer) => indexer.indexerName),
+  const statistics = [...indexerStats].sort(
+    (a, b) =>
+      b.numberOfQueries +
+      b.numberOfRssQueries +
+      b.numberOfAuthQueries -
+      (a.numberOfQueries + a.numberOfRssQueries + a.numberOfAuthQueries)
+  );
+
+  return {
+    labels: statistics.map((indexer) => indexer.indexerName),
     datasets: [
       {
         label: translate('SearchQueries'),
-        data: indexerStats.map((indexer) => indexer.numberOfQueries),
+        data: statistics.map((indexer) => indexer.numberOfQueries),
       },
       {
         label: translate('RssQueries'),
-        data: indexerStats.map((indexer) => indexer.numberOfRssQueries),
+        data: statistics.map((indexer) => indexer.numberOfRssQueries),
       },
       {
         label: translate('AuthQueries'),
-        data: indexerStats.map((indexer) => indexer.numberOfAuthQueries),
+        data: statistics.map((indexer) => indexer.numberOfAuthQueries),
       },
     ],
   };
-
-  return data;
 }
 
 function getNumberGrabsData(indexerStats: IndexerStatsIndexer[]) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.indexerName,
-      value: indexer.numberOfGrabs - indexer.numberOfFailedGrabs,
-    };
-  });
+  const data = indexerStats.map((indexer) => ({
+    label: indexer.indexerName,
+    value: indexer.numberOfGrabs - indexer.numberOfFailedGrabs,
+  }));
 
-  data.sort((a, b) => {
-    return b.value - a.value;
-  });
+  data.sort((a, b) => b.value - a.value);
 
   return data;
 }
 
 function getUserAgentGrabsData(indexerStats: IndexerStatsUserAgent[]) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.userAgent ? indexer.userAgent : 'Other',
-      value: indexer.numberOfGrabs,
-    };
-  });
+  const data = indexerStats.map((indexer) => ({
+    label: indexer.userAgent ? indexer.userAgent : 'Other',
+    value: indexer.numberOfGrabs,
+  }));
 
-  data.sort((a, b) => {
-    return b.value - a.value;
-  });
+  data.sort((a, b) => b.value - a.value);
 
   return data;
 }
 
 function getUserAgentQueryData(indexerStats: IndexerStatsUserAgent[]) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.userAgent ? indexer.userAgent : 'Other',
-      value: indexer.numberOfQueries,
-    };
-  });
+  const data = indexerStats.map((indexer) => ({
+    label: indexer.userAgent ? indexer.userAgent : 'Other',
+    value: indexer.numberOfQueries,
+  }));
 
-  data.sort((a, b) => {
-    return b.value - a.value;
-  });
+  data.sort((a, b) => b.value - a.value);
 
   return data;
 }
 
 function getHostGrabsData(indexerStats: IndexerStatsHost[]) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.host ? indexer.host : 'Other',
-      value: indexer.numberOfGrabs,
-    };
-  });
+  const data = indexerStats.map((indexer) => ({
+    label: indexer.host ? indexer.host : 'Other',
+    value: indexer.numberOfGrabs,
+  }));
 
-  data.sort((a, b) => {
-    return b.value - a.value;
-  });
+  data.sort((a, b) => b.value - a.value);
 
   return data;
 }
 
 function getHostQueryData(indexerStats: IndexerStatsHost[]) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.host ? indexer.host : 'Other',
-      value: indexer.numberOfQueries,
-    };
-  });
+  const data = indexerStats.map((indexer) => ({
+    label: indexer.host ? indexer.host : 'Other',
+    value: indexer.numberOfQueries,
+  }));
 
-  data.sort((a, b) => {
-    return b.value - a.value;
-  });
+  data.sort((a, b) => b.value - a.value);
 
   return data;
 }
@@ -241,9 +230,9 @@ function IndexerStats() {
             selectedFilterKey={selectedFilterKey}
             filters={filters}
             customFilters={customFilters}
-            onFilterSelect={onFilterSelect}
             filterModalConnectorComponent={IndexerStatsFilterModal}
             isDisabled={false}
+            onFilterSelect={onFilterSelect}
           />
         </PageToolbarSection>
       </PageToolbar>
@@ -294,7 +283,7 @@ function IndexerStats() {
             </div>
             <div className={styles.fullWidthChart}>
               <div className={styles.chartContainer}>
-                <BarChart
+                <StackedBarChart
                   data={getAverageResponseTimeData(item.indexers)}
                   title={translate('AverageResponseTimesMs')}
                   stepSize={100}

frontend/src/Search/Mobile/SearchIndexOverview.tsx

@@ -231,7 +231,9 @@ function SearchIndexOverview(props: SearchIndexOverviewProps) {
 
               {indexerFlags.length
                 ? indexerFlags
-                    .sort((a, b) => a.localeCompare(b))
+                    .sort((a, b) =>
+                      a.localeCompare(b, undefined, { numeric: true })
+                    )
                     .map((flag, index) => {
                       return (
                         <Label key={index} kind={kinds.INFO}>

frontend/src/Search/NoSearchResults.css

@@ -1,4 +1,6 @@
 .message {
+  composes: alert from '~Components/Alert.css';
+
   margin-top: 10px;
   margin-bottom: 30px;
   text-align: center;

frontend/src/Search/NoSearchResults.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import Alert from 'Components/Alert';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './NoSearchResults.css';
 
@@ -11,18 +13,16 @@ function NoSearchResults(props: NoSearchResultsProps) {
 
   if (totalItems > 0) {
     return (
-      <div>
-        <div className={styles.message}>
-          {translate('AllIndexersHiddenDueToFilter')}
-        </div>
-      </div>
+      <Alert kind={kinds.WARNING} className={styles.message}>
+        {translate('AllSearchResultsHiddenByFilter')}
+      </Alert>
     );
   }
 
   return (
-    <div>
-      <div className={styles.message}>{translate('NoSearchResultsFound')}</div>
-    </div>
+    <Alert kind={kinds.INFO} className={styles.message}>
+      {translate('NoSearchResultsFound')}
+    </Alert>
   );
 }
 

frontend/src/Search/OverrideMatch/DownloadClient/SelectDownloadClientModal.tsx

@@ -17,7 +17,7 @@ function SelectDownloadClientModal(props: SelectDownloadClientModalProps) {
     props;
 
   return (
-    <Modal isOpen={isOpen} onModalClose={onModalClose} size={sizes.MEDIUM}>
+    <Modal isOpen={isOpen} size={sizes.MEDIUM} onModalClose={onModalClose}>
       <SelectDownloadClientModalContent
         protocol={protocol}
         modalTitle={modalTitle}

frontend/src/Search/SearchIndex.js

@@ -282,7 +282,7 @@ class SearchIndex extends Component {
 
     const ViewComponent = getViewComponent(isSmallScreen);
     const isLoaded = !!(!error && isPopulated && items.length && this.scrollerRef.current);
-    const hasNoIndexer = !totalItems;
+    const hasNoSearchResults = !totalItems;
 
     return (
       <PageContent title={translate('Search')}>
@@ -306,7 +306,7 @@ class SearchIndex extends Component {
             <SearchIndexSortMenu
               sortKey={sortKey}
               sortDirection={sortDirection}
-              isDisabled={hasNoIndexer}
+              isDisabled={hasNoSearchResults}
               onSortSelect={onSortSelect}
             />
 
@@ -314,7 +314,7 @@ class SearchIndex extends Component {
               selectedFilterKey={selectedFilterKey}
               filters={filters}
               customFilters={customFilters}
-              isDisabled={hasNoIndexer}
+              isDisabled={hasNoSearchResults}
               onFilterSelect={onFilterSelect}
             />
           </PageToolbarSection>

frontend/src/Search/Table/SearchIndexRow.tsx

@@ -184,9 +184,9 @@ function SearchIndexRow(props: SearchIndexRowProps) {
         if (name === 'select') {
           return (
             <VirtualTableSelectCell
+              key={name}
               inputClassName={styles.checkInput}
               id={guid}
-              key={name}
               isSelected={isSelected}
               isDisabled={false}
               onSelectedChange={onSelectedChange}

frontend/src/Settings/Applications/ApplicationSettings.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import AppState from 'App/State/AppState';
 import { APP_INDEXER_SYNC } from 'Commands/commandNames';
@@ -56,7 +56,7 @@ function ApplicationSettings() {
         // @ts-ignore
         showSave={false}
         additionalButtons={
-          <Fragment>
+          <>
             <PageToolbarSeparator />
 
             <PageToolbarButton
@@ -78,7 +78,7 @@ function ApplicationSettings() {
               iconName={icons.MANAGE}
               onPress={onManageApplicationsPress}
             />
-          </Fragment>
+          </>
         }
       />
 

frontend/src/Settings/Applications/Applications/ApplicationsConnector.js

@@ -5,12 +5,12 @@ import { createSelector } from 'reselect';
 import { deleteApplication, fetchApplications } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Applications from './Applications';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.applications', sortByName),
+    createSortedSectionSelector('settings.applications', sortByProp('name')),
     createTagsSelector(),
     (applications, tagList) => {
       return {

frontend/src/Settings/Applications/Applications/Manage/ManageApplicationsModalContent.tsx

@@ -213,9 +213,9 @@ function ManageApplicationsModalContent(
             selectAll={true}
             allSelected={allSelected}
             allUnselected={allUnselected}
-            onSelectAllChange={onSelectAllChange}
             sortKey={sortKey}
             sortDirection={sortDirection}
+            onSelectAllChange={onSelectAllChange}
             onSortPress={onSortPress}
           >
             <TableBody>
@@ -268,9 +268,9 @@ function ManageApplicationsModalContent(
 
       <ManageApplicationsEditModal
         isOpen={isEditModalOpen}
+        applicationIds={selectedIds}
         onModalClose={onEditModalClose}
         onSavePress={onSavePress}
-        applicationIds={selectedIds}
       />
 
       <TagsModal

frontend/src/Settings/DownloadClients/DownloadClients/DownloadClientsConnector.js

@@ -4,12 +4,12 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { deleteDownloadClient, fetchDownloadClients } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import DownloadClients from './DownloadClients';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.downloadClients', sortByName),
+    createSortedSectionSelector('settings.downloadClients', sortByProp('name')),
     (downloadClients) => downloadClients
   );
 }

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

@@ -186,9 +186,9 @@ function ManageDownloadClientsModalContent(
             selectAll={true}
             allSelected={allSelected}
             allUnselected={allUnselected}
-            onSelectAllChange={onSelectAllChange}
             sortKey={sortKey}
             sortDirection={sortDirection}
+            onSelectAllChange={onSelectAllChange}
             onSortPress={onSortPress}
           >
             <TableBody>
@@ -233,9 +233,9 @@ function ManageDownloadClientsModalContent(
 
       <ManageDownloadClientsEditModal
         isOpen={isEditModalOpen}
+        downloadClientIds={selectedIds}
         onModalClose={onEditModalClose}
         onSavePress={onSavePress}
-        downloadClientIds={selectedIds}
       />
 
       <ConfirmModal

frontend/src/Settings/General/UpdateSettings.js

@@ -12,7 +12,6 @@ function UpdateSettings(props) {
   const {
     advancedSettings,
     settings,
-    isWindows,
     packageUpdateMechanism,
     onInputChange
   } = props;
@@ -38,10 +37,10 @@ function UpdateSettings(props) {
       value: titleCase(packageUpdateMechanism)
     });
   } else {
-    updateOptions.push({ key: 'builtIn', value: 'Built-In' });
+    updateOptions.push({ key: 'builtIn', value: translate('BuiltIn') });
   }
 
-  updateOptions.push({ key: 'script', value: 'Script' });
+  updateOptions.push({ key: 'script', value: translate('Script') });
 
   return (
     <FieldSet legend={translate('Updates')}>
@@ -62,61 +61,58 @@ function UpdateSettings(props) {
         />
       </FormGroup>
 
-      {
-        !isWindows &&
-          <div>
-            <FormGroup
-              advancedSettings={advancedSettings}
-              isAdvanced={true}
-              size={sizes.MEDIUM}
-            >
-              <FormLabel>{translate('Automatic')}</FormLabel>
+      <div>
+        <FormGroup
+          advancedSettings={advancedSettings}
+          isAdvanced={true}
+          size={sizes.MEDIUM}
+        >
+          <FormLabel>{translate('Automatic')}</FormLabel>
 
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="updateAutomatically"
-                helpText={translate('UpdateAutomaticallyHelpText')}
-                onChange={onInputChange}
-                {...updateAutomatically}
-              />
-            </FormGroup>
+          <FormInputGroup
+            type={inputTypes.CHECK}
+            name="updateAutomatically"
+            helpText={translate('UpdateAutomaticallyHelpText')}
+            onChange={onInputChange}
+            {...updateAutomatically}
+          />
+        </FormGroup>
 
+        <FormGroup
+          advancedSettings={advancedSettings}
+          isAdvanced={true}
+        >
+          <FormLabel>{translate('Mechanism')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="updateMechanism"
+            values={updateOptions}
+            helpText={translate('UpdateMechanismHelpText')}
+            helpLink="https://wiki.servarr.com/prowlarr/settings#updates"
+            onChange={onInputChange}
+            {...updateMechanism}
+          />
+        </FormGroup>
+
+        {
+          updateMechanism.value === 'script' &&
             <FormGroup
               advancedSettings={advancedSettings}
               isAdvanced={true}
             >
-              <FormLabel>{translate('Mechanism')}</FormLabel>
+              <FormLabel>{translate('ScriptPath')}</FormLabel>
 
               <FormInputGroup
-                type={inputTypes.SELECT}
-                name="updateMechanism"
-                values={updateOptions}
-                helpText={translate('UpdateMechanismHelpText')}
-                helpLink="https://wiki.servarr.com/prowlarr/settings#updates"
+                type={inputTypes.TEXT}
+                name="updateScriptPath"
+                helpText={translate('UpdateScriptPathHelpText')}
                 onChange={onInputChange}
-                {...updateMechanism}
+                {...updateScriptPath}
               />
             </FormGroup>
-
-            {
-              updateMechanism.value === 'script' &&
-                <FormGroup
-                  advancedSettings={advancedSettings}
-                  isAdvanced={true}
-                >
-                  <FormLabel>{translate('ScriptPath')}</FormLabel>
-
-                  <FormInputGroup
-                    type={inputTypes.TEXT}
-                    name="updateScriptPath"
-                    helpText={translate('UpdateScriptPathHelpText')}
-                    onChange={onInputChange}
-                    {...updateScriptPath}
-                  />
-                </FormGroup>
-            }
-          </div>
-      }
+        }
+      </div>
     </FieldSet>
   );
 }

frontend/src/Settings/Indexers/IndexerProxies/IndexerProxiesConnector.js

@@ -5,13 +5,13 @@ import { createSelector } from 'reselect';
 import { deleteIndexerProxy, fetchIndexerProxies } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import IndexerProxies from './IndexerProxies';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.indexerProxies', sortByName),
-    createSortedSectionSelector('indexers', sortByName),
+    createSortedSectionSelector('settings.indexerProxies', sortByProp('name')),
+    createSortedSectionSelector('indexers', sortByProp('name')),
     createTagsSelector(),
     (indexerProxies, indexers, tagList) => {
       return {

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

@@ -5,12 +5,12 @@ import { createSelector } from 'reselect';
 import { deleteNotification, fetchNotifications } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Notifications from './Notifications';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.notifications', sortByName),
+    createSortedSectionSelector('settings.notifications', sortByProp('name')),
     createTagsSelector(),
     (notifications, tagList) => {
       return {

frontend/src/Settings/Profiles/App/AppProfilesConnector.js

@@ -4,12 +4,12 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { cloneAppProfile, deleteAppProfile, fetchAppProfiles } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import AppProfiles from './AppProfiles';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.appProfiles', sortByName),
+    createSortedSectionSelector('settings.appProfiles', sortByProp('name')),
     (appProfiles) => appProfiles
   );
 }

frontend/src/Store/Actions/indexerActions.js

@@ -3,9 +3,13 @@ import { createAction } from 'redux-actions';
 import { filterTypePredicates, sortDirections } from 'Helpers/Props';
 import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
 import createRemoveItemHandler from 'Store/Actions/Creators/createRemoveItemHandler';
-import createSaveProviderHandler, { createCancelSaveProviderHandler } from 'Store/Actions/Creators/createSaveProviderHandler';
+import createSaveProviderHandler, {
+  createCancelSaveProviderHandler
+} from 'Store/Actions/Creators/createSaveProviderHandler';
 import createTestAllProvidersHandler from 'Store/Actions/Creators/createTestAllProvidersHandler';
-import createTestProviderHandler, { createCancelTestProviderHandler } from 'Store/Actions/Creators/createTestProviderHandler';
+import createTestProviderHandler, {
+  createCancelTestProviderHandler
+} from 'Store/Actions/Creators/createTestProviderHandler';
 import createSetProviderFieldValueReducer from 'Store/Actions/Creators/Reducers/createSetProviderFieldValueReducer';
 import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
 import { createThunk, handleThunks } from 'Store/thunks';
@@ -16,6 +20,7 @@ import translate from 'Utilities/String/translate';
 import createBulkEditItemHandler from './Creators/createBulkEditItemHandler';
 import createBulkRemoveItemHandler from './Creators/createBulkRemoveItemHandler';
 import createHandleActions from './Creators/createHandleActions';
+import createClearReducer from './Creators/Reducers/createClearReducer';
 import createSetClientSideCollectionSortReducer from './Creators/Reducers/createSetClientSideCollectionSortReducer';
 
 //
@@ -96,10 +101,7 @@ export const filterPredicates = {
 
 export const sortPredicates = {
   vipExpiration: function(item) {
-    const vipExpiration =
-    item.fields.find((field) => field.name === 'vipExpiration')?.value ?? '';
-
-    return vipExpiration;
+    return item.fields.find((field) => field.name === 'vipExpiration')?.value ?? '';
   }
 };
 
@@ -110,6 +112,7 @@ export const FETCH_INDEXERS = 'indexers/fetchIndexers';
 export const FETCH_INDEXER_SCHEMA = 'indexers/fetchIndexerSchema';
 export const SELECT_INDEXER_SCHEMA = 'indexers/selectIndexerSchema';
 export const SET_INDEXER_SCHEMA_SORT = 'indexers/setIndexerSchemaSort';
+export const CLEAR_INDEXER_SCHEMA = 'indexers/clearIndexerSchema';
 export const CLONE_INDEXER = 'indexers/cloneIndexer';
 export const SET_INDEXER_VALUE = 'indexers/setIndexerValue';
 export const SET_INDEXER_FIELD_VALUE = 'indexers/setIndexerFieldValue';
@@ -129,6 +132,7 @@ export const fetchIndexers = createThunk(FETCH_INDEXERS);
 export const fetchIndexerSchema = createThunk(FETCH_INDEXER_SCHEMA);
 export const selectIndexerSchema = createAction(SELECT_INDEXER_SCHEMA);
 export const setIndexerSchemaSort = createAction(SET_INDEXER_SCHEMA_SORT);
+export const clearIndexerSchema = createAction(CLEAR_INDEXER_SCHEMA);
 export const cloneIndexer = createAction(CLONE_INDEXER);
 
 export const saveIndexer = createThunk(SAVE_INDEXER);
@@ -214,6 +218,8 @@ export const reducers = createHandleActions({
     });
   },
 
+  [CLEAR_INDEXER_SCHEMA]: createClearReducer(schemaSection, defaultState),
+
   [CLONE_INDEXER]: function(state, { payload }) {
     const id = payload.id;
     const newState = getSectionState(state, section);

frontend/src/Store/Selectors/createEnabledDownloadClientsSelector.ts

@@ -2,13 +2,17 @@ import { createSelector } from 'reselect';
 import { DownloadClientAppState } from 'App/State/SettingsAppState';
 import DownloadProtocol from 'DownloadClient/DownloadProtocol';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import DownloadClient from 'typings/DownloadClient';
+import sortByProp from 'Utilities/Array/sortByProp';
 
 export default function createEnabledDownloadClientsSelector(
   protocol: DownloadProtocol
 ) {
   return createSelector(
-    createSortedSectionSelector('settings.downloadClients', sortByName),
+    createSortedSectionSelector<DownloadClient>(
+      'settings.downloadClients',
+      sortByProp('name')
+    ),
     (downloadClients: DownloadClientAppState) => {
       const { isFetching, isPopulated, error, items } = downloadClients;
 

frontend/src/Store/Selectors/createSortedSectionSelector.ts

@@ -1,14 +1,18 @@
 import { createSelector } from 'reselect';
 import getSectionState from 'Utilities/State/getSectionState';
 
-function createSortedSectionSelector(section, comparer) {
+function createSortedSectionSelector<T>(
+  section: string,
+  comparer: (a: T, b: T) => number
+) {
   return createSelector(
     (state) => state,
     (state) => {
       const sectionState = getSectionState(state, section, true);
+
       return {
         ...sectionState,
-        items: [...sectionState.items].sort(comparer)
+        items: [...sectionState.items].sort(comparer),
       };
     }
   );

frontend/src/System/Status/About/About.js

@@ -1,128 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import DescriptionList from 'Components/DescriptionList/DescriptionList';
-import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
-import FieldSet from 'Components/FieldSet';
-import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
-import titleCase from 'Utilities/String/titleCase';
-import translate from 'Utilities/String/translate';
-import StartTime from './StartTime';
-import styles from './About.css';
-
-class About extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      version,
-      packageVersion,
-      packageAuthor,
-      isNetCore,
-      isDocker,
-      runtimeVersion,
-      databaseVersion,
-      databaseType,
-      migrationVersion,
-      appData,
-      startupPath,
-      mode,
-      startTime,
-      timeFormat,
-      longDateFormat
-    } = this.props;
-
-    return (
-      <FieldSet legend={translate('About')}>
-        <DescriptionList className={styles.descriptionList}>
-          <DescriptionListItem
-            title={translate('Version')}
-            data={version}
-          />
-
-          {
-            packageVersion &&
-              <DescriptionListItem
-                title={translate('PackageVersion')}
-                data={(packageAuthor ? <span> {packageVersion} {' by '} <InlineMarkdown data={packageAuthor} /> </span> : packageVersion)}
-              />
-          }
-
-          {
-            isNetCore &&
-              <DescriptionListItem
-                title={translate('NetCore')}
-                data={`Yes (${runtimeVersion})`}
-              />
-          }
-
-          {
-            isDocker &&
-              <DescriptionListItem
-                title={translate('Docker')}
-                data={'Yes'}
-              />
-          }
-
-          <DescriptionListItem
-            title={translate('Database')}
-            data={`${titleCase(databaseType)} ${databaseVersion}`}
-          />
-
-          <DescriptionListItem
-            title={translate('DatabaseMigration')}
-            data={migrationVersion}
-          />
-
-          <DescriptionListItem
-            title={translate('AppDataDirectory')}
-            data={appData}
-          />
-
-          <DescriptionListItem
-            title={translate('StartupDirectory')}
-            data={startupPath}
-          />
-
-          <DescriptionListItem
-            title={translate('Mode')}
-            data={titleCase(mode)}
-          />
-
-          <DescriptionListItem
-            title={translate('Uptime')}
-            data={
-              <StartTime
-                startTime={startTime}
-                timeFormat={timeFormat}
-                longDateFormat={longDateFormat}
-              />
-            }
-          />
-        </DescriptionList>
-      </FieldSet>
-    );
-  }
-
-}
-
-About.propTypes = {
-  version: PropTypes.string.isRequired,
-  packageVersion: PropTypes.string,
-  packageAuthor: PropTypes.string,
-  isNetCore: PropTypes.bool.isRequired,
-  runtimeVersion: PropTypes.string.isRequired,
-  isDocker: PropTypes.bool.isRequired,
-  databaseType: PropTypes.string.isRequired,
-  databaseVersion: PropTypes.string.isRequired,
-  migrationVersion: PropTypes.number.isRequired,
-  appData: PropTypes.string.isRequired,
-  startupPath: PropTypes.string.isRequired,
-  mode: PropTypes.string.isRequired,
-  startTime: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired
-};
-
-export default About;

frontend/src/System/Status/About/About.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import FieldSet from 'Components/FieldSet';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import { fetchStatus } from 'Store/Actions/systemActions';
+import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
+import StartTime from './StartTime';
+import styles from './About.css';
+
+function About() {
+  const dispatch = useDispatch();
+  const { item } = useSelector((state: AppState) => state.system.status);
+
+  const {
+    version,
+    packageVersion,
+    packageAuthor,
+    isNetCore,
+    isDocker,
+    runtimeVersion,
+    databaseVersion,
+    databaseType,
+    migrationVersion,
+    appData,
+    startupPath,
+    mode,
+    startTime,
+  } = item;
+
+  useEffect(() => {
+    dispatch(fetchStatus());
+  }, [dispatch]);
+
+  return (
+    <FieldSet legend={translate('About')}>
+      <DescriptionList className={styles.descriptionList}>
+        <DescriptionListItem title={translate('Version')} data={version} />
+
+        {packageVersion && (
+          <DescriptionListItem
+            title={translate('PackageVersion')}
+            data={
+              packageAuthor ? (
+                <InlineMarkdown
+                  data={translate('PackageVersionInfo', {
+                    packageVersion,
+                    packageAuthor,
+                  })}
+                />
+              ) : (
+                packageVersion
+              )
+            }
+          />
+        )}
+
+        {isNetCore ? (
+          <DescriptionListItem
+            title={translate('NetCore')}
+            data={`Yes (${runtimeVersion})`}
+          />
+        ) : null}
+
+        {isDocker ? (
+          <DescriptionListItem title={translate('Docker')} data="Yes" />
+        ) : null}
+
+        <DescriptionListItem
+          title={translate('Database')}
+          data={`${titleCase(databaseType)} ${databaseVersion}`}
+        />
+
+        <DescriptionListItem
+          title={translate('DatabaseMigration')}
+          data={migrationVersion}
+        />
+
+        <DescriptionListItem
+          title={translate('AppDataDirectory')}
+          data={appData}
+        />
+
+        <DescriptionListItem
+          title={translate('StartupDirectory')}
+          data={startupPath}
+        />
+
+        <DescriptionListItem title={translate('Mode')} data={titleCase(mode)} />
+
+        <DescriptionListItem
+          title={translate('Uptime')}
+          data={<StartTime startTime={startTime} />}
+        />
+      </DescriptionList>
+    </FieldSet>
+  );
+}
+
+export default About;

frontend/src/System/Status/About/AboutConnector.js

@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchStatus } from 'Store/Actions/systemActions';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import About from './About';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.system.status,
-    createUISettingsSelector(),
-    (status, uiSettings) => {
-      return {
-        ...status.item,
-        timeFormat: uiSettings.timeFormat,
-        longDateFormat: uiSettings.longDateFormat
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  fetchStatus
-};
-
-class AboutConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.fetchStatus();
-  }
-
-  //
-  // Render
-
-  render() {
-    return (
-      <About
-        {...this.props}
-      />
-    );
-  }
-}
-
-AboutConnector.propTypes = {
-  fetchStatus: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(AboutConnector);

frontend/src/System/Status/About/StartTime.js

@@ -1,93 +0,0 @@
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import formatDateTime from 'Utilities/Date/formatDateTime';
-import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
-
-function getUptime(startTime) {
-  return formatTimeSpan(moment().diff(startTime));
-}
-
-class StartTime extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    const {
-      startTime,
-      timeFormat,
-      longDateFormat
-    } = props;
-
-    this._timeoutId = null;
-
-    this.state = {
-      uptime: getUptime(startTime),
-      startTime: formatDateTime(startTime, longDateFormat, timeFormat, { includeSeconds: true })
-    };
-  }
-
-  componentDidMount() {
-    this._timeoutId = setTimeout(this.onTimeout, 1000);
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      startTime,
-      timeFormat,
-      longDateFormat
-    } = this.props;
-
-    if (
-      startTime !== prevProps.startTime ||
-      timeFormat !== prevProps.timeFormat ||
-      longDateFormat !== prevProps.longDateFormat
-    ) {
-      this.setState({
-        uptime: getUptime(startTime),
-        startTime: formatDateTime(startTime, longDateFormat, timeFormat, { includeSeconds: true })
-      });
-    }
-  }
-
-  componentWillUnmount() {
-    if (this._timeoutId) {
-      this._timeoutId = clearTimeout(this._timeoutId);
-    }
-  }
-
-  //
-  // Listeners
-
-  onTimeout = () => {
-    this.setState({ uptime: getUptime(this.props.startTime) });
-    this._timeoutId = setTimeout(this.onTimeout, 1000);
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      uptime,
-      startTime
-    } = this.state;
-
-    return (
-      <span title={startTime}>
-        {uptime}
-      </span>
-    );
-  }
-}
-
-StartTime.propTypes = {
-  startTime: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired
-};
-
-export default StartTime;

frontend/src/System/Status/About/StartTime.tsx

@@ -0,0 +1,44 @@
+import moment from 'moment';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+
+interface StartTimeProps {
+  startTime: string;
+}
+
+function StartTime(props: StartTimeProps) {
+  const { startTime } = props;
+  const { timeFormat, longDateFormat } = useSelector(
+    createUISettingsSelector()
+  );
+  const [time, setTime] = useState(Date.now());
+
+  const { formattedStartTime, uptime } = useMemo(() => {
+    return {
+      uptime: formatTimeSpan(moment(time).diff(startTime)),
+      formattedStartTime: formatDateTime(
+        startTime,
+        longDateFormat,
+        timeFormat,
+        {
+          includeSeconds: true,
+        }
+      ),
+    };
+  }, [startTime, time, longDateFormat, timeFormat]);
+
+  useEffect(() => {
+    const interval = setInterval(() => setTime(Date.now()), 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [setTime]);
+
+  return <span title={formattedStartTime}>{uptime}</span>;
+}
+
+export default StartTime;

frontend/src/System/Status/Donations/Donations.js

@@ -1,64 +0,0 @@
-import React, { Component } from 'react';
-import FieldSet from 'Components/FieldSet';
-import Link from 'Components/Link/Link';
-import translate from 'Utilities/String/translate';
-import styles from '../styles.css';
-
-class Donations extends Component {
-
-  //
-  // Render
-
-  render() {
-    return (
-      <FieldSet legend={translate('Donations')}>
-        <div className={styles.logoContainer} title="Radarr">
-          <Link to="https://radarr.video/donate">
-            <img
-              className={styles.logo}
-              src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-radarr.png`}
-            />
-          </Link>
-        </div>
-        <div className={styles.logoContainer} title="Lidarr">
-          <Link to="https://lidarr.audio/donate">
-            <img
-              className={styles.logo}
-              src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-lidarr.png`}
-            />
-          </Link>
-        </div>
-        <div className={styles.logoContainer} title="Readarr">
-          <Link to="https://readarr.com/donate">
-            <img
-              className={styles.logo}
-              src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-readarr.png`}
-            />
-          </Link>
-        </div>
-        <div className={styles.logoContainer} title="Prowlarr">
-          <Link to="https://prowlarr.com/donate">
-            <img
-              className={styles.logo}
-              src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-prowlarr.png`}
-            />
-          </Link>
-        </div>
-        <div className={styles.logoContainer} title="Sonarr">
-          <Link to="https://opencollective.com/sonarr">
-            <img
-              className={styles.logo}
-              src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-sonarr.png`}
-            />
-          </Link>
-        </div>
-      </FieldSet>
-    );
-  }
-}
-
-Donations.propTypes = {
-
-};
-
-export default Donations;

frontend/src/System/Status/Donations/Donations.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import FieldSet from 'Components/FieldSet';
+import Link from 'Components/Link/Link';
+import translate from 'Utilities/String/translate';
+import styles from '../styles.css';
+
+function Donations() {
+  return (
+    <FieldSet legend={translate('Donations')}>
+      <div className={styles.logoContainer} title="Radarr">
+        <Link to="https://radarr.video/donate">
+          <img
+            className={styles.logo}
+            src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-radarr.png`}
+          />
+        </Link>
+      </div>
+
+      <div className={styles.logoContainer} title="Lidarr">
+        <Link to="https://lidarr.audio/donate">
+          <img
+            className={styles.logo}
+            src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-lidarr.png`}
+          />
+        </Link>
+      </div>
+
+      <div className={styles.logoContainer} title="Readarr">
+        <Link to="https://readarr.com/donate">
+          <img
+            className={styles.logo}
+            src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-readarr.png`}
+          />
+        </Link>
+      </div>
+
+      <div className={styles.logoContainer} title="Prowlarr">
+        <Link to="https://prowlarr.com/donate">
+          <img
+            className={styles.logo}
+            src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-prowlarr.png`}
+          />
+        </Link>
+      </div>
+
+      <div className={styles.logoContainer} title="Sonarr">
+        <Link to="https://opencollective.com/sonarr">
+          <img
+            className={styles.logo}
+            src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-sonarr.png`}
+          />
+        </Link>
+      </div>
+    </FieldSet>
+  );
+}
+
+export default Donations;

frontend/src/System/Status/Health/Health.js

@@ -1,250 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import FieldSet from 'Components/FieldSet';
-import Icon from 'Components/Icon';
-import IconButton from 'Components/Link/IconButton';
-import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import TableRow from 'Components/Table/TableRow';
-import { icons, kinds } from 'Helpers/Props';
-import titleCase from 'Utilities/String/titleCase';
-import translate from 'Utilities/String/translate';
-import styles from './Health.css';
-
-function getInternalLink(source) {
-  switch (source) {
-    case 'ApplicationStatusCheck':
-    case 'ApplicationLongTermStatusCheck':
-      return (
-        <IconButton
-          name={icons.SETTINGS}
-          title={translate('Settings')}
-          to="/settings/applications"
-        />
-      );
-    case 'DownloadClientStatusCheck':
-      return (
-        <IconButton
-          name={icons.SETTINGS}
-          title={translate('Settings')}
-          to="/settings/downloadclients"
-        />
-      );
-    case 'NotificationStatusCheck':
-      return (
-        <IconButton
-          name={icons.SETTINGS}
-          title={translate('Settings')}
-          to="/settings/connect"
-        />
-      );
-    case 'IndexerProxyStatusCheck':
-      return (
-        <IconButton
-          name={icons.SETTINGS}
-          title={translate('Settings')}
-          to="/settings/indexers"
-        />
-      );
-    case 'IndexerRssCheck':
-    case 'IndexerSearchCheck':
-    case 'IndexerStatusCheck':
-    case 'IndexerLongTermStatusCheck':
-      return (
-        <IconButton
-          name={icons.SETTINGS}
-          title={translate('Settings')}
-          to="/"
-        />
-      );
-    case 'UpdateCheck':
-      return (
-        <IconButton
-          name={icons.UPDATE}
-          title={translate('Updates')}
-          to="/system/updates"
-        />
-      );
-    default:
-      return;
-  }
-}
-
-function getTestLink(source, props) {
-  switch (source) {
-    case 'ApplicationStatusCheck':
-    case 'ApplicationLongTermStatusCheck':
-      return (
-        <SpinnerIconButton
-          name={icons.TEST}
-          title={translate('TestAll')}
-          isSpinning={props.isTestingAllApplications}
-          onPress={props.dispatchTestAllApplications}
-        />
-      );
-    case 'DownloadClientStatusCheck':
-      return (
-        <SpinnerIconButton
-          name={icons.TEST}
-          title={translate('TestAll')}
-          isSpinning={props.isTestingAllDownloadClients}
-          onPress={props.dispatchTestAllDownloadClients}
-        />
-      );
-    case 'IndexerStatusCheck':
-    case 'IndexerLongTermStatusCheck':
-      return (
-        <SpinnerIconButton
-          name={icons.TEST}
-          title={translate('TestAll')}
-          isSpinning={props.isTestingAllIndexers}
-          onPress={props.dispatchTestAllIndexers}
-        />
-      );
-    default:
-      break;
-  }
-}
-
-const columns = [
-  {
-    className: styles.status,
-    name: 'type',
-    isVisible: true
-  },
-  {
-    name: 'message',
-    label: () => translate('Message'),
-    isVisible: true
-  },
-  {
-    name: 'actions',
-    label: () => translate('Actions'),
-    isVisible: true
-  }
-];
-
-class Health extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      isFetching,
-      isPopulated,
-      items
-    } = this.props;
-
-    const healthIssues = !!items.length;
-
-    return (
-      <FieldSet
-        legend={
-          <div className={styles.legend}>
-            {translate('Health')}
-
-            {
-              isFetching && isPopulated &&
-                <LoadingIndicator
-                  className={styles.loading}
-                  size={20}
-                />
-            }
-          </div>
-        }
-      >
-        {
-          isFetching && !isPopulated &&
-            <LoadingIndicator />
-        }
-
-        {
-          !healthIssues &&
-            <div className={styles.healthOk}>
-              {translate('HealthNoIssues')}
-            </div>
-        }
-
-        {
-          healthIssues &&
-            <Table
-              columns={columns}
-            >
-              <TableBody>
-                {
-                  items.map((item) => {
-                    const internalLink = getInternalLink(item.source);
-                    const testLink = getTestLink(item.source, this.props);
-
-                    let kind = kinds.WARNING;
-                    switch (item.type.toLowerCase()) {
-                      case 'error':
-                        kind = kinds.DANGER;
-                        break;
-                      default:
-                      case 'warning':
-                        kind = kinds.WARNING;
-                        break;
-                      case 'notice':
-                        kind = kinds.INFO;
-                        break;
-                    }
-
-                    return (
-                      <TableRow key={`health${item.message}`}>
-                        <TableRowCell>
-                          <Icon
-                            name={icons.DANGER}
-                            kind={kind}
-                            title={titleCase(item.type)}
-                          />
-                        </TableRowCell>
-
-                        <TableRowCell>{item.message}</TableRowCell>
-
-                        <TableRowCell className={styles.actions}>
-                          <IconButton
-                            name={icons.WIKI}
-                            to={item.wikiUrl}
-                            title={translate('ReadTheWikiForMoreInformation')}
-                          />
-
-                          {
-                            internalLink
-                          }
-
-                          {
-                            !!testLink &&
-                              testLink
-                          }
-                        </TableRowCell>
-                      </TableRow>
-                    );
-                  })
-                }
-              </TableBody>
-            </Table>
-        }
-      </FieldSet>
-    );
-  }
-
-}
-
-Health.propTypes = {
-  isFetching: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  items: PropTypes.array.isRequired,
-  isTestingAllApplications: PropTypes.bool.isRequired,
-  isTestingAllDownloadClients: PropTypes.bool.isRequired,
-  isTestingAllIndexers: PropTypes.bool.isRequired,
-  dispatchTestAllApplications: PropTypes.func.isRequired,
-  dispatchTestAllDownloadClients: PropTypes.func.isRequired,
-  dispatchTestAllIndexers: PropTypes.func.isRequired
-};
-
-export default Health;

frontend/src/System/Status/Health/Health.tsx

@@ -0,0 +1,191 @@
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import Alert from 'Components/Alert';
+import FieldSet from 'Components/FieldSet';
+import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import Column from 'Components/Table/Column';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TableRow from 'Components/Table/TableRow';
+import { icons, kinds } from 'Helpers/Props';
+import { testAllIndexers } from 'Store/Actions/indexerActions';
+import {
+  testAllApplications,
+  testAllDownloadClients,
+} from 'Store/Actions/settingsActions';
+import { fetchHealth } from 'Store/Actions/systemActions';
+import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
+import createHealthSelector from './createHealthSelector';
+import HealthItemLink from './HealthItemLink';
+import styles from './Health.css';
+
+const columns: Column[] = [
+  {
+    className: styles.status,
+    name: 'type',
+    label: '',
+    isVisible: true,
+  },
+  {
+    name: 'message',
+    label: () => translate('Message'),
+    isVisible: true,
+  },
+  {
+    name: 'actions',
+    label: () => translate('Actions'),
+    isVisible: true,
+  },
+];
+
+function Health() {
+  const dispatch = useDispatch();
+  const { isFetching, isPopulated, items } = useSelector(
+    createHealthSelector()
+  );
+  const isTestingAllApplications = useSelector(
+    (state: AppState) => state.settings.applications.isTestingAll
+  );
+  const isTestingAllDownloadClients = useSelector(
+    (state: AppState) => state.settings.downloadClients.isTestingAll
+  );
+  const isTestingAllIndexers = useSelector(
+    (state: AppState) => state.indexers.isTestingAll
+  );
+
+  const healthIssues = !!items.length;
+
+  const handleTestAllApplicationsPress = useCallback(() => {
+    dispatch(testAllApplications());
+  }, [dispatch]);
+
+  const handleTestAllDownloadClientsPress = useCallback(() => {
+    dispatch(testAllDownloadClients());
+  }, [dispatch]);
+
+  const handleTestAllIndexersPress = useCallback(() => {
+    dispatch(testAllIndexers());
+  }, [dispatch]);
+
+  useEffect(() => {
+    dispatch(fetchHealth());
+  }, [dispatch]);
+
+  return (
+    <FieldSet
+      legend={
+        <div className={styles.legend}>
+          {translate('Health')}
+
+          {isFetching && isPopulated ? (
+            <LoadingIndicator className={styles.loading} size={20} />
+          ) : null}
+        </div>
+      }
+    >
+      {isFetching && !isPopulated ? <LoadingIndicator /> : null}
+
+      {isPopulated && !healthIssues ? (
+        <div className={styles.healthOk}>
+          {translate('NoIssuesWithYourConfiguration')}
+        </div>
+      ) : null}
+
+      {healthIssues ? (
+        <>
+          <Table columns={columns}>
+            <TableBody>
+              {items.map((item) => {
+                const source = item.source;
+
+                let kind = kinds.WARNING;
+                switch (item.type.toLowerCase()) {
+                  case 'error':
+                    kind = kinds.DANGER;
+                    break;
+                  default:
+                  case 'warning':
+                    kind = kinds.WARNING;
+                    break;
+                  case 'notice':
+                    kind = kinds.INFO;
+                    break;
+                }
+
+                return (
+                  <TableRow key={`health${item.message}`}>
+                    <TableRowCell>
+                      <Icon
+                        name={icons.DANGER}
+                        kind={kind}
+                        title={titleCase(item.type)}
+                      />
+                    </TableRowCell>
+
+                    <TableRowCell>{item.message}</TableRowCell>
+
+                    <TableRowCell>
+                      <IconButton
+                        name={icons.WIKI}
+                        to={item.wikiUrl}
+                        title={translate('ReadTheWikiForMoreInformation')}
+                      />
+
+                      <HealthItemLink source={source} />
+
+                      {source === 'ApplicationStatusCheck' ||
+                      source === 'ApplicationLongTermStatusCheck' ? (
+                        <SpinnerIconButton
+                          name={icons.TEST}
+                          title={translate('TestAll')}
+                          isSpinning={isTestingAllApplications}
+                          onPress={handleTestAllApplicationsPress}
+                        />
+                      ) : null}
+
+                      {source === 'IndexerStatusCheck' ||
+                      source === 'IndexerLongTermStatusCheck' ? (
+                        <SpinnerIconButton
+                          name={icons.TEST}
+                          title={translate('TestAll')}
+                          isSpinning={isTestingAllIndexers}
+                          onPress={handleTestAllIndexersPress}
+                        />
+                      ) : null}
+
+                      {source === 'DownloadClientStatusCheck' ? (
+                        <SpinnerIconButton
+                          name={icons.TEST}
+                          title={translate('TestAll')}
+                          isSpinning={isTestingAllDownloadClients}
+                          onPress={handleTestAllDownloadClientsPress}
+                        />
+                      ) : null}
+                    </TableRowCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+
+          <Alert kind={kinds.INFO}>
+            <InlineMarkdown
+              data={translate('HealthMessagesInfoBox', {
+                link: '/system/logs/files',
+              })}
+            />
+          </Alert>
+        </>
+      ) : null}
+    </FieldSet>
+  );
+}
+
+export default Health;

frontend/src/System/Status/Health/HealthConnector.js

@@ -1,74 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { testAllIndexers } from 'Store/Actions/indexerActions';
-import { testAllApplications } from 'Store/Actions/Settings/applications';
-import { testAllDownloadClients } from 'Store/Actions/Settings/downloadClients';
-import { fetchHealth } from 'Store/Actions/systemActions';
-import createHealthCheckSelector from 'Store/Selectors/createHealthCheckSelector';
-import Health from './Health';
-
-function createMapStateToProps() {
-  return createSelector(
-    createHealthCheckSelector(),
-    (state) => state.system.health,
-    (state) => state.settings.applications.isTestingAll,
-    (state) => state.settings.downloadClients.isTestingAll,
-    (state) => state.indexers.isTestingAll,
-    (items, health, isTestingAllApplications, isTestingAllDownloadClients, isTestingAllIndexers) => {
-      const {
-        isFetching,
-        isPopulated
-      } = health;
-
-      return {
-        isFetching,
-        isPopulated,
-        items,
-        isTestingAllApplications,
-        isTestingAllDownloadClients,
-        isTestingAllIndexers
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchFetchHealth: fetchHealth,
-  dispatchTestAllApplications: testAllApplications,
-  dispatchTestAllDownloadClients: testAllDownloadClients,
-  dispatchTestAllIndexers: testAllIndexers
-};
-
-class HealthConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.dispatchFetchHealth();
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      dispatchFetchHealth,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <Health
-        {...otherProps}
-      />
-    );
-  }
-}
-
-HealthConnector.propTypes = {
-  dispatchFetchHealth: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(HealthConnector);

frontend/src/System/Status/Health/HealthItemLink.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import IconButton from 'Components/Link/IconButton';
+import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+interface HealthItemLinkProps {
+  source: string;
+}
+
+function HealthItemLink(props: HealthItemLinkProps) {
+  const { source } = props;
+
+  switch (source) {
+    case 'ApplicationStatusCheck':
+    case 'ApplicationLongTermStatusCheck':
+      return (
+        <IconButton
+          name={icons.SETTINGS}
+          title={translate('Settings')}
+          to="/settings/applications"
+        />
+      );
+    case 'DownloadClientStatusCheck':
+      return (
+        <IconButton
+          name={icons.SETTINGS}
+          title={translate('Settings')}
+          to="/settings/downloadclients"
+        />
+      );
+    case 'NotificationStatusCheck':
+      return (
+        <IconButton
+          name={icons.SETTINGS}
+          title={translate('Settings')}
+          to="/settings/connect"
+        />
+      );
+    case 'IndexerProxyStatusCheck':
+      return (
+        <IconButton
+          name={icons.SETTINGS}
+          title={translate('Settings')}
+          to="/settings/indexers"
+        />
+      );
+    case 'IndexerRssCheck':
+    case 'IndexerSearchCheck':
+    case 'IndexerStatusCheck':
+    case 'IndexerLongTermStatusCheck':
+      return (
+        <IconButton
+          name={icons.SETTINGS}
+          title={translate('Settings')}
+          to="/"
+        />
+      );
+    case 'UpdateCheck':
+      return (
+        <IconButton
+          name={icons.UPDATE}
+          title={translate('Updates')}
+          to="/system/updates"
+        />
+      );
+    default:
+      return null;
+  }
+}
+
+export default HealthItemLink;

frontend/src/System/Status/Health/HealthStatus.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { fetchHealth } from 'Store/Actions/systemActions';
+import createHealthSelector from './createHealthSelector';
+
+function HealthStatus() {
+  const dispatch = useDispatch();
+  const { isConnected, isReconnecting } = useSelector(
+    (state: AppState) => state.app
+  );
+  const { isPopulated, items } = useSelector(createHealthSelector());
+
+  const wasReconnecting = usePrevious(isReconnecting);
+
+  const { count, errors, warnings } = useMemo(() => {
+    let errors = false;
+    let warnings = false;
+
+    items.forEach((item) => {
+      if (item.type === 'error') {
+        errors = true;
+      }
+
+      if (item.type === 'warning') {
+        warnings = true;
+      }
+    });
+
+    return {
+      count: items.length,
+      errors,
+      warnings,
+    };
+  }, [items]);
+
+  useEffect(() => {
+    if (!isPopulated) {
+      dispatch(fetchHealth());
+    }
+  }, [isPopulated, dispatch]);
+
+  useEffect(() => {
+    if (isConnected && wasReconnecting) {
+      dispatch(fetchHealth());
+    }
+  }, [isConnected, wasReconnecting, dispatch]);
+
+  return (
+    <PageSidebarStatus count={count} errors={errors} warnings={warnings} />
+  );
+}
+
+export default HealthStatus;

frontend/src/System/Status/Health/HealthStatusConnector.js

@@ -1,81 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
-import { fetchHealth } from 'Store/Actions/systemActions';
-import createHealthCheckSelector from 'Store/Selectors/createHealthCheckSelector';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.app,
-    createHealthCheckSelector(),
-    (state) => state.system.health,
-    (app, items, health) => {
-      const count = items.length;
-      let errors = false;
-      let warnings = false;
-
-      items.forEach((item) => {
-        if (item.type === 'error') {
-          errors = true;
-        }
-
-        if (item.type === 'warning') {
-          warnings = true;
-        }
-      });
-
-      return {
-        isConnected: app.isConnected,
-        isReconnecting: app.isReconnecting,
-        isPopulated: health.isPopulated,
-        count,
-        errors,
-        warnings
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  fetchHealth
-};
-
-class HealthStatusConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    if (!this.props.isPopulated) {
-      this.props.fetchHealth();
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.isConnected && prevProps.isReconnecting) {
-      this.props.fetchHealth();
-    }
-  }
-
-  //
-  // Render
-
-  render() {
-    return (
-      <PageSidebarStatus
-        {...this.props}
-      />
-    );
-  }
-}
-
-HealthStatusConnector.propTypes = {
-  isConnected: PropTypes.bool.isRequired,
-  isReconnecting: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  fetchHealth: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(HealthStatusConnector);

frontend/src/System/Status/Health/createHealthSelector.ts

@@ -0,0 +1,13 @@
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+
+function createHealthSelector() {
+  return createSelector(
+    (state: AppState) => state.system.health,
+    (health) => {
+      return health;
+    }
+  );
+}
+
+export default createHealthSelector;

frontend/src/System/Status/MoreInfo/MoreInfo.js

@@ -1,58 +0,0 @@
-import React, { Component } from 'react';
-import DescriptionList from 'Components/DescriptionList/DescriptionList';
-import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
-import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
-import FieldSet from 'Components/FieldSet';
-import Link from 'Components/Link/Link';
-import translate from 'Utilities/String/translate';
-
-class MoreInfo extends Component {
-
-  //
-  // Render
-
-  render() {
-    return (
-      <FieldSet legend={translate('MoreInfo')}>
-        <DescriptionList>
-          <DescriptionListItemTitle>{translate('HomePage')}</DescriptionListItemTitle>
-          <DescriptionListItemDescription>
-            <Link to="https://prowlarr.com/">prowlarr.com</Link>
-          </DescriptionListItemDescription>
-
-          <DescriptionListItemTitle>{translate('Wiki')}</DescriptionListItemTitle>
-          <DescriptionListItemDescription>
-            <Link to="https://wiki.servarr.com/prowlarr">wiki.servarr.com/prowlarr</Link>
-          </DescriptionListItemDescription>
-
-          <DescriptionListItemTitle>{translate('Reddit')}</DescriptionListItemTitle>
-          <DescriptionListItemDescription>
-            <Link to="https://reddit.com/r/prowlarr">r/prowlarr</Link>
-          </DescriptionListItemDescription>
-
-          <DescriptionListItemTitle>{translate('Discord')}</DescriptionListItemTitle>
-          <DescriptionListItemDescription>
-            <Link to="https://prowlarr.com/discord">prowlarr.com/discord</Link>
-          </DescriptionListItemDescription>
-
-          <DescriptionListItemTitle>{translate('Source')}</DescriptionListItemTitle>
-          <DescriptionListItemDescription>
-            <Link to="https://github.com/Prowlarr/Prowlarr/">github.com/Prowlarr/Prowlarr</Link>
-          </DescriptionListItemDescription>
-
-          <DescriptionListItemTitle>{translate('FeatureRequests')}</DescriptionListItemTitle>
-          <DescriptionListItemDescription>
-            <Link to="https://github.com/Prowlarr/Prowlarr/issues">github.com/Prowlarr/Prowlarr/issues</Link>
-          </DescriptionListItemDescription>
-
-        </DescriptionList>
-      </FieldSet>
-    );
-  }
-}
-
-MoreInfo.propTypes = {
-
-};
-
-export default MoreInfo;

frontend/src/System/Status/MoreInfo/MoreInfo.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
+import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
+import FieldSet from 'Components/FieldSet';
+import Link from 'Components/Link/Link';
+import translate from 'Utilities/String/translate';
+
+function MoreInfo() {
+  return (
+    <FieldSet legend={translate('MoreInfo')}>
+      <DescriptionList>
+        <DescriptionListItemTitle>
+          {translate('HomePage')}
+        </DescriptionListItemTitle>
+        <DescriptionListItemDescription>
+          <Link to="https://prowlarr.com/">prowlarr.com</Link>
+        </DescriptionListItemDescription>
+
+        <DescriptionListItemTitle>{translate('Wiki')}</DescriptionListItemTitle>
+        <DescriptionListItemDescription>
+          <Link to="https://wiki.servarr.com/prowlarr">
+            wiki.servarr.com/prowlarr
+          </Link>
+        </DescriptionListItemDescription>
+
+        <DescriptionListItemTitle>
+          {translate('Reddit')}
+        </DescriptionListItemTitle>
+        <DescriptionListItemDescription>
+          <Link to="https://reddit.com/r/prowlarr">r/prowlarr</Link>
+        </DescriptionListItemDescription>
+
+        <DescriptionListItemTitle>
+          {translate('Discord')}
+        </DescriptionListItemTitle>
+        <DescriptionListItemDescription>
+          <Link to="https://prowlarr.com/discord">prowlarr.com/discord</Link>
+        </DescriptionListItemDescription>
+
+        <DescriptionListItemTitle>
+          {translate('Source')}
+        </DescriptionListItemTitle>
+        <DescriptionListItemDescription>
+          <Link to="https://github.com/Prowlarr/Prowlarr/">
+            github.com/Prowlarr/Prowlarr
+          </Link>
+        </DescriptionListItemDescription>
+
+        <DescriptionListItemTitle>
+          {translate('FeatureRequests')}
+        </DescriptionListItemTitle>
+        <DescriptionListItemDescription>
+          <Link to="https://github.com/Prowlarr/Prowlarr/issues">
+            github.com/Prowlarr/Prowlarr/issues
+          </Link>
+        </DescriptionListItemDescription>
+      </DescriptionList>
+    </FieldSet>
+  );
+}
+
+export default MoreInfo;

frontend/src/System/Status/Status.js

@@ -1,30 +0,0 @@
-import React, { Component } from 'react';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import translate from 'Utilities/String/translate';
-import AboutConnector from './About/AboutConnector';
-import Donations from './Donations/Donations';
-import HealthConnector from './Health/HealthConnector';
-import MoreInfo from './MoreInfo/MoreInfo';
-
-class Status extends Component {
-
-  //
-  // Render
-
-  render() {
-    return (
-      <PageContent title={translate('Status')}>
-        <PageContentBody>
-          <HealthConnector />
-          <AboutConnector />
-          <MoreInfo />
-          <Donations />
-        </PageContentBody>
-      </PageContent>
-    );
-  }
-
-}
-
-export default Status;