Localization framework

frontend/src/Settings/Notifications/NotificationSettings.js

@@ -2,11 +2,12 @@ import React from 'react';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import translate from 'Utilities/String/translate';
 import NotificationsConnector from './Notifications/NotificationsConnector';
 
 function NotificationSettings() {
   return (
-    <PageContent title="Connect Settings">
+    <PageContent title={translate('ConnectSettings')}>
       <SettingsToolbarConnector
         showSave={false}
       />

frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.js

@@ -6,6 +6,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 translate from 'Utilities/String/translate';
 import AddNotificationItem from './AddNotificationItem';
 import styles from './AddNotificationModalContent.css';
 
@@ -38,7 +39,9 @@ class AddNotificationModalContent extends Component {
 
           {
             !isSchemaFetching && !!schemaError &&
-              <div>Unable to add a new notification, please try again.</div>
+              <div>
+                {translate('UnableToAddANewNotificationPleaseTryAgain')}
+              </div>
           }
 
           {

frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.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 translate from 'Utilities/String/translate';
 import NotificationEventItems from './NotificationEventItems';
 import styles from './EditNotificationModalContent.css';
 
@@ -58,7 +59,9 @@ function EditNotificationModalContent(props) {
 
         {
           !isFetching && !!error &&
-            <div>Unable to add a new notification, please try again.</div>
+            <div>
+              {translate('UnableToAddANewNotificationPleaseTryAgain')}
+            </div>
         }
 
         {
@@ -75,7 +78,9 @@ function EditNotificationModalContent(props) {
               }
 
               <FormGroup>
-                <FormLabel>Name</FormLabel>
+                <FormLabel>
+                  {translate('Name')}
+                </FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.TEXT}
@@ -91,12 +96,14 @@ function EditNotificationModalContent(props) {
               />
 
               <FormGroup>
-                <FormLabel>Tags</FormLabel>
+                <FormLabel>
+                  {translate('Tags')}
+                </FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.TAG}
                   name="tags"
-                  helpText="Only send notifications for author with at least one matching tag"
+                  helpText={translate('TagsHelpText')}
                   {...tags}
                   onChange={onInputChange}
                 />

frontend/src/Settings/Notifications/Notifications/Notification.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 translate from 'Utilities/String/translate';
 import EditNotificationModalConnector from './EditNotificationModalConnector';
 import styles from './Notification.css';
 
@@ -159,9 +160,9 @@ class Notification extends Component {
         <ConfirmModal
           isOpen={this.state.isDeleteNotificationModalOpen}
           kind={kinds.DANGER}
-          title="Delete Notification"
-          message={`Are you sure you want to delete the notification '${name}'?`}
-          confirmLabel="Delete"
+          title={translate('DeleteNotification')}
+          message={translate('DeleteNotificationMessageText', [name])}
+          confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteNotification}
           onCancel={this.onDeleteNotificationModalClose}
         />

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

@@ -5,6 +5,7 @@ import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormInputHelpText from 'Components/Form/FormInputHelpText';
 import FormLabel from 'Components/Form/FormLabel';
 import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './NotificationEventItems.css';
 
 function NotificationEventItems(props) {
@@ -35,7 +36,9 @@ function NotificationEventItems(props) {
 
   return (
     <FormGroup>
-      <FormLabel>Notification Triggers</FormLabel>
+      <FormLabel>
+        {translate('NotificationTriggers')}
+      </FormLabel>
       <div>
         <FormInputHelpText
           text="Select which events should trigger this notification"
@@ -46,7 +49,7 @@ function NotificationEventItems(props) {
             <FormInputGroup
               type={inputTypes.CHECK}
               name="onGrab"
-              helpText="On Grab"
+              helpText={translate('OnGrabHelpText')}
               isDisabled={!supportsOnGrab.value}
               {...onGrab}
               onChange={onInputChange}
@@ -57,7 +60,7 @@ function NotificationEventItems(props) {
             <FormInputGroup
               type={inputTypes.CHECK}
               name="onReleaseImport"
-              helpText="On Release Import"
+              helpText={translate('OnReleaseImportHelpText')}
               isDisabled={!supportsOnReleaseImport.value}
               {...onReleaseImport}
               onChange={onInputChange}
@@ -70,7 +73,7 @@ function NotificationEventItems(props) {
                 <FormInputGroup
                   type={inputTypes.CHECK}
                   name="onUpgrade"
-                  helpText="On Upgrade"
+                  helpText={translate('OnUpgradeHelpText')}
                   isDisabled={!supportsOnUpgrade.value}
                   {...onUpgrade}
                   onChange={onInputChange}
@@ -82,7 +85,7 @@ function NotificationEventItems(props) {
             <FormInputGroup
               type={inputTypes.CHECK}
               name="onDownloadFailure"
-              helpText="On Download Failure"
+              helpText={translate('OnDownloadFailureHelpText')}
               isDisabled={!supportsOnDownloadFailure.value}
               {...onDownloadFailure}
               onChange={onInputChange}
@@ -93,7 +96,7 @@ function NotificationEventItems(props) {
             <FormInputGroup
               type={inputTypes.CHECK}
               name="onImportFailure"
-              helpText="On Import Failure"
+              helpText={translate('OnImportFailureHelpText')}
               isDisabled={!supportsOnImportFailure.value}
               {...onImportFailure}
               onChange={onInputChange}
@@ -104,7 +107,7 @@ function NotificationEventItems(props) {
             <FormInputGroup
               type={inputTypes.CHECK}
               name="onRename"
-              helpText="On Rename"
+              helpText={translate('OnRenameHelpText')}
               isDisabled={!supportsOnRename.value}
               {...onRename}
               onChange={onInputChange}
@@ -115,7 +118,7 @@ function NotificationEventItems(props) {
             <FormInputGroup
               type={inputTypes.CHECK}
               name="onBookRetag"
-              helpText="On Book Retag"
+              helpText={translate('OnBookRetagHelpText')}
               isDisabled={!supportsOnBookRetag.value}
               {...onBookRetag}
               onChange={onInputChange}
@@ -126,7 +129,7 @@ function NotificationEventItems(props) {
             <FormInputGroup
               type={inputTypes.CHECK}
               name="onHealthIssue"
-              helpText="On Health Issue"
+              helpText={translate('OnHealthIssueHelpText')}
               isDisabled={!supportsOnHealthIssue.value}
               {...onHealthIssue}
               onChange={onInputChange}
@@ -139,7 +142,7 @@ function NotificationEventItems(props) {
                 <FormInputGroup
                   type={inputTypes.CHECK}
                   name="includeHealthWarnings"
-                  helpText="Include Health Warnings"
+                  helpText={translate('IncludeHealthWarningsHelpText')}
                   isDisabled={!supportsOnHealthIssue.value}
                   {...includeHealthWarnings}
                   onChange={onInputChange}

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

@@ -5,6 +5,7 @@ import FieldSet from 'Components/FieldSet';
 import Icon from 'Components/Icon';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import AddNotificationModal from './AddNotificationModal';
 import EditNotificationModalConnector from './EditNotificationModalConnector';
 import Notification from './Notification';
@@ -58,9 +59,9 @@ class Notifications extends Component {
     } = this.state;
 
     return (
-      <FieldSet legend="Connections">
+      <FieldSet legend={translate('Connections')}>
         <PageSectionContent
-          errorMessage="Unable to load Notifications"
+          errorMessage={translate('UnableToLoadNotifications')}
           {...otherProps}
         >
           <div className={styles.notifications}>