Revert "Fixed: Ensure translations are fetched before loading app"

This reverts commit c61cca7952.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -76,7 +76,7 @@ body:
 - type: checkboxes
   attributes:
     label: Trace Logs have been provided as applicable. Reports may be closed if the required logs are not provided.
-    description: Trace logs are generally required for all bug reports
+    description: Trace logs are generally required for all bug reports and contain `trace`. Info logs are invalid for bug reports and do not contain `debug` nor `trace`
     options:
-    - label: I have followed the steps in the wiki link above and provided the required trace logs that are relevant and show this issue.
+    - label: I have read and followed the steps in the wiki link above and provided the required trace logs - the logs contain `trace` - that are relevant and show this issue.
       required: true

azure-pipelines.yml

@@ -9,7 +9,7 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '4.6.0'
+  majorVersion: '4.7.1'
   minorVersion: $[counter('minorVersion', 2000)]
   radarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
@@ -363,7 +363,7 @@ stages:
       - bash: |
           echo "Uploading source maps to sentry"
           curl -sL https://sentry.io/get-cli/ | bash
-          RELEASENAME="${RADARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
+          RELEASENAME="Radarr@${RADARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
           sentry-cli releases new --finalize -p radarr -p radarr-ui -p radarr-update "${RELEASENAME}"
           sentry-cli releases -p radarr-ui files "${RELEASENAME}" upload-sourcemaps _output/UI/ --rewrite
           sentry-cli releases set-commits --auto "${RELEASENAME}"

