Add Translations to Settings Pages

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

@@ -8,6 +8,7 @@ import Popover from 'Components/Tooltip/Popover';
 import { kinds, tooltipPositions } from 'Helpers/Props';
 import formatBytes from 'Utilities/Number/formatBytes';
 import roundNumber from 'Utilities/Number/roundNumber';
+import translate from 'Utilities/String/translate';
 import QualityDefinitionLimits from './QualityDefinitionLimits';
 import styles from './QualityDefinition.css';
 
@@ -186,13 +187,13 @@ class QualityDefinition extends Component {
     } = this.state;
 
     const minBytes = minSize * 1024 * 1024;
-    const minSixty = `${formatBytes(minBytes * 60)}/h`;
+    const minSixty = `${formatBytes(minBytes * 60)}/${translate('HourShorthand')}`;
 
     const preferredBytes = preferredSize * 1024 * 1024;
-    const preferredSixty = preferredBytes ? `${formatBytes(preferredBytes * 60)}/h` : 'Unlimited';
+    const preferredSixty = preferredBytes ? `${formatBytes(preferredBytes * 60)}/${translate('HourShorthand')}` : translate('Unlimited');
 
     const maxBytes = maxSize && maxSize * 1024 * 1024;
-    const maxSixty = maxBytes ? `${formatBytes(maxBytes * 60)}/h` : 'Unlimited';
+    const maxSixty = maxBytes ? `${formatBytes(maxBytes * 60)}/${translate('HourShorthand')}` : translate('Unlimited');
 
     return (
       <div className={styles.qualityDefinition}>
@@ -231,11 +232,11 @@ class QualityDefinition extends Component {
                 anchor={
                   <Label kind={kinds.INFO}>{minSixty}</Label>
                 }
-                title="Minimum Limits"
+                title={translate('MinimumLimits')}
                 body={
                   <QualityDefinitionLimits
                     bytes={minBytes}
-                    message="No minimum for any runtime"
+                    message={translate('NoMinimumForAnyRuntime')}
                   />
                 }
                 position={tooltipPositions.BOTTOM}
@@ -247,11 +248,11 @@ class QualityDefinition extends Component {
                 anchor={
                   <Label kind={kinds.SUCCESS}>{preferredSixty}</Label>
                 }
-                title="Preferred Size"
+                title={translate('PreferredSize')}
                 body={
                   <QualityDefinitionLimits
                     bytes={preferredBytes}
-                    message="No limit for any runtime"
+                    message={translate('NoLimitForAnyRuntime')}
                   />
                 }
                 position={tooltipPositions.BOTTOM}
@@ -263,11 +264,11 @@ class QualityDefinition extends Component {
                 anchor={
                   <Label kind={kinds.WARNING}>{maxSixty}</Label>
                 }
-                title="Maximum Limits"
+                title={translate('MaximumLimits')}
                 body={
                   <QualityDefinitionLimits
                     bytes={maxBytes}
-                    message="No limit for any runtime"
+                    message={translate('NoLimitForAnyRuntime')}
                   />
                 }
                 position={tooltipPositions.BOTTOM}
@@ -280,7 +281,7 @@ class QualityDefinition extends Component {
           advancedSettings &&
             <div className={styles.megabytesPerMinute}>
               <div>
-                Min
+                {translate('Min')}
 
                 <NumberInput
                   className={styles.sizeInput}
@@ -295,7 +296,7 @@ class QualityDefinition extends Component {
               </div>
 
               <div>
-                Preferred
+                {translate('Preferred')}
 
                 <NumberInput
                   className={styles.sizeInput}
@@ -310,7 +311,7 @@ class QualityDefinition extends Component {
               </div>
 
               <div>
-                Max
+                {translate('Max')}
 
                 <NumberInput
                   className={styles.sizeInput}