Translate Frontend Components and Helpers

(cherry picked from commit e777b7018481b18ef18f1116f75983a037bf0849)

Closes #8995

frontend/src/Components/Error/ErrorBoundaryError.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import StackTrace from 'stacktrace-js';
+import translate from 'Utilities/String/translate';
 import styles from './ErrorBoundaryError.css';
 
 interface ErrorBoundaryErrorProps {
@@ -18,7 +19,7 @@ function ErrorBoundaryError(props: ErrorBoundaryErrorProps) {
     className = styles.container,
     messageClassName = styles.message,
     detailsClassName = styles.details,
-    message = 'There was an error loading this content',
+    message = translate('ErrorLoadingContent'),
     error,
     info,
   } = props;

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

@@ -3,7 +3,10 @@ import translate from 'Utilities/String/translate';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 const statusTagList = [
-  { id: 'tba', name: 'TBA' },
+  { id: 'tba',
+    get name() {
+      return translate('Tba');
+    } },
   {
     id: 'announced',
     get name() {

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

@@ -53,7 +53,7 @@ function CustomFiltersModalContent(props) {
 
         <div className={styles.addButtonContainer}>
           <Button onPress={onAddCustomFilter}>
-            Add Custom Filter
+            {translate('AddCustomFilter')}
           </Button>
         </div>
       </ModalBody>

frontend/src/Components/Form/IndexerSelectInputConnector.js

@@ -1,9 +1,11 @@
+import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchIndexers } from 'Store/Actions/settingsActions';
 import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
@@ -18,15 +20,17 @@ function createMapStateToProps() {
         items
       } = indexers;
 
-      const values = items.sort(sortByProp('name')).map((indexer) => ({
-        key: indexer.id,
-        value: indexer.name
-      }));
+      const values = _.map(items.sort(sortByProp('name')), (indexer) => {
+        return {
+          key: indexer.id,
+          value: indexer.name
+        };
+      });
 
       if (includeAny) {
         values.unshift({
           key: 0,
-          value: '(Any)'
+          value: `(${translate('Any')})`
         });
       }
 

frontend/src/Components/Form/QualityProfileSelectInputConnector.js

@@ -33,7 +33,7 @@ function createMapStateToProps() {
       if (includeMixed) {
         values.unshift({
           key: 'mixed',
-          value: '(Mixed)',
+          value: `(${translate('Mixed')})`,
           isDisabled: true
         });
       }

frontend/src/Components/Form/RootFolderSelectInputConnector.js

@@ -55,7 +55,7 @@ function createMapStateToProps() {
 
       values.push({
         key: ADD_NEW_KEY,
-        value: 'Add a new path'
+        value: translate('AddANewPath')
       });
 
       return {

frontend/src/Components/Form/RootFolderSelectInputOption.js

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import EnhancedSelectInputOption from './EnhancedSelectInputOption';
 import styles from './RootFolderSelectInputOption.css';
 
@@ -47,14 +48,14 @@ function RootFolderSelectInputOption(props) {
           freeSpace == null ?
             null :
             <div className={styles.freeSpace}>
-              {formatBytes(freeSpace)} Free
+              {translate('RootFolderSelectFreeSpace', { freeSpace: formatBytes(freeSpace) })}
             </div>
         }
 
         {
           isMissing ?
             <div className={styles.isMissing}>
-              Missing
+              {translate('Missing')}
             </div> :
             null
         }
@@ -67,8 +68,8 @@ RootFolderSelectInputOption.propTypes = {
   id: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   freeSpace: PropTypes.number,
-  movieFolder: PropTypes.string,
   isMissing: PropTypes.bool,
+  movieFolder: PropTypes.string,
   isMobile: PropTypes.bool.isRequired,
   isWindows: PropTypes.bool
 };

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue';
 import styles from './RootFolderSelectInputSelectedValue.css';
 
@@ -39,7 +40,7 @@ function RootFolderSelectInputSelectedValue(props) {
       {
         freeSpace != null && includeFreeSpace &&
           <div className={styles.freeSpace}>
-            {formatBytes(freeSpace)} Free
+            {translate('RootFolderSelectFreeSpace', { freeSpace: formatBytes(freeSpace) })}
           </div>
       }
     </EnhancedSelectInputSelectedValue>

frontend/src/Components/Form/UMaskInput.js

@@ -8,27 +8,37 @@ import styles from './UMaskInput.css';
 const umaskOptions = [
   {
     key: '755',
-    value: '755 - Owner write, Everyone else read',
+    get value() {
+      return translate('Umask755Description', { octal: '755' });
+    },
     hint: 'drwxr-xr-x'
   },
   {
     key: '775',
-    value: '775 - Owner & Group write, Other read',
+    get value() {
+      return translate('Umask775Description', { octal: '775' });
+    },
     hint: 'drwxrwxr-x'
   },
   {
     key: '770',
-    value: '770 - Owner & Group write',
+    get value() {
+      return translate('Umask770Description', { octal: '770' });
+    },
     hint: 'drwxrwx---'
   },
   {
     key: '750',
-    value: '750 - Owner write, Group read',
+    get value() {
+      return translate('Umask750Description', { octal: '750' });
+    },
     hint: 'drwxr-x---'
   },
   {
     key: '777',
-    value: '777 - Everyone write',
+    get value() {
+      return translate('Umask777Description', { octal: '777' });
+    },
     hint: 'drwxrwxrwx'
   }
 ];

frontend/src/Components/Menu/FilterMenu.js

@@ -58,9 +58,9 @@ class FilterMenu extends Component {
         >
           <ButtonComponent
             iconName={icons.FILTER}
+            showIndicator={selectedFilterKey !== 'all'}
             text={translate('Filter')}
             isDisabled={isDisabled}
-            showIndicator={selectedFilterKey !== 'all'}
           />
 
           <FilterMenuContent

frontend/src/Components/Menu/Menu.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { Manager, Popper, Reference } from 'react-popper';
 import Portal from 'Components/Portal';
 import { align } from 'Helpers/Props';
-import getUniqueElememtId from 'Utilities/getUniqueElementId';
+import getUniqueElementId from 'Utilities/getUniqueElementId';
 import styles from './Menu.css';
 
 const sharedPopperOptions = {
@@ -38,8 +38,8 @@ class Menu extends Component {
     super(props, context);
 
     this._scheduleUpdate = null;
-    this._menuButtonId = getUniqueElememtId();
-    this._menuContentId = getUniqueElememtId();
+    this._menuButtonId = getUniqueElementId();
+    this._menuContentId = getUniqueElementId();
 
     this.state = {
       isMenuOpen: false,

frontend/src/Components/Modal/ModalError.js

@@ -18,7 +18,7 @@ function ModalError(props) {
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        Error
+        {translate('Error')}
       </ModalHeader>
 
       <ModalBody>
@@ -26,7 +26,7 @@ function ModalError(props) {
           messageClassName={styles.message}
           detailsClassName={styles.details}
           {...otherProps}
-          message={translate('ThereWasAnErrorLoadingThisItem')}
+          message={translate('ErrorLoadingItem')}
         />
       </ModalBody>
 

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

@@ -56,7 +56,7 @@ function KeyboardShortcutsModalContent(props) {
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        Keyboard Shortcuts
+        {translate('KeyboardShortcuts')}
       </ModalHeader>
 
       <ModalBody>

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

@@ -92,7 +92,7 @@ class MovieSearchInput extends Component {
     if (item.type === ADD_NEW_TYPE) {
       return (
         <div className={styles.addNewMovieSuggestion}>
-          Search for {query}
+          {translate('SearchForQuery', { query })}
         </div>
       );
     }

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

@@ -79,7 +79,7 @@ class PageHeader extends Component {
           <IconButton
             className={styles.donate}
             name={icons.HEART}
-            aria-label="Donate"
+            aria-label={translate('Donate')}
             to="https://radarr.video/donate"
             size={14}
             title={translate('Donate')}

frontend/src/Components/Page/PageContentError.js

@@ -10,7 +10,7 @@ function PageContentError(props) {
       <PageContentBody>
         <ErrorBoundaryError
           {...props}
-          message={translate('ThereWasAnErrorLoadingThisPage')}
+          message={translate('ErrorLoadingPage')}
         />
       </PageContentBody>
     </div>

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

@@ -170,11 +170,11 @@ class TableOptionsModal extends Component {
                     {
                       canModifyColumns ?
                         <FormGroup>
-                          <FormLabel>{translate('Columns')}</FormLabel>
+                          <FormLabel>{translate('TableColumns')}</FormLabel>
 
                           <div>
                             <FormInputHelpText
-                              text={translate('TableOptionsColumnsMessage')}
+                              text={translate('TableColumnsHelpText')}
                             />
 
                             <div className={styles.columns}>

frontend/src/Components/Table/TablePager.js

@@ -6,6 +6,7 @@ import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './TablePager.css';
 
 class TablePager extends Component {
@@ -156,7 +157,7 @@ class TablePager extends Component {
 
         <div className={styles.recordsContainer}>
           <div className={styles.records}>
-            Total records: {totalRecords}
+            {translate('TotalRecords', { totalRecords })}
           </div>
         </div>
       </div>

frontend/src/Components/keyboardShortcuts.js

@@ -7,63 +7,63 @@ export const shortcuts = {
   OPEN_KEYBOARD_SHORTCUTS_MODAL: {
     key: '?',
     get name() {
-      return translate('OpenThisModal');
+      return translate('KeyboardShortcutsOpenModal');
     }
   },
 
   CLOSE_MODAL: {
     key: 'Esc',
     get name() {
-      return translate('CloseCurrentModal');
+      return translate('KeyboardShortcutsCloseModal');
     }
   },
 
   ACCEPT_CONFIRM_MODAL: {
     key: 'Enter',
     get name() {
-      return translate('AcceptConfirmationModal');
+      return translate('KeyboardShortcutsConfirmModal');
     }
   },
 
   MOVIE_SEARCH_INPUT: {
     key: 's',
     get name() {
-      return translate('FocusSearchBox');
+      return translate('KeyboardShortcutsFocusSearchBox');
     }
   },
 
   SAVE_SETTINGS: {
     key: 'mod+s',
     get name() {
-      return translate('SaveSettings');
+      return translate('KeyboardShortcutsSaveSettings');
     }
   },
 
   SCROLL_TOP: {
     key: 'mod+home',
     get name() {
-      return translate('MovieIndexScrollTop');
+      return translate('KeyboardShortcutsMovieIndexScrollTop');
     }
   },
 
   SCROLL_BOTTOM: {
     key: 'mod+end',
     get name() {
-      return translate('MovieIndexScrollBottom');
+      return translate('KeyboardShortcutsMovieIndexScrollBottom');
     }
   },
 
   DETAILS_NEXT: {
     key: '→',
     get name() {
-      return translate('MovieDetailsNextMovie');
+      return translate('KeyboardShortcutsMovieDetailsNextMovie');
     }
   },
 
   DETAILS_PREVIOUS: {
     key: '←',
     get name() {
-      return translate('MovieDetailsPreviousMovie');
+      return translate('KeyboardShortcutsMovieDetailsPreviousMovie');
     }
   }
 };