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

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>
-            {({ i18n }) => (
-              <div style={{ display: 'flex' }}>
-                <SelectableCard
-                  isSelected={selectedResource === 'users'}
-                  label={i18n._(t`Users`)}
-                  onClick={() => this.handleResourceSelect('users')}
-                />
-                <SelectableCard
-                  isSelected={selectedResource === 'teams'}
-                  label={i18n._(t`Teams`)}
-                  onClick={() => this.handleResourceSelect('teams')}
-                />
-              </div>
-            )}
-          </I18n>
+          <div style={{ display: 'flex' }}>
+            <SelectableCard
+              isSelected={selectedResource === 'users'}
+              label={i18n._(t`Users`)}
+              onClick={() => this.handleResourceSelect('users')}
+            />
+            <SelectableCard
+              isSelected={selectedResource === 'teams'}
+              label={i18n._(t`Teams`)}
+              onClick={() => this.handleResourceSelect('teams')}
+            />
+          </div>
         ),
         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
-                    columns={userColumns}
-                    displayKey="username"
-                    onRowClick={this.handleResourceCheckboxClick}
-                    onSearch={this.readUsers}
-                    selectedLabel={i18n._(t`Selected`)}
-                    selectedResourceRows={selectedResourceRows}
-                    sortedColumnKey="username"
-                    itemName="user"
-                  />
-                )}
-                {selectedResource === 'teams' && (
-                  <SelectResourceStep
-                    columns={teamColumns}
-                    onRowClick={this.handleResourceCheckboxClick}
-                    onSearch={this.readTeams}
-                    selectedLabel={i18n._(t`Selected`)}
-                    selectedResourceRows={selectedResourceRows}
-                    itemName="team"
-                  />
-                )}
-              </Fragment>
+          <Fragment>
+            {selectedResource === 'users' && (
+              <SelectResourceStep
+                columns={userColumns}
+                displayKey="username"
+                onRowClick={this.handleResourceCheckboxClick}
+                onSearch={this.readUsers}
+                selectedLabel={i18n._(t`Selected`)}
+                selectedResourceRows={selectedResourceRows}
+                sortedColumnKey="username"
+                itemName="user"
+              />
             )}
-          </I18n>
+            {selectedResource === 'teams' && (
+              <SelectResourceStep
+                columns={teamColumns}
+                onRowClick={this.handleResourceCheckboxClick}
+                onSearch={this.readTeams}
+                selectedLabel={i18n._(t`Selected`)}
+                selectedResourceRows={selectedResourceRows}
+                itemName="team"
+              />
+            )}
+          </Fragment>
         ),
         enableNext: selectedResourceRows.length > 0
       },
       {
         id: 3,
-        name: i18nMark('Apply roles'),
+        name: i18n._(t`Apply roles`),
         component: (
-          <I18n>
-            {({ i18n }) => (
-              <SelectRoleStep
-                onRolesClick={this.handleRoleCheckboxClick}
-                roles={roles}
-                selectedListKey={selectedResource === 'users' ? 'username' : 'name'}
-                selectedListLabel={i18n._(t`Selected`)}
-                selectedResourceRows={selectedResourceRows}
-                selectedRoleRows={selectedRoleRows}
-              />
-            )}
-          </I18n>
+          <SelectRoleStep
+            onRolesClick={this.handleRoleCheckboxClick}
+            roles={roles}
+            selectedListKey={selectedResource === 'users' ? 'username' : 'name'}
+            selectedListLabel={i18n._(t`Selected`)}
+            selectedResourceRows={selectedResourceRows}
+            selectedRoleRows={selectedRoleRows}
+          />
         ),
-        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);