Multiple Translations updated by Weblate

ignore-downstream

Co-authored-by: Dani Talens <databio@gmail.com>
Co-authored-by: Havok Dan <havokdan@yahoo.com.br>
Co-authored-by: Michael5564445 <michaelvelosk@gmail.com>
Co-authored-by: Weblate <noreply@weblate.org>
Co-authored-by: fordas <fordas15@gmail.com>
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/ca/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/es/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/pt_BR/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/uk/
Translation: Servarr/Prowlarr

.devcontainer/Prowlarr.code-workspace

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

.devcontainer/devcontainer.json

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

.github/dependabot.yml

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

.github/labeler.yml

@@ -1,19 +1,31 @@
 'Area: API':
-  - src/Prowlarr.Api.V1/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/Prowlarr.Api.V1/**/*
 
 'Area: Db-migration':
-  - src/NzbDrone.Core/Datastore/Migration/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/NzbDrone.Core/Datastore/Migration/*
 
 'Area: Download Clients':
-  - src/NzbDrone.Core/Download/Clients/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/NzbDrone.Core/Download/Clients/**/*
 
 'Area: Indexer':
-  - src/NzbDrone.Core/Indexers/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/NzbDrone.Core/Indexers/**/*
 
 'Area: Notifications':
-  - src/NzbDrone.Core/Notifications/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/NzbDrone.Core/Notifications/**/*
 
 'Area: UI':
-  - frontend/**/*
-  - package.json
-  - yarn.lock
+  - changed-files:
+      - any-glob-to-any-file:
+          - frontend/**/*
+          - package.json
+          - yarn.lock

.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'

.github/workflows/labeler.yml

@@ -9,4 +9,4 @@ jobs:
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/labeler@v4
+      - uses: actions/labeler@v5

.github/workflows/lock.yml

@@ -9,7 +9,7 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@v4
+      - uses: dessant/lock-threads@v5
         with:
           github-token: ${{ github.token }}
           issue-inactive-days: '90'

.gitignore

@@ -127,6 +127,7 @@ coverage*.xml
 coverage*.json
 setup/Output/
 *.~is
+.mono
 
 # VS outout folders
 bin

.vscode/extensions.json

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

.vscode/launch.json

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

.vscode/tasks.json

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

azure-pipelines.yml

@@ -9,15 +9,15 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '1.11.3'
+  majorVersion: '1.17.2'
   minorVersion: $[counter('minorVersion', 1)]
   prowlarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(prowlarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.417'
-  nodeVersion: '16.X'
-  innoVersion: '6.2.0'
+  dotnetVersion: '6.0.421'
+  nodeVersion: '20.X'
+  innoVersion: '6.2.2'
   windowsImage: 'windows-2022'
   linuxImage: 'ubuntu-20.04'
   macImage: 'macOS-11'
@@ -166,10 +166,10 @@ stages:
       pool:
         vmImage: $(imageName)
       steps:
-      - task: NodeTool@0
+      - task: UseNode@1
         displayName: Set Node.js version
         inputs:
-          versionSpec: $(nodeVersion)
+          version: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -1075,10 +1075,10 @@ stages:
       pool:
         vmImage: $(imageName)
       steps:
-      - task: NodeTool@0
+      - task: UseNode@1
         displayName: Set Node.js version
         inputs:
-          versionSpec: $(nodeVersion)
+          version: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -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/App.js

@@ -12,11 +12,10 @@ function App({ store, history }) {
     <DocumentTitle title={window.Prowlarr.instanceName}>
       <Provider store={store}>
         <ConnectedRouter history={history}>
-          <ApplyTheme>
-            <PageConnector>
-              <AppRoutes app={App} />
-            </PageConnector>
-          </ApplyTheme>
+          <ApplyTheme />
+          <PageConnector>
+            <AppRoutes app={App} />
+          </PageConnector>
         </ConnectedRouter>
       </Provider>
     </DocumentTitle>

frontend/src/App/ApplyTheme.js

@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Fragment, useCallback, useEffect } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import themes from 'Styles/Themes';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.ui.item.theme || window.Prowlarr.theme,
-    (
-      theme
-    ) => {
-      return {
-        theme
-      };
-    }
-  );
-}
-
-function ApplyTheme({ theme, children }) {
-  // Update the CSS Variables
-
-  const updateCSSVariables = useCallback(() => {
-    const arrayOfVariableKeys = Object.keys(themes[theme]);
-    const arrayOfVariableValues = Object.values(themes[theme]);
-
-    // Loop through each array key and set the CSS Variables
-    arrayOfVariableKeys.forEach((cssVariableKey, index) => {
-      // Based on our snippet from MDN
-      document.documentElement.style.setProperty(
-        `--${cssVariableKey}`,
-        arrayOfVariableValues[index]
-      );
-    });
-  }, [theme]);
-
-  // On Component Mount and Component Update
-  useEffect(() => {
-    updateCSSVariables(theme);
-  }, [updateCSSVariables, theme]);
-
-  return <Fragment>{children}</Fragment>;
-}
-
-ApplyTheme.propTypes = {
-  theme: PropTypes.string.isRequired,
-  children: PropTypes.object.isRequired
-};
-
-export default connect(createMapStateToProps)(ApplyTheme);

frontend/src/App/ApplyTheme.tsx

@@ -0,0 +1,37 @@
+import React, { Fragment, ReactNode, useCallback, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import themes from 'Styles/Themes';
+import AppState from './State/AppState';
+
+interface ApplyThemeProps {
+  children: ReactNode;
+}
+
+function createThemeSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.ui.item.theme || window.Prowlarr.theme,
+    (theme) => {
+      return theme;
+    }
+  );
+}
+
+function ApplyTheme({ children }: ApplyThemeProps) {
+  const theme = useSelector(createThemeSelector());
+
+  const updateCSSVariables = useCallback(() => {
+    Object.entries(themes[theme]).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(`--${key}`, value);
+    });
+  }, [theme]);
+
+  // On Component Mount and Component Update
+  useEffect(() => {
+    updateCSSVariables();
+  }, [updateCSSVariables, theme]);
+
+  return <Fragment>{children}</Fragment>;
+}
+
+export default ApplyTheme;

frontend/src/App/State/AppSectionState.ts

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

frontend/src/App/State/AppState.ts

@@ -42,7 +42,16 @@ export interface CustomFilter {
   filers: PropertyFilter[];
 }
 
