Fixed: Augmenting languages for releases with MULTI and other languages (#10842)

(cherry picked from commit 396b2ae7c10c7df749ea23ea93608b56482175a1)

azure-pipelines.yml

@@ -9,7 +9,7 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '5.15.0'
+  majorVersion: '5.18.1'
   minorVersion: $[counter('minorVersion', 2000)]
   radarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
@@ -1116,20 +1116,20 @@ stages:
         vmImage: ${{ variables.windowsImage }}
       steps:
       - checkout: self # Need history for Sonar analysis
-      - task: SonarCloudPrepare@2
+      - task: SonarCloudPrepare@3
         env:
           SONAR_SCANNER_OPTS: ''
         inputs:
           SonarCloud: 'SonarCloud'
           organization: 'radarr'
-          scannerMode: 'CLI'
+          scannerMode: 'cli'
           configMode: 'manual'
           cliProjectKey: 'Radarr_Radarr.UI'
           cliProjectName: 'RadarrUI'
           cliProjectVersion: '$(radarrVersion)'
           cliSources: './frontend'
-      - task: SonarCloudAnalyze@2
-      
+      - task: SonarCloudAnalyze@3
+
     - job: Api_Docs
       displayName: API Docs
       dependsOn: Prepare
@@ -1205,12 +1205,12 @@ stages:
         submodules: true
       - powershell: Set-Service SCardSvr -StartupType Manual
         displayName: Enable Windows Test Service
-      - task: SonarCloudPrepare@2
+      - task: SonarCloudPrepare@3
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         inputs:
           SonarCloud: 'SonarCloud'
           organization: 'radarr'
-          scannerMode: 'MSBuild'
+          scannerMode: 'dotnet'
           projectKey: 'Radarr_Radarr'
           projectName: 'Radarr'
           projectVersion: '$(radarrVersion)'
@@ -1223,10 +1223,10 @@ stages:
           ./build.sh --backend -f net6.0 -r win-x64
           TEST_DIR=_tests/net6.0/win-x64/publish/ ./test.sh Windows Unit Coverage
         displayName: Coverage Unit Tests
-      - task: SonarCloudAnalyze@2
+      - task: SonarCloudAnalyze@3
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         displayName: Publish SonarCloud Results
-      - task: reportgenerator@5
+      - task: reportgenerator@5.3.11
         displayName: Generate Coverage Report
         inputs:
           reports: '$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml'

frontend/.eslintrc.js

@@ -210,7 +210,6 @@ module.exports = {
     'no-undef-init': 'off',
     'no-undefined': 'off',
     'no-unused-vars': ['error', { args: 'none', ignoreRestSiblings: true }],
-    'no-use-before-define': 'error',
 
     // Node.js and CommonJS
 

frontend/build/webpack.config.js

@@ -26,6 +26,7 @@ module.exports = (env) => {
   const config = {
     mode: isProduction ? 'production' : 'development',
     devtool: isProduction ? 'source-map' : 'eval-source-map',
+    target: 'web',
 
     stats: {
       children: false
@@ -186,7 +187,7 @@ module.exports = (env) => {
                       loose: true,
                       debug: false,
                       useBuiltIns: 'entry',
-                      corejs: 3
+                      corejs: '3.39'
                     }
                   ]
                 ]

frontend/src/Activity/History/Details/HistoryDetails.tsx

@@ -41,6 +41,7 @@ function HistoryDetails(props: HistoryDetailsProps) {
       indexer,
       releaseGroup,
       movieMatchType,
+      releaseSource,
       customFormatScore,
       nzbInfoUrl,
       downloadClient,
@@ -53,6 +54,31 @@ function HistoryDetails(props: HistoryDetailsProps) {
 
     const downloadClientNameInfo = downloadClientName ?? downloadClient;
 
+    let releaseSourceMessage = '';
+
+    switch (releaseSource) {
+      case 'Unknown':
+        releaseSourceMessage = translate('Unknown');
+        break;
+      case 'Rss':
+        releaseSourceMessage = translate('Rss');
+        break;
+      case 'Search':
+        releaseSourceMessage = translate('Search');
+        break;
+      case 'UserInvokedSearch':
+        releaseSourceMessage = translate('UserInvokedSearch');
+        break;
+      case 'InteractiveSearch':
+        releaseSourceMessage = translate('InteractiveSearch');
+        break;
+      case 'ReleasePush':
+        releaseSourceMessage = translate('ReleasePush');
+        break;
+      default:
+        releaseSourceMessage = '';
+    }
+
     return (
       <DescriptionList>
         <DescriptionListItem
@@ -88,6 +114,14 @@ function HistoryDetails(props: HistoryDetailsProps) {
           />
         ) : null}
 
+        {releaseSource ? (
+          <DescriptionListItem
+            descriptionClassName={styles.description}
+            title={translate('ReleaseSource')}
+            data={releaseSourceMessage}
+          />
+        ) : null}
+
         {nzbInfoUrl ? (
           <span>
             <DescriptionListItemTitle>

frontend/src/Activity/History/HistoryRow.tsx

@@ -154,9 +154,14 @@ function HistoryRow(props: HistoryRowProps) {
         }
 
         if (name === 'downloadClient') {
+          const downloadClientName =
+            'downloadClientName' in data ? data.downloadClientName : null;
+          const downloadClient =
+            'downloadClient' in data ? data.downloadClient : null;
+
           return (
             <TableRowCell key={name} className={styles.downloadClient}>
-              {'downloadClient' in data ? data.downloadClient : ''}
+              {downloadClientName ?? downloadClient ?? ''}
             </TableRowCell>
           );
         }

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css

@@ -91,6 +91,10 @@
   margin-left: 5px;
 }
 
+.genres {
+  pointer-events: all;
+}
+
 .links {
   margin-left: 5px;
   pointer-events: all;

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -10,6 +10,7 @@ import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 import MovieStatusLabel from 'Movie/Details/MovieStatusLabel';
 import MovieIndexProgressBar from 'Movie/Index/ProgressBar/MovieIndexProgressBar';
+import MovieGenres from 'Movie/MovieGenres';
 import MoviePoster from 'Movie/MoviePoster';
 import formatRuntime from 'Utilities/Date/formatRuntime';
 import translate from 'Utilities/String/translate';
@@ -249,9 +250,7 @@ class AddNewMovieSearchResult extends Component {
                       name={icons.GENRE}
                       size={13}
                     />
-                    <span className={styles.genres}>
-                      {genres.slice(0, 3).join(', ')}
-                    </span>
+                    <MovieGenres className={styles.genres} genres={genres} />
                   </Label> :
                   null
               }
@@ -280,7 +279,7 @@ class AddNewMovieSearchResult extends Component {
                 }
                 canFlip={true}
                 kind={kinds.INVERSE}
-                position={tooltipPositions.BOTTOM}
+                position={tooltipPositions.TOP}
               />
 
               {

frontend/src/App/State/AppSectionState.ts

@@ -1,11 +1,16 @@
 import Column from 'Components/Table/Column';
 import { SortDirection } from 'Helpers/Props/sortDirections';
+import { ValidationFailure } from 'typings/pending';
 import { FilterBuilderProp, PropertyFilter } from './AppState';
 
 export interface Error {
-  responseJSON: {
-    message: string;
-  };
+  status?: number;
+  responseJSON:
+    | {
+        message: string | undefined;
+      }
+    | ValidationFailure[]
+    | undefined;
 }
 
 export interface AppSectionDeleteState {
@@ -51,6 +56,16 @@ export interface AppSectionItemState<T> {
   item: T;
 }
 
+export interface AppSectionProviderState<T>
+  extends AppSectionDeleteState,
+    AppSectionSaveState {
+  isFetching: boolean;
+  isPopulated: boolean;
+  error: Error;
+  items: T[];
+  pendingChanges: Partial<T>;
+}
+
 interface AppSectionState<T> {
   isFetching: boolean;
   isPopulated: boolean;

frontend/src/App/State/InteractiveImportAppState.ts

@@ -1,11 +1,20 @@
 import AppSectionState from 'App/State/AppSectionState';
-import RecentFolder from 'InteractiveImport/Folder/RecentFolder';
 import ImportMode from 'InteractiveImport/ImportMode';
 import InteractiveImport from 'InteractiveImport/InteractiveImport';
 
+interface FavoriteFolder {
+  folder: string;
+}
+
+interface RecentFolder {
+  folder: string;
+  lastUsed: string;
+}
+
 interface InteractiveImportAppState extends AppSectionState<InteractiveImport> {
   originalItems: InteractiveImport[];
   importMode: ImportMode;
+  favoriteFolders: FavoriteFolder[];
   recentFolders: RecentFolder[];
 }
 

frontend/src/App/State/MetadataAppState.ts

@@ -0,0 +1,6 @@
+import { AppSectionProviderState } from 'App/State/AppSectionState';
+import Metadata from 'typings/Metadata';
+
+type MetadataAppState = AppSectionProviderState<Metadata>;
+
+export default MetadataAppState;

frontend/src/App/State/MovieCreditAppState.ts

@@ -1,6 +1,6 @@
 import AppSectionState from 'App/State/AppSectionState';
 import MovieCredit from 'typings/MovieCredit';
 
-interface MovieCreditAppState extends AppSectionState<MovieCredit> {}
+type MovieCreditAppState = AppSectionState<MovieCredit>;
 
 export default MovieCreditAppState;

frontend/src/App/State/SettingsAppState.ts

@@ -20,6 +20,7 @@ import NamingConfig from 'typings/Settings/NamingConfig';
 import NamingExample from 'typings/Settings/NamingExample';
 import ReleaseProfile from 'typings/Settings/ReleaseProfile';
 import UiSettings from 'typings/Settings/UiSettings';
+import MetadataAppState from './MetadataAppState';
 
 export interface DownloadClientAppState
   extends AppSectionState<DownloadClient>,
@@ -36,8 +37,7 @@ export interface NamingAppState
   extends AppSectionItemState<NamingConfig>,
     AppSectionSaveState {}
 
-export interface NamingExamplesAppState
-  extends AppSectionItemState<NamingExample> {}
+export type NamingExamplesAppState = AppSectionItemState<NamingExample>;
 
 export interface ImportListAppState
   extends AppSectionState<ImportList>,
@@ -97,6 +97,7 @@ interface SettingsAppState {
   indexerFlags: IndexerFlagSettingsAppState;
   indexers: IndexerAppState;
   languages: LanguageSettingsAppState;
+  metadata: MetadataAppState;
   naming: NamingAppState;
   namingExamples: NamingExamplesAppState;
   notifications: NotificationAppState;

frontend/src/Collection/CollectionItemConnector.js

@@ -22,7 +22,7 @@ function createMapStateToProps() {
       return {
         ...collection,
         movies: [...collection.movies].sort((a, b) => b.year - a.year),
-        genres: Array.from(new Set(allGenres)).slice(0, 3)
+        genres: Array.from(new Set(allGenres))
       };
     }
   );

frontend/src/Collection/Overview/CollectionOverview.js

@@ -10,6 +10,7 @@ import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
 import { icons, sizes } from 'Helpers/Props';
+import MovieGenres from 'Movie/MovieGenres';
 import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
 import dimensions from 'Styles/Variables/dimensions';
 import fonts from 'Styles/Variables/fonts';
@@ -242,12 +243,10 @@ class CollectionOverview extends Component {
                         size={sizes.MEDIUM}
                       >
                         <Icon
-                          name={icons.PROFILE}
+                          name={icons.GENRE}
                           size={13}
                         />
-                        <span className={styles.genres}>
-                          {genres.join(', ')}
-                        </span>
+                        <MovieGenres className={styles.genres} genres={genres} />
                       </Label>
                   }
 

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

@@ -16,6 +16,7 @@ import MovieFilterBuilderRowValue from './MovieFilterBuilderRowValue';
 import ProtocolFilterBuilderRowValue from './ProtocolFilterBuilderRowValue';
 import QualityFilterBuilderRowValueConnector from './QualityFilterBuilderRowValueConnector';
 import QualityProfileFilterBuilderRowValue from './QualityProfileFilterBuilderRowValue';
+import QueueStatusFilterBuilderRowValue from './QueueStatusFilterBuilderRowValue';
 import ReleaseStatusFilterBuilderRowValue from './ReleaseStatusFilterBuilderRowValue';
 import TagFilterBuilderRowValueConnector from './TagFilterBuilderRowValueConnector';
 import styles from './FilterBuilderRow.css';
@@ -80,6 +81,9 @@ function getRowValueConnector(selectedFilterBuilderProp) {
     case filterBuilderValueTypes.QUALITY_PROFILE:
       return QualityProfileFilterBuilderRowValue;
 
+    case filterBuilderValueTypes.QUEUE_STATUS:
+      return QueueStatusFilterBuilderRowValue;
+
     case filterBuilderValueTypes.MOVIE:
       return MovieFilterBuilderRowValue;
 

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import translate from 'Utilities/String/translate';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
+
+const statusTagList = [
+  {
+    id: 'queued',
+    get name() {
+      return translate('Queued');
+    },
+  },
+  {
+    id: 'paused',
+    get name() {
+      return translate('Paused');
+    },
+  },
+  {
+    id: 'downloading',
+    get name() {
+      return translate('Downloading');
+    },
+  },
+  {
+    id: 'completed',
+    get name() {
+      return translate('Completed');
+    },
+  },
+  {
+    id: 'failed',
+    get name() {
+      return translate('Failed');
+    },
+  },
+  {
+    id: 'warning',
+    get name() {
+      return translate('Warning');
+    },
+  },
+  {
+    id: 'delay',
+    get name() {
+      return translate('Delay');
+    },
+  },
+  {
+    id: 'downloadClientUnavailable',
+    get name() {
+      return translate('DownloadClientUnavailable');
+    },
+  },
+  {
+    id: 'fallback',
+    get name() {
+      return translate('Fallback');
+    },
+  },
+];
+
+function QueueStatusFilterBuilderRowValue(props: FilterBuilderRowValueProps) {
+  return <FilterBuilderRowValue {...props} tagList={statusTagList} />;
+}
+
+export default QueueStatusFilterBuilderRowValue;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import translate from 'Utilities/String/translate';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
-const protocols = [
+const statusTagList = [
   { id: 'tba', name: 'TBA' },
   {
     id: 'announced',
@@ -33,7 +33,7 @@ const protocols = [
 function ReleaseStatusFilterBuilderRowValue(props) {
   return (
     <FilterBuilderRowValue
-      tagList={protocols}
+      tagList={statusTagList}
       {...props}
     />
   );

frontend/src/Components/Form/KeyValueListInput.js

@@ -1,156 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import KeyValueListInputItem from './KeyValueListInputItem';
-import styles from './KeyValueListInput.css';
-
-class KeyValueListInput extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isFocused: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onItemChange = (index, itemValue) => {
-    const {
-      name,
-      value,
-      onChange
-    } = this.props;
-
-    const newValue = [...value];
-
-    if (index == null) {
-      newValue.push(itemValue);
-    } else {
-      newValue.splice(index, 1, itemValue);
-    }
-
-    onChange({
-      name,
-      value: newValue
-    });
-  };
-
-  onRemoveItem = (index) => {
-    const {
-      name,
-      value,
-      onChange
-    } = this.props;
-
-    const newValue = [...value];
-    newValue.splice(index, 1);
-
-    onChange({
-      name,
-      value: newValue
-    });
-  };
-
-  onFocus = () => {
-    this.setState({
-      isFocused: true
-    });
-  };
-
-  onBlur = () => {
-    this.setState({
-      isFocused: false
-    });
-
-    const {
-      name,
-      value,
-      onChange
-    } = this.props;
-
-    const newValue = value.reduce((acc, v) => {
-      if (v.key || v.value) {
-        acc.push(v);
-      }
-
-      return acc;
-    }, []);
-
-    if (newValue.length !== value.length) {
-      onChange({
-        name,
-        value: newValue
-      });
-    }
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      className,
-      value,
-      keyPlaceholder,
-      valuePlaceholder,
-      hasError,
-      hasWarning
-    } = this.props;
-
-    const { isFocused } = this.state;
-
-    return (
-      <div className={classNames(
-        className,
-        isFocused && styles.isFocused,
-        hasError && styles.hasError,
-        hasWarning && styles.hasWarning
-      )}
-      >
-        {
-          [...value, { key: '', value: '' }].map((v, index) => {
-            return (
-              <KeyValueListInputItem
-                key={index}
-                index={index}
-                keyValue={v.key}
-                value={v.value}
-                keyPlaceholder={keyPlaceholder}
-                valuePlaceholder={valuePlaceholder}
-                isNew={index === value.length}
-                onChange={this.onItemChange}
-                onRemove={this.onRemoveItem}
-                onFocus={this.onFocus}
-                onBlur={this.onBlur}
-              />
-            );
-          })
-        }
-      </div>
-    );
-  }
-}
-
-KeyValueListInput.propTypes = {
-  className: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.arrayOf(PropTypes.object).isRequired,
-  hasError: PropTypes.bool,
-  hasWarning: PropTypes.bool,
-  keyPlaceholder: PropTypes.string,
-  valuePlaceholder: PropTypes.string,
-  onChange: PropTypes.func.isRequired
-};
-
-KeyValueListInput.defaultProps = {
-  className: styles.inputContainer,
-  value: []
-};
-
-export default KeyValueListInput;

frontend/src/Components/Form/KeyValueListInput.tsx

@@ -0,0 +1,104 @@
+import classNames from 'classnames';
+import React, { useCallback, useState } from 'react';
+import { InputOnChange } from 'typings/inputs';
+import KeyValueListInputItem from './KeyValueListInputItem';
+import styles from './KeyValueListInput.css';
+
+interface KeyValue {
+  key: string;
+  value: string;
+}
+
+export interface KeyValueListInputProps {
+  className?: string;
+  name: string;
+  value: KeyValue[];
+  hasError?: boolean;
+  hasWarning?: boolean;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+  onChange: InputOnChange<KeyValue[]>;
+}
+
+function KeyValueListInput({
+  className = styles.inputContainer,
+  name,
+  value = [],
+  hasError = false,
+  hasWarning = false,
+  keyPlaceholder,
+  valuePlaceholder,
+  onChange,
+}: KeyValueListInputProps): JSX.Element {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleItemChange = useCallback(
+    (index: number | null, itemValue: KeyValue) => {
+      const newValue = [...value];
+
+      if (index === null) {
+        newValue.push(itemValue);
+      } else {
+        newValue.splice(index, 1, itemValue);
+      }
+
+      onChange({ name, value: newValue });
+    },
+    [value, name, onChange]
+  );
+
+  const handleRemoveItem = useCallback(
+    (index: number) => {
+      const newValue = [...value];
+      newValue.splice(index, 1);
+      onChange({ name, value: newValue });
+    },
+    [value, name, onChange]
+  );
+
+  const onFocus = useCallback(() => setIsFocused(true), []);
+
+  const onBlur = useCallback(() => {
+    setIsFocused(false);
+
+    const newValue = value.reduce((acc: KeyValue[], v) => {
+      if (v.key || v.value) {
+        acc.push(v);
+      }
+      return acc;
+    }, []);
+
+    if (newValue.length !== value.length) {
+      onChange({ name, value: newValue });
+    }
+  }, [value, name, onChange]);
+
+  return (
+    <div
+      className={classNames(
+        className,
+        isFocused && styles.isFocused,
+        hasError && styles.hasError,
+        hasWarning && styles.hasWarning
+      )}
+    >
+      {[...value, { key: '', value: '' }].map((v, index) => (
+        <KeyValueListInputItem
+          key={index}
+          index={index}
+          keyValue={v.key}
+          value={v.value}
+          keyPlaceholder={keyPlaceholder}
+          valuePlaceholder={valuePlaceholder}
+          isNew={index === value.length}
+          onChange={handleItemChange}
+          onRemove={handleRemoveItem}
+          onFocus={onFocus}
+          onBlur={onBlur}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default KeyValueListInput;

frontend/src/Components/Form/KeyValueListInputItem.css

@@ -5,13 +5,19 @@
 
   &:last-child {
     margin-bottom: 0;
+    border-bottom: 0;
   }
 }
 
-.inputWrapper {
+.keyInputWrapper {
   flex: 1 0 0;
 }
 
+.valueInputWrapper {
+  flex: 1 0 0;
+  min-width: 40px;
+}
+
 .buttonWrapper {
   flex: 0 0 22px;
 }
@@ -20,4 +26,10 @@
 .valueInput {
   width: 100%;
   border: none;
+  background-color: transparent;
+  color: var(--textColor);
+
+  &::placeholder {
+    color: var(--helpTextColor);
+  }
 }

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

@@ -2,10 +2,11 @@
 // Please do not change this file!
 interface CssExports {
   'buttonWrapper': string;
-  'inputWrapper': string;
   'itemContainer': string;
   'keyInput': string;
+  'keyInputWrapper': string;
   'valueInput': string;
+  'valueInputWrapper': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Components/Form/KeyValueListInputItem.js

@@ -1,124 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import IconButton from 'Components/Link/IconButton';
-import { icons } from 'Helpers/Props';
-import TextInput from './TextInput';
-import styles from './KeyValueListInputItem.css';
-
-class KeyValueListInputItem extends Component {
-
-  //
-  // Listeners
-
-  onKeyChange = ({ value: keyValue }) => {
-    const {
-      index,
-      value,
-      onChange
-    } = this.props;
-
-    onChange(index, { key: keyValue, value });
-  };
-
-  onValueChange = ({ value }) => {
-    // TODO: Validate here or validate at a lower level component
-
-    const {
-      index,
-      keyValue,
-      onChange
-    } = this.props;
-
-    onChange(index, { key: keyValue, value });
-  };
-
-  onRemovePress = () => {
-    const {
-      index,
-      onRemove
-    } = this.props;
-
-    onRemove(index);
-  };
-
-  onFocus = () => {
-    this.props.onFocus();
-  };
-
-  onBlur = () => {
-    this.props.onBlur();
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      keyValue,
-      value,
-      keyPlaceholder,
-      valuePlaceholder,
-      isNew
-    } = this.props;
-
-    return (
-      <div className={styles.itemContainer}>
-        <div className={styles.inputWrapper}>
-          <TextInput
-            className={styles.keyInput}
-            name="key"
-            value={keyValue}
-            placeholder={keyPlaceholder}
-            onChange={this.onKeyChange}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-          />
-        </div>
-
-        <div className={styles.inputWrapper}>
-          <TextInput
-            className={styles.valueInput}
-            name="value"
-            value={value}
-            placeholder={valuePlaceholder}
-            onChange={this.onValueChange}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-          />
-        </div>
-
-        <div className={styles.buttonWrapper}>
-          {
-            isNew ?
-              null :
-              <IconButton
-                name={icons.REMOVE}
-                tabIndex={-1}
-                onPress={this.onRemovePress}
-              />
-          }
-        </div>
-      </div>
-    );
-  }
-}
-
-KeyValueListInputItem.propTypes = {
-  index: PropTypes.number,
-  keyValue: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  keyPlaceholder: PropTypes.string.isRequired,
-  valuePlaceholder: PropTypes.string.isRequired,
-  isNew: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onRemove: PropTypes.func.isRequired,
-  onFocus: PropTypes.func.isRequired,
-  onBlur: PropTypes.func.isRequired
-};
-
-KeyValueListInputItem.defaultProps = {
-  keyPlaceholder: 'Key',
-  valuePlaceholder: 'Value'
-};
-
-export default KeyValueListInputItem;

frontend/src/Components/Form/KeyValueListInputItem.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback } from 'react';
+import IconButton from 'Components/Link/IconButton';
+import { icons } from 'Helpers/Props';
+import TextInput from './TextInput';
+import styles from './KeyValueListInputItem.css';
+
+interface KeyValueListInputItemProps {
+  index: number;
+  keyValue: string;
+  value: string;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+  isNew: boolean;
+  onChange: (index: number, itemValue: { key: string; value: string }) => void;
+  onRemove: (index: number) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+}
+
+function KeyValueListInputItem({
+  index,
+  keyValue,
+  value,
+  keyPlaceholder = 'Key',
+  valuePlaceholder = 'Value',
+  isNew,
+  onChange,
+  onRemove,
+  onFocus,
+  onBlur,
+}: KeyValueListInputItemProps): JSX.Element {
+  const handleKeyChange = useCallback(
+    ({ value: keyValue }: { value: string }) => {
+      onChange(index, { key: keyValue, value });
+    },
+    [index, value, onChange]
+  );
+
+  const handleValueChange = useCallback(
+    ({ value }: { value: string }) => {
+      onChange(index, { key: keyValue, value });
+    },
+    [index, keyValue, onChange]
+  );
+
+  const handleRemovePress = useCallback(() => {
+    onRemove(index);
+  }, [index, onRemove]);
+
+  return (
+    <div className={styles.itemContainer}>
+      <div className={styles.keyInputWrapper}>
+        <TextInput
+          className={styles.keyInput}
+          name="key"
+          value={keyValue}
+          placeholder={keyPlaceholder}
+          onChange={handleKeyChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+        />
+      </div>
+
+      <div className={styles.valueInputWrapper}>
+        <TextInput
+          className={styles.valueInput}
+          name="value"
+          value={value}
+          placeholder={valuePlaceholder}
+          onChange={handleValueChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+        />
+      </div>
+
+      <div className={styles.buttonWrapper}>
+        {isNew ? null : (
+          <IconButton
+            name={icons.REMOVE}
+            tabIndex={-1}
+            onPress={handleRemovePress}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default KeyValueListInputItem;

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -14,6 +14,8 @@ function getType({ type, selectOptionsProviderAction }) {
       return inputTypes.CHECK;
     case 'device':
       return inputTypes.DEVICE;
+    case 'keyValueList':
+      return inputTypes.KEY_VALUE_LIST;
     case 'password':
       return inputTypes.PASSWORD;
     case 'number':
@@ -137,6 +139,8 @@ ProviderFieldFormGroup.propTypes = {
   type: PropTypes.string.isRequired,
   advanced: PropTypes.bool.isRequired,
   hidden: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  provider: PropTypes.string,
   pending: PropTypes.bool.isRequired,
   errors: PropTypes.arrayOf(PropTypes.object).isRequired,
   warnings: PropTypes.arrayOf(PropTypes.object).isRequired,

frontend/src/Components/Table/Cells/TableRowCell.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentPropsWithoutRef } from 'react';
 import styles from './TableRowCell.css';
 
-export interface TableRowCellProps extends ComponentPropsWithoutRef<'td'> {}
+export type TableRowCellProps = ComponentPropsWithoutRef<'td'>;
 
 export default function TableRowCell({
   className = styles.cell,

frontend/src/Content/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "Radarr",
+  "name": "__INSTANCE_NAME__",
   "icons": [
     {
       "src": "__URL_BASE__/Content/Images/Icons/android-chrome-192x192.png",

frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css

@@ -85,10 +85,16 @@ $hoverScale: 1.05;
   flex: 1 0 auto;
 }
 
+.overviewContainer {
+  display: flex;
+  justify-content: space-between;
+  flex: 0 1 1000px;
+  flex-direction: column;
+}
+
 .overview {
   composes: link;
 
-  flex: 0 1 1000px;
   overflow: hidden;
   min-height: 0;
 }

frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css.d.ts

@@ -11,6 +11,7 @@ interface CssExports {
   'link': string;
   'lists': string;
   'overview': string;
+  'overviewContainer': string;
   'poster': string;
   'posterContainer': string;
   'title': string;

frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.js

@@ -133,14 +133,20 @@ class DiscoverMovieOverview extends Component {
                 />
               </div>
 
-              <MoviePoster
-                className={styles.poster}
+              <Link
+                className={styles.link}
                 style={elementStyle}
-                images={images}
-                size={250}
-                lazy={false}
-                overflow={true}
-              />
+                {...linkProps}
+              >
+                <MoviePoster
+                  className={styles.poster}
+                  style={elementStyle}
+                  images={images}
+                  size={250}
+                  lazy={false}
+                  overflow={true}
+                />
+              </Link>
             </div>
           </div>
 
@@ -242,11 +248,13 @@ class DiscoverMovieOverview extends Component {
             </div>
 
             <div className={styles.details}>
-              <div className={styles.overview}>
-                <TextTruncate
-                  line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
-                  text={overview}
-                />
+              <div className={styles.overviewContainer}>
+                <Link className={styles.overview} {...linkProps}>
+                  <TextTruncate
+                    line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
+                    text={overview}
+                  />
+                </Link>
               </div>
 
               <DiscoverMovieOverviewInfo
@@ -255,7 +263,6 @@ class DiscoverMovieOverview extends Component {
                 {...overviewOptions}
                 {...otherProps}
               />
-
             </div>
           </div>
         </div>

frontend/src/DiscoverMovie/Overview/DiscoverMovieOverviewInfo.js

@@ -49,7 +49,7 @@ function isVisible(row, props) {
     valueProp
   } = row;
 
-  return _.has(props, valueProp) && (_.get(props, showProp) || props.sortKey === name);
+  return _.has(props, valueProp) && _.get(props, valueProp) !== null && (props[showProp] || props.sortKey === name);
 }
 
 function getInfoRowProps(row, props) {

frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.js

@@ -50,15 +50,13 @@ function DiscoverMoviePosterInfo(props) {
   }
 
   if (sortKey === 'inCinemas' && inCinemas) {
-    const inCinemasDate = getRelativeDate(
-      inCinemas,
+    const inCinemasDate = getRelativeDate({
+      date: inCinemas,
       shortDateFormat,
       showRelativeDates,
-      {
-        timeFormat,
-        timeForToday: false
-      }
-    );
+      timeFormat,
+      timeForToday: false
+    });
 
     return (
       <div className={styles.info} title={translate('InCinemas')}>
@@ -68,15 +66,13 @@ function DiscoverMoviePosterInfo(props) {
   }
 
   if (sortKey === 'digitalRelease' && digitalRelease) {
-    const digitalReleaseDate = getRelativeDate(
-      digitalRelease,
+    const digitalReleaseDate = getRelativeDate({
+      date: digitalRelease,
       shortDateFormat,
       showRelativeDates,
-      {
-        timeFormat,
-        timeForToday: false
-      }
-    );
+      timeFormat,
+      timeForToday: false
+    });
 
     return (
       <div className={styles.info} title={translate('DigitalRelease')}>
@@ -86,15 +82,13 @@ function DiscoverMoviePosterInfo(props) {
   }
 
   if (sortKey === 'physicalRelease' && physicalRelease) {
-    const physicalReleaseDate = getRelativeDate(
-      physicalRelease,
+    const physicalReleaseDate = getRelativeDate({
+      date: physicalRelease,
       shortDateFormat,
       showRelativeDates,
-      {
-        timeFormat,
-        timeForToday: false
-      }
-    );
+      timeFormat,
+      timeForToday: false
+    });
 
     return (
       <div className={styles.info} title={translate('PhysicalRelease')}>

frontend/src/Helpers/Props/filterBuilderValueTypes.js

@@ -8,6 +8,7 @@ export const LANGUAGE = 'language';
 export const PROTOCOL = 'protocol';
 export const QUALITY = 'quality';
 export const QUALITY_PROFILE = 'qualityProfile';
+export const QUEUE_STATUS = 'queueStatus';
 export const MOVIE = 'movie';
 export const RELEASE_STATUS = 'releaseStatus';
 export const MINIMUM_AVAILABILITY = 'minimumAvailability';

frontend/src/Helpers/Props/icons.ts

@@ -15,6 +15,7 @@ import {
   faFileVideo as farFileVideo,
   faFolder as farFolder,
   faHdd as farHdd,
+  faHeart as farHeart,
   faKeyboard as farKeyboard,
   faObjectGroup as farObjectGroup,
   faObjectUngroup as farObjectUngroup,
@@ -174,6 +175,7 @@ export const GENRE = fasTheaterMasks;
 export const GROUP = farObjectGroup;
 export const HEALTH = fasMedkit;
 export const HEART = fasHeart;
+export const HEART_OUTLINE = farHeart;
 export const HISTORY = fasHistory;
 export const HOUSEKEEPING = fasHome;
 export const IGNORE = fasTimesCircle;

frontend/src/InteractiveImport/Folder/FavoriteFolderRow.css

@@ -0,0 +1,5 @@
+.actions {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 70px;
+}

frontend/src/InteractiveImport/Folder/FavoriteFolderRow.css.d.ts

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

frontend/src/InteractiveImport/Folder/FavoriteFolderRow.tsx

@@ -0,0 +1,48 @@
+import React, { SyntheticEvent, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import IconButton from 'Components/Link/IconButton';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRowButton from 'Components/Table/TableRowButton';
+import { icons } from 'Helpers/Props';
+import { removeFavoriteFolder } from 'Store/Actions/interactiveImportActions';
+import translate from 'Utilities/String/translate';
+import styles from './FavoriteFolderRow.css';
+
+interface FavoriteFolderRowProps {
+  folder: string;
+  onPress: (folder: string) => unknown;
+}
+
+function FavoriteFolderRow({ folder, onPress }: FavoriteFolderRowProps) {
+  const dispatch = useDispatch();
+
+  const handlePress = useCallback(() => {
+    onPress(folder);
+  }, [folder, onPress]);
+
+  const handleRemoveFavoritePress = useCallback(
+    (e: SyntheticEvent) => {
+      e.stopPropagation();
+
+      dispatch(removeFavoriteFolder({ folder }));
+    },
+    [folder, dispatch]
+  );
+
+  return (
+    <TableRowButton onPress={handlePress}>
+      <TableRowCell>{folder}</TableRowCell>
+
+      <TableRowCell className={styles.actions}>
+        <IconButton
+          title={translate('FavoriteFolderRemove')}
+          kind="danger"
+          name={icons.HEART}
+          onPress={handleRemoveFavoritePress}
+        />
+      </TableRowCell>
+    </TableRowButton>
+  );
+}
+
+export default FavoriteFolderRow;

frontend/src/InteractiveImport/Folder/InteractiveImportSelectFolderModalContent.css

@@ -1,7 +1,12 @@
-.recentFoldersContainer {
+.foldersContainer {
   margin-top: 15px;
 }
 
+.foldersTitle {
+  border-bottom: 1px solid var(--borderColor);
+  font-size: 21px;
+}
+
 .buttonsContainer {
   margin-top: 30px;
 }

frontend/src/InteractiveImport/Folder/InteractiveImportSelectFolderModalContent.css.d.ts

@@ -5,7 +5,8 @@ interface CssExports {
   'buttonContainer': string;
   'buttonIcon': string;
   'buttonsContainer': string;
-  'recentFoldersContainer': string;
+  'foldersContainer': string;
+  'foldersTitle': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/InteractiveImport/Folder/InteractiveImportSelectFolderModalContent.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
@@ -14,14 +14,23 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import { icons, kinds, sizes } from 'Helpers/Props';
 import { executeCommand } from 'Store/Actions/commandActions';
-import {
-  addRecentFolder,
-  removeRecentFolder,
-} from 'Store/Actions/interactiveImportActions';
+import { addRecentFolder } from 'Store/Actions/interactiveImportActions';
 import translate from 'Utilities/String/translate';
+import FavoriteFolderRow from './FavoriteFolderRow';
 import RecentFolderRow from './RecentFolderRow';
 import styles from './InteractiveImportSelectFolderModalContent.css';
 
+const favoriteFoldersColumns = [
+  {
+    name: 'folder',
+    label: () => translate('Folder'),
+  },
+  {
+    name: 'actions',
+    label: '',
+  },
+];
+
 const recentFoldersColumns = [
   {
     name: 'folder',
@@ -49,15 +58,22 @@ function InteractiveImportSelectFolderModalContent(
   const { modalTitle, onFolderSelect, onModalClose } = props;
   const [folder, setFolder] = useState('');
   const dispatch = useDispatch();
-  const recentFolders = useSelector(
+  const { favoriteFolders, recentFolders } = useSelector(
     createSelector(
-      (state: AppState) => state.interactiveImport.recentFolders,
-      (recentFolders) => {
-        return recentFolders;
+      (state: AppState) => state.interactiveImport,
+      (interactiveImport) => {
+        return {
+          favoriteFolders: interactiveImport.favoriteFolders,
+          recentFolders: interactiveImport.recentFolders,
+        };
       }
     )
   );
 
+  const favoriteFolderMap = useMemo(() => {
+    return new Map(favoriteFolders.map((f) => [f.folder, f]));
+  }, [favoriteFolders]);
+
   const onPathChange = useCallback(
     ({ value }: { value: string }) => {
       setFolder(value);
@@ -90,13 +106,6 @@ function InteractiveImportSelectFolderModalContent(
     onFolderSelect(folder);
   }, [folder, onFolderSelect, dispatch]);
 
-  const onRemoveRecentFolderPress = useCallback(
-    (folderToRemove: string) => {
-      dispatch(removeRecentFolder({ folder: folderToRemove }));
-    },
-    [dispatch]
-  );
-
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
@@ -110,8 +119,34 @@ function InteractiveImportSelectFolderModalContent(
           onChange={onPathChange}
         />
 
+        {favoriteFolders.length ? (
+          <div className={styles.foldersContainer}>
+            <div className={styles.foldersTitle}>
+              {translate('FavoriteFolders')}
+            </div>
+
+            <Table columns={favoriteFoldersColumns}>
+              <TableBody>
+                {favoriteFolders.map((favoriteFolder) => {
+                  return (
+                    <FavoriteFolderRow
+                      key={favoriteFolder.folder}
+                      folder={favoriteFolder.folder}
+                      onPress={onRecentPathPress}
+                    />
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        ) : null}
+
         {recentFolders.length ? (
-          <div className={styles.recentFoldersContainer}>
+          <div className={styles.foldersContainer}>
+            <div className={styles.foldersTitle}>
+              {translate('RecentFolders')}
+            </div>
+
             <Table columns={recentFoldersColumns}>
               <TableBody>
                 {recentFolders
@@ -123,8 +158,8 @@ function InteractiveImportSelectFolderModalContent(
                         key={recentFolder.folder}
                         folder={recentFolder.folder}
                         lastUsed={recentFolder.lastUsed}
+                        isFavorite={favoriteFolderMap.has(recentFolder.folder)}
                         onPress={onRecentPathPress}
-                        onRemoveRecentFolderPress={onRemoveRecentFolderPress}
                       />
                     );
                   })}

frontend/src/InteractiveImport/Folder/RecentFolder.ts

@@ -1,6 +0,0 @@
-interface RecentFolder {
-  folder: string;
-  lastUsed: string;
-}
-
-export default RecentFolder;

frontend/src/InteractiveImport/Folder/RecentFolderRow.css

@@ -1,5 +1,5 @@
 .actions {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
-  width: 40px;
+  width: 70px;
 }

frontend/src/InteractiveImport/Folder/RecentFolderRow.js

@@ -1,65 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import IconButton from 'Components/Link/IconButton';
-import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import TableRowButton from 'Components/Table/TableRowButton';
-import { icons } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import styles from './RecentFolderRow.css';
-
-class RecentFolderRow extends Component {
-
-  //
-  // Listeners
-
-  onPress = () => {
-    this.props.onPress(this.props.folder);
-  };
-
-  onRemovePress = (event) => {
-    event.stopPropagation();
-
-    const {
-      folder,
-      onRemoveRecentFolderPress
-    } = this.props;
-
-    onRemoveRecentFolderPress(folder);
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      folder,
-      lastUsed
-    } = this.props;
-
-    return (
-      <TableRowButton onPress={this.onPress}>
-        <TableRowCell>{folder}</TableRowCell>
-
-        <RelativeDateCell date={lastUsed} />
-
-        <TableRowCell className={styles.actions}>
-          <IconButton
-            title={translate('Remove')}
-            name={icons.REMOVE}
-            onPress={this.onRemovePress}
-          />
-        </TableRowCell>
-      </TableRowButton>
-    );
-  }
-}
-
-RecentFolderRow.propTypes = {
-  folder: PropTypes.string.isRequired,
-  lastUsed: PropTypes.string.isRequired,
-  onPress: PropTypes.func.isRequired,
-  onRemoveRecentFolderPress: PropTypes.func.isRequired
-};
-
-export default RecentFolderRow;

frontend/src/InteractiveImport/Folder/RecentFolderRow.tsx

@@ -0,0 +1,85 @@
+import React, { SyntheticEvent, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import IconButton from 'Components/Link/IconButton';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRowButton from 'Components/Table/TableRowButton';
+import { icons } from 'Helpers/Props';
+import {
+  addFavoriteFolder,
+  removeFavoriteFolder,
+  removeRecentFolder,
+} from 'Store/Actions/interactiveImportActions';
+import translate from 'Utilities/String/translate';
+import styles from './RecentFolderRow.css';
+
+interface RecentFolderRowProps {
+  folder: string;
+  lastUsed: string;
+  isFavorite: boolean;
+  onPress: (folder: string) => unknown;
+}
+
+function RecentFolderRow({
+  folder,
+  lastUsed,
+  isFavorite,
+  onPress,
+}: RecentFolderRowProps) {
+  const dispatch = useDispatch();
+
+  const handlePress = useCallback(() => {
+    onPress(folder);
+  }, [folder, onPress]);
+
+  const handleFavoritePress = useCallback(
+    (e: SyntheticEvent) => {
+      e.stopPropagation();
+
+      if (isFavorite) {
+        dispatch(removeFavoriteFolder({ folder }));
+      } else {
+        dispatch(addFavoriteFolder({ folder }));
+      }
+    },
+    [folder, isFavorite, dispatch]
+  );
+
+  const handleRemovePress = useCallback(
+    (e: SyntheticEvent) => {
+      e.stopPropagation();
+
+      dispatch(removeRecentFolder({ folder }));
+    },
+    [folder, dispatch]
+  );
+
+  return (
+    <TableRowButton onPress={handlePress}>
+      <TableRowCell>{folder}</TableRowCell>
+
+      <RelativeDateCell date={lastUsed} />
+
+      <TableRowCell className={styles.actions}>
+        <IconButton
+          title={
+            isFavorite
+              ? translate('FavoriteFolderRemove')
+              : translate('FavoriteFolderAdd')
+          }
+          kind={isFavorite ? 'danger' : 'default'}
+          name={isFavorite ? icons.HEART : icons.HEART_OUTLINE}
+          onPress={handleFavoritePress}
+        />
+
+        <IconButton
+          title={translate('Remove')}
+          name={icons.REMOVE}
+          onPress={handleRemovePress}
+        />
+      </TableRowCell>
+    </TableRowButton>
+  );
+}
+
+export default RecentFolderRow;

frontend/src/Movie/Details/MovieDetails.js

@@ -28,6 +28,7 @@ import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
 import getMovieStatusDetails from 'Movie/getMovieStatusDetails';
 import MovieHistoryModal from 'Movie/History/MovieHistoryModal';
 import MovieCollectionLabelConnector from 'Movie/MovieCollectionLabelConnector';
+import MovieGenres from 'Movie/MovieGenres';
 import MoviePoster from 'Movie/MoviePoster';
 import MovieInteractiveSearchModal from 'Movie/Search/MovieInteractiveSearchModal';
 import MovieFileEditorTable from 'MovieFile/Editor/MovieFileEditorTable';
@@ -651,9 +652,7 @@ class MovieDetails extends Component {
                         name={translate('Genres')}
                         size={sizes.LARGE}
                       >
-                        <span className={styles.genres}>
-                          {genres.join(', ')}
-                        </span>
+                        <MovieGenres className={styles.genres} genres={genres} />
                       </InfoLabel> :
                       null
                   }

frontend/src/Movie/MovieGenres.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Label from 'Components/Label';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { kinds, sizes, tooltipPositions } from 'Helpers/Props';
+
+interface MovieGenresProps {
+  className?: string;
+  genres: string[];
+}
+
+function MovieGenres({ className, genres }: MovieGenresProps) {
+  const firstGenres = genres.slice(0, 3);
+  const otherGenres = genres.slice(3);
+
+  if (otherGenres.length) {
+    return (
+      <Tooltip
+        anchor={<span className={className}>{firstGenres.join(', ')}</span>}
+        tooltip={
+          <div>
+            {otherGenres.map((tag) => {
+              return (
+                <Label key={tag} kind={kinds.INFO} size={sizes.LARGE}>
+                  {tag}
+                </Label>
+              );
+            })}
+          </div>
+        }
+        kind={kinds.INVERSE}
+        position={tooltipPositions.TOP}
+      />
+    );
+  }
+
+  return <span className={className}>{firstGenres.join(', ')}</span>;
+}
+
+export default MovieGenres;

frontend/src/MovieFile/Editor/MediaInfo.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import MediaInfoProps from 'typings/MediaInfo';
+import getEntries from 'Utilities/Object/getEntries';
+
+function MediaInfo(props: MediaInfoProps) {
+  return (
+    <DescriptionList>
+      {getEntries(props).map(([key, value]) => {
+        const title = key
+          .replace(/([A-Z])/g, ' $1')
+          .replace(/^./, (str) => str.toUpperCase());
+
+        if (!value) {
+          return null;
+        }
+
+        return (
+          <DescriptionListItem key={key} title={title} data={props[key]} />
+        );
+      })}
+    </DescriptionList>
+  );
+}
+
+export default MediaInfo;

frontend/src/MovieFile/Editor/MediaInfoPopover.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import DescriptionList from 'Components/DescriptionList/DescriptionList';
-import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
-
-function MediaInfoPopover(props) {
-  return (
-    <DescriptionList>
-      {
-        Object.keys(props).map((key) => {
-          const title = key
-            .replace(/([A-Z])/g, ' $1')
-            .replace(/^./, (str) => str.toUpperCase());
-
-          const value = props[key];
-
-          if (!value) {
-            return null;
-          }
-
-          return (
-            <DescriptionListItem
-              key={key}
-              title={title}
-              data={props[key]}
-            />
-          );
-        })
-      }
-    </DescriptionList>
-  );
-}
-
-export default MediaInfoPopover;

frontend/src/MovieFile/Editor/MovieFileEditorRow.js

@@ -14,7 +14,7 @@ import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguages from 'Movie/MovieLanguages';
 import MovieQuality from 'Movie/MovieQuality';
 import FileEditModal from 'MovieFile/Edit/FileEditModal';
-import MediaInfoConnector from 'MovieFile/MediaInfoConnector';
+import MediaInfo from 'MovieFile/MediaInfo';
 import * as mediaInfoTypes from 'MovieFile/mediaInfoTypes';
 import formatBytes from 'Utilities/Number/formatBytes';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
@@ -224,7 +224,7 @@ class MovieFileEditorRow extends Component {
                   key={name}
                   className={styles.audio}
                 >
-                  <MediaInfoConnector
+                  <MediaInfo
                     type={mediaInfoTypes.AUDIO}
                     movieFileId={id}
                   />
@@ -238,7 +238,7 @@ class MovieFileEditorRow extends Component {
                   key={name}
                   className={styles.audioLanguages}
                 >
-                  <MediaInfoConnector
+                  <MediaInfo
                     type={mediaInfoTypes.AUDIO_LANGUAGES}
                     movieFileId={id}
                   />
@@ -252,7 +252,7 @@ class MovieFileEditorRow extends Component {
                   key={name}
                   className={styles.subtitles}
                 >
-                  <MediaInfoConnector
+                  <MediaInfo
                     type={mediaInfoTypes.SUBTITLES}
                     movieFileId={id}
                   />
@@ -266,7 +266,7 @@ class MovieFileEditorRow extends Component {
                   key={name}
                   className={styles.video}
                 >
-                  <MediaInfoConnector
+                  <MediaInfo
                     type={mediaInfoTypes.VIDEO}
                     movieFileId={id}
                   />
@@ -280,7 +280,7 @@ class MovieFileEditorRow extends Component {
                   key={name}
                   className={styles.videoDynamicRangeType}
                 >
-                  <MediaInfoConnector
+                  <MediaInfo
                     type={mediaInfoTypes.VIDEO_DYNAMIC_RANGE_TYPE}
                     movieFileId={id}
                   />

frontend/src/MovieFile/FileDetailsModal.js

@@ -8,7 +8,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { sizes } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
-import MediaInfoPopover from './Editor/MediaInfoPopover';
+import MediaInfo from './Editor/MediaInfo';
 
 function FileDetailsModal(props) {
   const {
@@ -31,7 +31,7 @@ function FileDetailsModal(props) {
         </ModalHeader>
 
         <ModalBody>
-          <MediaInfoPopover {...mediaInfo} />
+          <MediaInfo {...mediaInfo} />
         </ModalBody>
 
         <ModalFooter>

frontend/src/MovieFile/MediaInfo.js

@@ -1,104 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import getLanguageName from 'Utilities/String/getLanguageName';
-import translate from 'Utilities/String/translate';
-import * as mediaInfoTypes from './mediaInfoTypes';
-
-function formatLanguages(languages) {
-  if (!languages) {
-    return null;
-  }
-
-  const splitLanguages = _.uniq(languages.split('/')).map((l) => {
-    const simpleLanguage = l.split('_')[0];
-
-    if (simpleLanguage === 'und') {
-      return translate('Unknown');
-    }
-
-    return getLanguageName(simpleLanguage);
-  });
-
-  if (splitLanguages.length > 3) {
-    return (
-      <span title={splitLanguages.join(', ')}>
-        {splitLanguages.slice(0, 2).join(', ')}, {splitLanguages.length - 2} more
-      </span>
-    );
-  }
-
-  return (
-    <span>
-      {splitLanguages.join(', ')}
-    </span>
-  );
-}
-
-function MediaInfo(props) {
-  const {
-    type,
-    audioChannels,
-    audioCodec,
-    audioLanguages,
-    subtitles,
-    videoCodec,
-    videoDynamicRangeType
-  } = props;
-
-  if (type === mediaInfoTypes.AUDIO) {
-    return (
-      <span>
-        {
-          audioCodec ? audioCodec : ''
-        }
-
-        {
-          audioCodec && audioChannels ? ' - ' : ''
-        }
-
-        {
-          audioChannels ? audioChannels.toFixed(1) : ''
-        }
-      </span>
-    );
-  }
-
-  if (type === mediaInfoTypes.AUDIO_LANGUAGES) {
-    return formatLanguages(audioLanguages);
-  }
-
-  if (type === mediaInfoTypes.SUBTITLES) {
-    return formatLanguages(subtitles);
-  }
-
-  if (type === mediaInfoTypes.VIDEO) {
-    return (
-      <span>
-        {videoCodec}
-      </span>
-    );
-  }
-
-  if (type === mediaInfoTypes.VIDEO_DYNAMIC_RANGE_TYPE) {
-    return (
-      <span>
-        {videoDynamicRangeType}
-      </span>
-    );
-  }
-
-  return null;
-}
-
-MediaInfo.propTypes = {
-  type: PropTypes.string.isRequired,
-  audioChannels: PropTypes.number,
-  audioCodec: PropTypes.string,
-  audioLanguages: PropTypes.string,
-  subtitles: PropTypes.string,
-  videoCodec: PropTypes.string,
-  videoDynamicRangeType: PropTypes.string
-};
-
-export default MediaInfo;

frontend/src/MovieFile/MediaInfo.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import getLanguageName from 'Utilities/String/getLanguageName';
+import translate from 'Utilities/String/translate';
+import useMovieFile from './useMovieFile';
+
+function formatLanguages(languages: string | undefined) {
+  if (!languages) {
+    return null;
+  }
+
+  const splitLanguages = [...new Set(languages.split('/'))].map((l) => {
+    const simpleLanguage = l.split('_')[0];
+
+    if (simpleLanguage === 'und') {
+      return translate('Unknown');
+    }
+
+    return getLanguageName(simpleLanguage);
+  });
+
+  if (splitLanguages.length > 3) {
+    return (
+      <span title={splitLanguages.join(', ')}>
+        {splitLanguages.slice(0, 2).join(', ')}, {splitLanguages.length - 2}{' '}
+        more
+      </span>
+    );
+  }
+
+  return <span>{splitLanguages.join(', ')}</span>;
+}
+
+export type MediaInfoType =
+  | 'audio'
+  | 'audioLanguages'
+  | 'subtitles'
+  | 'video'
+  | 'videoDynamicRangeType';
+
+interface MediaInfoProps {
+  movieFileId?: number;
+  type: MediaInfoType;
+}
+
+function MediaInfo({ movieFileId, type }: MediaInfoProps) {
+  const movieFile = useMovieFile(movieFileId);
+
+  if (!movieFile?.mediaInfo) {
+    return null;
+  }
+
+  const {
+    audioChannels,
+    audioCodec,
+    audioLanguages,
+    subtitles,
+    videoCodec,
+    videoDynamicRangeType,
+  } = movieFile.mediaInfo;
+
+  if (type === 'audio') {
+    return (
+      <span>
+        {audioCodec ? audioCodec : ''}
+
+        {audioCodec && audioChannels ? ' - ' : ''}
+
+        {audioChannels ? audioChannels.toFixed(1) : ''}
+      </span>
+    );
+  }
+
+  if (type === 'audioLanguages') {
+    return formatLanguages(audioLanguages);
+  }
+
+  if (type === 'subtitles') {
+    return formatLanguages(subtitles);
+  }
+
+  if (type === 'video') {
+    return <span>{videoCodec}</span>;
+  }
+
+  if (type === 'videoDynamicRangeType') {
+    return <span>{videoDynamicRangeType}</span>;
+  }
+
+  return null;
+}
+
+export default MediaInfo;

frontend/src/MovieFile/MediaInfoConnector.js

@@ -1,21 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createMovieFileSelector from 'Store/Selectors/createMovieFileSelector';
-import MediaInfo from './MediaInfo';
-
-function createMapStateToProps() {
-  return createSelector(
-    createMovieFileSelector(),
-    (movieFile) => {
-      if (movieFile) {
-        return {
-          ...movieFile.mediaInfo
-        };
-      }
-
-      return {};
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(MediaInfo);

frontend/src/MovieFile/MovieFileLanguageConnector.js

@@ -1,17 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import MovieLanguages from 'Movie/MovieLanguages';
-import createMovieFileSelector from 'Store/Selectors/createMovieFileSelector';
-
-function createMapStateToProps() {
-  return createSelector(
-    createMovieFileSelector(),
-    (movieFile) => {
-      return {
-        languages: movieFile ? movieFile.languages : undefined
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(MovieLanguages);

frontend/src/MovieFile/MovieFileLanguages.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import MovieLanguages from 'Movie/MovieLanguages';
+import useMovieFile from './useMovieFile';
+
+interface MovieFileLanguagesProps {
+  movieFileId: number;
+}
+
+function MovieFileLanguages({ movieFileId }: MovieFileLanguagesProps) {
+  const movieFile = useMovieFile(movieFileId);
+
+  return <MovieLanguages languages={movieFile?.languages ?? []} />;
+}
+
+export default MovieFileLanguages;

frontend/src/MovieFile/useMovieFile.ts

@@ -0,0 +1,18 @@
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+
+function createMovieFileSelector(movieFileId?: number) {
+  return createSelector(
+    (state: AppState) => state.movieFiles.items,
+    (movieFiles) => {
+      return movieFiles.find(({ id }) => id === movieFileId);
+    }
+  );
+}
+
+function useMovieFile(movieFileId: number | undefined) {
+  return useSelector(createMovieFileSelector(movieFileId));
+}
+
+export default useMovieFile;

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalConnector.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
 import EditCustomFormatModal from './EditCustomFormatModal';
+import EditCustomFormatModalContentConnector from './EditCustomFormatModalContentConnector';
 
 function mapStateToProps() {
   return {};
@@ -36,6 +37,7 @@ class EditCustomFormatModalConnector extends Component {
 }
 
 EditCustomFormatModalConnector.propTypes = {
+  ...EditCustomFormatModalContentConnector.propTypes,
   onModalClose: PropTypes.func.isRequired,
   clearPendingChanges: PropTypes.func.isRequired
 };

frontend/src/Settings/CustomFormats/CustomFormats/Manage/ManageCustomFormatsModalContent.tsx

@@ -47,6 +47,11 @@ const COLUMNS = [
     isSortable: true,
     isVisible: true,
   },
+  {
+    name: 'actions',
+    label: '',
+    isVisible: true,
+  },
 ];
 
 interface ManageCustomFormatsModalContentProps {

frontend/src/Settings/CustomFormats/CustomFormats/Manage/ManageCustomFormatsModalRow.css

@@ -4,3 +4,9 @@
 
   word-break: break-all;
 }
+
+.actions {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 40px;
+}

frontend/src/Settings/CustomFormats/CustomFormats/Manage/ManageCustomFormatsModalRow.css.d.ts

@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'actions': string;
   'includeCustomFormatWhenRenaming': string;
   'name': string;
 }

frontend/src/Settings/CustomFormats/CustomFormats/Manage/ManageCustomFormatsModalRow.tsx

@@ -1,10 +1,18 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import IconButton from 'Components/Link/IconButton';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import Column from 'Components/Table/Column';
 import TableRow from 'Components/Table/TableRow';
+import { icons } from 'Helpers/Props';
+import { deleteCustomFormat } from 'Store/Actions/settingsActions';
 import { SelectStateInputProps } from 'typings/props';
 import translate from 'Utilities/String/translate';
+import EditCustomFormatModalConnector from '../EditCustomFormatModalConnector';
 import styles from './ManageCustomFormatsModalRow.css';
 
 interface ManageCustomFormatsModalRowProps {
@@ -16,6 +24,15 @@ interface ManageCustomFormatsModalRowProps {
   onSelectedChange(result: SelectStateInputProps): void;
 }
 
+function isDeletingSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.customFormats.isDeleting,
+    (isDeleting) => {
+      return isDeleting;
+    }
+  );
+}
+
 function ManageCustomFormatsModalRow(props: ManageCustomFormatsModalRowProps) {
   const {
     id,
@@ -25,7 +42,16 @@ function ManageCustomFormatsModalRow(props: ManageCustomFormatsModalRowProps) {
     onSelectedChange,
   } = props;
 
-  const onSelectedChangeWrapper = useCallback(
+  const dispatch = useDispatch();
+  const isDeleting = useSelector(isDeletingSelector());
+
+  const [isEditCustomFormatModalOpen, setIsEditCustomFormatModalOpen] =
+    useState(false);
+
+  const [isDeleteCustomFormatModalOpen, setIsDeleteCustomFormatModalOpen] =
+    useState(false);
+
+  const handlelectedChange = useCallback(
     (result: SelectStateInputProps) => {
       onSelectedChange({
         ...result,
@@ -34,12 +60,33 @@ function ManageCustomFormatsModalRow(props: ManageCustomFormatsModalRowProps) {
     [onSelectedChange]
   );
 
+  const handleEditCustomFormatModalOpen = useCallback(() => {
+    setIsEditCustomFormatModalOpen(true);
+  }, [setIsEditCustomFormatModalOpen]);
+
+  const handleEditCustomFormatModalClose = useCallback(() => {
+    setIsEditCustomFormatModalOpen(false);
+  }, [setIsEditCustomFormatModalOpen]);
+
+  const handleDeleteCustomFormatPress = useCallback(() => {
+    setIsEditCustomFormatModalOpen(false);
+    setIsDeleteCustomFormatModalOpen(true);
+  }, [setIsEditCustomFormatModalOpen, setIsDeleteCustomFormatModalOpen]);
+
+  const handleDeleteCustomFormatModalClose = useCallback(() => {
+    setIsDeleteCustomFormatModalOpen(false);
+  }, [setIsDeleteCustomFormatModalOpen]);
+
+  const handleConfirmDeleteCustomFormat = useCallback(() => {
+    dispatch(deleteCustomFormat({ id }));
+  }, [id, dispatch]);
+
   return (
     <TableRow>
       <TableSelectCell
         id={id}
         isSelected={isSelected}
-        onSelectedChange={onSelectedChangeWrapper}
+        onSelectedChange={handlelectedChange}
       />
 
       <TableRowCell className={styles.name}>{name}</TableRowCell>
@@ -47,6 +94,31 @@ function ManageCustomFormatsModalRow(props: ManageCustomFormatsModalRowProps) {
       <TableRowCell className={styles.includeCustomFormatWhenRenaming}>
         {includeCustomFormatWhenRenaming ? translate('Yes') : translate('No')}
       </TableRowCell>
+
+      <TableRowCell className={styles.actions}>
+        <IconButton
+          name={icons.EDIT}
+          onPress={handleEditCustomFormatModalOpen}
+        />
+      </TableRowCell>
+
+      <EditCustomFormatModalConnector
+        id={id}
+        isOpen={isEditCustomFormatModalOpen}
+        onModalClose={handleEditCustomFormatModalClose}
+        onDeleteCustomFormatPress={handleDeleteCustomFormatPress}
+      />
+
+      <ConfirmModal
+        isOpen={isDeleteCustomFormatModalOpen}
+        kind="danger"
+        title={translate('DeleteCustomFormat')}
+        message={translate('DeleteCustomFormatMessageText', { name })}
+        confirmLabel={translate('Delete')}
+        isSpinning={isDeleting}
+        onConfirm={handleConfirmDeleteCustomFormat}
+        onCancel={handleDeleteCustomFormatModalClose}
+      />
     </TableRow>
   );
 }

frontend/src/Settings/CustomFormats/CustomFormats/Manage/ManageCustomFormatsToolbarButton.tsx

@@ -12,7 +12,7 @@ function ManageCustomFormatsToolbarButton() {
   return (
     <>
       <PageToolbarButton
-        label={translate('ManageCustomFormats')}
+        label={translate('ManageFormats')}
         iconName={icons.MANAGE}
         onPress={openManageModal}
       />

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/EditSpecificationModalContent.js

@@ -55,10 +55,10 @@ function EditSpecificationModalContent(props) {
                   <InlineMarkdown data={translate('ConditionUsingRegularExpressions')} />
                 </div>
                 <div>
-                  <InlineMarkdown data={translate('RegularExpressionsTutorialLink')} />
+                  <InlineMarkdown data={translate('RegularExpressionsTutorialLink', { url: 'https://www.regular-expressions.info/tutorial.html' })} />
                 </div>
                 <div>
-                  <InlineMarkdown data={translate('RegularExpressionsCanBeTested')} />
+                  <InlineMarkdown data={translate('RegularExpressionsCanBeTested', { url: 'http://regexstorm.net/tester' })} />
                 </div>
               </Alert>
           }

frontend/src/Settings/ImportLists/ImportListExclusions/EditImportListExclusionModalContent.tsx

@@ -40,7 +40,7 @@ function createImportListExclusionSelector(id?: number) {
         importListExclusions;
 
       const mapping = id
-        ? items.find((i) => i.id === id)
+        ? items.find((i) => i.id === id)!
         : newImportListExclusion;
       const settings = selectSettings(mapping, pendingChanges, saveError);
 

frontend/src/Settings/Metadata/Metadata/EditMetadataModal.js

@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import { sizes } from 'Helpers/Props';
-import EditMetadataModalContentConnector from './EditMetadataModalContentConnector';
-
-function EditMetadataModal({ isOpen, onModalClose, ...otherProps }) {
-  return (
-    <Modal
-      size={sizes.MEDIUM}
-      isOpen={isOpen}
-      onModalClose={onModalClose}
-    >
-      <EditMetadataModalContentConnector
-        {...otherProps}
-        onModalClose={onModalClose}
-      />
-    </Modal>
-  );
-}
-
-EditMetadataModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default EditMetadataModal;

frontend/src/Settings/Metadata/Metadata/EditMetadataModal.tsx

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditMetadataModalContent, {
+  EditMetadataModalContentProps,
+} from './EditMetadataModalContent';
+
+interface EditMetadataModalProps
+  extends Omit<EditMetadataModalContentProps, 'advancedSettings'> {
+  isOpen: boolean;
+}
+
+function EditMetadataModal({
+  isOpen,
+  onModalClose,
+  ...otherProps
+}: EditMetadataModalProps) {
+  const dispatch = useDispatch();
+
+  const advancedSettings = useSelector(
+    (state: AppState) => state.settings.advancedSettings
+  );
+
+  const handleModalClose = useCallback(() => {
+    dispatch(clearPendingChanges({ section: 'metadata' }));
+    onModalClose();
+  }, [dispatch, onModalClose]);
+
+  return (
+    <Modal size={sizes.MEDIUM} isOpen={isOpen} onModalClose={handleModalClose}>
+      <EditMetadataModalContent
+        {...otherProps}
+        advancedSettings={advancedSettings}
+        onModalClose={handleModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default EditMetadataModal;

frontend/src/Settings/Metadata/Metadata/EditMetadataModalConnector.js

@@ -1,44 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { clearPendingChanges } from 'Store/Actions/baseActions';
-import EditMetadataModal from './EditMetadataModal';
-
-function createMapDispatchToProps(dispatch, props) {
-  const section = 'settings.metadata';
-
-  return {
-    dispatchClearPendingChanges() {
-      dispatch(clearPendingChanges({ section }));
-    }
-  };
-}
-
-class EditMetadataModalConnector extends Component {
-  //
-  // Listeners
-
-  onModalClose = () => {
-    this.props.dispatchClearPendingChanges({ section: 'metadata' });
-    this.props.onModalClose();
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <EditMetadataModal
-        {...this.props}
-        onModalClose={this.onModalClose}
-      />
-    );
-  }
-}
-
-EditMetadataModalConnector.propTypes = {
-  onModalClose: PropTypes.func.isRequired,
-  dispatchClearPendingChanges: PropTypes.func.isRequired
-};
-
-export default connect(null, createMapDispatchToProps)(EditMetadataModalConnector);

frontend/src/Settings/Metadata/Metadata/EditMetadataModalContent.css

@@ -0,0 +1,5 @@
+.message {
+  composes: alert from '~Components/Alert.css';
+
+  margin-bottom: 30px;
+}

frontend/src/Settings/Metadata/Metadata/EditMetadataModalContent.css.d.ts

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

frontend/src/Settings/Metadata/Metadata/EditMetadataModalContent.js

@@ -1,105 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Form from 'Components/Form/Form';
-import FormGroup from 'Components/Form/FormGroup';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
-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 { inputTypes } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-
-function EditMetadataModalContent(props) {
-  const {
-    advancedSettings,
-    isSaving,
-    saveError,
-    item,
-    onInputChange,
-    onFieldChange,
-    onModalClose,
-    onSavePress,
-    ...otherProps
-  } = props;
-
-  const {
-    name,
-    enable,
-    fields
-  } = item;
-
-  return (
-    <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>
-        {translate('EditMetadata', { metadataType: name.value })}
-      </ModalHeader>
-
-      <ModalBody>
-        <Form {...otherProps}>
-          <FormGroup>
-            <FormLabel>{translate('Enable')}</FormLabel>
-
-            <FormInputGroup
-              type={inputTypes.CHECK}
-              name="enable"
-              helpText={translate('EnableMetadataHelpText')}
-              {...enable}
-              onChange={onInputChange}
-            />
-          </FormGroup>
-
-          {
-            fields.map((field) => {
-              return (
-                <ProviderFieldFormGroup
-                  key={field.name}
-                  advancedSettings={advancedSettings}
-                  provider="metadata"
-                  {...field}
-                  isDisabled={!enable.value}
-                  onChange={onFieldChange}
-                />
-              );
-            })
-          }
-
-        </Form>
-      </ModalBody>
-
-      <ModalFooter>
-        <Button
-          onPress={onModalClose}
-        >
-          {translate('Cancel')}
-        </Button>
-
-        <SpinnerErrorButton
-          isSpinning={isSaving}
-          error={saveError}
-          onPress={onSavePress}
-        >
-          {translate('Save')}
-        </SpinnerErrorButton>
-      </ModalFooter>
-    </ModalContent>
-  );
-}
-
-EditMetadataModalContent.propTypes = {
-  advancedSettings: PropTypes.bool.isRequired,
-  isSaving: PropTypes.bool.isRequired,
-  saveError: PropTypes.object,
-  item: PropTypes.object.isRequired,
-  onInputChange: PropTypes.func.isRequired,
-  onFieldChange: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired,
-  onSavePress: PropTypes.func.isRequired,
-  onDeleteMetadataPress: PropTypes.func
-};
-
-export default EditMetadataModalContent;

frontend/src/Settings/Metadata/Metadata/EditMetadataModalContent.tsx

@@ -0,0 +1,128 @@
+import React, { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import Alert from 'Components/Alert';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
+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 { inputTypes } from 'Helpers/Props';
+import {
+  saveMetadata,
+  setMetadataFieldValue,
+  setMetadataValue,
+} from 'Store/Actions/settingsActions';
+import selectSettings from 'Store/Selectors/selectSettings';
+import { InputChanged } from 'typings/inputs';
+import translate from 'Utilities/String/translate';
+import styles from './EditMetadataModalContent.css';
+
+export interface EditMetadataModalContentProps {
+  id: number;
+  advancedSettings: boolean;
+  onModalClose: () => void;
+}
+
+function EditMetadataModalContent({
+  id,
+  advancedSettings,
+  onModalClose,
+}: EditMetadataModalContentProps) {
+  const dispatch = useDispatch();
+
+  const { isSaving, saveError, pendingChanges, items } = useSelector(
+    (state: AppState) => state.settings.metadata
+  );
+
+  const { settings, ...otherSettings } = useMemo(() => {
+    const item = items.find((item) => item.id === id)!;
+
+    return selectSettings(item, pendingChanges, saveError);
+  }, [id, items, pendingChanges, saveError]);
+
+  const { name, enable, fields, message } = settings;
+
+  const handleInputChange = useCallback(
+    ({ name, value }: InputChanged) => {
+      // @ts-expect-error not typed
+      dispatch(setMetadataValue({ name, value }));
+    },
+    [dispatch]
+  );
+
+  const handleFieldChange = useCallback(
+    ({ name, value }: InputChanged) => {
+      // @ts-expect-error not typed
+      dispatch(setMetadataFieldValue({ name, value }));
+    },
+    [dispatch]
+  );
+
+  const handleSavePress = useCallback(() => {
+    dispatch(saveMetadata({ id }));
+  }, [id, dispatch]);
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        {translate('EditMetadata', { metadataType: name.value })}
+      </ModalHeader>
+
+      <ModalBody>
+        <Form {...otherSettings}>
+          {message ? (
+            <Alert className={styles.message} kind={message.value.type}>
+              {message.value.message}
+            </Alert>
+          ) : null}
+
+          <FormGroup>
+            <FormLabel>{translate('Enable')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="enable"
+              helpText={translate('EnableMetadataHelpText')}
+              {...enable}
+              onChange={handleInputChange}
+            />
+          </FormGroup>
+
+          {fields.map((field) => {
+            return (
+              <ProviderFieldFormGroup
+                key={field.name}
+                advancedSettings={advancedSettings}
+                provider="metadata"
+                {...field}
+                isDisabled={!enable.value}
+                onChange={handleFieldChange}
+              />
+            );
+          })}
+        </Form>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+        <SpinnerErrorButton
+          isSpinning={isSaving}
+          error={saveError}
+          onPress={handleSavePress}
+        >
+          {translate('Save')}
+        </SpinnerErrorButton>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default EditMetadataModalContent;

frontend/src/Settings/Metadata/Metadata/EditMetadataModalContentConnector.js

@@ -1,95 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { saveMetadata, setMetadataFieldValue, setMetadataValue } from 'Store/Actions/settingsActions';
-import selectSettings from 'Store/Selectors/selectSettings';
-import EditMetadataModalContent from './EditMetadataModalContent';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.advancedSettings,
-    (state, { id }) => id,
-    (state) => state.settings.metadata,
-    (advancedSettings, id, metadata) => {
-      const {
-        isSaving,
-        saveError,
-        pendingChanges,
-        items
-      } = metadata;
-
-      const settings = selectSettings(_.find(items, { id }), pendingChanges, saveError);
-
-      return {
-        advancedSettings,
-        id,
-        isSaving,
-        saveError,
-        item: settings.settings,
-        ...settings
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  setMetadataValue,
-  setMetadataFieldValue,
-  saveMetadata
-};
-
-class EditMetadataModalContentConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
-      this.props.onModalClose();
-    }
-  }
-
-  //
-  // Listeners
-
-  onInputChange = ({ name, value }) => {
-    this.props.setMetadataValue({ name, value });
-  };
-
-  onFieldChange = ({ name, value }) => {
-    this.props.setMetadataFieldValue({ name, value });
-  };
-
-  onSavePress = () => {
-    this.props.saveMetadata({ id: this.props.id });
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <EditMetadataModalContent
-        {...this.props}
-        onSavePress={this.onSavePress}
-        onInputChange={this.onInputChange}
-        onFieldChange={this.onFieldChange}
-      />
-    );
-  }
-}
-
-EditMetadataModalContentConnector.propTypes = {
-  id: PropTypes.number,
-  isSaving: PropTypes.bool.isRequired,
-  saveError: PropTypes.object,
-  item: PropTypes.object.isRequired,
-  setMetadataValue: PropTypes.func.isRequired,
-  setMetadataFieldValue: PropTypes.func.isRequired,
-  saveMetadata: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(EditMetadataModalContentConnector);

frontend/src/Settings/Metadata/Metadata/Metadata.js

@@ -1,150 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Card from 'Components/Card';
-import Label from 'Components/Label';
-import { kinds } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import EditMetadataModalConnector from './EditMetadataModalConnector';
-import styles from './Metadata.css';
-
-class Metadata extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isEditMetadataModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onEditMetadataPress = () => {
-    this.setState({ isEditMetadataModalOpen: true });
-  };
-
-  onEditMetadataModalClose = () => {
-    this.setState({ isEditMetadataModalOpen: false });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      id,
-      name,
-      enable,
-      fields
-    } = this.props;
-
-    const metadataFields = [];
-    const imageFields = [];
-
-    fields.forEach((field) => {
-      if (field.section === 'metadata') {
-        metadataFields.push(field);
-      } else {
-        imageFields.push(field);
-      }
-    });
-
-    return (
-      <Card
-        className={styles.metadata}
-        overlayContent={true}
-        onPress={this.onEditMetadataPress}
-      >
-        <div className={styles.name}>
-          {name}
-        </div>
-
-        <div>
-          {
-            enable ?
-              <Label kind={kinds.SUCCESS}>
-                {translate('Enabled')}
-              </Label> :
-              <Label
-                kind={kinds.DISABLED}
-                outline={true}
-              >
-                {translate('Disabled')}
-              </Label>
-          }
-        </div>
-
-        {
-          enable && !!metadataFields.length &&
-            <div>
-              <div className={styles.section}>
-                {translate('Metadata')}
-              </div>
-
-              {
-                metadataFields.map((field) => {
-                  if (!field.value) {
-                    return null;
-                  }
-
-                  return (
-                    <Label
-                      key={field.label}
-                      kind={kinds.SUCCESS}
-                    >
-                      {field.label}
-                    </Label>
-                  );
-                })
-              }
-            </div>
-        }
-
-        {
-          enable && !!imageFields.length &&
-            <div>
-              <div className={styles.section}>
-                {translate('Images')}
-              </div>
-
-              {
-                imageFields.map((field) => {
-                  if (!field.value) {
-                    return null;
-                  }
-
-                  return (
-                    <Label
-                      key={field.label}
-                      kind={kinds.SUCCESS}
-                    >
-                      {field.label}
-                    </Label>
-                  );
-                })
-              }
-            </div>
-        }
-
-        <EditMetadataModalConnector
-          id={id}
-          isOpen={this.state.isEditMetadataModalOpen}
-          onModalClose={this.onEditMetadataModalClose}
-        />
-      </Card>
-    );
-  }
-}
-
-Metadata.propTypes = {
-  id: PropTypes.number.isRequired,
-  name: PropTypes.string.isRequired,
-  enable: PropTypes.bool.isRequired,
-  fields: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-export default Metadata;

frontend/src/Settings/Metadata/Metadata/Metadata.tsx

@@ -0,0 +1,106 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import Card from 'Components/Card';
+import Label from 'Components/Label';
+import { kinds } from 'Helpers/Props';
+import Field from 'typings/Field';
+import translate from 'Utilities/String/translate';
+import EditMetadataModal from './EditMetadataModal';
+import styles from './Metadata.css';
+
+interface MetadataProps {
+  id: number;
+  name: string;
+  enable: boolean;
+  fields: Field[];
+}
+
+function Metadata({ id, name, enable, fields }: MetadataProps) {
+  const [isEditMetadataModalOpen, setIsEditMetadataModalOpen] = useState(false);
+
+  const { metadataFields, imageFields } = useMemo(() => {
+    return fields.reduce<{ metadataFields: Field[]; imageFields: Field[] }>(
+      (acc, field) => {
+        if (field.section === 'metadata') {
+          acc.metadataFields.push(field);
+        } else {
+          acc.imageFields.push(field);
+        }
+
+        return acc;
+      },
+      { metadataFields: [], imageFields: [] }
+    );
+  }, [fields]);
+
+  const handleOpenPress = useCallback(() => {
+    setIsEditMetadataModalOpen(true);
+  }, []);
+
+  const handleModalClose = useCallback(() => {
+    setIsEditMetadataModalOpen(false);
+  }, []);
+
+  return (
+    <Card
+      className={styles.metadata}
+      overlayContent={true}
+      onPress={handleOpenPress}
+    >
+      <div className={styles.name}>{name}</div>
+
+      <div>
+        {enable ? (
+          <Label kind={kinds.SUCCESS}>{translate('Enabled')}</Label>
+        ) : (
+          <Label kind={kinds.DISABLED} outline={true}>
+            {translate('Disabled')}
+          </Label>
+        )}
+      </div>
+
+      {enable && metadataFields.length ? (
+        <div>
+          <div className={styles.section}>{translate('Metadata')}</div>
+
+          {metadataFields.map((field) => {
+            if (!field.value) {
+              return null;
+            }
+
+            return (
+              <Label key={field.label} kind={kinds.SUCCESS}>
+                {field.label}
+              </Label>
+            );
+          })}
+        </div>
+      ) : null}
+
+      {enable && imageFields.length ? (
+        <div>
+          <div className={styles.section}>{translate('Images')}</div>
+
+          {imageFields.map((field) => {
+            if (!field.value) {
+              return null;
+            }
+
+            return (
+              <Label key={field.label} kind={kinds.SUCCESS}>
+                {field.label}
+              </Label>
+            );
+          })}
+        </div>
+      ) : null}
+
+      <EditMetadataModal
+        id={id}
+        isOpen={isEditMetadataModalOpen}
+        onModalClose={handleModalClose}
+      />
+    </Card>
+  );
+}
+
+export default Metadata;

frontend/src/Settings/Metadata/Metadata/Metadatas.js

@@ -1,44 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import FieldSet from 'Components/FieldSet';
-import PageSectionContent from 'Components/Page/PageSectionContent';
-import translate from 'Utilities/String/translate';
-import Metadata from './Metadata';
-import styles from './Metadatas.css';
-
-function Metadatas(props) {
-  const {
-    items,
-    ...otherProps
-  } = props;
-
-  return (
-    <FieldSet legend={translate('Metadata')}>
-      <PageSectionContent
-        errorMessage={translate('MetadataLoadError')}
-        {...otherProps}
-      >
-        <div className={styles.metadatas}>
-          {
-            items.map((item) => {
-              return (
-                <Metadata
-                  key={item.id}
-                  {...item}
-                />
-              );
-            })
-          }
-        </div>
-      </PageSectionContent>
-    </FieldSet>
-  );
-}
-
-Metadatas.propTypes = {
-  isFetching: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-export default Metadatas;

frontend/src/Settings/Metadata/Metadata/Metadatas.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import MetadataAppState from 'App/State/MetadataAppState';
+import FieldSet from 'Components/FieldSet';
+import PageSectionContent from 'Components/Page/PageSectionContent';
+import { fetchMetadata } from 'Store/Actions/settingsActions';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import MetadataType from 'typings/Metadata';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
+import Metadata from './Metadata';
+import styles from './Metadatas.css';
+
+function createMetadatasSelector() {
+  return createSelector(
+    createSortedSectionSelector<MetadataType>(
+      'settings.metadata',
+      sortByProp('name')
+    ),
+    (metadata: MetadataAppState) => metadata
+  );
+}
+
+function Metadatas() {
+  const dispatch = useDispatch();
+  const { isFetching, error, items, ...otherProps } = useSelector(
+    createMetadatasSelector()
+  );
+
+  useEffect(() => {
+    dispatch(fetchMetadata());
+  }, [dispatch]);
+
+  return (
+    <FieldSet legend={translate('Metadata')}>
+      <PageSectionContent
+        isFetching={isFetching}
+        errorMessage={translate('MetadataLoadError')}
+        {...otherProps}
+      >
+        <div className={styles.metadatas}>
+          {items.map((item) => {
+            return <Metadata key={item.id} {...item} />;
+          })}
+        </div>
+      </PageSectionContent>
+    </FieldSet>
+  );
+}
+
+export default Metadatas;

frontend/src/Settings/Metadata/Metadata/MetadatasConnector.js

@@ -1,47 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchMetadata } from 'Store/Actions/settingsActions';
-import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByProp from 'Utilities/Array/sortByProp';
-import Metadatas from './Metadatas';
-
-function createMapStateToProps() {
-  return createSelector(
-    createSortedSectionSelector('settings.metadata', sortByProp('name')),
-    (metadata) => metadata
-  );
-}
-
-const mapDispatchToProps = {
-  fetchMetadata
-};
-
-class MetadatasConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.fetchMetadata();
-  }
-
-  //
-  // Render
-
-  render() {
-    return (
-      <Metadatas
-        {...this.props}
-        onConfirmDeleteMetadata={this.onConfirmDeleteMetadata}
-      />
-    );
-  }
-}
-
-MetadatasConnector.propTypes = {
-  fetchMetadata: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(MetadatasConnector);

frontend/src/Settings/Metadata/MetadataSettings.js

@@ -3,7 +3,7 @@ import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import translate from 'Utilities/String/translate';
-import MetadatasConnector from './Metadata/MetadatasConnector';
+import Metadatas from './Metadata/Metadatas';
 import MetadataOptionsConnector from './Options/MetadataOptionsConnector';
 
 class MetadataSettings extends Component {
@@ -62,7 +62,7 @@ class MetadataSettings extends Component {
             onChildStateChange={this.onChildStateChange}
           />
 
-          <MetadatasConnector />
+          <Metadatas />
         </PageContentBody>
       </PageContent>
     );

frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.tsx

@@ -19,14 +19,15 @@ import {
   setReleaseProfileValue,
 } from 'Store/Actions/Settings/releaseProfiles';
 import selectSettings from 'Store/Selectors/selectSettings';
-import { PendingSection } from 'typings/pending';
 import ReleaseProfile from 'typings/Settings/ReleaseProfile';
 import translate from 'Utilities/String/translate';
 import styles from './EditReleaseProfileModalContent.css';
 
 const tagInputDelimiters = ['Tab', 'Enter'];
 
-const newReleaseProfile = {
+const newReleaseProfile: ReleaseProfile = {
+  id: 0,
+  name: '',
   enabled: true,
   required: [],
   ignored: [],
@@ -41,8 +42,12 @@ function createReleaseProfileSelector(id?: number) {
       const { items, isFetching, error, isSaving, saveError, pendingChanges } =
         releaseProfiles;
 
-      const mapping = id ? items.find((i) => i.id === id) : newReleaseProfile;
-      const settings = selectSettings(mapping, pendingChanges, saveError);
+      const mapping = id ? items.find((i) => i.id === id)! : newReleaseProfile;
+      const settings = selectSettings<ReleaseProfile>(
+        mapping,
+        pendingChanges,
+        saveError
+      );
 
       return {
         id,
@@ -50,7 +55,7 @@ function createReleaseProfileSelector(id?: number) {
         error,
         isSaving,
         saveError,
-        item: settings.settings as PendingSection<ReleaseProfile>,
+        item: settings.settings,
         ...settings,
       };
     }

frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.js

@@ -86,10 +86,10 @@ function EditSpecificationModalContent(props) {
                   <InlineMarkdown data={translate('ConditionUsingRegularExpressions')} />
                 </div>
                 <div>
-                  <InlineMarkdown data={translate('RegularExpressionsTutorialLink')} />
+                  <InlineMarkdown data={translate('RegularExpressionsTutorialLink', { url: 'https://www.regular-expressions.info/tutorial.html' })} />
                 </div>
                 <div>
-                  <InlineMarkdown data={translate('RegularExpressionsCanBeTested')} />
+                  <InlineMarkdown data={translate('RegularExpressionsCanBeTested', { url: 'http://regexstorm.net/tester' })} />
                 </div>
               </Alert>
           }

frontend/src/Store/Actions/interactiveImportActions.js

@@ -3,6 +3,7 @@ import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
 import { sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
+import sortByProp from 'Utilities/Array/sortByProp';
 import createAjaxRequest from 'Utilities/createAjaxRequest';
 import naturalExpansion from 'Utilities/String/naturalExpansion';
 import { set, update, updateItem } from './baseActions';
@@ -30,6 +31,7 @@ export const defaultState = {
   items: [],
   sortKey: 'relativePath',
   sortDirection: sortDirections.ASCENDING,
+  favoriteFolders: [],
   recentFolders: [],
   importMode: 'chooseImportMode',
   sortPredicates: {
@@ -58,6 +60,7 @@ export const defaultState = {
 export const persistState = [
   'interactiveImport.sortKey',
   'interactiveImport.sortDirection',
+  'interactiveImport.favoriteFolders',
   'interactiveImport.recentFolders',
   'interactiveImport.importMode'
 ];
@@ -73,6 +76,8 @@ export const UPDATE_INTERACTIVE_IMPORT_ITEMS = 'interactiveImport/updateInteract
 export const CLEAR_INTERACTIVE_IMPORT = 'interactiveImport/clearInteractiveImport';
 export const ADD_RECENT_FOLDER = 'interactiveImport/addRecentFolder';
 export const REMOVE_RECENT_FOLDER = 'interactiveImport/removeRecentFolder';
+export const ADD_FAVORITE_FOLDER = 'interactiveImport/addFavoriteFolder';
+export const REMOVE_FAVORITE_FOLDER = 'interactiveImport/removeFavoriteFolder';
 export const SET_INTERACTIVE_IMPORT_MODE = 'interactiveImport/setInteractiveImportMode';
 
 //
@@ -86,6 +91,8 @@ export const updateInteractiveImportItems = createAction(UPDATE_INTERACTIVE_IMPO
 export const clearInteractiveImport = createAction(CLEAR_INTERACTIVE_IMPORT);
 export const addRecentFolder = createAction(ADD_RECENT_FOLDER);
 export const removeRecentFolder = createAction(REMOVE_RECENT_FOLDER);
+export const addFavoriteFolder = createAction(ADD_FAVORITE_FOLDER);
+export const removeFavoriteFolder = createAction(REMOVE_FAVORITE_FOLDER);
 export const setInteractiveImportMode = createAction(SET_INTERACTIVE_IMPORT_MODE);
 
 //
@@ -264,9 +271,31 @@ export const reducers = createHandleActions({
     return Object.assign({}, state, { recentFolders });
   },
 
+  [ADD_FAVORITE_FOLDER]: function(state, { payload }) {
+    const folder = payload.folder;
+    const favoriteFolder = { folder };
+    const favoriteFolders = [...state.favoriteFolders, favoriteFolder].sort(sortByProp('folder'));
+
+    return Object.assign({}, state, { favoriteFolders });
+  },
+
+  [REMOVE_FAVORITE_FOLDER]: function(state, { payload }) {
+    const folder = payload.folder;
+    const favoriteFolders = state.favoriteFolders.reduce((acc, item) => {
+      if (item.folder !== folder) {
+        acc.push(item);
+      }
+
+      return acc;
+    }, []);
+
+    return Object.assign({}, state, { favoriteFolders });
+  },
+
   [CLEAR_INTERACTIVE_IMPORT]: function(state) {
     const newState = {
       ...defaultState,
+      favoriteFolders: state.favoriteFolders,
       recentFolders: state.recentFolders,
       importMode: state.importMode
     };

frontend/src/Store/Actions/movieCollectionActions.js

@@ -91,12 +91,8 @@ export const defaultState = {
     genres: function(item, filterValue, type) {
       const predicate = filterTypePredicates[type];
 
-      let allGenres = [];
-      item.movies.forEach((movie) => {
-        allGenres = allGenres.concat(movie.genres);
-      });
-
-      const genres = Array.from(new Set(allGenres)).slice(0, 3);
+      const allGenres = item.movies.flatMap(({ genres }) => genres);
+      const genres = Array.from(new Set(allGenres));
 
       return predicate(genres, filterValue);
     },
@@ -138,12 +134,8 @@ export const defaultState = {
       type: filterBuilderTypes.ARRAY,
       optionsSelector: function(items) {
         const genreList = items.reduce((acc, collection) => {
-          let collectionGenres = [];
-          collection.movies.forEach((movie) => {
-            collectionGenres = collectionGenres.concat(movie.genres);
-          });
-
-          const genres = Array.from(new Set(collectionGenres)).slice(0, 3);
+          const collectionGenres = collection.movies.flatMap(({ genres }) => genres);
+          const genres = Array.from(new Set(collectionGenres));
 
           genres.forEach((genre) => {
             acc.push({

frontend/src/Store/Actions/queueActions.js

@@ -201,6 +201,12 @@ export const defaultState = {
         label: () => translate('Protocol'),
         type: filterBuilderTypes.EQUAL,
         valueType: filterBuilderValueTypes.PROTOCOL
+      },
+      {
+        name: 'status',
+        label: () => translate('Status'),
+        type: filterBuilderTypes.EQUAL,
+        valueType: filterBuilderValueTypes.QUEUE_STATUS
       }
     ]
   },

frontend/src/Store/Selectors/createMovieQualityProfileSelector.ts

@@ -1,13 +1,14 @@
 import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
 import Movie from 'Movie/Movie';
+import QualityProfile from 'typings/QualityProfile';
 import { createMovieSelectorForHook } from './createMovieSelector';
 
 function createMovieQualityProfileSelector(movieId: number) {
   return createSelector(
     (state: AppState) => state.settings.qualityProfiles.items,
     createMovieSelectorForHook(movieId),
-    (qualityProfiles, movie = {} as Movie) => {
+    (qualityProfiles: QualityProfile[], movie = {} as Movie) => {
       return qualityProfiles.find(
         (profile) => profile.id === movie.qualityProfileId
       );

frontend/src/Store/Selectors/selectSettings.js

@@ -1,104 +0,0 @@
-import _ from 'lodash';
-
-function getValidationFailures(saveError) {
-  if (!saveError || saveError.status !== 400) {
-    return [];
-  }
-
-  return _.cloneDeep(saveError.responseJSON);
-}
-
-function mapFailure(failure) {
-  return {
-    message: failure.errorMessage,
-    link: failure.infoLink,
-    detailedMessage: failure.detailedDescription
-  };
-}
-
-function selectSettings(item, pendingChanges, saveError) {
-  const validationFailures = getValidationFailures(saveError);
-
-  // Merge all settings from the item along with pending
-  // changes to ensure any settings that were not included
-  // with the item are included.
-  const allSettings = Object.assign({}, item, pendingChanges);
-
-  const settings = _.reduce(allSettings, (result, value, key) => {
-    if (key === 'fields') {
-      return result;
-    }
-
-    // Return a flattened value
-    if (key === 'implementationName') {
-      result.implementationName = item[key];
-
-      return result;
-    }
-
-    const setting = {
-      value: item[key],
-      errors: _.map(_.remove(validationFailures, (failure) => {
-        return failure.propertyName.toLowerCase() === key.toLowerCase() && !failure.isWarning;
-      }), mapFailure),
-
-      warnings: _.map(_.remove(validationFailures, (failure) => {
-        return failure.propertyName.toLowerCase() === key.toLowerCase() && failure.isWarning;
-      }), mapFailure)
-    };
-
-    if (pendingChanges.hasOwnProperty(key)) {
-      setting.previousValue = setting.value;
-      setting.value = pendingChanges[key];
-      setting.pending = true;
-    }
-
-    result[key] = setting;
-    return result;
-  }, {});
-
-  const fields = _.reduce(item.fields, (result, f) => {
-    const field = Object.assign({ pending: false }, f);
-    const hasPendingFieldChange = pendingChanges.fields && pendingChanges.fields.hasOwnProperty(field.name);
-
-    if (hasPendingFieldChange) {
-      field.previousValue = field.value;
-      field.value = pendingChanges.fields[field.name];
-      field.pending = true;
-    }
-
-    field.errors = _.map(_.remove(validationFailures, (failure) => {
-      return failure.propertyName.toLowerCase() === field.name.toLowerCase() && !failure.isWarning;
-    }), mapFailure);
-
-    field.warnings = _.map(_.remove(validationFailures, (failure) => {
-      return failure.propertyName.toLowerCase() === field.name.toLowerCase() && failure.isWarning;
-    }), mapFailure);
-
-    result.push(field);
-    return result;
-  }, []);
-
-  if (fields.length) {
-    settings.fields = fields;
-  }
-
-  const validationErrors = _.filter(validationFailures, (failure) => {
-    return !failure.isWarning;
-  });
-
-  const validationWarnings = _.filter(validationFailures, (failure) => {
-    return failure.isWarning;
-  });
-
-  return {
-    settings,
-    validationErrors,
-    validationWarnings,
-    hasPendingChanges: !_.isEmpty(pendingChanges),
-    hasSettings: !_.isEmpty(settings),
-    pendingChanges
-  };
-}
-
-export default selectSettings;

frontend/src/Store/Selectors/selectSettings.ts

@@ -0,0 +1,168 @@
+import { cloneDeep, isEmpty } from 'lodash';
+import { Error } from 'App/State/AppSectionState';
+import Field from 'typings/Field';
+import {
+  Failure,
+  Pending,
+  PendingField,
+  PendingSection,
+  ValidationError,
+  ValidationFailure,
+  ValidationWarning,
+} from 'typings/pending';
+
+interface ValidationFailures {
+  errors: ValidationError[];
+  warnings: ValidationWarning[];
+}
+
+function getValidationFailures(saveError?: Error): ValidationFailures {
+  if (!saveError || saveError.status !== 400) {
+    return {
+      errors: [],
+      warnings: [],
+    };
+  }
+
+  return cloneDeep(saveError.responseJSON as ValidationFailure[]).reduce(
+    (acc: ValidationFailures, failure: ValidationFailure) => {
+      if (failure.isWarning) {
+        acc.warnings.push(failure as ValidationWarning);
+      } else {
+        acc.errors.push(failure as ValidationError);
+      }
+
+      return acc;
+    },
+    {
+      errors: [],
+      warnings: [],
+    }
+  );
+}
+
+function getFailures(failures: ValidationFailure[], key: string) {
+  const result = [];
+
+  for (let i = failures.length - 1; i >= 0; i--) {
+    if (failures[i].propertyName.toLowerCase() === key.toLowerCase()) {
+      result.unshift(mapFailure(failures[i]));
+
+      failures.splice(i, 1);
+    }
+  }
+
+  return result;
+}
+
+function mapFailure(failure: ValidationFailure): Failure {
+  return {
+    errorMessage: failure.errorMessage,
+    infoLink: failure.infoLink,
+    detailedDescription: failure.detailedDescription,
+
+    // TODO: Remove these renamed properties
+    message: failure.errorMessage,
+    link: failure.infoLink,
+    detailedMessage: failure.detailedDescription,
+  };
+}
+
+interface ModelBaseSetting {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [id: string]: any;
+}
+
+function selectSettings<T extends ModelBaseSetting>(
+  item: T,
+  pendingChanges: Partial<ModelBaseSetting>,
+  saveError?: Error
+) {
+  const { errors, warnings } = getValidationFailures(saveError);
+
+  // Merge all settings from the item along with pending
+  // changes to ensure any settings that were not included
+  // with the item are included.
+  const allSettings = Object.assign({}, item, pendingChanges);
+
+  const settings = Object.keys(allSettings).reduce(
+    (acc: PendingSection<T>, key) => {
+      if (key === 'fields') {
+        return acc;
+      }
+
+      // Return a flattened value
+      if (key === 'implementationName') {
+        acc.implementationName = item[key];
+
+        return acc;
+      }
+
+      const setting: Pending<T> = {
+        value: item[key],
+        pending: false,
+        errors: getFailures(errors, key),
+        warnings: getFailures(warnings, key),
+      };
+
+      if (pendingChanges.hasOwnProperty(key)) {
+        setting.previousValue = setting.value;
+        setting.value = pendingChanges[key];
+        setting.pending = true;
+      }
+
+      // @ts-expect-error - This is a valid key
+      acc[key] = setting;
+      return acc;
+    },
+    {} as PendingSection<T>
+  );
+
+  if ('fields' in item) {
+    const fields =
+      (item.fields as Field[]).reduce((acc: PendingField<T>[], f) => {
+        const field: PendingField<T> = Object.assign(
+          { pending: false, errors: [], warnings: [] },
+          f
+        );
+
+        if ('fields' in pendingChanges) {
+          const pendingChangesFields = pendingChanges.fields as Record<
+            string,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            any
+          >;
+
+          if (pendingChangesFields.hasOwnProperty(field.name)) {
+            field.previousValue = field.value;
+            field.value = pendingChangesFields[field.name];
+            field.pending = true;
+          }
+        }
+
+        field.errors = getFailures(errors, field.name);
+        field.warnings = getFailures(warnings, field.name);
+
+        acc.push(field);
+        return acc;
+      }, []) ?? [];
+
+    if (fields.length) {
+      settings.fields = fields;
+    }
+  }
+
+  const validationErrors = errors;
+  const validationWarnings = warnings;
+
+  return {
+    settings,
+    validationErrors,
+    validationWarnings,
+    hasPendingChanges: !isEmpty(pendingChanges),
+    hasSettings: !isEmpty(settings),
+    pendingChanges,
+  };
+}
+
+export default selectSettings;

frontend/src/Utilities/Object/getEntries.ts

@@ -0,0 +1,9 @@
+export type Entries<T> = {
+  [K in keyof T]: [K, T[K]];
+}[keyof T][];
+
+function getEntries<T extends object>(obj: T): Entries<T> {
+  return Object.entries(obj) as Entries<T>;
+}
+
+export default getEntries;

frontend/src/Utilities/String/getLanguageName.ts

@@ -35,7 +35,7 @@ export default function getLanguageName(code: string) {
 
   try {
     return languageNames.of(code) ?? code;
-  } catch (error) {
+  } catch {
     return code;
   }
 }

frontend/src/Utilities/String/translate.ts

@@ -17,7 +17,7 @@ export async function fetchTranslations(): Promise<boolean> {
       translations = data.Strings;
 
       resolve(true);
-    } catch (error) {
+    } catch {
       resolve(false);
     }
   });
@@ -27,6 +27,12 @@ export default function translate(
   key: string,
   tokens: Record<string, string | number | boolean> = {}
 ) {
+  const { isProduction = true } = window.Radarr;
+
+  if (!isProduction && !(key in translations)) {
+    console.warn(`Missing translation for key: ${key}`);
+  }
+
   const translation = translations[key] || key;
 
   tokens.appName = 'Radarr';

frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js

@@ -153,12 +153,15 @@ class CutoffUnmet extends Component {
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label={translate('SearchSelected')}
+              label={itemsSelected ? translate('SearchSelected') : translate('SearchAll')}
               iconName={icons.SEARCH}
-              isDisabled={!itemsSelected || isSearchingForCutoffUnmetMovies}
-              onPress={this.onSearchSelectedPress}
+              isDisabled={isSearchingForCutoffUnmetMovies}
+              isSpinning={isSearchingForCutoffUnmetMovies}
+              onPress={itemsSelected ? this.onSearchSelectedPress : this.onSearchAllCutoffUnmetPress}
             />
 
+            <PageToolbarSeparator />
+
             <PageToolbarButton
               label={isShowingMonitored ? translate('UnmonitorSelected') : translate('MonitorSelected')}
               iconName={icons.MONITORED}
@@ -166,18 +169,6 @@ class CutoffUnmet extends Component {
               isSpinning={isSaving}
               onPress={this.onToggleSelectedPress}
             />
-
-            <PageToolbarSeparator />
-
-            <PageToolbarButton
-              label={translate('SearchAll')}
-              iconName={icons.SEARCH}
-              isDisabled={!items.length}
-              isSpinning={isSearchingForCutoffUnmetMovies}
-              onPress={this.onSearchAllCutoffUnmetPress}
-            />
-
-            <PageToolbarSeparator />
           </PageToolbarSection>
 
           <PageToolbarSection alignContent={align.RIGHT}>

frontend/src/Wanted/CutoffUnmet/CutoffUnmetConnector.js

@@ -18,9 +18,10 @@ function createMapStateToProps() {
   return createSelector(
     (state) => state.wanted.cutoffUnmet,
     createCommandExecutingSelector(commandNames.CUTOFF_UNMET_MOVIES_SEARCH),
-    (cutoffUnmet, isSearchingForCutoffUnmetMovies) => {
+    createCommandExecutingSelector(commandNames.MOVIE_SEARCH),
+    (cutoffUnmet, isSearchingForCutoffUnmetMovies, isSearchingForSelectedCutoffUnmetMovies) => {
       return {
-        isSearchingForCutoffUnmetMovies,
+        isSearchingForCutoffUnmetMovies: isSearchingForCutoffUnmetMovies || isSearchingForSelectedCutoffUnmetMovies,
         isSaving: cutoffUnmet.items.filter((m) => m.isSaving).length > 1,
         ...cutoffUnmet
       };

frontend/src/Wanted/CutoffUnmet/CutoffUnmetRow.js

@@ -8,7 +8,7 @@ import movieEntities from 'Movie/movieEntities';
 import MovieSearchCell from 'Movie/MovieSearchCell';
 import MovieStatusConnector from 'Movie/MovieStatusConnector';
 import MovieTitleLink from 'Movie/MovieTitleLink';
-import MovieFileLanguageConnector from 'MovieFile/MovieFileLanguageConnector';
+import MovieFileLanguages from 'MovieFile/MovieFileLanguages';
 import styles from './CutoffUnmetRow.css';
 
 function CutoffUnmetRow(props) {
@@ -104,7 +104,7 @@ function CutoffUnmetRow(props) {
                 key={name}
                 className={styles.languages}
               >
-                <MovieFileLanguageConnector
+                <MovieFileLanguages
                   movieFileId={movieFileId}
                 />
               </TableRowCell>

frontend/src/Wanted/Missing/Missing.js

@@ -159,12 +159,15 @@ class Missing extends Component {
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label={translate('SearchSelected')}
+              label={itemsSelected ? translate('SearchSelected') : translate('SearchAll')}
               iconName={icons.SEARCH}
-              isDisabled={!itemsSelected || isSearchingForMissingMovies}
-              onPress={this.onSearchSelectedPress}
+              isSpinning={isSearchingForMissingMovies}
+              isDisabled={isSearchingForMissingMovies}
+              onPress={itemsSelected ? this.onSearchSelectedPress : this.onSearchAllMissingPress}
             />
 
+            <PageToolbarSeparator />
+
             <PageToolbarButton
               label={isShowingMonitored ? translate('UnmonitorSelected') : translate('MonitorSelected')}
               iconName={icons.MONITORED}
@@ -175,16 +178,6 @@ class Missing extends Component {
 
             <PageToolbarSeparator />
 
-            <PageToolbarButton
-              label={translate('SearchAll')}
-              iconName={icons.SEARCH}
-              isDisabled={!items.length}
-              isSpinning={isSearchingForMissingMovies}
-              onPress={this.onSearchAllMissingPress}
-            />
-
-            <PageToolbarSeparator />
-
             <PageToolbarButton
               label={translate('ManualImport')}
               iconName={icons.INTERACTIVE}

frontend/src/Wanted/Missing/MissingConnector.js

@@ -17,9 +17,10 @@ function createMapStateToProps() {
   return createSelector(
     (state) => state.wanted.missing,
     createCommandExecutingSelector(commandNames.MISSING_MOVIES_SEARCH),
-    (missing, isSearchingForMissingMovies) => {
+    createCommandExecutingSelector(commandNames.MOVIE_SEARCH),
+    (missing, isSearchingForMissingMovies, isSearchingForSelectedMissingMovies) => {
       return {
-        isSearchingForMissingMovies,
+        isSearchingForMissingMovies: isSearchingForMissingMovies || isSearchingForSelectedMissingMovies,
         isSaving: missing.items.filter((m) => m.isSaving).length > 1,
         ...missing
       };

frontend/src/bootstrap.tsx

@@ -1,6 +1,6 @@
 import { createBrowserHistory } from 'history';
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import createAppStore from 'Store/createAppStore';
 import App from './App/App';
 
@@ -9,9 +9,8 @@ import 'Diag/ConsoleApi';
 export async function bootstrap() {
   const history = createBrowserHistory();
   const store = createAppStore(history);
+  const container = document.getElementById('root');
 
-  render(
-    <App store={store} history={history} />,
-    document.getElementById('root')
-  );
+  const root = createRoot(container!); // createRoot(container!) if you use TypeScript
+  root.render(<App store={store} history={history} />);
 }

frontend/src/index.ts

@@ -14,6 +14,31 @@ window.Radarr = await response.json();
 __webpack_public_path__ = `${window.Radarr.urlBase}/`;
 /* eslint-enable no-undef, @typescript-eslint/ban-ts-comment */
 
+const error = console.error;
+
+// Monkey patch console.error to filter out some warnings from React
+// TODO: Remove this after the great TypeScript migration
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function logError(...parameters: any[]) {
+  const filter = parameters.find((parameter) => {
+    return (
+      parameter.includes(
+        'Support for defaultProps will be removed from function components in a future major release'
+      ) ||
+      parameter.includes(
+        'findDOMNode is deprecated and will be removed in the next major release'
+      )
+    );
+  });
+
+  if (!filter) {
+    error(...parameters);
+  }
+}
+
+console.error = logError;
+
 const { bootstrap } = await import('./bootstrap');
 
 await bootstrap();

frontend/src/typings/DownloadClient.ts

@@ -1,27 +1,13 @@
-import ModelBase from 'App/ModelBase';
+import Provider from './Provider';
 
-export interface Field {
-  order: number;
-  name: string;
-  label: string;
-  value: boolean | number | string;
-  type: string;
-  advanced: boolean;
-  privacy: string;
-}
+export type Protocol = 'torrent' | 'usenet' | 'unknown';
 
-interface DownloadClient extends ModelBase {
+interface DownloadClient extends Provider {
   enable: boolean;
-  protocol: string;
+  protocol: Protocol;
   priority: number;
   removeCompletedDownloads: boolean;
   removeFailedDownloads: boolean;
-  name: string;
-  fields: Field[];
-  implementationName: string;
-  implementation: string;
-  configContract: string;
-  infoLink: string;
   tags: number[];
 }
 

frontend/src/typings/Field.ts

@@ -0,0 +1,23 @@
+export interface FieldSelectOption<T> {
+  value: T;
+  name: string;
+  order: number;
+  hint?: string;
+  parentValue?: T;
+  isDisabled?: boolean;
+  additionalProperties?: Record<string, unknown>;
+}
+
+interface Field {
+  order: number;
+  name: string;
+  label: string;
+  value: boolean | number | string | number[];
+  section: string;
+  hidden: 'hidden' | 'hiddenIfNotSet' | 'visible';
+  type: string;
+  advanced: boolean;
+  privacy: string;
+}
+
+export default Field;

frontend/src/typings/History.ts

@@ -39,6 +39,8 @@ export interface DownloadFailedHistory {
 
 export interface DownloadFolderImportedHistory {
   customFormatScore?: string;
+  downloadClient: string;
+  downloadClientName: string;
   droppedPath: string;
   importedPath: string;
 }

frontend/src/typings/ImportList.ts

@@ -1,28 +1,12 @@
-import ModelBase from 'App/ModelBase';
+import Provider from './Provider';
 
-export interface Field {
-  order: number;
-  name: string;
-  label: string;
-  value: boolean | number | string;
-  type: string;
-  advanced: boolean;
-  privacy: string;
-}
-
-interface ImportList extends ModelBase {
+interface ImportList extends Provider {
   enable: boolean;
   enabled: boolean;
   enableAuto: boolean;
   qualityProfileId: number;
   minimumAvailability: string;
   rootFolderPath: string;
-  name: string;
-  fields: Field[];
-  implementationName: string;
-  implementation: string;
-  configContract: string;
-  infoLink: string;
   tags: number[];
 }
 

frontend/src/typings/Indexer.ts

@@ -1,27 +1,11 @@
-import ModelBase from 'App/ModelBase';
+import Provider from './Provider';
 
-export interface Field {
-  order: number;
-  name: string;
-  label: string;
-  value: boolean | number | string;
-  type: string;
-  advanced: boolean;
-  privacy: string;
-}
-
-interface Indexer extends ModelBase {
+interface Indexer extends Provider {
   enableRss: boolean;
   enableAutomaticSearch: boolean;
   enableInteractiveSearch: boolean;
   protocol: string;
   priority: number;
-  name: string;
-  fields: Field[];
-  implementationName: string;
-  implementation: string;
-  configContract: string;
-  infoLink: string;
   tags: number[];
 }