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

src/pages/Applications.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class Applications extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Applications</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Applications</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/AuthSettings.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class AuthSettings extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Authentication Settings</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Authentication Settings</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/CredentialTypes.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class CredentialTypes extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Credential Types</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Credential Types</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Credentials.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class Credentials extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Credentials</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Credentials</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Dashboard.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class Dashboard extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Dashboard</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Dashboard</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/InstanceGroups.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class InstanceGroups extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Instance Groups</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Instance Groups</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Inventories.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class Inventories extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Inventories</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Inventories</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/InventoryScripts.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class InventoryScripts extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Inventory Scripts</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Inventory Scripts</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Jobs.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class Jobs extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Jobz</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Jobs</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/JobsSettings.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class JobsSettings extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Jobs Settings</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Jobs Settings</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/License.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class License extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">License</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>License</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Login.jsx

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import { Redirect } from 'react-router-dom';
+import { I18n } from '@lingui/react';
+import { t } from '@lingui/macro';
 import {
   LoginForm,
   LoginPage,
@@ -54,34 +56,33 @@ class AtLogin extends Component {
     const { username, password, isValidPassword } = this.state;
     const { logo, alt } = this.props;
     const logoSrc = logo ? `data:image/jpeg;${logo}` : towerLogo;
-    const logoAlt = alt || 'Ansible Tower';
-    const LOGIN_ERROR_MESSAGE = 'Invalid username or password. Please try again.';
-    const LOGIN_TITLE = 'Welcome to Ansible Tower! Please Sign In.';
-    const LOGIN_USERNAME = 'Username';
-    const LOGIN_PASSWORD = 'Password';
 
     if (api.isAuthenticated()) {
       return (<Redirect to="/" />);
     }
 
     return (
-      <LoginPage
-        mainBrandImgSrc={logoSrc}
-        mainBrandImgAlt={logoAlt}
-        loginTitle={LOGIN_TITLE}
-      >
-        <LoginForm
-          usernameLabel={LOGIN_USERNAME}
-          usernameValue={username}
-          onChangeUsername={this.handleUsernameChange}
-          passwordLabel={LOGIN_PASSWORD}
-          passwordValue={password}
-          onChangePassword={this.handlePasswordChange}
-          isValidPassword={isValidPassword}
-          passwordHelperTextInvalid={LOGIN_ERROR_MESSAGE}
-          onLoginButtonClick={this.handleSubmit}
-        />
-      </LoginPage>
+      <I18n>
+        {({ i18n }) => (
+          <LoginPage
+            mainBrandImgSrc={logoSrc}
+            mainBrandImgAlt={alt || 'Ansible Tower'}
+            loginTitle={i18n._(t`Welcome to Ansible Tower! Please Sign In.`)}
+          >
+            <LoginForm
+              usernameLabel={i18n._(t`Username`)}
+              usernameValue={username}
+              onChangeUsername={this.handleUsernameChange}
+              passwordLabel={i18n._(t`Password`)}
+              passwordValue={password}
+              onChangePassword={this.handlePasswordChange}
+              isValidPassword={isValidPassword}
+              passwordHelperTextInvalid={i18n._(t`Invalid username or password. Please try again.`)}
+              onLoginButtonClick={this.handleSubmit}
+            />
+          </LoginPage>
+        )}
+      </I18n>
     );
   }
 }

src/pages/ManagementJobs.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class ManagementJobs extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Management Jobs</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Management Jobs</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/NotificationTemplates.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class NotificationTemplates extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Notification Templates</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Notification Templates</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

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}

src/pages/Portal.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class Portal extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">My View</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>My View</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Projects.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class Projects extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Projects</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Projects</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Schedules.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class Schedules extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Schedules</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Schedules</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/SystemSettings.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class SystemSettings extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">System Settings</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>System Settings</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Teams.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class Teams extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Teams</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Teams</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Templates.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class Templates extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Templates</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Templates</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/UISettings.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class UISettings extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">User Interface Settings</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>User Interface Settings</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Users.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -11,7 +12,11 @@ class Users extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Users</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed">
+          <Title size="2xl">
+            <Trans>Users</Trans>
+          </Title>
+        </PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );