Merge remote-tracking branch 'origin/add-org-new' into react-context-api

src/pages/Organizations/components/OrganizationBreadcrumb.jsx

@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -49,14 +50,14 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
       breadcrumb = (
         <Fragment>
           {generateCrumb()}
-          {' > edit'}
+          <Trans>{' > edit'}</Trans>
         </Fragment>
       );
     } else if (location.pathname.indexOf('add') > -1) {
       breadcrumb = (
         <Fragment>
           {generateCrumb()}
-          {' > add'}
+          <Trans>{' > add'}</Trans>
         </Fragment>
       );
     } else {

src/pages/Organizations/components/OrganizationDetail.jsx

@@ -1,4 +1,6 @@
 import React, { Fragment } from 'react';
+import { I18n } from '@lingui/react';
+import { Trans, t } from '@lingui/macro';
 import {
   Card,
   CardHeader,
@@ -62,52 +64,56 @@ const OrganizationDetail = ({
 
   const deleteResourceView = () => (
     <Fragment>
-      {`deleting ${currentTab} association with orgs  `}
+      <Trans>{`deleting ${currentTab} association with orgs  `}</Trans>
       <Link to={{ pathname: `${match.url}`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-        {`confirm removal of ${currentTab}/cancel and go back to ${currentTab} view.`}
+        <Trans>{`confirm removal of ${currentTab}/cancel and go back to ${currentTab} view.`}</Trans>
       </Link>
     </Fragment>
   );
 
   const addResourceView = () => (
     <Fragment>
-      {`adding ${currentTab}   `}
+      <Trans>{`adding ${currentTab}   `}</Trans>
       <Link to={{ pathname: `${match.url}`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-        {`save/cancel and go back to ${currentTab} view`}
+        <Trans>{`save/cancel and go back to ${currentTab} view`}</Trans>
       </Link>
     </Fragment>
   );
 
   const resourceView = () => (
     <Fragment>
-      {`${currentTab} detail view  `}
+      <Trans>{`${currentTab} detail view  `}</Trans>
       <Link to={{ pathname: `${match.url}/add-resource`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-        {`add ${currentTab}`}
+        <Trans>{`add ${currentTab}`}</Trans>
       </Link>
       {'  '}
       <Link to={{ pathname: `${match.url}/delete-resources`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-        {`delete ${currentTab}`}
+        <Trans>{`delete ${currentTab}`}</Trans>
       </Link>
     </Fragment>
   );
 
   const detailTabs = (tabs) => (
-    <ToolbarSection aria-label="Organization detail tabs">
-      <ToolbarGroup className="at-c-tabs">
-        {tabs.map(tab => (
-          <DetailTab
-            key={tab}
-            tab={tab}
-            location={location}
-            match={match}
-            currentTab={currentTab}
-            breadcrumb={parentBreadcrumbObj}
-          >
-            {getTabName(tab)}
-          </DetailTab>
-        ))}
-      </ToolbarGroup>
-    </ToolbarSection>
+    <I18n>
+      {({ i18n }) => (
+        <ToolbarSection aria-label={i18n._(t`Organization detail tabs`)}>
+          <ToolbarGroup className="at-c-tabs">
+            {tabs.map(tab => (
+              <DetailTab
+                key={tab}
+                tab={tab}
+                location={location}
+                match={match}
+                currentTab={currentTab}
+                breadcrumb={parentBreadcrumbObj}
+              >
+                {getTabName(tab)}
+              </DetailTab>
+            ))}
+          </ToolbarGroup>
+        </ToolbarSection>
+      )}
+    </I18n>
   );
 
   return (

src/pages/Organizations/components/OrganizationEdit.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Trans } from '@lingui/macro';
 import {
   Card,
   CardBody,
@@ -16,9 +17,9 @@ const OrganizationEdit = ({ match, parentBreadcrumbObj, organization }) => {
     <PageSection variant={medium}>
       <Card className="at-c-orgPane">
         <CardBody>
-          {'edit view   '}
+          <Trans>edit view   </Trans>
           <Link to={{ pathname: `/organizations/${match.params.id}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-            {'save/cancel and go back to view'}
+            <Trans>save/cancel and go back to view</Trans>
           </Link>
         </CardBody>
       </Card>

src/pages/Organizations/components/OrganizationListItem.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { I18n } from '@lingui/react';
+import { Trans, t } from '@lingui/macro';
 import {
   Badge,
   Checkbox,
@@ -20,12 +22,16 @@ export default ({
 }) => (
   <li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1">
     <div className="pf-c-data-list__check">
-      <Checkbox
-        checked={isSelected}
-        onChange={onSelect}
-        aria-label={`select organization ${itemId}`}
-        id={`select-organization-${itemId}`}
-      />
+      <I18n>
+        {({ i18n }) => (
+          <Checkbox
+            checked={isSelected}
+            onChange={onSelect}
+            aria-label={i18n._(t`select organization ${itemId}`)}
+            id={`select-organization-${itemId}`}
+          />
+        )}
+      </I18n>
     </div>
     <div className="pf-c-data-list__cell">
       <span id="check-action-item1">
@@ -41,7 +47,7 @@ export default ({
     </div>
     <div className="pf-c-data-list__cell">
       <Link to={`${detailUrl}?tab=users`}>
-        Users
+        <Trans>Users</Trans>
       </Link>
       <Badge isRead>
         {' '}
@@ -49,7 +55,7 @@ export default ({
         {' '}
       </Badge>
       <Link to={`${detailUrl}?tab=teams`}>
-        Teams
+        <Trans>Teams</Trans>
       </Link>
       <Badge isRead>
         {' '}
@@ -57,7 +63,7 @@ export default ({
         {' '}
       </Badge>
       <Link to={`${detailUrl}?tab=admins`}>
-        Admins
+        <Trans>Admins</Trans>
       </Link>
       <Badge isRead>
         {' '}

src/pages/Organizations/views/Organization.add.jsx

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -68,7 +69,9 @@ class OrganizationAdd extends React.Component {
     return (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">Organization Add</Title>
+          <Title size="2xl">
+            <Trans>Organization Add</Trans>
+          </Title>
         </PageSection>
         <PageSection>
           <Card>

src/pages/Organizations/views/Organization.view.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { i18nMark } from '@lingui/react';
 import {
   Switch,
   Route
@@ -58,7 +59,7 @@ class OrganizationView extends Component {
         }
         const { name } = data;
         if (parentBreadcrumbObj === 'loading') {
-          this.setState({ parentBreadcrumbObj: [{ name: 'Organizations', url: '/organizations' }, { name, url: match.url }] });
+          this.setState({ parentBreadcrumbObj: [{ name: i18nMark('Organizations'), url: '/organizations' }, { name, url: match.url }] });
         }
       } catch (err) {
         this.setState({ error: true });

src/pages/Organizations/views/Organizations.list.jsx

@@ -5,6 +5,8 @@ import React, {
 import {
   withRouter
 } from 'react-router-dom';
+import { I18n, i18nMark } from '@lingui/react';
+import { Trans, t } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -25,9 +27,9 @@ import {
 
 class Organizations extends Component {
   columns = [
-    { name: 'Name', key: 'name', isSortable: true },
-    { name: 'Modified', key: 'modified', isSortable: true, isNumeric: true },
-    { name: 'Created', key: 'created', isSortable: true, isNumeric: true },
+    { 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 },
   ];
 
   defaultParams = {
@@ -184,12 +186,14 @@ class Organizations extends Component {
       selected,
     } = this.state;
     const { match } = this.props;
-    const parentBreadcrumb = { name: 'Organizations', url: match.url };
+    const parentBreadcrumb = { name: i18nMark('Organizations'), url: match.url };
 
     return (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">Organizations</Title>
+          <Title size="2xl">
+            <Trans>Organizations</Trans>
+          </Title>
         </PageSection>
         <PageSection variant={medium}>
           <DataListToolbar
@@ -202,22 +206,26 @@ class Organizations extends Component {
             onSort={this.onSort}
             onSelectAll={this.onSelectAll}
           />
-          <ul className="pf-c-data-list" aria-label="Organizations List">
-            { results.map(o => (
-              <OrganizationListItem
-                key={o.id}
-                itemId={o.id}
-                name={o.name}
-                detailUrl={`${match.url}/${o.id}`}
-                parentBreadcrumb={parentBreadcrumb}
-                userCount={o.summary_fields.related_field_counts.users}
-                teamCount={o.summary_fields.related_field_counts.teams}
-                adminCount={o.summary_fields.related_field_counts.admins}
-                isSelected={selected.includes(o.id)}
-                onSelect={() => this.onSelect(o.id)}
-              />
-            ))}
-          </ul>
+          <I18n>
+            {({ i18n }) => (
+              <ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}>
+                { results.map(o => (
+                  <OrganizationListItem
+                    key={o.id}
+                    itemId={o.id}
+                    name={o.name}
+                    detailUrl={`${match.url}/${o.id}`}
+                    parentBreadcrumb={parentBreadcrumb}
+                    userCount={o.summary_fields.related_field_counts.users}
+                    teamCount={o.summary_fields.related_field_counts.teams}
+                    adminCount={o.summary_fields.related_field_counts.admins}
+                    isSelected={selected.includes(o.id)}
+                    onSelect={() => this.onSelect(o.id)}
+                  />
+                ))}
+              </ul>
+            )}
+          </I18n>
           <Pagination
             count={count}
             page={page}