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

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 {
           <CardHeader
             style={tabsStyle}
           >
-            <I18n>
-              {({ i18n }) => (
-                <React.Fragment>
-                  <div className="awx-orgTabs-container">
-                    <RoutedTabs
-                      match={match}
-                      history={history}
-                      labeltext={i18n._(t`Organization detail tabs`)}
-                      tabsArray={tabsArray}
-                    />
-                    <CardCloseButton linkTo="/organizations" />
-                    <div
-                      className="awx-orgTabs__bottom-border"
-                    />
-                  </div>
-                </React.Fragment>
-              )}
-            </I18n>
+            <div className="awx-orgTabs-container">
+              <RoutedTabs
+                match={match}
+                history={history}
+                labeltext={i18n._(t`Organization detail tabs`)}
+                tabsArray={tabsArray}
+              />
+              <CardCloseButton linkTo="/organizations" />
+              <div
+                className="awx-orgTabs__bottom-border"
+              />
+            </div>
           </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: 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 ? [
               <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 { 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>
-        {({ 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
-                label={i18n._(t`Name`)}
-                value={name}
-              />
-              <Detail
-                label={i18n._(t`Description`)}
-                value={description}
-              />
-              <Detail
-                label={i18n._(t`Ansible Environment`)}
-                value={custom_virtualenv}
-              />
-              <Detail
-                label={i18n._(t`Created`)}
-                value={created}
-              />
-              <Detail
-                label={i18n._(t`Last Modified`)}
-                value={modified}
-              />
-              {(instanceGroups && instanceGroups.length > 0) && (
-                <TextContent style={{ display: 'flex', gridColumn: '1 / -1' }}>
-                  <Text
-                    component={TextVariants.h6}
-                    style={detailLabelStyle}
-                  >
-                    <Trans>Instance Groups</Trans>
-                  </Text>
-                  <div style={detailValueStyle}>
-                    {instanceGroupChips}
-                    {overflowChip}
-                  </div>
-                </TextContent>
-              )}
-            </div>
-            {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>
-                </Link>
+      <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
+            label={i18n._(t`Name`)}
+            value={name}
+          />
+          <Detail
+            label={i18n._(t`Description`)}
+            value={description}
+          />
+          <Detail
+            label={i18n._(t`Ansible Environment`)}
+            value={custom_virtualenv}
+          />
+          <Detail
+            label={i18n._(t`Created`)}
+            value={created}
+          />
+          <Detail
+            label={i18n._(t`Last Modified`)}
+            value={modified}
+          />
+          {(instanceGroups && instanceGroups.length > 0) && (
+            <TextContent style={{ display: 'flex', gridColumn: '1 / -1' }}>
+              <Text
+                component={TextVariants.h6}
+                style={detailLabelStyle}
+              >
+                {i18n._(t`Instance Groups`)}
+              </Text>
+              <div style={detailValueStyle}>
+                {instanceGroupChips}
+                {overflowChip}
               </div>
-            )}
-            {error ? 'error!' : ''}
-          </CardBody>
+            </TextContent>
+          )}
+        </div>
+        {summary_fields.user_capabilities.edit && (
+          <div style={{ display: 'flex', flexDirection: 'row-reverse', marginTop: '20px' }}>
+            <Link to={`/organizations/${match.params.id}/edit`}>
+              <Button>{i18n._(t`Edit`)}</Button>
+            </Link>
+          </div>
         )}
-      </I18n>
+        {error ? 'error!' : ''}
+      </CardBody>
     );
   }
 }
 
-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,30 +57,27 @@ 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
-                  content={i18n._(t`Close`)}
-                  position="top"
-                >
-                  <CardCloseButton onClick={this.handleCancel} />
-                </Tooltip>
-              </CardHeader>
-              <CardBody>
-                <OrganizationForm
-                  handleSubmit={this.handleSubmit}
-                  handleCancel={this.handleCancel}
-                />
-                {error ? <div>error</div> : ''}
-              </CardBody>
-            </Card>
-          )}
-        </I18n>
+        <Card>
+          <CardHeader className="at-u-textRight">
+            <Tooltip
+              content={i18n._(t`Close`)}
+              position="top"
+            >
+              <CardCloseButton onClick={this.handleCancel} />
+            </Tooltip>
+          </CardHeader>
+          <CardBody>
+            <OrganizationForm
+              handleSubmit={this.handleSubmit}
+              handleCancel={this.handleCancel}
+            />
+            {error ? <div>error</div> : ''}
+          </CardBody>
+        </Card>
       </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)));