frontend/src/Activity/Blocklist/Blocklist.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import PageContent from 'Components/Page/PageContent';
@@ -156,16 +157,16 @@ class Blocklist extends Component {
 
           {
             !isFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadBlocklist')}
-              </div>
+              </Alert>
           }
 
           {
             isPopulated && !error && !items.length &&
-              <div>
-                {translate('NoHistory')}
-              </div>
+              <Alert kind={kinds.INFO}>
+                {translate('NoHistoryBlocklist')}
+              </Alert>
           }
 
           {
@@ -209,7 +210,7 @@ class Blocklist extends Component {
           isOpen={isConfirmRemoveModalOpen}
           kind={kinds.DANGER}
           title={translate('RemoveSelected')}
-          message={translate('AreYouSureYouWantToRemoveTheSelectedItemsFromBlocklist')}
+          message={translate('RemoveSelectedItemBlocklistMessageText')}
           confirmLabel={translate('RemoveSelected')}
           onConfirm={this.onRemoveSelectedConfirmed}
           onCancel={this.onConfirmRemoveModalClose}

frontend/src/Activity/History/History.js

@@ -1,5 +1,6 @@
 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 PageContent from 'Components/Page/PageContent';
@@ -11,7 +12,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import HistoryRowConnector from './HistoryRowConnector';
 
@@ -83,9 +84,9 @@ class History extends Component {
 
           {
             !isFetchingAny && hasError &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadHistory')}
-              </div>
+              </Alert>
           }
 
           {
@@ -93,9 +94,9 @@ class History extends Component {
             // wait for the episodes to populate because they are never coming.
 
             isPopulated && !hasError && !items.length &&
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('NoHistory')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/Activity/History/HistoryRow.js

@@ -4,12 +4,13 @@ import IconButton from 'Components/Link/IconButton';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
-import { icons } from 'Helpers/Props';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, tooltipPositions } from 'Helpers/Props';
 import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
-import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
+import formatPreferredWordScore from 'Utilities/Number/formatPreferredWordScore';
 import HistoryDetailsModal from './Details/HistoryDetailsModal';
 import HistoryEventTypeCell from './HistoryEventTypeCell';
 import styles from './HistoryRow.css';
@@ -176,7 +177,14 @@ class HistoryRow extends Component {
                   key={name}
                   className={styles.customFormatScore}
                 >
-                  {formatCustomFormatScore(customFormatScore)}
+                  <Tooltip
+                    anchor={formatPreferredWordScore(
+                      customFormatScore,
+                      customFormats.length
+                    )}
+                    tooltip={<MovieFormats formats={customFormats} />}
+                    position={tooltipPositions.BOTTOM}
+                  />
                 </TableRowCell>
               );
             }
@@ -257,4 +265,8 @@ HistoryRow.propTypes = {
   onMarkAsFailedPress: PropTypes.func.isRequired
 };
 
+HistoryRow.defaultProps = {
+  customFormats: []
+};
+
 export default HistoryRow;

frontend/src/Activity/Queue/Queue.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -12,7 +13,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import getRemovedItems from 'Utilities/Object/getRemovedItems';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import translate from 'Utilities/String/translate';
@@ -231,17 +232,17 @@ class Queue extends Component {
 
           {
             !isRefreshing && hasError ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('FailedToLoadQueue')}
-              </div> :
+              </Alert> :
               null
           }
 
           {
             isAllPopulated && !hasError && !items.length ?
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('QueueIsEmpty')}
-              </div> :
+              </Alert> :
               null
           }
 

frontend/src/Activity/Queue/QueueRow.css

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

frontend/src/Activity/Queue/QueueRow.css.d.ts

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

frontend/src/Activity/Queue/QueueRow.js

@@ -8,13 +8,15 @@ import ProgressBar from 'Components/ProgressBar';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import TableRow from 'Components/Table/TableRow';
-import { icons, kinds } from 'Helpers/Props';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
 import formatBytes from 'Utilities/Number/formatBytes';
+import formatPreferredWordScore from 'Utilities/Number/formatPreferredWordScore';
 import translate from 'Utilities/String/translate';
 import QueueStatusCell from './QueueStatusCell';
 import RemoveQueueItemModal from './RemoveQueueItemModal';
@@ -88,6 +90,7 @@ class QueueRow extends Component {
       movie,
       quality,
       customFormats,
+      customFormatScore,
       languages,
       protocol,
       indexer,
@@ -201,6 +204,24 @@ class QueueRow extends Component {
               );
             }
 
+            if (name === 'customFormatScore') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.customFormatScore}
+                >
+                  <Tooltip
+                    anchor={formatPreferredWordScore(
+                      customFormatScore,
+                      customFormats.length
+                    )}
+                    tooltip={<MovieFormats formats={customFormats} />}
+                    position={tooltipPositions.BOTTOM}
+                  />
+                </TableRowCell>
+              );
+            }
+
             if (name === 'protocol') {
               return (
                 <TableRowCell key={name}>
@@ -365,6 +386,7 @@ QueueRow.propTypes = {
   movie: PropTypes.object,
   quality: PropTypes.object.isRequired,
   customFormats: PropTypes.arrayOf(PropTypes.object),
+  customFormatScore: PropTypes.number.isRequired,
   languages: PropTypes.arrayOf(PropTypes.object).isRequired,
   protocol: PropTypes.string.isRequired,
   indexer: PropTypes.string,
@@ -390,6 +412,7 @@ QueueRow.propTypes = {
 };
 
 QueueRow.defaultProps = {
+  customFormats: [],
   isGrabbing: false,
   isRemoving: false
 };

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -88,7 +88,7 @@ class RemoveQueueItemsModal extends Component {
 
           <ModalBody>
             <div className={styles.message}>
-              {selectedCount > 1 ? translate('AreYouSureYouWantToRemoveSelectedItemsFromQueue', selectedCount) : translate('AreYouSureYouWantToRemoveSelectedItemFromQueue')}
+              {selectedCount > 1 ? translate('RemoveSelectedItemsQueueMessageText', selectedCount) : translate('RemoveSelectedItemQueueMessageText')}
             </div>
 
             {
@@ -133,7 +133,7 @@ class RemoveQueueItemsModal extends Component {
               kind={kinds.DANGER}
               onPress={this.onRemoveConfirmed}
             >
-              Remove
+              {translate('Remove')}
             </Button>
           </ModalFooter>
         </ModalContent>

frontend/src/AddMovie/ImportMovie/Import/ImportMovie.js

@@ -1,9 +1,11 @@
 import { reduce } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
@@ -105,9 +107,9 @@ class ImportMovie extends Component {
 
           {
             !rootFoldersFetching && !!rootFoldersError ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadRootFolders')}
-              </div> :
+              </Alert> :
               null
           }
 
@@ -116,9 +118,9 @@ class ImportMovie extends Component {
             !rootFoldersFetching &&
             rootFoldersPopulated &&
             !unmappedFolders.length ?
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('AllMoviesInPathHaveBeenImported', [path])}
-              </div> :
+              </Alert> :
               null
           }
 

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js

@@ -92,9 +92,9 @@ class ImportMovieSelectFolder extends Component {
 
           {
             !isFetching && error ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadRootFolders')}
-              </div> :
+              </Alert> :
               null
           }
 

frontend/src/Calendar/Calendar.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import AgendaConnector from './Agenda/AgendaConnector';
 import * as calendarViews from './calendarViews';
@@ -31,9 +33,9 @@ class Calendar extends Component {
 
         {
           !isFetching && !!error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('UnableToLoadTheCalendar')}
-            </div>
+            </Alert>
         }
 
         {

frontend/src/Collection/AddNewCollectionMovieModalContentConnector.js

@@ -28,7 +28,7 @@ function createMapStateToProps() {
         qualityProfileId: collection.qualityProfileId,
         minimumAvailability: collection.minimumAvailability,
         searchForMovie: collection.searchOnAdd,
-        tags: []
+        tags: collection.tags || []
       };
 
       const {

frontend/src/Collection/Collection.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -9,7 +10,7 @@ import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import { align, icons, sortDirections } from 'Helpers/Props';
+import { align, icons, kinds, sortDirections } from 'Helpers/Props';
 import styles from 'Movie/Index/MovieIndex.css';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import translate from 'Utilities/String/translate';
@@ -313,9 +314,9 @@ class Collection extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadCollections')}
-                </div>
+                </Alert>
             }
 
             {

frontend/src/Collection/CollectionItemConnector.js

@@ -2,17 +2,12 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
 import createCollectionSelector from 'Store/Selectors/createCollectionSelector';
 
 function createMapStateToProps() {
   return createSelector(
     createCollectionSelector(),
-    createAllMoviesSelector(),
-    (
-      collection,
-      allMovies
-    ) => {
+    (collection) => {
       // If a movie is deleted this selector may fire before the parent
       // selecors, which will result in an undefined movie, if that happens
       // we want to return early here and again in the render function to avoid
@@ -22,21 +17,11 @@ function createMapStateToProps() {
         return {};
       }
 
-      let allGenres = [];
-      let libraryMovies = 0;
-
-      collection.movies.forEach((movie) => {
-        allGenres = allGenres.concat(movie.genres);
-
-        if (allMovies.find((libraryMovie) => libraryMovie.tmdbId === movie.tmdbId)) {
-          libraryMovies++;
-        }
-      });
+      const allGenres = collection.movies.flatMap((movie) => movie.genres);
 
       return {
         ...collection,
-        genres: Array.from(new Set(allGenres)).slice(0, 3),
-        missingMovies: collection.movies.length - libraryMovies
+        genres: Array.from(new Set(allGenres)).slice(0, 3)
       };
     }
   );

frontend/src/Collection/Edit/EditCollectionModalContent.js

@@ -50,6 +50,7 @@ class EditCollectionModalContent extends Component {
       minimumAvailability,
       // Id,
       rootFolderPath,
+      tags,
       searchOnAdd
     } = item;
 
@@ -126,6 +127,17 @@ class EditCollectionModalContent extends Component {
                   />
                 </FormGroup>
 
+                <FormGroup>
+                  <FormLabel>{translate('Tags')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.TAG}
+                    name="tags"
+                    onChange={onInputChange}
+                    {...tags}
+                  />
+                </FormGroup>
+
                 <FormGroup>
                   <FormLabel>{translate('SearchOnAdd')}</FormLabel>
 

frontend/src/Collection/Edit/EditCollectionModalContentConnector.js

@@ -42,6 +42,7 @@ function createMapStateToProps() {
         qualityProfileId: collection.qualityProfileId,
         minimumAvailability: collection.minimumAvailability,
         rootFolderPath: collection.rootFolderPath,
+        tags: collection.tags,
         searchOnAdd: collection.searchOnAdd
       };
 

frontend/src/Collection/Menus/CollectionSortMenu.js

@@ -28,6 +28,14 @@ function CollectionSortMenu(props) {
         >
           {translate('Title')}
         </SortMenuItem>
+        <SortMenuItem
+          name="missingMovies"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Missing')}
+        </SortMenuItem>
       </MenuContent>
     </SortMenu>
   );

frontend/src/Collection/Overview/CollectionMovie.css

@@ -102,7 +102,7 @@ $hoverScale: 1.05;
 
   position: relative;
   display: block;
-  background-color: var(--defaultColor);
+  background-color: var(--black);
 }
 
 .monitorToggleButton {

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -580,7 +580,7 @@ EnhancedSelectInput.propTypes = {
   className: PropTypes.string,
   disabledClassName: PropTypes.string,
   name: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   isDisabled: PropTypes.bool.isRequired,
   isFetching: PropTypes.bool.isRequired,

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -63,6 +63,7 @@ function ProviderFieldFormGroup(props) {
     name,
     label,
     helpText,
+    helpTextWarning,
     helpLink,
     placeholder,
     value,
@@ -96,6 +97,7 @@ function ProviderFieldFormGroup(props) {
         name={name}
         label={label}
         helpText={helpText}
+        helpTextWarning={helpTextWarning}
         helpLink={helpLink}
         placeholder={placeholder}
         value={value}
@@ -122,6 +124,7 @@ ProviderFieldFormGroup.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   helpText: PropTypes.string,
+  helpTextWarning: PropTypes.string,
   helpLink: PropTypes.string,
   placeholder: PropTypes.string,
   value: PropTypes.any,

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

@@ -19,6 +19,8 @@ function createCleanMovieSelector() {
           year,
           images,
           alternateTitles = [],
+          tmdbId,
+          imdbId,
           tags = []
         } = movie;
 
@@ -29,6 +31,8 @@ function createCleanMovieSelector() {
           year,
           images,
           alternateTitles,
+          tmdbId,
+          imdbId,
           firstCharacter: title.charAt(0).toLowerCase(),
           tags: tags.reduce((acc, id) => {
             const matchingTag = allTags.find((tag) => tag.id === id);

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

@@ -12,6 +12,8 @@ function MovieSearchResult(props) {
     year,
     images,
     alternateTitles,
+    tmdbId,
+    imdbId,
     tags
   } = props;
 
@@ -47,6 +49,22 @@ function MovieSearchResult(props) {
             null
         }
 
+        {
+          match.key === 'tmdbId' && tmdbId ?
+            <div className={styles.alternateTitle}>
+              TmdbId: {tmdbId}
+            </div> :
+            null
+        }
+
+        {
+          match.key === 'imdbId' && imdbId ?
+            <div className={styles.alternateTitle}>
+              ImdbId: {imdbId}
+            </div> :
+            null
+        }
+
         {
           tag ?
             <div className={styles.tagContainer}>
@@ -69,6 +87,8 @@ MovieSearchResult.propTypes = {
   year: PropTypes.number.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   alternateTitles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tmdbId: PropTypes.number,
+  imdbId: PropTypes.string,
   tags: PropTypes.arrayOf(PropTypes.object).isRequired,
   match: PropTypes.object.isRequired
 };

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

@@ -9,6 +9,8 @@ const fuseOptions = {
   keys: [
     'title',
     'alternateTitles.title',
+    'tmdbId',
+    'imdbId',
     'tags.label'
   ]
 };

frontend/src/Components/Page/PageSectionContent.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import { kinds } from 'Helpers/Props';
 
 function PageSectionContent(props) {
   const {
@@ -17,7 +19,7 @@ function PageSectionContent(props) {
     );
   } else if (!isFetching && !!error) {
     return (
-      <div>{errorMessage}</div>
+      <Alert kind={kinds.DANGER}>{errorMessage}</Alert>
     );
   } else if (isPopulated && !error) {
     return (

frontend/src/Components/ProgressBar.css

@@ -16,6 +16,46 @@
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   color: var(--white);
   transition: width 0.6s ease;
+
+  &.default {
+    background-color: var(--darkGray);
+  }
+
+  &.primary {
+    background-color: var(--primaryColor);
+  }
+
+  &.danger {
+    background-color: var(--dangerColor);
+
+    &:global(.colorImpaired) {
+      background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
+    }
+  }
+
+  &.success {
+    background-color: var(--successColor);
+  }
+
+  &.purple {
+    background-color: var(--purple);
+  }
+
+  &.warning {
+    background-color: var(--warningColor);
+
+    &:global(.colorImpaired) {
+      background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
+    }
+  }
+
+  &.info {
+    background-color: var(--infoColor);
+  }
+
+  &.queue {
+    background-color: var(--queueColor);
+  }
 }
 
 .frontTextContainer {
@@ -45,46 +85,6 @@
   cursor: default;
 }
 
-.default {
-  background-color: var(--darkGray);
-}
-
-.primary {
-  background-color: var(--primaryColor);
-}
-
-.danger {
-  background-color: var(--dangerColor);
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
-  }
-}
-
-.success {
-  background-color: var(--successColor);
-}
-
-.purple {
-  background-color: var(--purple);
-}
-
-.warning {
-  background-color: var(--warningColor);
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
-  }
-}
-
-.info {
-  background-color: var(--infoColor);
-}
-
-.queue {
-  background-color: var(--queueColor);
-}
-
 .small {
   height: $progressBarSmallHeight;
 

frontend/src/Components/ProgressBar.js

@@ -38,7 +38,7 @@ function ProgressBar(props) {
             {
               showText && width ?
                 <div
-                  className={styles.backTextContainer}
+                  className={classNames(styles.backTextContainer, styles[kind])}
                   style={{ width: actualWidth }}
                 >
                   <div className={styles.backText}>
@@ -67,7 +67,7 @@ function ProgressBar(props) {
             {
               showText ?
                 <div
-                  className={styles.frontTextContainer}
+                  className={classNames(styles.frontTextContainer, styles[kind])}
                   style={{ width: progressPercent }}
                 >
                   <div

frontend/src/DiscoverMovie/DiscoverMovie.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -10,7 +11,7 @@ import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
-import { align, icons, sortDirections } from 'Helpers/Props';
+import { align, icons, kinds, sortDirections } from 'Helpers/Props';
 import styles from 'Movie/Index/MovieIndex.css';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import translate from 'Utilities/String/translate';
@@ -369,9 +370,9 @@ class DiscoverMovie extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadMovies')}
-                </div>
+                </Alert>
             }
 
             {

frontend/src/DiscoverMovie/Table/DiscoverMovieHeader.css

@@ -39,6 +39,12 @@
   flex: 0 0 90px;
 }
 
+.popularity {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 100px;
+}
+
 .lists {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 

frontend/src/DiscoverMovie/Table/DiscoverMovieHeader.css.d.ts

@@ -11,6 +11,7 @@ interface CssExports {
   'lists': string;
   'originalLanguage': string;
   'physicalRelease': string;
+  'popularity': string;
   'ratings': string;
   'runtime': string;
   'sortTitle': string;

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.css

@@ -64,6 +64,12 @@
   flex: 0 0 90px;
 }
 
+.popularity {
+  composes: cell;
+
+  flex: 0 0 100px;
+}
+
 .lists {
   composes: cell;
 

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.css.d.ts

@@ -16,6 +16,7 @@ interface CssExports {
   'lists': string;
   'originalLanguage': string;
   'physicalRelease': string;
+  'popularity': string;
   'ratings': string;
   'runtime': string;
   'sortTitle': string;

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js

@@ -13,6 +13,7 @@ import AddNewDiscoverMovieModal from 'DiscoverMovie/AddNewDiscoverMovieModal';
 import ExcludeMovieModal from 'DiscoverMovie/Exclusion/ExcludeMovieModal';
 import { icons } from 'Helpers/Props';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
+import MoviePopularityIndex from 'Movie/MoviePopularityIndex';
 import formatRuntime from 'Utilities/Date/formatRuntime';
 import translate from 'Utilities/String/translate';
 import ListMovieStatusCell from './ListMovieStatusCell';
@@ -73,6 +74,7 @@ class DiscoverMovieRow extends Component {
       images,
       genres,
       ratings,
+      popularity,
       certification,
       collection,
       columns,
@@ -261,6 +263,14 @@ class DiscoverMovieRow extends Component {
               );
             }
 
+            if (name === 'popularity') {
+              return (
+                <VirtualTableRowCell key={name} className={styles[name]}>
+                  <MoviePopularityIndex popularity={popularity} />
+                </VirtualTableRowCell>
+              );
+            }
+
             if (name === 'certification') {
               return (
                 <VirtualTableRowCell
@@ -384,6 +394,7 @@ DiscoverMovieRow.propTypes = {
   runtime: PropTypes.number,
   genres: PropTypes.arrayOf(PropTypes.string).isRequired,
   ratings: PropTypes.object.isRequired,
+  popularity: PropTypes.number.isRequired,
   certification: PropTypes.string,
   collection: PropTypes.object,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,

frontend/src/Helpers/Props/icons.js

@@ -61,6 +61,7 @@ import {
   faFileInvoice as farFileInvoice,
   faFilm as fasFilm,
   faFilter as fasFilter,
+  faFire as fasFire,
   faFlag as fasFlag,
   faFolderOpen as fasFolderOpen,
   faForward as fasForward,
@@ -192,6 +193,7 @@ export const PAUSED = fasPause;
 export const PENDING = farClock;
 export const PLAY = fasPlay;
 export const PROFILE = fasUser;
+export const POPULAR = fasFire;
 export const POSTER = fasTh;
 export const QUEUED = fasCloud;
 export const QUICK = fasRocket;

frontend/src/InteractiveImport/Language/SelectLanguageModalContent.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import { LanguageSettingsAppState } from 'App/State/SettingsAppState';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -86,7 +87,9 @@ function SelectLanguageModalContent(props: SelectLanguageModalContentProps) {
         {isFetching ? <LoadingIndicator /> : null}
 
         {!isFetching && error ? (
-          <div>{translate('UnableToLoadLanguages')}</div>
+          <Alert kind={kinds.DANGER}>
+            {translate('UnableToLoadLanguages')}
+          </Alert>
         ) : null}
 
         {isPopulated && !error ? (

frontend/src/InteractiveImport/Quality/SelectQualityModalContent.tsx

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Error } from 'App/State/AppSectionState';
 import AppState from 'App/State/AppState';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -130,7 +131,9 @@ function SelectQualityModalContent(props: SelectQualityModalContentProps) {
         {isFetching && <LoadingIndicator />}
 
         {!isFetching && error ? (
-          <div>{translate('UnableToLoadQualities')}</div>
+          <Alert kind={kinds.DANGER}>
+            {translate('UnableToLoadQualities')}
+          </Alert>
         ) : null}
 
         {isPopulated && !error ? (

frontend/src/Movie/Delete/DeleteMovieModalContentConnector.js

@@ -31,6 +31,7 @@ function createMapDispatchToProps(dispatch, props) {
       dispatch(
         deleteMovie({
           id: props.movieId,
+          collectionTmdbId: this.collection?.tmdbId,
           deleteFiles,
           addImportExclusion
         })

frontend/src/Movie/Details/MovieDetails.js

@@ -303,6 +303,7 @@ class MovieDetails extends Component {
       selectedTabIndex
     } = this.state;
 
+    const fanartUrl = getFanartUrl(images);
     const marqueeWidth = isSmallScreen ? titleWidth : (titleWidth - 150);
 
     return (
@@ -361,9 +362,11 @@ class MovieDetails extends Component {
           <div className={styles.header}>
             <div
               className={styles.backdrop}
-              style={{
-                backgroundImage: `url(${getFanartUrl(images)})`
-              }}
+              style={
+                fanartUrl ?
+                  { backgroundImage: `url(${fanartUrl})` } :
+                  null
+              }
             >
               <div className={styles.backdropOverlay} />
             </div>

frontend/src/Movie/History/MovieHistoryTable.css

@@ -0,0 +1,10 @@
+.container {
+  margin-top: 20px;
+  border: 1px solid var(--borderColor);
+  border-radius: 4px;
+  background-color: var(--inputBackgroundColor);
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}

frontend/src/Movie/History/MovieHistoryTable.css.d.ts

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

frontend/src/Movie/History/MovieHistoryTable.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import MovieHistoryTableContentConnector from './MovieHistoryTableContentConnector';
+import styles from './MovieHistoryTable.css';
 
 function MovieHistoryTable(props) {
   const {
@@ -7,9 +8,11 @@ function MovieHistoryTable(props) {
   } = props;
 
   return (
-    <MovieHistoryTableContentConnector
-      {...otherProps}
-    />
+    <div className={styles.container}>
+      <MovieHistoryTableContentConnector
+        {...otherProps}
+      />
+    </div>
   );
 }
 

frontend/src/Movie/Index/Menus/MovieIndexSortMenu.tsx

@@ -118,6 +118,15 @@ function MovieIndexSortMenu(props: MovieIndexSortMenuProps) {
           {translate('TmdbRating')}
         </SortMenuItem>
 
+        <SortMenuItem
+          name="popularity"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Popularity')}
+        </SortMenuItem>
+
         <SortMenuItem
           name="path"
           sortKey={sortKey}

frontend/src/Movie/Index/MovieIndex.tsx

@@ -10,6 +10,7 @@ import { SelectProvider } from 'App/SelectContext';
 import ClientSideCollectionAppState from 'App/State/ClientSideCollectionAppState';
 import MoviesAppState, { MovieIndexAppState } from 'App/State/MoviesAppState';
 import { RSS_SYNC } from 'Commands/commandNames';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -20,7 +21,7 @@ import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import withScrollPosition from 'Components/withScrollPosition';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import SortDirection from 'Helpers/Props/SortDirection';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import NoMovie from 'Movie/NoMovie';
@@ -337,7 +338,9 @@ const MovieIndex = withScrollPosition((props: MovieIndexProps) => {
             {isFetching && !isPopulated ? <LoadingIndicator /> : null}
 
             {!isFetching && !!error ? (
-              <div>{translate('UnableToLoadMovies')}</div>
+              <Alert kind={kinds.DANGER}>
+                {translate('UnableToLoadMovies')}
+              </Alert>
             ) : null}
 
             {isLoaded ? (

frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx

@@ -71,6 +71,9 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
     isAvailable,
     tmdbId,
     imdbId,
+    studio,
+    sizeOnDisk,
+    added,
     youTubeTrailerId,
   } = movie;
 
@@ -219,6 +222,9 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
               height={overviewHeight}
               monitored={monitored}
               qualityProfile={qualityProfile}
+              studio={studio}
+              sizeOnDisk={sizeOnDisk}
+              added={added}
               path={path}
               sortKey={sortKey}
               {...overviewOptions}

frontend/src/Movie/Index/Overview/MovieIndexOverviewInfo.tsx

@@ -56,7 +56,7 @@ const rows = [
   {
     name: 'qualityProfileId',
     showProp: 'showQualityProfile',
-    valueProp: 'qualityProfileId',
+    valueProp: 'qualityProfile',
   },
   {
     name: 'added',

frontend/src/Movie/Index/Select/Edit/EditMoviesModalContent.tsx

@@ -203,7 +203,7 @@ function EditMoviesModalContent(props: EditMoviesModalContentProps) {
           <Button onPress={onModalClose}>{translate('Cancel')}</Button>
 
           <Button onPress={onSavePressWrapper}>
-            {translate('Apply Changes')}
+            {translate('ApplyChanges')}
           </Button>
         </div>
       </ModalFooter>

frontend/src/Movie/Index/Select/Organize/OrganizeMoviesModalContent.tsx

@@ -65,7 +65,7 @@ function OrganizeMoviesModalContent(props: OrganizeMoviesModalContentProps) {
         </Alert>
 
         <div className={styles.message}>
-          {translate('OrganizeConfirm', movieTitles.length)}
+          {translate('OrganizeConfirm', [movieTitles.length])}
         </div>
 
         <ul>

frontend/src/Movie/Index/Table/MovieIndexRow.css

@@ -48,6 +48,7 @@
 }
 
 .added,
+.popularity,
 .runtime {
   composes: cell;
 

frontend/src/Movie/Index/Table/MovieIndexRow.css.d.ts

@@ -18,6 +18,7 @@ interface CssExports {
   'originalTitle': string;
   'path': string;
   'physicalRelease': string;
+  'popularity': string;
   'qualityProfileId': string;
   'rottenTomatoesRating': string;
   'runtime': string;

frontend/src/Movie/Index/Table/MovieIndexRow.tsx

@@ -19,6 +19,7 @@ import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
 import createMovieIndexItemSelector from 'Movie/Index/createMovieIndexItemSelector';
+import MoviePopularityIndex from 'Movie/MoviePopularityIndex';
 import MovieTitleLink from 'Movie/MovieTitleLink';
 import { executeCommand } from 'Store/Actions/commandActions';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
@@ -69,6 +70,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
     sizeOnDisk,
     genres = [],
     ratings,
+    popularity,
     certification,
     tags = [],
     tmdbId,
@@ -362,6 +364,14 @@ function MovieIndexRow(props: MovieIndexRowProps) {
           );
         }
 
+        if (name === 'popularity') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <MoviePopularityIndex popularity={popularity} />
+            </VirtualTableRowCell>
+          );
+        }
+
         if (name === 'certification') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>

frontend/src/Movie/Index/Table/MovieIndexTableHeader.css

@@ -41,6 +41,7 @@
 }
 
 .added,
+.popularity,
 .runtime {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 

frontend/src/Movie/Index/Table/MovieIndexTableHeader.css.d.ts

@@ -15,6 +15,7 @@ interface CssExports {
   'originalTitle': string;
   'path': string;
   'physicalRelease': string;
+  'popularity': string;
   'qualityProfileId': string;
   'rottenTomatoesRating': string;
   'runtime': string;

frontend/src/Movie/Movie.ts

@@ -49,6 +49,7 @@ interface Movie extends ModelBase {
   sizeOnDisk: number;
   genres: string[];
   ratings: Ratings;
+  popularity: number;
   certification: string;
   tags: number[];
   images: Image[];

frontend/src/Movie/MoviePopularityIndex.css

@@ -0,0 +1,5 @@
+.popularityIcon {
+  margin-right: 2px;
+  width: 12px !important;
+  text-align: center;
+}

frontend/src/Movie/MoviePopularityIndex.css.d.ts

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

frontend/src/Movie/MoviePopularityIndex.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './MoviePopularityIndex.css';
+
+interface MoviePopularityIndexProps {
+  popularity: number;
+}
+
+function MoviePopularityIndex(props: MoviePopularityIndexProps) {
+  const { popularity } = props;
+
+  return (
+    <Label kind={kinds.INVERSE} title={translate('PopularityIndex')}>
+      <Icon className={styles.popularityIcon} name={icons.POPULAR} size={11} />
+      {popularity.toFixed()}
+    </Label>
+  );
+}
+
+export default MoviePopularityIndex;

frontend/src/MovieFile/Edit/FileEditModalContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -109,9 +110,9 @@ class FileEditModalContent extends Component {
 
           {
             !isFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadQualities')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/MovieFile/Quality/SelectQualityModalContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -92,9 +93,9 @@ class SelectQualityModalContent extends Component {
 
           {
             !isFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadQualities')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/RootFolder/RootFolders.js

@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import RootFolderRowConnector from './RootFolderRowConnector';
 
@@ -44,9 +46,9 @@ function RootFolders(props) {
 
   if (!isFetching && !!error) {
     return (
-      <div>
+      <Alert kind={kinds.DANGER}>
         {translate('UnableToLoadRootFolders')}
-      </div>
+      </Alert>
     );
   }
 

frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js

@@ -152,13 +152,7 @@ class CustomFormat extends Component {
           isOpen={this.state.isDeleteCustomFormatModalOpen}
           kind={kinds.DANGER}
           title={translate('DeleteCustomFormat')}
-          message={
-            <div>
-              <div>
-                {translate('AreYouSureYouWantToDeleteFormat', [name])}
-              </div>
-            </div>
-          }
+          message={translate('DeleteCustomFormatMessageText', [name])}
           confirmLabel={translate('Delete')}
           isSpinning={isDeleting}
           onConfirm={this.onConfirmDeleteCustomFormat}

frontend/src/Settings/CustomFormats/CustomFormats/ExportCustomFormatModalContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Button from 'Components/Link/Button';
 import ClipboardButton from 'Components/Link/ClipboardButton';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -41,9 +42,9 @@ class ExportCustomFormatModalContent extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadCustomFormats')}
-                </div>
+                </Alert>
             }
 
             {

frontend/src/Settings/CustomFormats/CustomFormats/ImportCustomFormatModalContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -11,7 +12,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 { inputTypes, sizes } from 'Helpers/Props';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './ImportCustomFormatModalContent.css';
 
@@ -95,9 +96,9 @@ class ImportCustomFormatModalContent extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadCustomFormats')}
-                </div>
+                </Alert>
             }
 
             {

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

@@ -78,7 +78,7 @@ class Specification extends Component {
 
           <IconButton
             className={styles.cloneButton}
-            title={translate('CloneFormatTag')}
+            title={translate('CloneCondition')}
             name={icons.CLONE}
             onPress={this.onCloneSpecificationPress}
           />
@@ -114,14 +114,8 @@ class Specification extends Component {
         <ConfirmModal
           isOpen={this.state.isDeleteSpecificationModalOpen}
           kind={kinds.DANGER}
-          title={translate('DeleteCustomFormat')}
-          message={
-            <div>
-              <div>
-                {translate('AreYouSureYouWantToDeleteFormat', [name])}
-              </div>
-            </div>
-          }
+          title={translate('DeleteCondition')}
+          message={translate('DeleteConditionMessageText', [name])}
           confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteSpecification}
           onCancel={this.onDeleteSpecificationModalClose}

frontend/src/Settings/DownloadClients/DownloadClientSettings.js

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

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

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import Card from 'Components/Card';
 import Label from 'Components/Label';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
+import TagList from 'Components/TagList';
 import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import EditDownloadClientModalConnector from './EditDownloadClientModalConnector';
@@ -56,7 +57,9 @@ class DownloadClient extends Component {
       id,
       name,
       enable,
-      priority
+      priority,
+      tags,
+      tagList
     } = this.props;
 
     return (
@@ -94,6 +97,11 @@ class DownloadClient extends Component {
           }
         </div>
 
+        <TagList
+          tags={tags}
+          tagList={tagList}
+        />
+
         <EditDownloadClientModalConnector
           id={id}
           isOpen={this.state.isEditDownloadClientModalOpen}
@@ -120,6 +128,8 @@ DownloadClient.propTypes = {
   name: PropTypes.string.isRequired,
   enable: PropTypes.bool.isRequired,
   priority: PropTypes.number.isRequired,
+  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   onConfirmDeleteDownloadClient: PropTypes.func.isRequired
 };
 

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

@@ -50,6 +50,7 @@ class DownloadClients extends Component {
     const {
       items,
       onConfirmDeleteDownloadClient,
+      tagList,
       ...otherProps
     } = this.props;
 
@@ -71,6 +72,7 @@ class DownloadClients extends Component {
                   <DownloadClient
                     key={item.id}
                     {...item}
+                    tagList={tagList}
                     onConfirmDeleteDownloadClient={onConfirmDeleteDownloadClient}
                   />
                 );
@@ -109,6 +111,7 @@ DownloadClients.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   onConfirmDeleteDownloadClient: PropTypes.func.isRequired
 };
 

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

@@ -4,13 +4,20 @@ import { connect } from 'react-redux';
 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 DownloadClients from './DownloadClients';
 
 function createMapStateToProps() {
   return createSelector(
     createSortedSectionSelector('settings.downloadClients', sortByName),
-    (downloadClients) => downloadClients
+    createTagsSelector(),
+    (downloadClients, tagList) => {
+      return {
+        ...downloadClients,
+        tagList
+      };
+    }
   );
 }
 

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

@@ -51,6 +51,7 @@ class EditDownloadClientModalContent extends Component {
       removeCompletedDownloads,
       removeFailedDownloads,
       fields,
+      tags,
       message
     } = item;
 
@@ -140,6 +141,18 @@ class EditDownloadClientModalContent extends Component {
                   />
                 </FormGroup>
 
+                <FormGroup>
+                  <FormLabel>{translate('Tags')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.TAG}
+                    name="tags"
+                    helpText={translate('DownloadClientTagHelpText')}
+                    {...tags}
+                    onChange={onInputChange}
+                  />
+                </FormGroup>
+
                 <FieldSet
                   size={sizes.SMALL}
                   legend={translate('CompletedDownloadHandling')}

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

@@ -27,9 +27,9 @@ interface ManageDownloadClientsEditModalContentProps {
 const NO_CHANGE = 'noChange';
 
 const enableOptions = [
-  { key: NO_CHANGE, value: 'No Change', disabled: true },
-  { key: 'enabled', value: 'Enabled' },
-  { key: 'disabled', value: 'Disabled' },
+  { key: NO_CHANGE, value: translate('NoChange'), disabled: true },
+  { key: 'enabled', value: translate('Enabled') },
+  { key: 'disabled', value: translate('Disabled') },
 ];
 
 function ManageDownloadClientsEditModalContent(
@@ -97,7 +97,9 @@ function ManageDownloadClientsEditModalContent(
           setRemoveFailedDownloads(value);
           break;
         default:
-          console.warn('EditDownloadClientsModalContent Unknown Input');
+          console.warn(
+            `EditDownloadClientsModalContent Unknown Input: '${name}'`
+          );
       }
     },
     []
@@ -162,15 +164,13 @@ function ManageDownloadClientsEditModalContent(
 
       <ModalFooter className={styles.modalFooter}>
         <div className={styles.selected}>
-          {translate('{count} download clients selected', {
-            count: selectedCount,
-          })}
+          {translate('CountDownloadClientsSelected', [selectedCount])}
         </div>
 
         <div>
           <Button onPress={onModalClose}>{translate('Cancel')}</Button>
 
-          <Button onPress={save}>{translate('Apply Changes')}</Button>
+          <Button onPress={save}>{translate('ApplyChanges')}</Button>
         </div>
       </ModalFooter>
     </ModalContent>

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { DownloadClientAppState } from 'App/State/SettingsAppState';
+import Alert from 'Components/Alert';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -20,9 +21,11 @@ import {
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import { SelectStateInputProps } from 'typings/props';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import ManageDownloadClientsEditModal from './Edit/ManageDownloadClientsEditModal';
 import ManageDownloadClientsModalRow from './ManageDownloadClientsModalRow';
+import TagsModal from './Tags/TagsModal';
 import styles from './ManageDownloadClientsModalContent.css';
 
 // TODO: This feels janky to do, but not sure of a better way currently
@@ -33,37 +36,43 @@ type OnSelectedChangeCallback = React.ComponentProps<
 const COLUMNS = [
   {
     name: 'name',
-    label: 'Name',
+    label: translate('Name'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'implementation',
-    label: 'Implementation',
+    label: translate('Implementation'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'enable',
-    label: 'Enabled',
+    label: translate('Enabled'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'priority',
-    label: 'Priority',
+    label: translate('Priority'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'removeCompletedDownloads',
-    label: 'Remove Completed',
+    label: translate('RemoveCompleted'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'removeFailedDownloads',
-    label: 'Remove Failed',
+    label: translate('RemoveFailed'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'tags',
+    label: 'Tags',
     isSortable: true,
     isVisible: true,
   },
@@ -92,6 +101,8 @@ function ManageDownloadClientsModalContent(
 
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isTagsModalOpen, setIsTagsModalOpen] = useState(false);
+  const [isSavingTags, setIsSavingTags] = useState(false);
 
   const [selectState, setSelectState] = useSelectState();
 
@@ -138,6 +149,30 @@ function ManageDownloadClientsModalContent(
     [selectedIds, dispatch]
   );
 
+  const onTagsPress = useCallback(() => {
+    setIsTagsModalOpen(true);
+  }, [setIsTagsModalOpen]);
+
+  const onTagsModalClose = useCallback(() => {
+    setIsTagsModalOpen(false);
+  }, [setIsTagsModalOpen]);
+
+  const onApplyTagsPress = useCallback(
+    (tags: number[], applyTags: string) => {
+      setIsSavingTags(true);
+      setIsTagsModalOpen(false);
+
+      dispatch(
+        bulkEditDownloadClients({
+          ids: selectedIds,
+          tags,
+          applyTags,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
   const onSelectAllChange = useCallback(
     ({ value }: SelectStateInputProps) => {
       setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
@@ -158,17 +193,24 @@ function ManageDownloadClientsModalContent(
     [items, setSelectState]
   );
 
-  const errorMessage = getErrorMessage(error, 'Unable to load import lists.');
+  const errorMessage = getErrorMessage(
+    error,
+    'Unable to load download clients.'
+  );
   const anySelected = selectedCount > 0;
 
   return (
     <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>Manage Import Lists</ModalHeader>
+      <ModalHeader>{translate('ManageDownloadClients')}</ModalHeader>
       <ModalBody>
         {isFetching ? <LoadingIndicator /> : null}
 
         {error ? <div>{errorMessage}</div> : null}
 
+        {isPopulated && !error && !items.length && (
+          <Alert kind={kinds.INFO}>{translate('NoDownloadClientsFound')}</Alert>
+        )}
+
         {isPopulated && !!items.length && !isFetching && !isFetching ? (
           <Table
             columns={COLUMNS}
@@ -203,7 +245,7 @@ function ManageDownloadClientsModalContent(
             isDisabled={!anySelected}
             onPress={onDeletePress}
           >
-            Delete
+            {translate('Delete')}
           </SpinnerButton>
 
           <SpinnerButton
@@ -211,11 +253,19 @@ function ManageDownloadClientsModalContent(
             isDisabled={!anySelected}
             onPress={onEditPress}
           >
-            Edit
+            {translate('Edit')}
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving && isSavingTags}
+            isDisabled={!anySelected}
+            onPress={onTagsPress}
+          >
+            {translate('SetTags')}
           </SpinnerButton>
         </div>
 
-        <Button onPress={onModalClose}>Close</Button>
+        <Button onPress={onModalClose}>{translate('Close')}</Button>
       </ModalFooter>
 
       <ManageDownloadClientsEditModal
@@ -225,12 +275,21 @@ function ManageDownloadClientsModalContent(
         downloadClientIds={selectedIds}
       />
 
+      <TagsModal
+        isOpen={isTagsModalOpen}
+        ids={selectedIds}
+        onApplyTagsPress={onApplyTagsPress}
+        onModalClose={onTagsModalClose}
+      />
+
       <ConfirmModal
         isOpen={isDeleteModalOpen}
         kind={kinds.DANGER}
-        title="Delete Download Clients(s)"
-        message={`Are you sure you want to delete ${selectedIds.length} download clients(s)?`}
-        confirmLabel="Delete"
+        title={translate('DeleteSelectedDownloadClients')}
+        message={translate('DeleteSelectedDownloadClientsMessageText', [
+          selectedIds.length,
+        ])}
+        confirmLabel={translate('Delete')}
         onConfirm={onConfirmDelete}
         onCancel={onDeleteModalClose}
       />

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

@@ -1,9 +1,13 @@
 import React, { useCallback } from 'react';
+import Label from 'Components/Label';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import Column from 'Components/Table/Column';
 import TableRow from 'Components/Table/TableRow';
+import TagListConnector from 'Components/TagListConnector';
+import { kinds } from 'Helpers/Props';
 import { SelectStateInputProps } from 'typings/props';
+import translate from 'Utilities/String/translate';
 import styles from './ManageDownloadClientsModalRow.css';
 
 interface ManageDownloadClientsModalRowProps {
@@ -14,6 +18,7 @@ interface ManageDownloadClientsModalRowProps {
   removeCompletedDownloads: boolean;
   removeFailedDownloads: boolean;
   implementation: string;
+  tags: number[];
   columns: Column[];
   isSelected?: boolean;
   onSelectedChange(result: SelectStateInputProps): void;
@@ -31,6 +36,7 @@ function ManageDownloadClientsModalRow(
     removeCompletedDownloads,
     removeFailedDownloads,
     implementation,
+    tags,
     onSelectedChange,
   } = props;
 
@@ -58,17 +64,23 @@ function ManageDownloadClientsModalRow(
       </TableRowCell>
 
       <TableRowCell className={styles.enable}>
-        {enable ? 'Yes' : 'No'}
+        <Label kind={enable ? kinds.SUCCESS : kinds.DISABLED} outline={!enable}>
+          {enable ? translate('Yes') : translate('No')}
+        </Label>
       </TableRowCell>
 
       <TableRowCell className={styles.priority}>{priority}</TableRowCell>
 
       <TableRowCell className={styles.removeCompletedDownloads}>
-        {removeCompletedDownloads ? 'Yes' : 'No'}
+        {removeCompletedDownloads ? translate('Yes') : translate('No')}
       </TableRowCell>
 
       <TableRowCell className={styles.removeFailedDownloads}>
-        {removeFailedDownloads ? 'Yes' : 'No'}
+        {removeFailedDownloads ? translate('Yes') : translate('No')}
+      </TableRowCell>
+
+      <TableRowCell className={styles.tags}>
+        <TagListConnector tags={tags} />
       </TableRowCell>
     </TableRow>
   );

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Tags/TagsModal.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import TagsModalContent from './TagsModalContent';
+
+interface TagsModalProps {
+  isOpen: boolean;
+  ids: number[];
+  onApplyTagsPress: (tags: number[], applyTags: string) => void;
+  onModalClose: () => void;
+}
+
+function TagsModal(props: TagsModalProps) {
+  const { isOpen, onModalClose, ...otherProps } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <TagsModalContent {...otherProps} onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default TagsModal;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Tags/TagsModalContent.css

@@ -0,0 +1,12 @@
+.renameIcon {
+  margin-left: 5px;
+}
+
+.message {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.result {
+  padding-top: 4px;
+}

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Tags/TagsModalContent.css.d.ts

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

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Tags/TagsModalContent.tsx

@@ -0,0 +1,185 @@
+import { uniq } from 'lodash';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import { DownloadClientAppState } from 'App/State/SettingsAppState';
+import { Tag } from 'App/State/TagsAppState';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Label from 'Components/Label';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import DownloadClient from 'typings/DownloadClient';
+import translate from 'Utilities/String/translate';
+import styles from './TagsModalContent.css';
+
+interface TagsModalContentProps {
+  ids: number[];
+  onApplyTagsPress: (tags: number[], applyTags: string) => void;
+  onModalClose: () => void;
+}
+
+function TagsModalContent(props: TagsModalContentProps) {
+  const { ids, onModalClose, onApplyTagsPress } = props;
+
+  const allDownloadClients: DownloadClientAppState = useSelector(
+    (state: AppState) => state.settings.downloadClients
+  );
+  const tagList: Tag[] = useSelector(createTagsSelector());
+
+  const [tags, setTags] = useState<number[]>([]);
+  const [applyTags, setApplyTags] = useState('add');
+
+  const downloadClientsTags = useMemo(() => {
+    const tags = ids.reduce((acc: number[], id) => {
+      const s = allDownloadClients.items.find(
+        (s: DownloadClient) => s.id === id
+      );
+
+      if (s) {
+        acc.push(...s.tags);
+      }
+
+      return acc;
+    }, []);
+
+    return uniq(tags);
+  }, [ids, allDownloadClients]);
+
+  const onTagsChange = useCallback(
+    ({ value }: { value: number[] }) => {
+      setTags(value);
+    },
+    [setTags]
+  );
+
+  const onApplyTagsChange = useCallback(
+    ({ value }: { value: string }) => {
+      setApplyTags(value);
+    },
+    [setApplyTags]
+  );
+
+  const onApplyPress = useCallback(() => {
+    onApplyTagsPress(tags, applyTags);
+  }, [tags, applyTags, onApplyTagsPress]);
+
+  const applyTagsOptions = [
+    { key: 'add', value: translate('Add') },
+    { key: 'remove', value: translate('Remove') },
+    { key: 'replace', value: translate('Replace') },
+  ];
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('Tags')}</ModalHeader>
+
+      <ModalBody>
+        <Form>
+          <FormGroup>
+            <FormLabel>{translate('Tags')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.TAG}
+              name="tags"
+              value={tags}
+              onChange={onTagsChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>{translate('ApplyTags')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.SELECT}
+              name="applyTags"
+              value={applyTags}
+              values={applyTagsOptions}
+              helpTexts={[
+                translate('ApplyTagsHelpTextHowToApplyDownloadClients'),
+                translate('ApplyTagsHelpTextAdd'),
+                translate('ApplyTagsHelpTextRemove'),
+                translate('ApplyTagsHelpTextReplace'),
+              ]}
+              onChange={onApplyTagsChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>{translate('Result')}</FormLabel>
+
+            <div className={styles.result}>
+              {downloadClientsTags.map((id) => {
+                const tag = tagList.find((t) => t.id === id);
+
+                if (!tag) {
+                  return null;
+                }
+
+                const removeTag =
+                  (applyTags === 'remove' && tags.indexOf(id) > -1) ||
+                  (applyTags === 'replace' && tags.indexOf(id) === -1);
+
+                return (
+                  <Label
+                    key={tag.id}
+                    title={
+                      removeTag
+                        ? translate('RemovingTag')
+                        : translate('ExistingTag')
+                    }
+                    kind={removeTag ? kinds.INVERSE : kinds.INFO}
+                    size={sizes.LARGE}
+                  >
+                    {tag.label}
+                  </Label>
+                );
+              })}
+
+              {(applyTags === 'add' || applyTags === 'replace') &&
+                tags.map((id) => {
+                  const tag = tagList.find((t) => t.id === id);
+
+                  if (!tag) {
+                    return null;
+                  }
+
+                  if (downloadClientsTags.indexOf(id) > -1) {
+                    return null;
+                  }
+
+                  return (
+                    <Label
+                      key={tag.id}
+                      title={translate('AddingTag')}
+                      kind={kinds.SUCCESS}
+                      size={sizes.LARGE}
+                    >
+                      {tag.label}
+                    </Label>
+                  );
+                })}
+            </div>
+          </FormGroup>
+        </Form>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+        <Button kind={kinds.PRIMARY} onPress={onApplyPress}>
+          {translate('Apply')}
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default TagsModalContent;

frontend/src/Settings/DownloadClients/Options/DownloadClientOptions.js

@@ -29,9 +29,9 @@ function DownloadClientOptions(props) {
 
       {
         !isFetching && error &&
-          <div>
+          <Alert kind={kinds.DANGER}>
             {translate('UnableToLoadDownloadClientOptions')}
-          </div>
+          </Alert>
       }
 
       {

frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.js

@@ -88,8 +88,8 @@ class RemotePathMapping extends Component {
         <ConfirmModal
           isOpen={this.state.isDeleteRemotePathMappingModalOpen}
           kind={kinds.DANGER}
-          title={translate('DeleteDelayProfile')}
-          message={translate('AreYouSureYouWantToDeleteThisRemotePathMapping')}
+          title={translate('DeleteRemotePathMapping')}
+          message={translate('DeleteRemotePathMappingMessageText')}
           confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteRemotePathMapping}
           onCancel={this.onDeleteRemotePathMappingModalClose}

frontend/src/Settings/General/GeneralSettings.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
@@ -123,9 +124,9 @@ class GeneralSettings extends Component {
 
           {
             !isFetching && error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadGeneralSettings')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/Settings/General/SecuritySettings.js

@@ -168,7 +168,7 @@ class SecuritySettings extends Component {
           isOpen={this.state.isConfirmApiKeyResetModalOpen}
           kind={kinds.DANGER}
           title={translate('ResetAPIKey')}
-          message={translate('AreYouSureYouWantToResetYourAPIKey')}
+          message={translate('ResetAPIKeyMessageText')}
           confirmLabel={translate('Reset')}
           onConfirm={this.onConfirmResetApiKey}
           onCancel={this.onCloseResetApiKeyModal}

frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.js

@@ -89,7 +89,7 @@ class ImportListExclusion extends Component {
           isOpen={this.state.isDeleteImportExclusionModalOpen}
           kind={kinds.DANGER}
           title={translate('DeleteImportListExclusion')}
-          message={translate('AreYouSureYouWantToDeleteThisImportListExclusion')}
+          message={translate('DeleteImportListExclusionMessageText')}
           confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteImportExclusion}
           onCancel={this.onDeleteImportExclusionModalClose}

frontend/src/Settings/ImportLists/ImportListSettings.js

@@ -86,7 +86,7 @@ class ImportListSettings extends Component {
               />
 
               <PageToolbarButton
-                label="Manage Lists"
+                label={translate('ManageLists')}
                 iconName={icons.MANAGE}
                 onPress={this.onManageImportListsPress}
               />

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.css

@@ -3,3 +3,9 @@
 
   margin-right: auto;
 }
+
+.message {
+  composes: alert from '~Components/Alert.css';
+
+  margin-bottom: 30px;
+}

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

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'deleteButton': string;
+  'message': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js

@@ -14,6 +14,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
+import formatShortTimeSpan from 'Utilities/Date/formatShortTimeSpan';
 import translate from 'Utilities/String/translate';
 import styles from './EditImportListModalContent.css';
 
@@ -42,6 +43,7 @@ function EditImportListModalContent(props) {
     name,
     enabled,
     enableAuto,
+    minRefreshInterval,
     monitor,
     minimumAvailability,
     qualityProfileId,
@@ -85,6 +87,14 @@ function EditImportListModalContent(props) {
                     {message.value.message}
                   </Alert>
               }
+
+              <Alert
+                kind={kinds.INFO}
+                className={styles.message}
+              >
+                {translate('ListWillRefreshEveryInterp', [formatShortTimeSpan(minRefreshInterval.value)])}
+              </Alert>
+
               <FormGroup>
                 <FormLabel>{translate('Name')}</FormLabel>
 

frontend/src/Settings/ImportLists/ImportLists/ImportList.js

@@ -4,6 +4,7 @@ import Card from 'Components/Card';
 import Label from 'Components/Label';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import { kinds } from 'Helpers/Props';
+import formatShortTimeSpan from 'Utilities/Date/formatShortTimeSpan';
 import translate from 'Utilities/String/translate';
 import EditImportListModalConnector from './EditImportListModalConnector';
 import styles from './ImportList.css';
@@ -56,7 +57,8 @@ class ImportList extends Component {
       id,
       name,
       enabled,
-      enableAuto
+      enableAuto,
+      minRefreshInterval
     } = this.props;
 
     return (
@@ -96,6 +98,12 @@ class ImportList extends Component {
           }
         </div>
 
+        <div className={styles.enabled}>
+          <Label kind={kinds.INFO} title='List Refresh Interval'>
+            {`${translate('Refresh')}: ${formatShortTimeSpan(minRefreshInterval)}`}
+          </Label>
+        </div>
+
         <EditImportListModalConnector
           id={id}
           isOpen={this.state.isEditImportListModalOpen}
@@ -122,6 +130,7 @@ ImportList.propTypes = {
   name: PropTypes.string.isRequired,
   enabled: PropTypes.bool.isRequired,
   enableAuto: PropTypes.bool.isRequired,
+  minRefreshInterval: PropTypes.string.isRequired,
   onConfirmDeleteImportList: PropTypes.func.isRequired
 };
 

frontend/src/Settings/ImportLists/ImportLists/Manage/Edit/ManageImportListsEditModalContent.tsx

@@ -26,9 +26,9 @@ interface ManageImportListsEditModalContentProps {
 const NO_CHANGE = 'noChange';
 
 const autoAddOptions = [
-  { key: NO_CHANGE, value: 'No Change', disabled: true },
-  { key: 'enabled', value: 'Enabled' },
-  { key: 'disabled', value: 'Disabled' },
+  { key: NO_CHANGE, value: translate('NoChange'), disabled: true },
+  { key: 'enabled', value: translate('Enabled') },
+  { key: 'disabled', value: translate('Disabled') },
 ];
 
 function ManageImportListsEditModalContent(
@@ -36,7 +36,7 @@ function ManageImportListsEditModalContent(
 ) {
   const { importListIds, onSavePress, onModalClose } = props;
 
-  const [enableAuto, setenableAuto] = useState(NO_CHANGE);
+  const [enableAuto, setEnableAuto] = useState(NO_CHANGE);
   const [qualityProfileId, setQualityProfileId] = useState<string | number>(
     NO_CHANGE
   );
@@ -72,7 +72,7 @@ function ManageImportListsEditModalContent(
     ({ name, value }: { name: string; value: string }) => {
       switch (name) {
         case 'enableAuto':
-          setenableAuto(value);
+          setEnableAuto(value);
           break;
         case 'qualityProfileId':
           setQualityProfileId(value);
@@ -81,7 +81,7 @@ function ManageImportListsEditModalContent(
           setRootFolderPath(value);
           break;
         default:
-          console.warn('EditImportListModalContent Unknown Input');
+          console.warn(`EditImportListModalContent Unknown Input: '${name}'`);
       }
     },
     []
@@ -136,7 +136,7 @@ function ManageImportListsEditModalContent(
 
       <ModalFooter className={styles.modalFooter}>
         <div className={styles.selected}>
-          {translate('{count} import lists selected', { count: selectedCount })}
+          {translate('CountImportListsSelected', [selectedCount])}
         </div>
 
         <div>

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { ImportListAppState } from 'App/State/SettingsAppState';
+import Alert from 'Components/Alert';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -20,6 +21,7 @@ import {
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import { SelectStateInputProps } from 'typings/props';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import ManageImportListsEditModal from './Edit/ManageImportListsEditModal';
 import ManageImportListsModalRow from './ManageImportListsModalRow';
@@ -34,37 +36,37 @@ type OnSelectedChangeCallback = React.ComponentProps<
 const COLUMNS = [
   {
     name: 'name',
-    label: 'Name',
+    label: translate('Name'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'implementation',
-    label: 'Implementation',
+    label: translate('Implementation'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'qualityProfileId',
-    label: 'Quality Profile',
+    label: translate('QualityProfile'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'rootFolderPath',
-    label: 'Root Folder',
+    label: translate('RootFolder'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'enableAuto',
-    label: 'Auto Add',
+    label: translate('AutomaticAdd'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'tags',
-    label: 'Tags',
+    label: translate('Tags'),
     isSortable: true,
     isVisible: true,
   },
@@ -190,12 +192,16 @@ function ManageImportListsModalContent(
 
   return (
     <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>Manage Import Lists</ModalHeader>
+      <ModalHeader>{translate('ManageImportLists')}</ModalHeader>
       <ModalBody>
         {isFetching ? <LoadingIndicator /> : null}
 
         {error ? <div>{errorMessage}</div> : null}
 
+        {isPopulated && !error && !items.length && (
+          <Alert kind={kinds.INFO}>{translate('NoImportListsFound')}</Alert>
+        )}
+
         {isPopulated && !!items.length && !isFetching && !isFetching ? (
           <Table
             columns={COLUMNS}
@@ -230,7 +236,7 @@ function ManageImportListsModalContent(
             isDisabled={!anySelected}
             onPress={onDeletePress}
           >
-            Delete
+            {translate('Delete')}
           </SpinnerButton>
 
           <SpinnerButton
@@ -238,7 +244,7 @@ function ManageImportListsModalContent(
             isDisabled={!anySelected}
             onPress={onEditPress}
           >
-            Edit
+            {translate('Edit')}
           </SpinnerButton>
 
           <SpinnerButton
@@ -246,11 +252,11 @@ function ManageImportListsModalContent(
             isDisabled={!anySelected}
             onPress={onTagsPress}
           >
-            Set Tags
+            {translate('SetTags')}
           </SpinnerButton>
         </div>
 
-        <Button onPress={onModalClose}>Close</Button>
+        <Button onPress={onModalClose}>{translate('Close')}</Button>
       </ModalFooter>
 
       <ManageImportListsEditModal
@@ -270,9 +276,11 @@ function ManageImportListsModalContent(
       <ConfirmModal
         isOpen={isDeleteModalOpen}
         kind={kinds.DANGER}
-        title="Delete Import List(s)"
-        message={`Are you sure you want to delete ${selectedIds.length} import list(s)?`}
-        confirmLabel="Delete"
+        title={translate('DeleteSelectedImportLists')}
+        message={translate('DeleteSelectedImportListsMessageText', [
+          selectedIds.length,
+        ])}
+        confirmLabel={translate('Delete')}
         onConfirm={onConfirmDelete}
         onCancel={onDeleteModalClose}
       />

frontend/src/Settings/ImportLists/ImportLists/Manage/Tags/TagsModalContent.tsx

@@ -17,6 +17,7 @@ import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
 import ImportList from 'typings/ImportList';
+import translate from 'Utilities/String/translate';
 import styles from './TagsModalContent.css';
 
 interface TagsModalContentProps {
@@ -36,7 +37,7 @@ function TagsModalContent(props: TagsModalContentProps) {
   const [tags, setTags] = useState<number[]>([]);
   const [applyTags, setApplyTags] = useState('add');
 
-  const seriesTags = useMemo(() => {
+  const importListsTags = useMemo(() => {
     const tags = ids.reduce((acc: number[], id) => {
       const s = allImportLists.items.find((s: ImportList) => s.id === id);
 
@@ -69,19 +70,19 @@ function TagsModalContent(props: TagsModalContentProps) {
   }, [tags, applyTags, onApplyTagsPress]);
 
   const applyTagsOptions = [
-    { key: 'add', value: 'Add' },
-    { key: 'remove', value: 'Remove' },
-    { key: 'replace', value: 'Replace' },
+    { key: 'add', value: translate('Add') },
+    { key: 'remove', value: translate('Remove') },
+    { key: 'replace', value: translate('Replace') },
   ];
 
   return (
     <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>Tags</ModalHeader>
+      <ModalHeader>{translate('Tags')}</ModalHeader>
 
       <ModalBody>
         <Form>
           <FormGroup>
-            <FormLabel>Tags</FormLabel>
+            <FormLabel>{translate('Tags')}</FormLabel>
 
             <FormInputGroup
               type={inputTypes.TAG}
@@ -92,7 +93,7 @@ function TagsModalContent(props: TagsModalContentProps) {
           </FormGroup>
 
           <FormGroup>
-            <FormLabel>Apply Tags</FormLabel>
+            <FormLabel>{translate('ApplyTags')}</FormLabel>
 
             <FormInputGroup
               type={inputTypes.SELECT}
@@ -100,20 +101,20 @@ function TagsModalContent(props: TagsModalContentProps) {
               value={applyTags}
               values={applyTagsOptions}
               helpTexts={[
-                'How to apply tags to the selected list',
-                'Add: Add the tags the existing list of tags',
-                'Remove: Remove the entered tags',
-                'Replace: Replace the tags with the entered tags (enter no tags to clear all tags)',
+                translate('ApplyTagsHelpTextHowToApplyImportLists'),
+                translate('ApplyTagsHelpTextAdd'),
+                translate('ApplyTagsHelpTextRemove'),
+                translate('ApplyTagsHelpTextReplace'),
               ]}
               onChange={onApplyTagsChange}
             />
           </FormGroup>
 
           <FormGroup>
-            <FormLabel>Result</FormLabel>
+            <FormLabel>{translate('Result')}</FormLabel>
 
             <div className={styles.result}>
-              {seriesTags.map((id) => {
+              {importListsTags.map((id) => {
                 const tag = tagList.find((t) => t.id === id);
 
                 if (!tag) {
@@ -127,7 +128,11 @@ function TagsModalContent(props: TagsModalContentProps) {
                 return (
                   <Label
                     key={tag.id}
-                    title={removeTag ? 'Removing tag' : 'Existing tag'}
+                    title={
+                      removeTag
+                        ? translate('RemovingTag')
+                        : translate('ExistingTag')
+                    }
                     kind={removeTag ? kinds.INVERSE : kinds.INFO}
                     size={sizes.LARGE}
                   >
@@ -144,14 +149,14 @@ function TagsModalContent(props: TagsModalContentProps) {
                     return null;
                   }
 
-                  if (seriesTags.indexOf(id) > -1) {
+                  if (importListsTags.indexOf(id) > -1) {
                     return null;
                   }
 
                   return (
                     <Label
                       key={tag.id}
-                      title={'Adding tag'}
+                      title={translate('AddingTag')}
                       kind={kinds.SUCCESS}
                       size={sizes.LARGE}
                     >
@@ -165,10 +170,10 @@ function TagsModalContent(props: TagsModalContentProps) {
       </ModalBody>
 
       <ModalFooter>
-        <Button onPress={onModalClose}>Cancel</Button>
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
 
         <Button kind={kinds.PRIMARY} onPress={onApplyPress}>
-          Apply
+          {translate('Apply')}
         </Button>
       </ModalFooter>
     </ModalContent>

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

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import FieldSet from 'Components/FieldSet';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import { inputTypes } from 'Helpers/Props';
+import { inputTypes, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 
 function ImportListOptions(props) {
@@ -37,31 +38,14 @@ function ImportListOptions(props) {
 
         {
           !isFetching && error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('UnableToLoadListOptions')}
-            </div>
+            </Alert>
         }
 
         {
           hasSettings && !isFetching && !error &&
             <Form>
-              <FormGroup
-                advancedSettings={advancedSettings}
-                isAdvanced={true}
-              >
-                <FormLabel>{translate('ListUpdateInterval')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.NUMBER}
-                  name="importListSyncInterval"
-                  min={6}
-                  unit="hours"
-                  helpText={translate('ImportListSyncIntervalHelpText')}
-                  onChange={onInputChange}
-                  {...settings.importListSyncInterval}
-                />
-              </FormGroup>
-
               <FormGroup
                 advancedSettings={advancedSettings}
                 isAdvanced={true}

frontend/src/Settings/Indexers/IndexerSettings.js

@@ -86,7 +86,7 @@ class IndexerSettings extends Component {
               />
 
               <PageToolbarButton
-                label="Manage Indexers"
+                label={translate('ManageIndexers')}
                 iconName={icons.MANAGE}
                 onPress={this.onManageIndexersPress}
               />

frontend/src/Settings/Indexers/Indexers/Manage/Edit/ManageIndexersEditModalContent.tsx

@@ -27,9 +27,9 @@ interface ManageIndexersEditModalContentProps {
 const NO_CHANGE = 'noChange';
 
 const enableOptions = [
-  { key: NO_CHANGE, value: 'No Change', disabled: true },
-  { key: 'enabled', value: 'Enabled' },
-  { key: 'disabled', value: 'Disabled' },
+  { key: NO_CHANGE, value: translate('NoChange'), disabled: true },
+  { key: 'enabled', value: translate('Enabled') },
+  { key: 'disabled', value: translate('Disabled') },
 ];
 
 function ManageIndexersEditModalContent(
@@ -97,7 +97,7 @@ function ManageIndexersEditModalContent(
           setPriority(value);
           break;
         default:
-          console.warn('EditIndexersModalContent Unknown Input');
+          console.warn(`EditIndexersModalContent Unknown Input: '${name}'`);
       }
     },
     []
@@ -111,7 +111,7 @@ function ManageIndexersEditModalContent(
 
       <ModalBody>
         <FormGroup>
-          <FormLabel>{translate('EnableRss')}</FormLabel>
+          <FormLabel>{translate('EnableRSS')}</FormLabel>
 
           <FormInputGroup
             type={inputTypes.SELECT}
@@ -162,13 +162,13 @@ function ManageIndexersEditModalContent(
 
       <ModalFooter className={styles.modalFooter}>
         <div className={styles.selected}>
-          {translate('{count} indexers selected', { count: selectedCount })}
+          {translate('CountIndexersSelected', [selectedCount])}
         </div>
 
         <div>
           <Button onPress={onModalClose}>{translate('Cancel')}</Button>
 
-          <Button onPress={save}>{translate('Apply Changes')}</Button>
+          <Button onPress={save}>{translate('ApplyChanges')}</Button>
         </div>
       </ModalFooter>
     </ModalContent>

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { IndexerAppState } from 'App/State/SettingsAppState';
+import Alert from 'Components/Alert';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -20,6 +21,7 @@ import {
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import { SelectStateInputProps } from 'typings/props';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import ManageIndexersEditModal from './Edit/ManageIndexersEditModal';
 import ManageIndexersModalRow from './ManageIndexersModalRow';
@@ -34,43 +36,43 @@ type OnSelectedChangeCallback = React.ComponentProps<
 const COLUMNS = [
   {
     name: 'name',
-    label: 'Name',
+    label: translate('Name'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'implementation',
-    label: 'Implementation',
+    label: translate('Implementation'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'enableRss',
-    label: 'Enable RSS',
+    label: translate('EnableRSS'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'enableAutomaticSearch',
-    label: 'Enable Automatic Search',
+    label: translate('EnableAutomaticSearch'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'enableInteractiveSearch',
-    label: 'Enable Interactive Search',
+    label: translate('EnableInteractiveSearch'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'priority',
-    label: 'Priority',
+    label: translate('Priority'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'tags',
-    label: 'Tags',
+    label: translate('Tags'),
     isSortable: true,
     isVisible: true,
   },
@@ -189,17 +191,21 @@ function ManageIndexersModalContent(props: ManageIndexersModalContentProps) {
     [items, setSelectState]
   );
 
-  const errorMessage = getErrorMessage(error, 'Unable to load import lists.');
+  const errorMessage = getErrorMessage(error, 'Unable to load indexers.');
   const anySelected = selectedCount > 0;
 
   return (
     <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>Manage Import Lists</ModalHeader>
+      <ModalHeader>{translate('ManageIndexers')}</ModalHeader>
       <ModalBody>
         {isFetching ? <LoadingIndicator /> : null}
 
         {error ? <div>{errorMessage}</div> : null}
 
+        {isPopulated && !error && !items.length && (
+          <Alert kind={kinds.INFO}>{translate('NoIndexersFound')}</Alert>
+        )}
+
         {isPopulated && !!items.length && !isFetching && !isFetching ? (
           <Table
             columns={COLUMNS}
@@ -234,7 +240,7 @@ function ManageIndexersModalContent(props: ManageIndexersModalContentProps) {
             isDisabled={!anySelected}
             onPress={onDeletePress}
           >
-            Delete
+            {translate('Delete')}
           </SpinnerButton>
 
           <SpinnerButton
@@ -242,7 +248,7 @@ function ManageIndexersModalContent(props: ManageIndexersModalContentProps) {
             isDisabled={!anySelected}
             onPress={onEditPress}
           >
-            Edit
+            {translate('Edit')}
           </SpinnerButton>
 
           <SpinnerButton
@@ -250,11 +256,11 @@ function ManageIndexersModalContent(props: ManageIndexersModalContentProps) {
             isDisabled={!anySelected}
             onPress={onTagsPress}
           >
-            Set Tags
+            {translate('SetTags')}
           </SpinnerButton>
         </div>
 
-        <Button onPress={onModalClose}>Close</Button>
+        <Button onPress={onModalClose}>{translate('Close')}</Button>
       </ModalFooter>
 
       <ManageIndexersEditModal
@@ -274,9 +280,11 @@ function ManageIndexersModalContent(props: ManageIndexersModalContentProps) {
       <ConfirmModal
         isOpen={isDeleteModalOpen}
         kind={kinds.DANGER}
-        title="Delete Import List(s)"
-        message={`Are you sure you want to delete ${selectedIds.length} import list(s)?`}
-        confirmLabel="Delete"
+        title={translate('DeleteSelectedIndexers')}
+        message={translate('DeleteSelectedIndexersMessageText', [
+          selectedIds.length,
+        ])}
+        confirmLabel={translate('Delete')}
         onConfirm={onConfirmDelete}
         onCancel={onDeleteModalClose}
       />

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

@@ -1,10 +1,13 @@
 import React, { useCallback } from 'react';
+import Label from 'Components/Label';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import Column from 'Components/Table/Column';
 import TableRow from 'Components/Table/TableRow';
 import TagListConnector from 'Components/TagListConnector';
+import { kinds } from 'Helpers/Props';
 import { SelectStateInputProps } from 'typings/props';
+import translate from 'Utilities/String/translate';
 import styles from './ManageIndexersModalRow.css';
 
 interface ManageIndexersModalRowProps {
@@ -59,15 +62,30 @@ function ManageIndexersModalRow(props: ManageIndexersModalRowProps) {
       </TableRowCell>
 
       <TableRowCell className={styles.enableRss}>
-        {enableRss ? 'Yes' : 'No'}
+        <Label
+          kind={enableRss ? kinds.SUCCESS : kinds.DISABLED}
+          outline={!enableRss}
+        >
+          {enableRss ? translate('Yes') : translate('No')}
+        </Label>
       </TableRowCell>
 
       <TableRowCell className={styles.enableAutomaticSearch}>
-        {enableAutomaticSearch ? 'Yes' : 'No'}
+        <Label
+          kind={enableAutomaticSearch ? kinds.SUCCESS : kinds.DISABLED}
+          outline={!enableAutomaticSearch}
+        >
+          {enableAutomaticSearch ? translate('Yes') : translate('No')}
+        </Label>
       </TableRowCell>
 
       <TableRowCell className={styles.enableInteractiveSearch}>
-        {enableInteractiveSearch ? 'Yes' : 'No'}
+        <Label
+          kind={enableInteractiveSearch ? kinds.SUCCESS : kinds.DISABLED}
+          outline={!enableInteractiveSearch}
+        >
+          {enableInteractiveSearch ? translate('Yes') : translate('No')}
+        </Label>
       </TableRowCell>
 
       <TableRowCell className={styles.priority}>{priority}</TableRowCell>

frontend/src/Settings/Indexers/Indexers/Manage/Tags/TagsModalContent.tsx

@@ -17,6 +17,7 @@ import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
 import Indexer from 'typings/Indexer';
+import translate from 'Utilities/String/translate';
 import styles from './TagsModalContent.css';
 
 interface TagsModalContentProps {
@@ -36,7 +37,7 @@ function TagsModalContent(props: TagsModalContentProps) {
   const [tags, setTags] = useState<number[]>([]);
   const [applyTags, setApplyTags] = useState('add');
 
-  const seriesTags = useMemo(() => {
+  const indexersTags = useMemo(() => {
     const tags = ids.reduce((acc: number[], id) => {
       const s = allIndexers.items.find((s: Indexer) => s.id === id);
 
@@ -69,19 +70,19 @@ function TagsModalContent(props: TagsModalContentProps) {
   }, [tags, applyTags, onApplyTagsPress]);
 
   const applyTagsOptions = [
-    { key: 'add', value: 'Add' },
-    { key: 'remove', value: 'Remove' },
-    { key: 'replace', value: 'Replace' },
+    { key: 'add', value: translate('Add') },
+    { key: 'remove', value: translate('Remove') },
+    { key: 'replace', value: translate('Replace') },
   ];
 
   return (
     <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>Tags</ModalHeader>
+      <ModalHeader>{translate('Tags')}</ModalHeader>
 
       <ModalBody>
         <Form>
           <FormGroup>
-            <FormLabel>Tags</FormLabel>
+            <FormLabel>{translate('Tags')}</FormLabel>
 
             <FormInputGroup
               type={inputTypes.TAG}
@@ -92,7 +93,7 @@ function TagsModalContent(props: TagsModalContentProps) {
           </FormGroup>
 
           <FormGroup>
-            <FormLabel>Apply Tags</FormLabel>
+            <FormLabel>{translate('ApplyTags')}</FormLabel>
 
             <FormInputGroup
               type={inputTypes.SELECT}
@@ -100,20 +101,20 @@ function TagsModalContent(props: TagsModalContentProps) {
               value={applyTags}
               values={applyTagsOptions}
               helpTexts={[
-                'How to apply tags to the selected indexer(s)',
-                'Add: Add the tags the existing list of tags',
-                'Remove: Remove the entered tags',
-                'Replace: Replace the tags with the entered tags (enter no tags to clear all tags)',
+                translate('ApplyTagsHelpTextHowToApplyIndexers'),
+                translate('ApplyTagsHelpTextAdd'),
+                translate('ApplyTagsHelpTextRemove'),
+                translate('ApplyTagsHelpTextReplace'),
               ]}
               onChange={onApplyTagsChange}
             />
           </FormGroup>
 
           <FormGroup>
-            <FormLabel>Result</FormLabel>
+            <FormLabel>{translate('Result')}</FormLabel>
 
             <div className={styles.result}>
-              {seriesTags.map((id) => {
+              {indexersTags.map((id) => {
                 const tag = tagList.find((t) => t.id === id);
 
                 if (!tag) {
@@ -127,7 +128,11 @@ function TagsModalContent(props: TagsModalContentProps) {
                 return (
                   <Label
                     key={tag.id}
-                    title={removeTag ? 'Removing tag' : 'Existing tag'}
+                    title={
+                      removeTag
+                        ? translate('RemovingTag')
+                        : translate('ExistingTag')
+                    }
                     kind={removeTag ? kinds.INVERSE : kinds.INFO}
                     size={sizes.LARGE}
                   >
@@ -144,14 +149,14 @@ function TagsModalContent(props: TagsModalContentProps) {
                     return null;
                   }
 
-                  if (seriesTags.indexOf(id) > -1) {
+                  if (indexersTags.indexOf(id) > -1) {
                     return null;
                   }
 
                   return (
                     <Label
                       key={tag.id}
-                      title={'Adding tag'}
+                      title={translate('AddingTag')}
                       kind={kinds.SUCCESS}
                       size={sizes.LARGE}
                     >
@@ -165,10 +170,10 @@ function TagsModalContent(props: TagsModalContentProps) {
       </ModalBody>
 
       <ModalFooter>
-        <Button onPress={onModalClose}>Cancel</Button>
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
 
         <Button kind={kinds.PRIMARY} onPress={onApplyPress}>
-          Apply
+          {translate('Apply')}
         </Button>
       </ModalFooter>
     </ModalContent>

frontend/src/Settings/Indexers/Options/IndexerOptions.js

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import FieldSet from 'Components/FieldSet';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import { inputTypes } from 'Helpers/Props';
+import { inputTypes, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 
 function IndexerOptions(props) {
@@ -28,9 +29,9 @@ function IndexerOptions(props) {
 
       {
         !isFetching && error &&
-          <div>
+          <Alert kind={kinds.DANGER}>
             {translate('UnableToLoadIndexerOptions')}
-          </div>
+          </Alert>
       }
 
       {

frontend/src/Settings/MediaManagement/MediaManagement.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import FieldSet from 'Components/FieldSet';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
@@ -8,7 +9,7 @@ import FormLabel from 'Components/Form/FormLabel';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
-import { inputTypes, sizes } from 'Helpers/Props';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import RootFoldersConnector from 'RootFolder/RootFoldersConnector';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import translate from 'Utilities/String/translate';
@@ -72,9 +73,9 @@ class MediaManagement extends Component {
           {
             !isFetching && error ?
               <FieldSet legend={translate('NamingSettings')}>
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadMediaManagementSettings')}
-                </div>
+                </Alert>
               </FieldSet> : null
           }
 

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

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import FieldSet from 'Components/FieldSet';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
@@ -7,7 +8,7 @@ import FormInputButton from 'Components/Form/FormInputButton';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import { inputTypes, sizes } from 'Helpers/Props';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import NamingModal from './NamingModal';
 import styles from './Naming.css';
@@ -110,9 +111,9 @@ class Naming extends Component {
 
         {
           !isFetching && error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('UnableToLoadNamingSettings')}
-            </div>
+            </Alert>
         }
 
         {

frontend/src/Settings/Metadata/Options/MetadataOptions.js

@@ -6,8 +6,9 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import { inputTypes } from 'Helpers/Props';
+import { inputTypes, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
+import Alert from '../../../Components/Alert';
 
 // Note: Do Not Translate Certification Countries
 
@@ -43,9 +44,9 @@ function MetadataOptions(props) {
 
       {
         !isFetching && error &&
-          <div>
+          <Alert kind={kinds.DANGER}>
             {translate('UnableToLoadIndexerOptions')}
-          </div>
+          </Alert>
       }
 
       {

frontend/src/Settings/Profiles/Delay/DelayProfile.js

@@ -141,7 +141,7 @@ class DelayProfile extends Component {
           isOpen={this.state.isDeleteDelayProfileModalOpen}
           kind={kinds.DANGER}
           title={translate('DeleteDelayProfile')}
-          message={translate('AreYouSureYouWantToDeleteThisDelayProfile')}
+          message={translate('DeleteDelayProfileMessageText')}
           confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteDelayProfile}
           onCancel={this.onDeleteDelayProfileModalClose}