Fixed: Editing Quality Profiles

ignore-downstream

Co-authored-by: Dream <seth.gecko.rr@gmail.com>
Co-authored-by: Havok Dan <havokdan@yahoo.com.br>
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/pt_BR/
Translate-URL: https://translate.servarr.com/projects/servarr/sonarr/ru/
Translation: Servarr/Sonarr

.devcontainer/Sonarr.code-workspace

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

.github/labeler.yml

@@ -1,17 +1,23 @@
 'connection':
-  - src/NzbDrone.Core/Notifications/**/*
+  - changed-files:
+    - any-glob-to-any-file: src/NzbDrone.Core/Notifications/**/*
 
 'db-migration':
-  - src/NzbDrone.Core/Datastore/Migration/*
+  - changed-files:
+    - any-glob-to-any-file: src/NzbDrone.Core/Datastore/Migration/*
 
 'download-client':
-  - src/NzbDrone.Core/Download/Clients/**/*
+  - changed-files:
+    - any-glob-to-any-file: src/NzbDrone.Core/Download/Clients/**/*
 
 'indexer':
-  - src/NzbDrone.Core/Indexers/**/*
+  - changed-files:
+    - any-glob-to-any-file: src/NzbDrone.Core/Indexers/**/*
 
 'parsing':
-  - src/NzbDrone.Core/Parser/**/*
+  - changed-files:
+    - any-glob-to-any-file: src/NzbDrone.Core/Parser/**/*
 
 'ui-only':
-  - all: ['frontend/**/*']
+  - changed-files:
+    - any-glob-to-all-files: frontend/**/*

.github/workflows/build.yml

@@ -6,13 +6,13 @@ on:
       - develop
       - main
     paths-ignore:
-      - 'src/Sonarr.Api.*/openapi.json'
+      - "src/Sonarr.Api.*/openapi.json"
   pull_request:
     branches:
       - develop
     paths-ignore:
-      - 'src/NzbDrone.Core/Localization/Core/**'
-      - 'src/Sonarr.Api.*/openapi.json'
+      - "src/NzbDrone.Core/Localization/Core/**"
+      - "src/Sonarr.Api.*/openapi.json"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -22,7 +22,7 @@ env:
   FRAMEWORK: net6.0
   RAW_BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
   SONARR_MAJOR_VERSION: 4
-  VERSION: 4.0.3
+  VERSION: 4.0.8
 
 jobs:
   backend:
@@ -32,105 +32,105 @@ jobs:
       major_version: ${{ steps.variables.outputs.major_version }}
       version: ${{ steps.variables.outputs.version }}
     steps:
-    - name: Check out
-      uses: actions/checkout@v4
+      - name: Check out
+        uses: actions/checkout@v4
 
-    - name: Setup .NET
-      uses: actions/setup-dotnet@v4
+      - name: Setup .NET
+        uses: actions/setup-dotnet@v4
 
-    - name: Setup Environment Variables
-      id: variables
-      shell: bash
-      run: |
-        # Add 800 to the build number because GitHub won't let us pick an arbitrary starting point
-        SONARR_VERSION="${{ env.VERSION }}.$((${{ github.run_number }}+800))"
-        DOTNET_VERSION=$(jq -r '.sdk.version' global.json)
+      - name: Setup Environment Variables
+        id: variables
+        shell: bash
+        run: |
+          # Add 800 to the build number because GitHub won't let us pick an arbitrary starting point
+          SONARR_VERSION="${{ env.VERSION }}.$((${{ github.run_number }}+800))"
+          DOTNET_VERSION=$(jq -r '.sdk.version' global.json)
 
-        echo "SDK_PATH=${{ env.DOTNET_ROOT }}/sdk/${DOTNET_VERSION}" >> "$GITHUB_ENV"
-        echo "SONARR_VERSION=$SONARR_VERSION" >> "$GITHUB_ENV"
-        echo "BRANCH=${RAW_BRANCH_NAME/\//-}" >> "$GITHUB_ENV"
+          echo "SDK_PATH=${{ env.DOTNET_ROOT }}/sdk/${DOTNET_VERSION}" >> "$GITHUB_ENV"
+          echo "SONARR_VERSION=$SONARR_VERSION" >> "$GITHUB_ENV"
+          echo "BRANCH=${RAW_BRANCH_NAME//\//-}" >> "$GITHUB_ENV"
 
-        echo "framework=${{ env.FRAMEWORK }}" >> "$GITHUB_OUTPUT"
-        echo "major_version=${{ env.SONARR_MAJOR_VERSION }}" >> "$GITHUB_OUTPUT"
-        echo "version=$SONARR_VERSION" >> "$GITHUB_OUTPUT"
+          echo "framework=${{ env.FRAMEWORK }}" >> "$GITHUB_OUTPUT"
+          echo "major_version=${{ env.SONARR_MAJOR_VERSION }}" >> "$GITHUB_OUTPUT"
+          echo "version=$SONARR_VERSION" >> "$GITHUB_OUTPUT"
 
-    - name: Enable Extra Platforms In SDK
-      shell: bash
-      run: ./build.sh --enable-extra-platforms-in-sdk
+      - name: Enable Extra Platforms In SDK
+        shell: bash
+        run: ./build.sh --enable-extra-platforms-in-sdk
 
-    - name: Build Backend
-      shell: bash
-      run: ./build.sh --backend --enable-extra-platforms --packages
+      - name: Build Backend
+        shell: bash
+        run: ./build.sh --backend --enable-extra-platforms --packages
 
-    # Test Artifacts
+      # Test Artifacts
 
-    - name: Publish win-x64 Test Artifact
-      uses: ./.github/actions/publish-test-artifact
-      with:
-        framework: ${{ env.FRAMEWORK }}
-        runtime: win-x64
+      - name: Publish win-x64 Test Artifact
+        uses: ./.github/actions/publish-test-artifact
+        with:
+          framework: ${{ env.FRAMEWORK }}
+          runtime: win-x64
 
-    - name: Publish linux-x64 Test Artifact
-      uses: ./.github/actions/publish-test-artifact
-      with:
-        framework: ${{ env.FRAMEWORK }}
-        runtime: linux-x64
+      - name: Publish linux-x64 Test Artifact
+        uses: ./.github/actions/publish-test-artifact
+        with:
+          framework: ${{ env.FRAMEWORK }}
+          runtime: linux-x64
 
-    - name: Publish osx-x64 Test Artifact
-      uses: ./.github/actions/publish-test-artifact
-      with:
-        framework: ${{ env.FRAMEWORK }}
-        runtime: osx-x64
+      - name: Publish osx-arm64 Test Artifact
+        uses: ./.github/actions/publish-test-artifact
+        with:
+          framework: ${{ env.FRAMEWORK }}
+          runtime: osx-arm64
 
-    # Build Artifacts (grouped by OS)
-    
-    - name: Publish FreeBSD Artifact
-      uses: actions/upload-artifact@v4
-      with:
-        name: build_freebsd
-        path: _artifacts/freebsd-*/**/*
-    - name: Publish Linux Artifact
-      uses: actions/upload-artifact@v4
-      with:
-        name: build_linux
-        path: _artifacts/linux-*/**/*
-    - name: Publish macOS Artifact
-      uses: actions/upload-artifact@v4
-      with:
-        name: build_macos
-        path: _artifacts/osx-*/**/*
-    - name: Publish Windows Artifact
-      uses: actions/upload-artifact@v4
-      with:
-        name: build_windows
-        path: _artifacts/win-*/**/*
+      # Build Artifacts (grouped by OS)
+
+      - name: Publish FreeBSD Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build_freebsd
+          path: _artifacts/freebsd-*/**/*
+      - name: Publish Linux Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build_linux
+          path: _artifacts/linux-*/**/*
+      - name: Publish macOS Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build_macos
+          path: _artifacts/osx-*/**/*
+      - name: Publish Windows Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build_windows
+          path: _artifacts/win-*/**/*
 
   frontend:
     runs-on: ubuntu-latest
     steps:
-    - name: Check out
-      uses: actions/checkout@v4
+      - name: Check out
+        uses: actions/checkout@v4
 
-    - name: Volta
-      uses: volta-cli/action@v4
+      - name: Volta
+        uses: volta-cli/action@v4
 
-    - name: Yarn Install
-      run: yarn install
+      - name: Yarn Install
+        run: yarn install
 
-    - name: Lint
-      run: yarn lint
+      - name: Lint
+        run: yarn lint
 
-    - name: Stylelint
-      run: yarn stylelint -f github
+      - name: Stylelint
+        run: yarn stylelint -f github
 
-    - name: Build
-      run: yarn build --env production
+      - name: Build
+        run: yarn build --env production
 
-    - name: Publish UI Artifact
-      uses: actions/upload-artifact@v4
-      with:
-        name: build_ui
-        path: _output/UI/**/*
+      - name: Publish UI Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build_ui
+          path: _output/UI/**/*
 
   unit_test:
     needs: backend
@@ -143,39 +143,39 @@ jobs:
             artifact: tests-linux-x64
             filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory!=IntegrationTest&TestCategory!=AutomationTest
           - os: macos-latest
-            artifact: tests-osx-x64
+            artifact: tests-osx-arm64
             filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory!=IntegrationTest&TestCategory!=AutomationTest
           - os: windows-latest
             artifact: tests-win-x64
             filter: TestCategory!=ManualTest&TestCategory!=LINUX&TestCategory!=IntegrationTest&TestCategory!=AutomationTest
     runs-on: ${{ matrix.os }}
     steps:
-    - name: Check out
-      uses: actions/checkout@v4
+      - name: Check out
+        uses: actions/checkout@v4
 
-    - name: Test
-      uses: ./.github/actions/test
-      with:
-        os: ${{ matrix.os }}
-        artifact: ${{ matrix.artifact }}
-        pattern: Sonarr.*.Test.dll
-        filter: ${{ matrix.filter }}
+      - name: Test
+        uses: ./.github/actions/test
+        with:
+          os: ${{ matrix.os }}
+          artifact: ${{ matrix.artifact }}
+          pattern: Sonarr.*.Test.dll
+          filter: ${{ matrix.filter }}
 
   unit_test_postgres:
     needs: backend
     runs-on: ubuntu-latest
     steps:
