New: Bulk manage custom formats

ignore-downstream

Co-authored-by: GkhnGRBZ <gkhn.gurbuz@hotmail.com>
Co-authored-by: Havok Dan <havokdan@yahoo.com.br>
Co-authored-by: Jason54 <jason54700.jg@gmail.com>
Co-authored-by: Kerk en IT <info@kerkenit.nl>
Co-authored-by: Weblate <noreply@weblate.org>
Co-authored-by: fordas <fordas15@gmail.com>
Translate-URL: https://translate.servarr.com/projects/servarr/sonarr/es/
Translate-URL: https://translate.servarr.com/projects/servarr/sonarr/fr/
Translate-URL: https://translate.servarr.com/projects/servarr/sonarr/nl/
Translate-URL: https://translate.servarr.com/projects/servarr/sonarr/pt_BR/
Translate-URL: https://translate.servarr.com/projects/servarr/sonarr/tr/
Translation: Servarr/Sonarr

.github/workflows/build.yml

@@ -22,7 +22,7 @@ env:
   FRAMEWORK: net6.0
   RAW_BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
   SONARR_MAJOR_VERSION: 4
-  VERSION: 4.0.8
+  VERSION: 4.0.9
 
 jobs:
   backend:

frontend/.vscode/settings.json

@@ -9,7 +9,7 @@
 
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
 
   "typescript.preferences.quoteStyle": "single",

frontend/build/webpack.config.js

@@ -134,6 +134,12 @@ module.exports = (env) => {
               {
                 source: 'frontend/src/Content/robots.txt',
                 destination: path.join(distFolder, 'Content/robots.txt')
+              },
+
+              // manifest.json and browserconfig.xml
+              {
+                source: 'frontend/src/Content/*.(json|xml)',
+                destination: path.join(distFolder, 'Content')
               }
             ]
           }

frontend/postcss.config.js

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

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

@@ -51,7 +51,7 @@ function HistoryDetailsModal(props: HistoryDetailsModalProps) {
     sourceTitle,
     data,
     downloadId,
-    isMarkingAsFailed,
+    isMarkingAsFailed = false,
     shortDateFormat,
     timeFormat,
     onMarkAsFailedPress,
@@ -93,8 +93,4 @@ function HistoryDetailsModal(props: HistoryDetailsModalProps) {
   );
 }
 
-HistoryDetailsModal.defaultProps = {
-  isMarkingAsFailed: false,
-};
-
 export default HistoryDetailsModal;

frontend/src/Activity/History/HistoryRow.tsx

@@ -15,6 +15,7 @@ import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
 import useEpisode from 'Episode/useEpisode';
 import usePrevious from 'Helpers/Hooks/usePrevious';
 import { icons, tooltipPositions } from 'Helpers/Props';
+import Language from 'Language/Language';
 import { QualityModel } from 'Quality/Quality';
 import SeriesTitleLink from 'Series/SeriesTitleLink';
 import useSeries from 'Series/useSeries';
@@ -31,7 +32,7 @@ interface HistoryRowProps {
   id: number;
   episodeId: number;
   seriesId: number;
-  languages: object[];
+  languages: Language[];
   quality: QualityModel;
   customFormats?: CustomFormat[];
   customFormatScore: number;
@@ -61,7 +62,7 @@ function HistoryRow(props: HistoryRowProps) {
     date,
     data,
     downloadId,
-    isMarkingAsFailed,
+    isMarkingAsFailed = false,
     markAsFailedError,
     columns,
   } = props;
@@ -268,8 +269,4 @@ function HistoryRow(props: HistoryRowProps) {
   );
 }
 
-HistoryRow.defaultProps = {
-  customFormats: [],
-};
-
 export default HistoryRow;

frontend/src/Activity/Queue/QueueStatus.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon from 'Components/Icon';
+import Icon, { IconProps } from 'Components/Icon';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, kinds } from 'Helpers/Props';
 import TooltipPosition from 'Helpers/Props/TooltipPosition';
@@ -61,7 +61,7 @@ function QueueStatus(props: QueueStatusProps) {
 
   // status === 'downloading'
   let iconName = icons.DOWNLOADING;
-  let iconKind = kinds.DEFAULT;
+  let iconKind: IconProps['kind'] = kinds.DEFAULT;
   let title = translate('Downloading');
 
   if (status === 'paused') {
@@ -155,10 +155,4 @@ function QueueStatus(props: QueueStatusProps) {
   );
 }
 
-QueueStatus.defaultProps = {
-  trackedDownloadStatus: 'ok',
-  trackedDownloadState: 'downloading',
-  canFlip: false,
-};
-
 export default QueueStatus;

frontend/src/App/App.tsx

@@ -1,5 +1,4 @@
 import { ConnectedRouter, ConnectedRouterProps } from 'connected-react-router';
-import PropTypes from 'prop-types';
 import React from 'react';
 import DocumentTitle from 'react-document-title';
 import { Provider } from 'react-redux';
@@ -20,7 +19,7 @@ function App({ store, history }: AppProps) {
         <ConnectedRouter history={history}>
           <ApplyTheme />
           <PageConnector>
-            <AppRoutes app={App} />
+            <AppRoutes />
           </PageConnector>
         </ConnectedRouter>
       </Provider>
@@ -28,9 +27,4 @@ function App({ store, history }: AppProps) {
   );
 }
 
-App.propTypes = {
-  store: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired,
-};
-
 export default App;

frontend/src/App/AppRoutes.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Redirect, Route } from 'react-router-dom';
 import Blocklist from 'Activity/Blocklist/Blocklist';
@@ -165,8 +164,4 @@ function AppRoutes() {
   );
 }
 
-AppRoutes.propTypes = {
-  app: PropTypes.func.isRequired,
-};
-
 export default AppRoutes;

frontend/src/App/State/SettingsAppState.ts

@@ -6,6 +6,7 @@ import AppSectionState, {
   PagedAppSectionState,
 } from 'App/State/AppSectionState';
 import Language from 'Language/Language';
+import CustomFormat from 'typings/CustomFormat';
 import DownloadClient from 'typings/DownloadClient';
 import ImportList from 'typings/ImportList';
 import ImportListExclusion from 'typings/ImportListExclusion';
@@ -24,7 +25,9 @@ export interface DownloadClientAppState
   isTestingAll: boolean;
 }
 
-export type GeneralAppState = AppSectionItemState<General>;
+export interface GeneralAppState
+  extends AppSectionItemState<General>,
+    AppSectionSaveState {}
 
 export interface ImportListAppState
   extends AppSectionState<ImportList>,
@@ -46,6 +49,11 @@ export interface QualityProfilesAppState
   extends AppSectionState<QualityProfile>,
     AppSectionItemSchemaState<QualityProfile> {}
 
+export interface CustomFormatAppState
+  extends AppSectionState<CustomFormat>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
 export interface ImportListOptionsSettingsAppState
   extends AppSectionItemState<ImportListOptionsSettings>,
     AppSectionSaveState {}
@@ -64,6 +72,7 @@ export type UiSettingsAppState = AppSectionItemState<UiSettings>;
 
 interface SettingsAppState {
   advancedSettings: boolean;
+  customFormats: CustomFormatAppState;
   downloadClients: DownloadClientAppState;
   general: GeneralAppState;
   importListExclusions: ImportListExclusionsSettingsAppState;

frontend/src/App/State/SystemAppState.ts

@@ -8,15 +8,15 @@ import AppSectionState, { AppSectionItemState } from './AppSectionState';
 export type DiskSpaceAppState = AppSectionState<DiskSpace>;
 export type HealthAppState = AppSectionState<Health>;
 export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
-export type UpdateAppState = AppSectionState<Update>;
 export type TaskAppState = AppSectionState<Task>;
+export type UpdateAppState = AppSectionState<Update>;
 
 interface SystemAppState {
   diskSpace: DiskSpaceAppState;
   health: HealthAppState;
-  updates: UpdateAppState;
   status: SystemStatusAppState;
   tasks: TaskAppState;
+  updates: UpdateAppState;
 }
 
 export default SystemAppState;

frontend/src/Commands/Command.ts

@@ -26,7 +26,7 @@ export interface CommandBody {
   seriesId?: number;
   seriesIds?: number[];
   seasonNumber?: number;
-  [key: string]: string | number | boolean | undefined | number[] | undefined;
+  [key: string]: string | number | boolean | number[] | undefined;
 }
 
 interface Command extends ModelBase {

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

@@ -12,7 +12,7 @@ import IndexerFilterBuilderRowValueConnector from './IndexerFilterBuilderRowValu
 import LanguageFilterBuilderRowValue from './LanguageFilterBuilderRowValue';
 import ProtocolFilterBuilderRowValue from './ProtocolFilterBuilderRowValue';
 import QualityFilterBuilderRowValueConnector from './QualityFilterBuilderRowValueConnector';
-import QualityProfileFilterBuilderRowValueConnector from './QualityProfileFilterBuilderRowValueConnector';
+import QualityProfileFilterBuilderRowValue from './QualityProfileFilterBuilderRowValue';
 import SeasonsMonitoredStatusFilterBuilderRowValue from './SeasonsMonitoredStatusFilterBuilderRowValue';
 import SeriesFilterBuilderRowValue from './SeriesFilterBuilderRowValue';
 import SeriesStatusFilterBuilderRowValue from './SeriesStatusFilterBuilderRowValue';
@@ -78,7 +78,7 @@ function getRowValueConnector(selectedFilterBuilderProp) {
       return QualityFilterBuilderRowValueConnector;
 
     case filterBuilderValueTypes.QUALITY_PROFILE:
-      return QualityProfileFilterBuilderRowValueConnector;
+      return QualityProfileFilterBuilderRowValue;
 
     case filterBuilderValueTypes.SEASONS_MONITORED_STATUS:
       return SeasonsMonitoredStatusFilterBuilderRowValue;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import FilterBuilderRowValueProps from 'Components/Filter/Builder/FilterBuilderRowValueProps';
+import sortByProp from 'Utilities/Array/sortByProp';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+
+function createQualityProfilesSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.qualityProfiles.items,
+    (qualityProfiles) => {
+      return qualityProfiles;
+    }
+  );
+}
+
+function QualityProfileFilterBuilderRowValue(
+  props: FilterBuilderRowValueProps
+) {
+  const qualityProfiles = useSelector(createQualityProfilesSelector());
+
+  const tagList = qualityProfiles
+    .map(({ id, name }) => ({ id, name }))
+    .sort(sortByProp('name'));
+
+  return <FilterBuilderRowValue {...props} tagList={tagList} />;
+}
+
+export default QualityProfileFilterBuilderRowValue;

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

@@ -1,28 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import FilterBuilderRowValue from './FilterBuilderRowValue';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.qualityProfiles,
-    (qualityProfiles) => {
-      const tagList = qualityProfiles.items.map((qualityProfile) => {
-        const {
-          id,
-          name
-        } = qualityProfile;
-
-        return {
-          id,
-          name
-        };
-      });
-
-      return {
-        tagList
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(FilterBuilderRowValue);

frontend/src/Components/Form/SeriesTypeSelectInput.tsx

@@ -46,9 +46,9 @@ function SeriesTypeSelectInput(props: SeriesTypeSelectInputProps) {
   const values = [...seriesTypeOptions];
 
   const {
-    includeNoChange,
+    includeNoChange = false,
     includeNoChangeDisabled = true,
-    includeMixed,
+    includeMixed = false,
   } = props;
 
   if (includeNoChange) {
@@ -77,9 +77,4 @@ function SeriesTypeSelectInput(props: SeriesTypeSelectInputProps) {
   );
 }
 
-SeriesTypeSelectInput.defaultProps = {
-  includeNoChange: false,
-  includeMixed: false,
-};
-
 export default SeriesTypeSelectInput;

frontend/src/Components/Icon.js

@@ -1,73 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
-import { kinds } from 'Helpers/Props';
-import styles from './Icon.css';
-
-class Icon extends PureComponent {
-
-  //
-  // Render
-
-  render() {
-    const {
-      containerClassName,
-      className,
-      name,
-      kind,
-      size,
-      title,
-      isSpinning,
-      ...otherProps
-    } = this.props;
-
-    const icon = (
-      <FontAwesomeIcon
-        className={classNames(
-          className,
-          styles[kind]
-        )}
-        icon={name}
-        spin={isSpinning}
-        style={{
-          fontSize: `${size}px`
-        }}
-        {...otherProps}
-      />
-    );
-
-    if (title) {
-      return (
-        <span
-          className={containerClassName}
-          title={typeof title === 'function' ? title() : title}
-        >
-          {icon}
-        </span>
-      );
-    }
-
-    return icon;
-  }
-}
-
-Icon.propTypes = {
-  containerClassName: PropTypes.string,
-  className: PropTypes.string,
-  name: PropTypes.object.isRequired,
-  kind: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  isSpinning: PropTypes.bool.isRequired,
-  fixedWidth: PropTypes.bool.isRequired
-};
-
-Icon.defaultProps = {
-  kind: kinds.DEFAULT,
-  size: 14,
-  isSpinning: false,
-  fixedWidth: false
-};
-
-export default Icon;

frontend/src/Components/Icon.tsx

@@ -0,0 +1,59 @@
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconProps,
+} from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import React, { ComponentProps } from 'react';
+import { kinds } from 'Helpers/Props';
+import styles from './Icon.css';
+
+export interface IconProps
+  extends Omit<
+    FontAwesomeIconProps,
+    'icon' | 'spin' | 'name' | 'title' | 'size'
+  > {
+  containerClassName?: ComponentProps<'span'>['className'];
+  name: FontAwesomeIconProps['icon'];
+  kind?: Extract<(typeof kinds.all)[number], keyof typeof styles>;
+  size?: number;
+  isSpinning?: FontAwesomeIconProps['spin'];
+  title?: string | (() => string);
+}
+
+export default function Icon({
+  containerClassName,
+  className,
+  name,
+  kind = kinds.DEFAULT,
+  size = 14,
+  title,
+  isSpinning = false,
+  fixedWidth = false,
+  ...otherProps
+}: IconProps) {
+  const icon = (
+    <FontAwesomeIcon
+      className={classNames(className, styles[kind])}
+      icon={name}
+      spin={isSpinning}
+      fixedWidth={fixedWidth}
+      style={{
+        fontSize: `${size}px`,
+      }}
+      {...otherProps}
+    />
+  );
+
+  if (title) {
+    return (
+      <span
+        className={containerClassName}
+        title={typeof title === 'function' ? title() : title}
+      >
+        {icon}
+      </span>
+    );
+  }
+
+  return icon;
+}

frontend/src/Components/Label.js

@@ -1,48 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { kinds, sizes } from 'Helpers/Props';
-import styles from './Label.css';
-
-function Label(props) {
-  const {
-    className,
-    kind,
-    size,
-    outline,
-    children,
-    ...otherProps
-  } = props;
-
-  return (
-    <span
-      className={classNames(
-        className,
-        styles[kind],
-        styles[size],
-        outline && styles.outline
-      )}
-      {...otherProps}
-    >
-      {children}
-    </span>
-  );
-}
-
-Label.propTypes = {
-  className: PropTypes.string.isRequired,
-  title: PropTypes.string,
-  kind: PropTypes.oneOf(kinds.all).isRequired,
-  size: PropTypes.oneOf(sizes.all).isRequired,
-  outline: PropTypes.bool.isRequired,
-  children: PropTypes.node.isRequired
-};
-
-Label.defaultProps = {
-  className: styles.label,
-  kind: kinds.DEFAULT,
-  size: sizes.SMALL,
-  outline: false
-};
-
-export default Label;

frontend/src/Components/Label.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import React, { ComponentProps, ReactNode } from 'react';
+import { kinds, sizes } from 'Helpers/Props';
+import styles from './Label.css';
+
+export interface LabelProps extends ComponentProps<'span'> {
+  kind?: Extract<(typeof kinds.all)[number], keyof typeof styles>;
+  size?: Extract<(typeof sizes.all)[number], keyof typeof styles>;
+  outline?: boolean;
+  children: ReactNode;
+}
+
+export default function Label({
+  className = styles.label,
+  kind = kinds.DEFAULT,
+  size = sizes.SMALL,
+  outline = false,
+  ...otherProps
+}: LabelProps) {
+  return (
+    <span
+      className={classNames(
+        className,
+        styles[kind],
+        styles[size],
+        outline && styles.outline
+      )}
+      {...otherProps}
+    />
+  );
+}

frontend/src/Components/Link/Button.js

@@ -1,54 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { align, kinds, sizes } from 'Helpers/Props';
-import Link from './Link';
-import styles from './Button.css';
-
-class Button extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      className,
-      buttonGroupPosition,
-      kind,
-      size,
-      children,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <Link
-        className={classNames(
-          className,
-          styles[kind],
-          styles[size],
-          buttonGroupPosition && styles[buttonGroupPosition]
-        )}
-        {...otherProps}
-      >
-        {children}
-      </Link>
-    );
-  }
-
-}
-
-Button.propTypes = {
-  className: PropTypes.string.isRequired,
-  buttonGroupPosition: PropTypes.oneOf(align.all),
-  kind: PropTypes.oneOf(kinds.all),
-  size: PropTypes.oneOf(sizes.all),
-  children: PropTypes.node
-};
-
-Button.defaultProps = {
-  className: styles.button,
-  kind: kinds.DEFAULT,
-  size: sizes.MEDIUM
-};
-
-export default Button;

