Add support for i18n using lingui

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>
         {' '}