+export interface AppSectionState {
+  dimensions: {
+    isSmallScreen: boolean;
+    width: number;
+    height: number;
+  };
+}
+
 interface AppState {
+  app: AppSectionState;
   commands: CommandAppState;
   history: HistoryAppState;
   indexerHistory: IndexerHistoryAppState;

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/DescriptionList/DescriptionListItem.js

@@ -10,6 +10,7 @@ class DescriptionListItem extends Component {
 
   render() {
     const {
+      className,
       titleClassName,
       descriptionClassName,
       title,
@@ -17,7 +18,7 @@ class DescriptionListItem extends Component {
     } = this.props;
 
     return (
-      <div>
+      <div className={className}>
         <DescriptionListItemTitle
           className={titleClassName}
         >
@@ -35,6 +36,7 @@ class DescriptionListItem extends Component {
 }
 
 DescriptionListItem.propTypes = {
+  className: PropTypes.string,
   titleClassName: PropTypes.string,
   descriptionClassName: PropTypes.string,
   title: PropTypes.string,

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;
 
@@ -260,6 +256,7 @@ FormInputGroup.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.any,
   values: PropTypes.arrayOf(PropTypes.any),
+  isFloat: PropTypes.bool,
   type: PropTypes.string.isRequired,
   kind: PropTypes.oneOf(kinds.all),
   min: PropTypes.number,

frontend/src/Components/Form/PasswordInput.css

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

frontend/src/Components/Form/PasswordInput.js

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

frontend/src/Components/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/Content/Fonts/fonts.css

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

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

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

frontend/src/DownloadClient/DownloadProtocol.ts

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

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

@@ -43,6 +43,7 @@ import {
   faChevronCircleRight as fasChevronCircleRight,
   faChevronCircleUp as fasChevronCircleUp,
   faCircle as fasCircle,
+  faCircleDown as fasCircleDown,
   faCloud as fasCloud,
   faCloudDownloadAlt as fasCloudDownloadAlt,
   faCog as fasCog,
@@ -141,6 +142,7 @@ export const CHECK_INDETERMINATE = fasMinus;
 export const CHECK_CIRCLE = fasCheckCircle;
 export const CHECK_SQUARE = fasSquareCheck;
 export const CIRCLE = fasCircle;
+export const CIRCLE_DOWN = fasCircleDown;
 export const CIRCLE_OUTLINE = farCircle;
 export const CLEAR = fasTrashAlt;
 export const CLIPBOARD = fasCopy;

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/Details/HistoryDetails.js

@@ -21,6 +21,7 @@ function HistoryDetails(props) {
       limit,
       offset,
       source,
+      host,
       url
     } = data;
 
@@ -86,6 +87,15 @@ function HistoryDetails(props) {
             null
         }
 
+        {
+          data ?
+            <DescriptionListItem
+              title={translate('Host')}
+              data={host}
+            /> :
+            null
+        }
+
         {
           data ?
             <DescriptionListItem

frontend/src/History/History.js

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

frontend/src/History/HistoryConnector.js

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

frontend/src/History/HistoryFilterModal.tsx

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

frontend/src/History/HistoryRow.js

@@ -331,6 +331,21 @@ class HistoryRow extends Component {
               );
             }
 
+            if (name === 'host') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.indexer}
+                >
+                  {
+                    data.host ?
+                      data.host :
+                      null
+                  }
+                </TableRowCell>
+              );
+            }
+
             if (name === 'elapsedTime') {
               return (
                 <TableRowCell

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',
@@ -224,6 +224,7 @@ function EditIndexerModalContent(props: EditIndexerModalContentProps) {
             name="seedRatio"
             value={seedRatio}
             helpText={translate('SeedRatioHelpText')}
+            isFloat={true}
             onChange={onInputChange}
           />
         </FormGroup>

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/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/Mobile/SearchIndexOverview.css

@@ -47,3 +47,42 @@ $hoverScale: 1.05;
   right: 0;
   white-space: nowrap;
 }
+
+.downloadLink {
+  composes: link from '~Components/Link/Link.css';
+
+  margin: 0 2px;
+  width: 22px;
+  color: var(--textColor);
+  text-align: center;
+}
+
+.manualDownloadContent {
+  position: relative;
+  display: inline-block;
+  margin: 0 2px;
+  width: 22px;
+  height: 20.39px;
+  vertical-align: middle;
+  line-height: 20.39px;
+
+  &:hover {
+    color: var(--iconButtonHoverColor);
+  }
+}
+
+.interactiveIcon {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  /* width: 100%; */
+  text-align: center;
+}
+
+.downloadIcon {
+  position: absolute;
+  top: 7px;
+  left: 8px;
+  /* width: 100%; */
+  text-align: center;
+}

frontend/src/Search/Mobile/SearchIndexOverview.css.d.ts

@@ -4,9 +4,13 @@ interface CssExports {
   'actions': string;
   'container': string;
   'content': string;
+  'downloadIcon': string;
+  'downloadLink': string;
   'indexerRow': string;
   'info': string;
   'infoRow': string;
+  'interactiveIcon': string;
+  'manualDownloadContent': string;
   'title': string;
   'titleRow': string;
 }

frontend/src/Search/Mobile/SearchIndexOverview.js

@@ -1,234 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import TextTruncate from 'react-text-truncate';
-import Label from 'Components/Label';
-import IconButton from 'Components/Link/IconButton';
-import Link from 'Components/Link/Link';
-import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import { icons, kinds } from 'Helpers/Props';
-import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
-import CategoryLabel from 'Search/Table/CategoryLabel';
-import Peers from 'Search/Table/Peers';
-import dimensions from 'Styles/Variables/dimensions';
-import formatAge from 'Utilities/Number/formatAge';
-import formatBytes from 'Utilities/Number/formatBytes';
-import titleCase from 'Utilities/String/titleCase';
-import translate from 'Utilities/String/translate';
-import styles from './SearchIndexOverview.css';
-
-const columnPadding = parseInt(dimensions.movieIndexColumnPadding);
-const columnPaddingSmallScreen = parseInt(dimensions.movieIndexColumnPaddingSmallScreen);
-
-function getContentHeight(rowHeight, isSmallScreen) {
-  const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
-
-  return rowHeight - padding;
-}
-
-function getDownloadIcon(isGrabbing, isGrabbed, grabError) {
-  if (isGrabbing) {
-    return icons.SPINNER;
-  } else if (isGrabbed) {
-    return icons.DOWNLOADING;
-  } else if (grabError) {
-    return icons.DOWNLOADING;
-  }
-
-  return icons.DOWNLOAD;
-}
-
-function getDownloadKind(isGrabbed, grabError) {
-  if (isGrabbed) {
-    return kinds.SUCCESS;
-  }
-
-  if (grabError) {
-    return kinds.DANGER;
-  }
-
-  return kinds.DEFAULT;
-}
-
-function getDownloadTooltip(isGrabbing, isGrabbed, grabError) {
-  if (isGrabbing) {
-    return '';
-  } else if (isGrabbed) {
-    return translate('AddedToDownloadClient');
-  } else if (grabError) {
-    return grabError;
-  }
-
-  return translate('AddToDownloadClient');
-}
-
-class SearchIndexOverview extends Component {
-
-  //
-  // Listeners
-
-  onGrabPress = () => {
-    const {
-      guid,
-      indexerId,
-      onGrabPress
-    } = this.props;
-
-    onGrabPress({
-      guid,
-      indexerId
-    });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      title,
-      infoUrl,
-      protocol,
-      downloadUrl,
-      magnetUrl,
-      categories,
-      seeders,
-      leechers,
-      indexerFlags,
-      size,
-      age,
-      ageHours,
-      ageMinutes,
-      indexer,
-      rowHeight,
-      isSmallScreen,
-      isGrabbed,
-      isGrabbing,
-      grabError
-    } = this.props;
-
-    const contentHeight = getContentHeight(rowHeight, isSmallScreen);
-
-    return (
-      <div className={styles.container}>
-        <div className={styles.content}>
-          <div className={styles.info} style={{ height: contentHeight }}>
-            <div className={styles.titleRow}>
-              <div className={styles.title}>
-                <Link
-                  to={infoUrl}
-                  title={title}
-                >
-                  <TextTruncate
-                    line={2}
-                    text={title}
-                  />
-                </Link>
-              </div>
-
-              <div className={styles.actions}>
-                <SpinnerIconButton
-                  name={getDownloadIcon(isGrabbing, isGrabbed, grabError)}
-                  kind={getDownloadKind(isGrabbed, grabError)}
-                  title={getDownloadTooltip(isGrabbing, isGrabbed, grabError)}
-                  isDisabled={isGrabbed}
-                  isSpinning={isGrabbing}
-                  onPress={this.onGrabPress}
-                />
-
-                {
-                  downloadUrl || magnetUrl ?
-                    <IconButton
-                      name={icons.SAVE}
-                      title={translate('Save')}
-                      to={downloadUrl ?? magnetUrl}
-                    /> :
-                    null
-                }
-              </div>
-            </div>
-            <div className={styles.indexerRow}>
-              {indexer}
-            </div>
-            <div className={styles.infoRow}>
-              <ProtocolLabel
-                protocol={protocol}
-              />
-
-              {
-                protocol === 'torrent' &&
-                  <Peers
-                    seeders={seeders}
-                    leechers={leechers}
-                  />
-              }
-
-              <Label>
-                {formatBytes(size)}
-              </Label>
-
-              <Label>
-                {formatAge(age, ageHours, ageMinutes)}
-              </Label>
-
-              <CategoryLabel
-                categories={categories}
-              />
-
-              {
-                indexerFlags.length ?
-                  indexerFlags
-                    .sort((a, b) => a.localeCompare(b))
-                    .map((flag, index) => {
-                      return (
-                        <Label key={index} kind={kinds.INFO}>
-                          {titleCase(flag)}
-                        </Label>
-                      );
-                    }) :
-                  null
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-SearchIndexOverview.propTypes = {
-  guid: PropTypes.string.isRequired,
-  categories: PropTypes.arrayOf(PropTypes.object).isRequired,
-  protocol: PropTypes.string.isRequired,
-  age: PropTypes.number.isRequired,
-  ageHours: PropTypes.number.isRequired,
-  ageMinutes: PropTypes.number.isRequired,
-  publishDate: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  infoUrl: PropTypes.string.isRequired,
-  downloadUrl: PropTypes.string,
-  magnetUrl: PropTypes.string,
-  indexerId: PropTypes.number.isRequired,
-  indexer: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
-  files: PropTypes.number,
-  grabs: PropTypes.number,
-  seeders: PropTypes.number,
-  leechers: PropTypes.number,
-  indexerFlags: PropTypes.arrayOf(PropTypes.string).isRequired,
-  rowHeight: PropTypes.number.isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  isSmallScreen: PropTypes.bool.isRequired,
-  onGrabPress: PropTypes.func.isRequired,
-  isGrabbing: PropTypes.bool.isRequired,
-  isGrabbed: PropTypes.bool.isRequired,
-  grabError: PropTypes.string
-};
-
-SearchIndexOverview.defaultProps = {
-  isGrabbing: false,
-  isGrabbed: false
-};
-
-export default SearchIndexOverview;

frontend/src/Search/Mobile/SearchIndexOverview.tsx

@@ -0,0 +1,262 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import TextTruncate from 'react-text-truncate';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
+import { icons, kinds } from 'Helpers/Props';
+import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
+import { IndexerCategory } from 'Indexer/Indexer';
+import OverrideMatchModal from 'Search/OverrideMatch/OverrideMatchModal';
+import CategoryLabel from 'Search/Table/CategoryLabel';
+import Peers from 'Search/Table/Peers';
+import createEnabledDownloadClientsSelector from 'Store/Selectors/createEnabledDownloadClientsSelector';
+import dimensions from 'Styles/Variables/dimensions';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatAge from 'Utilities/Number/formatAge';
+import formatBytes from 'Utilities/Number/formatBytes';
+import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
+import styles from './SearchIndexOverview.css';
+
+const columnPadding = parseInt(dimensions.movieIndexColumnPadding);
+const columnPaddingSmallScreen = parseInt(
+  dimensions.movieIndexColumnPaddingSmallScreen
+);
+
+function getDownloadIcon(
+  isGrabbing: boolean,
+  isGrabbed: boolean,
+  grabError?: string
+) {
+  if (isGrabbing) {
+    return icons.SPINNER;
+  } else if (isGrabbed) {
+    return icons.DOWNLOADING;
+  } else if (grabError) {
+    return icons.DOWNLOADING;
+  }
+
+  return icons.DOWNLOAD;
+}
+
+function getDownloadKind(isGrabbed: boolean, grabError?: string) {
+  if (isGrabbed) {
+    return kinds.SUCCESS;
+  }
+
+  if (grabError) {
+    return kinds.DANGER;
+  }
+
+  return kinds.DEFAULT;
+}
+
+function getDownloadTooltip(
+  isGrabbing: boolean,
+  isGrabbed: boolean,
+  grabError?: string
+) {
+  if (isGrabbing) {
+    return '';
+  } else if (isGrabbed) {
+    return translate('AddedToDownloadClient');
+  } else if (grabError) {
+    return grabError;
+  }
+
+  return translate('AddToDownloadClient');
+}
+
+interface SearchIndexOverviewProps {
+  guid: string;
+  protocol: DownloadProtocol;
+  age: number;
+  ageHours: number;
+  ageMinutes: number;
+  publishDate: string;
+  title: string;
+  infoUrl: string;
+  downloadUrl?: string;
+  magnetUrl?: string;
+  indexerId: number;
+  indexer: string;
+  categories: IndexerCategory[];
+  size: number;
+  seeders?: number;
+  leechers?: number;
+  indexerFlags: string[];
+  isGrabbing: boolean;
+  isGrabbed: boolean;
+  grabError?: string;
+  longDateFormat: string;
+  timeFormat: string;
+  rowHeight: number;
+  isSmallScreen: boolean;
+  onGrabPress(...args: unknown[]): void;
+}
+
+function SearchIndexOverview(props: SearchIndexOverviewProps) {
+  const {
+    guid,
+    indexerId,
+    protocol,
+    categories,
+    age,
+    ageHours,
+    ageMinutes,
+    publishDate,
+    title,
+    infoUrl,
+    downloadUrl,
+    magnetUrl,
+    indexer,
+    size,
+    seeders,
+    leechers,
+    indexerFlags = [],
+    isGrabbing = false,
+    isGrabbed = false,
+    grabError,
+    longDateFormat,
+    timeFormat,
+    rowHeight,
+    isSmallScreen,
+    onGrabPress,
+  } = props;
+
+  const [isOverrideModalOpen, setIsOverrideModalOpen] = useState(false);
+
+  const { items: downloadClients } = useSelector(
+    createEnabledDownloadClientsSelector(protocol)
+  );
+
+  const onGrabPressWrapper = useCallback(() => {
+    onGrabPress({
+      guid,
+      indexerId,
+    });
+  }, [guid, indexerId, onGrabPress]);
+
+  const onOverridePress = useCallback(() => {
+    setIsOverrideModalOpen(true);
+  }, [setIsOverrideModalOpen]);
+
+  const onOverrideModalClose = useCallback(() => {
+    setIsOverrideModalOpen(false);
+  }, [setIsOverrideModalOpen]);
+
+  const contentHeight = useMemo(() => {
+    const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
+
+    return rowHeight - padding;
+  }, [rowHeight, isSmallScreen]);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <div className={styles.content}>
+          <div className={styles.info} style={{ height: contentHeight }}>
+            <div className={styles.titleRow}>
+              <div className={styles.title}>
+                <Link to={infoUrl} title={title}>
+                  <TextTruncate line={2} text={title} />
+                </Link>
+              </div>
+
+              <div className={styles.actions}>
+                <SpinnerIconButton
+                  name={getDownloadIcon(isGrabbing, isGrabbed, grabError)}
+                  kind={getDownloadKind(isGrabbed, grabError)}
+                  title={getDownloadTooltip(isGrabbing, isGrabbed, grabError)}
+                  isDisabled={isGrabbed}
+                  isSpinning={isGrabbing}
+                  onPress={onGrabPressWrapper}
+                />
+
+                {downloadClients.length > 1 ? (
+                  <Link
+                    className={styles.manualDownloadContent}
+                    title={translate('OverrideAndAddToDownloadClient')}
+                    onPress={onOverridePress}
+                  >
+                    <div className={styles.manualDownloadContent}>
+                      <Icon
+                        className={styles.interactiveIcon}
+                        name={icons.INTERACTIVE}
+                        size={11}
+                      />
+
+                      <Icon
+                        className={styles.downloadIcon}
+                        name={icons.CIRCLE_DOWN}
+                        size={9}
+                      />
+                    </div>
+                  </Link>
+                ) : null}
+
+                {downloadUrl || magnetUrl ? (
+                  <IconButton
+                    className={styles.downloadLink}
+                    name={icons.SAVE}
+                    title={translate('Save')}
+                    to={downloadUrl ?? magnetUrl}
+                  />
+                ) : null}
+              </div>
+            </div>
+            <div className={styles.indexerRow}>{indexer}</div>
+            <div className={styles.infoRow}>
+              <ProtocolLabel protocol={protocol} />
+
+              {protocol === 'torrent' && (
+                <Peers seeders={seeders} leechers={leechers} />
+              )}
+
+              <Label>{formatBytes(size)}</Label>
+
+              <Label
+                title={formatDateTime(publishDate, longDateFormat, timeFormat, {
+                  includeSeconds: true,
+                })}
+              >
+                {formatAge(age, ageHours, ageMinutes)}
+              </Label>
+
+              <CategoryLabel categories={categories} />
+
+              {indexerFlags.length
+                ? indexerFlags
+                    .sort((a, b) => a.localeCompare(b))
+                    .map((flag, index) => {
+                      return (
+                        <Label key={index} kind={kinds.INFO}>
+                          {titleCase(flag)}
+                        </Label>
+                      );
+                    })
+                : null}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <OverrideMatchModal
+        isOpen={isOverrideModalOpen}
+        title={title}
+        indexerId={indexerId}
+        guid={guid}
+        protocol={protocol}
+        isGrabbing={isGrabbing}
+        grabError={grabError}
+        onModalClose={onOverrideModalClose}
+      />
+    </>
+  );
+}
+
+export default SearchIndexOverview;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
+import { sizes } from 'Helpers/Props';
+import SelectDownloadClientModalContent from './SelectDownloadClientModalContent';
+
+interface SelectDownloadClientModalProps {
+  isOpen: boolean;
+  protocol: DownloadProtocol;
+  modalTitle: string;
+  onDownloadClientSelect(downloadClientId: number): void;
+  onModalClose(): void;
+}
+
+function SelectDownloadClientModal(props: SelectDownloadClientModalProps) {
+  const { isOpen, protocol, modalTitle, onDownloadClientSelect, onModalClose } =
+    props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose} size={sizes.MEDIUM}>
+      <SelectDownloadClientModalContent
+        protocol={protocol}
+        modalTitle={modalTitle}
+        onDownloadClientSelect={onDownloadClientSelect}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default SelectDownloadClientModal;

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import Alert from 'Components/Alert';
+import Form from 'Components/Form/Form';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
+import { kinds } from 'Helpers/Props';
+import createEnabledDownloadClientsSelector from 'Store/Selectors/createEnabledDownloadClientsSelector';
+import translate from 'Utilities/String/translate';
+import SelectDownloadClientRow from './SelectDownloadClientRow';
+
+interface SelectDownloadClientModalContentProps {
+  protocol: DownloadProtocol;
+  modalTitle: string;
+  onDownloadClientSelect(downloadClientId: number): void;
+  onModalClose(): void;
+}
+
+function SelectDownloadClientModalContent(
+  props: SelectDownloadClientModalContentProps
+) {
+  const { modalTitle, protocol, onDownloadClientSelect, onModalClose } = props;
+
+  const { isFetching, isPopulated, error, items } = useSelector(
+    createEnabledDownloadClientsSelector(protocol)
+  );
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        {translate('SelectDownloadClientModalTitle', { modalTitle })}
+      </ModalHeader>
+
+      <ModalBody>
+        {isFetching ? <LoadingIndicator /> : null}
+
+        {!isFetching && error ? (
+          <Alert kind={kinds.DANGER}>
+            {translate('DownloadClientsLoadError')}
+          </Alert>
+        ) : null}
+
+        {isPopulated && !error ? (
+          <Form>
+            {items.map((downloadClient) => {
+              const { id, name, priority } = downloadClient;
+
+              return (
+                <SelectDownloadClientRow
+                  key={id}
+                  id={id}
+                  name={name}
+                  priority={priority}
+                  onDownloadClientSelect={onDownloadClientSelect}
+                />
+              );
+            })}
+          </Form>
+        ) : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default SelectDownloadClientModalContent;

frontend/src/Search/OverrideMatch/DownloadClient/SelectDownloadClientRow.css

@@ -0,0 +1,6 @@
+.downloadClient {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+  border-bottom: 1px solid var(--borderColor);
+}

frontend/src/Search/OverrideMatch/DownloadClient/SelectDownloadClientRow.css.d.ts

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

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

@@ -0,0 +1,32 @@
+import React, { useCallback } from 'react';
+import Link from 'Components/Link/Link';
+import translate from 'Utilities/String/translate';
+import styles from './SelectDownloadClientRow.css';
+
+interface SelectSeasonRowProps {
+  id: number;
+  name: string;
+  priority: number;
+  onDownloadClientSelect(downloadClientId: number): unknown;
+}
+
+function SelectDownloadClientRow(props: SelectSeasonRowProps) {
+  const { id, name, priority, onDownloadClientSelect } = props;
+
+  const onSeasonSelectWrapper = useCallback(() => {
+    onDownloadClientSelect(id);
+  }, [id, onDownloadClientSelect]);
+
+  return (
+    <Link
+      className={styles.downloadClient}
+      component="div"
+      onPress={onSeasonSelectWrapper}
+    >
+      <div>{name}</div>
+      <div>{translate('PrioritySettings', { priority })}</div>
+    </Link>
+  );
+}
+
+export default SelectDownloadClientRow;

frontend/src/Search/OverrideMatch/OverrideMatchData.css

@@ -0,0 +1,17 @@
+.link {
+  composes: link from '~Components/Link/Link.css';
+
+  width: 100%;
+}
+
+.placeholder {
+  display: inline-block;
+  margin: -2px 0;
+  width: 100%;
+  outline: 2px dashed var(--dangerColor);
+  outline-offset: -2px;
+}
+
+.optional {
+  outline: 2px dashed var(--gray);
+}

frontend/src/Search/OverrideMatch/OverrideMatchData.css.d.ts

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

frontend/src/Search/OverrideMatch/OverrideMatchData.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import React from 'react';
+import Link from 'Components/Link/Link';
+import styles from './OverrideMatchData.css';
+
+interface OverrideMatchDataProps {
+  value?: string | number | JSX.Element | JSX.Element[];
+  isDisabled?: boolean;
+  isOptional?: boolean;
+  onPress: () => void;
+}
+
+function OverrideMatchData(props: OverrideMatchDataProps) {
+  const { value, isDisabled = false, isOptional, onPress } = props;
+
+  return (
+    <Link className={styles.link} isDisabled={isDisabled} onPress={onPress}>
+      {(value == null || (Array.isArray(value) && value.length === 0)) &&
+      !isDisabled ? (
+        <span
+          className={classNames(
+            styles.placeholder,
+            isOptional && styles.optional
+          )}
+        >
+          &nbsp;
+        </span>
+      ) : (
+        value
+      )}
+    </Link>
+  );
+}
+
+export default OverrideMatchData;

frontend/src/Search/OverrideMatch/OverrideMatchModal.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
+import { sizes } from 'Helpers/Props';
+import OverrideMatchModalContent from './OverrideMatchModalContent';
+
+interface OverrideMatchModalProps {
+  isOpen: boolean;
+  title: string;
+  indexerId: number;
+  guid: string;
+  protocol: DownloadProtocol;
+  isGrabbing: boolean;
+  grabError?: string;
+  onModalClose(): void;
+}
+
+function OverrideMatchModal(props: OverrideMatchModalProps) {
+  const {
+    isOpen,
+    title,
+    indexerId,
+    guid,
+    protocol,
+    isGrabbing,
+    grabError,
+    onModalClose,
+  } = props;
+
+  return (
+    <Modal isOpen={isOpen} size={sizes.LARGE} onModalClose={onModalClose}>
+      <OverrideMatchModalContent
+        title={title}
+        indexerId={indexerId}
+        guid={guid}
+        protocol={protocol}
+        isGrabbing={isGrabbing}
+        grabError={grabError}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default OverrideMatchModal;

frontend/src/Search/OverrideMatch/OverrideMatchModalContent.css

@@ -0,0 +1,49 @@
+.label {
+  composes: label from '~Components/Label.css';
+
+  cursor: pointer;
+}
+
+.item {
+  display: block;
+  margin-bottom: 5px;
+  margin-left: 50px;
+}
+
+.footer {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.error {
+  margin-right: 20px;
+  color: var(--dangerColor);
+  word-break: break-word;
+}
+
+.buttons {
+  display: flex;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .item {
+    margin-left: 0;
+  }
+
+  .footer {
+    display: block;
+  }
+
+  .error {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .buttons {
+    justify-content: space-between;
+    flex-grow: 1;
+  }
+}

frontend/src/Search/OverrideMatch/OverrideMatchModalContent.css.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'buttons': string;
+  'error': string;
+  'footer': string;
+  'item': string;
+  'label': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Search/OverrideMatch/OverrideMatchModalContent.tsx

@@ -0,0 +1,150 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import Button from 'Components/Link/Button';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { grabRelease } from 'Store/Actions/releaseActions';
+import { fetchDownloadClients } from 'Store/Actions/settingsActions';
+import createEnabledDownloadClientsSelector from 'Store/Selectors/createEnabledDownloadClientsSelector';
+import translate from 'Utilities/String/translate';
+import SelectDownloadClientModal from './DownloadClient/SelectDownloadClientModal';
+import OverrideMatchData from './OverrideMatchData';
+import styles from './OverrideMatchModalContent.css';
+
+type SelectType = 'select' | 'downloadClient';
+
+interface OverrideMatchModalContentProps {
+  indexerId: number;
+  title: string;
+  guid: string;
+  protocol: DownloadProtocol;
+  isGrabbing: boolean;
+  grabError?: string;
+  onModalClose(): void;
+}
+
+function OverrideMatchModalContent(props: OverrideMatchModalContentProps) {
+  const modalTitle = translate('ManualGrab');
+  const {
+    indexerId,
+    title,
+    guid,
+    protocol,
+    isGrabbing,
+    grabError,
+    onModalClose,
+  } = props;
+
+  const [downloadClientId, setDownloadClientId] = useState<number | null>(null);
+  const [selectModalOpen, setSelectModalOpen] = useState<SelectType | null>(
+    null
+  );
+  const previousIsGrabbing = usePrevious(isGrabbing);
+
+  const dispatch = useDispatch();
+  const { items: downloadClients } = useSelector(
+    createEnabledDownloadClientsSelector(protocol)
+  );
+
+  const onSelectModalClose = useCallback(() => {
+    setSelectModalOpen(null);
+  }, [setSelectModalOpen]);
+
+  const onSelectDownloadClientPress = useCallback(() => {
+    setSelectModalOpen('downloadClient');
+  }, [setSelectModalOpen]);
+
+  const onDownloadClientSelect = useCallback(
+    (downloadClientId: number) => {
+      setDownloadClientId(downloadClientId);
+      setSelectModalOpen(null);
+    },
+    [setDownloadClientId, setSelectModalOpen]
+  );
+
+  const onGrabPress = useCallback(() => {
+    dispatch(
+      grabRelease({
+        indexerId,
+        guid,
+        downloadClientId,
+      })
+    );
+  }, [indexerId, guid, downloadClientId, dispatch]);
+
+  useEffect(() => {
+    if (!isGrabbing && previousIsGrabbing) {
+      onModalClose();
+    }
+  }, [isGrabbing, previousIsGrabbing, onModalClose]);
+
+  useEffect(
+    () => {
+      dispatch(fetchDownloadClients());
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        {translate('OverrideGrabModalTitle', { title })}
+      </ModalHeader>
+
+      <ModalBody>
+        <DescriptionList>
+          {downloadClients.length > 1 ? (
+            <DescriptionListItem
+              className={styles.item}
+              title={translate('DownloadClient')}
+              data={
+                <OverrideMatchData
+                  value={
+                    downloadClients.find(
+                      (downloadClient) => downloadClient.id === downloadClientId
+                    )?.name ?? translate('Default')
+                  }
+                  onPress={onSelectDownloadClientPress}
+                />
+              }
+            />
+          ) : null}
+        </DescriptionList>
+      </ModalBody>
+
+      <ModalFooter className={styles.footer}>
+        <div className={styles.error}>{grabError}</div>
+
+        <div className={styles.buttons}>
+          <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+          <SpinnerErrorButton
+            isSpinning={isGrabbing}
+            error={grabError}
+            onPress={onGrabPress}
+          >
+            {translate('GrabRelease')}
+          </SpinnerErrorButton>
+        </div>
+      </ModalFooter>
+
+      <SelectDownloadClientModal
+        isOpen={selectModalOpen === 'downloadClient'}
+        protocol={protocol}
+        modalTitle={modalTitle}
+        onDownloadClientSelect={onDownloadClientSelect}
+        onModalClose={onSelectModalClose}
+      />
+    </ModalContent>
+  );
+}
+
+export default OverrideMatchModalContent;

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

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import withScrollPosition from 'Components/withScrollPosition';
 import { bulkGrabReleases, cancelFetchReleases, clearReleases, fetchReleases, setReleasesFilter, setReleasesSort, setReleasesTableOption } from 'Store/Actions/releaseActions';
+import { fetchDownloadClients } from 'Store/Actions/Settings/downloadClients';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import createReleaseClientSideCollectionItemsSelector from 'Store/Selectors/createReleaseClientSideCollectionItemsSelector';
 import SearchIndex from './SearchIndex';
@@ -55,12 +56,20 @@ function createMapDispatchToProps(dispatch, props) {
 
     dispatchClearReleases() {
       dispatch(clearReleases());
+    },
+
+    dispatchFetchDownloadClients() {
+      dispatch(fetchDownloadClients());
     }
   };
 }
 
 class SearchIndexConnector extends Component {
 
+  componentDidMount() {
+    this.props.dispatchFetchDownloadClients();
+  }
+
   componentWillUnmount() {
     this.props.dispatchCancelFetchReleases();
     this.props.dispatchClearReleases();
@@ -85,6 +94,7 @@ SearchIndexConnector.propTypes = {
   onBulkGrabPress: PropTypes.func.isRequired,
   dispatchCancelFetchReleases: PropTypes.func.isRequired,
   dispatchClearReleases: PropTypes.func.isRequired,
+  dispatchFetchDownloadClients: PropTypes.func.isRequired,
   items: PropTypes.arrayOf(PropTypes.object)
 };
 

frontend/src/Search/Table/SearchIndexItemConnector.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { executeCommand } from 'Store/Actions/commandActions';
 
 function createReleaseSelector() {
   return createSelector(
@@ -37,10 +36,6 @@ function createMapStateToProps() {
   );
 }
 
-const mapDispatchToProps = {
-  dispatchExecuteCommand: executeCommand
-};
-
 class SearchIndexItemConnector extends Component {
 
   //
@@ -71,4 +66,4 @@ SearchIndexItemConnector.propTypes = {
   component: PropTypes.elementType.isRequired
 };
 
-export default connect(createMapStateToProps, mapDispatchToProps)(SearchIndexItemConnector);
+export default connect(createMapStateToProps, null)(SearchIndexItemConnector);

frontend/src/Search/Table/SearchIndexRow.css

@@ -67,3 +67,33 @@
 
   color: var(--textColor);
 }
+
+.manualDownloadContent {
+  position: relative;
+  display: inline-block;
+  margin: 0 2px;
+  width: 22px;
+  height: 20.39px;
+  vertical-align: middle;
+  line-height: 20.39px;
+
+  &:hover {
+    color: var(--iconButtonHoverColor);
+  }
+}
+
+.interactiveIcon {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  /* width: 100%; */
+  text-align: center;
+}
+
+.downloadIcon {
+  position: absolute;
+  top: 7px;
+  left: 8px;
+  /* width: 100%; */
+  text-align: center;
+}

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

@@ -6,12 +6,15 @@ interface CssExports {
   'category': string;
   'cell': string;
   'checkInput': string;
+  'downloadIcon': string;
   'downloadLink': string;
   'externalLinks': string;
   'files': string;
   'grabs': string;
   'indexer': string;
   'indexerFlags': string;
+  'interactiveIcon': string;
+  'manualDownloadContent': string;
   'peers': string;
   'protocol': string;
   'size': string;

frontend/src/Search/Table/SearchIndexRow.js

@@ -1,431 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Icon from 'Components/Icon';
-import IconButton from 'Components/Link/IconButton';
-import Link from 'Components/Link/Link';
-import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
-import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
-import Popover from 'Components/Tooltip/Popover';
-import { icons, kinds, tooltipPositions } from 'Helpers/Props';
-import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
-import formatDateTime from 'Utilities/Date/formatDateTime';
-import formatAge from 'Utilities/Number/formatAge';
-import formatBytes from 'Utilities/Number/formatBytes';
-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) {
-  if (isGrabbing) {
-    return icons.SPINNER;
-  } else if (isGrabbed) {
-    return icons.DOWNLOADING;
-  } else if (grabError) {
-    return icons.DOWNLOADING;
-  }
-
-  return icons.DOWNLOAD;
-}
-
-function getDownloadKind(isGrabbed, grabError) {
-  if (isGrabbed) {
-    return kinds.SUCCESS;
-  }
-
-  if (grabError) {
-    return kinds.DANGER;
-  }
-
-  return kinds.DEFAULT;
-}
-
-function getDownloadTooltip(isGrabbing, isGrabbed, grabError) {
-  if (isGrabbing) {
-    return '';
-  } else if (isGrabbed) {
-    return translate('AddedToDownloadClient');
-  } else if (grabError) {
-    return grabError;
-  }
-
-  return translate('AddToDownloadClient');
-}
-
-class SearchIndexRow extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isConfirmGrabModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onGrabPress = () => {
-    const {
-      guid,
-      indexerId,
-      onGrabPress
-    } = this.props;
-
-    onGrabPress({
-      guid,
-      indexerId
-    });
-  };
-
-  onSavePress = () => {
-    const {
-      downloadUrl,
-      fileName,
-      onSavePress
-    } = this.props;
-
-    onSavePress({
-      downloadUrl,
-      fileName
-    });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      guid,
-      protocol,
-      downloadUrl,
-      magnetUrl,
-      categories,
-      age,
-      ageHours,
-      ageMinutes,
-      publishDate,
-      title,
-      infoUrl,
-      indexer,
-      size,
-      files,
-      grabs,
-      seeders,
-      leechers,
-      imdbId,
-      tmdbId,
-      tvdbId,
-      tvMazeId,
-      indexerFlags,
-      columns,
-      isGrabbing,
-      isGrabbed,
-      grabError,
-      longDateFormat,
-      timeFormat,
-      isSelected,
-      onSelectedChange
-    } = this.props;
-
-    return (
-      <>
-        {
-          columns.map((column) => {
-            const {
-              isVisible
-            } = column;
-
-            if (!isVisible) {
-              return null;
-            }
-
-            if (column.name === 'select') {
-              return (
-                <VirtualTableSelectCell
-                  inputClassName={styles.checkInput}
-                  id={guid}
-                  key={column.name}
-                  isSelected={isSelected}
-                  isDisabled={false}
-                  onSelectedChange={onSelectedChange}
-                />
-              );
-            }
-
-            if (column.name === 'protocol') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  <ProtocolLabel
-                    protocol={protocol}
-                  />
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'age') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                  title={formatDateTime(publishDate, longDateFormat, timeFormat, { includeSeconds: true })}
-                >
-                  {formatAge(age, ageHours, ageMinutes)}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'sortTitle') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  <Link
-                    to={infoUrl}
-                    title={title}
-                  >
-                    <div>
-                      {title}
-                    </div>
-                  </Link>
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'indexer') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  {indexer}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'size') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  {formatBytes(size)}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'files') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  {files}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'grabs') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  {grabs}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'peers') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  {
-                    protocol === 'torrent' &&
-                      <Peers
-                        seeders={seeders}
-                        leechers={leechers}
-                      />
-                  }
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'category') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  <CategoryLabel
-                    categories={categories}
-                  />
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'indexerFlags') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  {
-                    !!indexerFlags.length &&
-                      <Popover
-                        anchor={
-                          <Icon
-                            name={icons.FLAG}
-                            kind={kinds.PRIMARY}
-                          />
-                        }
-                        title={translate('IndexerFlags')}
-                        body={
-                          <ul>
-                            {
-                              indexerFlags.map((flag, index) => {
-                                return (
-                                  <li key={index}>
-                                    {titleCase(flag)}
-                                  </li>
-                                );
-                              })
-                            }
-                          </ul>
-                        }
-                        position={tooltipPositions.LEFT}
-                      />
-                  }
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'actions') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  <SpinnerIconButton
-                    name={getDownloadIcon(isGrabbing, isGrabbed, grabError)}
-                    kind={getDownloadKind(isGrabbed, grabError)}
-                    title={getDownloadTooltip(isGrabbing, isGrabbed, grabError)}
-                    isDisabled={isGrabbed}
-                    isSpinning={isGrabbing}
-                    onPress={this.onGrabPress}
-                  />
-
-                  {
-                    downloadUrl ?
-                      <IconButton
-                        className={styles.downloadLink}
-                        name={icons.SAVE}
-                        title={translate('Save')}
-                        onPress={this.onSavePress}
-                      /> :
-                      null
-                  }
-
-                  {
-                    magnetUrl ?
-                      <IconButton
-                        className={styles.downloadLink}
-                        name={icons.MAGNET}
-                        title={translate('Open')}
-                        to={magnetUrl}
-                      /> :
-                      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>
-              );
-            }
-
-            return null;
-          })
-        }
-      </>
-    );
-  }
-}
-
-SearchIndexRow.propTypes = {
-  guid: PropTypes.string.isRequired,
-  categories: PropTypes.arrayOf(PropTypes.object).isRequired,
-  protocol: PropTypes.string.isRequired,
-  age: PropTypes.number.isRequired,
-  ageHours: PropTypes.number.isRequired,
-  ageMinutes: PropTypes.number.isRequired,
-  publishDate: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  fileName: PropTypes.string.isRequired,
-  infoUrl: PropTypes.string.isRequired,
-  downloadUrl: PropTypes.string,
-  magnetUrl: PropTypes.string,
-  indexerId: PropTypes.number.isRequired,
-  indexer: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
-  files: PropTypes.number,
-  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,
-  onSavePress: PropTypes.func.isRequired,
-  isGrabbing: PropTypes.bool.isRequired,
-  isGrabbed: PropTypes.bool.isRequired,
-  grabError: PropTypes.string,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  isSelected: PropTypes.bool,
-  onSelectedChange: PropTypes.func.isRequired
-};
-
-SearchIndexRow.defaultProps = {
-  isGrabbing: false,
-  isGrabbed: false
-};
-
-export default SearchIndexRow;

frontend/src/Search/Table/SearchIndexRow.tsx

@@ -0,0 +1,395 @@
+import React, { useCallback, useState } from 'react';
+import { useSelector } from 'react-redux';
+import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
+import Column from 'Components/Table/Column';
+import Popover from 'Components/Tooltip/Popover';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
+import { IndexerCategory } from 'Indexer/Indexer';
+import OverrideMatchModal from 'Search/OverrideMatch/OverrideMatchModal';
+import createEnabledDownloadClientsSelector from 'Store/Selectors/createEnabledDownloadClientsSelector';
+import { SelectStateInputProps } from 'typings/props';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatAge from 'Utilities/Number/formatAge';
+import formatBytes from 'Utilities/Number/formatBytes';
+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: boolean,
+  isGrabbed: boolean,
+  grabError?: string
+) {
+  if (isGrabbing) {
+    return icons.SPINNER;
+  } else if (isGrabbed) {
+    return icons.DOWNLOADING;
+  } else if (grabError) {
+    return icons.DOWNLOADING;
+  }
+
+  return icons.DOWNLOAD;
+}
+
+function getDownloadKind(isGrabbed: boolean, grabError?: string) {
+  if (isGrabbed) {
+    return kinds.SUCCESS;
+  }
+
+  if (grabError) {
+    return kinds.DANGER;
+  }
+
+  return kinds.DEFAULT;
+}
+
+function getDownloadTooltip(
+  isGrabbing: boolean,
+  isGrabbed: boolean,
+  grabError?: string
+) {
+  if (isGrabbing) {
+    return '';
+  } else if (isGrabbed) {
+    return translate('AddedToDownloadClient');
+  } else if (grabError) {
+    return grabError;
+  }
+
+  return translate('AddToDownloadClient');
+}
+
+interface SearchIndexRowProps {
+  guid: string;
+  protocol: DownloadProtocol;
+  age: number;
+  ageHours: number;
+  ageMinutes: number;
+  publishDate: string;
+  title: string;
+  fileName: string;
+  infoUrl: string;
+  downloadUrl?: string;
+  magnetUrl?: string;
+  indexerId: number;
+  indexer: string;
+  categories: IndexerCategory[];
+  size: number;
+  files?: number;
+  grabs?: number;
+  seeders?: number;
+  leechers?: number;
+  imdbId?: string;
+  tmdbId?: number;
+  tvdbId?: number;
+  tvMazeId?: number;
+  indexerFlags: string[];
+  isGrabbing: boolean;
+  isGrabbed: boolean;
+  grabError?: string;
+  longDateFormat: string;
+  timeFormat: string;
+  columns: Column[];
+  isSelected?: boolean;
+  onSelectedChange(result: SelectStateInputProps): void;
+  onGrabPress(...args: unknown[]): void;
+  onSavePress(...args: unknown[]): void;
+}
+
+function SearchIndexRow(props: SearchIndexRowProps) {
+  const {
+    guid,
+    indexerId,
+    protocol,
+    categories,
+    age,
+    ageHours,
+    ageMinutes,
+    publishDate,
+    title,
+    fileName,
+    infoUrl,
+    downloadUrl,
+    magnetUrl,
+    indexer,
+    size,
+    files,
+    grabs,
+    seeders,
+    leechers,
+    imdbId,
+    tmdbId,
+    tvdbId,
+    tvMazeId,
+    indexerFlags = [],
+    isGrabbing = false,
+    isGrabbed = false,
+    grabError,
+    longDateFormat,
+    timeFormat,
+    columns,
+    isSelected,
+    onSelectedChange,
+    onGrabPress,
+    onSavePress,
+  } = props;
+
+  const [isOverrideModalOpen, setIsOverrideModalOpen] = useState(false);
+
+  const { items: downloadClients } = useSelector(
+    createEnabledDownloadClientsSelector(protocol)
+  );
+
+  const onGrabPressWrapper = useCallback(() => {
+    onGrabPress({
+      guid,
+      indexerId,
+    });
+  }, [guid, indexerId, onGrabPress]);
+
+  const onSavePressWrapper = useCallback(() => {
+    onSavePress({
+      downloadUrl,
+      fileName,
+    });
+  }, [downloadUrl, fileName, onSavePress]);
+
+  const onOverridePress = useCallback(() => {
+    setIsOverrideModalOpen(true);
+  }, [setIsOverrideModalOpen]);
+
+  const onOverrideModalClose = useCallback(() => {
+    setIsOverrideModalOpen(false);
+  }, [setIsOverrideModalOpen]);
+
+  return (
+    <>
+      {columns.map((column) => {
+        const { name, isVisible } = column;
+
+        if (!isVisible) {
+          return null;
+        }
+
+        if (name === 'select') {
+          return (
+            <VirtualTableSelectCell
+              inputClassName={styles.checkInput}
+              id={guid}
+              key={name}
+              isSelected={isSelected}
+              isDisabled={false}
+              onSelectedChange={onSelectedChange}
+            />
+          );
+        }
+
+        if (name === 'protocol') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <ProtocolLabel protocol={protocol} />
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'age') {
+          return (
+            <VirtualTableRowCell
+              key={name}
+              className={styles[name]}
+              title={formatDateTime(publishDate, longDateFormat, timeFormat, {
+                includeSeconds: true,
+              })}
+            >
+              {formatAge(age, ageHours, ageMinutes)}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'sortTitle') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <Link to={infoUrl} title={title}>
+                <div>{title}</div>
+              </Link>
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'indexer') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {indexer}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'size') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {formatBytes(size)}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'files') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {files}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'grabs') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {grabs}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'peers') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {protocol === 'torrent' && (
+                <Peers seeders={seeders} leechers={leechers} />
+              )}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'category') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <CategoryLabel categories={categories} />
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'indexerFlags') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {!!indexerFlags.length && (
+                <Popover
+                  anchor={<Icon name={icons.FLAG} kind={kinds.PRIMARY} />}
+                  title={translate('IndexerFlags')}
+                  body={
+                    <ul>
+                      {indexerFlags.map((flag, index) => {
+                        return <li key={index}>{titleCase(flag)}</li>;
+                      })}
+                    </ul>
+                  }
+                  position={tooltipPositions.LEFT}
+                />
+              )}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'actions') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <SpinnerIconButton
+                name={getDownloadIcon(isGrabbing, isGrabbed, grabError)}
+                kind={getDownloadKind(isGrabbed, grabError)}
+                title={getDownloadTooltip(isGrabbing, isGrabbed, grabError)}
+                isDisabled={isGrabbed}
+                isSpinning={isGrabbing}
+                onPress={onGrabPressWrapper}
+              />
+
+              {downloadClients.length > 1 ? (
+                <Link
+                  className={styles.manualDownloadContent}
+                  title={translate('OverrideAndAddToDownloadClient')}
+                  onPress={onOverridePress}
+                >
+                  <div className={styles.manualDownloadContent}>
+                    <Icon
+                      className={styles.interactiveIcon}
+                      name={icons.INTERACTIVE}
+                      size={12}
+                    />
+
+                    <Icon
+                      className={styles.downloadIcon}
+                      name={icons.CIRCLE_DOWN}
+                      size={10}
+                    />
+                  </div>
+                </Link>
+              ) : null}
+
+              {downloadUrl ? (
+                <IconButton
+                  className={styles.downloadLink}
+                  name={icons.SAVE}
+                  title={translate('Save')}
+                  onPress={onSavePressWrapper}
+                />
+              ) : null}
+
+              {magnetUrl ? (
+                <IconButton
+                  className={styles.downloadLink}
+                  name={icons.MAGNET}
+                  title={translate('Open')}
+                  to={magnetUrl}
+                />
+              ) : 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}
+                    />
+                  }
+                  position={tooltipPositions.TOP}
+                />
+              ) : null}
+            </VirtualTableRowCell>
+          );
+        }
+
+        return null;
+      })}
+
+      <OverrideMatchModal
+        isOpen={isOverrideModalOpen}
+        title={title}
+        indexerId={indexerId}
+        guid={guid}
+        protocol={protocol}
+        isGrabbing={isGrabbing}
+        grabError={grabError}
+        onModalClose={onOverrideModalClose}
+      />
+    </>
+  );
+}
+
+export default SearchIndexRow;

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/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 = {