Fixed: (XSpeeds) Update categories

Co-authored-by: Garfield69 <garfield69@outlook.com>

.github/workflows/label-actions.yml

@@ -18,6 +18,6 @@ jobs:
   action:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/label-actions@v3
+      - uses: dessant/label-actions@v4
         with:
           process-only: 'issues, prs'

README.md

@@ -2,7 +2,7 @@
 
 [![Build Status](https://dev.azure.com/Prowlarr/Prowlarr/_apis/build/status/Prowlarr.Prowlarr?branchName=develop)](https://dev.azure.com/Prowlarr/Prowlarr/_build/latest?definitionId=1&branchName=develop)
 [![Translated](https://translate.servarr.com/widgets/servarr/-/prowlarr/svg-badge.svg)](https://translate.servarr.com/engage/prowlarr/?utm_source=widget)
-[![Docker Pulls](https://img.shields.io/docker/pulls/hotio/prowlarr.svg)](https://wiki.servarr.com/prowlarr/installation#docker)
+[![Docker Pulls](https://img.shields.io/docker/pulls/hotio/prowlarr.svg)](https://wiki.servarr.com/prowlarr/installation/docker)
 ![Github Downloads](https://img.shields.io/github/downloads/Prowlarr/Prowlarr/total.svg)
 [![Backers on Open Collective](https://opencollective.com/Prowlarr/backers/badge.svg)](#backers)
 [![Sponsors on Open Collective](https://opencollective.com/Prowlarr/sponsors/badge.svg)](#sponsors)

azure-pipelines.yml

@@ -9,15 +9,15 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '1.9.2'
+  majorVersion: '1.16.0'
   minorVersion: $[counter('minorVersion', 1)]
   prowlarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(prowlarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.413'
-  nodeVersion: '16.X'
-  innoVersion: '6.2.0'
+  dotnetVersion: '6.0.417'
+  nodeVersion: '20.X'
+  innoVersion: '6.2.2'
   windowsImage: 'windows-2022'
   linuxImage: 'ubuntu-20.04'
   macImage: 'macOS-11'
@@ -1206,6 +1206,7 @@ stages:
   - stage: Report_Out
     dependsOn:
     - Analyze
+    - Installer
     - Unit_Test
     - Integration
     - Automation

build.sh

@@ -254,7 +254,7 @@ InstallInno()
     ProgressStart "Installing portable Inno Setup"
     
     rm -rf _inno
-    curl -s --output innosetup.exe "https://files.jrsoftware.org/is/6/innosetup-${INNOVERSION:-6.2.0}.exe"
+    curl -s --output innosetup.exe "https://files.jrsoftware.org/is/6/innosetup-${INNOVERSION:-6.2.2}.exe"
     mkdir _inno
     ./innosetup.exe //portable=1 //silent //currentuser //dir=.\\_inno
     rm innosetup.exe

frontend/babel.config.js

@@ -2,6 +2,8 @@ const loose = true;
 
 module.exports = {
   plugins: [
+    '@babel/plugin-transform-logical-assignment-operators',
+
     // Stage 1
     '@babel/plugin-proposal-export-default-from',
     ['@babel/plugin-transform-optional-chaining', { loose }],

frontend/src/App/AppUpdatedModalContent.js

@@ -65,12 +65,12 @@ function AppUpdatedModalContent(props) {
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        {translate('AppUpdated', { appName: 'Prowlarr' })}
+        {translate('AppUpdated')}
       </ModalHeader>
 
       <ModalBody>
         <div>
-          <InlineMarkdown data={translate('AppUpdatedVersion', { appName: 'Prowlarr', version })} blockClassName={styles.version} />
+          <InlineMarkdown data={translate('AppUpdatedVersion', { version })} blockClassName={styles.version} />
         </div>
 
         {

frontend/src/App/ConnectionLostModal.js

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

frontend/src/App/State/AppSectionState.ts

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

frontend/src/App/State/HistoryAppState.ts

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

frontend/src/App/State/SettingsAppState.ts

@@ -3,6 +3,7 @@ import AppSectionState, {
   AppSectionItemState,
   AppSectionSaveState,
 } from 'App/State/AppSectionState';
+import { IndexerCategory } from 'Indexer/Indexer';
 import Application from 'typings/Application';
 import DownloadClient from 'typings/DownloadClient';
 import Notification from 'typings/Notification';
@@ -25,6 +26,11 @@ export interface DownloadClientAppState
     AppSectionDeleteState,
     AppSectionSaveState {}
 
+export interface IndexerCategoryAppState
+  extends AppSectionState<IndexerCategory>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
 export interface NotificationAppState
   extends AppSectionState<Notification>,
     AppSectionDeleteState {}
@@ -35,6 +41,7 @@ interface SettingsAppState {
   appProfiles: AppProfileAppState;
   applications: ApplicationAppState;
   downloadClients: DownloadClientAppState;
+  indexerCategories: IndexerCategoryAppState;
   notifications: NotificationAppState;
   ui: UiSettingsAppState;
 }

frontend/src/Commands/Command.ts

@@ -12,7 +12,6 @@ export interface CommandBody {
   lastStartTime: string;
   trigger: string;
   suppressMessages: boolean;
-  seriesId?: number;
 }
 
 interface Command extends ModelBase {

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import { IndexerCategory } from 'Indexer/Indexer';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
+
+const indexerCategoriesSelector = createSelector(
+  (state: AppState) => state.settings.indexerCategories,
+  (categories) => categories.items
+);
+
+function CategoryFilterBuilderRowValue(props: FilterBuilderRowValueProps) {
+  const categories: IndexerCategory[] = useSelector(indexerCategoriesSelector);
+
+  const tagList = categories.reduce(
+    (acc: { id: number; name: string }[], element) => {
+      acc.push({
+        id: element.id,
+        name: `${element.name} (${element.id})`,
+      });
+
+      if (element.subCategories && element.subCategories.length > 0) {
+        element.subCategories.forEach((subCat) => {
+          acc.push({
+            id: subCat.id,
+            name: `${subCat.name} (${subCat.id})`,
+          });
+        });
+      }
+
+      return acc;
+    },
+    []
+  );
+
+  return <FilterBuilderRowValue {...props} tagList={tagList} />;
+}
+
+export default CategoryFilterBuilderRowValue;

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

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

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

@@ -5,8 +5,10 @@ import IconButton from 'Components/Link/IconButton';
 import { filterBuilderTypes, filterBuilderValueTypes, icons } from 'Helpers/Props';
 import AppProfileFilterBuilderRowValueConnector from './AppProfileFilterBuilderRowValueConnector';
 import BoolFilterBuilderRowValue from './BoolFilterBuilderRowValue';
+import CategoryFilterBuilderRowValue from './CategoryFilterBuilderRowValue';
 import DateFilterBuilderRowValue from './DateFilterBuilderRowValue';
 import FilterBuilderRowValueConnector from './FilterBuilderRowValueConnector';
+import HistoryEventTypeFilterBuilderRowValue from './HistoryEventTypeFilterBuilderRowValue';
 import IndexerFilterBuilderRowValueConnector from './IndexerFilterBuilderRowValueConnector';
 import PrivacyFilterBuilderRowValue from './PrivacyFilterBuilderRowValue';
 import ProtocolFilterBuilderRowValue from './ProtocolFilterBuilderRowValue';
@@ -55,9 +57,15 @@ function getRowValueConnector(selectedFilterBuilderProp) {
     case filterBuilderValueTypes.BOOL:
       return BoolFilterBuilderRowValue;
 
+    case filterBuilderValueTypes.CATEGORY:
+      return CategoryFilterBuilderRowValue;
+
     case filterBuilderValueTypes.DATE:
       return DateFilterBuilderRowValue;
 
+    case filterBuilderValueTypes.HISTORY_EVENT_TYPE:
+      return HistoryEventTypeFilterBuilderRowValue;
+
     case filterBuilderValueTypes.INDEXER:
       return IndexerFilterBuilderRowValueConnector;
 

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

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

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

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

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

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

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

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

frontend/src/Components/Form/AppProfileSelectInputConnector.js

@@ -24,16 +24,20 @@ function createMapStateToProps() {
       if (includeNoChange) {
         values.unshift({
           key: 'noChange',
-          value: translate('NoChange'),
-          disabled: true
+          get value() {
+            return translate('NoChange');
+          },
+          isDisabled: true
         });
       }
 
       if (includeMixed) {
         values.unshift({
           key: 'mixed',
-          value: '(Mixed)',
-          disabled: true
+          get value() {
+            return `(${translate('Mixed')})`;
+          },
+          isDisabled: true
         });
       }
 

frontend/src/Components/Form/AvailabilitySelectInput.js

@@ -1,54 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import SelectInput from './SelectInput';
-
-const availabilityOptions = [
-  { key: 'announced', value: 'Announced' },
-  { key: 'inCinemas', value: 'In Cinemas' },
-  { key: 'released', value: 'Released' },
-  { key: 'preDB', value: 'PreDB' }
-];
-
-function AvailabilitySelectInput(props) {
-  const values = [...availabilityOptions];
-
-  const {
-    includeNoChange,
-    includeMixed
-  } = props;
-
-  if (includeNoChange) {
-    values.unshift({
-      key: 'noChange',
-      value: 'No Change',
-      disabled: true
-    });
-  }
-
-  if (includeMixed) {
-    values.unshift({
-      key: 'mixed',
-      value: '(Mixed)',
-      disabled: true
-    });
-  }
-
-  return (
-    <SelectInput
-      {...props}
-      values={values}
-    />
-  );
-}
-
-AvailabilitySelectInput.propTypes = {
-  includeNoChange: PropTypes.bool.isRequired,
-  includeMixed: PropTypes.bool.isRequired
-};
-
-AvailabilitySelectInput.defaultProps = {
-  includeNoChange: false,
-  includeMixed: false
-};
-
-export default AvailabilitySelectInput;

frontend/src/Components/Form/DownloadClientSelectInputConnector.js

@@ -24,7 +24,8 @@ function createMapStateToProps() {
         .sort(sortByName)
         .map((downloadClient) => ({
           key: downloadClient.id,
-          value: downloadClient.name
+          value: downloadClient.name,
+          hint: `(${downloadClient.id})`
         }));
 
       if (includeAny) {

frontend/src/Components/Form/EnhancedSelectInputConnector.js

@@ -147,7 +147,7 @@ EnhancedSelectInputConnector.propTypes = {
   provider: PropTypes.string.isRequired,
   providerData: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
-  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   selectOptionsProviderAction: PropTypes.string,
   onChange: PropTypes.func.isRequired,

frontend/src/Components/Form/FormInputGroup.js

@@ -5,7 +5,6 @@ import { inputTypes, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import AppProfileSelectInputConnector from './AppProfileSelectInputConnector';
 import AutoCompleteInput from './AutoCompleteInput';
-import AvailabilitySelectInput from './AvailabilitySelectInput';
 import CaptchaInputConnector from './CaptchaInputConnector';
 import CardigannCaptchaInputConnector from './CardigannCaptchaInputConnector';
 import CheckInput from './CheckInput';
@@ -37,9 +36,6 @@ function getComponent(type) {
     case inputTypes.AUTO_COMPLETE:
       return AutoCompleteInput;
 
-    case inputTypes.AVAILABILITY_SELECT:
-      return AvailabilitySelectInput;
-
     case inputTypes.CAPTCHA:
       return CaptchaInputConnector;
 

frontend/src/Components/Form/FormLabel.css

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

frontend/src/Components/Form/InfoInput.css

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

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

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

frontend/src/Components/Form/InfoInput.js

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

frontend/src/Components/Menu/FilterMenuContent.js

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

frontend/src/Components/Modal/ModalContent.js

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

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

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

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

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

frontend/src/FirstRun/AuthenticationRequiredModalContent.js

@@ -34,7 +34,8 @@ function AuthenticationRequiredModalContent(props) {
     authenticationMethod,
     authenticationRequired,
     username,
-    password
+    password,
+    passwordConfirmation
   } = settings;
 
   const authenticationEnabled = authenticationMethod && authenticationMethod.value !== 'none';
@@ -63,7 +64,7 @@ function AuthenticationRequiredModalContent(props) {
           className={styles.authRequiredAlert}
           kind={kinds.WARNING}
         >
-          {translate('AuthenticationRequiredWarning', { appName: 'Prowlarr' })}
+          {translate('AuthenticationRequiredWarning')}
         </Alert>
 
         {
@@ -76,7 +77,7 @@ function AuthenticationRequiredModalContent(props) {
                   type={inputTypes.SELECT}
                   name="authenticationMethod"
                   values={authenticationMethodOptions}
-                  helpText={translate('AuthenticationMethodHelpText', { appName: 'Prowlarr' })}
+                  helpText={translate('AuthenticationMethodHelpText')}
                   helpTextWarning={authenticationMethod.value === 'none' ? translate('AuthenticationMethodHelpTextWarning') : undefined}
                   helpLink="https://wiki.servarr.com/prowlarr/faq#forced-authentication"
                   onChange={onInputChange}
@@ -120,6 +121,18 @@ function AuthenticationRequiredModalContent(props) {
                   {...password}
                 />
               </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('PasswordConfirmation')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.PASSWORD}
+                  name="passwordConfirmation"
+                  onChange={onInputChange}
+                  helpTextWarning={passwordConfirmation?.value ? undefined : translate('AuthenticationRequiredPasswordConfirmationHelpTextWarning')}
+                  {...passwordConfirmation}
+                />
+              </FormGroup>
             </div> :
             null
         }

frontend/src/Helpers/Hooks/useModalOpenState.ts

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

frontend/src/Helpers/Props/filterBuilderValueTypes.js

@@ -2,9 +2,10 @@ export const BOOL = 'bool';
 export const BYTES = 'bytes';
 export const DATE = 'date';
 export const DEFAULT = 'default';
+export const HISTORY_EVENT_TYPE = 'historyEventType';
 export const INDEXER = 'indexer';
 export const PROTOCOL = 'protocol';
 export const PRIVACY = 'privacy';
 export const APP_PROFILE = 'appProfile';
-export const MOVIE_STATUS = 'movieStatus';
+export const CATEGORY = 'category';
 export const TAG = 'tag';

frontend/src/Helpers/Props/inputTypes.js

@@ -1,6 +1,5 @@
 export const AUTO_COMPLETE = 'autoComplete';
 export const APP_PROFILE_SELECT = 'appProfileSelect';
-export const AVAILABILITY_SELECT = 'availabilitySelect';
 export const CAPTCHA = 'captcha';
 export const CARDIGANNCAPTCHA = 'cardigannCaptcha';
 export const CHECK = 'check';
@@ -27,7 +26,6 @@ export const TAG_SELECT = 'tagSelect';
 export const all = [
   AUTO_COMPLETE,
   APP_PROFILE_SELECT,
-  AVAILABILITY_SELECT,
   CAPTCHA,
   CARDIGANNCAPTCHA,
   CHECK,

frontend/src/History/History.js

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

frontend/src/History/HistoryConnector.js

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

frontend/src/History/HistoryFilterModal.tsx

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

frontend/src/Indexer/Add/AddIndexerModal.js

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

frontend/src/Indexer/Add/AddIndexerModalContent.js

@@ -16,7 +16,7 @@ import TableBody from 'Components/Table/TableBody';
 import { kinds, scrollDirections } from 'Helpers/Props';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
-import SelectIndexerRowConnector from './SelectIndexerRowConnector';
+import SelectIndexerRow from './SelectIndexerRow';
 import styles from './AddIndexerModalContent.css';
 
 const columns = [
@@ -49,6 +49,12 @@ const columns = [
     label: () => translate('Privacy'),
     isSortable: true,
     isVisible: true
+  },
+  {
+    name: 'categories',
+    label: () => translate('Categories'),
+    isSortable: false,
+    isVisible: true
   }
 ];
 
@@ -260,7 +266,7 @@ class AddIndexerModalContent extends Component {
                   <TableBody>
                     {
                       filteredIndexers.map((indexer) => (
-                        <SelectIndexerRowConnector
+                        <SelectIndexerRow
                           key={`${indexer.implementation}-${indexer.name}`}
                           implementation={indexer.implementation}
                           implementationName={indexer.implementationName}

frontend/src/Indexer/Add/AddIndexerModalContentConnector.js

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

frontend/src/Indexer/Add/SelectIndexerRow.js

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

frontend/src/Indexer/Add/SelectIndexerRow.tsx

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

frontend/src/Indexer/Add/SelectIndexerRowConnector.js

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

frontend/src/Indexer/Edit/EditIndexerModalContent.js

@@ -97,7 +97,7 @@ function EditIndexerModalContent(props) {
                 <FormInputGroup
                   type={inputTypes.CHECK}
                   name="enable"
-                  helpTextWarning={supportsRss.value ? undefined : translate('RSSIsNotSupportedWithThisIndexer')}
+                  helpTextWarning={supportsRss.value ? undefined : translate('RssIsNotSupportedWithThisIndexer')}
                   {...enable}
                   onChange={onInputChange}
                 />
@@ -144,6 +144,7 @@ function EditIndexerModalContent(props) {
                   }) :
                   null
               }
+
               <FormGroup
                 advancedSettings={advancedSettings}
                 isAdvanced={true}

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

@@ -35,7 +35,7 @@ const enableOptions = [
     get value() {
       return translate('NoChange');
     },
-    disabled: true,
+    isDisabled: true,
   },
   {
     key: 'true',

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

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

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

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

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

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

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

@@ -34,7 +34,7 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
   const { indexerId, columns, isSelectMode, onCloneIndexerPress } = props;
 
   const { indexer, appProfile, status, longDateFormat, timeFormat } =
-    useSelector(createIndexerIndexItemSelector(props.indexerId));
+    useSelector(createIndexerIndexItemSelector(indexerId));
 
   const {
     id,
@@ -148,12 +148,24 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
           );
         }
 
+        if (name === 'id') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <IndexerTitleLink
+                indexerId={indexerId}
+                title={`${indexerId}`}
+                onCloneIndexerPress={onCloneIndexerPress}
+              />
+            </VirtualTableRowCell>
+          );
+        }
+
         if (name === 'sortName') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>
               <IndexerTitleLink
                 indexerId={indexerId}
-                indexerName={indexerName}
+                title={indexerName}
                 onCloneIndexerPress={onCloneIndexerPress}
               />
             </VirtualTableRowCell>

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

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

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

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

frontend/src/Indexer/IndexerTitleLink.tsx

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

frontend/src/Indexer/Info/IndexerInfoModalContent.css

@@ -47,9 +47,3 @@
   justify-content: space-between;
 }
 
-@media only screen and (max-width: $breakpointExtraSmall) {
-  .modalFooter {
-    flex-direction: column;
-    gap: 10px;
-  }
-}

frontend/src/Indexer/Info/IndexerInfoModalContent.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
 import { createSelector } from 'reselect';
+import Alert from 'Components/Alert';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
@@ -23,7 +24,7 @@ import TagListConnector from 'Components/TagListConnector';
 import { kinds } from 'Helpers/Props';
 import DeleteIndexerModal from 'Indexer/Delete/DeleteIndexerModal';
 import EditIndexerModalConnector from 'Indexer/Edit/EditIndexerModalConnector';
-import Indexer from 'Indexer/Indexer';
+import Indexer, { IndexerCapabilities } from 'Indexer/Indexer';
 import { createIndexerSelectorForHook } from 'Store/Selectors/createIndexerSelector';
 import translate from 'Utilities/String/translate';
 import IndexerHistory from './History/IndexerHistory';
@@ -63,7 +64,7 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
     fields,
     tags,
     protocol,
-    capabilities,
+    capabilities = {} as IndexerCapabilities,
   } = indexer as Indexer;
 
   const { onModalClose } = props;
@@ -207,7 +208,7 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
                       descriptionClassName={styles.description}
                       title={translate('RawSearchSupported')}
                       data={
-                        capabilities.supportsRawSearch
+                        capabilities?.supportsRawSearch
                           ? translate('Yes')
                           : translate('No')
                       }
@@ -216,12 +217,12 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
                       descriptionClassName={styles.description}
                       title={translate('SearchTypes')}
                       data={
-                        capabilities.searchParams.length === 0 ? (
-                          translate('NotSupported')
-                        ) : (
+                        capabilities?.searchParams?.length > 0 ? (
                           <Label kind={kinds.PRIMARY}>
                             {capabilities.searchParams[0]}
                           </Label>
+                        ) : (
+                          translate('NotSupported')
                         )
                       }
                     />
@@ -229,60 +230,60 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
                       descriptionClassName={styles.description}
                       title={translate('TVSearchTypes')}
                       data={
-                        capabilities.tvSearchParams.length === 0
-                          ? translate('NotSupported')
-                          : capabilities.tvSearchParams.map((p) => {
+                        capabilities?.tvSearchParams?.length > 0
+                          ? capabilities.tvSearchParams.map((p) => {
                               return (
                                 <Label key={p} kind={kinds.PRIMARY}>
                                   {p}
                                 </Label>
                               );
                             })
+                          : translate('NotSupported')
                       }
                     />
                     <DescriptionListItem
                       descriptionClassName={styles.description}
                       title={translate('MovieSearchTypes')}
                       data={
-                        capabilities.movieSearchParams.length === 0
-                          ? translate('NotSupported')
-                          : capabilities.movieSearchParams.map((p) => {
+                        capabilities?.movieSearchParams?.length > 0
+                          ? capabilities.movieSearchParams.map((p) => {
                               return (
                                 <Label key={p} kind={kinds.PRIMARY}>
                                   {p}
                                 </Label>
                               );
                             })
+                          : translate('NotSupported')
                       }
                     />
                     <DescriptionListItem
                       descriptionClassName={styles.description}
                       title={translate('BookSearchTypes')}
                       data={
-                        capabilities.bookSearchParams.length === 0
-                          ? translate('NotSupported')
-                          : capabilities.bookSearchParams.map((p) => {
+                        capabilities?.bookSearchParams?.length > 0
+                          ? capabilities.bookSearchParams.map((p) => {
                               return (
                                 <Label key={p} kind={kinds.PRIMARY}>
                                   {p}
                                 </Label>
                               );
                             })
+                          : translate('NotSupported')
                       }
                     />
                     <DescriptionListItem
                       descriptionClassName={styles.description}
                       title={translate('MusicSearchTypes')}
                       data={
-                        capabilities.musicSearchParams.length === 0
-                          ? translate('NotSupported')
-                          : capabilities.musicSearchParams.map((p) => {
+                        capabilities?.musicSearchParams?.length > 0
+                          ? capabilities.musicSearchParams.map((p) => {
                               return (
                                 <Label key={p} kind={kinds.PRIMARY}>
                                   {p}
                                 </Label>
                               );
                             })
+                          : translate('NotSupported')
                       }
                     />
                   </DescriptionList>
@@ -338,7 +339,11 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
                       })}
                   </Table>
                 </FieldSet>
-              ) : null}
+              ) : (
+                <Alert kind={kinds.INFO}>
+                  {translate('NoIndexerCategories')}
+                </Alert>
+              )}
             </div>
           </TabPanel>
           <TabPanel>

frontend/src/Indexer/Stats/IndexerStats.tsx

@@ -12,8 +12,9 @@ import FilterMenu from 'Components/Menu/FilterMenu';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
-import { align, kinds } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import {
   fetchIndexerStats,
   setIndexerStatsFilter,
@@ -194,6 +195,10 @@ function IndexerStats() {
     dispatch(fetchIndexerStats());
   }, [dispatch]);
 
+  const onRefreshPress = useCallback(() => {
+    dispatch(fetchIndexerStats());
+  }, [dispatch]);
+
   const onFilterSelect = useCallback(
     (value: string) => {
       dispatch(setIndexerStatsFilter({ selectedFilterKey: value }));
@@ -219,8 +224,17 @@ function IndexerStats() {
     }, 0) ?? 0;
 
   return (
-    <PageContent>
+    <PageContent title={translate('Stats')}>
       <PageToolbar>
+        <PageToolbarSection>
+          <PageToolbarButton
+            label={translate('Refresh')}
+            iconName={icons.REFRESH}
+            isSpinning={isFetching}
+            onPress={onRefreshPress}
+          />
+        </PageToolbarSection>
+
         <PageToolbarSection alignContent={align.RIGHT} collapseButtons={false}>
           <FilterMenu
             alignMenu={align.RIGHT}

frontend/src/Search/SearchFooter.js

@@ -212,7 +212,11 @@ class SearchFooter extends Component {
             name="searchQuery"
             value={searchQuery}
             buttons={
-              <FormInputButton onPress={this.onQueryParameterModalOpenClick}>
+              <FormInputButton
+                kind={kinds.DEFAULT}
+                onPress={this.onQueryParameterModalOpenClick}
+                title={translate('ClickToChangeQueryOptions')}
+              >
                 <Icon
                   name={icon}
                 />
@@ -275,6 +279,7 @@ class SearchFooter extends Component {
               }
 
               <SpinnerButton
+                kind={kinds.PRIMARY}
                 className={styles.searchButton}
                 isSpinning={isFetching}
                 isDisabled={isFetching || !hasIndexers}

frontend/src/Search/SearchIndex.js

@@ -285,7 +285,7 @@ class SearchIndex extends Component {
     const hasNoIndexer = !totalItems;
 
     return (
-      <PageContent>
+      <PageContent title={translate('Search')}>
         <PageToolbar>
           <PageToolbarSection
             alignContent={align.RIGHT}

frontend/src/Search/Table/CategoryLabel.js

@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Label from 'Components/Label';
-import Tooltip from 'Components/Tooltip/Tooltip';
-import { kinds, tooltipPositions } from 'Helpers/Props';
-
-function CategoryLabel({ categories }) {
-  const sortedCategories = categories.filter((cat) => cat.name !== undefined).sort((c) => c.id);
-
-  if (categories?.length === 0) {
-    return (
-      <Tooltip
-        anchor={<Label kind={kinds.DANGER}>Unknown</Label>}
-        tooltip="Please report this issue to the GitHub as this shouldn't be happening"
-        position={tooltipPositions.LEFT}
-      />
-    );
-  }
-
-  return (
-    <span>
-      {
-        sortedCategories.map((category) => {
-          return (
-            <Label key={category.name}>
-              {category.name}
-            </Label>
-          );
-        })
-      }
-    </span>
-  );
-}
-
-CategoryLabel.defaultProps = {
-  categories: []
-};
-
-CategoryLabel.propTypes = {
-  categories: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-export default CategoryLabel;

frontend/src/Search/Table/CategoryLabel.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Label from 'Components/Label';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { kinds, tooltipPositions } from 'Helpers/Props';
+import { IndexerCategory } from 'Indexer/Indexer';
+import translate from 'Utilities/String/translate';
+
+interface CategoryLabelProps {
+  categories: IndexerCategory[];
+}
+
+function CategoryLabel({ categories = [] }: CategoryLabelProps) {
+  if (categories?.length === 0) {
+    return (
+      <Tooltip
+        anchor={<Label kind={kinds.DANGER}>{translate('Unknown')}</Label>}
+        tooltip="Please report this issue to the GitHub as this shouldn't be happening"
+        position={tooltipPositions.LEFT}
+      />
+    );
+  }
+
+  const sortedCategories = categories
+    .filter((cat) => cat.name !== undefined)
+    .sort((a, b) => a.id - b.id);
+
+  return (
+    <span>
+      {sortedCategories.map((category) => {
+        return <Label key={category.id}>{category.name}</Label>;
+      })}
+    </span>
+  );
+}
+
+export default CategoryLabel;

frontend/src/Search/Table/ReleaseLinks.css

@@ -0,0 +1,13 @@
+.links {
+  margin: 0;
+}
+
+.link {
+  white-space: nowrap;
+}
+
+.linkLabel {
+  composes: label from '~Components/Label.css';
+
+  cursor: pointer;
+}

frontend/src/Search/Table/ReleaseLinks.css.d.ts

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

frontend/src/Search/Table/ReleaseLinks.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import Label from 'Components/Label';
+import Link from 'Components/Link/Link';
+import { kinds, sizes } from 'Helpers/Props';
+import { IndexerCategory } from 'Indexer/Indexer';
+import styles from './ReleaseLinks.css';
+
+interface ReleaseLinksProps {
+  categories: IndexerCategory[];
+  imdbId?: string;
+  tmdbId?: number;
+  tvdbId?: number;
+  tvMazeId?: number;
+}
+
+function ReleaseLinks(props: ReleaseLinksProps) {
+  const { categories = [], imdbId, tmdbId, tvdbId, tvMazeId } = props;
+
+  const categoryNames = categories
+    .filter((item) => item.id < 100000)
+    .map((c) => c.name);
+
+  return (
+    <div className={styles.links}>
+      {imdbId ? (
+        <Link
+          className={styles.link}
+          to={`https://imdb.com/title/tt${imdbId.toString().padStart(7, '0')}/`}
+        >
+          <Label
+            className={styles.linkLabel}
+            kind={kinds.INFO}
+            size={sizes.LARGE}
+          >
+            IMDb
+          </Label>
+        </Link>
+      ) : null}
+
+      {tmdbId ? (
+        <Link
+          className={styles.link}
+          to={`https://www.themoviedb.org/${
+            categoryNames.includes('Movies') ? 'movie' : 'tv'
+          }/${tmdbId}`}
+        >
+          <Label
+            className={styles.linkLabel}
+            kind={kinds.INFO}
+            size={sizes.LARGE}
+          >
+            TMDb
+          </Label>
+        </Link>
+      ) : null}
+
+      {tvdbId ? (
+        <Link
+          className={styles.link}
+          to={`https://www.thetvdb.com/?tab=series&id=${tvdbId}`}
+        >
+          <Label
+            className={styles.linkLabel}
+            kind={kinds.INFO}
+            size={sizes.LARGE}
+          >
+            TVDb
+          </Label>
+        </Link>
+      ) : null}
+
+      {tvMazeId ? (
+        <Link
+          className={styles.link}
+          to={`https://www.tvmaze.com/shows/${tvMazeId}/_`}
+        >
+          <Label
+            className={styles.linkLabel}
+            kind={kinds.INFO}
+            size={sizes.LARGE}
+          >
+            TV Maze
+          </Label>
+        </Link>
+      ) : null}
+    </div>
+  );
+}
+
+export default ReleaseLinks;

frontend/src/Search/Table/SearchIndexRow.css

@@ -63,7 +63,7 @@
 }
 
 .externalLinks {
-  margin: 0 2px;
-  width: 22px;
-  text-align: center;
+  composes: button from '~Components/Link/IconButton.css';
+
+  color: var(--textColor);
 }

frontend/src/Search/Table/SearchIndexRow.js

@@ -16,6 +16,7 @@ import titleCase from 'Utilities/String/titleCase';
 import translate from 'Utilities/String/translate';
 import CategoryLabel from './CategoryLabel';
 import Peers from './Peers';
+import ReleaseLinks from './ReleaseLinks';
 import styles from './SearchIndexRow.css';
 
 function getDownloadIcon(isGrabbing, isGrabbed, grabError) {
@@ -118,6 +119,10 @@ class SearchIndexRow extends Component {
       grabs,
       seeders,
       leechers,
+      imdbId,
+      tmdbId,
+      tvdbId,
+      tvMazeId,
       indexerFlags,
       columns,
       isGrabbing,
@@ -343,6 +348,32 @@ class SearchIndexRow extends Component {
                       /> :
                       null
                   }
+
+                  {
+                    imdbId || tmdbId || tvdbId || tvMazeId ? (
+                      <Popover
+                        anchor={
+                          <Icon
+                            className={styles.externalLinks}
+                            name={icons.EXTERNAL_LINK}
+                            size={12}
+                          />
+                        }
+                        title={translate('Links')}
+                        body={
+                          <ReleaseLinks
+                            categories={categories}
+                            imdbId={imdbId}
+                            tmdbId={tmdbId}
+                            tvdbId={tvdbId}
+                            tvMazeId={tvMazeId}
+                          />
+                        }
+                        kind={kinds.INVERSE}
+                        position={tooltipPositions.TOP}
+                      />
+                    ) : null
+                  }
                 </VirtualTableRowCell>
               );
             }
@@ -375,6 +406,10 @@ SearchIndexRow.propTypes = {
   grabs: PropTypes.number,
   seeders: PropTypes.number,
   leechers: PropTypes.number,
+  imdbId: PropTypes.number,
+  tmdbId: PropTypes.number,
+  tvdbId: PropTypes.number,
+  tvMazeId: PropTypes.number,
   indexerFlags: PropTypes.arrayOf(PropTypes.string).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   onGrabPress: PropTypes.func.isRequired,

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

@@ -62,7 +62,7 @@ class Applications extends Component {
     return (
       <FieldSet legend={translate('Applications')}>
         <PageSectionContent
-          errorMessage={translate('UnableToLoadApplicationList')}
+          errorMessage={translate('ApplicationsLoadError')}
           {...otherProps}
         >
           <div className={styles.applications}>

frontend/src/Settings/Applications/Applications/Manage/Edit/ManageApplicationsEditModalContent.tsx

@@ -30,7 +30,7 @@ const syncLevelOptions = [
     get value() {
       return translate('NoChange');
     },
-    disabled: true,
+    isDisabled: true,
   },
   {
     key: ApplicationSyncLevel.Disabled,

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

@@ -14,9 +14,11 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import useSelectState from 'Helpers/Hooks/useSelectState';
 import { kinds } from 'Helpers/Props';
+import SortDirection from 'Helpers/Props/SortDirection';
 import {
   bulkDeleteApplications,
   bulkEditApplications,
+  setManageApplicationsSort,
 } from 'Store/Actions/settingsActions';
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import { SelectStateInputProps } from 'typings/props';
@@ -62,6 +64,8 @@ const COLUMNS = [
 
 interface ManageApplicationsModalContentProps {
   onModalClose(): void;
+  sortKey?: string;
+  sortDirection?: SortDirection;
 }
 
 function ManageApplicationsModalContent(
@@ -76,6 +80,8 @@ function ManageApplicationsModalContent(
     isSaving,
     error,
     items,
+    sortKey,
+    sortDirection,
   }: ApplicationAppState = useSelector(
     createClientSideCollectionSelector('settings.applications')
   );
@@ -96,6 +102,13 @@ function ManageApplicationsModalContent(
 
   const selectedCount = selectedIds.length;
 
+  const onSortPress = useCallback(
+    (value: string) => {
+      dispatch(setManageApplicationsSort({ sortKey: value }));
+    },
+    [dispatch]
+  );
+
   const onDeletePress = useCallback(() => {
     setIsDeleteModalOpen(true);
   }, [setIsDeleteModalOpen]);
@@ -201,6 +214,9 @@ function ManageApplicationsModalContent(
             allSelected={allSelected}
             allUnselected={allUnselected}
             onSelectAllChange={onSelectAllChange}
+            sortKey={sortKey}
+            sortDirection={sortDirection}
+            onSortPress={onSortPress}
           >
             <TableBody>
               {items.map((item) => {

frontend/src/Settings/DownloadClients/DownloadClientSettings.js

@@ -84,7 +84,7 @@ class DownloadClientSettings extends Component {
               />
 
               <PageToolbarButton
-                label={translate('ManageDownloadClients')}
+                label={translate('ManageClients')}
                 iconName={icons.MANAGE}
                 onPress={this.onManageDownloadClientsPress}
               />

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

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Card from 'Components/Card';
 import FieldSet from 'Components/FieldSet';
 import Icon from 'Components/Icon';
 import PageSectionContent from 'Components/Page/PageSectionContent';
-import { icons } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import AddDownloadClientModal from './AddDownloadClientModal';
 import DownloadClient from './DownloadClient';
@@ -59,48 +60,59 @@ class DownloadClients extends Component {
     } = this.state;
 
     return (
-      <FieldSet legend={translate('DownloadClients')}>
-        <PageSectionContent
-          errorMessage={translate('UnableToLoadDownloadClients')}
-          {...otherProps}
-        >
-          <div className={styles.downloadClients}>
-            {
-              items.map((item) => {
-                return (
-                  <DownloadClient
-                    key={item.id}
-                    {...item}
-                    onConfirmDeleteDownloadClient={onConfirmDeleteDownloadClient}
-                  />
-                );
-              })
-            }
-
-            <Card
-              className={styles.addDownloadClient}
-              onPress={this.onAddDownloadClientPress}
-            >
-              <div className={styles.center}>
-                <Icon
-                  name={icons.ADD}
-                  size={45}
-                />
-              </div>
-            </Card>
+      <div>
+        <Alert kind={kinds.INFO}>
+          <div>
+            {translate('ProwlarrDownloadClientsAlert')}
           </div>
+          <div>
+            {translate('ProwlarrDownloadClientsInAppOnlyAlert')}
+          </div>
+        </Alert>
 
-          <AddDownloadClientModal
-            isOpen={isAddDownloadClientModalOpen}
-            onModalClose={this.onAddDownloadClientModalClose}
-          />
+        <FieldSet legend={translate('DownloadClients')}>
+          <PageSectionContent
+            errorMessage={translate('DownloadClientsLoadError')}
+            {...otherProps}
+          >
+            <div className={styles.downloadClients}>
+              {
+                items.map((item) => {
+                  return (
+                    <DownloadClient
+                      key={item.id}
+                      {...item}
+                      onConfirmDeleteDownloadClient={onConfirmDeleteDownloadClient}
+                    />
+                  );
+                })
+              }
 
-          <EditDownloadClientModalConnector
-            isOpen={isEditDownloadClientModalOpen}
-            onModalClose={this.onEditDownloadClientModalClose}
-          />
-        </PageSectionContent>
-      </FieldSet>
+              <Card
+                className={styles.addDownloadClient}
+                onPress={this.onAddDownloadClientPress}
+              >
+                <div className={styles.center}>
+                  <Icon
+                    name={icons.ADD}
+                    size={45}
+                  />
+                </div>
+              </Card>
+            </div>
+
+            <AddDownloadClientModal
+              isOpen={isAddDownloadClientModalOpen}
+              onModalClose={this.onAddDownloadClientModalClose}
+            />
+
+            <EditDownloadClientModalConnector
+              isOpen={isEditDownloadClientModalOpen}
+              onModalClose={this.onEditDownloadClientModalClose}
+            />
+          </PageSectionContent>
+        </FieldSet>
+      </div>
     );
   }
 }

frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalContent.js

@@ -17,6 +17,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { icons, inputTypes, kinds } from 'Helpers/Props';
+import AdvancedSettingsButton from 'Settings/AdvancedSettingsButton';
 import translate from 'Utilities/String/translate';
 import AddCategoryModalConnector from './Categories/AddCategoryModalConnector';
 import Category from './Categories/Category';
@@ -61,6 +62,7 @@ class EditDownloadClientModalContent extends Component {
       onModalClose,
       onSavePress,
       onTestPress,
+      onAdvancedSettingsPress,
       onDeleteDownloadClientPress,
       onConfirmDeleteCategory,
       ...otherProps
@@ -219,6 +221,12 @@ class EditDownloadClientModalContent extends Component {
               </Button>
           }
 
+          <AdvancedSettingsButton
+            advancedSettings={advancedSettings}
+            onAdvancedSettingsPress={onAdvancedSettingsPress}
+            showLabel={false}
+          />
+
           <SpinnerErrorButton
             isSpinning={isTesting}
             error={saveError}
@@ -260,6 +268,7 @@ EditDownloadClientModalContent.propTypes = {
   onModalClose: PropTypes.func.isRequired,
   onSavePress: PropTypes.func.isRequired,
   onTestPress: PropTypes.func.isRequired,
+  onAdvancedSettingsPress: PropTypes.func.isRequired,
   onDeleteDownloadClientPress: PropTypes.func,
   onConfirmDeleteCategory: PropTypes.func.isRequired
 };

frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalContentConnector.js

@@ -2,7 +2,15 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { deleteDownloadClientCategory, fetchDownloadClientCategories, saveDownloadClient, setDownloadClientFieldValue, setDownloadClientValue, testDownloadClient } from 'Store/Actions/settingsActions';
+import {
+  deleteDownloadClientCategory,
+  fetchDownloadClientCategories,
+  saveDownloadClient,
+  setDownloadClientFieldValue,
+  setDownloadClientValue,
+  testDownloadClient,
+  toggleAdvancedSettings
+} from 'Store/Actions/settingsActions';
 import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
 import EditDownloadClientModalContent from './EditDownloadClientModalContent';
 
@@ -27,7 +35,8 @@ const mapDispatchToProps = {
   saveDownloadClient,
   testDownloadClient,
   fetchDownloadClientCategories,
-  deleteDownloadClientCategory
+  deleteDownloadClientCategory,
+  toggleAdvancedSettings
 };
 
 class EditDownloadClientModalContentConnector extends Component {
@@ -68,6 +77,10 @@ class EditDownloadClientModalContentConnector extends Component {
     this.props.testDownloadClient({ id: this.props.id });
   };
 
+  onAdvancedSettingsPress = () => {
+    this.props.toggleAdvancedSettings();
+  };
+
   onConfirmDeleteCategory = (id) => {
     this.props.deleteDownloadClientCategory({ id });
   };
@@ -81,6 +94,7 @@ class EditDownloadClientModalContentConnector extends Component {
         {...this.props}
         onSavePress={this.onSavePress}
         onTestPress={this.onTestPress}
+        onAdvancedSettingsPress={this.onAdvancedSettingsPress}
         onInputChange={this.onInputChange}
         onFieldChange={this.onFieldChange}
         onConfirmDeleteCategory={this.onConfirmDeleteCategory}
@@ -102,6 +116,7 @@ EditDownloadClientModalContentConnector.propTypes = {
   setDownloadClientFieldValue: PropTypes.func.isRequired,
   saveDownloadClient: PropTypes.func.isRequired,
   testDownloadClient: PropTypes.func.isRequired,
+  toggleAdvancedSettings: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 

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

@@ -30,7 +30,7 @@ const enableOptions = [
     get value() {
       return translate('NoChange');
     },
-    disabled: true,
+    isDisabled: true,
   },
   {
     key: 'enabled',

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

@@ -14,9 +14,11 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import useSelectState from 'Helpers/Hooks/useSelectState';
 import { kinds } from 'Helpers/Props';
+import SortDirection from 'Helpers/Props/SortDirection';
 import {
   bulkDeleteDownloadClients,
   bulkEditDownloadClients,
+  setManageDownloadClientsSort,
 } from 'Store/Actions/settingsActions';
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import { SelectStateInputProps } from 'typings/props';
@@ -61,6 +63,8 @@ const COLUMNS = [
 
 interface ManageDownloadClientsModalContentProps {
   onModalClose(): void;
+  sortKey?: string;
+  sortDirection?: SortDirection;
 }
 
 function ManageDownloadClientsModalContent(
@@ -75,6 +79,8 @@ function ManageDownloadClientsModalContent(
     isSaving,
     error,
     items,
+    sortKey,
+    sortDirection,
   }: DownloadClientAppState = useSelector(
     createClientSideCollectionSelector('settings.downloadClients')
   );
@@ -93,6 +99,13 @@ function ManageDownloadClientsModalContent(
 
   const selectedCount = selectedIds.length;
 
+  const onSortPress = useCallback(
+    (value: string) => {
+      dispatch(setManageDownloadClientsSort({ sortKey: value }));
+    },
+    [dispatch]
+  );
+
   const onDeletePress = useCallback(() => {
     setIsDeleteModalOpen(true);
   }, [setIsDeleteModalOpen]);
@@ -174,6 +187,9 @@ function ManageDownloadClientsModalContent(
             allSelected={allSelected}
             allUnselected={allUnselected}
             onSelectAllChange={onSelectAllChange}
+            sortKey={sortKey}
+            sortDirection={sortDirection}
+            onSortPress={onSortPress}
           >
             <TableBody>
               {items.map((item) => {

frontend/src/Settings/General/SecuritySettings.js

@@ -124,6 +124,7 @@ class SecuritySettings extends Component {
       authenticationRequired,
       username,
       password,
+      passwordConfirmation,
       apiKey,
       certificateValidation
     } = settings;
@@ -139,8 +140,8 @@ class SecuritySettings extends Component {
             type={inputTypes.SELECT}
             name="authenticationMethod"
             values={authenticationMethodOptions}
-            helpText={translate('AuthenticationMethodHelpText', { appName: 'Prowlarr' })}
-            helpTextWarning={translate('AuthenticationRequiredWarning', { appName: 'Prowlarr' })}
+            helpText={translate('AuthenticationMethodHelpText')}
+            helpTextWarning={translate('AuthenticationRequiredWarning')}
             onChange={onInputChange}
             {...authenticationMethod}
           />
@@ -193,6 +194,21 @@ class SecuritySettings extends Component {
             null
         }
 
+        {
+          authenticationEnabled ?
+            <FormGroup>
+              <FormLabel>{translate('PasswordConfirmation')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.PASSWORD}
+                name="passwordConfirmation"
+                onChange={onInputChange}
+                {...passwordConfirmation}
+              />
+            </FormGroup> :
+            null
+        }
+
         <FormGroup>
           <FormLabel>{translate('ApiKey')}</FormLabel>
 

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

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

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

@@ -2,7 +2,13 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { saveIndexerProxy, setIndexerProxyFieldValue, setIndexerProxyValue, testIndexerProxy } from 'Store/Actions/settingsActions';
+import {
+  saveIndexerProxy,
+  setIndexerProxyFieldValue,
+  setIndexerProxyValue,
+  testIndexerProxy,
+  toggleAdvancedSettings
+} from 'Store/Actions/settingsActions';
 import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
 import EditIndexerProxyModalContent from './EditIndexerProxyModalContent';
 
@@ -23,7 +29,8 @@ const mapDispatchToProps = {
   setIndexerProxyValue,
   setIndexerProxyFieldValue,
   saveIndexerProxy,
-  testIndexerProxy
+  testIndexerProxy,
+  toggleAdvancedSettings
 };
 
 class EditIndexerProxyModalContentConnector extends Component {
@@ -56,6 +63,10 @@ class EditIndexerProxyModalContentConnector extends Component {
     this.props.testIndexerProxy({ id: this.props.id });
   };
 
+  onAdvancedSettingsPress = () => {
+    this.props.toggleAdvancedSettings();
+  };
+
   //
   // Render
 
@@ -65,6 +76,7 @@ class EditIndexerProxyModalContentConnector extends Component {
         {...this.props}
         onSavePress={this.onSavePress}
         onTestPress={this.onTestPress}
+        onAdvancedSettingsPress={this.onAdvancedSettingsPress}
         onInputChange={this.onInputChange}
         onFieldChange={this.onFieldChange}
       />
@@ -82,6 +94,7 @@ EditIndexerProxyModalContentConnector.propTypes = {
   setIndexerProxyFieldValue: PropTypes.func.isRequired,
   saveIndexerProxy: PropTypes.func.isRequired,
   testIndexerProxy: PropTypes.func.isRequired,
+  toggleAdvancedSettings: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 

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

@@ -14,6 +14,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
+import AdvancedSettingsButton from 'Settings/AdvancedSettingsButton';
 import translate from 'Utilities/String/translate';
 import NotificationEventItems from './NotificationEventItems';
 import styles from './EditNotificationModalContent.css';
@@ -32,6 +33,7 @@ function EditNotificationModalContent(props) {
     onModalClose,
     onSavePress,
     onTestPress,
+    onAdvancedSettingsPress,
     onDeleteNotificationPress,
     ...otherProps
   } = props;
@@ -136,6 +138,12 @@ function EditNotificationModalContent(props) {
             </Button>
         }
 
+        <AdvancedSettingsButton
+          advancedSettings={advancedSettings}
+          onAdvancedSettingsPress={onAdvancedSettingsPress}
+          showLabel={false}
+        />
+
         <SpinnerErrorButton
           isSpinning={isTesting}
           error={saveError}
@@ -175,6 +183,7 @@ EditNotificationModalContent.propTypes = {
   onModalClose: PropTypes.func.isRequired,
   onSavePress: PropTypes.func.isRequired,
   onTestPress: PropTypes.func.isRequired,
+  onAdvancedSettingsPress: PropTypes.func.isRequired,
   onDeleteNotificationPress: PropTypes.func
 };
 

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

@@ -2,7 +2,13 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { saveNotification, setNotificationFieldValue, setNotificationValue, testNotification } from 'Store/Actions/settingsActions';
+import {
+  saveNotification,
+  setNotificationFieldValue,
+  setNotificationValue,
+  testNotification,
+  toggleAdvancedSettings
+} from 'Store/Actions/settingsActions';
 import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
 import EditNotificationModalContent from './EditNotificationModalContent';
 
@@ -23,7 +29,8 @@ const mapDispatchToProps = {
   setNotificationValue,
   setNotificationFieldValue,
   saveNotification,
-  testNotification
+  testNotification,
+  toggleAdvancedSettings
 };
 
 class EditNotificationModalContentConnector extends Component {
@@ -56,6 +63,10 @@ class EditNotificationModalContentConnector extends Component {
     this.props.testNotification({ id: this.props.id });
   };
 
+  onAdvancedSettingsPress = () => {
+    this.props.toggleAdvancedSettings();
+  };
+
   //
   // Render
 
@@ -65,6 +76,7 @@ class EditNotificationModalContentConnector extends Component {
         {...this.props}
         onSavePress={this.onSavePress}
         onTestPress={this.onTestPress}
+        onAdvancedSettingsPress={this.onAdvancedSettingsPress}
         onInputChange={this.onInputChange}
         onFieldChange={this.onFieldChange}
       />
@@ -82,6 +94,7 @@ EditNotificationModalContentConnector.propTypes = {
   setNotificationFieldValue: PropTypes.func.isRequired,
   saveNotification: PropTypes.func.isRequired,
   testNotification: PropTypes.func.isRequired,
+  toggleAdvancedSettings: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 

frontend/src/Settings/PendingChangesModal.js

@@ -15,12 +15,17 @@ function PendingChangesModal(props) {
     isOpen,
     onConfirm,
     onCancel,
-    bindShortcut
+    bindShortcut,
+    unbindShortcut
   } = props;
 
   useEffect(() => {
-    bindShortcut('enter', onConfirm);
-  }, [bindShortcut, onConfirm]);
+    if (isOpen) {
+      bindShortcut('enter', onConfirm);
+
+      return () => unbindShortcut('enter', onConfirm);
+    }
+  }, [bindShortcut, unbindShortcut, isOpen, onConfirm]);
 
   return (
     <Modal
@@ -61,7 +66,8 @@ PendingChangesModal.propTypes = {
   kind: PropTypes.oneOf(kinds.all),
   onConfirm: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
-  bindShortcut: PropTypes.func.isRequired
+  bindShortcut: PropTypes.func.isRequired,
+  unbindShortcut: PropTypes.func.isRequired
 };
 
 PendingChangesModal.defaultProps = {

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

@@ -96,7 +96,7 @@ class AppProfile extends Component {
               kind={enableRss ? kinds.SUCCESS : kinds.DISABLED}
               outline={!enableRss}
             >
-              {translate('RSS')}
+              {translate('Rss')}
             </Label>
           }
 

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

@@ -97,20 +97,6 @@ class EditAppProfileModalContent extends Component {
                     />
                   </FormGroup>
 
-                  <FormGroup>
-                    <FormLabel>
-                      {translate('EnableInteractiveSearch')}
-                    </FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.CHECK}
-                      name="enableInteractiveSearch"
-                      {...enableInteractiveSearch}
-                      helpText={translate('EnableInteractiveSearchHelpText')}
-                      onChange={onInputChange}
-                    />
-                  </FormGroup>
-
                   <FormGroup>
                     <FormLabel>
                       {translate('EnableAutomaticSearch')}
@@ -125,6 +111,20 @@ class EditAppProfileModalContent extends Component {
                     />
                   </FormGroup>
 
+                  <FormGroup>
+                    <FormLabel>
+                      {translate('EnableInteractiveSearch')}
+                    </FormLabel>
+
+                    <FormInputGroup
+                      type={inputTypes.CHECK}
+                      name="enableInteractiveSearch"
+                      {...enableInteractiveSearch}
+                      helpText={translate('EnableInteractiveSearchHelpText')}
+                      onChange={onInputChange}
+                    />
+                  </FormGroup>
+
                   <FormGroup>
                     <FormLabel>
                       {translate('MinimumSeeders')}

frontend/src/Settings/Tags/TagsConnector.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchApplications, fetchIndexerProxies, fetchNotifications } from 'Store/Actions/settingsActions';
-import { fetchTagDetails } from 'Store/Actions/tagActions';
+import { fetchTagDetails, fetchTags } from 'Store/Actions/tagActions';
 import Tags from './Tags';
 
 function createMapStateToProps() {
@@ -25,6 +25,7 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
+  dispatchFetchTags: fetchTags,
   dispatchFetchTagDetails: fetchTagDetails,
   dispatchFetchNotifications: fetchNotifications,
   dispatchFetchIndexerProxies: fetchIndexerProxies,
@@ -38,12 +39,14 @@ class MetadatasConnector extends Component {
 
   componentDidMount() {
     const {
+      dispatchFetchTags,
       dispatchFetchTagDetails,
       dispatchFetchNotifications,
       dispatchFetchIndexerProxies,
       dispatchFetchApplications
     } = this.props;
 
+    dispatchFetchTags();
     dispatchFetchTagDetails();
     dispatchFetchNotifications();
     dispatchFetchIndexerProxies();
@@ -63,6 +66,7 @@ class MetadatasConnector extends Component {
 }
 
 MetadatasConnector.propTypes = {
+  dispatchFetchTags: PropTypes.func.isRequired,
   dispatchFetchTagDetails: PropTypes.func.isRequired,
   dispatchFetchNotifications: PropTypes.func.isRequired,
   dispatchFetchIndexerProxies: PropTypes.func.isRequired,

frontend/src/Settings/UI/UISettings.js

@@ -21,19 +21,19 @@ export const firstDayOfWeekOptions = [
 ];
 
 export const weekColumnOptions = [
-  { key: 'ddd M/D', value: 'Tue 3/25' },
-  { key: 'ddd MM/DD', value: 'Tue 03/25' },
-  { key: 'ddd D/M', value: 'Tue 25/3' },
-  { key: 'ddd DD/MM', value: 'Tue 25/03' }
+  { key: 'ddd M/D', value: 'Tue 3/25', hint: 'ddd M/D' },
+  { key: 'ddd MM/DD', value: 'Tue 03/25', hint: 'ddd MM/DD' },
+  { key: 'ddd D/M', value: 'Tue 25/3', hint: 'ddd D/M' },
+  { key: 'ddd DD/MM', value: 'Tue 25/03', hint: 'ddd DD/MM' }
 ];
 
 const shortDateFormatOptions = [
-  { key: 'MMM D YYYY', value: 'Mar 25 2014' },
-  { key: 'DD MMM YYYY', value: '25 Mar 2014' },
-  { key: 'MM/D/YYYY', value: '03/25/2014' },
-  { key: 'MM/DD/YYYY', value: '03/25/2014' },
-  { key: 'DD/MM/YYYY', value: '25/03/2014' },
-  { key: 'YYYY-MM-DD', value: '2014-03-25' }
+  { key: 'MMM D YYYY', value: 'Mar 25 2014', hint: 'MMM D YYYY' },
+  { key: 'DD MMM YYYY', value: '25 Mar 2014', hint: 'DD MMM YYYY' },
+  { key: 'MM/D/YYYY', value: '03/25/2014', hint: 'MM/D/YYYY' },
+  { key: 'MM/DD/YYYY', value: '03/25/2014', hint: 'MM/DD/YYYY' },
+  { key: 'DD/MM/YYYY', value: '25/03/2014', hint: 'DD/MM/YYYY' },
+  { key: 'YYYY-MM-DD', value: '2014-03-25', hint: 'YYYY-MM-DD' }
 ];
 
 const longDateFormatOptions = [
@@ -176,6 +176,13 @@ class UISettings extends Component {
                       helpTextWarning={translate('UILanguageHelpTextWarning')}
                       onChange={onInputChange}
                       {...settings.uiLanguage}
+                      errors={
+                        languages.some((language) => language.key === settings.uiLanguage.value) ?
+                          settings.uiLanguage.errors :
+                          [
+                            ...settings.uiLanguage.errors,
+                            { message: translate('InvalidUILanguage') }
+                          ]}
                     />
                   </FormGroup>
                 </FieldSet>

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

@@ -6,6 +6,8 @@ import getSectionState from 'Utilities/State/getSectionState';
 import { set, updateServerSideCollection } from '../baseActions';
 
 function createFetchServerSideCollectionHandler(section, url, fetchDataAugmenter) {
+  const [baseSection] = section.split('.');
+
   return function(getState, payload, dispatch) {
     dispatch(set({ section, isFetching: true }));
 
@@ -25,10 +27,13 @@ function createFetchServerSideCollectionHandler(section, url, fetchDataAugmenter
 
     const {
       selectedFilterKey,
-      filters,
-      customFilters
+      filters
     } = sectionState;
 
+    const customFilters = getState().customFilters.items.filter((customFilter) => {
+      return customFilter.type === section || customFilter.type === baseSection;
+    });
+
     const selectedFilters = findSelectedFilters(selectedFilterKey, filters, customFilters);
 
     selectedFilters.forEach((filter) => {
@@ -37,7 +42,8 @@ function createFetchServerSideCollectionHandler(section, url, fetchDataAugmenter
 
     const promise = createAjaxRequest({
       url,
-      data
+      data,
+      traditional: true
     }).request;
 
     promise.done((response) => {

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

@@ -1,4 +1,5 @@
 import { createAction } from 'redux-actions';
+import { sortDirections } from 'Helpers/Props';
 import createBulkEditItemHandler from 'Store/Actions/Creators/createBulkEditItemHandler';
 import createBulkRemoveItemHandler from 'Store/Actions/Creators/createBulkRemoveItemHandler';
 import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
@@ -7,6 +8,7 @@ import createRemoveItemHandler from 'Store/Actions/Creators/createRemoveItemHand
 import createSaveProviderHandler, { createCancelSaveProviderHandler } from 'Store/Actions/Creators/createSaveProviderHandler';
 import createTestAllProvidersHandler from 'Store/Actions/Creators/createTestAllProvidersHandler';
 import createTestProviderHandler, { createCancelTestProviderHandler } from 'Store/Actions/Creators/createTestProviderHandler';
+import createSetClientSideCollectionSortReducer from 'Store/Actions/Creators/Reducers/createSetClientSideCollectionSortReducer';
 import createSetProviderFieldValueReducer from 'Store/Actions/Creators/Reducers/createSetProviderFieldValueReducer';
 import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
 import { createThunk } from 'Store/thunks';
@@ -30,9 +32,10 @@ export const CANCEL_SAVE_APPLICATION = 'settings/applications/cancelSaveApplicat
 export const DELETE_APPLICATION = 'settings/applications/deleteApplication';
 export const TEST_APPLICATION = 'settings/applications/testApplication';
 export const CANCEL_TEST_APPLICATION = 'settings/applications/cancelTestApplication';
-export const TEST_ALL_APPLICATIONS = 'indexers/testAllApplications';
+export const TEST_ALL_APPLICATIONS = 'settings/applications/testAllApplications';
 export const BULK_EDIT_APPLICATIONS = 'settings/applications/bulkEditApplications';
 export const BULK_DELETE_APPLICATIONS = 'settings/applications/bulkDeleteApplications';
+export const SET_MANAGE_APPLICATIONS_SORT = 'settings/applications/setManageApplicationsSort';
 
 //
 // Action Creators
@@ -49,6 +52,7 @@ export const cancelTestApplication = createThunk(CANCEL_TEST_APPLICATION);
 export const testAllApplications = createThunk(TEST_ALL_APPLICATIONS);
 export const bulkEditApplications = createThunk(BULK_EDIT_APPLICATIONS);
 export const bulkDeleteApplications = createThunk(BULK_DELETE_APPLICATIONS);
+export const setManageApplicationsSort = createAction(SET_MANAGE_APPLICATIONS_SORT);
 
 export const setApplicationValue = createAction(SET_APPLICATION_VALUE, (payload) => {
   return {
@@ -88,7 +92,14 @@ export default {
     isTesting: false,
     isTestingAll: false,
     items: [],
-    pendingChanges: {}
+    pendingChanges: {},
+    sortKey: 'name',
+    sortDirection: sortDirections.ASCENDING,
+    sortPredicates: {
+      name: function(item) {
+        return item.name.toLowerCase();
+      }
+    }
   },
 
   //
@@ -121,7 +132,10 @@ export default {
 
         return selectedSchema;
       });
-    }
+    },
+
+    [SET_MANAGE_APPLICATIONS_SORT]: createSetClientSideCollectionSortReducer(section)
+
   }
 
 };

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

@@ -1,4 +1,5 @@
 import { createAction } from 'redux-actions';
+import { sortDirections } from 'Helpers/Props';
 import createBulkEditItemHandler from 'Store/Actions/Creators/createBulkEditItemHandler';
 import createBulkRemoveItemHandler from 'Store/Actions/Creators/createBulkRemoveItemHandler';
 import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
@@ -7,6 +8,7 @@ import createRemoveItemHandler from 'Store/Actions/Creators/createRemoveItemHand
 import createSaveProviderHandler, { createCancelSaveProviderHandler } from 'Store/Actions/Creators/createSaveProviderHandler';
 import createTestAllProvidersHandler from 'Store/Actions/Creators/createTestAllProvidersHandler';
 import createTestProviderHandler, { createCancelTestProviderHandler } from 'Store/Actions/Creators/createTestProviderHandler';
+import createSetClientSideCollectionSortReducer from 'Store/Actions/Creators/Reducers/createSetClientSideCollectionSortReducer';
 import createSetProviderFieldValueReducer from 'Store/Actions/Creators/Reducers/createSetProviderFieldValueReducer';
 import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
 import { createThunk } from 'Store/thunks';
@@ -34,6 +36,7 @@ export const CANCEL_TEST_DOWNLOAD_CLIENT = 'settings/downloadClients/cancelTestD
 export const TEST_ALL_DOWNLOAD_CLIENTS = 'settings/downloadClients/testAllDownloadClients';
 export const BULK_EDIT_DOWNLOAD_CLIENTS = 'settings/downloadClients/bulkEditDownloadClients';
 export const BULK_DELETE_DOWNLOAD_CLIENTS = 'settings/downloadClients/bulkDeleteDownloadClients';
+export const SET_MANAGE_DOWNLOAD_CLIENTS_SORT = 'settings/downloadClients/setManageDownloadClientsSort';
 
 //
 // Action Creators
@@ -50,6 +53,7 @@ export const cancelTestDownloadClient = createThunk(CANCEL_TEST_DOWNLOAD_CLIENT)
 export const testAllDownloadClients = createThunk(TEST_ALL_DOWNLOAD_CLIENTS);
 export const bulkEditDownloadClients = createThunk(BULK_EDIT_DOWNLOAD_CLIENTS);
 export const bulkDeleteDownloadClients = createThunk(BULK_DELETE_DOWNLOAD_CLIENTS);
+export const setManageDownloadClientsSort = createAction(SET_MANAGE_DOWNLOAD_CLIENTS_SORT);
 
 export const setDownloadClientValue = createAction(SET_DOWNLOAD_CLIENT_VALUE, (payload) => {
   return {
@@ -89,7 +93,14 @@ export default {
     isTesting: false,
     isTestingAll: false,
     items: [],
-    pendingChanges: {}
+    pendingChanges: {},
+    sortKey: 'name',
+    sortDirection: sortDirections.ASCENDING,
+    sortPredicates: {
+      name: function(item) {
+        return item.name.toLowerCase();
+      }
+    }
   },
 
   //
@@ -147,7 +158,10 @@ export default {
 
         return selectedSchema;
       });
-    }
+    },
+
+    [SET_MANAGE_DOWNLOAD_CLIENTS_SORT]: createSetClientSideCollectionSortReducer(section)
+
   }
 
 };

frontend/src/Store/Actions/historyActions.js

@@ -1,5 +1,5 @@
 import { createAction } from 'redux-actions';
-import { filterTypes, sortDirections } from 'Helpers/Props';
+import { filterBuilderTypes, filterBuilderValueTypes, filterTypes, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createAjaxRequest from 'Utilities/createAjaxRequest';
 import serverSideCollectionHandlers from 'Utilities/serverSideCollectionHandlers';
@@ -159,6 +159,27 @@ export const defaultState = {
         }
       ]
     }
+  ],
+
+  filterBuilderProps: [
+    {
+      name: 'eventType',
+      label: () => translate('EventType'),
+      type: filterBuilderTypes.EQUAL,
+      valueType: filterBuilderValueTypes.HISTORY_EVENT_TYPE
+    },
+    {
+      name: 'indexerIds',
+      label: () => translate('Indexer'),
+      type: filterBuilderTypes.EQUAL,
+      valueType: filterBuilderValueTypes.INDEXER
+    },
+    {
+      name: 'successful',
+      label: () => translate('Successful'),
+      type: filterBuilderTypes.EQUAL,
+      valueType: filterBuilderValueTypes.BOOL
+    }
   ]
 
 };

frontend/src/Store/Actions/indexerActions.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { createAction } from 'redux-actions';
-import { sortDirections } from 'Helpers/Props';
+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';
@@ -69,6 +69,28 @@ export const filterPredicates = {
     item.fields.find((field) => field.name === 'vipExpiration')?.value ?? null;
 
     return dateFilterPredicate(vipExpiration, filterValue, type);
+  },
+
+  categories: function(item, filterValue, type) {
+    const predicate = filterTypePredicates[type];
+
+    const { categories = [] } = item.capabilities || {};
+
+    const categoryList = categories
+      .filter((category) => category.id < 100000)
+      .reduce((acc, element) => {
+        acc.push(element.id);
+
+        if (element.subCategories && element.subCategories.length > 0) {
+          element.subCategories.forEach((subCat) => {
+            acc.push(subCat.id);
+          });
+        }
+
+        return acc;
+      }, []);
+
+    return predicate(categoryList, filterValue);
   }
 };
 
@@ -203,7 +225,13 @@ export const reducers = createHandleActions({
     delete selectedSchema.name;
 
     selectedSchema.fields = selectedSchema.fields.map((field) => {
-      return { ...field };
+      const newField = { ...field };
+
+      if (newField.privacy === 'apiKey' || newField.privacy === 'password') {
+        newField.value = '';
+      }
+
+      return newField;
     });
 
     newState.selectedSchema = selectedSchema;

frontend/src/Store/Actions/indexerIndexActions.js

@@ -37,12 +37,18 @@ export const defaultState = {
       isVisible: true,
       isModifiable: false
     },
+    {
+      name: 'id',
+      columnLabel: () => translate('IndexerId'),
+      label: () => translate('Id'),
+      isSortable: true,
+      isVisible: false
+    },
     {
       name: 'sortName',
       label: () => translate('IndexerName'),
       isSortable: true,
-      isVisible: true,
-      isModifiable: false
+      isVisible: true
     },
     {
       name: 'protocol',
@@ -180,6 +186,12 @@ export const defaultState = {
       type: filterBuilderTypes.EXACT,
       valueType: filterBuilderValueTypes.APP_PROFILE
     },
+    {
+      name: 'categories',
+      label: () => translate('Categories'),
+      type: filterBuilderTypes.ARRAY,
+      valueType: filterBuilderValueTypes.CATEGORY
+    },
     {
       name: 'tags',
       label: () => translate('Tags'),

frontend/src/Store/Actions/indexerStatsActions.js

@@ -74,8 +74,9 @@ export const defaultState = {
       valueType: filterBuilderValueTypes.TAG
     }
   ],
-  selectedFilterKey: 'all',
-  customFilters: []
+
+  selectedFilterKey: 'all'
+
 };
 
 export const persistState = [

frontend/src/Store/Actions/releaseActions.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
 import Icon from 'Components/Icon';
-import { filterBuilderTypes, filterBuilderValueTypes, icons, sortDirections } from 'Helpers/Props';
+import { filterBuilderTypes, filterBuilderValueTypes, filterTypePredicates, icons, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createAjaxRequest from 'Utilities/createAjaxRequest';
 import getSectionState from 'Utilities/State/getSectionState';
@@ -169,6 +169,18 @@ export const defaultState = {
     }
   ],
 
+  filterPredicates: {
+    peers: function(item, filterValue, type) {
+      const predicate = filterTypePredicates[type];
+
+      const seeders = item.seeders || 0;
+      const leechers = item.leechers || 0;
+      const peers = seeders + leechers;
+
+      return predicate(peers, filterValue);
+    }
+  },
+
   filterBuilderProps: [
     {
       name: 'title',
@@ -357,8 +369,9 @@ export const actionHandlers = handleThunks({
 
     promise.done((data) => {
       dispatch(batchActions([
-        ...data.map((release) => {
+        ...data.map(({ guid }) => {
           return updateRelease({
+            guid,
             isGrabbing: false,
             isGrabbed: true,
             grabError: null

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

@@ -22,9 +22,9 @@ class About extends Component {
       isNetCore,
       isDocker,
       runtimeVersion,
-      migrationVersion,
       databaseVersion,
       databaseType,
+      migrationVersion,
       appData,
       startupPath,
       mode,
@@ -66,13 +66,13 @@ class About extends Component {
           }
 
           <DescriptionListItem
-            title={translate('DBMigration')}
-            data={migrationVersion}
+            title={translate('Database')}
+            data={`${titleCase(databaseType)} ${databaseVersion}`}
           />
 
           <DescriptionListItem
-            title={translate('Database')}
-            data={`${titleCase(databaseType)} ${databaseVersion}`}
+            title={translate('DatabaseMigration')}
+            data={migrationVersion}
           />
 
           <DescriptionListItem

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

@@ -41,6 +41,14 @@ function getInternalLink(source) {
           to="/settings/connect"
         />
       );
+    case 'IndexerProxyStatusCheck':
+      return (
+        <IconButton
+          name={icons.SETTINGS}
+          title={translate('Settings')}
+          to="/settings/indexers"
+        />
+      );
     case 'IndexerRssCheck':
     case 'IndexerSearchCheck':
     case 'IndexerStatusCheck':

frontend/src/System/Tasks/Queued/QueuedTaskRow.css

@@ -10,15 +10,6 @@
   width: 100%;
 }
 
-.commandName {
-  display: inline-block;
-  min-width: 220px;
-}
-
-.userAgent {
-  color: #b0b0b0;
-}
-
 .queued,
 .started,
 .ended {

frontend/src/System/Tasks/Queued/QueuedTaskRow.css.d.ts

@@ -2,14 +2,12 @@
 // Please do not change this file!
 interface CssExports {
   'actions': string;
-  'commandName': string;
   'duration': string;
   'ended': string;
   'queued': string;
   'started': string;
   'trigger': string;
   'triggerContent': string;
-  'userAgent': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/System/Tasks/Queued/QueuedTaskRow.js

@@ -1,279 +0,0 @@
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Icon from 'Components/Icon';
-import IconButton from 'Components/Link/IconButton';
-import ConfirmModal from 'Components/Modal/ConfirmModal';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import TableRow from 'Components/Table/TableRow';
-import { icons, kinds } from 'Helpers/Props';
-import formatDate from 'Utilities/Date/formatDate';
-import formatDateTime from 'Utilities/Date/formatDateTime';
-import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
-import titleCase from 'Utilities/String/titleCase';
-import translate from 'Utilities/String/translate';
-import styles from './QueuedTaskRow.css';
-
-function getStatusIconProps(status, message) {
-  const title = titleCase(status);
-
-  switch (status) {
-    case 'queued':
-      return {
-        name: icons.PENDING,
-        title
-      };
-
-    case 'started':
-      return {
-        name: icons.REFRESH,
-        isSpinning: true,
-        title
-      };
-
-    case 'completed':
-      return {
-        name: icons.CHECK,
-        kind: kinds.SUCCESS,
-        title: message === 'Completed' ? title : `${title}: ${message}`
-      };
-
-    case 'failed':
-      return {
-        name: icons.FATAL,
-        kind: kinds.DANGER,
-        title: `${title}: ${message}`
-      };
-
-    default:
-      return {
-        name: icons.UNKNOWN,
-        title
-      };
-  }
-}
-
-function getFormattedDates(props) {
-  const {
-    queued,
-    started,
-    ended,
-    showRelativeDates,
-    shortDateFormat
-  } = props;
-
-  if (showRelativeDates) {
-    return {
-      queuedAt: moment(queued).fromNow(),
-      startedAt: started ? moment(started).fromNow() : '-',
-      endedAt: ended ? moment(ended).fromNow() : '-'
-    };
-  }
-
-  return {
-    queuedAt: formatDate(queued, shortDateFormat),
-    startedAt: started ? formatDate(started, shortDateFormat) : '-',
-    endedAt: ended ? formatDate(ended, shortDateFormat) : '-'
-  };
-}
-
-class QueuedTaskRow extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      ...getFormattedDates(props),
-      isCancelConfirmModalOpen: false
-    };
-
-    this._updateTimeoutId = null;
-  }
-
-  componentDidMount() {
-    this.setUpdateTimer();
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      queued,
-      started,
-      ended
-    } = this.props;
-
-    if (
-      queued !== prevProps.queued ||
-      started !== prevProps.started ||
-      ended !== prevProps.ended
-    ) {
-      this.setState(getFormattedDates(this.props));
-    }
-  }
-
-  componentWillUnmount() {
-    if (this._updateTimeoutId) {
-      this._updateTimeoutId = clearTimeout(this._updateTimeoutId);
-    }
-  }
-
-  //
-  // Control
-
-  setUpdateTimer() {
-    this._updateTimeoutId = setTimeout(() => {
-      this.setState(getFormattedDates(this.props));
-      this.setUpdateTimer();
-    }, 30000);
-  }
-
-  //
-  // Listeners
-
-  onCancelPress = () => {
-    this.setState({
-      isCancelConfirmModalOpen: true
-    });
-  };
-
-  onAbortCancel = () => {
-    this.setState({
-      isCancelConfirmModalOpen: false
-    });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      trigger,
-      commandName,
-      queued,
-      started,
-      ended,
-      status,
-      duration,
-      message,
-      clientUserAgent,
-      longDateFormat,
-      timeFormat,
-      onCancelPress
-    } = this.props;
-
-    const {
-      queuedAt,
-      startedAt,
-      endedAt,
-      isCancelConfirmModalOpen
-    } = this.state;
-
-    let triggerIcon = icons.QUICK;
-
-    if (trigger === 'manual') {
-      triggerIcon = icons.INTERACTIVE;
-    } else if (trigger === 'scheduled') {
-      triggerIcon = icons.SCHEDULED;
-    }
-
-    return (
-      <TableRow>
-        <TableRowCell className={styles.trigger}>
-          <span className={styles.triggerContent}>
-            <Icon
-              name={triggerIcon}
-              title={titleCase(trigger)}
-            />
-
-            <Icon
-              {...getStatusIconProps(status, message)}
-            />
-          </span>
-        </TableRowCell>
-
-        <TableRowCell>
-          <span className={styles.commandName}>
-            {commandName}
-          </span>
-          {
-            clientUserAgent ?
-              <span className={styles.userAgent} title={translate('UserAgentProvidedByTheAppThatCalledTheAPI')}>
-                from: {clientUserAgent}
-              </span> :
-              null
-          }
-        </TableRowCell>
-
-        <TableRowCell
-          className={styles.queued}
-          title={formatDateTime(queued, longDateFormat, timeFormat)}
-        >
-          {queuedAt}
-        </TableRowCell>
-
-        <TableRowCell
-          className={styles.started}
-          title={formatDateTime(started, longDateFormat, timeFormat)}
-        >
-          {startedAt}
-        </TableRowCell>
-
-        <TableRowCell
-          className={styles.ended}
-          title={formatDateTime(ended, longDateFormat, timeFormat)}
-        >
-          {endedAt}
-        </TableRowCell>
-
-        <TableRowCell className={styles.duration}>
-          {formatTimeSpan(duration)}
-        </TableRowCell>
-
-        <TableRowCell
-          className={styles.actions}
-        >
-          {
-            status === 'queued' &&
-              <IconButton
-                title={translate('RemovedFromTaskQueue')}
-                name={icons.REMOVE}
-                onPress={this.onCancelPress}
-              />
-          }
-        </TableRowCell>
-
-        <ConfirmModal
-          isOpen={isCancelConfirmModalOpen}
-          kind={kinds.DANGER}
-          title={translate('Cancel')}
-          message={translate('CancelPendingTask')}
-          confirmLabel={translate('YesCancel')}
-          cancelLabel={translate('NoLeaveIt')}
-          onConfirm={onCancelPress}
-          onCancel={this.onAbortCancel}
-        />
-      </TableRow>
-    );
-  }
-}
-
-QueuedTaskRow.propTypes = {
-  trigger: PropTypes.string.isRequired,
-  commandName: PropTypes.string.isRequired,
-  queued: PropTypes.string.isRequired,
-  started: PropTypes.string,
-  ended: PropTypes.string,
-  status: PropTypes.string.isRequired,
-  duration: PropTypes.string,
-  message: PropTypes.string,
-  clientUserAgent: PropTypes.string,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  onCancelPress: PropTypes.func.isRequired
-};
-
-export default QueuedTaskRow;

frontend/src/System/Tasks/Queued/QueuedTaskRow.tsx

@@ -0,0 +1,238 @@
+import moment from 'moment';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { CommandBody } from 'Commands/Command';
+import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRow from 'Components/Table/TableRow';
+import useModalOpenState from 'Helpers/Hooks/useModalOpenState';
+import { icons, kinds } from 'Helpers/Props';
+import { cancelCommand } from 'Store/Actions/commandActions';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import formatDate from 'Utilities/Date/formatDate';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
+import QueuedTaskRowNameCell from './QueuedTaskRowNameCell';
+import styles from './QueuedTaskRow.css';
+
+function getStatusIconProps(status: string, message: string | undefined) {
+  const title = titleCase(status);
+
+  switch (status) {
+    case 'queued':
+      return {
+        name: icons.PENDING,
+        title,
+      };
+
+    case 'started':
+      return {
+        name: icons.REFRESH,
+        isSpinning: true,
+        title,
+      };
+
+    case 'completed':
+      return {
+        name: icons.CHECK,
+        kind: kinds.SUCCESS,
+        title: message === 'Completed' ? title : `${title}: ${message}`,
+      };
+
+    case 'failed':
+      return {
+        name: icons.FATAL,
+        kind: kinds.DANGER,
+        title: `${title}: ${message}`,
+      };
+
+    default:
+      return {
+        name: icons.UNKNOWN,
+        title,
+      };
+  }
+}
+
+function getFormattedDates(
+  queued: string,
+  started: string | undefined,
+  ended: string | undefined,
+  showRelativeDates: boolean,
+  shortDateFormat: string
+) {
+  if (showRelativeDates) {
+    return {
+      queuedAt: moment(queued).fromNow(),
+      startedAt: started ? moment(started).fromNow() : '-',
+      endedAt: ended ? moment(ended).fromNow() : '-',
+    };
+  }
+
+  return {
+    queuedAt: formatDate(queued, shortDateFormat),
+    startedAt: started ? formatDate(started, shortDateFormat) : '-',
+    endedAt: ended ? formatDate(ended, shortDateFormat) : '-',
+  };
+}
+
+interface QueuedTimes {
+  queuedAt: string;
+  startedAt: string;
+  endedAt: string;
+}
+
+export interface QueuedTaskRowProps {
+  id: number;
+  trigger: string;
+  commandName: string;
+  queued: string;
+  started?: string;
+  ended?: string;
+  status: string;
+  duration?: string;
+  message?: string;
+  body: CommandBody;
+  clientUserAgent?: string;
+}
+
+export default function QueuedTaskRow(props: QueuedTaskRowProps) {
+  const {
+    id,
+    trigger,
+    commandName,
+    queued,
+    started,
+    ended,
+    status,
+    duration,
+    message,
+    body,
+    clientUserAgent,
+  } = props;
+
+  const dispatch = useDispatch();
+  const { longDateFormat, shortDateFormat, showRelativeDates, timeFormat } =
+    useSelector(createUISettingsSelector());
+
+  const updateTimeTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
+  const [times, setTimes] = useState<QueuedTimes>(
+    getFormattedDates(
+      queued,
+      started,
+      ended,
+      showRelativeDates,
+      shortDateFormat
+    )
+  );
+
+  const [
+    isCancelConfirmModalOpen,
+    openCancelConfirmModal,
+    closeCancelConfirmModal,
+  ] = useModalOpenState(false);
+
+  const handleCancelPress = useCallback(() => {
+    dispatch(cancelCommand({ id }));
+  }, [id, dispatch]);
+
+  useEffect(() => {
+    updateTimeTimeoutId.current = setTimeout(() => {
+      setTimes(
+        getFormattedDates(
+          queued,
+          started,
+          ended,
+          showRelativeDates,
+          shortDateFormat
+        )
+      );
+    }, 30000);
+
+    return () => {
+      if (updateTimeTimeoutId.current) {
+        clearTimeout(updateTimeTimeoutId.current);
+      }
+    };
+  }, [queued, started, ended, showRelativeDates, shortDateFormat, setTimes]);
+
+  const { queuedAt, startedAt, endedAt } = times;
+
+  let triggerIcon = icons.QUICK;
+
+  if (trigger === 'manual') {
+    triggerIcon = icons.INTERACTIVE;
+  } else if (trigger === 'scheduled') {
+    triggerIcon = icons.SCHEDULED;
+  }
+
+  return (
+    <TableRow>
+      <TableRowCell className={styles.trigger}>
+        <span className={styles.triggerContent}>
+          <Icon name={triggerIcon} title={titleCase(trigger)} />
+
+          <Icon {...getStatusIconProps(status, message)} />
+        </span>
+      </TableRowCell>
+
+      <QueuedTaskRowNameCell
+        commandName={commandName}
+        body={body}
+        clientUserAgent={clientUserAgent}
+      />
+
+      <TableRowCell
+        className={styles.queued}
+        title={formatDateTime(queued, longDateFormat, timeFormat)}
+      >
+        {queuedAt}
+      </TableRowCell>
+
+      <TableRowCell
+        className={styles.started}
+        title={formatDateTime(started, longDateFormat, timeFormat)}
+      >
+        {startedAt}
+      </TableRowCell>
+
+      <TableRowCell
+        className={styles.ended}
+        title={formatDateTime(ended, longDateFormat, timeFormat)}
+      >
+        {endedAt}
+      </TableRowCell>
+
+      <TableRowCell className={styles.duration}>
+        {formatTimeSpan(duration)}
+      </TableRowCell>
+
+      <TableRowCell className={styles.actions}>
+        {status === 'queued' && (
+          <IconButton
+            title={translate('RemovedFromTaskQueue')}
+            name={icons.REMOVE}
+            onPress={openCancelConfirmModal}
+          />
+        )}
+      </TableRowCell>
+
+      <ConfirmModal
+        isOpen={isCancelConfirmModalOpen}
+        kind={kinds.DANGER}
+        title={translate('Cancel')}
+        message={translate('CancelPendingTask')}
+        confirmLabel={translate('YesCancel')}
+        cancelLabel={translate('NoLeaveIt')}
+        onConfirm={handleCancelPress}
+        onCancel={closeCancelConfirmModal}
+      />
+    </TableRow>
+  );
+}

frontend/src/System/Tasks/Queued/QueuedTaskRowConnector.js

@@ -1,31 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { cancelCommand } from 'Store/Actions/commandActions';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import QueuedTaskRow from './QueuedTaskRow';
-
-function createMapStateToProps() {
-  return createSelector(
-    createUISettingsSelector(),
-    (uiSettings) => {
-      return {
-        showRelativeDates: uiSettings.showRelativeDates,
-        shortDateFormat: uiSettings.shortDateFormat,
-        longDateFormat: uiSettings.longDateFormat,
-        timeFormat: uiSettings.timeFormat
-      };
-    }
-  );
-}
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onCancelPress() {
-      dispatch(cancelCommand({
-        id: props.id
-      }));
-    }
-  };
-}
-
-export default connect(createMapStateToProps, createMapDispatchToProps)(QueuedTaskRow);

frontend/src/System/Tasks/Queued/QueuedTaskRowNameCell.css

@@ -0,0 +1,8 @@
+.commandName {
+  display: inline-block;
+  min-width: 220px;
+}
+
+.userAgent {
+  color: #b0b0b0;
+}