frontend/src/Components/Link/Button.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import React from 'react';
+import { align, kinds, sizes } from 'Helpers/Props';
+import Link, { LinkProps } from './Link';
+import styles from './Button.css';
+
+export interface ButtonProps extends Omit<LinkProps, 'children' | 'size'> {
+  buttonGroupPosition?: Extract<
+    (typeof align.all)[number],
+    keyof typeof styles
+  >;
+  kind?: Extract<(typeof kinds.all)[number], keyof typeof styles>;
+  size?: Extract<(typeof sizes.all)[number], keyof typeof styles>;
+  children: Required<LinkProps['children']>;
+}
+
+export default function Button({
+  className = styles.button,
+  buttonGroupPosition,
+  kind = kinds.DEFAULT,
+  size = sizes.MEDIUM,
+  ...otherProps
+}: ButtonProps) {
+  return (
+    <Link
+      className={classNames(
+        className,
+        styles[kind],
+        styles[size],
+        buttonGroupPosition && styles[buttonGroupPosition]
+      )}
+      {...otherProps}
+    />
+  );
+}

frontend/src/Components/Link/Link.tsx

@@ -1,96 +1,89 @@
 import classNames from 'classnames';
 import React, {
-  ComponentClass,
-  FunctionComponent,
+  ComponentPropsWithoutRef,
+  ElementType,
   SyntheticEvent,
   useCallback,
 } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import styles from './Link.css';
 
-interface ReactRouterLinkProps {
-  to?: string;
-}
+export type LinkProps<C extends ElementType = 'button'> =
+  ComponentPropsWithoutRef<C> & {
+    component?: C;
+    to?: string;
+    target?: string;
+    isDisabled?: LinkProps<C>['disabled'];
+    noRouter?: boolean;
+    onPress?(event: SyntheticEvent): void;
+  };
 
