diff --git a/src/App.jsx b/src/App.jsx index 436a841621..d47c545e3a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,7 +9,7 @@ import { Button } from '@patternfly/react-core'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { RootDialog } from './contexts/RootDialog'; @@ -66,92 +66,88 @@ class App extends Component { render () { const { isAboutModalOpen, isNavOpen } = this.state; - const { render, routeGroups = [], navLabel = '' } = this.props; + const { render, routeGroups = [], navLabel = '', i18n } = this.props; return ( {({ ansible_version, version, me }) => ( - - {({ i18n }) => ( - - {({ - title, - bodyText, - variant = 'info', - clearRootDialogMessage - }) => ( - - {(title || bodyText) && ( - - {i18n._(t`Close`)} - - ]} + + {({ + title, + bodyText, + variant = 'info', + clearRootDialogMessage + }) => ( + + {(title || bodyText) && ( + - {bodyText} - - )} - } - toolbar={( - - )} - /> - )} - sidebar={( - - - {routeGroups.map( - ({ groupId, groupTitle, routes }) => ( - - ) - )} - - - )} - /> - )} - > - {render && render({ routeGroups })} - - - + {i18n._(t`Close`)} + + ]} + > + {bodyText} + )} - + } + toolbar={( + + )} + /> + )} + sidebar={( + + + {routeGroups.map( + ({ groupId, groupTitle, routes }) => ( + + ) + )} + + + )} + /> + )} + > + {render && render({ routeGroups })} + + + )} - + )} ); @@ -159,4 +155,4 @@ class App extends Component { } export { App as _App }; -export default withNetwork(App); +export default withI18n()(withNetwork(App)); diff --git a/src/components/About.jsx b/src/components/About.jsx index 9d8b8abb7c..aceb91074e 100644 --- a/src/components/About.jsx +++ b/src/components/About.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { I18n } from '@lingui/react'; -import { Trans, t } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { AboutModal, TextContent, @@ -41,46 +41,43 @@ class About extends React.Component { ansible_version, version, isOpen, - onClose + onClose, + i18n } = this.props; const speechBubble = this.createSpeechBubble(version); return ( - - {({ i18n }) => ( - - 
-              { speechBubble }
-              {`
-              \\
-              \\   ^__^
-                  (oo)\\_______
-                  (__)      A )\\
-                      ||----w |
-                      ||     ||
-                        `}
-
- - - - Ansible Version - - { ansible_version } - - - - )} - + + 
+          { speechBubble }
+          {`
+          \\
+          \\   ^__^
+              (oo)\\_______
+              (__)      A )\\
+                  ||----w |
+                  ||     ||
+                    `}
+
+ + + + {i18n._(t`Ansible Version`)} + + { ansible_version } + + + ); } } @@ -98,4 +95,4 @@ About.defaultProps = { version: null, }; -export default About; +export default withI18n()(About); diff --git a/src/components/AddRole/AddResourceRole.jsx b/src/components/AddRole/AddResourceRole.jsx index e01aaff669..17b3a78b17 100644 --- a/src/components/AddRole/AddResourceRole.jsx +++ b/src/components/AddRole/AddResourceRole.jsx @@ -1,6 +1,6 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; -import { I18n, i18nMark } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Wizard } from '@patternfly/react-core'; import SelectResourceStep from './SelectResourceStep'; @@ -127,113 +127,103 @@ class AddResourceRole extends React.Component { } = this.state; const { onClose, - roles + roles, + i18n } = this.props; const userColumns = [ - { name: i18nMark('Username'), key: 'username', isSortable: true } + { name: i18n._(t`Username`), key: 'username', isSortable: true } ]; const teamColumns = [ - { name: i18nMark('Name'), key: 'name', isSortable: true } + { name: i18n._(t`Name`), key: 'name', isSortable: true } ]; let wizardTitle = ''; switch (selectedResource) { case 'users': - wizardTitle = i18nMark('Add User Roles'); + wizardTitle = i18n._(t`Add User Roles`); break; case 'teams': - wizardTitle = i18nMark('Add Team Roles'); + wizardTitle = i18n._(t`Add Team Roles`); break; default: - wizardTitle = i18nMark('Add Roles'); + wizardTitle = i18n._(t`Add Roles`); } const steps = [ { id: 1, - name: i18nMark('Select Users Or Teams'), + name: i18n._(t`Select Users Or Teams`), component: ( - - {({ i18n }) => ( -
- this.handleResourceSelect('users')} - /> - this.handleResourceSelect('teams')} - /> -
- )} - +
+ this.handleResourceSelect('users')} + /> + this.handleResourceSelect('teams')} + /> +
), enableNext: selectedResource !== null }, { id: 2, - name: i18nMark('Select items from list'), + name: i18n._(t`Select items from list`), component: ( - - {({ i18n }) => ( - - {selectedResource === 'users' && ( - - )} - {selectedResource === 'teams' && ( - - )} - + + {selectedResource === 'users' && ( + )} - + {selectedResource === 'teams' && ( + + )} + ), enableNext: selectedResourceRows.length > 0 }, { id: 3, - name: i18nMark('Apply roles'), + name: i18n._(t`Apply roles`), component: ( - - {({ i18n }) => ( - - )} - + ), - nextButtonText: i18nMark('Save'), + nextButtonText: i18n._(t`Save`), enableNext: selectedRoleRows.length > 0 } ]; const currentStep = steps.find(step => step.id === currentStepId); + // TODO: somehow internationalize steps and currentStep.nextButtonText return ( - {isLoading && (
Loading...
)} + {isLoading && (
{i18n._(t`Loading...`)}
)} {isInitialized && ( {selectedResourceRows.length > 0 && ( @@ -146,11 +148,11 @@ SelectResourceStep.propTypes = { SelectResourceStep.defaultProps = { displayKey: 'name', onRowClick: () => {}, - selectedLabel: i18nMark('Selected Items'), + selectedLabel: null, selectedResourceRows: [], sortedColumnKey: 'name', itemName: 'item', }; export { SelectResourceStep as _SelectResourceStep }; -export default withRouter(SelectResourceStep); +export default withI18n()(withRouter(SelectResourceStep)); diff --git a/src/components/AddRole/SelectRoleStep.jsx b/src/components/AddRole/SelectRoleStep.jsx index e0d052d76a..98caad4728 100644 --- a/src/components/AddRole/SelectRoleStep.jsx +++ b/src/components/AddRole/SelectRoleStep.jsx @@ -1,7 +1,8 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; -import { i18nMark } from '@lingui/react'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import CheckboxCard from './CheckboxCard'; import SelectedList from '../SelectedList'; @@ -14,7 +15,8 @@ class RolesStep extends React.Component { selectedListKey, selectedListLabel, selectedResourceRows, - selectedRoleRows + selectedRoleRows, + i18n } = this.props; return ( @@ -24,7 +26,7 @@ class RolesStep extends React.Component { @@ -61,9 +63,9 @@ RolesStep.propTypes = { RolesStep.defaultProps = { onRolesClick: () => {}, selectedListKey: 'name', - selectedListLabel: i18nMark('Selected'), + selectedListLabel: null, selectedResourceRows: [], selectedRoleRows: [] }; -export default RolesStep; +export default withI18n()(RolesStep); diff --git a/src/components/AnsibleSelect/AnsibleSelect.jsx b/src/components/AnsibleSelect/AnsibleSelect.jsx index c4de1c51e7..062a8dacc3 100644 --- a/src/components/AnsibleSelect/AnsibleSelect.jsx +++ b/src/components/AnsibleSelect/AnsibleSelect.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { FormSelect, @@ -20,29 +20,25 @@ class AnsibleSelect extends React.Component { } render () { - const { label, value, data, defaultSelected } = this.props; + const { label, value, data, defaultSelected, i18n } = this.props; return ( - - {({ i18n }) => ( - - {data.map((datum) => ( - datum === defaultSelected ? ( - - ) : ( - - ) - ))} - - )} - + + {data.map((datum) => ( + datum === defaultSelected ? ( + + ) : ( + + ) + ))} + ); } } @@ -62,4 +58,4 @@ AnsibleSelect.propTypes = { value: PropTypes.string.isRequired, }; -export default AnsibleSelect; +export default withI18n()(AnsibleSelect); diff --git a/src/components/CardCloseButton.jsx b/src/components/CardCloseButton.jsx index 9b8dffe41c..c26cb76b84 100644 --- a/src/components/CardCloseButton.jsx +++ b/src/components/CardCloseButton.jsx @@ -3,40 +3,32 @@ import { string } from 'prop-types'; import { Link } from 'react-router-dom'; import { Button } from '@patternfly/react-core'; import { TimesIcon } from '@patternfly/react-icons'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; -function CardCloseButton ({ linkTo, ...props }) { +function CardCloseButton ({ linkTo, i18n, i18nHash, ...props }) { if (linkTo) { return ( - - {({ i18n }) => ( - - - - )} - + + + ); } return ( - - {({ i18n }) => ( - - )} - + ); } CardCloseButton.propTypes = { @@ -46,4 +38,4 @@ CardCloseButton.defaultProps = { linkTo: null, }; -export default CardCloseButton; +export default withI18n()(CardCloseButton); diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx index e73745ff44..599362d0ef 100644 --- a/src/components/DataListToolbar/DataListToolbar.jsx +++ b/src/components/DataListToolbar/DataListToolbar.jsx @@ -1,6 +1,6 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Checkbox, @@ -85,70 +85,66 @@ class DataListToolbar extends React.Component { sortOrder, sortedColumnKey, additionalControls, + i18n } = this.props; const showExpandCollapse = (onCompact && onExpand); return ( - - {({ i18n }) => ( - - - - { showSelectAll && ( - - - - - - - )} - - + + + { showSelectAll && ( + + + - - - - + )} + + + + + + + + + + {showExpandCollapse && ( + + + + - - {showExpandCollapse && ( - - - - - - { additionalControls && ( - - )} - + + { additionalControls && ( + )} - - {additionalControls} - - - - - - )} - + + )} + + {additionalControls} + + + + ); } } @@ -184,4 +180,4 @@ DataListToolbar.defaultProps = { additionalControls: [], }; -export default DataListToolbar; +export default withI18n()(DataListToolbar); diff --git a/src/components/ExpandCollapse/ExpandCollapse.jsx b/src/components/ExpandCollapse/ExpandCollapse.jsx index dfd0402c3c..cabc7f2f3b 100644 --- a/src/components/ExpandCollapse/ExpandCollapse.jsx +++ b/src/components/ExpandCollapse/ExpandCollapse.jsx @@ -1,6 +1,6 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Button, @@ -22,36 +22,33 @@ class ExpandCollapse extends React.Component { const { onCompact, onExpand, - isCompact + isCompact, + i18n } = this.props; return ( - - {({ i18n }) => ( - - - - - - - - - )} - + + + + + + + + ); } } @@ -64,4 +61,4 @@ ExpandCollapse.propTypes = { ExpandCollapse.defaultProps = {}; -export default ExpandCollapse; +export default withI18n()(ExpandCollapse); diff --git a/src/components/FormActionGroup/FormActionGroup.jsx b/src/components/FormActionGroup/FormActionGroup.jsx index 99db0621a4..ee92ac0169 100644 --- a/src/components/FormActionGroup/FormActionGroup.jsx +++ b/src/components/FormActionGroup/FormActionGroup.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { ActionGroup, @@ -20,21 +20,17 @@ const buttonGroupStyle = { marginRight: '20px' }; -const FormActionGroup = ({ onSubmit, submitDisabled, onCancel }) => ( - - {({ i18n }) => ( - - - - - - - - - - - )} - +const FormActionGroup = ({ onSubmit, submitDisabled, onCancel, i18n }) => ( + + + + + + + + + + ); FormActionGroup.propTypes = { @@ -47,4 +43,4 @@ FormActionGroup.defaultProps = { submitDisabled: false, }; -export default FormActionGroup; +export default withI18n()(FormActionGroup); diff --git a/src/components/Lookup/Lookup.jsx b/src/components/Lookup/Lookup.jsx index e007ed2af5..4b147e552b 100644 --- a/src/components/Lookup/Lookup.jsx +++ b/src/components/Lookup/Lookup.jsx @@ -9,7 +9,7 @@ import { InputGroup, Modal, } from '@patternfly/react-core'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { withNetwork } from '../../contexts/Network'; @@ -130,7 +130,9 @@ class Lookup extends React.Component { results, count, } = this.state; - const { id, lookupHeader = 'items', value, columns } = this.props; + const { id, lookupHeader, value, columns, i18n } = this.props; + + const header = lookupHeader || i18n._(t`items`); const chips = value ? (
@@ -143,64 +145,60 @@ class Lookup extends React.Component { ) : null; return ( - - {({ i18n }) => ( - - - -
- {chips} -
- - {i18n._(t`Save`)}, - - ]} - > - ( - i.id === item.id)} - onSelect={() => this.toggleSelected(item)} - /> - )} - alignToolbarLeft - showPageSizeOptions={false} - paginationStyling={paginationStyling} + + + +
+ {chips} +
+ + {i18n._(t`Save`)}, + + ]} + > + ( + i.id === item.id)} + onSelect={() => this.toggleSelected(item)} /> - {lookupSelectedItems.length > 0 && ( - - )} - { error ?
error
: '' } - - - )} - + )} + alignToolbarLeft + showPageSizeOptions={false} + paginationStyling={paginationStyling} + /> + {lookupSelectedItems.length > 0 && ( + + )} + { error ?
error
: '' } + + ); } } @@ -217,9 +215,9 @@ Lookup.propTypes = { Lookup.defaultProps = { id: 'lookup-search', - lookupHeader: 'items', + lookupHeader: null, name: null, }; export { Lookup as _Lookup }; -export default withNetwork(withRouter(Lookup)); +export default withI18n()(withNetwork(withRouter(Lookup))); diff --git a/src/components/NotificationsList/NotificationListItem.jsx b/src/components/NotificationsList/NotificationListItem.jsx index 5493982145..f3f08b7fde 100644 --- a/src/components/NotificationsList/NotificationListItem.jsx +++ b/src/components/NotificationsList/NotificationListItem.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { shape, number, string, bool, func } from 'prop-types'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Link } from 'react-router-dom'; import { @@ -37,66 +37,75 @@ function NotificationListItem (props) { detailUrl, successTurnedOn, errorTurnedOn, - toggleNotification + toggleNotification, + i18n } = props; return ( - - {({ i18n }) => ( - - - - - {notification.name} - - - {notification.notification_type} - - , - - toggleNotification( - notification.id, - successTurnedOn, - 'success' - )} - aria-label={i18n._(t`Toggle notification success`)} - /> - toggleNotification( - notification.id, - errorTurnedOn, - 'error' - )} - aria-label={i18n._(t`Toggle notification failure`)} - /> - - ]} + + + + + {notification.name} + + + {notification.notification_type} + + , + + toggleNotification( + notification.id, + successTurnedOn, + 'success' + )} + aria-label={i18n._(t`Toggle notification success`)} /> - - - )} - + toggleNotification( + notification.id, + errorTurnedOn, + 'error' + )} + aria-label={i18n._(t`Toggle notification failure`)} + /> + + ]} + /> + toggleNotification( + notification.id, + errorTurnedOn, + 'error' + )} + aria-label={i18n._(t`Toggle notification failure`)} + /> + + ); } @@ -118,4 +127,4 @@ NotificationListItem.defaultProps = { successTurnedOn: false, }; -export default NotificationListItem; +export default withI18n()(NotificationListItem); diff --git a/src/components/NotifyAndRedirect.jsx b/src/components/NotifyAndRedirect.jsx index 0bb030440a..19a18ea62c 100644 --- a/src/components/NotifyAndRedirect.jsx +++ b/src/components/NotifyAndRedirect.jsx @@ -1,8 +1,8 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { Redirect, withRouter } from 'react-router-dom'; - -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { withRootDialog } from '../contexts/RootDialog'; @@ -14,16 +14,13 @@ const NotifyAndRedirect = ({ strict, sensitive, setRootDialogMessage, - location + location, + i18n }) => { setRootDialogMessage({ title: '404', bodyText: ( - - Cannot find route - {` ${location.pathname}`} - . - + {i18n._(t`Cannot find route ${({location.pathname})}.`)} ), variant: 'warning' }); @@ -41,4 +38,4 @@ const NotifyAndRedirect = ({ }; export { NotifyAndRedirect as _NotifyAndRedirect }; -export default withRootDialog(withRouter(NotifyAndRedirect)); +export default withI18n()(withRootDialog(withRouter(NotifyAndRedirect))); diff --git a/src/components/PageHeaderToolbar.jsx b/src/components/PageHeaderToolbar.jsx index b6cdebf3d2..f0f948b91f 100644 --- a/src/components/PageHeaderToolbar.jsx +++ b/src/components/PageHeaderToolbar.jsx @@ -1,8 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; - +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; -import { I18n } from '@lingui/react'; import { Dropdown, DropdownItem, @@ -57,78 +56,75 @@ class PageHeaderToolbar extends Component { isAboutDisabled, onAboutClick, onLogoutClick, - loggedInUser + loggedInUser, + i18n } = this.props; return ( - - {({ i18n }) => ( - - - {i18n._(t`Info`)}
}> - - - - + + + {i18n._(t`Info`)}}> + + + + + )} + dropdownItems={[ + + {i18n._(t`Help`)} + , + + {i18n._(t`About`)} + + ]} + /> + + + User}> + + + + {loggedInUser && ( + + {loggedInUser.username} + )} - dropdownItems={[ - - {i18n._(t`Help`)} - , - - {i18n._(t`About`)} - - ]} - /> - - - User}> - - - - {loggedInUser && ( - - {loggedInUser.username} - - )} - - )} - dropdownItems={[ - - {i18n._(t`User Details`)} - , - - {i18n._(t`Logout`)} - - ]} - /> - - - - - )} - + + )} + dropdownItems={[ + + {i18n._(t`User Details`)} + , + + {i18n._(t`Logout`)} + + ]} + /> + + + + ); } } @@ -143,4 +139,4 @@ PageHeaderToolbar.defaultProps = { isAboutDisabled: false }; -export default PageHeaderToolbar; +export default withI18n()(PageHeaderToolbar); diff --git a/src/components/PaginatedDataList/PaginatedDataList.jsx b/src/components/PaginatedDataList/PaginatedDataList.jsx index f4d1b8c067..bd831be897 100644 --- a/src/components/PaginatedDataList/PaginatedDataList.jsx +++ b/src/components/PaginatedDataList/PaginatedDataList.jsx @@ -14,8 +14,8 @@ import { EmptyStateBody, } from '@patternfly/react-core'; import { CubesIcon } from '@patternfly/react-icons'; -import { I18n, i18nMark } from '@lingui/react'; -import { Trans, t } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { withRouter, Link } from 'react-router-dom'; import Pagination from '../Pagination'; @@ -108,13 +108,15 @@ class PaginatedDataList extends React.Component { showPageSizeOptions, paginationStyling, location, + i18n } = this.props; const { error } = this.state; const [orderBy, sortOrder] = this.getSortOrder(); const queryParams = parseNamespacedQueryString(qsConfig, location.search); + const columns = toolbarColumns || [{ name: i18n._(t`Name`), key: 'name', isSortable: true }]; return ( - - {({ i18n }) => ( + + {error && ( {error && ( @@ -128,24 +130,10 @@ class PaginatedDataList extends React.Component { - <Trans> - No - {' '} - {ucFirst(itemNamePlural || pluralize(itemName))} - {' '} - Found - </Trans> + {i18n._(t`No ${ucFirst(itemNamePlural || pluralize(itemName))} Found`)} - - Please add - {' '} - {getArticle(itemName)} - {' '} - {itemName} - {' '} - to populate this list - + {i18n._(t`Please add ${getArticle(itemName)} ${itemName} to populate this list`)} ) : ( @@ -199,9 +187,67 @@ class PaginatedDataList extends React.Component { /> )} + // TODO: replace with proper error handling + )} + {items.length === 0 ? ( + + + + {i18n._(t`No ${ucFirst(itemNamePlural || pluralize(itemName))} Found`)} + + + {i18n._(t`Please add ${getArticle(itemName)} ${itemName} to populate this list`)} + + + ) : ( + + { }} + onSort={this.handleSort} + showSelectAll={showSelectAll} + isAllSelected={isAllSelected} + onSelectAll={onSelectAll} + additionalControls={additionalControls} + /> + + {items.map(item => (renderItem ? renderItem(item) : ( + + + + + + + {item.name} + + + + + ]} + /> + + + )))} + + )} - + ); } } @@ -235,9 +281,7 @@ PaginatedDataList.propTypes = { PaginatedDataList.defaultProps = { renderItem: null, - toolbarColumns: [ - { name: i18nMark('Name'), key: 'name', isSortable: true }, - ], + toolbarColumns: [], additionalControls: [], itemName: 'item', itemNamePlural: '', @@ -250,4 +294,4 @@ PaginatedDataList.defaultProps = { }; export { PaginatedDataList as _PaginatedDataList }; -export default withRouter(PaginatedDataList); +export default withI18n()(withRouter(PaginatedDataList)); diff --git a/src/components/PaginatedDataList/ToolbarAddButton.jsx b/src/components/PaginatedDataList/ToolbarAddButton.jsx index ae6b7e0c74..ea2f2f183f 100644 --- a/src/components/PaginatedDataList/ToolbarAddButton.jsx +++ b/src/components/PaginatedDataList/ToolbarAddButton.jsx @@ -3,7 +3,7 @@ import { string, func } from 'prop-types'; import { Link } from 'react-router-dom'; import { Button as PFButton } from '@patternfly/react-core'; import { PlusIcon } from '@patternfly/react-icons'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import styled from 'styled-components'; @@ -20,39 +20,32 @@ const Button = styled(PFButton)` } `; -function ToolbarAddButton ({ linkTo, onClick }) { +function ToolbarAddButton ({ linkTo, onClick, i18n }) { if (!linkTo && !onClick) { throw new Error('ToolbarAddButton requires either `linkTo` or `onClick` prop'); } if (linkTo) { // TODO: This should only be a (no - - )} - - ); - } - return ( - - {({ i18n }) => ( + - )} - + + ); + } + + return ( + ); } ToolbarAddButton.propTypes = { @@ -64,4 +57,4 @@ ToolbarAddButton.defaultProps = { onClick: null }; -export default ToolbarAddButton; +export default withI18n()(ToolbarAddButton); diff --git a/src/components/PaginatedDataList/ToolbarDeleteButton.jsx b/src/components/PaginatedDataList/ToolbarDeleteButton.jsx index d9ff520ee2..1b54e4539d 100644 --- a/src/components/PaginatedDataList/ToolbarDeleteButton.jsx +++ b/src/components/PaginatedDataList/ToolbarDeleteButton.jsx @@ -2,9 +2,9 @@ import React, { Fragment } from 'react'; import { func, bool, number, string, arrayOf, shape } from 'prop-types'; import { Button as PFButton, Tooltip } from '@patternfly/react-core'; import { TrashAltIcon } from '@patternfly/react-icons'; -import { I18n, i18nMark } from '@lingui/react'; -import { Trans, t } from '@lingui/macro'; import styled from 'styled-components'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import AlertModal from '../AlertModal'; import { pluralize } from '../../util/strings'; @@ -89,103 +89,95 @@ class ToolbarDeleteButton extends React.Component { } renderTooltip () { - const { itemsToDelete, itemName } = this.props; + const { itemsToDelete, itemName, i18n } = this.props; + + const itemsUnableToDelete = itemsToDelete + .filter(cannotDelete) + .map(item => ( +
+ {item.name} +
+ )); if (itemsToDelete.some(cannotDelete)) { return (
- - You dont have permission to delete the following - {' '} - {pluralize(itemName)} - : - - {itemsToDelete - .filter(cannotDelete) - .map(item => ( -
- {item.name} -
- )) - } + {i18n._(t`You do not have permission to delete the following ${pluralize(itemName)}: ${itemsUnableToDelete}`)}
); } if (itemsToDelete.length) { - return i18nMark('Delete'); + return i18n._(t`Delete`); } - return i18nMark('Select a row to delete'); + return i18n._(t`Select a row to delete`); } render () { - const { itemsToDelete, itemName } = this.props; + const { itemsToDelete, itemName, i18n } = this.props; const { isModalOpen } = this.state; const isDisabled = itemsToDelete.length === 0 || itemsToDelete.some(cannotDelete); return ( - - {({ i18n }) => ( - - + + + + + { isModalOpen && ( + - - - - { isModalOpen && ( - - {i18n._(t`Delete`)} - , - - ]} + aria-label={i18n._(t`confirm delete`)} + onClick={this.handleDelete} > - {i18n._(t`Are you sure you want to delete:`)} + {i18n._(t`Delete`)} + , + + ]} + > + {i18n._(t`Are you sure you want to delete:`)} +
+ {itemsToDelete.map((item) => ( + + + {item.name} +
- {itemsToDelete.map((item) => ( - - - {item.name} - -
- - ))} -
- - )} - + + ))} +
+ )} - + ); } } -export default ToolbarDeleteButton; +export default withI18n()(ToolbarDeleteButton); diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index 8c6762705b..e508209b14 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { I18n } from '@lingui/react'; -import { Trans, t } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { Button, Dropdown, @@ -106,7 +106,8 @@ class Pagination extends Component { page_size, pageSizeOptions, showPageSizeOptions, - style + style, + i18n } = this.props; const { value, isOpen } = this.state; let opts = []; @@ -135,98 +136,89 @@ class Pagination extends Component { )); return ( - - {({ i18n }) => ( -
- {showPageSizeOptions && ( -
- Items Per Page - + {showPageSizeOptions && ( +
+ {i18n._(t`Items Per Page`)} + - {page_size} - - )} - dropdownItems={dropdownItems} - /> -
- )} -
-
- {`Items ${itemMin} – ${itemMax} of ${count}`} -
- {pageCount !== 1 && ( -
-
- - -
-
- - {'Page '} - - {' of '} - {pageCount} - -
-
- - -
-
+ > + {page_size} + )} -
+ dropdownItems={dropdownItems} + />
)} - +
+
+ {i18n._(t`Items ${itemMin} – ${itemMax} of ${count}`)} +
+ {pageCount !== 1 && ( +
+
+ + +
+
+ {i18n._(t`Page ${()} of ${pageCount}`)} + +
+ + +
+
+ )} +
+
); } } @@ -248,4 +240,4 @@ Pagination.defaultProps = { showPageSizeOptions: true }; -export default Pagination; +export default withI18n()(Pagination); diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index c43c156785..3ffb4aab8a 100644 --- a/src/components/Search/Search.jsx +++ b/src/components/Search/Search.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Button as PFButton, @@ -90,7 +90,8 @@ class Search extends React.Component { render () { const { up } = DropdownPosition; const { - columns + columns, + i18n } = this.props; const { isSearchDropdownOpen, @@ -109,41 +110,37 @@ class Search extends React.Component { )); return ( - - {({ i18n }) => ( -
- + - {searchColumnName} - - )} - dropdownItems={searchDropdownItems} - /> - - -
- )} - + {searchColumnName} + + )} + dropdownItems={searchDropdownItems} + /> + + + ); } } @@ -159,4 +156,4 @@ Search.defaultProps = { sortedColumnKey: 'name' }; -export default Search; +export default withI18n()(Search); diff --git a/src/components/Sort/Sort.jsx b/src/components/Sort/Sort.jsx index 966f1b8d2a..2e8b06d2de 100644 --- a/src/components/Sort/Sort.jsx +++ b/src/components/Sort/Sort.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Button, @@ -85,7 +85,8 @@ class Sort extends React.Component { const { columns, sortedColumnKey, - sortOrder + sortOrder, + i18n } = this.props; const { isSortDropdownOpen @@ -109,40 +110,36 @@ class Sort extends React.Component { } return ( - - {({ i18n }) => ( - - { sortDropdownItems.length > 1 && ( - + { sortDropdownItems.length > 1 && ( + - {sortedColumnName} - - )} - dropdownItems={sortDropdownItems} - /> + > + {sortedColumnName} + )} - - + dropdownItems={sortDropdownItems} + /> )} - + + ); } } @@ -160,4 +157,4 @@ Sort.defaultProps = { sortedColumnKey: 'name' }; -export default Sort; +export default withI18n()(Sort); diff --git a/src/components/TowerLogo/TowerLogo.jsx b/src/components/TowerLogo/TowerLogo.jsx index 74d278a69c..2b9d8ab808 100644 --- a/src/components/TowerLogo/TowerLogo.jsx +++ b/src/components/TowerLogo/TowerLogo.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { withRouter } from 'react-router-dom'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Brand } from '@patternfly/react-core'; @@ -34,6 +34,7 @@ class TowerLogo extends Component { render () { const { hover } = this.state; + const { i18n } = this.props; let src = TowerLogoHeader; @@ -42,19 +43,15 @@ class TowerLogo extends Component { } return ( - - {({ i18n }) => ( - - )} - + ); } } @@ -67,4 +64,4 @@ TowerLogo.defaultProps = { linkTo: null, }; -export default withRouter(TowerLogo); +export default withI18n()(withRouter(TowerLogo)); diff --git a/src/contexts/Network.jsx b/src/contexts/Network.jsx index 5407346c45..0ee2106bf7 100644 --- a/src/contexts/Network.jsx +++ b/src/contexts/Network.jsx @@ -4,7 +4,8 @@ import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; -import { i18nMark } from '@lingui/react'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { withRootDialog } from './RootDialog'; @@ -33,27 +34,27 @@ class Provider extends Component { } handle401 () { - const { handle401, history, setRootDialogMessage } = this.props; + const { handle401, history, setRootDialogMessage, i18n } = this.props; if (handle401) { handle401(); return; } history.replace('/login'); setRootDialogMessage({ - bodyText: i18nMark('You have been logged out.') + bodyText: i18n._(t`You have been logged out.`) }); } handle404 () { - const { handle404, history, setRootDialogMessage } = this.props; + const { handle404, history, setRootDialogMessage, i18n } = this.props; if (handle404) { handle404(); return; } history.replace('/home'); setRootDialogMessage({ - title: i18nMark('404'), - bodyText: i18nMark('Cannot find resource.'), + title: i18n._(t`404`), + bodyText: i18n._(t`Cannot find resource.`), variant: 'warning' }); } @@ -72,7 +73,7 @@ class Provider extends Component { } export { Provider as _NetworkProvider }; -export const NetworkProvider = withRootDialog(withRouter(Provider)); +export const NetworkProvider = withI18n()(withRootDialog(withRouter(Provider))); export function withNetwork (Child) { return (props) => ( diff --git a/src/pages/Applications.jsx b/src/pages/Applications.jsx index 4eeb1a9b85..8d6bf4eba5 100644 --- a/src/pages/Applications.jsx +++ b/src/pages/Applications.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class Applications extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Applications</Trans> + {i18n._(t`Applications`)} @@ -23,4 +25,4 @@ class Applications extends Component { } } -export default Applications; +export default withI18n()(Applications); diff --git a/src/pages/AuthSettings.jsx b/src/pages/AuthSettings.jsx index ad2f1e60e3..c2c45e1d17 100644 --- a/src/pages/AuthSettings.jsx +++ b/src/pages/AuthSettings.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class AuthSettings extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Authentication Settings</Trans> + {i18n._(t`Authentication Settings`)} @@ -23,4 +25,4 @@ class AuthSettings extends Component { } } -export default AuthSettings; +export default withI18n()(AuthSettings); diff --git a/src/pages/CredentialTypes.jsx b/src/pages/CredentialTypes.jsx index 3ea22eaa09..b711560509 100644 --- a/src/pages/CredentialTypes.jsx +++ b/src/pages/CredentialTypes.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class CredentialTypes extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Credential Types</Trans> + {i18n._(t`Credential Types`)} @@ -23,4 +25,4 @@ class CredentialTypes extends Component { } } -export default CredentialTypes; +export default withI18n()(CredentialTypes); diff --git a/src/pages/Credentials.jsx b/src/pages/Credentials.jsx index 5893d125b0..c3384a40b1 100644 --- a/src/pages/Credentials.jsx +++ b/src/pages/Credentials.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class Credentials extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Credentials</Trans> + {i18n._(t`Credentials`)} @@ -23,4 +25,4 @@ class Credentials extends Component { } } -export default Credentials; +export default withI18n()(Credentials); diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx index 76d655dd80..1c0ae88339 100644 --- a/src/pages/Dashboard.jsx +++ b/src/pages/Dashboard.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class Dashboard extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Dashboard</Trans> + {i18n._(t`Dashboard`)} @@ -23,4 +25,4 @@ class Dashboard extends Component { } } -export default Dashboard; +export default withI18n()(Dashboard); diff --git a/src/pages/InstanceGroups.jsx b/src/pages/InstanceGroups.jsx index 12ed22d376..7e05873691 100644 --- a/src/pages/InstanceGroups.jsx +++ b/src/pages/InstanceGroups.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class InstanceGroups extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Instance Groups</Trans> + {i18n._(t`Instance Groups`)} @@ -23,4 +25,4 @@ class InstanceGroups extends Component { } } -export default InstanceGroups; +export default withI18n()(InstanceGroups); diff --git a/src/pages/Inventories.jsx b/src/pages/Inventories.jsx index 3f7f40d200..d0457dd00a 100644 --- a/src/pages/Inventories.jsx +++ b/src/pages/Inventories.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class Inventories extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Inventories</Trans> + {i18n._(t`Inventories`)} @@ -23,4 +25,4 @@ class Inventories extends Component { } } -export default Inventories; +export default withI18n()(Inventories); diff --git a/src/pages/InventoryScripts.jsx b/src/pages/InventoryScripts.jsx index ff23dd3fdf..aab83da691 100644 --- a/src/pages/InventoryScripts.jsx +++ b/src/pages/InventoryScripts.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class InventoryScripts extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Inventory Scripts</Trans> + {i18n._(t`Inventory Scripts`)} @@ -23,4 +25,4 @@ class InventoryScripts extends Component { } } -export default InventoryScripts; +export default withI18n()(InventoryScripts); diff --git a/src/pages/Jobs.jsx b/src/pages/Jobs.jsx index 1ff7f4436b..e78e62cfbd 100644 --- a/src/pages/Jobs.jsx +++ b/src/pages/Jobs.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class Jobs extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Jobs</Trans> + {i18n._(t`Jobs`)} @@ -23,4 +25,4 @@ class Jobs extends Component { } } -export default Jobs; +export default withI18n()(Jobs); diff --git a/src/pages/JobsSettings.jsx b/src/pages/JobsSettings.jsx index 3fbba9334c..5327f74d48 100644 --- a/src/pages/JobsSettings.jsx +++ b/src/pages/JobsSettings.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class JobsSettings extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Jobs Settings</Trans> + {i18n._(t`Jobs Settings`)} @@ -23,4 +25,4 @@ class JobsSettings extends Component { } } -export default JobsSettings; +export default withI18n()(JobsSettings); diff --git a/src/pages/License.jsx b/src/pages/License.jsx index bb1ab2cd88..db74e17fb0 100644 --- a/src/pages/License.jsx +++ b/src/pages/License.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class License extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>License</Trans> + {i18n._(t`License`)} @@ -23,4 +25,4 @@ class License extends Component { } } -export default License; +export default withI18n()(License); diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index 27ca4cfb5f..50b58765ae 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { Redirect, withRouter } from 'react-router-dom'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { LoginForm, @@ -62,7 +62,7 @@ class AWXLogin extends Component { render () { const { username, password, isInputValid, isAuthenticated } = this.state; - const { alt, loginInfo, logo, bodyText: errorMessage } = this.props; + const { alt, loginInfo, logo, bodyText: errorMessage, i18n } = this.props; const logoSrc = logo ? `data:image/jpeg;${logo}` : towerLogo; if (isAuthenticated) { @@ -70,34 +70,30 @@ class AWXLogin extends Component { } return ( - - {({ i18n }) => ( - - - - )} - + + + ); } } export { AWXLogin as _AWXLogin }; -export default withNetwork(withRootDialog(withRouter(AWXLogin))); +export default withI18n()(withNetwork(withRootDialog(withRouter(AWXLogin)))); diff --git a/src/pages/ManagementJobs.jsx b/src/pages/ManagementJobs.jsx index 8aa347acc6..c74b484314 100644 --- a/src/pages/ManagementJobs.jsx +++ b/src/pages/ManagementJobs.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class ManagementJobs extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Management Jobs</Trans> + {i18n._(t`Management Jobs`)} @@ -23,4 +25,4 @@ class ManagementJobs extends Component { } } -export default ManagementJobs; +export default withI18n()(ManagementJobs); diff --git a/src/pages/NotificationTemplates.jsx b/src/pages/NotificationTemplates.jsx index 8c824340b5..9b28ecb9af 100644 --- a/src/pages/NotificationTemplates.jsx +++ b/src/pages/NotificationTemplates.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class NotificationTemplates extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Notification Templates</Trans> + {i18n._(t`Notification Templates`)} @@ -23,4 +25,4 @@ class NotificationTemplates extends Component { } } -export default NotificationTemplates; +export default withI18n()(NotificationTemplates); diff --git a/src/pages/Organizations/Organizations.jsx b/src/pages/Organizations/Organizations.jsx index e9ba60d059..00962dd43a 100644 --- a/src/pages/Organizations/Organizations.jsx +++ b/src/pages/Organizations/Organizations.jsx @@ -1,7 +1,7 @@ import React, { Component, Fragment } from 'react'; import { Route, withRouter, Switch } from 'react-router-dom'; -import { i18nMark } from '@lingui/react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { Config } from '../../contexts/Config'; import { NetworkProvider } from '../../contexts/Network'; @@ -14,34 +14,42 @@ import OrganizationAdd from './screens/OrganizationAdd'; import Organization from './screens/Organization/Organization'; class Organizations extends Component { - state = { - breadcrumbConfig: { - '/organizations': i18nMark('Organizations'), - '/organizations/add': i18nMark('Create New Organization') - } - }; + constructor (props) { + super(props); + + const { i18n } = props; + + this.state = { + breadcrumbConfig: { + '/organizations': i18n._(t`Organizations`), + '/organizations/add': i18n._(t`Create New Organization`) + } + }; + } setBreadcrumbConfig = (organization) => { + const { i18n } = this.props; + if (!organization) { return; } const breadcrumbConfig = { - '/organizations': i18nMark('Organizations'), - '/organizations/add': i18nMark('Create New Organization'), + '/organizations': i18n._(t`Organizations`), + '/organizations/add': i18n._(t`Create New Organization`), [`/organizations/${organization.id}`]: `${organization.name}`, - [`/organizations/${organization.id}/edit`]: i18nMark('Edit Details'), - [`/organizations/${organization.id}/details`]: i18nMark('Details'), - [`/organizations/${organization.id}/access`]: i18nMark('Access'), - [`/organizations/${organization.id}/teams`]: i18nMark('Teams'), - [`/organizations/${organization.id}/notifications`]: i18nMark('Notifications'), + [`/organizations/${organization.id}/edit`]: i18n._(t`Edit Details`), + [`/organizations/${organization.id}/details`]: i18n._(t`Details`), + [`/organizations/${organization.id}/access`]: i18n._(t`Access`), + [`/organizations/${organization.id}/teams`]: i18n._(t`Teams`), + [`/organizations/${organization.id}/notifications`]: i18n._(t`Notifications`), }; this.setState({ breadcrumbConfig }); } render () { - const { match, history, location, setRootDialogMessage } = this.props; + const { match, history, location, setRootDialogMessage, i18n } = this.props; const { breadcrumbConfig } = this.state; return ( @@ -65,11 +73,11 @@ class Organizations extends Component { setRootDialogMessage({ title: '404', bodyText: ( - - Cannot find organization with ID + + {i18n._(t`Cannot find organization with ID`)} {` ${newRouteMatch.params.id}`} . - + ), variant: 'warning' }); @@ -101,4 +109,4 @@ class Organizations extends Component { } export { Organizations as _Organizations }; -export default withRootDialog(withRouter(Organizations)); +export default withI18n()(withRootDialog(withRouter(Organizations))); diff --git a/src/pages/Organizations/components/DeleteRoleConfirmationModal.jsx b/src/pages/Organizations/components/DeleteRoleConfirmationModal.jsx index 4f4760b864..c06b377ac7 100644 --- a/src/pages/Organizations/components/DeleteRoleConfirmationModal.jsx +++ b/src/pages/Organizations/components/DeleteRoleConfirmationModal.jsx @@ -1,8 +1,8 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { func, string } from 'prop-types'; import { Button } from '@patternfly/react-core'; -import { I18n, i18nMark } from '@lingui/react'; -import { t, Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import AlertModal from '../../../components/AlertModal'; import { Role } from '../../../types'; @@ -24,57 +24,43 @@ class DeleteRoleConfirmationModal extends React.Component { } render () { - const { role, username, onCancel, onConfirm } = this.props; - const title = `Remove ${this.isTeamRole() ? 'Team' : 'User'} Access`; + const { role, username, onCancel, onConfirm, i18n } = this.props; + const title = i18n._(t`Remove ${this.isTeamRole() ? i18n._(t`Team`) : i18n._(t`User`)} Access`); return ( - - {({ i18n }) => ( - - {i18n._(t`Delete`)} - , - - ]} + aria-label="Confirm delete" + onClick={onConfirm} > - {this.isTeamRole() ? ( - - Are you sure you want to remove - {` ${role.name} `} - access from - {` ${role.team_name}`} - ? Doing so affects all members of the team. -
-
- If you - only - want to remove access for this particular user, please remove them from the team. - - ) : ( - - Are you sure you want to remove - {` ${role.name} `} - access from - {` ${username}`} - ? - - )} - + {i18n._(t`Delete`)} + , + + ]} + > + {this.isTeamRole() ? ( + + {i18n._(t`Are you sure you want to remove ${role.name} access from ${role.team_name}? Doing so affects all members of the team.`)} +
+
+ {i18n._(t`If you ${(only)} want to remove access for this particular user, please remove them from the team.`)} + + ) : ( + + {i18n._(t`Are you sure you want to remove ${role.name} access from ${username}?`)} + )} - + ); } } -export default DeleteRoleConfirmationModal; +export default withI18n()(DeleteRoleConfirmationModal); diff --git a/src/pages/Organizations/components/InstanceGroupsLookup.jsx b/src/pages/Organizations/components/InstanceGroupsLookup.jsx index 703fd2420c..e93f93ebf5 100644 --- a/src/pages/Organizations/components/InstanceGroupsLookup.jsx +++ b/src/pages/Organizations/components/InstanceGroupsLookup.jsx @@ -1,20 +1,14 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; -import { I18n, i18nMark } from '@lingui/react'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { FormGroup, Tooltip } from '@patternfly/react-core'; import { QuestionCircleIcon } from '@patternfly/react-icons'; -import { t } from '@lingui/macro'; import Lookup from '../../../components/Lookup'; import { withNetwork } from '../../../contexts/Network'; -const INSTANCE_GROUPS_LOOKUP_COLUMNS = [ - { name: i18nMark('Name'), key: 'name', isSortable: true }, - { name: i18nMark('Modified'), key: 'modified', isSortable: false, isNumeric: true }, - { name: i18nMark('Created'), key: 'created', isSortable: false, isNumeric: true } -]; - class InstanceGroupsLookup extends React.Component { constructor (props) { super(props); @@ -29,43 +23,43 @@ class InstanceGroupsLookup extends React.Component { } render () { - const { value, tooltip, onChange } = this.props; + const { value, tooltip, onChange, i18n } = this.props; return ( - - {({ i18n }) => ( - - {i18n._(t`Instance Groups`)} - {' '} - { - tooltip && ( - - - - ) - } - - )} - fieldId="org-instance-groups" - > - - + + {i18n._(t`Instance Groups`)} + {' '} + { + tooltip && ( + + + + ) + } + )} - + fieldId="org-instance-groups" + > + + ); } } @@ -80,4 +74,4 @@ InstanceGroupsLookup.defaultProps = { tooltip: '', }; -export default withNetwork(InstanceGroupsLookup); +export default withI18n()(withNetwork(InstanceGroupsLookup)); diff --git a/src/pages/Organizations/components/OrganizationAccessItem.jsx b/src/pages/Organizations/components/OrganizationAccessItem.jsx index 71ac7a94f4..f6caf4a499 100644 --- a/src/pages/Organizations/components/OrganizationAccessItem.jsx +++ b/src/pages/Organizations/components/OrganizationAccessItem.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { func } from 'prop-types'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { DataListItem, @@ -81,96 +81,92 @@ class OrganizationAccessItem extends React.Component { } render () { - const { accessRecord, onRoleDelete } = this.props; + const { accessRecord, onRoleDelete, i18n } = this.props; const [teamRoles, userRoles] = this.getRoleLists(); return ( - - {({ i18n }) => ( - - - - {accessRecord.username && ( - - {accessRecord.url ? ( - - - {accessRecord.username} - - - ) : ( - - {accessRecord.username} - - )} - - )} - {accessRecord.first_name || accessRecord.last_name ? ( - + + + + {accessRecord.username && ( + + {accessRecord.url ? ( + + + {accessRecord.username} + + ) : ( - null + + {accessRecord.username} + )} - , - - {userRoles.length > 0 && ( -
    - - {i18n._(t`User Roles`)} - - {userRoles.map(role => ( - role.user_capabilities.unattach ? ( - { onRoleDelete(role, accessRecord); }} - > - {role.name} - - ) : ( - - {role.name} - - ) - ))} -
- )} - {teamRoles.length > 0 && ( -
    - - {i18n._(t`Team Roles`)} - - {teamRoles.map(role => ( - role.user_capabilities.unattach ? ( - { onRoleDelete(role, accessRecord); }} - > - {role.name} - - ) : ( - - {role.name} - - ) - ))} -
- )} - - ]} - /> - - - )} - + + )} + {accessRecord.first_name || accessRecord.last_name ? ( + + ) : ( + null + )} + , + + {userRoles.length > 0 && ( +
    + + {i18n._(t`User Roles`)} + + {userRoles.map(role => ( + role.user_capabilities.unattach ? ( + { onRoleDelete(role, accessRecord); }} + > + {role.name} + + ) : ( + + {role.name} + + ) + ))} +
+ )} + {teamRoles.length > 0 && ( +
    + + {i18n._(t`Team Roles`)} + + {teamRoles.map(role => ( + role.user_capabilities.unattach ? ( + { onRoleDelete(role, accessRecord); }} + > + {role.name} + + ) : ( + + {role.name} + + ) + ))} +
+ )} + + ]} + /> + + ); } } -export default OrganizationAccessItem; +export default withI18n()(OrganizationAccessItem); diff --git a/src/pages/Organizations/components/OrganizationForm.jsx b/src/pages/Organizations/components/OrganizationForm.jsx index d956bb8c47..c8364239e8 100644 --- a/src/pages/Organizations/components/OrganizationForm.jsx +++ b/src/pages/Organizations/components/OrganizationForm.jsx @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { withRouter } from 'react-router-dom'; import { Formik, Field } from 'formik'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Form, @@ -83,76 +83,72 @@ class OrganizationForm extends Component { } render () { - const { organization, handleCancel } = this.props; + const { organization, handleCancel, i18n } = this.props; const { instanceGroups, formIsValid, error } = this.state; const defaultVenv = '/venv/ansible/'; return ( - - {({ i18n }) => ( - ( -
- - - - - {({ custom_virtualenvs }) => ( - custom_virtualenvs && custom_virtualenvs.length > 1 && ( - ( - - - - )} - /> - ) - )} - - - - - {error ?
error
: null} - - )} - /> + ( +
+ + + + + {({ custom_virtualenvs }) => ( + custom_virtualenvs && custom_virtualenvs.length > 1 && ( + ( + + + + )} + /> + ) + )} + + + + + {error ?
error
: null} + )} -
+ /> ); } } @@ -176,4 +172,4 @@ OrganizationForm.contextTypes = { }; export { OrganizationForm as _OrganizationForm }; -export default withNetwork(withRouter(OrganizationForm)); +export default withI18n()(withNetwork(withRouter(OrganizationForm))); diff --git a/src/pages/Organizations/components/OrganizationListItem.jsx b/src/pages/Organizations/components/OrganizationListItem.jsx index 865fa4e3c0..9fa60905df 100644 --- a/src/pages/Organizations/components/OrganizationListItem.jsx +++ b/src/pages/Organizations/components/OrganizationListItem.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { string, bool, func } from 'prop-types'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { Badge as PFBadge, DataListItem, @@ -62,6 +63,7 @@ class OrganizationListItem extends React.Component { isSelected, onSelect, detailUrl, + i18n } = this.props; const labelId = `check-action-${organization.id}`; return ( @@ -86,13 +88,15 @@ class OrganizationListItem extends React.Component { , - Members + {i18n._(t`Members`)} {organization.summary_fields.related_field_counts.users} + , + - Teams + {i18n._(t`Teams`)} {organization.summary_fields.related_field_counts.teams} @@ -105,4 +109,4 @@ class OrganizationListItem extends React.Component { ); } } -export default OrganizationListItem; +export default withI18n()(OrganizationListItem); diff --git a/src/pages/Organizations/screens/Organization/Organization.jsx b/src/pages/Organizations/screens/Organization/Organization.jsx index ec65d866a6..aaf6be1940 100644 --- a/src/pages/Organizations/screens/Organization/Organization.jsx +++ b/src/pages/Organizations/screens/Organization/Organization.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { I18n, i18nMark } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Switch, Route, withRouter, Redirect } from 'react-router-dom'; import { Card, CardHeader, PageSection } from '@patternfly/react-core'; @@ -100,7 +100,8 @@ class Organization extends Component { location, match, me, - history + history, + i18n } = this.props; const { @@ -126,14 +127,14 @@ class Organization extends Component { ); const tabsArray = [ - { name: i18nMark('Details'), link: `${match.url}/details`, id: 0 }, - { name: i18nMark('Access'), link: `${match.url}/access`, id: 1 }, - { name: i18nMark('Teams'), link: `${match.url}/teams`, id: 2 } + { name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 }, + { name: i18n._(t`Access`), link: `${match.url}/access`, id: 1 }, + { name: i18n._(t`Teams`), link: `${match.url}/teams`, id: 2 } ]; if (canSeeNotificationsTab) { tabsArray.push({ - name: i18nMark('Notifications'), + name: i18n._(t`Notifications`), link: `${match.url}/notifications`, id: 3 }); @@ -145,24 +146,18 @@ class Organization extends Component { - - {({ i18n }) => ( - -
- - -
-
- - )} - +
+ + +
+
)); if (!match) { @@ -245,5 +240,5 @@ class Organization extends Component { ); } } -export default withNetwork(withRouter(Organization)); +export default withI18n()(withNetwork(withRouter(Organization))); export { Organization as _Organization }; diff --git a/src/pages/Organizations/screens/Organization/OrganizationAccess.jsx b/src/pages/Organizations/screens/Organization/OrganizationAccess.jsx index ad2fc69d7e..3d0d21ce4d 100644 --- a/src/pages/Organizations/screens/Organization/OrganizationAccess.jsx +++ b/src/pages/Organizations/screens/Organization/OrganizationAccess.jsx @@ -1,6 +1,7 @@ import React, { Fragment } from 'react'; import { withRouter } from 'react-router-dom'; -import { i18nMark } from '@lingui/react'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import PaginatedDataList, { ToolbarAddButton } from '../../../../components/PaginatedDataList'; import OrganizationAccessItem from '../../components/OrganizationAccessItem'; import DeleteRoleConfirmationModal from '../../components/DeleteRoleConfirmationModal'; @@ -130,7 +131,7 @@ class OrganizationAccess extends React.Component { } render () { - const { api, organization } = this.props; + const { api, organization, i18n } = this.props; const { isLoading, isInitialized, @@ -167,9 +168,9 @@ class OrganizationAccess extends React.Component { itemName="role" qsConfig={QS_CONFIG} toolbarColumns={[ - { name: i18nMark('Name'), key: 'first_name', isSortable: true }, - { name: i18nMark('Username'), key: 'username', isSortable: true }, - { name: i18nMark('Last Name'), key: 'last_name', isSortable: true }, + { name: i18n._(t`Name`), key: 'first_name', isSortable: true }, + { name: i18n._(t`Username`), key: 'username', isSortable: true }, + { name: i18n._(t`Last Name`), key: 'last_name', isSortable: true }, ]} additionalControls={canEdit ? [ @@ -197,4 +198,4 @@ class OrganizationAccess extends React.Component { } export { OrganizationAccess as _OrganizationAccess }; -export default withNetwork(withRouter(OrganizationAccess)); +export default withI18n()(withNetwork(withRouter(OrganizationAccess))); diff --git a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx index c992f66e6d..1c6a69b6d5 100644 --- a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx +++ b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { Link, withRouter } from 'react-router-dom'; -import { I18n } from '@lingui/react'; -import { Trans, t } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { CardBody, @@ -103,7 +103,8 @@ class OrganizationDetail extends Component { modified, summary_fields }, - match + match, + i18n } = this.props; const showOverflowChipAfter = 5; @@ -127,58 +128,54 @@ class OrganizationDetail extends Component { ) : null; return ( - - {({ i18n }) => ( - -
- - - - - - {(instanceGroups && instanceGroups.length > 0) && ( - - - Instance Groups - -
- {instanceGroupChips} - {overflowChip} -
- - )} -
- {summary_fields.user_capabilities.edit && ( -
- - - + +
+ + + + + + {(instanceGroups && instanceGroups.length > 0) && ( + + + {i18n._(t`Instance Groups`)} + +
+ {instanceGroupChips} + {overflowChip}
- )} - {error ? 'error!' : ''} - + + )} +
+ {summary_fields.user_capabilities.edit && ( +
+ + + +
)} - + {error ? 'error!' : ''} + ); } } -export default withRouter(withNetwork(OrganizationDetail)); +export default withI18n()(withRouter(withNetwork(OrganizationDetail))); diff --git a/src/pages/Organizations/screens/OrganizationAdd.jsx b/src/pages/Organizations/screens/OrganizationAdd.jsx index c975ea6bac..abd652d66d 100644 --- a/src/pages/Organizations/screens/OrganizationAdd.jsx +++ b/src/pages/Organizations/screens/OrganizationAdd.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withRouter } from 'react-router-dom'; -import { I18n } from '@lingui/react'; +import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { PageSection, @@ -57,30 +57,27 @@ class OrganizationAdd extends React.Component { render () { const { error } = this.state; + const { i18n } = this.props; return ( - - {({ i18n }) => ( - - - - - - - - - {error ?
error
: ''} - - - )} - + + + + + + + + + {error ?
error
: ''} + + ); } @@ -95,4 +92,4 @@ OrganizationAdd.contextTypes = { }; export { OrganizationAdd as _OrganizationAdd }; -export default withNetwork(withRouter(OrganizationAdd)); +export default withI18n()(withNetwork(withRouter(OrganizationAdd))); diff --git a/src/pages/Organizations/screens/OrganizationsList.jsx b/src/pages/Organizations/screens/OrganizationsList.jsx index 6465017fd0..393a10d365 100644 --- a/src/pages/Organizations/screens/OrganizationsList.jsx +++ b/src/pages/Organizations/screens/OrganizationsList.jsx @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; -import { i18nMark } from '@lingui/react'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { Card, PageSection, @@ -15,12 +16,6 @@ import PaginatedDataList, { import OrganizationListItem from '../components/OrganizationListItem'; import { getQSConfig, parseNamespacedQueryString } from '../../../util/qs'; -const COLUMNS = [ - { name: i18nMark('Name'), key: 'name', isSortable: true }, - { name: i18nMark('Modified'), key: 'modified', isSortable: true, isNumeric: true }, - { name: i18nMark('Created'), key: 'created', isSortable: true, isNumeric: true }, -]; - const QS_CONFIG = getQSConfig('organization', { page: 1, page_size: 5, @@ -36,7 +31,7 @@ class OrganizationsList extends Component { isLoading: true, isInitialized: false, organizations: [], - selected: [], + selected: [] }; this.handleSelectAll = this.handleSelectAll.bind(this); @@ -148,9 +143,9 @@ class OrganizationsList extends Component { isLoading, isInitialized, selected, - organizations, + organizations } = this.state; - const { match } = this.props; + const { match, i18n } = this.props; const isAllSelected = selected.length === organizations.length; @@ -163,7 +158,11 @@ class OrganizationsList extends Component { itemCount={itemCount} itemName="organization" qsConfig={QS_CONFIG} - toolbarColumns={COLUMNS} + toolbarColumns={[ + { name: i18n._(t`Name`), key: 'name', isSortable: true }, + { name: i18n._(t`Modified`), key: 'modified', isSortable: true, isNumeric: true }, + { name: i18n._(t`Created`), key: 'created', isSortable: true, isNumeric: true }, + ]} showSelectAll isAllSelected={isAllSelected} onSelectAll={this.handleSelectAll} @@ -198,4 +197,4 @@ class OrganizationsList extends Component { } export { OrganizationsList as _OrganizationsList }; -export default withNetwork(withRouter(OrganizationsList)); +export default withI18n()(withNetwork(withRouter(OrganizationsList))); diff --git a/src/pages/Portal.jsx b/src/pages/Portal.jsx index 999d895893..2073ebc33a 100644 --- a/src/pages/Portal.jsx +++ b/src/pages/Portal.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class Portal extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>My View</Trans> + {i18n._(t`My View`)} @@ -23,4 +25,4 @@ class Portal extends Component { } } -export default Portal; +export default withI18n()(Portal); diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx index 3646c73756..079cb7fe36 100644 --- a/src/pages/Projects.jsx +++ b/src/pages/Projects.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class Projects extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Projects</Trans> + {i18n._(t`Projects`)} @@ -23,4 +25,4 @@ class Projects extends Component { } } -export default Projects; +export default withI18n()(Projects); diff --git a/src/pages/Schedules.jsx b/src/pages/Schedules.jsx index fbada872d5..2d8951685a 100644 --- a/src/pages/Schedules.jsx +++ b/src/pages/Schedules.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class Schedules extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Schedules</Trans> + {i18n._(t`Schedules`)} @@ -23,4 +25,4 @@ class Schedules extends Component { } } -export default Schedules; +export default withI18n()(Schedules); diff --git a/src/pages/SystemSettings.jsx b/src/pages/SystemSettings.jsx index 2cc19192a9..ac33293756 100644 --- a/src/pages/SystemSettings.jsx +++ b/src/pages/SystemSettings.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class SystemSettings extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>System Settings</Trans> + {i18n._(t`System Settings`)} @@ -23,4 +25,4 @@ class SystemSettings extends Component { } } -export default SystemSettings; +export default withI18n()(SystemSettings); diff --git a/src/pages/Teams.jsx b/src/pages/Teams.jsx index e8eb36c2d5..e49bfca702 100644 --- a/src/pages/Teams.jsx +++ b/src/pages/Teams.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class Teams extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Teams</Trans> + {i18n._(t`Teams`)} @@ -23,4 +25,4 @@ class Teams extends Component { } } -export default Teams; +export default withI18n()(Teams); diff --git a/src/pages/Templates.jsx b/src/pages/Templates.jsx index 59ed691f8e..f8a5a99a16 100644 --- a/src/pages/Templates.jsx +++ b/src/pages/Templates.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class Templates extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Templates</Trans> + {i18n._(t`Templates`)} @@ -23,4 +25,4 @@ class Templates extends Component { } } -export default Templates; +export default withI18n()(Templates); diff --git a/src/pages/UISettings.jsx b/src/pages/UISettings.jsx index c581f6633f..c51d5d0e84 100644 --- a/src/pages/UISettings.jsx +++ b/src/pages/UISettings.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class UISettings extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>User Interface Settings</Trans> + {i18n._(t`User Interface Settings`)} @@ -23,4 +25,4 @@ class UISettings extends Component { } } -export default UISettings; +export default withI18n()(UISettings); diff --git a/src/pages/Users.jsx b/src/pages/Users.jsx index 5f6f6b2d34..ca2dd09ebd 100644 --- a/src/pages/Users.jsx +++ b/src/pages/Users.jsx @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; -import { Trans } from '@lingui/macro'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; import { PageSection, PageSectionVariants, @@ -8,13 +9,14 @@ import { class Users extends Component { render () { + const { i18n } = this.props; const { light, medium } = PageSectionVariants; return ( - <Trans>Users</Trans> + {i18n._(t`Users`)} @@ -23,4 +25,4 @@ class Users extends Component { } } -export default Users; +export default withI18n()(Users); diff --git a/src/util/validators.js b/src/util/validators.js deleted file mode 100644 index 939bb1bdec..0000000000 --- a/src/util/validators.js +++ /dev/null @@ -1,20 +0,0 @@ -import { i18nMark } from '@lingui/react'; - -export function required (message) { - return value => { - if (!value.trim()) { - return message || i18nMark('This field must not be blank'); - } - return undefined; - }; -} - -export function maxLength (max) { - return value => { - if (value.trim().length - > max) { - return i18nMark(`This field must not exceed ${max} characters`); - } - return undefined; - }; -} diff --git a/src/util/validators.jsx b/src/util/validators.jsx new file mode 100644 index 0000000000..7de0a0a423 --- /dev/null +++ b/src/util/validators.jsx @@ -0,0 +1,20 @@ +import { t } from '@lingui/macro'; + +export function required (message, i18n) { + return value => { + if (!value.trim()) { + return message || i18n._(t`This field must not be blank`); + } + return undefined; + }; +} + +export function maxLength (max, i18n) { + return value => { + if (value.trim().length + > max) { + return i18n._(t`This field must not exceed ${max} characters`); + } + return undefined; + }; +}