Translate Frontend Components, Episode and Helpers

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

@@ -15,6 +15,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import TableOptionsColumn from './TableOptionsColumn';
 import TableOptionsColumnDragPreview from './TableOptionsColumnDragPreview';
 import TableOptionsColumnDragSource from './TableOptionsColumnDragSource';
@@ -50,9 +51,9 @@ class TableOptionsModal extends Component {
     let pageSizeError = null;
 
     if (value < 5) {
-      pageSizeError = 'Page size must be at least 5';
+      pageSizeError = translate('TablePageSizeMinimum', { minimumValue: '5' });
     } else if (value > 250) {
-      pageSizeError = 'Page size must not exceed 250';
+      pageSizeError = translate('TablePageSizeMaximum', { maximumValue: '250' });
     } else {
       this.props.onTableOptionChange({ pageSize: value });
     }
@@ -136,7 +137,7 @@ class TableOptionsModal extends Component {
             isOpen ?
               <ModalContent onModalClose={onModalClose}>
                 <ModalHeader>
-                  Table Options
+                  {translate('TableOptions')}
                 </ModalHeader>
 
                 <ModalBody>
@@ -144,13 +145,13 @@ class TableOptionsModal extends Component {
                     {
                       hasPageSize ?
                         <FormGroup>
-                          <FormLabel>Page Size</FormLabel>
+                          <FormLabel>{translate('PageSize')}</FormLabel>
 
                           <FormInputGroup
                             type={inputTypes.NUMBER}
                             name="pageSize"
                             value={pageSize || 0}
-                            helpText="Number of items to show on each page"
+                            helpText={translate('TablePageSizeHelpText')}
                             errors={pageSizeError ? [{ message: pageSizeError }] : undefined}
                             onChange={this.onPageSizeChange}
                           />
@@ -168,11 +169,11 @@ class TableOptionsModal extends Component {
                     {
                       canModifyColumns ?
                         <FormGroup>
-                          <FormLabel>Columns</FormLabel>
+                          <FormLabel>{translate('TableColumns')}</FormLabel>
 
                           <div>
                             <FormInputHelpText
-                              text="Choose which columns are visible and which order they appear in"
+                              text={translate('TableColumnsHelpText')}
                             />
 
                             <div className={styles.columns}>
@@ -231,7 +232,7 @@ class TableOptionsModal extends Component {
                   <Button
                     onPress={onModalClose}
                   >
-                    Close
+                    {translate('Close')}
                   </Button>
                 </ModalFooter>
               </ModalContent> :