-export interface LinkProps extends React.HTMLProps<HTMLAnchorElement> {
-  className?: string;
-  component?:
-    | string
-    | FunctionComponent<LinkProps>
-    | ComponentClass<LinkProps, unknown>;
-  to?: string;
-  target?: string;
-  isDisabled?: boolean;
-  noRouter?: boolean;
-  onPress?(event: SyntheticEvent): void;
-}
-function Link(props: LinkProps) {
-  const {
-    className,
-    component = 'button',
-    to,
-    target,
-    type,
-    isDisabled,
-    noRouter = false,
-    onPress,
-    ...otherProps
-  } = props;
+export default function Link<C extends ElementType = 'button'>({
+  className,
+  component,
+  to,
+  target,
+  type,
+  isDisabled,
+  noRouter,
+  onPress,
+  ...otherProps
+}: LinkProps<C>) {
+  const Component = component || 'button';
 
   const onClick = useCallback(
     (event: SyntheticEvent) => {
-      if (!isDisabled && onPress) {
-        onPress(event);
+      if (isDisabled) {
+        return;
       }
+
+      onPress?.(event);
     },
     [isDisabled, onPress]
   );
 
-  const linkProps: React.HTMLProps<HTMLAnchorElement> & ReactRouterLinkProps = {
-    target,
-  };
-  let el = component;
-
-  if (to) {
-    if (/\w+?:\/\//.test(to)) {
-      el = 'a';
-      linkProps.href = to;
-      linkProps.target = target || '_blank';
-      linkProps.rel = 'noreferrer';
-    } else if (noRouter) {
-      el = 'a';
-      linkProps.href = to;
-      linkProps.target = target || '_self';
-    } else {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      el = RouterLink;
-      linkProps.to = `${window.Sonarr.urlBase}/${to.replace(/^\//, '')}`;
-      linkProps.target = target;
-    }
-  }
-
-  if (el === 'button' || el === 'input') {
-    linkProps.type = type || 'button';
-    linkProps.disabled = isDisabled;
-  }
-
-  linkProps.className = classNames(
+  const linkClass = classNames(
     className,
     styles.link,
     to && styles.to,
     isDisabled && 'isDisabled'
   );
 
-  const elementProps = {
-    ...otherProps,
-    type,
-    ...linkProps,
-  };
+  if (to) {
+    const toLink = /\w+?:\/\//.test(to);
 
-  elementProps.onClick = onClick;
+    if (toLink || noRouter) {
+      return (
+        <a
+          href={to}
+          target={target || (toLink ? '_blank' : '_self')}
+          rel={toLink ? 'noreferrer' : undefined}
+          className={linkClass}
+          onClick={onClick}
+          {...otherProps}
+        />
+      );
+    }
 
-  return React.createElement(el, elementProps);
+    return (
+      <RouterLink
+        to={`${window.Sonarr.urlBase}/${to.replace(/^\//, '')}`}
+        target={target}
+        className={linkClass}
+        onClick={onClick}
+        {...otherProps}
+      />
+    );
+  }
+
+  return (
+    <Component
+      type={type || 'button'}
+      target={target}
+      className={linkClass}
+      disabled={isDisabled}
+      onClick={onClick}
+      {...otherProps}
+    />
+  );
 }
-
-export default Link;

frontend/src/Components/MonitorToggleButton.css

@@ -3,9 +3,9 @@
 
   padding: 0;
   font-size: inherit;
-}
 
-.isDisabled {
-  color: var(--disabledColor);
-  cursor: not-allowed;
+  &.isDisabled {
+    color: var(--disabledColor);
+    cursor: not-allowed;
+  }
 }

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

@@ -6,7 +6,7 @@ import Link from 'Components/Link/Link';
 import { icons } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import KeyboardShortcutsModal from './KeyboardShortcutsModal';
-import PageHeaderActionsMenuConnector from './PageHeaderActionsMenuConnector';
+import PageHeaderActionsMenu from './PageHeaderActionsMenu';
 import SeriesSearchInputConnector from './SeriesSearchInputConnector';
 import styles from './PageHeader.css';
 
@@ -83,7 +83,8 @@ class PageHeader extends Component {
             size={14}
             title={translate('Donate')}
           />
-          <PageHeaderActionsMenuConnector
+
+          <PageHeaderActionsMenu
             onKeyboardShortcutsPress={this.onOpenKeyboardShortcutsModal}
           />
         </div>

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

@@ -1,90 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Icon from 'Components/Icon';
-import Menu from 'Components/Menu/Menu';
-import MenuButton from 'Components/Menu/MenuButton';
-import MenuContent from 'Components/Menu/MenuContent';
-import MenuItem from 'Components/Menu/MenuItem';
-import MenuItemSeparator from 'Components/Menu/MenuItemSeparator';
-import { align, icons, kinds } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import styles from './PageHeaderActionsMenu.css';
-
-function PageHeaderActionsMenu(props) {
-  const {
-    formsAuth,
-    onKeyboardShortcutsPress,
-    onRestartPress,
-    onShutdownPress
-  } = props;
-
-  return (
-    <div>
-      <Menu alignMenu={align.RIGHT}>
-        <MenuButton className={styles.menuButton} aria-label="Menu Button">
-          <Icon
-            name={icons.INTERACTIVE}
-            title={translate('Menu')}
-          />
-        </MenuButton>
-
-        <MenuContent>
-          <MenuItem onPress={onKeyboardShortcutsPress}>
-            <Icon
-              className={styles.itemIcon}
-              name={icons.KEYBOARD}
-            />
-            {translate('KeyboardShortcuts')}
-          </MenuItem>
-
-          <MenuItemSeparator />
-
-          <MenuItem onPress={onRestartPress}>
-            <Icon
-              className={styles.itemIcon}
-              name={icons.RESTART}
-            />
-            {translate('Restart')}
-          </MenuItem>
-
-          <MenuItem onPress={onShutdownPress}>
-            <Icon
-              className={styles.itemIcon}
-              name={icons.SHUTDOWN}
-              kind={kinds.DANGER}
-            />
-            {translate('Shutdown')}
-          </MenuItem>
-
-          {
-            formsAuth &&
-              <div className={styles.separator} />
-          }
-
-          {
-            formsAuth &&
-              <MenuItem
-                to={`${window.Sonarr.urlBase}/logout`}
-                noRouter={true}
-              >
-                <Icon
-                  className={styles.itemIcon}
-                  name={icons.LOGOUT}
-                />
-                {translate('Logout')}
-              </MenuItem>
-          }
-        </MenuContent>
-      </Menu>
-    </div>
-  );
-}
-
-PageHeaderActionsMenu.propTypes = {
-  formsAuth: PropTypes.bool.isRequired,
-  onKeyboardShortcutsPress: PropTypes.func.isRequired,
-  onRestartPress: PropTypes.func.isRequired,
-  onShutdownPress: PropTypes.func.isRequired
-};
-
-export default PageHeaderActionsMenu;

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

@@ -0,0 +1,87 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import Icon from 'Components/Icon';
+import Menu from 'Components/Menu/Menu';
+import MenuButton from 'Components/Menu/MenuButton';
+import MenuContent from 'Components/Menu/MenuContent';
+import MenuItem from 'Components/Menu/MenuItem';
+import MenuItemSeparator from 'Components/Menu/MenuItemSeparator';
+import { align, icons, kinds } from 'Helpers/Props';
+import { restart, shutdown } from 'Store/Actions/systemActions';
+import translate from 'Utilities/String/translate';
+import styles from './PageHeaderActionsMenu.css';
+
+interface PageHeaderActionsMenuProps {
+  onKeyboardShortcutsPress(): void;
+}
+
+function PageHeaderActionsMenu(props: PageHeaderActionsMenuProps) {
+  const { onKeyboardShortcutsPress } = props;
+
+  const dispatch = useDispatch();
+
+  const { authentication, isDocker } = useSelector(
+    (state: AppState) => state.system.status.item
+  );
+
+  const formsAuth = authentication === 'forms';
+
+  const handleRestartPress = useCallback(() => {
+    dispatch(restart());
+  }, [dispatch]);
+
+  const handleShutdownPress = useCallback(() => {
+    dispatch(shutdown());
+  }, [dispatch]);
+
+  return (
+    <div>
+      <Menu alignMenu={align.RIGHT}>
+        <MenuButton className={styles.menuButton} aria-label="Menu Button">
+          <Icon name={icons.INTERACTIVE} title={translate('Menu')} />
+        </MenuButton>
+
+        <MenuContent>
+          <MenuItem onPress={onKeyboardShortcutsPress}>
+            <Icon className={styles.itemIcon} name={icons.KEYBOARD} />
+            {translate('KeyboardShortcuts')}
+          </MenuItem>
+
+          {isDocker ? null : (
+            <>
+              <MenuItemSeparator />
+
+              <MenuItem onPress={handleRestartPress}>
+                <Icon className={styles.itemIcon} name={icons.RESTART} />
+                {translate('Restart')}
+              </MenuItem>
+
+              <MenuItem onPress={handleShutdownPress}>
+                <Icon
+                  className={styles.itemIcon}
+                  name={icons.SHUTDOWN}
+                  kind={kinds.DANGER}
+                />
+                {translate('Shutdown')}
+              </MenuItem>
+            </>
+          )}
+
+          {formsAuth ? (
+            <>
+              <MenuItemSeparator />
+
+              <MenuItem to={`${window.Sonarr.urlBase}/logout`} noRouter={true}>
+                <Icon className={styles.itemIcon} name={icons.LOGOUT} />
+                {translate('Logout')}
+              </MenuItem>
+            </>
+          ) : null}
+        </MenuContent>
+      </Menu>
+    </div>
+  );
+}
+
+export default PageHeaderActionsMenu;

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

@@ -1,56 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { restart, shutdown } from 'Store/Actions/systemActions';
-import PageHeaderActionsMenu from './PageHeaderActionsMenu';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.system.status,
-    (status) => {
-      return {
-        formsAuth: status.item.authentication === 'forms'
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  restart,
-  shutdown
-};
-
-class PageHeaderActionsMenuConnector extends Component {
-
-  //
-  // Listeners
-
-  onRestartPress = () => {
-    this.props.restart();
-  };
-
-  onShutdownPress = () => {
-    this.props.shutdown();
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <PageHeaderActionsMenu
-        {...this.props}
-        onRestartPress={this.onRestartPress}
-        onShutdownPress={this.onShutdownPress}
-      />
-    );
-  }
-}
-
-PageHeaderActionsMenuConnector.propTypes = {
-  restart: PropTypes.func.isRequired,
-  shutdown: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(PageHeaderActionsMenuConnector);

frontend/src/Components/SignalRConnector.js

@@ -212,6 +212,8 @@ class SignalRConnector extends Component {
 
     if (action === 'updated') {
       this.props.dispatchUpdateItem({ section, ...body.resource });
+
+      repopulatePage('seriesUpdated');
     } else if (action === 'deleted') {
       this.props.dispatchRemoveItem({ section, id: body.resource.id });
     }

frontend/src/Components/Table/Table.js

@@ -66,7 +66,9 @@ function Table(props) {
             columns.map((column) => {
               const {
                 name,
-                isVisible
+                isVisible,
+                isSortable,
+                ...otherColumnProps
               } = column;
 
               if (!isVisible) {
@@ -84,6 +86,7 @@ function Table(props) {
                     name={name}
                     isSortable={false}
                     {...otherProps}
+                    {...otherColumnProps}
                   >
                     <TableOptionsModalWrapper
                       columns={columns}

frontend/src/Content/Images/Icons/browserconfig.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="/Content/Images/Icons/mstile-150x150.png"/>
-            <TileColor>#00ccff</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>

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

@@ -1,19 +0,0 @@
-{
-    "name": "Sonarr",
-    "icons": [
-        {
-            "src": "android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "start_url": "../../../../",
-    "theme_color": "#3a3f51",
-    "background_color": "#3a3f51",
-    "display": "standalone"
-}

frontend/src/Content/browserconfig.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+	<msapplication>
+		<tile>
+			<square150x150logo src="__URL_BASE__/Content/Images/Icons/mstile-150x150.png" />
+			<TileColor>
+				#00ccff
+			</TileColor>
+		</tile>
+	</msapplication>
+</browserconfig>

frontend/src/Content/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "Sonarr",
+  "icons": [
+    {
+      "src": "__URL_BASE__/Content/Images/Icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "__URL_BASE__/Content/Images/Icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "__URL_BASE__/",
+  "theme_color": "#3a3f51",
+  "background_color": "#3a3f51",
+  "display": "standalone"
+}

frontend/src/Episode/EpisodeLanguages.tsx

@@ -1,18 +1,21 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import Label from 'Components/Label';
 import Popover from 'Components/Tooltip/Popover';
 import { kinds, tooltipPositions } from 'Helpers/Props';
+import Language from 'Language/Language';
 import translate from 'Utilities/String/translate';
 
-function EpisodeLanguages(props) {
-  const {
-    className,
-    languages,
-    isCutoffNotMet
-  } = props;
+interface EpisodeLanguagesProps {
+  className?: string;
+  languages: Language[];
+  isCutoffNotMet?: boolean;
+}
 
-  if (!languages) {
+function EpisodeLanguages(props: EpisodeLanguagesProps) {
+  const { className, languages, isCutoffNotMet = true } = props;
+
+  // TODO: Typescript - Remove once everything is converted
+  if (!languages || languages.length === 0) {
     return null;
   }
 
@@ -41,15 +44,9 @@ function EpisodeLanguages(props) {
       title={translate('Languages')}
       body={
         <ul>
-          {
-            languages.map((language) => {
-              return (
-                <li key={language.id}>
-                  {language.name}
-                </li>
-              );
-            })
-          }
+          {languages.map((language) => (
+            <li key={language.id}>{language.name}</li>
+          ))}
         </ul>
       }
       position={tooltipPositions.LEFT}
@@ -57,14 +54,4 @@ function EpisodeLanguages(props) {
   );
 }
 
-EpisodeLanguages.propTypes = {
-  className: PropTypes.string,
-  languages: PropTypes.arrayOf(PropTypes.object),
-  isCutoffNotMet: PropTypes.bool
-};
-
-EpisodeLanguages.defaultProps = {
-  isCutoffNotMet: true
-};
-
 export default EpisodeLanguages;

frontend/src/FirstRun/AuthenticationRequiredModal.js

@@ -1,34 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import { sizes } from 'Helpers/Props';
-import AuthenticationRequiredModalContentConnector from './AuthenticationRequiredModalContentConnector';
-
-function onModalClose() {
-  // No-op
-}
-
-function AuthenticationRequiredModal(props) {
-  const {
-    isOpen
-  } = props;
-
-  return (
-    <Modal
-      size={sizes.MEDIUM}
-      isOpen={isOpen}
-      closeOnBackgroundClick={false}
-      onModalClose={onModalClose}
-    >
-      <AuthenticationRequiredModalContentConnector
-        onModalClose={onModalClose}
-      />
-    </Modal>
-  );
-}
-
-AuthenticationRequiredModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired
-};
-
-export default AuthenticationRequiredModal;

frontend/src/FirstRun/AuthenticationRequiredModal.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import AuthenticationRequiredModalContent from './AuthenticationRequiredModalContent';
+
+function onModalClose() {
+  // No-op
+}
+
+interface AuthenticationRequiredModalProps {
+  isOpen: boolean;
+}
+
+export default function AuthenticationRequiredModal({
+  isOpen,
+}: AuthenticationRequiredModalProps) {
+  return (
+    <Modal
+      size={sizes.MEDIUM}
+      isOpen={isOpen}
+      closeOnBackgroundClick={false}
+      onModalClose={onModalClose}
+    >
+      <AuthenticationRequiredModalContent />
+    </Modal>
+  );
+}

frontend/src/FirstRun/AuthenticationRequiredModalContent.js

@@ -1,170 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useEffect, useRef } from 'react';
-import Alert from 'Components/Alert';
-import FormGroup from 'Components/Form/FormGroup';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import SpinnerButton from 'Components/Link/SpinnerButton';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import ModalBody from 'Components/Modal/ModalBody';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalFooter from 'Components/Modal/ModalFooter';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import { inputTypes, kinds } from 'Helpers/Props';
-import { authenticationMethodOptions, authenticationRequiredOptions } from 'Settings/General/SecuritySettings';
-import translate from 'Utilities/String/translate';
-import styles from './AuthenticationRequiredModalContent.css';
-
-function onModalClose() {
-  // No-op
-}
-
-function AuthenticationRequiredModalContent(props) {
-  const {
-    isPopulated,
-    error,
-    isSaving,
-    settings,
-    onInputChange,
-    onSavePress,
-    dispatchFetchStatus
-  } = props;
-
-  const {
-    authenticationMethod,
-    authenticationRequired,
-    username,
-    password,
-    passwordConfirmation
-  } = settings;
-
-  const authenticationEnabled = authenticationMethod && authenticationMethod.value !== 'none';
-
-  const didMount = useRef(false);
-
-  useEffect(() => {
-    if (!isSaving && didMount.current) {
-      dispatchFetchStatus();
-    }
-
-    didMount.current = true;
-  }, [isSaving, dispatchFetchStatus]);
-
-  return (
-    <ModalContent
-      showCloseButton={false}
-      onModalClose={onModalClose}
-    >
-      <ModalHeader>
-        {translate('AuthenticationRequired')}
-      </ModalHeader>
-
-      <ModalBody>
-        <Alert
-          className={styles.authRequiredAlert}
-          kind={kinds.WARNING}
-        >
-          {translate('AuthenticationRequiredWarning')}
-        </Alert>
-
-        {
-          isPopulated && !error ?
-            <div>
-              <FormGroup>
-                <FormLabel>{translate('AuthenticationMethod')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.SELECT}
-                  name="authenticationMethod"
-                  values={authenticationMethodOptions}
-                  helpText={translate('AuthenticationMethodHelpText')}
-                  helpTextWarning={authenticationMethod.value === 'none' ? translate('AuthenticationMethodHelpTextWarning') : undefined}
-                  helpLink="https://wiki.servarr.com/sonarr/faq#forced-authentication"
-                  onChange={onInputChange}
-                  {...authenticationMethod}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('AuthenticationRequired')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.SELECT}
-                  name="authenticationRequired"
-                  values={authenticationRequiredOptions}
-                  helpText={translate('AuthenticationRequiredHelpText')}
-                  onChange={onInputChange}
-                  {...authenticationRequired}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('Username')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.TEXT}
-                  name="username"
-                  onChange={onInputChange}
-                  helpTextWarning={username?.value ? undefined : translate('AuthenticationRequiredUsernameHelpTextWarning')}
-                  {...username}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('Password')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.PASSWORD}
-                  name="password"
-                  onChange={onInputChange}
-                  helpTextWarning={password?.value ? undefined : translate('AuthenticationRequiredPasswordHelpTextWarning')}
-                  {...password}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('PasswordConfirmation')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.PASSWORD}
-                  name="passwordConfirmation"
-                  onChange={onInputChange}
-                  helpTextWarning={passwordConfirmation?.value ? undefined : translate('AuthenticationRequiredPasswordConfirmationHelpTextWarning')}
-                  {...passwordConfirmation}
-                />
-              </FormGroup>
-            </div> :
-            null
-        }
-
-        {
-          !isPopulated && !error ? <LoadingIndicator /> : null
-        }
-      </ModalBody>
-
-      <ModalFooter>
-        <SpinnerButton
-          kind={kinds.PRIMARY}
-          isSpinning={isSaving}
-          isDisabled={!authenticationEnabled}
-          onPress={onSavePress}
-        >
-          {translate('Save')}
-        </SpinnerButton>
-      </ModalFooter>
-    </ModalContent>
-  );
-}
-
-AuthenticationRequiredModalContent.propTypes = {
-  isPopulated: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  isSaving: PropTypes.bool.isRequired,
-  saveError: PropTypes.object,
-  settings: PropTypes.object.isRequired,
-  onInputChange: PropTypes.func.isRequired,
-  onSavePress: PropTypes.func.isRequired,
-  dispatchFetchStatus: PropTypes.func.isRequired
-};
-
-export default AuthenticationRequiredModalContent;

frontend/src/FirstRun/AuthenticationRequiredModalContent.tsx

@@ -0,0 +1,194 @@
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Alert from 'Components/Alert';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { inputTypes, kinds } from 'Helpers/Props';
+import {
+  authenticationMethodOptions,
+  authenticationRequiredOptions,
+} from 'Settings/General/SecuritySettings';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import {
+  fetchGeneralSettings,
+  saveGeneralSettings,
+  setGeneralSettingsValue,
+} from 'Store/Actions/settingsActions';
+import { fetchStatus } from 'Store/Actions/systemActions';
+import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
+import { InputChanged } from 'typings/inputs';
+import translate from 'Utilities/String/translate';
+import styles from './AuthenticationRequiredModalContent.css';
+
+const SECTION = 'general';
+
+const selector = createSettingsSectionSelector(SECTION);
+
+function onModalClose() {
+  // No-op
+}
+
+export default function AuthenticationRequiredModalContent() {
+  const { isPopulated, error, isSaving, settings } = useSelector(selector);
+  const dispatch = useDispatch();
+
+  const {
+    authenticationMethod,
+    authenticationRequired,
+    username,
+    password,
+    passwordConfirmation,
+  } = settings;
+
+  const wasSaving = usePrevious(isSaving);
+
+  useEffect(() => {
+    dispatch(fetchGeneralSettings());
+
+    return () => {
+      dispatch(clearPendingChanges());
+    };
+  }, [dispatch]);
+
+  const onInputChange = useCallback(
+    (args: InputChanged) => {
+      // @ts-expect-error Actions aren't typed
+      dispatch(setGeneralSettingsValue(args));
+    },
+    [dispatch]
+  );
+
+  const authenticationEnabled =
+    authenticationMethod && authenticationMethod.value !== 'none';
+
+  useEffect(() => {
+    if (isSaving || !wasSaving) {
+      return;
+    }
+
+    dispatch(fetchStatus());
+  }, [isSaving, wasSaving, dispatch]);
+
+  const onPress = useCallback(() => {
+    dispatch(saveGeneralSettings());
+  }, [dispatch]);
+
+  return (
+    <ModalContent showCloseButton={false} onModalClose={onModalClose}>
+      <ModalHeader>{translate('AuthenticationRequired')}</ModalHeader>
+
+      <ModalBody>
+        <Alert className={styles.authRequiredAlert} kind={kinds.WARNING}>
+          {translate('AuthenticationRequiredWarning')}
+        </Alert>
+
+        {isPopulated && !error ? (
+          <div>
+            <FormGroup>
+              <FormLabel>{translate('AuthenticationMethod')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.SELECT}
+                name="authenticationMethod"
+                values={authenticationMethodOptions}
+                helpText={translate('AuthenticationMethodHelpText')}
+                helpTextWarning={
+                  authenticationMethod.value === 'none'
+                    ? translate('AuthenticationMethodHelpTextWarning')
+                    : undefined
+                }
+                helpLink="https://wiki.servarr.com/sonarr/faq#forced-authentication"
+                onChange={onInputChange}
+                {...authenticationMethod}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('AuthenticationRequired')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.SELECT}
+                name="authenticationRequired"
+                values={authenticationRequiredOptions}
+                helpText={translate('AuthenticationRequiredHelpText')}
+                onChange={onInputChange}
+                {...authenticationRequired}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('Username')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.TEXT}
+                name="username"
+                helpTextWarning={
+                  username?.value
+                    ? undefined
+                    : translate('AuthenticationRequiredUsernameHelpTextWarning')
+                }
+                onChange={onInputChange}
+                {...username}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('Password')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.PASSWORD}
+                name="password"
+                helpTextWarning={
+                  password?.value
+                    ? undefined
+                    : translate('AuthenticationRequiredPasswordHelpTextWarning')
+                }
+                onChange={onInputChange}
+                {...password}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('PasswordConfirmation')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.PASSWORD}
+                name="passwordConfirmation"
+                helpTextWarning={
+                  passwordConfirmation?.value
+                    ? undefined
+                    : translate(
+                        'AuthenticationRequiredPasswordConfirmationHelpTextWarning'
+                      )
+                }
+                onChange={onInputChange}
+                {...passwordConfirmation}
+              />
+            </FormGroup>
+          </div>
+        ) : null}
+
+        {!isPopulated && !error ? <LoadingIndicator /> : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <SpinnerButton
+          kind={kinds.PRIMARY}
+          isSpinning={isSaving}
+          isDisabled={!authenticationEnabled}
+          onPress={onPress}
+        >
+          {translate('Save')}
+        </SpinnerButton>
+      </ModalFooter>
+    </ModalContent>
+  );
+}

frontend/src/FirstRun/AuthenticationRequiredModalContentConnector.js

@@ -1,86 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { clearPendingChanges } from 'Store/Actions/baseActions';
-import { fetchGeneralSettings, saveGeneralSettings, setGeneralSettingsValue } from 'Store/Actions/settingsActions';
-import { fetchStatus } from 'Store/Actions/systemActions';
-import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
-import AuthenticationRequiredModalContent from './AuthenticationRequiredModalContent';
-
-const SECTION = 'general';
-
-function createMapStateToProps() {
-  return createSelector(
-    createSettingsSectionSelector(SECTION),
-    (sectionSettings) => {
-      return {
-        ...sectionSettings
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchClearPendingChanges: clearPendingChanges,
-  dispatchSetGeneralSettingsValue: setGeneralSettingsValue,
-  dispatchSaveGeneralSettings: saveGeneralSettings,
-  dispatchFetchGeneralSettings: fetchGeneralSettings,
-  dispatchFetchStatus: fetchStatus
-};
-
-class AuthenticationRequiredModalContentConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.dispatchFetchGeneralSettings();
-  }
-
-  componentWillUnmount() {
-    this.props.dispatchClearPendingChanges({ section: `settings.${SECTION}` });
-  }
-
-  //
-  // Listeners
-
-  onInputChange = ({ name, value }) => {
-    this.props.dispatchSetGeneralSettingsValue({ name, value });
-  };
-
-  onSavePress = () => {
-    this.props.dispatchSaveGeneralSettings();
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      dispatchClearPendingChanges,
-      dispatchFetchGeneralSettings,
-      dispatchSetGeneralSettingsValue,
-      dispatchSaveGeneralSettings,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <AuthenticationRequiredModalContent
-        {...otherProps}
-        onInputChange={this.onInputChange}
-        onSavePress={this.onSavePress}
-      />
-    );
-  }
-}
-
-AuthenticationRequiredModalContentConnector.propTypes = {
-  dispatchClearPendingChanges: PropTypes.func.isRequired,
-  dispatchFetchGeneralSettings: PropTypes.func.isRequired,
-  dispatchSetGeneralSettingsValue: PropTypes.func.isRequired,
-  dispatchSaveGeneralSettings: PropTypes.func.isRequired,
-  dispatchFetchStatus: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(AuthenticationRequiredModalContentConnector);

frontend/src/Helpers/Props/kinds.ts

@@ -19,5 +19,5 @@ export const all = [
   PRIMARY,
   PURPLE,
   SUCCESS,
-  WARNING
-];
+  WARNING,
+] as const;

frontend/src/Helpers/Props/sizes.ts

@@ -4,4 +4,12 @@ export const MEDIUM = 'medium';
 export const LARGE = 'large';
 export const EXTRA_LARGE = 'extraLarge';
 export const EXTRA_EXTRA_LARGE = 'extraExtraLarge';
-export const all = [EXTRA_SMALL, SMALL, MEDIUM, LARGE, EXTRA_LARGE, EXTRA_EXTRA_LARGE];
+
+export const all = [
+  EXTRA_SMALL,
+  SMALL,
+  MEDIUM,
+  LARGE,
+  EXTRA_LARGE,
+  EXTRA_EXTRA_LARGE,
+] as const;

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.tsx

@@ -525,7 +525,7 @@ function InteractiveImportRow(props: InteractiveImportRowProps) {
             <>
               {indexerFlags ? (
                 <Popover
-                  anchor={<Icon name={icons.FLAG} kind={kinds.PRIMARY} />}
+                  anchor={<Icon name={icons.FLAG} />}
                   title={translate('IndexerFlags')}
                   body={<IndexerFlags indexerFlags={indexerFlags} />}
                   position={tooltipPositions.LEFT}

frontend/src/InteractiveSearch/InteractiveSearchRow.tsx

@@ -264,7 +264,7 @@ function InteractiveSearchRow(props: InteractiveSearchRowProps) {
       <TableRowCell className={styles.indexerFlags}>
         {indexerFlags ? (
           <Popover
-            anchor={<Icon name={icons.FLAG} kind={kinds.PRIMARY} />}
+            anchor={<Icon name={icons.FLAG} />}
             title={translate('IndexerFlags')}
             body={<IndexerFlags indexerFlags={indexerFlags} />}
             position={tooltipPositions.LEFT}

frontend/src/Series/Details/SeriesDetails.css

@@ -130,6 +130,7 @@
 .sizeOnDisk,
 .qualityProfileName,
 .originalLanguageName,
+.statusName,
 .network,
 .links,
 .tags {

frontend/src/Series/Details/SeriesDetails.css.d.ts

@@ -24,6 +24,7 @@ interface CssExports {
   'seriesNavigationButton': string;
   'seriesNavigationButtons': string;
   'sizeOnDisk': string;
+  'statusName': string;
   'tags': string;
   'title': string;
   'titleContainer': string;

frontend/src/Series/Details/SeriesDetails.js

@@ -230,7 +230,7 @@ class SeriesDetails extends Component {
     } = this.state;
 
     const statusDetails = getSeriesStatusDetails(status);
-    const runningYears = statusDetails.title === translate('Ended') ? `${year}-${getDateYear(lastAired)}` : `${year}-`;
+    const runningYears = status === 'ended' ? `${year}-${getDateYear(lastAired)}` : `${year}-`;
 
     let episodeFilesCountMessage = translate('SeriesDetailsNoEpisodeFiles');
 
@@ -509,13 +509,14 @@ class SeriesDetails extends Component {
                     className={styles.detailsLabel}
                     title={statusDetails.message}
                     size={sizes.LARGE}
+                    kind={status === 'deleted' ? kinds.INVERSE : undefined}
                   >
                     <div>
                       <Icon
                         name={statusDetails.icon}
                         size={17}
                       />
-                      <span className={styles.qualityProfileName}>
+                      <span className={styles.statusName}>
                         {statusDetails.title}
                       </span>
                     </div>

frontend/src/Series/Details/SeriesDetailsConnector.js

@@ -152,7 +152,7 @@ class SeriesDetailsConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    registerPagePopulator(this.populate);
+    registerPagePopulator(this.populate, ['seriesUpdated']);
     this.populate();
   }
 

frontend/src/Series/Index/Overview/SeriesIndexOverview.css

@@ -25,7 +25,7 @@ $hoverScale: 1.05;
   }
 }
 
-.ended {
+.status {
   position: absolute;
   top: 0;
   right: 0;
@@ -34,8 +34,15 @@ $hoverScale: 1.05;
   height: 0;
   border-width: 0 25px 25px 0;
   border-style: solid;
-  border-color: transparent var(--dangerColor) transparent transparent;
   color: var(--white);
+
+  &.ended {
+    border-color: transparent var(--dangerColor) transparent transparent;
+  }
+
+  &.deleted {
+    border-color: transparent var(--gray) transparent transparent;
+  }
 }
 
 .info {

frontend/src/Series/Index/Overview/SeriesIndexOverview.css.d.ts

@@ -3,6 +3,7 @@
 interface CssExports {
   'actions': string;
   'content': string;
+  'deleted': string;
   'details': string;
   'ended': string;
   'info': string;
@@ -11,6 +12,7 @@ interface CssExports {
   'overviewContainer': string;
   'poster': string;
   'posterContainer': string;
+  'status': string;
   'tags': string;
   'title': string;
   'titleRow': string;

frontend/src/Series/Index/Overview/SeriesIndexOverview.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import TextTruncate from 'react-text-truncate';
@@ -146,9 +147,19 @@ function SeriesIndexOverview(props: SeriesIndexOverviewProps) {
               <SeriesIndexPosterSelect seriesId={seriesId} />
             ) : null}
 
-            {status === 'ended' && (
-              <div className={styles.ended} title={translate('Ended')} />
-            )}
+            {status === 'ended' ? (
+              <div
+                className={classNames(styles.status, styles.ended)}
+                title={translate('Ended')}
+              />
+            ) : null}
+
+            {status === 'deleted' ? (
+              <div
+                className={classNames(styles.status, styles.deleted)}
+                title={translate('Deleted')}
+              />
+            ) : null}
 
             <Link className={styles.link} style={elementStyle} to={link}>
               <SeriesPoster

frontend/src/Series/Index/Overview/SeriesIndexOverviewInfoRow.tsx

@@ -1,11 +1,10 @@
-import { IconDefinition } from '@fortawesome/free-regular-svg-icons';
 import React from 'react';
-import Icon from 'Components/Icon';
+import Icon, { IconProps } from 'Components/Icon';
 import styles from './SeriesIndexOverviewInfoRow.css';
 
 interface SeriesIndexOverviewInfoRowProps {
   title?: string;
-  iconName?: IconDefinition;
+  iconName: IconProps['name'];
   label: string | null;
 }
 

frontend/src/Series/Index/Posters/SeriesIndexPoster.css

@@ -71,7 +71,7 @@ $hoverScale: 1.05;
   overflow: hidden;
 }
 
-.ended {
+.status {
   position: absolute;
   top: 0;
   right: 0;
@@ -80,8 +80,15 @@ $hoverScale: 1.05;
   height: 0;
   border-width: 0 25px 25px 0;
   border-style: solid;
-  border-color: transparent var(--dangerColor) transparent transparent;
   color: var(--white);
+
+  &.ended {
+    border-color: transparent var(--dangerColor) transparent transparent;
+  }
+
+  &.deleted {
+    border-color: transparent var(--gray) transparent transparent;
+  }
 }
 
 .controls {

frontend/src/Series/Index/Posters/SeriesIndexPoster.css.d.ts

@@ -5,11 +5,13 @@ interface CssExports {
   'container': string;
   'content': string;
   'controls': string;
+  'deleted': string;
   'ended': string;
   'link': string;
   'nextAiring': string;
   'overlayTitle': string;
   'posterContainer': string;
+  'status': string;
   'tags': string;
   'tagsList': string;
   'title': string;

frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { REFRESH_SERIES, SERIES_SEARCH } from 'Commands/commandNames';
@@ -161,7 +162,17 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
         </Label>
 
         {status === 'ended' ? (
-          <div className={styles.ended} title={translate('Ended')} />
+          <div
+            className={classNames(styles.status, styles.ended)}
+            title={translate('Ended')}
+          />
+        ) : null}
+
+        {status === 'deleted' ? (
+          <div
+            className={classNames(styles.status, styles.deleted)}
+            title={translate('Deleted')}
+          />
         ) : null}
 
         <Link className={styles.link} style={elementStyle} to={link}>

frontend/src/Series/Index/ProgressBar/SeriesIndexProgressBar.tsx

@@ -5,6 +5,7 @@ import { sizes } from 'Helpers/Props';
 import createSeriesQueueItemsDetailsSelector, {
   SeriesQueueDetails,
 } from 'Series/Index/createSeriesQueueDetailsSelector';
+import { SeriesStatus } from 'Series/Series';
 import getProgressBarKind from 'Utilities/Series/getProgressBarKind';
 import translate from 'Utilities/String/translate';
 import styles from './SeriesIndexProgressBar.css';
@@ -13,7 +14,7 @@ interface SeriesIndexProgressBarProps {
   seriesId: number;
   seasonNumber?: number;
   monitored: boolean;
-  status: string;
+  status: SeriesStatus;
   episodeCount: number;
   episodeFileCount: number;
   totalEpisodeCount: number;

frontend/src/Series/Index/Table/SeriesStatusCell.tsx

@@ -4,6 +4,7 @@ import Icon from 'Components/Icon';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
 import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
 import { icons } from 'Helpers/Props';
+import { SeriesStatus } from 'Series/Series';
 import { getSeriesStatusDetails } from 'Series/SeriesStatus';
 import { toggleSeriesMonitored } from 'Store/Actions/seriesActions';
 import translate from 'Utilities/String/translate';
@@ -13,7 +14,7 @@ interface SeriesStatusCellProps {
   className: string;
   seriesId: number;
   monitored: boolean;
-  status: string;
+  status: SeriesStatus;
   isSelectMode: boolean;
   isSaving: boolean;
   component?: React.ElementType;

frontend/src/Series/Series.ts

@@ -15,6 +15,8 @@ export type SeriesMonitor =
   | 'unmonitorSpecials'
   | 'none';
 
+export type SeriesStatus = 'continuing' | 'ended' | 'upcoming' | 'deleted';
+
 export type MonitorNewItems = 'all' | 'none';
 
 export interface Image {
@@ -86,7 +88,7 @@ interface Series extends ModelBase {
   seriesType: SeriesType;
   sortTitle: string;
   statistics: Statistics;
-  status: string;
+  status: SeriesStatus;
   tags: number[];
   title: string;
   titleSlug: string;

frontend/src/Series/SeriesStatus.ts

@@ -1,32 +1,31 @@
-
 import { icons } from 'Helpers/Props';
+import { SeriesStatus } from 'Series/Series';
 import translate from 'Utilities/String/translate';
 
-export function getSeriesStatusDetails(status) {
-
+export function getSeriesStatusDetails(status: SeriesStatus) {
   let statusDetails = {
     icon: icons.SERIES_CONTINUING,
     title: translate('Continuing'),
-    message: translate('ContinuingSeriesDescription')
+    message: translate('ContinuingSeriesDescription'),
   };
 
   if (status === 'deleted') {
     statusDetails = {
       icon: icons.SERIES_DELETED,
       title: translate('Deleted'),
-      message: translate('DeletedSeriesDescription')
+      message: translate('DeletedSeriesDescription'),
     };
   } else if (status === 'ended') {
     statusDetails = {
       icon: icons.SERIES_ENDED,
       title: translate('Ended'),
-      message: translate('EndedSeriesDescription')
+      message: translate('EndedSeriesDescription'),
     };
   } else if (status === 'upcoming') {
     statusDetails = {
       icon: icons.SERIES_CONTINUING,
       title: translate('Upcoming'),
-      message: translate('UpcomingSeriesDescription')
+      message: translate('UpcomingSeriesDescription'),
     };
   }
 

frontend/src/Series/SeriesTitleLink.js

@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Link from 'Components/Link/Link';
-
-function SeriesTitleLink({ titleSlug, title }) {
-  const link = `/series/${titleSlug}`;
-
-  return (
-    <Link to={link}>
-      {title}
-    </Link>
-  );
-}
-
-SeriesTitleLink.propTypes = {
-  titleSlug: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired
-};
-
-export default SeriesTitleLink;

frontend/src/Series/SeriesTitleLink.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Link, { LinkProps } from 'Components/Link/Link';
+
+export interface SeriesTitleLinkProps extends LinkProps {
+  titleSlug: string;
+  title: string;
+}
+
+export default function SeriesTitleLink({
+  titleSlug,
+  title,
+  ...linkProps
+}: SeriesTitleLinkProps) {
+  const link = `/series/${titleSlug}`;
+
+  return (
+    <Link to={link} {...linkProps}>
+      {title}
+    </Link>
+  );
+}

frontend/src/Settings/CustomFormats/CustomFormatSettingsPage.tsx

@@ -8,6 +8,7 @@ import ParseToolbarButton from 'Parse/ParseToolbarButton';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import translate from 'Utilities/String/translate';
 import CustomFormatsConnector from './CustomFormats/CustomFormatsConnector';
+import ManageCustomFormatsToolbarButton from './CustomFormats/Manage/ManageCustomFormatsToolbarButton';
 
 function CustomFormatSettingsPage() {
   return (
@@ -21,6 +22,8 @@ function CustomFormatSettingsPage() {
             <PageToolbarSeparator />
 
             <ParseToolbarButton />
+
+            <ManageCustomFormatsToolbarButton />
           </>
         }
       />

frontend/src/Settings/CustomFormats/CustomFormats/Manage/Edit/ManageCustomFormatsEditModal.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageCustomFormatsEditModalContent from './ManageCustomFormatsEditModalContent';
+
+interface ManageCustomFormatsEditModalProps {
+  isOpen: boolean;
+  customFormatIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+function ManageCustomFormatsEditModal(
+  props: ManageCustomFormatsEditModalProps
+) {
+  const { isOpen, customFormatIds, onSavePress, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageCustomFormatsEditModalContent
+        customFormatIds={customFormatIds}
+        onSavePress={onSavePress}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default ManageCustomFormatsEditModal;

frontend/src/Settings/CustomFormats/CustomFormats/Manage/Edit/ManageCustomFormatsEditModalContent.css

@@ -0,0 +1,16 @@
+.modalFooter {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  justify-content: space-between;
+}
+
+.selected {
+  font-weight: bold;
+}
+
+@media only screen and (max-width: $breakpointExtraSmall) {
+  .modalFooter {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

frontend/src/Settings/CustomFormats/CustomFormats/Manage/Edit/ManageCustomFormatsEditModalContent.css.d.ts

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

frontend/src/Settings/CustomFormats/CustomFormats/Manage/Edit/ManageCustomFormatsEditModalContent.tsx

@@ -0,0 +1,125 @@
+import React, { useCallback, useState } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+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';
+import styles from './ManageCustomFormatsEditModalContent.css';
+
+interface SavePayload {
+  includeCustomFormatWhenRenaming?: boolean;
+}
+
+interface ManageCustomFormatsEditModalContentProps {
+  customFormatIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+const NO_CHANGE = 'noChange';
+
+const enableOptions = [
+  {
+    key: NO_CHANGE,
+    get value() {
+      return translate('NoChange');
+    },
+    isDisabled: true,
+  },
+  {
+    key: 'enabled',
+    get value() {
+      return translate('Enabled');
+    },
+  },
+  {
+    key: 'disabled',
+    get value() {
+      return translate('Disabled');
+    },
+  },
+];
+
+function ManageCustomFormatsEditModalContent(
+  props: ManageCustomFormatsEditModalContentProps
+) {
+  const { customFormatIds, onSavePress, onModalClose } = props;
+
+  const [includeCustomFormatWhenRenaming, setIncludeCustomFormatWhenRenaming] =
+    useState(NO_CHANGE);
+
+  const save = useCallback(() => {
+    let hasChanges = false;
+    const payload: SavePayload = {};
+
+    if (includeCustomFormatWhenRenaming !== NO_CHANGE) {
+      hasChanges = true;
+      payload.includeCustomFormatWhenRenaming =
+        includeCustomFormatWhenRenaming === 'enabled';
+    }
+
+    if (hasChanges) {
+      onSavePress(payload);
+    }
+
+    onModalClose();
+  }, [includeCustomFormatWhenRenaming, onSavePress, onModalClose]);
+
+  const onInputChange = useCallback(
+    ({ name, value }: { name: string; value: string }) => {
+      switch (name) {
+        case 'includeCustomFormatWhenRenaming':
+          setIncludeCustomFormatWhenRenaming(value);
+          break;
+        default:
+          console.warn(
+            `EditCustomFormatsModalContent Unknown Input: '${name}'`
+          );
+      }
+    },
+    []
+  );
+
+  const selectedCount = customFormatIds.length;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('EditSelectedCustomFormats')}</ModalHeader>
+
+      <ModalBody>
+        <FormGroup>
+          <FormLabel>{translate('IncludeCustomFormatWhenRenaming')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="includeCustomFormatWhenRenaming"
+            value={includeCustomFormatWhenRenaming}
+            values={enableOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+      </ModalBody>
+
+      <ModalFooter className={styles.modalFooter}>
+        <div className={styles.selected}>
+          {translate('CountCustomFormatsSelected', {
+            count: selectedCount,
+          })}
+        </div>
+
+        <div>
+          <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+          <Button onPress={save}>{translate('ApplyChanges')}</Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default ManageCustomFormatsEditModalContent;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageCustomFormatsModalContent from './ManageCustomFormatsModalContent';
+
+interface ManageCustomFormatsModalProps {
+  isOpen: boolean;
+  onModalClose(): void;
+}
+
+function ManageCustomFormatsModal(props: ManageCustomFormatsModalProps) {
+  const { isOpen, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageCustomFormatsModalContent onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default ManageCustomFormatsModal;

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

@@ -0,0 +1,16 @@
+.leftButtons,
+.rightButtons {
+  display: flex;
+  flex: 1 0 50%;
+  flex-wrap: wrap;
+}
+
+.rightButtons {
+  justify-content: flex-end;
+}
+
+.deleteButton {
+  composes: button from '~Components/Link/Button.css';
+
+  margin-right: 10px;
+}

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

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

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

@@ -0,0 +1,241 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { CustomFormatAppState } from 'App/State/SettingsAppState';
+import Alert from 'Components/Alert';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+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 Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import useSelectState from 'Helpers/Hooks/useSelectState';
+import { kinds } from 'Helpers/Props';
+import SortDirection from 'Helpers/Props/SortDirection';
+import {
+  bulkDeleteCustomFormats,
+  bulkEditCustomFormats,
+  setManageCustomFormatsSort,
+} from 'Store/Actions/settingsActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import { SelectStateInputProps } from 'typings/props';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import ManageCustomFormatsEditModal from './Edit/ManageCustomFormatsEditModal';
+import ManageCustomFormatsModalRow from './ManageCustomFormatsModalRow';
+import styles from './ManageCustomFormatsModalContent.css';
+
+// TODO: This feels janky to do, but not sure of a better way currently
+type OnSelectedChangeCallback = React.ComponentProps<
+  typeof ManageCustomFormatsModalRow
+>['onSelectedChange'];
+
+const COLUMNS = [
+  {
+    name: 'name',
+    label: () => translate('Name'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'includeCustomFormatWhenRenaming',
+    label: () => translate('IncludeCustomFormatWhenRenaming'),
+    isSortable: true,
+    isVisible: true,
+  },
+];
+
+interface ManageCustomFormatsModalContentProps {
+  onModalClose(): void;
+  sortKey?: string;
+  sortDirection?: SortDirection;
+}
+
+function ManageCustomFormatsModalContent(
+  props: ManageCustomFormatsModalContentProps
+) {
+  const { onModalClose } = props;
+
+  const {
+    isFetching,
+    isPopulated,
+    isDeleting,
+    isSaving,
+    error,
+    items,
+    sortKey,
+    sortDirection,
+  }: CustomFormatAppState = useSelector(
+    createClientSideCollectionSelector('settings.customFormats')
+  );
+  const dispatch = useDispatch();
+
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+
+  const [selectState, setSelectState] = useSelectState();
+
+  const { allSelected, allUnselected, selectedState } = selectState;
+
+  const selectedIds: number[] = useMemo(() => {
+    return getSelectedIds(selectedState);
+  }, [selectedState]);
+
+  const selectedCount = selectedIds.length;
+
+  const onSortPress = useCallback(
+    (value: string) => {
+      dispatch(setManageCustomFormatsSort({ sortKey: value }));
+    },
+    [dispatch]
+  );
+
+  const onDeletePress = useCallback(() => {
+    setIsDeleteModalOpen(true);
+  }, [setIsDeleteModalOpen]);
+
+  const onDeleteModalClose = useCallback(() => {
+    setIsDeleteModalOpen(false);
+  }, [setIsDeleteModalOpen]);
+
+  const onEditPress = useCallback(() => {
+    setIsEditModalOpen(true);
+  }, [setIsEditModalOpen]);
+
+  const onEditModalClose = useCallback(() => {
+    setIsEditModalOpen(false);
+  }, [setIsEditModalOpen]);
+
+  const onConfirmDelete = useCallback(() => {
+    dispatch(bulkDeleteCustomFormats({ ids: selectedIds }));
+    setIsDeleteModalOpen(false);
+  }, [selectedIds, dispatch]);
+
+  const onSavePress = useCallback(
+    (payload: object) => {
+      setIsEditModalOpen(false);
+
+      dispatch(
+        bulkEditCustomFormats({
+          ids: selectedIds,
+          ...payload,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
+  const onSelectAllChange = useCallback(
+    ({ value }: SelectStateInputProps) => {
+      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
+    },
+    [items, setSelectState]
+  );
+
+  const onSelectedChange = useCallback<OnSelectedChangeCallback>(
+    ({ id, value, shiftKey = false }) => {
+      setSelectState({
+        type: 'toggleSelected',
+        items,
+        id,
+        isSelected: value,
+        shiftKey,
+      });
+    },
+    [items, setSelectState]
+  );
+
+  const errorMessage = getErrorMessage(error, 'Unable to load custom formats.');
+  const anySelected = selectedCount > 0;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('ManageCustomFormats')}</ModalHeader>
+      <ModalBody>
+        {isFetching ? <LoadingIndicator /> : null}
+
+        {error ? <div>{errorMessage}</div> : null}
+
+        {isPopulated && !error && !items.length ? (
+          <Alert kind={kinds.INFO}>{translate('NoCustomFormatsFound')}</Alert>
+        ) : null}
+
+        {isPopulated && !!items.length && !isFetching && !isFetching ? (
+          <Table
+            columns={COLUMNS}
+            horizontalScroll={true}
+            selectAll={true}
+            allSelected={allSelected}
+            allUnselected={allUnselected}
+            sortKey={sortKey}
+            sortDirection={sortDirection}
+            onSelectAllChange={onSelectAllChange}
+            onSortPress={onSortPress}
+          >
+            <TableBody>
+              {items.map((item) => {
+                return (
+                  <ManageCustomFormatsModalRow
+                    key={item.id}
+                    isSelected={selectedState[item.id]}
+                    {...item}
+                    columns={COLUMNS}
+                    onSelectedChange={onSelectedChange}
+                  />
+                );
+              })}
+            </TableBody>
+          </Table>
+        ) : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <div className={styles.leftButtons}>
+          <SpinnerButton
+            kind={kinds.DANGER}
+            isSpinning={isDeleting}
+            isDisabled={!anySelected}
+            onPress={onDeletePress}
+          >
+            {translate('Delete')}
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving}
+            isDisabled={!anySelected}
+            onPress={onEditPress}
+          >
+            {translate('Edit')}
+          </SpinnerButton>
+        </div>
+
+        <Button onPress={onModalClose}>{translate('Close')}</Button>
+      </ModalFooter>
+
+      <ManageCustomFormatsEditModal
+        isOpen={isEditModalOpen}
+        customFormatIds={selectedIds}
+        onModalClose={onEditModalClose}
+        onSavePress={onSavePress}
+      />
+
+      <ConfirmModal
+        isOpen={isDeleteModalOpen}
+        kind={kinds.DANGER}
+        title={translate('DeleteSelectedCustomFormats')}
+        message={translate('DeleteSelectedCustomFormatsMessageText', {
+          count: selectedIds.length,
+        })}
+        confirmLabel={translate('Delete')}
+        onConfirm={onConfirmDelete}
+        onCancel={onDeleteModalClose}
+      />
+    </ModalContent>
+  );
+}
+
+export default ManageCustomFormatsModalContent;

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

@@ -0,0 +1,6 @@
+.name,
+.includeCustomFormatWhenRenaming {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  word-break: break-all;
+}

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

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

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

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+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 { SelectStateInputProps } from 'typings/props';
+import translate from 'Utilities/String/translate';
+import styles from './ManageCustomFormatsModalRow.css';
+
+interface ManageCustomFormatsModalRowProps {
+  id: number;
+  name: string;
+  includeCustomFormatWhenRenaming: boolean;
+  columns: Column[];
+  isSelected?: boolean;
+  onSelectedChange(result: SelectStateInputProps): void;
+}
+
+function ManageCustomFormatsModalRow(props: ManageCustomFormatsModalRowProps) {
+  const {
+    id,
+    isSelected,
+    name,
+    includeCustomFormatWhenRenaming,
+    onSelectedChange,
+  } = props;
+
+  const onSelectedChangeWrapper = useCallback(
+    (result: SelectStateInputProps) => {
+      onSelectedChange({
+        ...result,
+      });
+    },
+    [onSelectedChange]
+  );
+
+  return (
+    <TableRow>
+      <TableSelectCell
+        id={id}
+        isSelected={isSelected}
+        onSelectedChange={onSelectedChangeWrapper}
+      />
+
+      <TableRowCell className={styles.name}>{name}</TableRowCell>
+
+      <TableRowCell className={styles.includeCustomFormatWhenRenaming}>
+        {includeCustomFormatWhenRenaming ? translate('Yes') : translate('No')}
+      </TableRowCell>
+    </TableRow>
+  );
+}
+
+export default ManageCustomFormatsModalRow;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import useModalOpenState from 'Helpers/Hooks/useModalOpenState';
+import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import ManageCustomFormatsModal from './ManageCustomFormatsModal';
+
+function ManageCustomFormatsToolbarButton() {
+  const [isManageModalOpen, openManageModal, closeManageModal] =
+    useModalOpenState(false);
+
+  return (
+    <>
+      <PageToolbarButton
+        label={translate('ManageCustomFormats')}
+        iconName={icons.MANAGE}
+        onPress={openManageModal}
+      />
+
+      <ManageCustomFormatsModal
+        isOpen={isManageModalOpen}
+        onModalClose={closeManageModal}
+      />
+    </>
+  );
+}
+
+export default ManageCustomFormatsToolbarButton;

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

@@ -13,4 +13,4 @@
   composes: button from '~Components/Link/Button.css';
 
   margin-right: 10px;
-}
+}

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

@@ -220,9 +220,9 @@ function ManageDownloadClientsModalContent(
 
         {error ? <div>{errorMessage}</div> : null}
 
-        {isPopulated && !error && !items.length && (
+        {isPopulated && !error && !items.length ? (
           <Alert kind={kinds.INFO}>{translate('NoDownloadClientsFound')}</Alert>
-        )}
+        ) : null}
 
         {isPopulated && !!items.length && !isFetching && !isFetching ? (
           <Table

frontend/src/Settings/General/GeneralSettings.js

@@ -157,6 +157,7 @@ class GeneralSettings extends Component {
                 />
 
                 <LoggingSettings
+                  advancedSettings={advancedSettings}
                   settings={settings}
                   onInputChange={onInputChange}
                 />

frontend/src/Settings/General/LoggingSettings.js

@@ -30,12 +30,14 @@ const logLevelOptions = [
 
 function LoggingSettings(props) {
   const {
+    advancedSettings,
     settings,
     onInputChange
   } = props;
 
   const {
-    logLevel
+    logLevel,
+    logSizeLimit
   } = settings;
 
   return (
@@ -52,11 +54,30 @@ function LoggingSettings(props) {
           {...logLevel}
         />
       </FormGroup>
+
+      <FormGroup
+        advancedSettings={advancedSettings}
+        isAdvanced={true}
+      >
+        <FormLabel>{translate('LogSizeLimit')}</FormLabel>
+
+        <FormInputGroup
+          type={inputTypes.NUMBER}
+          name="logSizeLimit"
+          min={1}
+          max={10}
+          unit="MB"
+          helpText={translate('LogSizeLimitHelpText')}
+          onChange={onInputChange}
+          {...logSizeLimit}
+        />
+      </FormGroup>
     </FieldSet>
   );
 }
 
 LoggingSettings.propTypes = {
+  advancedSettings: PropTypes.bool.isRequired,
   settings: PropTypes.object.isRequired,
   onInputChange: PropTypes.func.isRequired
 };

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

@@ -1,21 +1,28 @@
 import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
 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 TableRow from 'Components/Table/TableRow';
 import useModalOpenState from 'Helpers/Hooks/useModalOpenState';
 import { icons, kinds } from 'Helpers/Props';
+import { deleteImportListExclusion } from 'Store/Actions/Settings/importListExclusions';
 import ImportListExclusion from 'typings/ImportListExclusion';
+import { SelectStateInputProps } from 'typings/props';
 import translate from 'Utilities/String/translate';
 import EditImportListExclusionModal from './EditImportListExclusionModal';
 import styles from './ImportListExclusionRow.css';
 
 interface ImportListExclusionRowProps extends ImportListExclusion {
-  onConfirmDeleteImportListExclusion: (id: number) => void;
+  isSelected: boolean;
+  onSelectedChange: (options: SelectStateInputProps) => void;
 }
 
 function ImportListExclusionRow(props: ImportListExclusionRowProps) {
-  const { id, title, tvdbId, onConfirmDeleteImportListExclusion } = props;
+  const { id, tvdbId, title, isSelected, onSelectedChange } = props;
+
+  const dispatch = useDispatch();
 
   const [
     isEditImportListExclusionModalOpen,
@@ -29,12 +36,18 @@ function ImportListExclusionRow(props: ImportListExclusionRowProps) {
     setDeleteImportListExclusionModalClosed,
   ] = useModalOpenState(false);
 
-  const onConfirmDeleteImportListExclusionPress = useCallback(() => {
-    onConfirmDeleteImportListExclusion(id);
-  }, [id, onConfirmDeleteImportListExclusion]);
+  const handleDeletePress = useCallback(() => {
+    dispatch(deleteImportListExclusion({ id }));
+  }, [id, dispatch]);
 
   return (
     <TableRow>
+      <TableSelectCell
+        id={id}
+        isSelected={isSelected}
+        onSelectedChange={onSelectedChange}
+      />
+
       <TableRowCell>{title}</TableRowCell>
       <TableRowCell>{tvdbId}</TableRowCell>
 
@@ -58,7 +71,7 @@ function ImportListExclusionRow(props: ImportListExclusionRowProps) {
         title={translate('DeleteImportListExclusion')}
         message={translate('DeleteImportListExclusionMessageText')}
         confirmLabel={translate('Delete')}
-        onConfirm={onConfirmDeleteImportListExclusionPress}
+        onConfirm={handleDeletePress}
         onCancel={setDeleteImportListExclusionModalClosed}
       />
     </TableRow>

frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.css

@@ -0,0 +1,6 @@
+.actions {
+  composes: headerCell from '~Components/Table/TableHeaderCell.css';
+
+  width: 35px;
+  white-space: nowrap;
+}

frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.css.d.ts

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

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

@@ -1,28 +1,46 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router';
 import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
 import FieldSet from 'Components/FieldSet';
 import IconButton from 'Components/Link/IconButton';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import Column from 'Components/Table/Column';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TablePager from 'Components/Table/TablePager';
 import TableRow from 'Components/Table/TableRow';
+import usePaging from 'Components/Table/usePaging';
+import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
 import useModalOpenState from 'Helpers/Hooks/useModalOpenState';
-import { icons } from 'Helpers/Props';
-import * as importListExclusionActions from 'Store/Actions/Settings/importListExclusions';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import useSelectState from 'Helpers/Hooks/useSelectState';
+import { icons, kinds } from 'Helpers/Props';
+import {
+  bulkDeleteImportListExclusions,
+  clearImportListExclusions,
+  fetchImportListExclusions,
+  gotoImportListExclusionPage,
+  setImportListExclusionSort,
+  setImportListExclusionTableOption,
+} from 'Store/Actions/Settings/importListExclusions';
+import { CheckInputChanged } from 'typings/inputs';
+import { SelectStateInputProps } from 'typings/props';
+import { TableOptionsChangePayload } from 'typings/Table';
 import {
   registerPagePopulator,
   unregisterPagePopulator,
 } from 'Utilities/pagePopulator';
 import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import EditImportListExclusionModal from './EditImportListExclusionModal';
 import ImportListExclusionRow from './ImportListExclusionRow';
+import styles from './ImportListExclusions.css';
 
-const COLUMNS = [
+const COLUMNS: Column[] = [
   {
     name: 'title',
     label: () => translate('Title'),
@@ -36,13 +54,15 @@ const COLUMNS = [
     isSortable: true,
   },
   {
+    className: styles.actions,
     name: 'actions',
+    label: '',
     isVisible: true,
     isSortable: false,
   },
 ];
 
-function createImportListExlucionsSelector() {
+function createImportListExclusionsSelector() {
   return createSelector(
     (state: AppState) => state.settings.importListExclusions,
     (importListExclusions) => {
@@ -54,95 +74,7 @@ function createImportListExlucionsSelector() {
 }
 
 function ImportListExclusions() {
-  const history = useHistory();
-  const useCurrentPage = history.action === 'POP';
-
-  const dispatch = useDispatch();
-
-  const fetchImportListExclusions = useCallback(() => {
-    dispatch(importListExclusionActions.fetchImportListExclusions());
-  }, [dispatch]);
-
-  const deleteImportListExclusion = useCallback(
-    (payload: { id: number }) => {
-      dispatch(importListExclusionActions.deleteImportListExclusion(payload));
-    },
-    [dispatch]
-  );
-
-  const gotoImportListExclusionFirstPage = useCallback(() => {
-    dispatch(importListExclusionActions.gotoImportListExclusionFirstPage());
-  }, [dispatch]);
-
-  const gotoImportListExclusionPreviousPage = useCallback(() => {
-    dispatch(importListExclusionActions.gotoImportListExclusionPreviousPage());
-  }, [dispatch]);
-
-  const gotoImportListExclusionNextPage = useCallback(() => {
-    dispatch(importListExclusionActions.gotoImportListExclusionNextPage());
-  }, [dispatch]);
-
-  const gotoImportListExclusionLastPage = useCallback(() => {
-    dispatch(importListExclusionActions.gotoImportListExclusionLastPage());
-  }, [dispatch]);
-
-  const gotoImportListExclusionPage = useCallback(
-    (page: number) => {
-      dispatch(
-        importListExclusionActions.gotoImportListExclusionPage({ page })
-      );
-    },
-    [dispatch]
-  );
-
-  const setImportListExclusionSort = useCallback(
-    (sortKey: { sortKey: string }) => {
-      dispatch(
-        importListExclusionActions.setImportListExclusionSort({ sortKey })
-      );
-    },
-    [dispatch]
-  );
-
-  const setImportListTableOption = useCallback(
-    (payload: { pageSize: number }) => {
-      dispatch(
-        importListExclusionActions.setImportListExclusionTableOption(payload)
-      );
-
-      if (payload.pageSize) {
-        dispatch(importListExclusionActions.gotoImportListExclusionFirstPage());
-      }
-    },
-    [dispatch]
-  );
-
-  const repopulate = useCallback(() => {
-    gotoImportListExclusionFirstPage();
-  }, [gotoImportListExclusionFirstPage]);
-
-  useEffect(() => {
-    registerPagePopulator(repopulate);
-
-    if (useCurrentPage) {
-      fetchImportListExclusions();
-    } else {
-      gotoImportListExclusionFirstPage();
-    }
-
-    return () => unregisterPagePopulator(repopulate);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onConfirmDeleteImportListExclusion = useCallback(
-    (id: number) => {
-      deleteImportListExclusion({ id });
-      repopulate();
-    },
-    [deleteImportListExclusion, repopulate]
-  );
-
-  const selected = useSelector(createImportListExlucionsSelector());
+  const requestCurrentPage = useCurrentPage();
 
   const {
     isFetching,
@@ -152,9 +84,127 @@ function ImportListExclusions() {
     sortKey,
     error,
     sortDirection,
+    page,
+    totalPages,
     totalRecords,
-    ...otherProps
-  } = selected;
+    isDeleting,
+    deleteError,
+  } = useSelector(createImportListExclusionsSelector());
+
+  const dispatch = useDispatch();
+
+  const [isConfirmDeleteModalOpen, setIsConfirmDeleteModalOpen] =
+    useState(false);
+  const previousIsDeleting = usePrevious(isDeleting);
+
+  const [selectState, setSelectState] = useSelectState();
+  const { allSelected, allUnselected, selectedState } = selectState;
+
+  const selectedIds = useMemo(() => {
+    return getSelectedIds(selectedState);
+  }, [selectedState]);
+
+  const handleSelectAllChange = useCallback(
+    ({ value }: CheckInputChanged) => {
+      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
+    },
+    [items, setSelectState]
+  );
+
+  const handleSelectedChange = useCallback(
+    ({ id, value, shiftKey = false }: SelectStateInputProps) => {
+      setSelectState({
+        type: 'toggleSelected',
+        items,
+        id,
+        isSelected: value,
+        shiftKey,
+      });
+    },
+    [items, setSelectState]
+  );
+
+  const handleDeleteSelectedPress = useCallback(() => {
+    setIsConfirmDeleteModalOpen(true);
+  }, [setIsConfirmDeleteModalOpen]);
+
+  const handleDeleteSelectedConfirmed = useCallback(() => {
+    dispatch(bulkDeleteImportListExclusions({ ids: selectedIds }));
+    setIsConfirmDeleteModalOpen(false);
+  }, [selectedIds, setIsConfirmDeleteModalOpen, dispatch]);
+
+  const handleConfirmDeleteModalClose = useCallback(() => {
+    setIsConfirmDeleteModalOpen(false);
+  }, [setIsConfirmDeleteModalOpen]);
+
+  const {
+    handleFirstPagePress,
+    handlePreviousPagePress,
+    handleNextPagePress,
+    handleLastPagePress,
+    handlePageSelect,
+  } = usePaging({
+    page,
+    totalPages,
+    gotoPage: gotoImportListExclusionPage,
+  });
+
+  const handleSortPress = useCallback(
+    (sortKey: { sortKey: string }) => {
+      dispatch(setImportListExclusionSort({ sortKey }));
+    },
+    [dispatch]
+  );
+
+  const handleTableOptionChange = useCallback(
+    (payload: TableOptionsChangePayload) => {
+      dispatch(setImportListExclusionTableOption(payload));
+
+      if (payload.pageSize) {
+        dispatch(gotoImportListExclusionPage({ page: 1 }));
+      }
+    },
+    [dispatch]
+  );
+
+  useEffect(() => {
+    if (requestCurrentPage) {
+      dispatch(fetchImportListExclusions());
+    } else {
+      dispatch(gotoImportListExclusionPage({ page: 1 }));
+    }
+
+    return () => {
+      dispatch(clearImportListExclusions());
+    };
+  }, [requestCurrentPage, dispatch]);
+
+  useEffect(() => {
+    const repopulate = () => {
+      dispatch(fetchImportListExclusions());
+    };
+
+    registerPagePopulator(repopulate);
+
+    return () => {
+      unregisterPagePopulator(repopulate);
+    };
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (previousIsDeleting && !isDeleting && !deleteError) {
+      setSelectState({ type: 'unselectAll', items });
+
+      dispatch(fetchImportListExclusions());
+    }
+  }, [
+    previousIsDeleting,
+    isDeleting,
+    deleteError,
+    items,
+    dispatch,
+    setSelectState,
+  ]);
 
   const [
     isAddImportListExclusionModalOpen,
@@ -173,13 +223,17 @@ function ImportListExclusions() {
         error={error}
       >
         <Table
+          selectAll={true}
+          allSelected={allSelected}
+          allUnselected={allUnselected}
           columns={COLUMNS}
           canModifyColumns={false}
           pageSize={pageSize}
           sortKey={sortKey}
           sortDirection={sortDirection}
-          onSortPress={setImportListExclusionSort}
-          onTableOptionChange={setImportListTableOption}
+          onTableOptionChange={handleTableOptionChange}
+          onSelectAllChange={handleSelectAllChange}
+          onSortPress={handleSortPress}
         >
           <TableBody>
             {items.map((item) => {
@@ -187,16 +241,23 @@ function ImportListExclusions() {
                 <ImportListExclusionRow
                   key={item.id}
                   {...item}
-                  onConfirmDeleteImportListExclusion={
-                    onConfirmDeleteImportListExclusion
-                  }
+                  isSelected={selectedState[item.id] || false}
+                  onSelectedChange={handleSelectedChange}
                 />
               );
             })}
 
             <TableRow>
-              <TableRowCell />
-              <TableRowCell />
+              <TableRowCell colSpan={3}>
+                <SpinnerButton
+                  kind={kinds.DANGER}
+                  isSpinning={isDeleting}
+                  isDisabled={!selectedIds.length}
+                  onPress={handleDeleteSelectedPress}
+                >
+                  {translate('Delete')}
+                </SpinnerButton>
+              </TableRowCell>
 
               <TableRowCell>
                 <IconButton
@@ -209,21 +270,31 @@ function ImportListExclusions() {
         </Table>
 
         <TablePager
+          page={page}
+          totalPages={totalPages}
           totalRecords={totalRecords}
-          pageSize={pageSize}
           isFetching={isFetching}
-          onFirstPagePress={gotoImportListExclusionFirstPage}
-          onPreviousPagePress={gotoImportListExclusionPreviousPage}
-          onNextPagePress={gotoImportListExclusionNextPage}
-          onLastPagePress={gotoImportListExclusionLastPage}
-          onPageSelect={gotoImportListExclusionPage}
-          {...otherProps}
+          onFirstPagePress={handleFirstPagePress}
+          onPreviousPagePress={handlePreviousPagePress}
+          onNextPagePress={handleNextPagePress}
+          onLastPagePress={handleLastPagePress}
+          onPageSelect={handlePageSelect}
         />
 
         <EditImportListExclusionModal
           isOpen={isAddImportListExclusionModalOpen}
           onModalClose={setAddImportListExclusionModalClosed}
         />
+
+        <ConfirmModal
+          isOpen={isConfirmDeleteModalOpen}
+          kind={kinds.DANGER}
+          title={translate('DeleteSelected')}
+          message={translate('DeleteSelectedImportListExclusionsMessageText')}
+          confirmLabel={translate('DeleteSelected')}
+          onConfirm={handleDeleteSelectedConfirmed}
+          onCancel={handleConfirmDeleteModalClose}
+        />
       </PageSectionContent>
     </FieldSet>
   );

frontend/src/Settings/ImportLists/ImportListSettings.js

@@ -7,7 +7,7 @@ import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import { icons } from 'Helpers/Props';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import translate from 'Utilities/String/translate';
-import ImportListsExclusions from './ImportListExclusions/ImportListExclusions';
+import ImportListExclusions from './ImportListExclusions/ImportListExclusions';
 import ImportListsConnector from './ImportLists/ImportListsConnector';
 import ManageImportListsModal from './ImportLists/Manage/ManageImportListsModal';
 import ImportListOptions from './Options/ImportListOptions';
@@ -113,7 +113,8 @@ class ImportListSettings extends Component {
             onChildStateChange={this.onChildStateChange}
           />
 
-          <ImportListsExclusions />
+          <ImportListExclusions />
+
           <ManageImportListsModal
             isOpen={isManageImportListsOpen}
             onModalClose={this.onManageImportListsModalClose}

frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js

@@ -21,7 +21,7 @@ const mapDispatchToProps = {
   fetchRootFolders
 };
 
-class ListsConnector extends Component {
+class ImportListsConnector extends Component {
 
   //
   // Lifecycle
@@ -51,10 +51,10 @@ class ListsConnector extends Component {
   }
 }
 
-ListsConnector.propTypes = {
+ImportListsConnector.propTypes = {
   fetchImportLists: PropTypes.func.isRequired,
   deleteImportList: PropTypes.func.isRequired,
   fetchRootFolders: PropTypes.func.isRequired
 };
 
-export default connect(createMapStateToProps, mapDispatchToProps)(ListsConnector);
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportListsConnector);

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalContent.css

@@ -13,4 +13,4 @@
   composes: button from '~Components/Link/Button.css';
 
   margin-right: 10px;
-}
+}

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalContent.tsx

@@ -198,9 +198,9 @@ function ManageImportListsModalContent(
 
         {error ? <div>{errorMessage}</div> : null}
 
-        {isPopulated && !error && !items.length && (
+        {isPopulated && !error && !items.length ? (
           <Alert kind={kinds.INFO}>{translate('NoImportListsFound')}</Alert>
-        )}
+        ) : null}
 
         {isPopulated && !!items.length && !isFetching && !isFetching ? (
           <Table

frontend/src/Settings/ImportLists/Options/ImportListOptions.tsx

@@ -48,7 +48,6 @@ interface ImportListOptionsPageProps {
 
 function ImportListOptions(props: ImportListOptionsPageProps) {
   const { setChildSave, onChildStateChange } = props;
-  const selected = useSelector(createImportListOptionsSelector());
 
   const {
     isSaving,
@@ -58,7 +57,7 @@ function ImportListOptions(props: ImportListOptionsPageProps) {
     error,
     settings,
     hasSettings,
-  } = selected;
+  } = useSelector(createImportListOptionsSelector());
 
   const { listSyncLevel, listSyncTag } = settings;
 

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalContent.css

@@ -13,4 +13,4 @@
   composes: button from '~Components/Link/Button.css';
 
   margin-right: 10px;
-}
+}

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalContent.tsx

@@ -215,9 +215,9 @@ function ManageIndexersModalContent(props: ManageIndexersModalContentProps) {
 
         {error ? <div>{errorMessage}</div> : null}
 
-        {isPopulated && !error && !items.length && (
+        {isPopulated && !error && !items.length ? (
           <Alert kind={kinds.INFO}>{translate('NoIndexersFound')}</Alert>
-        )}
+        ) : null}
 
         {isPopulated && !!items.length && !isFetching && !isFetching ? (
           <Table

frontend/src/Settings/Quality/Definition/QualityDefinition.js

@@ -13,7 +13,7 @@ import QualityDefinitionLimits from './QualityDefinitionLimits';
 import styles from './QualityDefinition.css';
 
 const MIN = 0;
-const MAX = 400;
+const MAX = 1000;
 const MIN_DISTANCE = 1;
 
 const slider = {

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

@@ -1,7 +1,12 @@
 import { createAction } from 'redux-actions';
+import { sortDirections } from 'Helpers/Props';
+import createBulkEditItemHandler from 'Store/Actions/Creators/createBulkEditItemHandler';
+import createBulkRemoveItemHandler from 'Store/Actions/Creators/createBulkRemoveItemHandler';
 import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
 import createRemoveItemHandler from 'Store/Actions/Creators/createRemoveItemHandler';
 import createSaveProviderHandler from 'Store/Actions/Creators/createSaveProviderHandler';
+import createSetClientSideCollectionSortReducer
+  from 'Store/Actions/Creators/Reducers/createSetClientSideCollectionSortReducer';
 import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
 import { createThunk } from 'Store/thunks';
 import getSectionState from 'Utilities/State/getSectionState';
@@ -22,6 +27,9 @@ export const SAVE_CUSTOM_FORMAT = 'settings/customFormats/saveCustomFormat';
 export const DELETE_CUSTOM_FORMAT = 'settings/customFormats/deleteCustomFormat';
 export const SET_CUSTOM_FORMAT_VALUE = 'settings/customFormats/setCustomFormatValue';
 export const CLONE_CUSTOM_FORMAT = 'settings/customFormats/cloneCustomFormat';
+export const BULK_EDIT_CUSTOM_FORMATS = 'settings/downloadClients/bulkEditCustomFormats';
+export const BULK_DELETE_CUSTOM_FORMATS = 'settings/downloadClients/bulkDeleteCustomFormats';
+export const SET_MANAGE_CUSTOM_FORMATS_SORT = 'settings/downloadClients/setManageCustomFormatsSort';
 
 //
 // Action Creators
@@ -29,6 +37,9 @@ export const CLONE_CUSTOM_FORMAT = 'settings/customFormats/cloneCustomFormat';
 export const fetchCustomFormats = createThunk(FETCH_CUSTOM_FORMATS);
 export const saveCustomFormat = createThunk(SAVE_CUSTOM_FORMAT);
 export const deleteCustomFormat = createThunk(DELETE_CUSTOM_FORMAT);
+export const bulkEditCustomFormats = createThunk(BULK_EDIT_CUSTOM_FORMATS);
+export const bulkDeleteCustomFormats = createThunk(BULK_DELETE_CUSTOM_FORMATS);
+export const setManageCustomFormatsSort = createAction(SET_MANAGE_CUSTOM_FORMATS_SORT);
 
 export const setCustomFormatValue = createAction(SET_CUSTOM_FORMAT_VALUE, (payload) => {
   return {
@@ -48,20 +59,30 @@ export default {
   // State
 
   defaultState: {
-    isSchemaFetching: false,
-    isSchemaPopulated: false,
     isFetching: false,
     isPopulated: false,
+    error: null,
+    isSaving: false,
+    saveError: null,
+    isDeleting: false,
+    deleteError: null,
+    items: [],
+    pendingChanges: {},
+
+    isSchemaFetching: false,
+    isSchemaPopulated: false,
+    schemaError: null,
     schema: {
       includeCustomFormatWhenRenaming: false
     },
-    error: null,
-    isDeleting: false,
-    deleteError: null,
-    isSaving: false,
-    saveError: null,
-    items: [],
-    pendingChanges: {}
+
+    sortKey: 'name',
+    sortDirection: sortDirections.ASCENDING,
+    sortPredicates: {
+      name: ({ name }) => {
+        return name.toLocaleLowerCase();
+      }
+    }
   },
 
   //
@@ -83,7 +104,10 @@ export default {
       }));
 
       createSaveProviderHandler(section, '/customformat')(getState, payload, dispatch);
-    }
+    },
+
+    [BULK_EDIT_CUSTOM_FORMATS]: createBulkEditItemHandler(section, '/customformat/bulk'),
+    [BULK_DELETE_CUSTOM_FORMATS]: createBulkRemoveItemHandler(section, '/customformat/bulk')
   },
 
   //
@@ -103,7 +127,9 @@ export default {
       newState.pendingChanges = pendingChanges;
 
       return updateSectionState(state, section, newState);
-    }
+    },
+
+    [SET_MANAGE_CUSTOM_FORMATS_SORT]: createSetClientSideCollectionSortReducer(section)
   }
 
 };

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

@@ -96,8 +96,8 @@ export default {
     sortKey: 'name',
     sortDirection: sortDirections.ASCENDING,
     sortPredicates: {
-      name: function(item) {
-        return item.name.toLowerCase();
+      name: ({ name }) => {
+        return name.toLocaleLowerCase();
       }
     }
   },

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

@@ -1,7 +1,9 @@
 import { createAction } from 'redux-actions';
+import createBulkRemoveItemHandler from 'Store/Actions/Creators/createBulkRemoveItemHandler';
 import createRemoveItemHandler from 'Store/Actions/Creators/createRemoveItemHandler';
 import createSaveProviderHandler from 'Store/Actions/Creators/createSaveProviderHandler';
 import createServerSideCollectionHandlers from 'Store/Actions/Creators/createServerSideCollectionHandlers';
+import createClearReducer from 'Store/Actions/Creators/Reducers/createClearReducer';
 import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
 import createSetTableOptionReducer from 'Store/Actions/Creators/Reducers/createSetTableOptionReducer';
 import { createThunk, handleThunks } from 'Store/thunks';
@@ -16,29 +18,26 @@ const section = 'settings.importListExclusions';
 // Actions Types
 
 export const FETCH_IMPORT_LIST_EXCLUSIONS = 'settings/importListExclusions/fetchImportListExclusions';
-export const GOTO_FIRST_IMPORT_LIST_EXCLUSION_PAGE = 'settings/importListExclusions/gotoImportListExclusionFirstPage';
-export const GOTO_PREVIOUS_IMPORT_LIST_EXCLUSION_PAGE = 'settings/importListExclusions/gotoImportListExclusionPreviousPage';
-export const GOTO_NEXT_IMPORT_LIST_EXCLUSION_PAGE = 'settings/importListExclusions/gotoImportListExclusionNextPage';
-export const GOTO_LAST_IMPORT_LIST_EXCLUSION_PAGE = 'settings/importListExclusions/gotoImportListExclusionLastPage';
 export const GOTO_IMPORT_LIST_EXCLUSION_PAGE = 'settings/importListExclusions/gotoImportListExclusionPage';
 export const SET_IMPORT_LIST_EXCLUSION_SORT = 'settings/importListExclusions/setImportListExclusionSort';
-export const SET_IMPORT_LIST_EXCLUSION_TABLE_OPTION = 'settings/importListExclusions/setImportListExclusionTableOption';
 export const SAVE_IMPORT_LIST_EXCLUSION = 'settings/importListExclusions/saveImportListExclusion';
 export const DELETE_IMPORT_LIST_EXCLUSION = 'settings/importListExclusions/deleteImportListExclusion';
+export const BULK_DELETE_IMPORT_LIST_EXCLUSIONS = 'settings/importListExclusions/bulkDeleteImportListExclusions';
+export const CLEAR_IMPORT_LIST_EXCLUSIONS = 'settings/importListExclusions/clearImportListExclusions';
+
+export const SET_IMPORT_LIST_EXCLUSION_TABLE_OPTION = 'settings/importListExclusions/setImportListExclusionTableOption';
 export const SET_IMPORT_LIST_EXCLUSION_VALUE = 'settings/importListExclusions/setImportListExclusionValue';
 
 //
 // Action Creators
 
 export const fetchImportListExclusions = createThunk(FETCH_IMPORT_LIST_EXCLUSIONS);
-export const gotoImportListExclusionFirstPage = createThunk(GOTO_FIRST_IMPORT_LIST_EXCLUSION_PAGE);
-export const gotoImportListExclusionPreviousPage = createThunk(GOTO_PREVIOUS_IMPORT_LIST_EXCLUSION_PAGE);
-export const gotoImportListExclusionNextPage = createThunk(GOTO_NEXT_IMPORT_LIST_EXCLUSION_PAGE);
-export const gotoImportListExclusionLastPage = createThunk(GOTO_LAST_IMPORT_LIST_EXCLUSION_PAGE);
 export const gotoImportListExclusionPage = createThunk(GOTO_IMPORT_LIST_EXCLUSION_PAGE);
 export const setImportListExclusionSort = createThunk(SET_IMPORT_LIST_EXCLUSION_SORT);
 export const saveImportListExclusion = createThunk(SAVE_IMPORT_LIST_EXCLUSION);
 export const deleteImportListExclusion = createThunk(DELETE_IMPORT_LIST_EXCLUSION);
+export const bulkDeleteImportListExclusions = createThunk(BULK_DELETE_IMPORT_LIST_EXCLUSIONS);
+export const clearImportListExclusions = createAction(CLEAR_IMPORT_LIST_EXCLUSIONS);
 
 export const setImportListExclusionTableOption = createAction(SET_IMPORT_LIST_EXCLUSION_TABLE_OPTION);
 export const setImportListExclusionValue = createAction(SET_IMPORT_LIST_EXCLUSION_VALUE, (payload) => {
@@ -64,6 +63,8 @@ export default {
     items: [],
     isSaving: false,
     saveError: null,
+    isDeleting: false,
+    deleteError: null,
     pendingChanges: {}
   },
 
@@ -77,16 +78,13 @@ export default {
       fetchImportListExclusions,
       {
         [serverSideCollectionHandlers.FETCH]: FETCH_IMPORT_LIST_EXCLUSIONS,
-        [serverSideCollectionHandlers.FIRST_PAGE]: GOTO_FIRST_IMPORT_LIST_EXCLUSION_PAGE,
-        [serverSideCollectionHandlers.PREVIOUS_PAGE]: GOTO_PREVIOUS_IMPORT_LIST_EXCLUSION_PAGE,
-        [serverSideCollectionHandlers.NEXT_PAGE]: GOTO_NEXT_IMPORT_LIST_EXCLUSION_PAGE,
-        [serverSideCollectionHandlers.LAST_PAGE]: GOTO_LAST_IMPORT_LIST_EXCLUSION_PAGE,
         [serverSideCollectionHandlers.EXACT_PAGE]: GOTO_IMPORT_LIST_EXCLUSION_PAGE,
         [serverSideCollectionHandlers.SORT]: SET_IMPORT_LIST_EXCLUSION_SORT
       }
     ),
     [SAVE_IMPORT_LIST_EXCLUSION]: createSaveProviderHandler(section, '/importlistexclusion'),
-    [DELETE_IMPORT_LIST_EXCLUSION]: createRemoveItemHandler(section, '/importlistexclusion')
+    [DELETE_IMPORT_LIST_EXCLUSION]: createRemoveItemHandler(section, '/importlistexclusion'),
+    [BULK_DELETE_IMPORT_LIST_EXCLUSIONS]: createBulkRemoveItemHandler(section, '/importlistexclusion/bulk')
   }),
 
   //
@@ -94,7 +92,19 @@ export default {
 
   reducers: {
     [SET_IMPORT_LIST_EXCLUSION_VALUE]: createSetSettingValueReducer(section),
-    [SET_IMPORT_LIST_EXCLUSION_TABLE_OPTION]: createSetTableOptionReducer(section)
+    [SET_IMPORT_LIST_EXCLUSION_TABLE_OPTION]: createSetTableOptionReducer(section),
+
+    [CLEAR_IMPORT_LIST_EXCLUSIONS]: createClearReducer(section, {
+      isFetching: false,
+      isPopulated: false,
+      error: null,
+      items: [],
+      isDeleting: false,
+      deleteError: null,
+      pendingChanges: {},
+      totalPages: 0,
+      totalRecords: 0
+    })
   }
 
 };

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

@@ -20,19 +20,19 @@ const section = 'settings.importLists';
 //
 // Actions Types
 
-export const FETCH_IMPORT_LISTS = 'settings/importlists/fetchImportLists';
-export const FETCH_IMPORT_LIST_SCHEMA = 'settings/importlists/fetchImportListSchema';
-export const SELECT_IMPORT_LIST_SCHEMA = 'settings/importlists/selectImportListSchema';
-export const SET_IMPORT_LIST_VALUE = 'settings/importlists/setImportListValue';
-export const SET_IMPORT_LIST_FIELD_VALUE = 'settings/importlists/setImportListFieldValue';
-export const SAVE_IMPORT_LIST = 'settings/importlists/saveImportList';
-export const CANCEL_SAVE_IMPORT_LIST = 'settings/importlists/cancelSaveImportList';
-export const DELETE_IMPORT_LIST = 'settings/importlists/deleteImportList';
-export const TEST_IMPORT_LIST = 'settings/importlists/testImportList';
-export const CANCEL_TEST_IMPORT_LIST = 'settings/importlists/cancelTestImportList';
-export const TEST_ALL_IMPORT_LISTS = 'settings/importlists/testAllImportLists';
-export const BULK_EDIT_IMPORT_LISTS = 'settings/importlists/bulkEditImportLists';
-export const BULK_DELETE_IMPORT_LISTS = 'settings/importlists/bulkDeleteImportLists';
+export const FETCH_IMPORT_LISTS = 'settings/importLists/fetchImportLists';
+export const FETCH_IMPORT_LIST_SCHEMA = 'settings/importLists/fetchImportListSchema';
+export const SELECT_IMPORT_LIST_SCHEMA = 'settings/importLists/selectImportListSchema';
+export const SET_IMPORT_LIST_VALUE = 'settings/importLists/setImportListValue';
+export const SET_IMPORT_LIST_FIELD_VALUE = 'settings/importLists/setImportListFieldValue';
+export const SAVE_IMPORT_LIST = 'settings/importLists/saveImportList';
+export const CANCEL_SAVE_IMPORT_LIST = 'settings/importLists/cancelSaveImportList';
+export const DELETE_IMPORT_LIST = 'settings/importLists/deleteImportList';
+export const TEST_IMPORT_LIST = 'settings/importLists/testImportList';
+export const CANCEL_TEST_IMPORT_LIST = 'settings/importLists/cancelTestImportList';
+export const TEST_ALL_IMPORT_LISTS = 'settings/importLists/testAllImportLists';
+export const BULK_EDIT_IMPORT_LISTS = 'settings/importLists/bulkEditImportLists';
+export const BULK_DELETE_IMPORT_LISTS = 'settings/importLists/bulkDeleteImportLists';
 
 //
 // Action Creators

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

@@ -101,8 +101,8 @@ export default {
     sortKey: 'name',
     sortDirection: sortDirections.ASCENDING,
     sortPredicates: {
-      name: function(item) {
-        return item.name.toLowerCase();
+      name: ({ name }) => {
+        return name.toLocaleLowerCase();
       }
     }
   },

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

@@ -77,7 +77,7 @@ export default {
 
       const promise = createAjaxRequest({
         method: 'PUT',
-        url: '/qualityDefinition/update',
+        url: '/qualitydefinition/update',
         data: JSON.stringify(upatedDefinitions),
         contentType: 'application/json',
         dataType: 'json'

frontend/src/Store/Actions/releaseActions.js

@@ -269,8 +269,9 @@ export const defaultState = {
 };
 
 export const persistState = [
-  'releases.selectedFilterKey',
+  'releases.episode.selectedFilterKey',
   'releases.episode.customFilters',
+  'releases.season.selectedFilterKey',
   'releases.season.customFilters'
 ];
 

frontend/src/System/Status/DiskSpace/DiskSpace.tsx

@@ -67,7 +67,7 @@ function DiskSpace() {
               const { freeSpace, totalSpace } = item;
 
               const diskUsage = 100 - (freeSpace / totalSpace) * 100;
-              let diskUsageKind = kinds.PRIMARY;
+              let diskUsageKind: (typeof kinds.all)[number] = kinds.PRIMARY;
 
               if (diskUsage > 90) {
                 diskUsageKind = kinds.DANGER;

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

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import AppState from 'App/State/AppState';
 import Alert from 'Components/Alert';
 import FieldSet from 'Components/FieldSet';
-import Icon from 'Components/Icon';
+import Icon, { IconProps } from 'Components/Icon';
 import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -97,7 +97,7 @@ function Health() {
               {items.map((item) => {
                 const source = item.source;
 
-                let kind = kinds.WARNING;
+                let kind: IconProps['kind'] = kinds.WARNING;
                 switch (item.type.toLowerCase()) {
                   case 'error':
                     kind = kinds.DANGER;