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

src/pages/Organizations/components/DeleteRoleConfirmationModal.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { func, string } from 'prop-types';
 import { Button } from '@patternfly/react-core';
-import { I18n, i18nMark } from '@lingui/react';
-import { t, Trans } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
 import AlertModal from '../../../components/AlertModal';
 import { Role } from '../../../types';
 
@@ -24,57 +24,43 @@ class DeleteRoleConfirmationModal extends React.Component {
   }
 
   render () {
-    const { role, username, onCancel, onConfirm } = this.props;
-    const title = `Remove ${this.isTeamRole() ? 'Team' : 'User'} Access`;
+    const { role, username, onCancel, onConfirm, i18n } = this.props;
+    const title = i18n._(t`Remove ${this.isTeamRole() ? i18n._(t`Team`) : i18n._(t`User`)} Access`);
     return (
-      <I18n>
-        {({ i18n }) => (
-          <AlertModal
+      <AlertModal
+        variant="danger"
+        title={title}
+        isOpen
+        onClose={onCancel}
+        actions={[
+          <Button
+            key="delete"
             variant="danger"
-            title={i18nMark(title)}
-            isOpen
-            onClose={onCancel}
-            actions={[
-              <Button
-                key="delete"
-                variant="danger"
-                aria-label="Confirm delete"
-                onClick={onConfirm}
-              >
-                {i18n._(t`Delete`)}
-              </Button>,
-              <Button key="cancel" variant="secondary" onClick={onCancel}>
-                {i18n._(t`Cancel`)}
-              </Button>
-            ]}
+            aria-label="Confirm delete"
+            onClick={onConfirm}
           >
-            {this.isTeamRole() ? (
-              <Trans>
-                Are you sure you want to remove
-                <b>{` ${role.name} `}</b>
-                access from
-                <b>{` ${role.team_name}`}</b>
-                ?  Doing so affects all members of the team.
-                <br />
-                <br />
-                If you
-                <b><i> only </i></b>
-                want to remove access for this particular user, please remove them from the team.
-              </Trans>
-            ) : (
-              <Trans>
-                Are you sure you want to remove
-                <b>{` ${role.name} `}</b>
-                access from
-                <b>{` ${username}`}</b>
-                ?
-              </Trans>
-            )}
-          </AlertModal>
+            {i18n._(t`Delete`)}
+          </Button>,
+          <Button key="cancel" variant="secondary" onClick={onCancel}>
+            {i18n._(t`Cancel`)}
+          </Button>
+        ]}
+      >
+        {this.isTeamRole() ? (
+          <Fragment>
+            {i18n._(t`Are you sure you want to remove ${role.name} access from ${role.team_name}?  Doing so affects all members of the team.`)}
+            <br />
+            <br />
+            {i18n._(t`If you ${(<b><i>only</i></b>)} want to remove access for this particular user, please remove them from the team.`)}
+          </Fragment>
+        ) : (
+          <Fragment>
+            {i18n._(t`Are you sure you want to remove ${role.name} access from ${username}?`)}
+          </Fragment>
         )}
-      </I18n>
+      </AlertModal>
     );
   }
 }
 
-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,43 +23,43 @@ class InstanceGroupsLookup extends React.Component {
   }
 
   render () {
-    const { value, tooltip, onChange } = this.props;
+    const { value, tooltip, onChange, i18n } = this.props;
 
     return (
-      <I18n>
-        {({ i18n }) => (
-          <FormGroup
-            label={(
-              <Fragment>
-                {i18n._(t`Instance Groups`)}
-                {' '}
-                {
-                  tooltip && (
-                    <Tooltip
-                      position="right"
-                      content={tooltip}
-                    >
-                      <QuestionCircleIcon />
-                    </Tooltip>
-                  )
-                }
-              </Fragment>
-            )}
-            fieldId="org-instance-groups"
-          >
-            <Lookup
-              id="org-instance-groups"
-              lookupHeader={i18n._(t`Instance Groups`)}
-              name="instanceGroups"
-              value={value}
-              onLookupSave={onChange}
-              getItems={this.getInstanceGroups}
-              columns={INSTANCE_GROUPS_LOOKUP_COLUMNS}
-              sortedColumnKey="name"
-            />
-          </FormGroup>
+      <FormGroup
+        label={(
+          <Fragment>
+            {i18n._(t`Instance Groups`)}
+            {' '}
+            {
+              tooltip && (
+                <Tooltip
+                  position="right"
+                  content={tooltip}
+                >
+                  <QuestionCircleIcon />
+                </Tooltip>
+              )
+            }
+          </Fragment>
         )}
-      </I18n>
+        fieldId="org-instance-groups"
+      >
+        <Lookup
+          id="org-instance-groups"
+          lookupHeader={i18n._(t`Instance Groups`)}
+          name="instanceGroups"
+          value={value}
+          onLookupSave={onChange}
+          getItems={this.getInstanceGroups}
+          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>
     );
   }
 }
@@ -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,96 +81,92 @@ class OrganizationAccessItem extends React.Component {
   }
 
   render () {
-    const { accessRecord, onRoleDelete } = this.props;
+    const { accessRecord, onRoleDelete, i18n } = this.props;
     const [teamRoles, userRoles] = this.getRoleLists();
 
     return (
-      <I18n>
-        {({ i18n }) => (
-          <DataListItem aria-labelledby="access-list-item" key={accessRecord.id}>
-            <DataListItemRow>
-              <DataListItemCells dataListCells={[
-                <DataListCell key="name">
-                  {accessRecord.username && (
-                    <TextContent style={detailWrapperStyle}>
-                      {accessRecord.url ? (
-                        <Link to={{ pathname: accessRecord.url }}>
-                          <Text component={TextVariants.h6} style={detailLabelStyle}>
-                            {accessRecord.username}
-                          </Text>
-                        </Link>
-                      ) : (
-                        <Text component={TextVariants.h6} style={detailLabelStyle}>
-                          {accessRecord.username}
-                        </Text>
-                      )}
-                    </TextContent>
-                  )}
-                  {accessRecord.first_name || accessRecord.last_name ? (
-                    <Detail
-                      label={i18n._(t`Name`)}
-                      value={`${accessRecord.first_name} ${accessRecord.last_name}`}
-                      url={null}
-                      customStyles={null}
-                    />
+      <DataListItem aria-labelledby="access-list-item" key={accessRecord.id}>
+        <DataListItemRow>
+          <DataListItemCells dataListCells={[
+            <DataListCell key="name">
+              {accessRecord.username && (
+                <TextContent style={detailWrapperStyle}>
+                  {accessRecord.url ? (
+                    <Link to={{ pathname: accessRecord.url }}>
+                      <Text component={TextVariants.h6} style={detailLabelStyle}>
+                        {accessRecord.username}
+                      </Text>
+                    </Link>
                   ) : (
-                    null
+                    <Text component={TextVariants.h6} style={detailLabelStyle}>
+                      {accessRecord.username}
+                    </Text>
                   )}
-                </DataListCell>,
-                <DataListCell key="roles">
-                  {userRoles.length > 0 && (
-                    <ul style={userRolesWrapperStyle}>
-                      <Text component={TextVariants.h6} style={detailLabelStyle}>
-                        {i18n._(t`User Roles`)}
-                      </Text>
-                      {userRoles.map(role => (
-                        role.user_capabilities.unattach ? (
-                          <Chip
-                            key={role.id}
-                            className="awx-c-chip"
-                            onClick={() => { onRoleDelete(role, accessRecord); }}
-                          >
-                            {role.name}
-                          </Chip>
-                        ) : (
-                          <BasicChip key={role.id}>
-                            {role.name}
-                          </BasicChip>
-                        )
-                      ))}
-                    </ul>
-                  )}
-                  {teamRoles.length > 0 && (
-                    <ul style={userRolesWrapperStyle}>
-                      <Text component={TextVariants.h6} style={detailLabelStyle}>
-                        {i18n._(t`Team Roles`)}
-                      </Text>
-                      {teamRoles.map(role => (
-                        role.user_capabilities.unattach ? (
-                          <Chip
-                            key={role.id}
-                            className="awx-c-chip"
-                            onClick={() => { onRoleDelete(role, accessRecord); }}
-                          >
-                            {role.name}
-                          </Chip>
-                        ) : (
-                          <BasicChip key={role.id}>
-                            {role.name}
-                          </BasicChip>
-                        )
-                      ))}
-                    </ul>
-                  )}
-                </DataListCell>
-              ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-        )}
-      </I18n>
+                </TextContent>
+              )}
+              {accessRecord.first_name || accessRecord.last_name ? (
+                <Detail
+                  label={i18n._(t`Name`)}
+                  value={`${accessRecord.first_name} ${accessRecord.last_name}`}
+                  url={null}
+                  customStyles={null}
+                />
+              ) : (
+                null
+              )}
+            </DataListCell>,
+            <DataListCell key="roles">
+              {userRoles.length > 0 && (
+                <ul style={userRolesWrapperStyle}>
+                  <Text component={TextVariants.h6} style={detailLabelStyle}>
+                    {i18n._(t`User Roles`)}
+                  </Text>
+                  {userRoles.map(role => (
+                    role.user_capabilities.unattach ? (
+                      <Chip
+                        key={role.id}
+                        className="awx-c-chip"
+                        onClick={() => { onRoleDelete(role, accessRecord); }}
+                      >
+                        {role.name}
+                      </Chip>
+                    ) : (
+                      <BasicChip key={role.id}>
+                        {role.name}
+                      </BasicChip>
+                    )
+                  ))}
+                </ul>
+              )}
+              {teamRoles.length > 0 && (
+                <ul style={userRolesWrapperStyle}>
+                  <Text component={TextVariants.h6} style={detailLabelStyle}>
+                    {i18n._(t`Team Roles`)}
+                  </Text>
+                  {teamRoles.map(role => (
+                    role.user_capabilities.unattach ? (
+                      <Chip
+                        key={role.id}
+                        className="awx-c-chip"
+                        onClick={() => { onRoleDelete(role, accessRecord); }}
+                      >
+                        {role.name}
+                      </Chip>
+                    ) : (
+                      <BasicChip key={role.id}>
+                        {role.name}
+                      </BasicChip>
+                    )
+                  ))}
+                </ul>
+              )}
+            </DataListCell>
+          ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
     );
   }
 }
 
-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,76 +83,72 @@ class OrganizationForm extends Component {
   }
 
   render () {
-    const { organization, handleCancel } = this.props;
+    const { organization, handleCancel, i18n } = this.props;
     const { instanceGroups, formIsValid, error } = this.state;
     const defaultVenv = '/venv/ansible/';
 
     return (
-      <I18n>
-        {({ i18n }) => (
-          <Formik
-            initialValues={{
-              name: organization.name,
-              description: organization.description,
-              custom_virtualenv: organization.custom_virtualenv || '',
-            }}
-            onSubmit={this.handleSubmit}
-            render={formik => (
-              <Form autoComplete="off" onSubmit={formik.handleSubmit}>
-                <FormRow>
-                  <FormField
-                    id="org-name"
-                    name="name"
-                    type="text"
-                    label={i18n._(t`Name`)}
-                    validate={required()}
-                    isRequired
-                  />
-                  <FormField
-                    id="org-description"
-                    name="description"
-                    type="text"
-                    label={i18n._(t`Description`)}
-                  />
-                  <Config>
-                    {({ custom_virtualenvs }) => (
-                      custom_virtualenvs && custom_virtualenvs.length > 1 && (
-                        <Field
-                          name="custom_virtualenv"
-                          render={({ field }) => (
-                            <FormGroup
-                              fieldId="org-custom-virtualenv"
-                              label={i18n._(t`Ansible Environment`)}
-                            >
-                              <AnsibleSelect
-                                data={custom_virtualenvs}
-                                defaultSelected={defaultVenv}
-                                label={i18n._(t`Ansible Environment`)}
-                                {...field}
-                              />
-                            </FormGroup>
-                          )}
-                        />
-                      )
-                    )}
-                  </Config>
-                </FormRow>
-                <InstanceGroupsLookup
-                  value={instanceGroups}
-                  onChange={this.handleInstanceGroupsChange}
-                  tooltip={i18n._(t`Select the Instance Groups for this Organization to run on.`)}
-                />
-                <FormActionGroup
-                  onCancel={handleCancel}
-                  onSubmit={formik.handleSubmit}
-                  submitDisabled={!formIsValid}
-                />
-                {error ? <div>error</div> : null}
-              </Form>
-            )}
-          />
+      <Formik
+        initialValues={{
+          name: organization.name,
+          description: organization.description,
+          custom_virtualenv: organization.custom_virtualenv || '',
+        }}
+        onSubmit={this.handleSubmit}
+        render={formik => (
+          <Form autoComplete="off" onSubmit={formik.handleSubmit}>
+            <FormRow>
+              <FormField
+                id="org-name"
+                name="name"
+                type="text"
+                label={i18n._(t`Name`)}
+                validate={required(null, i18n)}
+                isRequired
+              />
+              <FormField
+                id="org-description"
+                name="description"
+                type="text"
+                label={i18n._(t`Description`)}
+              />
+              <Config>
+                {({ custom_virtualenvs }) => (
+                  custom_virtualenvs && custom_virtualenvs.length > 1 && (
+                    <Field
+                      name="custom_virtualenv"
+                      render={({ field }) => (
+                        <FormGroup
+                          fieldId="org-custom-virtualenv"
+                          label={i18n._(t`Ansible Environment`)}
+                        >
+                          <AnsibleSelect
+                            data={custom_virtualenvs}
+                            defaultSelected={defaultVenv}
+                            label={i18n._(t`Ansible Environment`)}
+                            {...field}
+                          />
+                        </FormGroup>
+                      )}
+                    />
+                  )
+                )}
+              </Config>
+            </FormRow>
+            <InstanceGroupsLookup
+              value={instanceGroups}
+              onChange={this.handleInstanceGroupsChange}
+              tooltip={i18n._(t`Select the Instance Groups for this Organization to run on.`)}
+            />
+            <FormActionGroup
+              onCancel={handleCancel}
+              onSubmit={formik.handleSubmit}
+              submitDisabled={!formIsValid}
+            />
+            {error ? <div>error</div> : null}
+          </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);