-    - name: Check out
-      uses: actions/checkout@v4
+      - name: Check out
+        uses: actions/checkout@v4
 
-    - name: Test
-      uses: ./.github/actions/test
-      with:
-        os: ubuntu-latest
-        artifact: tests-linux-x64
-        pattern: Sonarr.*.Test.dll
-        filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory!=IntegrationTest&TestCategory!=AutomationTest
-        use_postgres: true
+      - name: Test
+        uses: ./.github/actions/test
+        with:
+          os: ubuntu-latest
+          artifact: tests-linux-x64
+          pattern: Sonarr.*.Test.dll
+          filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory!=IntegrationTest&TestCategory!=AutomationTest
+          use_postgres: true
 
   integration_test:
     needs: backend
@@ -190,10 +190,10 @@ jobs:
             binary_artifact: build_linux
             binary_path: linux-x64/${{ needs.backend.outputs.framework }}/Sonarr
           - os: macos-latest
-            artifact: tests-osx-x64
+            artifact: tests-osx-arm64
             filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory=IntegrationTest
             binary_artifact: build_macos
-            binary_path: osx-x64/${{ needs.backend.outputs.framework }}/Sonarr
+            binary_path: osx-arm64/${{ needs.backend.outputs.framework }}/Sonarr
           - os: windows-latest
             artifact: tests-win-x64
             filter: TestCategory!=ManualTest&TestCategory!=LINUX&TestCategory=IntegrationTest
@@ -201,19 +201,19 @@ jobs:
             binary_path: win-x64/${{ needs.backend.outputs.framework }}/Sonarr
     runs-on: ${{ matrix.os }}
     steps:
-    - name: Check out
-      uses: actions/checkout@v4
+      - name: Check out
+        uses: actions/checkout@v4
 
-    - name: Test
-      uses: ./.github/actions/test
-      with:
-        os: ${{ matrix.os }}
-        artifact: ${{ matrix.artifact }}
-        pattern: Sonarr.*.Test.dll
-        filter: ${{ matrix.filter }}
-        integration_tests: true
-        binary_artifact: ${{ matrix.binary_artifact }}
-        binary_path: ${{ matrix.binary_path }}
+      - name: Test
+        uses: ./.github/actions/test
+        with:
+          os: ${{ matrix.os }}
+          artifact: ${{ matrix.artifact }}
+          pattern: Sonarr.*.Test.dll
+          filter: ${{ matrix.filter }}
+          integration_tests: true
+          binary_artifact: ${{ matrix.binary_artifact }}
+          binary_path: ${{ matrix.binary_path }}
 
   deploy:
     if: ${{ github.ref_name == 'develop' || github.ref_name == 'main' }}
@@ -228,7 +228,15 @@ jobs:
 
   notify:
     name: Discord Notification
-    needs: [backend, frontend, unit_test, unit_test_postgres, integration_test, deploy]
+    needs:
+      [
+        backend,
+        frontend,
+        unit_test,
+        unit_test_postgres,
+        integration_test,
+        deploy,
+      ]
     if: ${{ !cancelled() && (github.ref_name == 'develop' || github.ref_name == 'main') }}
     env:
       STATUS: ${{ contains(needs.*.result, 'failure') && 'failure' || 'success' }}
@@ -236,13 +244,13 @@ jobs:
 
     steps:
       - name: Notify
-        uses: tsickert/discord-webhook@v5.3.0
+        uses: tsickert/discord-webhook@v6.0.0
         with:
           webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          username: 'GitHub Actions'
-          avatar-url: 'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'
+          username: "GitHub Actions"
+          avatar-url: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
           embed-title: "${{ github.workflow }}: ${{ env.STATUS == 'success' && 'Success' || 'Failure' }}"
-          embed-url: 'https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'
+          embed-url: "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
           embed-description: |
             **Branch** ${{ github.ref }}
             **Build** ${{ needs.backend.outputs.version }}

.github/workflows/conflict_labeler.yml

@@ -0,0 +1,26 @@
+name: Merge Conflict Labeler
+
+on:
+  push:
+    branches:
+      - develop
+  pull_request_target:
+    branches:
+      - develop
+    types: [synchronize]
+
+jobs:
+  label:
+    name: Labeling
+    runs-on: ubuntu-latest
+    if: ${{ github.repository == 'Sonarr/Sonarr' }}
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Apply label
+        uses: eps1lon/actions-label-merge-conflict@v3
+        with:
+          dirtyLabel: 'merge-conflict'
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          

.github/workflows/labeler.yml

@@ -8,5 +8,6 @@ jobs:
       contents: read
       pull-requests: write
     runs-on: ubuntu-latest
+    if: github.repository == 'Sonarr/Sonarr'
     steps:
-      - uses: actions/labeler@v4
+      - uses: actions/labeler@v5

.github/workflows/lock.yml

@@ -8,14 +8,15 @@ on:
 jobs:
   lock:
     runs-on: ubuntu-latest
+    if: github.repository == 'Sonarr/Sonarr'
     steps:
-      - uses: dessant/lock-threads@v2
+      - uses: dessant/lock-threads@v5
         with:
           github-token: ${{ github.token }}
-          issue-lock-inactive-days: '90'
-          issue-exclude-created-before: ''
-          issue-exclude-labels: 'one-day-maybe'
-          issue-lock-labels: ''
-          issue-lock-comment: ''
+          issue-inactive-days: '90'
+          exclude-issue-created-before: ''
+          exclude-any-issue-labels: 'one-day-maybe'
+          add-issue-labels: ''
+          issue-comment: ''
           issue-lock-reason: 'resolved'
           process-only: ''

docs.sh

@@ -25,17 +25,23 @@ slnFile=src/Sonarr.sln
 
 platform=Posix
 
+if [ "$PLATFORM" = "Windows" ]; then
+  application=Sonarr.Console.dll
+else
+  application=Sonarr.dll
+fi
+
 dotnet clean $slnFile -c Debug
 dotnet clean $slnFile -c Release
 
 dotnet msbuild -restore $slnFile -p:Configuration=Debug -p:Platform=$platform -p:RuntimeIdentifiers=$RUNTIME -t:PublishAllRids
 
 dotnet new tool-manifest
-dotnet tool install --version 6.5.0 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 6.6.2 Swashbuckle.AspNetCore.Cli
 
-dotnet tool run swagger tofile --output ./src/Sonarr.Api.V3/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/Sonarr.dll" v3 &
+dotnet tool run swagger tofile --output ./src/Sonarr.Api.V3/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/$application" v3 &
 
-sleep 30
+sleep 45
 
 kill %1
 

