update awx-pf to use withI18n i18n._ and t exclusively

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,13 +66,11 @@ class App extends Component {
   render () {
     const { isAboutModalOpen, isNavOpen } = this.state;
 
-    const { render, routeGroups = [], navLabel = '' } = this.props;
+    const { render, routeGroups = [], navLabel = '', i18n } = this.props;
 
     return (
       <Config>
         {({ ansible_version, version, me }) => (
-          <I18n>
-            {({ i18n }) => (
           <RootDialog>
             {({
               title,
@@ -151,12 +149,10 @@ class App extends Component {
             )}
           </RootDialog>
         )}
-          </I18n>
-        )}
       </Config>
     );
   }
 }
 
 export { App as _App };
-export default withNetwork(App);
+export default withI18n()(withNetwork(App));

src/components/About.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { I18n } from '@lingui/react';
+import { withI18n } from '@lingui/react';
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/macro';
 import {
   AboutModal,
   TextContent,
@@ -41,14 +41,13 @@ class About extends React.Component {
       ansible_version,
       version,
       isOpen,
-      onClose
+      onClose,
+      i18n
     } = this.props;
 
     const speechBubble = this.createSpeechBubble(version);
 
     return (
-      <I18n>
-        {({ i18n }) => (
       <AboutModal
         isOpen={isOpen}
         onClose={onClose}
@@ -73,14 +72,12 @@ class About extends React.Component {
         <TextContent>
           <TextList component="dl">
             <TextListItem component="dt">
-                  <Trans>Ansible Version</Trans>
+              {i18n._(t`Ansible Version`)}
             </TextListItem>
             <TextListItem component="dd">{ ansible_version }</TextListItem>
           </TextList>
         </TextContent>
       </AboutModal>
-        )}
-      </I18n>
     );
   }
 }
@@ -98,4 +95,4 @@ About.defaultProps = {
   version: null,
 };
 
-export default About;
+export default withI18n()(About);

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,37 +127,36 @@ 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>
-            {({ i18n }) => (
           <div style={{ display: 'flex' }}>
             <SelectableCard
               isSelected={selectedResource === 'users'}
@@ -170,17 +169,13 @@ class AddResourceRole extends React.Component {
               onClick={() => this.handleResourceSelect('teams')}
             />
           </div>
-            )}
-          </I18n>
         ),
         enableNext: selectedResource !== null
       },
       {
         id: 2,
-        name: i18nMark('Select items from list'),
+        name: i18n._(t`Select items from list`),
         component: (
-          <I18n>
-            {({ i18n }) => (
           <Fragment>
             {selectedResource === 'users' && (
               <SelectResourceStep
@@ -205,17 +200,13 @@ class AddResourceRole extends React.Component {
               />
             )}
           </Fragment>
-            )}
-          </I18n>
         ),
         enableNext: selectedResourceRows.length > 0
       },
       {
         id: 3,
-        name: i18nMark('Apply roles'),
+        name: i18n._(t`Apply roles`),
         component: (
-          <I18n>
-            {({ i18n }) => (
           <SelectRoleStep
             onRolesClick={this.handleRoleCheckboxClick}
             roles={roles}
@@ -224,16 +215,15 @@ class AddResourceRole extends React.Component {
             selectedResourceRows={selectedResourceRows}
             selectedRoleRows={selectedRoleRows}
           />
-            )}
-          </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 (
       <Wizard
         style={{ overflow: 'scroll' }}
@@ -259,4 +249,4 @@ AddResourceRole.defaultProps = {
   roles: {}
 };
 
-export default AddResourceRole;
+export default withI18n()(AddResourceRole);

src/components/AddRole/SelectResourceStep.jsx

@@ -1,7 +1,8 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
-import { i18nMark } from '@lingui/react';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
 import PaginatedDataList from '../PaginatedDataList';
 import CheckboxListItem from '../ListItem';
 import SelectedList from '../SelectedList';
@@ -87,11 +88,12 @@ class SelectResourceStep extends React.Component {
       selectedLabel,
       selectedResourceRows,
       itemName,
+      i18n
     } = this.props;
 
     return (
       <Fragment>
-        {isLoading && (<div>Loading...</div>)}
+        {isLoading && (<div>{i18n._(t`Loading...`)}</div>)}
         {isInitialized && (
           <Fragment>
             {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));

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 {
             <SelectedList
               displayKey={selectedListKey}
               isReadOnly
-              label={selectedListLabel}
+              label={selectedListLabel || i18n._(t`Selected`)}
               selected={selectedResourceRows}
               showOverflowAfter={5}
             />
@@ -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);

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,10 +20,8 @@ class AnsibleSelect extends React.Component {
   }
 
   render () {
-    const { label, value, data, defaultSelected } = this.props;
+    const { label, value, data, defaultSelected, i18n } = this.props;
     return (
-      <I18n>
-        {({ i18n }) => (
       <FormSelect
         value={value}
         onChange={this.onSelectChange}
@@ -41,8 +39,6 @@ class AnsibleSelect extends React.Component {
           )
         ))}
       </FormSelect>
-        )}
-      </I18n>
     );
   }
 }
@@ -62,4 +58,4 @@ AnsibleSelect.propTypes = {
   value: PropTypes.string.isRequired,
 };
 
-export default AnsibleSelect;
+export default withI18n()(AnsibleSelect);

src/components/CardCloseButton.jsx

@@ -3,14 +3,12 @@ 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>
-        {({ i18n }) => (
       <Link
         className="pf-c-button pf-c-card__close"
         aria-label={i18n._(t`Close`)}
@@ -20,13 +18,9 @@ function CardCloseButton ({ linkTo, ...props }) {
       >
         <TimesIcon />
       </Link>
-        )}
-      </I18n>
     );
   }
   return (
-    <I18n>
-      {({ i18n }) => (
     <Button
       variant="plain"
       className="pf-c-card__close"
@@ -35,8 +29,6 @@ function CardCloseButton ({ linkTo, ...props }) {
     >
       <TimesIcon />
     </Button>
-      )}
-    </I18n>
   );
 }
 CardCloseButton.propTypes = {
@@ -46,4 +38,4 @@ CardCloseButton.defaultProps = {
   linkTo: null,
 };
 
-export default CardCloseButton;
+export default withI18n()(CardCloseButton);

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,12 +85,11 @@ class DataListToolbar extends React.Component {
       sortOrder,
       sortedColumnKey,
       additionalControls,
+      i18n
     } = this.props;
 
     const showExpandCollapse = (onCompact && onExpand);
     return (
-      <I18n>
-        {({ i18n }) => (
       <AWXToolbar>
         <Toolbar marginleft={noLeftMargin ? 1 : 0}>
           <ColumnLeft>
@@ -146,9 +145,6 @@ class DataListToolbar extends React.Component {
           </ColumnRight>
         </Toolbar>
       </AWXToolbar>
-
-        )}
-      </I18n>
     );
   }
 }
@@ -184,4 +180,4 @@ DataListToolbar.defaultProps = {
   additionalControls: [],
 };
 
-export default DataListToolbar;
+export default withI18n()(DataListToolbar);

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,12 +22,11 @@ class ExpandCollapse extends React.Component {
     const {
       onCompact,
       onExpand,
-      isCompact
+      isCompact,
+      i18n
     } = this.props;
 
     return (
-      <I18n>
-        {({ i18n }) => (
       <Fragment>
         <ToolbarItem>
           <Button
@@ -50,8 +49,6 @@ class ExpandCollapse extends React.Component {
           </Button>
         </ToolbarItem>
       </Fragment>
-        )}
-      </I18n>
     );
   }
 }
@@ -64,4 +61,4 @@ ExpandCollapse.propTypes = {
 
 ExpandCollapse.defaultProps = {};
 
-export default ExpandCollapse;
+export default withI18n()(ExpandCollapse);

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,9 +20,7 @@ const buttonGroupStyle = {
   marginRight: '20px'
 };
 
-const FormActionGroup = ({ onSubmit, submitDisabled, onCancel }) => (
+const FormActionGroup = ({ onSubmit, submitDisabled, onCancel, i18n }) => (
-  <I18n>
-    {({ i18n }) => (
   <ActionGroup style={formActionGroupStyle}>
     <Toolbar>
       <ToolbarGroup style={buttonGroupStyle}>
@@ -33,8 +31,6 @@ const FormActionGroup = ({ onSubmit, submitDisabled, onCancel }) => (
       </ToolbarGroup>
     </Toolbar>
   </ActionGroup>
-    )}
-  </I18n>
 );
 
 FormActionGroup.propTypes = {
@@ -47,4 +43,4 @@ FormActionGroup.defaultProps = {
   submitDisabled: false,
 };
 
-export default FormActionGroup;
+export default withI18n()(FormActionGroup);

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 ? (
       <div className="pf-c-chip-group">
@@ -143,8 +145,6 @@ class Lookup extends React.Component {
     ) : null;
 
     return (
-      <I18n>
-        {({ i18n }) => (
       <Fragment>
         <InputGroup className="awx-lookup">
           <Button
@@ -161,7 +161,7 @@ class Lookup extends React.Component {
         </InputGroup>
         <Modal
           className="awx-c-modal"
-              title={`Select ${lookupHeader}`}
+          title={i18n._(t`Select ${header}`)}
           isOpen={isModalOpen}
           onClose={this.handleModalToggle}
           actions={[
@@ -199,8 +199,6 @@ class Lookup extends React.Component {
           { error ? <div>error</div> : '' }
         </Modal>
       </Fragment>
-        )}
-      </I18n>
     );
   }
 }
@@ -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)));

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,12 +37,11 @@ function NotificationListItem (props) {
     detailUrl,
     successTurnedOn,
     errorTurnedOn,
-    toggleNotification
+    toggleNotification,
+    i18n
   } = props;
 
   return (
-    <I18n>
-      {({ i18n }) => (
     <DataListItem
       aria-labelledby={`items-list-item-${notification.id}`}
       key={notification.id}
@@ -93,10 +92,20 @@ function NotificationListItem (props) {
           </DataListCell>
         ]}
         />
+        <Switch
+          id={`notification-${notification.id}-error-toggle`}
+          label={i18n._(t`Failure`)}
+          isChecked={errorTurnedOn}
+          isDisabled={!canToggleNotifications}
+          onChange={() => toggleNotification(
+            notification.id,
+            errorTurnedOn,
+            'error'
+          )}
+          aria-label={i18n._(t`Toggle notification failure`)}
+        />
       </DataListItemRow>
     </DataListItem>
-      )}
-    </I18n>
   );
 }
 
@@ -118,4 +127,4 @@ NotificationListItem.defaultProps = {
   successTurnedOn: false,
 };
 
-export default NotificationListItem;
+export default withI18n()(NotificationListItem);

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 { withI18n } from '@lingui/react';
-import { Trans } from '@lingui/macro';
+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: (
-      <Trans>
+      <Fragment>{i18n._(t`Cannot find route ${(<strong>{location.pathname}</strong>)}.`)}</Fragment>
-        Cannot find route
-        <strong>{` ${location.pathname}`}</strong>
-        .
-      </Trans>
     ),
     variant: 'warning'
   });
@@ -41,4 +38,4 @@ const NotifyAndRedirect = ({
 };
 
 export { NotifyAndRedirect as _NotifyAndRedirect };
-export default withRootDialog(withRouter(NotifyAndRedirect));
+export default withI18n()(withRootDialog(withRouter(NotifyAndRedirect)));

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,12 +56,11 @@ class PageHeaderToolbar extends Component {
       isAboutDisabled,
       onAboutClick,
       onLogoutClick,
-      loggedInUser
+      loggedInUser,
+      i18n
     } = this.props;
 
     return (
-      <I18n>
-        {({ i18n }) => (
       <Toolbar>
         <ToolbarGroup>
           <Tooltip position="left" content={<div>{i18n._(t`Info`)}</div>}>
@@ -127,8 +125,6 @@ class PageHeaderToolbar extends Component {
           </Tooltip>
         </ToolbarGroup>
       </Toolbar>
-        )}
-      </I18n>
     );
   }
 }
@@ -143,4 +139,4 @@ PageHeaderToolbar.defaultProps = {
   isAboutDisabled: false
 };
 
-export default PageHeaderToolbar;
+export default withI18n()(PageHeaderToolbar);

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 { withI18n } from '@lingui/react';
-import { Trans, t } from '@lingui/macro';
+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>
+      <Fragment>
-        {({ i18n }) => (
+        {error && (
           <Fragment>
             {error && (
               <Fragment>
@@ -128,24 +130,10 @@ class PaginatedDataList extends React.Component {
               <EmptyState>
                 <EmptyStateIcon icon={CubesIcon} />
                 <Title size="lg">
-                  <Trans>
+                  {i18n._(t`No ${ucFirst(itemNamePlural || pluralize(itemName))} Found`)}
-                    No
-                    {' '}
-                    {ucFirst(itemNamePlural || pluralize(itemName))}
-                    {' '}
-                    Found
-                  </Trans>
                 </Title>
                 <EmptyStateBody>
-                  <Trans>
+                  {i18n._(t`Please add ${getArticle(itemName)} ${itemName} to populate this list`)}
-                    Please add
-                    {' '}
-                    {getArticle(itemName)}
-                    {' '}
-                    {itemName}
-                    {' '}
-                    to populate this list
-                  </Trans>
                 </EmptyStateBody>
               </EmptyState>
             ) : (
@@ -199,9 +187,67 @@ class PaginatedDataList extends React.Component {
                 />
               </Fragment>
             )}
+          </Fragment> // TODO: replace with proper error handling
+        )}
+        {items.length === 0 ? (
+          <EmptyState>
+            <EmptyStateIcon icon={CubesIcon} />
+            <Title size="lg">
+              {i18n._(t`No ${ucFirst(itemNamePlural || pluralize(itemName))} Found`)}
+            </Title>
+            <EmptyStateBody>
+              {i18n._(t`Please add ${getArticle(itemName)} ${itemName} to populate this list`)}
+            </EmptyStateBody>
+          </EmptyState>
+        ) : (
+          <Fragment>
+            <DataListToolbar
+              sortedColumnKey={orderBy}
+              sortOrder={sortOrder}
+              columns={columns}
+              onSearch={() => { }}
+              onSort={this.handleSort}
+              showSelectAll={showSelectAll}
+              isAllSelected={isAllSelected}
+              onSelectAll={onSelectAll}
+              additionalControls={additionalControls}
+            />
+            <DataList aria-label={i18n._(t`${ucFirst(pluralize(itemName))} List`)}>
+              {items.map(item => (renderItem ? renderItem(item) : (
+                <DataListItem
+                  aria-labelledby={`items-list-item-${item.id}`}
+                  key={item.id}
+                >
+                  <DataListItemRow>
+                    <DataListItemCells dataListCells={[
+                      <DataListCell key="team-name">
+                        <TextContent style={detailWrapperStyle}>
+                          <Link to={{ pathname: item.url }}>
+                            <Text
+                              id={`items-list-item-${item.id}`}
+                              style={detailLabelStyle}
+                            >
+                              {item.name}
+                            </Text>
+                          </Link>
+                        </TextContent>
+                      </DataListCell>
+                    ]}
+                    />
+                  </DataListItemRow>
+                </DataListItem>
+              )))}
+            </DataList>
+            <Pagination
+              count={itemCount}
+              page={queryParams.page}
+              pageCount={this.getPageCount()}
+              page_size={queryParams.page_size}
+              onSetPage={this.handleSetPage}
+            />
           </Fragment>
         )}
-      </I18n>
+      </Fragment>
     );
   }
 }
@@ -235,9 +281,7 @@ PaginatedDataList.propTypes = {
 
 PaginatedDataList.defaultProps = {
   renderItem: null,
-  toolbarColumns: [
+  toolbarColumns: [],
-    { name: i18nMark('Name'), key: 'name', isSortable: true },
-  ],
   additionalControls: [],
   itemName: 'item',
   itemNamePlural: '',
@@ -250,4 +294,4 @@ PaginatedDataList.defaultProps = {
 };
 
 export { PaginatedDataList as _PaginatedDataList };
-export default withRouter(PaginatedDataList);
+export default withI18n()(withRouter(PaginatedDataList));

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,15 +20,13 @@ 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 <Link> (no <Button>) but CSS is off
     return (
-      <I18n>
-        {({ i18n }) => (
       <Link to={linkTo}>
         <Button
           variant="primary"
@@ -37,13 +35,10 @@ function ToolbarAddButton ({ linkTo, onClick }) {
           <PlusIcon />
         </Button>
       </Link>
-        )}
-      </I18n>
     );
   }
+
   return (
-    <I18n>
-      {({ i18n }) => (
     <Button
       variant="primary"
       aria-label={i18n._(t`Add`)}
@@ -51,8 +46,6 @@ function ToolbarAddButton ({ linkTo, onClick }) {
     >
       <PlusIcon />
     </Button>
-      )}
-    </I18n>
   );
 }
 ToolbarAddButton.propTypes = {
@@ -64,4 +57,4 @@ ToolbarAddButton.defaultProps = {
   onClick: null
 };
 
-export default ToolbarAddButton;
+export default withI18n()(ToolbarAddButton);

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,55 +89,49 @@ class ToolbarDeleteButton extends React.Component {
   }
 
   renderTooltip () {
-    const { itemsToDelete, itemName } = this.props;
+    const { itemsToDelete, itemName, i18n } = this.props;
-    if (itemsToDelete.some(cannotDelete)) {
+
-      return (
+    const itemsUnableToDelete = itemsToDelete
-        <div>
-          <Trans>
-            You dont have permission to delete the following
-            {' '}
-            {pluralize(itemName)}
-            :
-          </Trans>
-          {itemsToDelete
       .filter(cannotDelete)
       .map(item => (
         <div key={item.id}>
           {item.name}
         </div>
-            ))
+      ));
-          }
+    if (itemsToDelete.some(cannotDelete)) {
+      return (
+        <div>
+          {i18n._(t`You do not have permission to delete the following ${pluralize(itemName)}: ${itemsUnableToDelete}`)}
         </div>
       );
     }
     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>
-        {({ i18n }) => (
       <Fragment>
         <Tooltip
           content={this.renderTooltip()}
           position="left"
         >
           <Button
+            className="awx-ToolBarBtn"
             variant="plain"
             aria-label={i18n._(t`Delete`)}
             onClick={this.handleConfirmDelete}
             isDisabled={isDisabled}
           >
-                <TrashAltIcon />
+            <TrashAltIcon className="awx-ToolBarTrashCanIcon" />
           </Button>
         </Tooltip>
         { isModalOpen && (
@@ -182,10 +176,8 @@ class ToolbarDeleteButton extends React.Component {
           </AlertModal>
         )}
       </Fragment>
-        )}
-      </I18n>
     );
   }
 }
 
-export default ToolbarDeleteButton;
+export default withI18n()(ToolbarDeleteButton);

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 { withI18n } from '@lingui/react';
-import { Trans, t } from '@lingui/macro';
+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,12 +136,10 @@ class Pagination extends Component {
     ));
 
     return (
-      <I18n>
-        {({ i18n }) => (
       <div className="awx-pagination" style={style}>
         {showPageSizeOptions && (
           <div className="awx-pagination__page-size-selection">
-                <Trans>Items Per Page</Trans>
+            {i18n._(t`Items Per Page`)}
             <Dropdown
               onToggle={this.onTogglePageSize}
               onSelect={this.onSelectPageSize}
@@ -160,7 +159,7 @@ class Pagination extends Component {
         )}
         <div className="awx-pagination__counts">
           <div className="awx-pagination__item-count">
-                <Trans>{`Items ${itemMin} – ${itemMax} of ${count}`}</Trans>
+            {i18n._(t`Items ${itemMin} – ${itemMax} of ${count}`)}
           </div>
           {pageCount !== 1 && (
             <div className="awx-pagination__page-count">
@@ -188,18 +187,13 @@ class Pagination extends Component {
                 className="awx-pagination__page-input-form"
                 onSubmit={this.onSubmit}
               >
-                    <Trans>
+                {i18n._(t`Page ${(<TextInput
-                      {'Page '}
-                      <TextInput
                   className="awx-pagination__page-input"
                   aria-label={i18n._(t`Page Number`)}
                   value={value}
                   type="text"
                   onChange={this.onPageChange}
-                      />
+                />)} of ${pageCount}`)}
-                      {' of '}
-                      {pageCount}
-                    </Trans>
               </form>
               <div className="pf-c-input-group">
                 <Button
@@ -225,8 +219,6 @@ class Pagination extends Component {
           )}
         </div>
       </div>
-        )}
-      </I18n>
     );
   }
 }
@@ -248,4 +240,4 @@ Pagination.defaultProps = {
   showPageSizeOptions: true
 };
 
-export default Pagination;
+export default withI18n()(Pagination);

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,8 +110,6 @@ class Search extends React.Component {
       ));
 
     return (
-      <I18n>
-        {({ i18n }) => (
       <div className="pf-c-input-group">
         <Dropdown
           onToggle={this.handleDropdownToggle}
@@ -129,7 +128,7 @@ class Search extends React.Component {
         />
         <TextInput
           type="search"
-              aria-label="Search text input"
+          aria-label={i18n._(t`Search text input`)}
           value={searchValue}
           onChange={this.handleSearchInputChange}
           style={{ height: '30px' }}
@@ -142,8 +141,6 @@ class Search extends React.Component {
           <SearchIcon />
         </Button>
       </div>
-        )}
-      </I18n>
     );
   }
 }
@@ -159,4 +156,4 @@ Search.defaultProps = {
   sortedColumnKey: 'name'
 };
 
-export default Search;
+export default withI18n()(Search);

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,8 +110,6 @@ class Sort extends React.Component {
     }
 
     return (
-      <I18n>
-        {({ i18n }) => (
       <React.Fragment>
         { sortDropdownItems.length > 1 && (
           <Dropdown
@@ -141,8 +140,6 @@ class Sort extends React.Component {
           </IconWrapper>
         </Button>
       </React.Fragment>
-        )}
-      </I18n>
     );
   }
 }
@@ -160,4 +157,4 @@ Sort.defaultProps = {
   sortedColumnKey: 'name'
 };
 
-export default Sort;
+export default withI18n()(Sort);

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,8 +43,6 @@ class TowerLogo extends Component {
     }
 
     return (
-      <I18n>
-        {({ i18n }) => (
       <Brand
         src={src}
         alt={i18n._(t`Tower Brand Image`)}
@@ -53,8 +52,6 @@ class TowerLogo extends Component {
         onFocus={this.onHover}
         onClick={this.onClick}
       />
-        )}
-      </I18n>
     );
   }
 }
@@ -67,4 +64,4 @@ TowerLogo.defaultProps = {
   linkTo: null,
 };
 
-export default withRouter(TowerLogo);
+export default withI18n()(withRouter(TowerLogo));

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'),
+      title: i18n._(t`404`),
-      bodyText: i18nMark('Cannot find resource.'),
+      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) => (

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Applications</Trans>
+            {i18n._(t`Applications`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class Applications extends Component {
   }
 }
 
-export default Applications;
+export default withI18n()(Applications);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Authentication Settings</Trans>
+            {i18n._(t`Authentication Settings`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class AuthSettings extends Component {
   }
 }
 
-export default AuthSettings;
+export default withI18n()(AuthSettings);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Credential Types</Trans>
+            {i18n._(t`Credential Types`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class CredentialTypes extends Component {
   }
 }
 
-export default CredentialTypes;
+export default withI18n()(CredentialTypes);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Credentials</Trans>
+            {i18n._(t`Credentials`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class Credentials extends Component {
   }
 }
 
-export default Credentials;
+export default withI18n()(Credentials);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Dashboard</Trans>
+            {i18n._(t`Dashboard`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class Dashboard extends Component {
   }
 }
 
-export default Dashboard;
+export default withI18n()(Dashboard);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Instance Groups</Trans>
+            {i18n._(t`Instance Groups`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class InstanceGroups extends Component {
   }
 }
 
-export default InstanceGroups;
+export default withI18n()(InstanceGroups);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Inventories</Trans>
+            {i18n._(t`Inventories`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class Inventories extends Component {
   }
 }
 
-export default Inventories;
+export default withI18n()(Inventories);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Inventory Scripts</Trans>
+            {i18n._(t`Inventory Scripts`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class InventoryScripts extends Component {
   }
 }
 
-export default InventoryScripts;
+export default withI18n()(InventoryScripts);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Jobs</Trans>
+            {i18n._(t`Jobs`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class Jobs extends Component {
   }
 }
 
-export default Jobs;
+export default withI18n()(Jobs);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Jobs Settings</Trans>
+            {i18n._(t`Jobs Settings`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class JobsSettings extends Component {
   }
 }
 
-export default JobsSettings;
+export default withI18n()(JobsSettings);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>License</Trans>
+            {i18n._(t`License`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class License extends Component {
   }
 }
 
-export default License;
+export default withI18n()(License);

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,8 +70,6 @@ class AWXLogin extends Component {
     }
 
     return (
-      <I18n>
-        {({ i18n }) => (
       <LoginPage
         brandImgSrc={logoSrc}
         brandImgAlt={alt || 'Ansible Tower'}
@@ -93,11 +91,9 @@ class AWXLogin extends Component {
           onLoginButtonClick={this.onLoginButtonClick}
         />
       </LoginPage>
-        )}
-      </I18n>
     );
   }
 }
 
 export { AWXLogin as _AWXLogin };
-export default withNetwork(withRootDialog(withRouter(AWXLogin)));
+export default withI18n()(withNetwork(withRootDialog(withRouter(AWXLogin))));

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Management Jobs</Trans>
+            {i18n._(t`Management Jobs`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class ManagementJobs extends Component {
   }
 }
 
-export default ManagementJobs;
+export default withI18n()(ManagementJobs);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Notification Templates</Trans>
+            {i18n._(t`Notification Templates`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class NotificationTemplates extends Component {
   }
 }
 
-export default NotificationTemplates;
+export default withI18n()(NotificationTemplates);

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 { withI18n } from '@lingui/react';
-import { Trans } from '@lingui/macro';
+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 = {
+  constructor (props) {
+    super(props);
+
+    const { i18n } = props;
+
+    this.state = {
       breadcrumbConfig: {
-      '/organizations': i18nMark('Organizations'),
+        '/organizations': i18n._(t`Organizations`),
-      '/organizations/add': i18nMark('Create New Organization')
+        '/organizations/add': i18n._(t`Create New Organization`)
       }
     };
+  }
 
   setBreadcrumbConfig = (organization) => {
+    const { i18n } = this.props;
+
     if (!organization) {
       return;
     }
 
     const breadcrumbConfig = {
-      '/organizations': i18nMark('Organizations'),
+      '/organizations': i18n._(t`Organizations`),
-      '/organizations/add': i18nMark('Create New Organization'),
+      '/organizations/add': i18n._(t`Create New Organization`),
       [`/organizations/${organization.id}`]: `${organization.name}`,
-      [`/organizations/${organization.id}/edit`]: i18nMark('Edit Details'),
+      [`/organizations/${organization.id}/edit`]: i18n._(t`Edit Details`),
-      [`/organizations/${organization.id}/details`]: i18nMark('Details'),
+      [`/organizations/${organization.id}/details`]: i18n._(t`Details`),
-      [`/organizations/${organization.id}/access`]: i18nMark('Access'),
+      [`/organizations/${organization.id}/access`]: i18n._(t`Access`),
-      [`/organizations/${organization.id}/teams`]: i18nMark('Teams'),
+      [`/organizations/${organization.id}/teams`]: i18n._(t`Teams`),
-      [`/organizations/${organization.id}/notifications`]: i18nMark('Notifications'),
+      [`/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: (
-                      <Trans>
+                      <Fragment>
-                        Cannot find organization with ID
+                        {i18n._(t`Cannot find organization with ID`)}
                         <strong>{` ${newRouteMatch.params.id}`}</strong>
                         .
-                      </Trans>
+                      </Fragment>
                     ),
                     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)));

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 { withI18n } from '@lingui/react';
-import { t, Trans } from '@lingui/macro';
+import { t } from '@lingui/macro';
 import AlertModal from '../../../components/AlertModal';
 import { Role } from '../../../types';
 
@@ -24,14 +24,12 @@ class DeleteRoleConfirmationModal extends React.Component {
   }
 
   render () {
-    const { role, username, onCancel, onConfirm } = this.props;
+    const { role, username, onCancel, onConfirm, i18n } = this.props;
-    const title = `Remove ${this.isTeamRole() ? 'Team' : 'User'} Access`;
+    const title = i18n._(t`Remove ${this.isTeamRole() ? i18n._(t`Team`) : i18n._(t`User`)} Access`);
     return (
-      <I18n>
-        {({ i18n }) => (
       <AlertModal
         variant="danger"
-            title={i18nMark(title)}
+        title={title}
         isOpen
         onClose={onCancel}
         actions={[
@@ -49,32 +47,20 @@ class DeleteRoleConfirmationModal extends React.Component {
         ]}
       >
         {this.isTeamRole() ? (
-              <Trans>
+          <Fragment>
-                Are you sure you want to remove
+            {i18n._(t`Are you sure you want to remove ${role.name} access from ${role.team_name}?  Doing so affects all members of the team.`)}
-                <b>{` ${role.name} `}</b>
-                access from
-                <b>{` ${role.team_name}`}</b>
-                ?  Doing so affects all members of the team.
             <br />
             <br />
-                If you
+            {i18n._(t`If you ${(<b><i>only</i></b>)} want to remove access for this particular user, please remove them from the team.`)}
-                <b><i> only </i></b>
+          </Fragment>
-                want to remove access for this particular user, please remove them from the team.
-              </Trans>
         ) : (
-              <Trans>
+          <Fragment>
-                Are you sure you want to remove
+            {i18n._(t`Are you sure you want to remove ${role.name} access from ${username}?`)}
-                <b>{` ${role.name} `}</b>
+          </Fragment>
-                access from
-                <b>{` ${username}`}</b>
-                ?
-              </Trans>
         )}
       </AlertModal>
-        )}
-      </I18n>
     );
   }
 }
 
-export default DeleteRoleConfirmationModal;
+export default withI18n()(DeleteRoleConfirmationModal);

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,11 +23,9 @@ class InstanceGroupsLookup extends React.Component {
   }
 
   render () {
-    const { value, tooltip, onChange } = this.props;
+    const { value, tooltip, onChange, i18n } = this.props;
 
     return (
-      <I18n>
-        {({ i18n }) => (
       <FormGroup
         label={(
           <Fragment>
@@ -60,12 +52,14 @@ class InstanceGroupsLookup extends React.Component {
           value={value}
           onLookupSave={onChange}
           getItems={this.getInstanceGroups}
-              columns={INSTANCE_GROUPS_LOOKUP_COLUMNS}
+          columns={[
+            { name: i18n._(t`Name`), key: 'name', isSortable: true },
+            { name: i18n._(t`Modified`), key: 'modified', isSortable: false, isNumeric: true },
+            { name: i18n._(t`Created`), key: 'created', isSortable: false, isNumeric: true }
+          ]}
           sortedColumnKey="name"
         />
       </FormGroup>
-        )}
-      </I18n>
     );
   }
 }
@@ -80,4 +74,4 @@ InstanceGroupsLookup.defaultProps = {
   tooltip: '',
 };
 
-export default withNetwork(InstanceGroupsLookup);
+export default withI18n()(withNetwork(InstanceGroupsLookup));

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,12 +81,10 @@ class OrganizationAccessItem extends React.Component {
   }
 
   render () {
-    const { accessRecord, onRoleDelete } = this.props;
+    const { accessRecord, onRoleDelete, i18n } = this.props;
     const [teamRoles, userRoles] = this.getRoleLists();
 
     return (
-      <I18n>
-        {({ i18n }) => (
       <DataListItem aria-labelledby="access-list-item" key={accessRecord.id}>
         <DataListItemRow>
           <DataListItemCells dataListCells={[
@@ -167,10 +165,8 @@ class OrganizationAccessItem extends React.Component {
           />
         </DataListItemRow>
       </DataListItem>
-        )}
-      </I18n>
     );
   }
 }
 
-export default OrganizationAccessItem;
+export default withI18n()(OrganizationAccessItem);

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,13 +83,11 @@ 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>
-        {({ i18n }) => (
       <Formik
         initialValues={{
           name: organization.name,
@@ -105,7 +103,7 @@ class OrganizationForm extends Component {
                 name="name"
                 type="text"
                 label={i18n._(t`Name`)}
-                    validate={required()}
+                validate={required(null, i18n)}
                 isRequired
               />
               <FormField
@@ -151,8 +149,6 @@ class OrganizationForm extends Component {
           </Form>
         )}
       />
-        )}
-      </I18n>
     );
   }
 }
@@ -176,4 +172,4 @@ OrganizationForm.contextTypes = {
 };
 
 export { OrganizationForm as _OrganizationForm };
-export default withNetwork(withRouter(OrganizationForm));
+export default withI18n()(withNetwork(withRouter(OrganizationForm)));

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 {
             </DataListCell>,
             <DataListCell key="org-members" righthalf="true" width={2}>
               <ListGroup>
-                <Trans>Members</Trans>
+                {i18n._(t`Members`)}
                 <Badge isRead>
                   {organization.summary_fields.related_field_counts.users}
                 </Badge>
               </ListGroup>
+            </DataListCell>,
+            <DataListCell>
               <ListGroup>
-                <Trans>Teams</Trans>
+                {i18n._(t`Teams`)}
                 <Badge isRead>
                   {organization.summary_fields.related_field_counts.teams}
                 </Badge>
@@ -105,4 +109,4 @@ class OrganizationListItem extends React.Component {
     );
   }
 }
-export default OrganizationListItem;
+export default withI18n()(OrganizationListItem);

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: i18n._(t`Details`), link: `${match.url}/details`, id: 0 },
-      { name: i18nMark('Access'), link: `${match.url}/access`, id: 1 },
+      { name: i18n._(t`Access`), link: `${match.url}/access`, id: 1 },
-      { name: i18nMark('Teams'), link: `${match.url}/teams`, id: 2 }
+      { 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,9 +146,6 @@ class Organization extends Component {
           <CardHeader
             style={tabsStyle}
           >
-            <I18n>
-              {({ i18n }) => (
-                <React.Fragment>
             <div className="awx-orgTabs-container">
               <RoutedTabs
                 match={match}
@@ -160,9 +158,6 @@ class Organization extends Component {
                 className="awx-orgTabs__bottom-border"
               />
             </div>
-                </React.Fragment>
-              )}
-            </I18n>
           </CardHeader>
         ));
     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 };

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: i18n._(t`Name`), key: 'first_name', isSortable: true },
-              { name: i18nMark('Username'), key: 'username', isSortable: true },
+              { name: i18n._(t`Username`), key: 'username', isSortable: true },
-              { name: i18nMark('Last Name'), key: 'last_name', isSortable: true },
+              { name: i18n._(t`Last Name`), key: 'last_name', isSortable: true },
             ]}
             additionalControls={canEdit ? [
               <ToolbarAddButton key="add" onClick={this.toggleAddModal} />
@@ -197,4 +198,4 @@ class OrganizationAccess extends React.Component {
 }
 
 export { OrganizationAccess as _OrganizationAccess };
-export default withNetwork(withRouter(OrganizationAccess));
+export default withI18n()(withNetwork(withRouter(OrganizationAccess)));

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 { withI18n } from '@lingui/react';
-import { Trans, t } from '@lingui/macro';
+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,8 +128,6 @@ class OrganizationDetail extends Component {
     ) : null;
 
     return (
-      <I18n>
-        {({ i18n }) => (
       <CardBody>
         <div className="pf-l-grid pf-m-gutter pf-m-all-12-col-on-md pf-m-all-6-col-on-lg pf-m-all-4-col-on-xl">
           <Detail
@@ -157,7 +156,7 @@ class OrganizationDetail extends Component {
                 component={TextVariants.h6}
                 style={detailLabelStyle}
               >
-                    <Trans>Instance Groups</Trans>
+                {i18n._(t`Instance Groups`)}
               </Text>
               <div style={detailValueStyle}>
                 {instanceGroupChips}
@@ -169,16 +168,14 @@ class OrganizationDetail extends Component {
         {summary_fields.user_capabilities.edit && (
           <div style={{ display: 'flex', flexDirection: 'row-reverse', marginTop: '20px' }}>
             <Link to={`/organizations/${match.params.id}/edit`}>
-                  <Button><Trans>Edit</Trans></Button>
+              <Button>{i18n._(t`Edit`)}</Button>
             </Link>
           </div>
         )}
         {error ? 'error!' : ''}
       </CardBody>
-        )}
-      </I18n>
     );
   }
 }
 
-export default withRouter(withNetwork(OrganizationDetail));
+export default withI18n()(withRouter(withNetwork(OrganizationDetail)));

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,11 +57,10 @@ class OrganizationAdd extends React.Component {
 
   render () {
     const { error } = this.state;
+    const { i18n } = this.props;
 
     return (
       <PageSection>
-        <I18n>
-          {({ i18n }) => (
         <Card>
           <CardHeader className="at-u-textRight">
             <Tooltip
@@ -79,8 +78,6 @@ class OrganizationAdd extends React.Component {
             {error ? <div>error</div> : ''}
           </CardBody>
         </Card>
-          )}
-        </I18n>
       </PageSection>
     );
   }
@@ -95,4 +92,4 @@ OrganizationAdd.contextTypes = {
 };
 
 export { OrganizationAdd as _OrganizationAdd };
-export default withNetwork(withRouter(OrganizationAdd));
+export default withI18n()(withNetwork(withRouter(OrganizationAdd)));

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)));

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>My View</Trans>
+            {i18n._(t`My View`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class Portal extends Component {
   }
 }
 
-export default Portal;
+export default withI18n()(Portal);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Projects</Trans>
+            {i18n._(t`Projects`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class Projects extends Component {
   }
 }
 
-export default Projects;
+export default withI18n()(Projects);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Schedules</Trans>
+            {i18n._(t`Schedules`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class Schedules extends Component {
   }
 }
 
-export default Schedules;
+export default withI18n()(Schedules);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>System Settings</Trans>
+            {i18n._(t`System Settings`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class SystemSettings extends Component {
   }
 }
 
-export default SystemSettings;
+export default withI18n()(SystemSettings);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Teams</Trans>
+            {i18n._(t`Teams`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class Teams extends Component {
   }
 }
 
-export default Teams;
+export default withI18n()(Teams);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Templates</Trans>
+            {i18n._(t`Templates`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class Templates extends Component {
   }
 }
 
-export default Templates;
+export default withI18n()(Templates);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>User Interface Settings</Trans>
+            {i18n._(t`User Interface Settings`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class UISettings extends Component {
   }
 }
 
-export default UISettings;
+export default withI18n()(UISettings);

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 (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">
-            <Trans>Users</Trans>
+            {i18n._(t`Users`)}
           </Title>
         </PageSection>
         <PageSection variant={medium} />
@@ -23,4 +25,4 @@ class Users extends Component {
   }
 }
 
-export default Users;
+export default withI18n()(Users);

src/util/validators.js

@@ -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;
-  };
-}

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;
+  };
+}