frontend/src/Activity/Blocklist/Blocklist.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FilterMenu from 'Components/Menu/FilterMenu';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -20,6 +21,7 @@ import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
+import BlocklistFilterModal from './BlocklistFilterModal';
 import BlocklistRowConnector from './BlocklistRowConnector';
 
 class Blocklist extends Component {
@@ -114,9 +116,13 @@ class Blocklist extends Component {
       error,
       items,
       columns,
+      selectedFilterKey,
+      filters,
+      customFilters,
       totalRecords,
       isRemoving,
       isClearingBlocklistExecuting,
+      onFilterSelect,
       ...otherProps
     } = this.props;
 
@@ -161,6 +167,15 @@ class Blocklist extends Component {
                 iconName={icons.TABLE}
               />
             </TableOptionsModalWrapper>
+
+            <FilterMenu
+              alignMenu={align.RIGHT}
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={customFilters}
+              filterModalConnectorComponent={BlocklistFilterModal}
+              onFilterSelect={onFilterSelect}
+            />
           </PageToolbarSection>
         </PageToolbar>
 
@@ -180,7 +195,11 @@ class Blocklist extends Component {
           {
             isPopulated && !error && !items.length &&
               <Alert kind={kinds.INFO}>
-                {translate('NoHistoryBlocklist')}
+                {
+                  selectedFilterKey === 'all' ?
+                    translate('NoHistoryBlocklist') :
+                    translate('BlocklistFilterHasNoItems')
+                }
               </Alert>
           }
 
@@ -251,11 +270,15 @@ Blocklist.propTypes = {
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
   totalRecords: PropTypes.number,
   isRemoving: PropTypes.bool.isRequired,
   isClearingBlocklistExecuting: PropTypes.bool.isRequired,
   onRemoveSelected: PropTypes.func.isRequired,
-  onClearBlocklistPress: PropTypes.func.isRequired
+  onClearBlocklistPress: PropTypes.func.isRequired,
+  onFilterSelect: PropTypes.func.isRequired
 };
 
 export default Blocklist;

frontend/src/Activity/Blocklist/BlocklistConnector.js

@@ -6,6 +6,7 @@ import * as commandNames from 'Commands/commandNames';
 import withCurrentPage from 'Components/withCurrentPage';
 import * as blocklistActions from 'Store/Actions/blocklistActions';
 import { executeCommand } from 'Store/Actions/commandActions';
+import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
 import Blocklist from './Blocklist';
@@ -13,10 +14,12 @@ import Blocklist from './Blocklist';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.blocklist,
+    createCustomFiltersSelector('blocklist'),
     createCommandExecutingSelector(commandNames.CLEAR_BLOCKLIST),
-    (blocklist, isClearingBlocklistExecuting) => {
+    (blocklist, customFilters, isClearingBlocklistExecuting) => {
       return {
         isClearingBlocklistExecuting,
+        customFilters,
         ...blocklist
       };
     }
@@ -97,6 +100,10 @@ class BlocklistConnector extends Component {
     this.props.setBlocklistSort({ sortKey });
   };
 
+  onFilterSelect = (selectedFilterKey) => {
+    this.props.setBlocklistFilter({ selectedFilterKey });
+  };
+
   onClearBlocklistPress = () => {
     this.props.executeCommand({ name: commandNames.CLEAR_BLOCKLIST });
   };
@@ -122,6 +129,7 @@ class BlocklistConnector extends Component {
         onPageSelect={this.onPageSelect}
         onRemoveSelected={this.onRemoveSelected}
         onSortPress={this.onSortPress}
+        onFilterSelect={this.onFilterSelect}
         onTableOptionChange={this.onTableOptionChange}
         onClearBlocklistPress={this.onClearBlocklistPress}
         {...this.props}
@@ -142,6 +150,7 @@ BlocklistConnector.propTypes = {
   gotoBlocklistPage: PropTypes.func.isRequired,
   removeBlocklistItems: PropTypes.func.isRequired,
   setBlocklistSort: PropTypes.func.isRequired,
+  setBlocklistFilter: PropTypes.func.isRequired,
   setBlocklistTableOption: PropTypes.func.isRequired,
   clearBlocklist: PropTypes.func.isRequired,
   executeCommand: PropTypes.func.isRequired

frontend/src/Activity/Blocklist/BlocklistFilterModal.tsx

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

frontend/src/Activity/History/HistoryRow.js

@@ -77,7 +77,7 @@ class HistoryRow extends Component {
       onMarkAsFailedPress
     } = this.props;
 
-    if (!episode) {
+    if (!series || !episode) {
       return null;
     }
 

frontend/src/Activity/Queue/Queue.js

@@ -217,6 +217,7 @@ class Queue extends Component {
           >
             <TableOptionsModalWrapper
               columns={columns}
+              maxPageSize={200}
               {...otherProps}
               optionsComponent={QueueOptionsConnector}
             >

frontend/src/Activity/Queue/QueueStatus.js

@@ -70,6 +70,11 @@ function QueueStatus(props) {
     iconName = icons.DOWNLOADED;
     title = translate('Downloaded');
 
+    if (trackedDownloadState === 'importBlocked') {
+      title += ` - ${translate('UnableToImportAutomatically')}`;
+      iconKind = kinds.WARNING;
+    }
+
     if (trackedDownloadState === 'importPending') {
       title += ` - ${translate('WaitingToImport')}`;
       iconKind = kinds.PURPLE;

frontend/src/Activity/Queue/RemoveQueueItemModal.tsx

@@ -118,6 +118,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
       {
         key: 'blocklistAndSearch',
         value: translate('BlocklistAndSearch'),
+        isDisabled: isPending,
         hint: multipleSelected
           ? translate('BlocklistAndSearchMultipleHint')
           : translate('BlocklistAndSearchHint'),
@@ -130,7 +131,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
           : translate('BlocklistOnlyHint'),
       },
     ];
-  }, [multipleSelected]);
+  }, [isPending, multipleSelected]);
 
   const handleRemovalMethodChange = useCallback(
     ({ value }: { value: RemovalMethod }) => {

frontend/src/Activity/Queue/TimeleftCell.js

@@ -24,7 +24,11 @@ function TimeleftCell(props) {
   } = props;
 
   if (status === 'delay') {
-    const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
+    const date = getRelativeDate({
+      date: estimatedCompletionTime,
+      shortDateFormat,
+      showRelativeDates
+    });
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (
@@ -40,7 +44,11 @@ function TimeleftCell(props) {
   }
 
   if (status === 'downloadClientUnavailable') {
-    const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
+    const date = getRelativeDate({
+      date: estimatedCompletionTime,
+      shortDateFormat,
+      showRelativeDates
+    });
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js

@@ -145,6 +145,7 @@ class AddNewSeriesSearchResult extends Component {
               <Label size={sizes.LARGE}>
                 <HeartRating
                   rating={ratings.value}
+                  votes={ratings.votes}
                   iconSize={13}
                 />
               </Label>

frontend/src/App/App.js

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

frontend/src/App/AppRoutes.js

@@ -30,7 +30,7 @@ import LogsTableConnector from 'System/Events/LogsTableConnector';
 import Logs from 'System/Logs/Logs';
 import Status from 'System/Status/Status';
 import Tasks from 'System/Tasks/Tasks';
-import UpdatesConnector from 'System/Updates/UpdatesConnector';
+import Updates from 'System/Updates/Updates';
 import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
 import CutoffUnmetConnector from 'Wanted/CutoffUnmet/CutoffUnmetConnector';
 import MissingConnector from 'Wanted/Missing/MissingConnector';
@@ -248,7 +248,7 @@ function AppRoutes(props) {
 
       <Route
         path="/system/updates"
-        component={UpdatesConnector}
+        component={Updates}
       />
 
       <Route

frontend/src/App/ApplyTheme.js

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

frontend/src/App/ApplyTheme.tsx

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

frontend/src/App/State/AppState.ts

@@ -1,4 +1,5 @@
 import InteractiveImportAppState from 'App/State/InteractiveImportAppState';
+import BlocklistAppState from './BlocklistAppState';
 import CalendarAppState from './CalendarAppState';
 import CommandAppState from './CommandAppState';
 import EpisodeFilesAppState from './EpisodeFilesAppState';
@@ -45,6 +46,7 @@ export interface CustomFilter {
 }
 
 export interface AppSectionState {
+  version: string;
   dimensions: {
     isSmallScreen: boolean;
     width: number;
@@ -54,6 +56,7 @@ export interface AppSectionState {
 
 interface AppState {
   app: AppSectionState;
+  blocklist: BlocklistAppState;
   calendar: CalendarAppState;
   commands: CommandAppState;
   episodeFiles: EpisodeFilesAppState;

frontend/src/App/State/BlocklistAppState.ts

@@ -0,0 +1,8 @@
+import Blocklist from 'typings/Blocklist';
+import AppSectionState, { AppSectionFilterState } from './AppSectionState';
+
+interface BlocklistAppState
+  extends AppSectionState<Blocklist>,
+    AppSectionFilterState<Blocklist> {}
+
+export default BlocklistAppState;

frontend/src/App/State/SeriesAppState.ts

@@ -20,6 +20,7 @@ export interface SeriesIndexAppState {
     showTitle: boolean;
     showMonitored: boolean;
     showQualityProfile: boolean;
+    showTags: boolean;
     showSearchAction: boolean;
   };
 
@@ -34,6 +35,7 @@ export interface SeriesIndexAppState {
     showSeasonCount: boolean;
     showPath: boolean;
     showSizeOnDisk: boolean;
+    showTags: boolean;
     showSearchAction: boolean;
   };
 

frontend/src/App/State/SettingsAppState.ts

@@ -14,13 +14,16 @@ import Indexer from 'typings/Indexer';
 import IndexerFlag from 'typings/IndexerFlag';
 import Notification from 'typings/Notification';
 import QualityProfile from 'typings/QualityProfile';
-import { UiSettings } from 'typings/UiSettings';
+import General from 'typings/Settings/General';
+import UiSettings from 'typings/Settings/UiSettings';
 
 export interface DownloadClientAppState
   extends AppSectionState<DownloadClient>,
     AppSectionDeleteState,
     AppSectionSaveState {}
 
+export type GeneralAppState = AppSectionItemState<General>;
+
 export interface ImportListAppState
   extends AppSectionState<ImportList>,
     AppSectionDeleteState,
@@ -58,6 +61,7 @@ export type UiSettingsAppState = AppSectionItemState<UiSettings>;
 interface SettingsAppState {
   advancedSettings: boolean;
   downloadClients: DownloadClientAppState;
+  general: GeneralAppState;
   importListExclusions: ImportListExclusionsSettingsAppState;
   importListOptions: ImportListOptionsSettingsAppState;
   importLists: ImportListAppState;

frontend/src/App/State/SystemAppState.ts

@@ -1,9 +1,12 @@
 import SystemStatus from 'typings/SystemStatus';
-import { AppSectionItemState } from './AppSectionState';
+import Update from 'typings/Update';
+import AppSectionState, { AppSectionItemState } from './AppSectionState';
 
 export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
+export type UpdateAppState = AppSectionState<Update>;
 
 interface SystemAppState {
+  updates: UpdateAppState;
   status: SystemStatusAppState;
 }
 

frontend/src/Calendar/Day/DayOfWeek.js

@@ -28,7 +28,7 @@ class DayOfWeek extends Component {
     if (view === calendarViews.WEEK) {
       formatedDate = momentDate.format(calendarWeekColumnHeader);
     } else if (view === calendarViews.FORECAST) {
-      formatedDate = getRelativeDate(date, shortDateFormat, showRelativeDates);
+      formatedDate = getRelativeDate({ date, shortDateFormat, showRelativeDates });
     }
 
     return (

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

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

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

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

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import Series from 'Series/Series';
 import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
 
@@ -11,7 +11,7 @@ function SeriesFilterBuilderRowValue(props: FilterBuilderRowValueProps) {
 
   const tagList = allSeries
     .map((series) => ({ id: series.id, name: series.title }))
-    .sort(sortByName);
+    .sort(sortByProp('name'));
 
   return <FilterBuilderRowValue {...props} tagList={tagList} />;
 }

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

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

frontend/src/Components/Form/DownloadClientSelectInputConnector.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchDownloadClients } from 'Store/Actions/settingsActions';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
@@ -23,7 +23,7 @@ function createMapStateToProps() {
 
       const filteredItems = items.filter((item) => item.protocol === protocolFilter);
 
-      const values = _.map(filteredItems.sort(sortByName), (downloadClient) => {
+      const values = _.map(filteredItems.sort(sortByProp('name')), (downloadClient) => {
         return {
           key: downloadClient.id,
           value: downloadClient.name,

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -271,26 +271,32 @@ class EnhancedSelectInput extends Component {
     this.setState({ isOpen: !this.state.isOpen });
   };
 
-  onSelect = (value) => {
-    if (Array.isArray(this.props.value)) {
-      let newValue = null;
-      const index = this.props.value.indexOf(value);
+  onSelect = (newValue) => {
+    const { name, value, values, onChange } = this.props;
+    const additionalProperties = values.find((v) => v.key === newValue)?.additionalProperties;
+
+    if (Array.isArray(value)) {
+      let arrayValue = null;
+      const index = value.indexOf(newValue);
+
       if (index === -1) {
-        newValue = this.props.values.map((v) => v.key).filter((v) => (v === value) || this.props.value.includes(v));
+        arrayValue = values.map((v) => v.key).filter((v) => (v === newValue) || value.includes(v));
       } else {
-        newValue = [...this.props.value];
-        newValue.splice(index, 1);
+        arrayValue = [...value];
+        arrayValue.splice(index, 1);
       }
-      this.props.onChange({
-        name: this.props.name,
-        value: newValue
+      onChange({
+        name,
+        value: arrayValue,
+        additionalProperties
       });
     } else {
       this.setState({ isOpen: false });
 
-      this.props.onChange({
-        name: this.props.name,
-        value
+      onChange({
+        name,
+        value: newValue,
+        additionalProperties
       });
     }
   };
@@ -485,7 +491,7 @@ class EnhancedSelectInput extends Component {
                             values.map((v, index) => {
                               const hasParent = v.parentKey !== undefined;
                               const depth = hasParent ? 1 : 0;
-                              const parentSelected = hasParent && value.includes(v.parentKey);
+                              const parentSelected = hasParent && Array.isArray(value) && value.includes(v.parentKey);
                               return (
                                 <OptionComponent
                                   key={v.key}

frontend/src/Components/Form/EnhancedSelectInputConnector.js

@@ -9,7 +9,8 @@ import EnhancedSelectInput from './EnhancedSelectInput';
 const importantFieldNames = [
   'baseUrl',
   'apiPath',
-  'apiKey'
+  'apiKey',
+  'authToken'
 ];
 
 function getProviderDataKey(providerData) {
@@ -34,7 +35,9 @@ function getSelectOptions(items) {
       key: option.value,
       value: option.name,
       hint: option.hint,
-      parentKey: option.parentValue
+      parentKey: option.parentValue,
+      isDisabled: option.isDisabled,
+      additionalProperties: option.additionalProperties
     };
   });
 }
@@ -147,7 +150,7 @@ EnhancedSelectInputConnector.propTypes = {
   provider: PropTypes.string.isRequired,
   providerData: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
-  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   selectOptionsProviderAction: PropTypes.string,
   onChange: PropTypes.func.isRequired,

frontend/src/Components/Form/IndexerSelectInputConnector.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchIndexers } from 'Store/Actions/settingsActions';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
@@ -20,7 +20,7 @@ function createMapStateToProps() {
         items
       } = indexers;
 
-      const values = _.map(items.sort(sortByName), (indexer) => {
+      const values = _.map(items.sort(sortByProp('name')), (indexer) => {
         return {
           key: indexer.id,
           value: indexer.name

frontend/src/Components/Form/PasswordInput.css

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

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

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

frontend/src/Components/Form/PasswordInput.js

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

frontend/src/Components/Form/QualityProfileSelectInputConnector.js

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

frontend/src/Components/HeartRating.js

@@ -1,29 +1,40 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from 'Components/Icon';
-import { icons } from 'Helpers/Props';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './HeartRating.css';
 
-function HeartRating({ rating, iconSize }) {
+function HeartRating({ rating, votes, iconSize }) {
   return (
-    <span className={styles.rating}>
-      <Icon
-        className={styles.heart}
-        name={icons.HEART}
-        size={iconSize}
-      />
+    <Tooltip
+      anchor={
+        <span className={styles.rating}>
+          <Icon
+            className={styles.heart}
+            name={icons.HEART}
+            size={iconSize}
+          />
 
-      {rating * 10}%
-    </span>
+          {rating * 10}%
+        </span>
+      }
+      tooltip={translate('CountVotes', { votes })}
+      kind={kinds.INVERSE}
+      position={tooltipPositions.TOP}
+    />
   );
 }
 
 HeartRating.propTypes = {
   rating: PropTypes.number.isRequired,
+  votes: PropTypes.number.isRequired,
   iconSize: PropTypes.number.isRequired
 };
 
 HeartRating.defaultProps = {
+  votes: 0,
   iconSize: 14
 };
 

frontend/src/Components/Label.css

@@ -88,6 +88,15 @@
   }
 }
 
+.purple {
+  border-color: var(--purple);
+  background-color: var(--purple);
+
+  &.outline {
+    color: var(--purple);
+  }
+}
+
 /** Sizes **/
 
 .small {

frontend/src/Components/Label.css.d.ts

@@ -11,6 +11,7 @@ interface CssExports {
   'medium': string;
   'outline': string;
   'primary': string;
+  'purple': string;
   'small': string;
   'success': string;
   'warning': string;

frontend/src/Components/Menu/FilterMenuContent.js

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

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

@@ -21,6 +21,7 @@ function createCleanSeriesSelector() {
           tvdbId,
           tvMazeId,
           imdbId,
+          tmdbId,
           tags = []
         } = series;
 
@@ -33,6 +34,7 @@ function createCleanSeriesSelector() {
           tvdbId,
           tvMazeId,
           imdbId,
+          tmdbId,
           firstCharacter: title.charAt(0).toLowerCase(),
           tags: tags.reduce((acc, id) => {
             const matchingTag = allTags.find((tag) => tag.id === id);

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

@@ -14,6 +14,7 @@ function SeriesSearchResult(props) {
     tvdbId,
     tvMazeId,
     imdbId,
+    tmdbId,
     tags
   } = props;
 
@@ -73,6 +74,14 @@ function SeriesSearchResult(props) {
             null
         }
 
+        {
+          match.key === 'tmdbId' && tmdbId ?
+            <div className={styles.alternateTitle}>
+              TmdbId: {tmdbId}
+            </div> :
+            null
+        }
+
         {
           tag ?
             <div className={styles.tagContainer}>
@@ -97,6 +106,7 @@ SeriesSearchResult.propTypes = {
   tvdbId: PropTypes.number,
   tvMazeId: PropTypes.number,
   imdbId: PropTypes.string,
+  tmdbId: PropTypes.number,
   tags: PropTypes.arrayOf(PropTypes.object).isRequired,
   match: PropTypes.object.isRequired
 };

frontend/src/Components/Page/Header/fuse.worker.js

@@ -13,6 +13,7 @@ const fuseOptions = {
     'tvdbId',
     'tvMazeId',
     'imdbId',
+    'tmdbId',
     'tags.label'
   ]
 };

frontend/src/Components/SignalRConnector.js

@@ -244,7 +244,7 @@ class SignalRConnector extends Component {
   handleWantedCutoff = (body) => {
     if (body.action === 'updated') {
       this.props.dispatchUpdateItem({
-        section: 'cutoffUnmet',
+        section: 'wanted.cutoffUnmet',
         updateOnly: true,
         ...body.resource
       });
@@ -254,7 +254,7 @@ class SignalRConnector extends Component {
   handleWantedMissing = (body) => {
     if (body.action === 'updated') {
       this.props.dispatchUpdateItem({
-        section: 'missing',
+        section: 'wanted.missing',
         updateOnly: true,
         ...body.resource
       });

frontend/src/Components/Table/Cells/RelativeDateCell.js

@@ -15,6 +15,7 @@ class RelativeDateCell extends PureComponent {
       className,
       date,
       includeSeconds,
+      includeTime,
       showRelativeDates,
       shortDateFormat,
       longDateFormat,
@@ -39,7 +40,7 @@ class RelativeDateCell extends PureComponent {
         title={formatDateTime(date, longDateFormat, timeFormat, { includeSeconds, includeRelativeDay: !showRelativeDates })}
         {...otherProps}
       >
-        {getRelativeDate(date, shortDateFormat, showRelativeDates, { timeFormat, includeSeconds, timeForToday: true })}
+        {getRelativeDate({ date, shortDateFormat, showRelativeDates, timeFormat, includeSeconds, includeTime, timeForToday: true })}
       </Component>
     );
   }
@@ -49,6 +50,7 @@ RelativeDateCell.propTypes = {
   className: PropTypes.string.isRequired,
   date: PropTypes.string,
   includeSeconds: PropTypes.bool.isRequired,
+  includeTime: PropTypes.bool.isRequired,
   showRelativeDates: PropTypes.bool.isRequired,
   shortDateFormat: PropTypes.string.isRequired,
   longDateFormat: PropTypes.string.isRequired,
@@ -60,6 +62,7 @@ RelativeDateCell.propTypes = {
 RelativeDateCell.defaultProps = {
   className: styles.cell,
   includeSeconds: false,
+  includeTime: false,
   component: TableRowCell
 };
 

frontend/src/Components/Table/TableOptions/TableOptionsModal.js

@@ -49,11 +49,12 @@ class TableOptionsModal extends Component {
 
   onPageSizeChange = ({ value }) => {
     let pageSizeError = null;
+    const maxPageSize = this.props.maxPageSize ?? 250;
 
     if (value < 5) {
       pageSizeError = translate('TablePageSizeMinimum', { minimumValue: '5' });
-    } else if (value > 250) {
-      pageSizeError = translate('TablePageSizeMaximum', { maximumValue: '250' });
+    } else if (value > maxPageSize) {
+      pageSizeError = translate('TablePageSizeMaximum', { maximumValue: `${maxPageSize}` });
     } else {
       this.props.onTableOptionChange({ pageSize: value });
     }
@@ -248,6 +249,7 @@ TableOptionsModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   pageSize: PropTypes.number,
+  maxPageSize: PropTypes.number,
   canModifyColumns: PropTypes.bool.isRequired,
   optionsComponent: PropTypes.elementType,
   onTableOptionChange: PropTypes.func.isRequired,

frontend/src/Components/TagList.js

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

frontend/src/Content/Fonts/fonts.css

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

frontend/src/Episode/History/EpisodeHistoryRow.js

@@ -111,6 +111,8 @@ class EpisodeHistoryRow extends Component {
 
         <RelativeDateCellConnector
           date={date}
+          includeSeconds={true}
+          includeTime={true}
         />
 
         <TableRowCell className={styles.actions}>

frontend/src/Episode/Summary/EpisodeFileRow.css

@@ -17,6 +17,12 @@
   width: 175px;
 }
 
+.customFormatScore {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 65px;
+}
+
 .actions {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

frontend/src/Episode/Summary/EpisodeFileRow.css.d.ts

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'actions': string;
+  'customFormatScore': string;
   'customFormats': string;
   'languages': string;
   'quality': string;

frontend/src/Episode/Summary/EpisodeFileRow.js

@@ -11,6 +11,7 @@ import EpisodeLanguages from 'Episode/EpisodeLanguages';
 import EpisodeQuality from 'Episode/EpisodeQuality';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import formatBytes from 'Utilities/Number/formatBytes';
+import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import translate from 'Utilities/String/translate';
 import MediaInfo from './MediaInfo';
 import styles from './EpisodeFileRow.css';
@@ -55,6 +56,7 @@ class EpisodeFileRow extends Component {
       languages,
       quality,
       customFormats,
+      customFormatScore,
       qualityCutoffNotMet,
       mediaInfo,
       columns
@@ -127,6 +129,17 @@ class EpisodeFileRow extends Component {
               );
             }
 
+            if (name === 'customFormatScore') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.customFormatScore}
+                >
+                  {formatCustomFormatScore(customFormatScore, customFormats.length)}
+                </TableRowCell>
+              );
+            }
+
             if (name === 'actions') {
               return (
                 <TableRowCell
@@ -183,6 +196,7 @@ EpisodeFileRow.propTypes = {
   quality: PropTypes.object.isRequired,
   qualityCutoffNotMet: PropTypes.bool.isRequired,
   customFormats: PropTypes.arrayOf(PropTypes.object),
+  customFormatScore: PropTypes.number.isRequired,
   mediaInfo: PropTypes.object,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   onDeleteEpisodeFile: PropTypes.func.isRequired

frontend/src/Episode/Summary/EpisodeSummary.js

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Icon from 'Components/Icon';
 import Label from 'Components/Label';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
-import { kinds, sizes } from 'Helpers/Props';
+import { icons, kinds, sizes } from 'Helpers/Props';
 import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
 import translate from 'Utilities/String/translate';
 import EpisodeAiringConnector from './EpisodeAiringConnector';
@@ -42,6 +43,15 @@ const columns = [
     isSortable: false,
     isVisible: true
   },
+  {
+    name: 'customFormatScore',
+    label: React.createElement(Icon, {
+      name: icons.SCORE,
+      title: () => translate('CustomFormatScore')
+    }),
+    isSortable: true,
+    isVisible: true
+  },
   {
     name: 'actions',
     label: '',
@@ -94,6 +104,7 @@ class EpisodeSummary extends Component {
       languages,
       quality,
       customFormats,
+      customFormatScore,
       qualityCutoffNotMet,
       onDeleteEpisodeFile
     } = this.props;
@@ -143,6 +154,7 @@ class EpisodeSummary extends Component {
                   quality={quality}
                   qualityCutoffNotMet={qualityCutoffNotMet}
                   customFormats={customFormats}
+                  customFormatScore={customFormatScore}
                   mediaInfo={mediaInfo}
                   columns={columns}
                   onDeleteEpisodeFile={onDeleteEpisodeFile}
@@ -179,6 +191,7 @@ EpisodeSummary.propTypes = {
   quality: PropTypes.object,
   qualityCutoffNotMet: PropTypes.bool,
   customFormats: PropTypes.arrayOf(PropTypes.object),
+  customFormatScore: PropTypes.number.isRequired,
   onDeleteEpisodeFile: PropTypes.func.isRequired
 };
 

frontend/src/Episode/Summary/EpisodeSummaryConnector.js

@@ -31,7 +31,8 @@ function createMapStateToProps() {
         languages,
         quality,
         qualityCutoffNotMet,
-        customFormats
+        customFormats,
+        customFormatScore
       } = episodeFile;
 
       return {
@@ -45,7 +46,8 @@ function createMapStateToProps() {
         languages,
         quality,
         qualityCutoffNotMet,
-        customFormats
+        customFormats,
+        customFormatScore
       };
     }
   );

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.tsx

@@ -128,7 +128,8 @@ function InteractiveImportRow(props: InteractiveImportRowProps) {
         seasonNumber != null &&
         episodes.length &&
         quality &&
-        languages
+        languages &&
+        size > 0
       ) {
         onSelectedChange({
           id,

frontend/src/InteractiveImport/Series/SelectSeriesModalContent.tsx

@@ -21,6 +21,7 @@ import { scrollDirections } from 'Helpers/Props';
 import Series from 'Series/Series';
 import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
 import dimensions from 'Styles/Variables/dimensions';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import SelectSeriesModalTableHeader from './SelectSeriesModalTableHeader';
 import SelectSeriesRow from './SelectSeriesRow';
@@ -163,9 +164,7 @@ function SelectSeriesModalContent(props: SelectSeriesModalContentProps) {
   );
 
   const items = useMemo(() => {
-    const sorted = [...allSeries].sort((a, b) =>
-      a.sortTitle.localeCompare(b.sortTitle)
-    );
+    const sorted = [...allSeries].sort(sortByProp('sortTitle'));
 
     return sorted.filter(
       (item) =>

frontend/src/Series/Delete/DeleteSeriesModalContent.css

@@ -14,4 +14,9 @@
 .deleteFilesMessage {
   margin-top: 20px;
   color: var(--dangerColor);
+
+  .deleteCount {
+    margin-top: 20px;
+    color: var(--warningColor);
+  }
 }

frontend/src/Series/Delete/DeleteSeriesModalContent.css.d.ts

@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'deleteCount': string;
   'deleteFilesMessage': string;
   'folderPath': string;
   'pathContainer': string;

frontend/src/Series/Delete/DeleteSeriesModalContent.js

@@ -50,15 +50,15 @@ class DeleteSeriesModalContent extends Component {
     const {
       title,
       path,
-      statistics,
+      statistics = {},
       deleteOptions,
       onModalClose,
       onDeleteOptionChange
     } = this.props;
 
     const {
-      episodeFileCount,
-      sizeOnDisk
+      episodeFileCount = 0,
+      sizeOnDisk = 0
     } = statistics;
 
     const deleteFiles = this.state.deleteFiles;
@@ -108,16 +108,20 @@ class DeleteSeriesModalContent extends Component {
           </FormGroup>
 
           {
-            deleteFiles &&
+            deleteFiles ?
               <div className={styles.deleteFilesMessage}>
                 <div><InlineMarkdown data={translate('DeleteSeriesFolderConfirmation', { path })} blockClassName={styles.folderPath} /></div>
-                {
-                  !!episodeFileCount &&
-                    <div>{translate('DeleteSeriesFolderEpisodeCount', { episodeFileCount, size: formatBytes(sizeOnDisk) })}</div>
-                }
-              </div>
-          }
 
+                {
+                  episodeFileCount ?
+                    <div className={styles.deleteCount}>
+                      {translate('DeleteSeriesFolderEpisodeCount', { episodeFileCount, size: formatBytes(sizeOnDisk) })}
+                    </div> :
+                    null
+                }
+              </div> :
+              null
+          }
         </ModalBody>
 
         <ModalFooter>

frontend/src/Series/Details/SeasonProgressLabel.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import Label from 'Components/Label';
+import { kinds, sizes } from 'Helpers/Props';
+import createSeriesQueueItemsDetailsSelector, {
+  SeriesQueueDetails,
+} from 'Series/Index/createSeriesQueueDetailsSelector';
+
+function getEpisodeCountKind(
+  monitored: boolean,
+  episodeFileCount: number,
+  episodeCount: number,
+  isDownloading: boolean
+) {
+  if (isDownloading) {
+    return kinds.PURPLE;
+  }
+
+  if (episodeFileCount === episodeCount && episodeCount > 0) {
+    return kinds.SUCCESS;
+  }
+
+  if (!monitored) {
+    return kinds.WARNING;
+  }
+
+  return kinds.DANGER;
+}
+
+interface SeasonProgressLabelProps {
+  seriesId: number;
+  seasonNumber: number;
+  monitored: boolean;
+  episodeCount: number;
+  episodeFileCount: number;
+}
+
+function SeasonProgressLabel({
+  seriesId,
+  seasonNumber,
+  monitored,
+  episodeCount,
+  episodeFileCount,
+}: SeasonProgressLabelProps) {
+  const queueDetails: SeriesQueueDetails = useSelector(
+    createSeriesQueueItemsDetailsSelector(seriesId, seasonNumber)
+  );
+
+  const newDownloads = queueDetails.count - queueDetails.episodesWithFiles;
+  const text = newDownloads
+    ? `${episodeFileCount} + ${newDownloads} / ${episodeCount}`
+    : `${episodeFileCount} / ${episodeCount}`;
+
+  return (
+    <Label
+      kind={getEpisodeCountKind(
+        monitored,
+        episodeFileCount,
+        episodeCount,
+        queueDetails.count > 0
+      )}
+      size={sizes.LARGE}
+    >
+      <span>{text}</span>
+    </Label>
+  );
+}
+
+export default SeasonProgressLabel;

frontend/src/Series/Details/SeriesDetails.js

@@ -175,6 +175,7 @@ class SeriesDetails extends Component {
       tvdbId,
       tvMazeId,
       imdbId,
+      tmdbId,
       title,
       runtime,
       ratings,
@@ -411,10 +412,12 @@ class SeriesDetails extends Component {
                       ratings.value ?
                         <HeartRating
                           rating={ratings.value}
+                          votes={ratings.votes}
                           iconSize={20}
                         /> :
                         null
                     }
+
                     <SeriesGenres genres={genres} />
 
                     <span>
@@ -566,6 +569,7 @@ class SeriesDetails extends Component {
                         tvdbId={tvdbId}
                         tvMazeId={tvMazeId}
                         imdbId={imdbId}
+                        tmdbId={tmdbId}
                       />
                     }
                     kind={kinds.INVERSE}
@@ -719,6 +723,7 @@ SeriesDetails.propTypes = {
   tvdbId: PropTypes.number.isRequired,
   tvMazeId: PropTypes.number,
   imdbId: PropTypes.string,
+  tmdbId: PropTypes.number,
   title: PropTypes.string.isRequired,
   runtime: PropTypes.number.isRequired,
   ratings: PropTypes.object.isRequired,

frontend/src/Series/Details/SeriesDetailsLinks.js

@@ -9,7 +9,8 @@ function SeriesDetailsLinks(props) {
   const {
     tvdbId,
     tvMazeId,
-    imdbId
+    imdbId,
+    tmdbId
   } = props;
 
   return (
@@ -71,6 +72,22 @@ function SeriesDetailsLinks(props) {
             </Label>
           </Link>
       }
+
+      {
+        !!tmdbId &&
+          <Link
+            className={styles.link}
+            to={`https://www.themoviedb.org/tv/${tmdbId}`}
+          >
+            <Label
+              className={styles.linkLabel}
+              kind={kinds.INFO}
+              size={sizes.LARGE}
+            >
+              TMDB
+            </Label>
+          </Link>
+      }
     </div>
   );
 }
@@ -78,7 +95,8 @@ function SeriesDetailsLinks(props) {
 SeriesDetailsLinks.propTypes = {
   tvdbId: PropTypes.number.isRequired,
   tvMazeId: PropTypes.number,
-  imdbId: PropTypes.string
+  imdbId: PropTypes.string,
+  tmdbId: PropTypes.number
 };
 
 export default SeriesDetailsLinks;

frontend/src/Series/Details/SeriesDetailsSeason.js

@@ -2,7 +2,6 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Icon from 'Components/Icon';
-import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
@@ -15,7 +14,7 @@ import SpinnerIcon from 'Components/SpinnerIcon';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import Popover from 'Components/Tooltip/Popover';
-import { align, icons, kinds, sizes, sortDirections, tooltipPositions } from 'Helpers/Props';
+import { align, icons, sortDirections, tooltipPositions } from 'Helpers/Props';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector';
 import SeriesHistoryModal from 'Series/History/SeriesHistoryModal';
@@ -27,6 +26,7 @@ import translate from 'Utilities/String/translate';
 import getToggledRange from 'Utilities/Table/getToggledRange';
 import EpisodeRowConnector from './EpisodeRowConnector';
 import SeasonInfo from './SeasonInfo';
+import SeasonProgressLabel from './SeasonProgressLabel';
 import styles from './SeriesDetailsSeason.css';
 
 function getSeasonStatistics(episodes) {
@@ -64,18 +64,6 @@ function getSeasonStatistics(episodes) {
   };
 }
 
-function getEpisodeCountKind(monitored, episodeFileCount, episodeCount) {
-  if (episodeFileCount === episodeCount && episodeCount > 0) {
-    return kinds.SUCCESS;
-  }
-
-  if (!monitored) {
-    return kinds.WARNING;
-  }
-
-  return kinds.DANGER;
-}
-
 class SeriesDetailsSeason extends Component {
 
   //
@@ -265,12 +253,13 @@ class SeriesDetailsSeason extends Component {
               className={styles.episodeCountTooltip}
               canFlip={true}
               anchor={
-                <Label
-                  kind={getEpisodeCountKind(monitored, episodeFileCount, episodeCount)}
-                  size={sizes.LARGE}
-                >
-                  <span>{episodeFileCount} / {episodeCount}</span>
-                </Label>
+                <SeasonProgressLabel
+                  seriesId={seriesId}
+                  seasonNumber={seasonNumber}
+                  monitored={monitored}
+                  episodeCount={episodeCount}
+                  episodeFileCount={episodeFileCount}
+                />
               }
               title={translate('SeasonInformation')}
               body={

frontend/src/Series/Details/SeriesTagsConnector.js

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
 import SeriesTags from './SeriesTags';
 
 function createMapStateToProps() {
@@ -12,8 +13,8 @@ function createMapStateToProps() {
       const tags = series.tags
         .map((tagId) => tagList.find((tag) => tag.id === tagId))
         .filter((tag) => !!tag)
-        .map((tag) => tag.label)
-        .sort((a, b) => a.localeCompare(b));
+        .sort(sortByProp('label'))
+        .map((tag) => tag.label);
 
       return {
         tags

frontend/src/Series/History/SeriesHistoryModal.js

@@ -14,7 +14,7 @@ function SeriesHistoryModal(props) {
   return (
     <Modal
       isOpen={isOpen}
-      size={sizes.EXTRA_LARGE}
+      size={sizes.EXTRA_EXTRA_LARGE}
       onModalClose={onModalClose}
     >
       <SeriesHistoryModalContentConnector

frontend/src/Series/History/SeriesHistoryRow.js

@@ -86,6 +86,10 @@ class SeriesHistoryRow extends Component {
 
     const EpisodeComponent = fullSeries ? SeasonEpisodeNumber : EpisodeNumber;
 
+    if (!series || !episode) {
+      return null;
+    }
+
     return (
       <TableRow>
         <HistoryEventTypeCell
@@ -131,6 +135,8 @@ class SeriesHistoryRow extends Component {
 
         <RelativeDateCellConnector
           date={date}
+          includeSeconds={true}
+          includeTime={true}
         />
 
         <TableRowCell className={styles.actions}>

frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModalContent.tsx

@@ -55,6 +55,7 @@ function SeriesIndexOverviewOptionsModalContent(
     showSeasonCount,
     showPath,
     showSizeOnDisk,
+    showTags,
     showSearchAction,
   } = useSelector(selectOverviewOptions);
 
@@ -185,6 +186,17 @@ function SeriesIndexOverviewOptionsModalContent(
             />
           </FormGroup>
 
+          <FormGroup>
+            <FormLabel>{translate('ShowTags')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showTags"
+              value={showTags}
+              onChange={onOverviewOptionChange}
+            />
+          </FormGroup>
+
           <FormGroup>
             <FormLabel>{translate('ShowSearch')}</FormLabel>
 

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

@@ -73,14 +73,26 @@ $hoverScale: 1.05;
   flex: 1 0 auto;
 }
 
+.overviewContainer {
+  display: flex;
+  justify-content: space-between;
+  flex: 0 1 1000px;
+  flex-direction: column;
+}
+
 .overview {
   composes: link;
 
-  flex: 0 1 1000px;
   overflow: hidden;
   min-height: 0;
 }
 
+.tags {
+  display: flex;
+  justify-content: space-around;
+  overflow: hidden;
+}
+
 @media only screen and (max-width: $breakpointSmall) {
   .overview {
     display: none;

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

@@ -8,8 +8,10 @@ interface CssExports {
   'info': string;
   'link': string;
   'overview': string;
+  'overviewContainer': string;
   'poster': string;
   'posterContainer': string;
+  'tags': string;
   'title': string;
   'titleRow': string;
 }

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

@@ -5,6 +5,7 @@ import { REFRESH_SERIES, SERIES_SEARCH } from 'Commands/commandNames';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import TagListConnector from 'Components/TagListConnector';
 import { icons } from 'Helpers/Props';
 import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
 import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
@@ -70,6 +71,7 @@ function SeriesIndexOverview(props: SeriesIndexOverviewProps) {
     overview,
     statistics = {} as Statistics,
     images,
+    tags,
     network,
   } = series;
 
@@ -205,15 +207,22 @@ function SeriesIndexOverview(props: SeriesIndexOverviewProps) {
           </div>
 
           <div className={styles.details}>
-            <Link className={styles.overview} to={link}>
-              <TextTruncate
-                line={Math.floor(
-                  overviewHeight / (defaultFontSize * lineHeight)
-                )}
-                text={overview}
-              />
-            </Link>
+            <div className={styles.overviewContainer}>
+              <Link className={styles.overview} to={link}>
+                <TextTruncate
+                  line={Math.floor(
+                    overviewHeight / (defaultFontSize * lineHeight)
+                  )}
+                  text={overview}
+                />
+              </Link>
 
+              {overviewOptions.showTags ? (
+                <div className={styles.tags}>
+                  <TagListConnector tags={tags} />
+                </div>
+              ) : null}
+            </div>
             <SeriesIndexOverviewInfo
               height={overviewHeight}
               monitored={monitored}

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

@@ -5,7 +5,7 @@ import { icons } from 'Helpers/Props';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import dimensions from 'Styles/Variables/dimensions';
 import QualityProfile from 'typings/QualityProfile';
-import { UiSettings } from 'typings/UiSettings';
+import UiSettings from 'typings/Settings/UiSettings';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';
@@ -138,7 +138,10 @@ function getInfoRowProps(
       }),
       iconName: icons.CALENDAR,
       label:
-        getRelativeDate(previousAiring, shortDateFormat, showRelativeDates, {
+        getRelativeDate({
+          date: previousAiring,
+          shortDateFormat,
+          showRelativeDates,
           timeFormat,
           timeForToday: true,
         }) ?? '',
@@ -156,7 +159,10 @@ function getInfoRowProps(
       }),
       iconName: icons.ADD,
       label:
-        getRelativeDate(added, shortDateFormat, showRelativeDates, {
+        getRelativeDate({
+          date: added,
+          shortDateFormat,
+          showRelativeDates,
           timeFormat,
           timeForToday: true,
         }) ?? '',
@@ -232,15 +238,13 @@ function SeriesIndexOverviewInfo(props: SeriesIndexOverviewInfoProps) {
         <SeriesIndexOverviewInfoRow
           title={formatDateTime(nextAiring, longDateFormat, timeFormat)}
           iconName={icons.SCHEDULED}
-          label={getRelativeDate(
-            nextAiring,
+          label={getRelativeDate({
+            date: nextAiring,
             shortDateFormat,
             showRelativeDates,
-            {
-              timeFormat,
-              timeForToday: true,
-            }
-          )}
+            timeFormat,
+            timeForToday: true,
+          })}
         />
       )}
 

frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModalContent.tsx

@@ -52,6 +52,7 @@ function SeriesIndexPosterOptionsModalContent(
     showTitle,
     showMonitored,
     showQualityProfile,
+    showTags,
     showSearchAction,
   } = posterOptions;
 
@@ -130,6 +131,18 @@ function SeriesIndexPosterOptionsModalContent(
             />
           </FormGroup>
 
+          <FormGroup>
+            <FormLabel>{translate('ShowTags')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showTags"
+              value={showTags}
+              helpText={translate('ShowTagsHelpText')}
+              onChange={onPosterOptionChange}
+            />
+          </FormGroup>
+
           <FormGroup>
             <FormLabel>{translate('ShowSearch')}</FormLabel>
 

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

@@ -57,6 +57,20 @@ $hoverScale: 1.05;
   font-size: $smallFontSize;
 }
 
+.tags {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 0 3px;
+  height: 21px;
+  background-color: var(--seriesBackgroundColor);
+}
+
+.tagsList {
+  display: flex;
+  overflow: hidden;
+}
+
 .ended {
   position: absolute;
   top: 0;

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

@@ -10,6 +10,8 @@ interface CssExports {
   'nextAiring': string;
   'overlayTitle': string;
   'posterContainer': string;
+  'tags': string;
+  'tagsList': string;
   'title': string;
 }
 export const cssExports: CssExports;

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

@@ -5,6 +5,7 @@ import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import TagListConnector from 'Components/TagListConnector';
 import { icons } from 'Helpers/Props';
 import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
 import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
@@ -41,6 +42,7 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
     showTitle,
     showMonitored,
     showQualityProfile,
+    showTags,
     showSearchAction,
   } = useSelector(selectPosterOptions);
 
@@ -60,6 +62,7 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
     added,
     statistics = {} as Statistics,
     images,
+    tags,
   } = series;
 
   const {
@@ -208,6 +211,14 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
         </div>
       ) : null}
 
+      {showTags && tags.length ? (
+        <div className={styles.tags}>
+          <div className={styles.tagsList}>
+            <TagListConnector tags={tags} />
+          </div>
+        </div>
+      ) : null}
+
       {nextAiring ? (
         <div
           className={styles.nextAiring}
@@ -217,7 +228,10 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
             timeFormat
           )}`}
         >
-          {getRelativeDate(nextAiring, shortDateFormat, showRelativeDates, {
+          {getRelativeDate({
+            date: nextAiring,
+            shortDateFormat,
+            showRelativeDates,
             timeFormat,
             timeForToday: true,
           })}

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

@@ -80,7 +80,10 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
           timeFormat
         )}`}
       >
-        {getRelativeDate(previousAiring, shortDateFormat, showRelativeDates, {
+        {getRelativeDate({
+          date: previousAiring,
+          shortDateFormat,
+          showRelativeDates,
           timeFormat,
           timeForToday: true,
         })}
@@ -89,15 +92,13 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
   }
 
   if (sortKey === 'added' && added) {
-    const addedDate = getRelativeDate(
-      added,
+    const addedDate = getRelativeDate({
+      date: added,
       shortDateFormat,
       showRelativeDates,
-      {
-        timeFormat,
-        timeForToday: false,
-      }
-    );
+      timeFormat,
+      timeForToday: false,
+    });
 
     return (
       <div

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

@@ -141,6 +141,7 @@ export default function SeriesIndexPosters(props: SeriesIndexPostersProps) {
       showTitle,
       showMonitored,
       showQualityProfile,
+      showTags,
     } = posterOptions;
 
     const nextAiringHeight = 19;
@@ -164,6 +165,10 @@ export default function SeriesIndexPosters(props: SeriesIndexPostersProps) {
       heights.push(19);
     }
 
+    if (showTags) {
+      heights.push(21);
+    }
+
     switch (sortKey) {
       case 'network':
       case 'seasons':

frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css

@@ -10,4 +10,15 @@
 .path {
   margin-left: 5px;
   color: var(--dangerColor);
+  font-weight: bold;
+}
+
+.statistics {
+  margin-left: 5px;
+  color: var(--warningColor);
+}
+
+.deleteFilesMessage {
+  margin-top: 20px;
+  color: var(--warningColor);
 }

frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css.d.ts

@@ -1,9 +1,11 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'deleteFilesMessage': string;
   'message': string;
   'path': string;
   'pathContainer': string;
+  'statistics': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.tsx

@@ -16,6 +16,7 @@ import Series from 'Series/Series';
 import { bulkDeleteSeries, setDeleteOption } from 'Store/Actions/seriesActions';
 import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
 import { CheckInputChanged } from 'typings/inputs';
+import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
 import styles from './DeleteSeriesModalContent.css';
 
@@ -85,6 +86,23 @@ function DeleteSeriesModalContent(props: DeleteSeriesModalContentProps) {
     onModalClose,
   ]);
 
+  const { totalEpisodeFileCount, totalSizeOnDisk } = useMemo(() => {
+    return series.reduce(
+      (acc, { statistics = {} }) => {
+        const { episodeFileCount = 0, sizeOnDisk = 0 } = statistics;
+
+        acc.totalEpisodeFileCount += episodeFileCount;
+        acc.totalSizeOnDisk += sizeOnDisk;
+
+        return acc;
+      },
+      {
+        totalEpisodeFileCount: 0,
+        totalSizeOnDisk: 0,
+      }
+    );
+  }, [series]);
+
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>{translate('DeleteSelectedSeries')}</ModalHeader>
@@ -136,20 +154,44 @@ function DeleteSeriesModalContent(props: DeleteSeriesModalContentProps) {
         </div>
 
         <ul>
-          {series.map((s) => {
+          {series.map(({ title, path, statistics = {} }) => {
+            const { episodeFileCount = 0, sizeOnDisk = 0 } = statistics;
+
             return (
-              <li key={s.title}>
-                <span>{s.title}</span>
+              <li key={title}>
+                <span>{title}</span>
 
                 {deleteFiles && (
-                  <span className={styles.pathContainer}>
-                    -<span className={styles.path}>{s.path}</span>
+                  <span>
+                    <span className={styles.pathContainer}>
+                      -<span className={styles.path}>{path}</span>
+                    </span>
+
+                    {!!episodeFileCount && (
+                      <span className={styles.statistics}>
+                        (
+                        {translate('DeleteSeriesFolderEpisodeCount', {
+                          episodeFileCount,
+                          size: formatBytes(sizeOnDisk),
+                        })}
+                        )
+                      </span>
+                    )}
                   </span>
                 )}
               </li>
             );
           })}
         </ul>
+
+        {deleteFiles && !!totalEpisodeFileCount ? (
+          <div className={styles.deleteFilesMessage}>
+            {translate('DeleteSeriesFolderEpisodeCount', {
+              episodeFileCount: totalEpisodeFileCount,
+              size: formatBytes(totalSizeOnDisk),
+            })}
+          </div>
+        ) : null}
       </ModalBody>
 
       <ModalFooter>

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

@@ -401,7 +401,7 @@ function SeriesIndexRow(props: SeriesIndexRowProps) {
         if (name === 'ratings') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>
-              <HeartRating rating={ratings.value} />
+              <HeartRating rating={ratings.value} votes={ratings.votes} />
             </VirtualTableRowCell>
           );
         }

frontend/src/Series/Series.ts

@@ -70,6 +70,7 @@ interface Series extends ModelBase {
   tvdbId: number;
   tvMazeId: number;
   tvRageId: number;
+  tmdbId: number;
   useSceneNumbering: boolean;
   year: number;
   isSaving?: boolean;

frontend/src/Settings/CustomFormats/CustomFormats/CustomFormatsConnector.js

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

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.css

@@ -25,3 +25,8 @@
   border-radius: 4px;
   background-color: var(--cardCenterBackgroundColor);
 }
+
+.customFormats {
+  display: flex;
+  flex-wrap: wrap;
+}

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.css.d.ts

@@ -3,6 +3,7 @@
 interface CssExports {
   'addSpecification': string;
   'center': string;
+  'customFormats': string;
   'deleteButton': string;
   'rightButtons': string;
 }

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

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

frontend/src/Settings/General/UpdateSettings.js

@@ -17,7 +17,6 @@ function UpdateSettings(props) {
   const {
     advancedSettings,
     settings,
-    isWindows,
     packageUpdateMechanism,
     onInputChange
   } = props;
@@ -68,63 +67,59 @@ function UpdateSettings(props) {
         />
       </FormGroup>
 
-      {
-        isWindows ?
-          null :
-          <div>
-            <FormGroup
-              advancedSettings={advancedSettings}
-              isAdvanced={true}
-              size={sizes.MEDIUM}
-            >
-              <FormLabel>{translate('Automatic')}</FormLabel>
+      <div>
+        <FormGroup
+          advancedSettings={advancedSettings}
+          isAdvanced={true}
+          size={sizes.MEDIUM}
+        >
+          <FormLabel>{translate('Automatic')}</FormLabel>
 
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="updateAutomatically"
-                helpText={translate('UpdateAutomaticallyHelpText')}
-                helpTextWarning={updateMechanism.value === 'docker' ? translate('AutomaticUpdatesDisabledDocker') : undefined}
-                onChange={onInputChange}
-                {...updateAutomatically}
-              />
-            </FormGroup>
+          <FormInputGroup
+            type={inputTypes.CHECK}
+            name="updateAutomatically"
+            helpText={translate('UpdateAutomaticallyHelpText')}
+            helpTextWarning={updateMechanism.value === 'docker' ? translate('AutomaticUpdatesDisabledDocker') : undefined}
+            onChange={onInputChange}
+            {...updateAutomatically}
+          />
+        </FormGroup>
 
+        <FormGroup
+          advancedSettings={advancedSettings}
+          isAdvanced={true}
+        >
+          <FormLabel>{translate('Mechanism')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="updateMechanism"
+            values={updateOptions}
+            helpText={translate('UpdateMechanismHelpText')}
+            helpLink="https://wiki.servarr.com/sonarr/settings#updates"
+            onChange={onInputChange}
+            {...updateMechanism}
+          />
+        </FormGroup>
+
+        {
+          updateMechanism.value === 'script' &&
             <FormGroup
               advancedSettings={advancedSettings}
               isAdvanced={true}
             >
-              <FormLabel>{translate('Mechanism')}</FormLabel>
+              <FormLabel>{translate('ScriptPath')}</FormLabel>
 
               <FormInputGroup
-                type={inputTypes.SELECT}
-                name="updateMechanism"
-                values={updateOptions}
-                helpText={translate('UpdateMechanismHelpText')}
-                helpLink="https://wiki.servarr.com/sonarr/settings#updates"
+                type={inputTypes.TEXT}
+                name="updateScriptPath"
+                helpText={translate('UpdateScriptPathHelpText')}
                 onChange={onInputChange}
-                {...updateMechanism}
+                {...updateScriptPath}
               />
             </FormGroup>
-
-            {
-              updateMechanism.value === 'script' &&
-                <FormGroup
-                  advancedSettings={advancedSettings}
-                  isAdvanced={true}
-                >
-                  <FormLabel>{translate('ScriptPath')}</FormLabel>
-
-                  <FormInputGroup
-                    type={inputTypes.TEXT}
-                    name="updateScriptPath"
-                    helpText={translate('UpdateScriptPathHelpText')}
-                    onChange={onInputChange}
-                    {...updateScriptPath}
-                  />
-                </FormGroup>
-            }
-          </div>
-      }
+        }
+      </div>
     </FieldSet>
   );
 }

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

@@ -5,12 +5,12 @@ import { createSelector } from 'reselect';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import { deleteImportList, fetchImportLists } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import ImportLists from './ImportLists';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.importLists', sortByName),
+    createSortedSectionSelector('settings.importLists', sortByProp('name')),
     (importLists) => importLists
   );
 }

frontend/src/Settings/Indexers/Indexers/IndexersConnector.js

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

frontend/src/Settings/MediaManagement/Naming/Naming.js

@@ -138,7 +138,8 @@ class Naming extends Component {
       { key: 1, value: translate('ReplaceWithDash') },
       { key: 2, value: translate('ReplaceWithSpaceDash') },
       { key: 3, value: translate('ReplaceWithSpaceDashSpace') },
-      { key: 4, value: translate('SmartReplace'), hint: translate('SmartReplaceHint') }
+      { key: 4, value: translate('SmartReplace'), hint: translate('SmartReplaceHint') },
+      { key: 5, value: translate('Custom'), hint: translate('CustomColonReplacementFormatHint') }
     ];
 
     const standardEpisodeFormatHelpTexts = [];
@@ -262,6 +263,22 @@ class Naming extends Component {
                   null
               }
 
+              {
+                replaceIllegalCharacters && settings.colonReplacementFormat.value === 5 ?
+                  <FormGroup>
+                    <FormLabel>{translate('ColonReplacement')}</FormLabel>
+
+                    <FormInputGroup
+                      type={inputTypes.TEXT}
+                      name="customColonReplacementFormat"
+                      helpText={translate('CustomColonReplacementFormatHelpText')}
+                      onChange={onInputChange}
+                      {...settings.customColonReplacementFormat}
+                    />
+                  </FormGroup> :
+                  null
+              }
+
               {
                 renameEpisodes &&
                   <div>

frontend/src/Settings/MediaManagement/Naming/NamingModal.js

@@ -99,6 +99,7 @@ const seriesTokens = [
 const seriesIdTokens = [
   { token: '{ImdbId}', example: 'tt12345' },
   { token: '{TvdbId}', example: '12345' },
+  { token: '{TmdbId}', example: '11223' },
   { token: '{TvMazeId}', example: '54321' }
 ];
 

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

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

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

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import {
   saveNotification,
-  setNotificationFieldValue,
+  setNotificationFieldValues,
   setNotificationValue,
   testNotification,
   toggleAdvancedSettings
@@ -27,7 +27,7 @@ function createMapStateToProps() {
 
 const mapDispatchToProps = {
   setNotificationValue,
-  setNotificationFieldValue,
+  setNotificationFieldValues,
   saveNotification,
   testNotification,
   toggleAdvancedSettings
@@ -51,8 +51,8 @@ class EditNotificationModalContentConnector extends Component {
     this.props.setNotificationValue({ name, value });
   };
 
-  onFieldChange = ({ name, value }) => {
-    this.props.setNotificationFieldValue({ name, value });
+  onFieldChange = ({ name, value, additionalProperties = {} }) => {
+    this.props.setNotificationFieldValues({ properties: { ...additionalProperties, [name]: value } });
   };
 
   onSavePress = () => {
@@ -91,7 +91,7 @@ EditNotificationModalContentConnector.propTypes = {
   saveError: PropTypes.object,
   item: PropTypes.object.isRequired,
   setNotificationValue: PropTypes.func.isRequired,
-  setNotificationFieldValue: PropTypes.func.isRequired,
+  setNotificationFieldValues: PropTypes.func.isRequired,
   saveNotification: PropTypes.func.isRequired,
   testNotification: PropTypes.func.isRequired,
   toggleAdvancedSettings: PropTypes.func.isRequired,

frontend/src/Settings/Notifications/Notifications/Notification.js

@@ -59,6 +59,7 @@ class Notification extends Component {
       onGrab,
       onDownload,
       onUpgrade,
+      onImportComplete,
       onRename,
       onSeriesAdd,
       onSeriesDelete,
@@ -71,6 +72,7 @@ class Notification extends Component {
       supportsOnGrab,
       supportsOnDownload,
       supportsOnUpgrade,
+      supportsOnImportComplete,
       supportsOnRename,
       supportsOnSeriesAdd,
       supportsOnSeriesDelete,
@@ -105,7 +107,7 @@ class Notification extends Component {
         {
           supportsOnDownload && onDownload ?
             <Label kind={kinds.SUCCESS}>
-              {translate('OnImport')}
+              {translate('OnFileImport')}
             </Label> :
             null
         }
@@ -113,7 +115,15 @@ class Notification extends Component {
         {
           supportsOnUpgrade && onDownload && onUpgrade ?
             <Label kind={kinds.SUCCESS}>
-              {translate('OnUpgrade')}
+              {translate('OnFileUpgrade')}
+            </Label> :
+            null
+        }
+
+        {
+          supportsOnImportComplete && onImportComplete ?
+            <Label kind={kinds.SUCCESS}>
+              {translate('OnImportComplete')}
             </Label> :
             null
         }
@@ -191,7 +201,7 @@ class Notification extends Component {
         }
 
         {
-          !onGrab && !onDownload && !onRename && !onHealthIssue && !onHealthRestored && !onApplicationUpdate && !onSeriesAdd && !onSeriesDelete && !onEpisodeFileDelete && !onManualInteractionRequired ?
+          !onGrab && !onDownload && !onRename && !onImportComplete && !onHealthIssue && !onHealthRestored && !onApplicationUpdate && !onSeriesAdd && !onSeriesDelete && !onEpisodeFileDelete && !onManualInteractionRequired ?
             <Label
               kind={kinds.DISABLED}
               outline={true}
@@ -233,6 +243,7 @@ Notification.propTypes = {
   onGrab: PropTypes.bool.isRequired,
   onDownload: PropTypes.bool.isRequired,
   onUpgrade: PropTypes.bool.isRequired,
+  onImportComplete: PropTypes.bool.isRequired,
   onRename: PropTypes.bool.isRequired,
   onSeriesAdd: PropTypes.bool.isRequired,
   onSeriesDelete: PropTypes.bool.isRequired,
@@ -244,6 +255,7 @@ Notification.propTypes = {
   onManualInteractionRequired: PropTypes.bool.isRequired,
   supportsOnGrab: PropTypes.bool.isRequired,
   supportsOnDownload: PropTypes.bool.isRequired,
+  supportsOnImportComplete: PropTypes.bool.isRequired,
   supportsOnSeriesAdd: PropTypes.bool.isRequired,
   supportsOnSeriesDelete: PropTypes.bool.isRequired,
   supportsOnEpisodeFileDelete: PropTypes.bool.isRequired,

frontend/src/Settings/Notifications/Notifications/NotificationEventItems.js

@@ -18,6 +18,7 @@ function NotificationEventItems(props) {
     onGrab,
     onDownload,
     onUpgrade,
+    onImportComplete,
     onRename,
     onSeriesAdd,
     onSeriesDelete,
@@ -30,6 +31,7 @@ function NotificationEventItems(props) {
     supportsOnGrab,
     supportsOnDownload,
     supportsOnUpgrade,
+    supportsOnImportComplete,
     supportsOnRename,
     supportsOnSeriesAdd,
     supportsOnSeriesDelete,
@@ -66,7 +68,7 @@ function NotificationEventItems(props) {
             <FormInputGroup
               type={inputTypes.CHECK}
               name="onDownload"
-              helpText={translate('OnImport')}
+              helpText={translate('OnFileImport')}
               isDisabled={!supportsOnDownload.value}
               {...onDownload}
               onChange={onInputChange}
@@ -79,7 +81,7 @@ function NotificationEventItems(props) {
                 <FormInputGroup
                   type={inputTypes.CHECK}
                   name="onUpgrade"
-                  helpText={translate('OnUpgrade')}
+                  helpText={translate('OnFileUpgrade')}
                   isDisabled={!supportsOnUpgrade.value}
                   {...onUpgrade}
                   onChange={onInputChange}
@@ -87,6 +89,17 @@ function NotificationEventItems(props) {
               </div>
           }
 
+          <div>
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="onImportComplete"
+              helpText={translate('OnImportComplete')}
+              isDisabled={!supportsOnImportComplete.value}
+              {...onImportComplete}
+              onChange={onInputChange}
+            />
+          </div>
+
           <div>
             <FormInputGroup
               type={inputTypes.CHECK}

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

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