Add support for i18n using lingui

src/App.jsx

@@ -1,4 +1,6 @@
 import React, { Fragment } from 'react';
+import { I18nProvider, I18n } from '@lingui/react';
+import { t } from '@lingui/macro';
 import {
   Redirect,
   Switch,
@@ -53,6 +55,18 @@ import Teams from './pages/Teams';
 import Templates from './pages/Templates';
 import Users from './pages/Users';
 
+import ja from './locales/ja/messages';
+import en from './locales/en/messages';
+
+const catalogs = { en, ja };
+
+// This spits out the language and the region.  Example: es-US
+const language = (navigator.languages && navigator.languages[0])
+|| navigator.language
+|| navigator.userLanguage;
+
+const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
+
 const SideNavItems = ({ items, history }) => {
   const currentPath = history.location.pathname.split('/')[1];
   let activeGroup;
@@ -130,195 +144,201 @@ class App extends React.Component {
     );
 
     return (
-      <Fragment>
-        <BackgroundImage
-          src={{
-            [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
-            [BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
-            [BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
-            [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
-            [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
-            [BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
-            [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
-            [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
-            [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg'
-          }}
-        />
-        <Switch>
-          <ConditionalRedirect shouldRedirect={() => api.isAuthenticated()} redirectPath="/" path="/login" component={() => <Login logo={logo} loginInfo={loginInfo} />} />
-          <Fragment>
-            <Page
-              header={(
-                <PageHeader
-                  logo={<TowerLogo onClick={this.onLogoClick} />}
-                  toolbar={PageToolbar}
-                  showNavToggle
-                  onNavToggle={this.onNavToggle}
-                />
-              )}
-              sidebar={(
-                <PageSidebar
-                  isNavOpen={isNavOpen}
-                  nav={(
-                    <Nav aria-label="Primary Navigation">
-                      <NavList>
-                        <SideNavItems
-                          history={history}
-                          items={[
-                            {
-                              groupName: 'views',
-                              title: 'Views',
-                              routes: [
-                                {
-                                  path: 'home',
-                                  title: 'Dashboard'
-                                },
-                                {
-                                  path: 'jobs',
-                                  title: 'Jobs'
-                                },
-                                {
-                                  path: 'schedules',
-                                  title: 'Schedules'
-                                },
-                                {
-                                  path: 'portal',
-                                  title: 'Portal Mode'
-                                },
-                              ]
-                            },
-                            {
-                              groupName: 'resources',
-                              title: 'Resources',
-                              routes: [
-                                {
-                                  path: 'templates',
-                                  title: 'Templates'
-                                },
-                                {
-                                  path: 'credentials',
-                                  title: 'Credentials'
-                                },
-                                {
-                                  path: 'projects',
-                                  title: 'Projects'
-                                },
-                                {
-                                  path: 'inventories',
-                                  title: 'Inventories'
-                                },
-                                {
-                                  path: 'inventory_scripts',
-                                  title: 'Inventory Scripts'
-                                }
-                              ]
-                            },
-                            {
-                              groupName: 'access',
-                              title: 'Access',
-                              routes: [
-                                {
-                                  path: 'organizations',
-                                  title: 'Organizations'
-                                },
-                                {
-                                  path: 'users',
-                                  title: 'Users'
-                                },
-                                {
-                                  path: 'teams',
-                                  title: 'Teams'
-                                }
-                              ]
-                            },
-                            {
-                              groupName: 'administration',
-                              title: 'Administration',
-                              routes: [
-                                {
-                                  path: 'credential_types',
-                                  title: 'Credential Types',
-                                },
-                                {
-                                  path: 'notification_templates',
-                                  title: 'Notifications'
-                                },
-                                {
-                                  path: 'management_jobs',
-                                  title: 'Management Jobs'
-                                },
-                                {
-                                  path: 'instance_groups',
-                                  title: 'Instance Groups'
-                                },
-                                {
-                                  path: 'applications',
-                                  title: 'Integrations'
-                                }
-                              ]
-                            },
-                            {
-                              groupName: 'settings',
-                              title: 'Settings',
-                              routes: [
-                                {
-                                  path: 'auth_settings',
-                                  title: 'Authentication',
-                                },
-                                {
-                                  path: 'jobs_settings',
-                                  title: 'Jobs'
-                                },
-                                {
-                                  path: 'system_settings',
-                                  title: 'System'
-                                },
-                                {
-                                  path: 'ui_settings',
-                                  title: 'User Interface'
-                                },
-                                {
-                                  path: 'license',
-                                  title: 'License'
-                                }
-                              ]
-                            }
-                          ]}
-                        />
-                      </NavList>
-                    </Nav>
-                  )}
-                />
-              )}
-              useCondensed
-            >
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => (<Redirect to="/home" />)} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs" component={Jobs} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/schedules" component={Schedules} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/portal" component={Portal} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/templates" component={Templates} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credentials" component={Credentials} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/projects" component={Projects} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventories" component={Inventories} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventory_scripts" component={InventoryScripts} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/organizations" component={Organizations} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/users" component={Users} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/teams" component={Teams} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credential_types" component={CredentialTypes} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/notification_templates" component={NotificationTemplates} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/management_jobs" component={ManagementJobs} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/instance_groups" component={InstanceGroups} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/applications" component={Applications} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/auth_settings" component={AuthSettings} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs_settings" component={JobsSettings} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/ui_settings" component={UISettings} />
-              <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/license" component={License} />
-            </Page>
-          </Fragment>
-        </Switch>
-      </Fragment>
+      <I18nProvider language={languageWithoutRegionCode} catalogs={catalogs}>
+        <Fragment>
+          <BackgroundImage
+            src={{
+              [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
+              [BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
+              [BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
+              [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
+              [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
+              [BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
+              [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
+              [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
+              [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg'
+            }}
+          />
+          <Switch>
+            <ConditionalRedirect shouldRedirect={() => api.isAuthenticated()} redirectPath="/" path="/login" component={() => <Login logo={logo} loginInfo={loginInfo} />} />
+            <Fragment>
+              <Page
+                header={(
+                  <PageHeader
+                    logo={<TowerLogo onClick={this.onLogoClick} />}
+                    toolbar={PageToolbar}
+                    showNavToggle
+                    onNavToggle={this.onNavToggle}
+                  />
+                )}
+                sidebar={(
+                  <PageSidebar
+                    isNavOpen={isNavOpen}
+                    nav={(
+                      <I18n>
+                        {({ i18n }) => (
+                          <Nav aria-label={i18n._(t`Primary Navigation`)}>
+                            <NavList>
+                              <SideNavItems
+                                history={history}
+                                items={[
+                                  {
+                                    groupName: 'views',
+                                    title: i18n._('Views'),
+                                    routes: [
+                                      {
+                                        path: 'home',
+                                        title: i18n._('Dashboard')
+                                      },
+                                      {
+                                        path: 'jobs',
+                                        title: i18n._('Jobs')
+                                      },
+                                      {
+                                        path: 'schedules',
+                                        title: i18n._('Schedules')
+                                      },
+                                      {
+                                        path: 'portal',
+                                        title: i18n._('Portal Mode')
+                                      },
+                                    ]
+                                  },
+                                  {
+                                    groupName: 'resources',
+                                    title: i18n._('Resources'),
+                                    routes: [
+                                      {
+                                        path: 'templates',
+                                        title: i18n._('Templates')
+                                      },
+                                      {
+                                        path: 'credentials',
+                                        title: i18n._('Credentials')
+                                      },
+                                      {
+                                        path: 'projects',
+                                        title: i18n._('Projects')
+                                      },
+                                      {
+                                        path: 'inventories',
+                                        title: i18n._('Inventories')
+                                      },
+                                      {
+                                        path: 'inventory_scripts',
+                                        title: i18n._('Inventory Scripts')
+                                      }
+                                    ]
+                                  },
+                                  {
+                                    groupName: 'access',
+                                    title: i18n._('Access'),
+                                    routes: [
+                                      {
+                                        path: 'organizations',
+                                        title: i18n._('Organizations')
+                                      },
+                                      {
+                                        path: 'users',
+                                        title: i18n._('Users')
+                                      },
+                                      {
+                                        path: 'teams',
+                                        title: i18n._('Teams')
+                                      }
+                                    ]
+                                  },
+                                  {
+                                    groupName: 'administration',
+                                    title: i18n._('Administration'),
+                                    routes: [
+                                      {
+                                        path: 'credential_types',
+                                        title: i18n._('Credential Types'),
+                                      },
+                                      {
+                                        path: 'notification_templates',
+                                        title: i18n._('Notifications')
+                                      },
+                                      {
+                                        path: 'management_jobs',
+                                        title: i18n._('Management Jobs')
+                                      },
+                                      {
+                                        path: 'instance_groups',
+                                        title: i18n._('Instance Groups')
+                                      },
+                                      {
+                                        path: 'applications',
+                                        title: i18n._('Integrations')
+                                      }
+                                    ]
+                                  },
+                                  {
+                                    groupName: 'settings',
+                                    title: i18n._('Settings'),
+                                    routes: [
+                                      {
+                                        path: 'auth_settings',
+                                        title: i18n._('Authentication'),
+                                      },
+                                      {
+                                        path: 'jobs_settings',
+                                        title: i18n._('Jobs')
+                                      },
+                                      {
+                                        path: 'system_settings',
+                                        title: i18n._('System')
+                                      },
+                                      {
+                                        path: 'ui_settings',
+                                        title: i18n._('User Interface')
+                                      },
+                                      {
+                                        path: 'license',
+                                        title: i18n._('License')
+                                      }
+                                    ]
+                                  }
+                                ]}
+                              />
+                            </NavList>
+                          </Nav>
+                        )}
+                      </I18n>
+                    )}
+                  />
+                )}
+                useCondensed
+              >
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => (<Redirect to="/home" />)} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs" component={Jobs} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/schedules" component={Schedules} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/portal" component={Portal} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/templates" component={Templates} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credentials" component={Credentials} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/projects" component={Projects} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventories" component={Inventories} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventory_scripts" component={InventoryScripts} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/organizations" component={Organizations} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/users" component={Users} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/teams" component={Teams} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credential_types" component={CredentialTypes} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/notification_templates" component={NotificationTemplates} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/management_jobs" component={ManagementJobs} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/instance_groups" component={InstanceGroups} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/applications" component={Applications} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/auth_settings" component={AuthSettings} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs_settings" component={JobsSettings} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/ui_settings" component={UISettings} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/license" component={License} />
+              </Page>
+            </Fragment>
+          </Switch>
+        </Fragment>
+      </I18nProvider>
     );
   }
 }

src/components/About.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { I18n } from '@lingui/react';
+import { Trans, t } from '@lingui/macro';
 import {
   AboutModal,
   TextContent,
@@ -67,37 +69,43 @@ class About extends React.Component {
     const { ansible_version = 'loading', version = 'loading' } = config;
 
     return (
-      <AboutModal
-        isOpen={isOpen}
-        onClose={this.handleModalToggle}
-        productName="Ansible Tower"
-        trademark="Copyright 2018 Red Hat, Inc."
-        brandImageSrc={brandImg}
-        brandImageAlt="Brand Image"
-        logoImageSrc={logoImg}
-        logoImageAlt="AboutModal Logo"
-        heroImageSrc={heroImg}
-      >
-        <pre>
-          { this.createSpeechBubble(version) }
-          {`
-          \\
-           \\  ^__^
-              (oo)\\_______
-              (__)      A )\\
-                  ||----w |
-                  ||     ||
-                    `}
-        </pre>
+      <I18n>
+        {({ i18n }) => (
+          <AboutModal
+            isOpen={isOpen}
+            onClose={this.handleModalToggle}
+            productName="Ansible Tower"
+            trademark={i18n._(t`Copyright 2018 Red Hat, Inc.`)}
+            brandImageSrc={brandImg}
+            brandImageAlt={i18n._(t`Brand Image`)}
+            logoImageSrc={logoImg}
+            logoImageAlt={i18n._(t`AboutModal Logo`)}
+            heroImageSrc={heroImg}
+          >
+            <pre>
+              { this.createSpeechBubble(version) }
+              {`
+              \\
+              \\  ^__^
+                  (oo)\\_______
+                  (__)      A )\\
+                      ||----w |
+                      ||     ||
+                        `}
+            </pre>
 
-        <TextContent>
-          <TextList component="dl">
-            <TextListItem component="dt">Ansible Version</TextListItem>
-            <TextListItem component="dd">{ ansible_version }</TextListItem>
-          </TextList>
-        </TextContent>
-        { error ? <div>error</div> : ''}
-      </AboutModal>
+            <TextContent>
+              <TextList component="dl">
+                <TextListItem component="dt">
+                  <Trans>Ansible Version</Trans>
+                </TextListItem>
+                <TextListItem component="dd">{ ansible_version }</TextListItem>
+              </TextList>
+            </TextContent>
+            { error ? <div>error</div> : ''}
+          </AboutModal>
+        )}
+      </I18n>
     );
   }
 }

src/components/DataListToolbar/DataListToolbar.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { I18n } from '@lingui/react';
+import { Trans, t } from '@lingui/macro';
 import {
   Button,
   Checkbox,
@@ -112,122 +114,126 @@ class DataListToolbar extends React.Component {
     };
 
     return (
-      <div className="awx-toolbar">
-        <Level>
-          <LevelItem>
-            <Toolbar style={{ marginLeft: '20px' }}>
-              <ToolbarGroup>
-                <ToolbarItem>
-                  <Checkbox
-                    checked={isAllSelected}
-                    onChange={onSelectAll}
-                    aria-label="Select all"
-                    id="select-all"
-                  />
-                </ToolbarItem>
-              </ToolbarGroup>
-              <ToolbarGroup>
-                <ToolbarItem>
-                  <div className="pf-c-input-group">
-                    <Dropdown
-                      onToggle={this.onSearchDropdownToggle}
-                      onSelect={this.onSearchDropdownSelect}
-                      direction={up}
-                      isOpen={isSearchDropdownOpen}
-                      toggle={(
-                        <DropdownToggle
+      <I18n>
+        {({ i18n }) => (
+          <div className="awx-toolbar">
+            <Level>
+              <LevelItem>
+                <Toolbar style={{ marginLeft: '20px' }}>
+                  <ToolbarGroup>
+                    <ToolbarItem>
+                      <Checkbox
+                        checked={isAllSelected}
+                        onChange={onSelectAll}
+                        aria-label={i18n._(t`Select all`)}
+                        id="select-all"
+                      />
+                    </ToolbarItem>
+                  </ToolbarGroup>
+                  <ToolbarGroup>
+                    <ToolbarItem>
+                      <div className="pf-c-input-group">
+                        <Dropdown
                           onToggle={this.onSearchDropdownToggle}
+                          onSelect={this.onSearchDropdownSelect}
+                          direction={up}
+                          isOpen={isSearchDropdownOpen}
+                          toggle={(
+                            <DropdownToggle
+                              onToggle={this.onSearchDropdownToggle}
+                            >
+                              { searchColumnName }
+                            </DropdownToggle>
+                          )}
                         >
-                          { searchColumnName }
-                        </DropdownToggle>
-                      )}
-                    >
-                      {columns.filter(({ key }) => key !== searchKey).map(({ key, name }) => (
-                        <DropdownItem key={key} component="button">
-                          { name }
-                        </DropdownItem>
-                      ))}
-                    </Dropdown>
-                    <TextInput
-                      type="search"
-                      aria-label="search text input"
-                      value={searchValue}
-                      onChange={this.handleSearchInputChange}
-                    />
-                    <Button
-                      variant="tertiary"
-                      aria-label="Search"
-                      onClick={() => onSearch(searchValue)}
-                    >
-                      <i className="fas fa-search" aria-hidden="true" />
-                    </Button>
-                  </div>
-                </ToolbarItem>
-              </ToolbarGroup>
-              <ToolbarGroup>
-                <ToolbarItem>
-                  <Dropdown
-                    onToggle={this.onSortDropdownToggle}
-                    onSelect={this.onSortDropdownSelect}
-                    direction={up}
-                    isOpen={isSortDropdownOpen}
-                    toggle={(
-                      <DropdownToggle
+                          {columns.filter(({ key }) => key !== searchKey).map(({ key, name }) => (
+                            <DropdownItem key={key} component="button">
+                              { name }
+                            </DropdownItem>
+                          ))}
+                        </Dropdown>
+                        <TextInput
+                          type="search"
+                          aria-label={i18n._(t`Search text input`)}
+                          value={searchValue}
+                          onChange={this.handleSearchInputChange}
+                        />
+                        <Button
+                          variant="tertiary"
+                          aria-label={i18n._(t`Search`)}
+                          onClick={() => onSearch(searchValue)}
+                        >
+                          <i className="fas fa-search" aria-hidden="true" />
+                        </Button>
+                      </div>
+                    </ToolbarItem>
+                  </ToolbarGroup>
+                  <ToolbarGroup>
+                    <ToolbarItem>
+                      <Dropdown
                         onToggle={this.onSortDropdownToggle}
+                        onSelect={this.onSortDropdownSelect}
+                        direction={up}
+                        isOpen={isSortDropdownOpen}
+                        toggle={(
+                          <DropdownToggle
+                            onToggle={this.onSortDropdownToggle}
+                          >
+                            { sortedColumnName }
+                          </DropdownToggle>
+                        )}
                       >
-                        { sortedColumnName }
-                      </DropdownToggle>
-                    )}
-                  >
-                    {columns
-                      .filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
-                      .map(({ key, name }) => (
-                        <DropdownItem key={key} component="button">
-                          { name }
-                        </DropdownItem>
-                      ))}
-                  </Dropdown>
-                </ToolbarItem>
-                <ToolbarItem>
-                  <Button
-                    onClick={() => onSort(sortedColumnKey, sortOrder === 'ascending' ? 'descending' : 'ascending')}
-                    variant="plain"
-                    aria-label="Sort"
-                  >
-                    {displayedSortIcon()}
+                        {columns
+                          .filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
+                          .map(({ key, name }) => (
+                            <DropdownItem key={key} component="button">
+                              { name }
+                            </DropdownItem>
+                          ))}
+                      </Dropdown>
+                    </ToolbarItem>
+                    <ToolbarItem>
+                      <Button
+                        onClick={() => onSort(sortedColumnKey, sortOrder === 'ascending' ? 'descending' : 'ascending')}
+                        variant="plain"
+                        aria-label={i18n._(t`Sort`)}
+                      >
+                        {displayedSortIcon()}
+                      </Button>
+                    </ToolbarItem>
+                  </ToolbarGroup>
+                  <ToolbarGroup>
+                    <ToolbarItem>
+                      <Button variant="plain" aria-label={i18n._(t`Expand`)}>
+                        <BarsIcon />
+                      </Button>
+                    </ToolbarItem>
+                    <ToolbarItem>
+                      <Button variant="plain" aria-label={i18n._(t`Collapse`)}>
+                        <EqualsIcon />
+                      </Button>
+                    </ToolbarItem>
+                  </ToolbarGroup>
+                </Toolbar>
+              </LevelItem>
+              <LevelItem>
+                <Tooltip message={i18n._(t`Delete`)} position="top">
+                  <Button variant="plain" aria-label={i18n._(t`Delete`)}>
+                    <TrashAltIcon />
                   </Button>
-                </ToolbarItem>
-              </ToolbarGroup>
-              <ToolbarGroup>
-                <ToolbarItem>
-                  <Button variant="plain" aria-label="Expand">
-                    <BarsIcon />
-                  </Button>
-                </ToolbarItem>
-                <ToolbarItem>
-                  <Button variant="plain" aria-label="Collapse">
-                    <EqualsIcon />
-                  </Button>
-                </ToolbarItem>
-              </ToolbarGroup>
-            </Toolbar>
-          </LevelItem>
-          <LevelItem>
-            <Tooltip message="Delete" position="top">
-              <Button variant="plain" aria-label="Delete">
-                <TrashAltIcon />
-              </Button>
-            </Tooltip>
-            {addUrl && (
-              <Link to={addUrl}>
-                <Button variant="primary" aria-label="Add">
-                  Add
-                </Button>
-              </Link>
-            )}
-          </LevelItem>
-        </Level>
-      </div>
+                </Tooltip>
+                {addUrl && (
+                  <Link to={addUrl}>
+                    <Button variant="primary" aria-label={i18n._(t`Add`)}>
+                      <Trans>Add</Trans>
+                    </Button>
+                  </Link>
+                )}
+              </LevelItem>
+            </Level>
+          </div>
+        )}
+      </I18n>
     );
   }
 }

src/components/HelpDropdown.jsx

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   Dropdown,
   DropdownItem,
@@ -22,14 +23,14 @@ class HelpDropdown extends Component {
         target="_blank"
         key="help"
       >
-      Help
+        <Trans>Help</Trans>
       </DropdownItem>,
       <DropdownItem
         onClick={() => this.setState({ showAboutModal: true })}
         key="about"
       >
-      About
-      </DropdownItem>,
+        <Trans>About</Trans>
+      </DropdownItem>
     ];
 
     return (

src/components/LogoutButton.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { I18n } from '@lingui/react';
+import { t } from '@lingui/macro';
 
 import {
   Button,
@@ -8,19 +10,23 @@ import {
 import { UserIcon } from '@patternfly/react-icons';
 
 const LogoutButton = ({ onDevLogout }) => (
-  <Button
-    id="button-logout"
-    aria-label="Logout"
-    variant={ButtonVariant.plain}
-    onClick={onDevLogout}
-    onKeyDown={event => {
-      if (event.keyCode === 13) {
-        onDevLogout();
-      }
-    }}
-  >
-    <UserIcon />
-  </Button>
+  <I18n>
+    {({ i18n }) => (
+      <Button
+        id="button-logout"
+        aria-label={i18n._(t`Logout`)}
+        variant={ButtonVariant.plain}
+        onClick={onDevLogout}
+        onKeyDown={event => {
+          if (event.keyCode === 13) {
+            onDevLogout();
+          }
+        }}
+      >
+        <UserIcon />
+      </Button>
+    )}
+  </I18n>
 );
 
 export default LogoutButton;

src/components/Pagination/Pagination.jsx

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import { I18n } from '@lingui/react';
+import { Trans, t } from '@lingui/macro';
 import {
   Button,
   Dropdown,
@@ -126,93 +128,106 @@ class Pagination extends Component {
     };
 
     return (
-      <div className="awx-pagination">
-        <Level>
-          <LevelItem>
-            <Dropdown
-              onToggle={this.onTogglePageSize}
-              onSelect={this.onSelectPageSize}
-              direction={up}
-              isOpen={isOpen}
-              toggle={(
-                <DropdownToggle
-                  onToggle={this.onTogglePageSize}>
-                  { page_size }
-                </DropdownToggle>
-              )}>
-              {opts.map(option => (
-                <DropdownItem key={option} component="button">
-                  { option }
-                </DropdownItem>
-              ))}
-            </Dropdown> Per Page
-          </LevelItem>
-          <LevelItem>
-            <Split gutter="md" className="pf-u-display-flex pf-u-align-items-center">
-              <SplitItem>{itemMin} - {itemMax } of { count }</SplitItem>
-              <SplitItem>
-                <div className="pf-c-input-group">
-                  <Button
-                    variant="tertiary"
-                    aria-label="first"
-                    style={isOnFirst ? disabledStyle : {}}
-                    isDisabled={isOnFirst}
-                    onClick={this.onFirst}>
-                    <i className="fas fa-angle-double-left"></i>
-                  </Button>
-                  <Button
-                    variant="tertiary"
-                    aria-label="previous"
-                    style={isOnFirst ? disabledStyle : {}}
-                    isDisabled={isOnFirst}
-                    onClick={this.onPrevious}>
-                    <i className="fas fa-angle-left"></i>
-                  </Button>
-                </div>
-              </SplitItem>
-              <SplitItem isMain>
-                <form onSubmit={this.onSubmit}>
-                  Page <TextInput
-                    isDisabled={pageCount === 1}
-                    aria-label="Page Number"
-                    style={{
-                      height: '30px',
-                      width: '30px',
-                      textAlign: 'center',
-                      padding: '0',
-                      margin: '0',
-                      ...(pageCount === 1 ? disabledStyle : {})
-                    }}
-                    value={value}
-                    type="text"
-                    onChange={this.onPageChange}
-                  /> of { pageCount }
-                </form>
-              </SplitItem>
-              <SplitItem>
-                <div className="pf-c-input-group">
-                  <Button
-                    variant="tertiary"
-                    aria-label="next"
-                    style={isOnLast ? disabledStyle : {}}
-                    isDisabled={isOnLast}
-                    onClick={this.onNext}>
-                    <i className="fas fa-angle-right"></i>
-                  </Button>
-                  <Button
-                    variant="tertiary"
-                    aria-label="last"
-                    style={isOnLast ? disabledStyle : {}}
-                    isDisabled={isOnLast}
-                    onClick={this.onLast}>
-                    <i className="fas fa-angle-double-right"></i>
-                  </Button>
-                </div>
-              </SplitItem>
-            </Split>
-          </LevelItem>
-        </Level>
-      </div>
+      <I18n>
+        {({ i18n }) => (
+          <div className="awx-pagination">
+            <Level>
+              <LevelItem>
+                <Dropdown
+                  onToggle={this.onTogglePageSize}
+                  onSelect={this.onSelectPageSize}
+                  direction={up}
+                  isOpen={isOpen}
+                  toggle={(
+                    <DropdownToggle
+                      onToggle={this.onTogglePageSize}>
+                      { page_size }
+                    </DropdownToggle>
+                  )}>
+                  {opts.map(option => (
+                    <DropdownItem key={option} component="button">
+                      { option }
+                    </DropdownItem>
+                  ))}
+                </Dropdown>
+                <Trans>Per Page</Trans>
+              </LevelItem>
+              <LevelItem>
+                <Split gutter="md" className="pf-u-display-flex pf-u-align-items-center">
+                  <SplitItem>
+                    <Trans>{ itemMin } - { itemMax } of { count }</Trans>
+                  </SplitItem>
+                  <SplitItem>
+                    <div className="pf-c-input-group">
+                      <Button
+                        variant="tertiary"
+                        aria-label={i18n._(t`First`)}
+                        style={isOnFirst ? disabledStyle : {}}
+                        isDisabled={isOnFirst}
+                        onClick={this.onFirst}
+                      >
+                        <i className="fas fa-angle-double-left" />
+                      </Button>
+                      <Button
+                        variant="tertiary"
+                        aria-label={i18n._(t`Previous`)}
+                        style={isOnFirst ? disabledStyle : {}}
+                        isDisabled={isOnFirst}
+                        onClick={this.onPrevious}
+                      >
+                        <i className="fas fa-angle-left" />
+                      </Button>
+                    </div>
+                  </SplitItem>
+                  <SplitItem isMain>
+                    <form onSubmit={this.onSubmit}>
+                      <Trans>
+                        Page <TextInput
+                          isDisabled={pageCount === 1}
+                          aria-label={i18n._(t`Page Number`)}
+                          style={{
+                            height: '30px',
+                            width: '30px',
+                            textAlign: 'center',
+                            padding: '0',
+                            margin: '0',
+                            ...(pageCount === 1 ? disabledStyle : {})
+                          }}
+                          value={value}
+                          type="text"
+                          onChange={this.onPageChange}
+                        /> of { pageCount }
+                      </Trans>
+                    </form>
+                  </SplitItem>
+                  <SplitItem>
+                    <div className="pf-c-input-group">
+                      <Button
+                        variant="tertiary"
+                        aria-label={i18n._(t`Next`)}
+                        style={isOnLast ? disabledStyle : {}}
+                        isDisabled={isOnLast}
+                        onClick={this.onNext}
+                      >
+                        <i className="fas fa-angle-right" />
+                      </Button>
+                      <Button
+                        variant="tertiary"
+                        aria-label={i18n._(t`Last`)}
+                        style={isOnLast ? disabledStyle : {}}
+                        isDisabled={isOnLast}
+                        onClick={this.onLast}
+                      >
+                        <i className="fas fa-angle-double-right" />
+                      </Button>
+                    </div>
+                  </SplitItem>
+                </Split>
+              </LevelItem>
+            </Level>
+          </div>
+        )}
+      </I18n>
     );
   }
 }

src/components/TowerLogo/TowerLogo.jsx

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
+import { I18n } from '@lingui/react';
+import { t } from '@lingui/macro';
 import { Brand } from '@patternfly/react-core';
 
 import TowerLogoHeader from '../../../images/tower-logo-header.svg';
@@ -39,15 +41,19 @@ class TowerLogo extends Component {
     }
 
     return (
-      <Brand
-        src={src}
-        alt="Tower Brand Image"
-        onMouseOut={this.onHover}
-        onMouseOver={this.onHover}
-        onBlur={this.onHover}
-        onFocus={this.onHover}
-        onClick={this.onClick}
-      />
+      <I18n>
+        {({ i18n }) => (
+          <Brand
+            src={src}
+            alt={i18n._(t`Tower Brand Image`)}
+            onMouseOut={this.onHover}
+            onMouseOver={this.onHover}
+            onBlur={this.onHover}
+            onFocus={this.onHover}
+            onClick={this.onClick}
+          />
+        )}
+      </I18n>
     );
   }
 }

src/locales/_build/src/App.jsx.json

@@ -0,0 +1,222 @@
+{
+  "Primary Navigation": {
+    "origin": [
+      [
+        "src/App.jsx",
+        180
+      ]
+    ]
+  },
+  "Views": {
+    "origin": [
+      [
+        "src/App.jsx",
+        187
+      ]
+    ]
+  },
+  "Dashboard": {
+    "origin": [
+      [
+        "src/App.jsx",
+        191
+      ]
+    ]
+  },
+  "Jobs": {
+    "origin": [
+      [
+        "src/App.jsx",
+        195
+      ],
+      [
+        "src/App.jsx",
+        287
+      ]
+    ]
+  },
+  "Schedules": {
+    "origin": [
+      [
+        "src/App.jsx",
+        199
+      ]
+    ]
+  },
+  "Portal Mode": {
+    "origin": [
+      [
+        "src/App.jsx",
+        203
+      ]
+    ]
+  },
+  "Resources": {
+    "origin": [
+      [
+        "src/App.jsx",
+        209
+      ]
+    ]
+  },
+  "Templates": {
+    "origin": [
+      [
+        "src/App.jsx",
+        213
+      ]
+    ]
+  },
+  "Credentials": {
+    "origin": [
+      [
+        "src/App.jsx",
+        217
+      ]
+    ]
+  },
+  "Projects": {
+    "origin": [
+      [
+        "src/App.jsx",
+        221
+      ]
+    ]
+  },
+  "Inventories": {
+    "origin": [
+      [
+        "src/App.jsx",
+        225
+      ]
+    ]
+  },
+  "Inventory Scripts": {
+    "origin": [
+      [
+        "src/App.jsx",
+        229
+      ]
+    ]
+  },
+  "Access": {
+    "origin": [
+      [
+        "src/App.jsx",
+        235
+      ]
+    ]
+  },
+  "Organizations": {
+    "origin": [
+      [
+        "src/App.jsx",
+        239
+      ]
+    ]
+  },
+  "Users": {
+    "origin": [
+      [
+        "src/App.jsx",
+        243
+      ]
+    ]
+  },
+  "Teams": {
+    "origin": [
+      [
+        "src/App.jsx",
+        247
+      ]
+    ]
+  },
+  "Administration": {
+    "origin": [
+      [
+        "src/App.jsx",
+        253
+      ]
+    ]
+  },
+  "Credential Types": {
+    "origin": [
+      [
+        "src/App.jsx",
+        257
+      ]
+    ]
+  },
+  "Notifications": {
+    "origin": [
+      [
+        "src/App.jsx",
+        261
+      ]
+    ]
+  },
+  "Management Jobs": {
+    "origin": [
+      [
+        "src/App.jsx",
+        265
+      ]
+    ]
+  },
+  "Instance Groups": {
+    "origin": [
+      [
+        "src/App.jsx",
+        269
+      ]
+    ]
+  },
+  "Integrations": {
+    "origin": [
+      [
+        "src/App.jsx",
+        273
+      ]
+    ]
+  },
+  "Settings": {
+    "origin": [
+      [
+        "src/App.jsx",
+        279
+      ]
+    ]
+  },
+  "Authentication": {
+    "origin": [
+      [
+        "src/App.jsx",
+        283
+      ]
+    ]
+  },
+  "System": {
+    "origin": [
+      [
+        "src/App.jsx",
+        291
+      ]
+    ]
+  },
+  "User Interface": {
+    "origin": [
+      [
+        "src/App.jsx",
+        295
+      ]
+    ]
+  },
+  "License": {
+    "origin": [
+      [
+        "src/App.jsx",
+        299
+      ]
+    ]
+  }
+}

src/locales/_build/src/components/About.jsx.json

@@ -0,0 +1,34 @@
+{
+  "Copyright 2018 Red Hat, Inc.": {
+    "origin": [
+      [
+        "src/components/About.jsx",
+        78
+      ]
+    ]
+  },
+  "Brand Image": {
+    "origin": [
+      [
+        "src/components/About.jsx",
+        80
+      ]
+    ]
+  },
+  "AboutModal Logo": {
+    "origin": [
+      [
+        "src/components/About.jsx",
+        82
+      ]
+    ]
+  },
+  "Ansible Version": {
+    "origin": [
+      [
+        "src/components/About.jsx",
+        100
+      ]
+    ]
+  }
+}

src/locales/_build/src/components/DataListToolbar/DataListToolbar.jsx.json

@@ -0,0 +1,74 @@
+{
+  "Select all": {
+    "origin": [
+      [
+        "src/components/DataListToolbar/DataListToolbar.jsx",
+        128
+      ]
+    ]
+  },
+  "Search text input": {
+    "origin": [
+      [
+        "src/components/DataListToolbar/DataListToolbar.jsx",
+        157
+      ]
+    ]
+  },
+  "Search": {
+    "origin": [
+      [
+        "src/components/DataListToolbar/DataListToolbar.jsx",
+        163
+      ]
+    ]
+  },
+  "Sort": {
+    "origin": [
+      [
+        "src/components/DataListToolbar/DataListToolbar.jsx",
+        199
+      ]
+    ]
+  },
+  "Expand": {
+    "origin": [
+      [
+        "src/components/DataListToolbar/DataListToolbar.jsx",
+        207
+      ]
+    ]
+  },
+  "Collapse": {
+    "origin": [
+      [
+        "src/components/DataListToolbar/DataListToolbar.jsx",
+        212
+      ]
+    ]
+  },
+  "Delete": {
+    "origin": [
+      [
+        "src/components/DataListToolbar/DataListToolbar.jsx",
+        220
+      ],
+      [
+        "src/components/DataListToolbar/DataListToolbar.jsx",
+        221
+      ]
+    ]
+  },
+  "Add": {
+    "origin": [
+      [
+        "src/components/DataListToolbar/DataListToolbar.jsx",
+        227
+      ],
+      [
+        "src/components/DataListToolbar/DataListToolbar.jsx",
+        228
+      ]
+    ]
+  }
+}

src/locales/_build/src/components/HelpDropdown.jsx.json

@@ -0,0 +1,18 @@
+{
+  "Help": {
+    "origin": [
+      [
+        "src/components/HelpDropdown.jsx",
+        26
+      ]
+    ]
+  },
+  "About": {
+    "origin": [
+      [
+        "src/components/HelpDropdown.jsx",
+        32
+      ]
+    ]
+  }
+}

src/locales/_build/src/components/LogoutButton.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Logout": {
+    "origin": [
+      [
+        "src/components/LogoutButton.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/components/Pagination/Pagination.jsx.json

@@ -0,0 +1,66 @@
+{
+  "Per Page": {
+    "origin": [
+      [
+        "src/components/Pagination/Pagination.jsx",
+        153
+      ]
+    ]
+  },
+  "{itemMin} - {itemMax} of {count}": {
+    "origin": [
+      [
+        "src/components/Pagination/Pagination.jsx",
+        158
+      ]
+    ]
+  },
+  "First": {
+    "origin": [
+      [
+        "src/components/Pagination/Pagination.jsx",
+        164
+      ]
+    ]
+  },
+  "Previous": {
+    "origin": [
+      [
+        "src/components/Pagination/Pagination.jsx",
+        173
+      ]
+    ]
+  },
+  "Page <0/> of {pageCount}": {
+    "origin": [
+      [
+        "src/components/Pagination/Pagination.jsx",
+        184
+      ]
+    ]
+  },
+  "Page Number": {
+    "origin": [
+      [
+        "src/components/Pagination/Pagination.jsx",
+        187
+      ]
+    ]
+  },
+  "Next": {
+    "origin": [
+      [
+        "src/components/Pagination/Pagination.jsx",
+        207
+      ]
+    ]
+  },
+  "Last": {
+    "origin": [
+      [
+        "src/components/Pagination/Pagination.jsx",
+        216
+      ]
+    ]
+  }
+}

src/locales/_build/src/components/TowerLogo/TowerLogo.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Tower Brand Image": {
+    "origin": [
+      [
+        "src/components/TowerLogo/TowerLogo.jsx",
+        48
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Applications.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Applications": {
+    "origin": [
+      [
+        "src/pages/Applications.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/AuthSettings.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Authentication Settings": {
+    "origin": [
+      [
+        "src/pages/AuthSettings.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/CredentialTypes.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Credential Types": {
+    "origin": [
+      [
+        "src/pages/CredentialTypes.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Credentials.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Credentials": {
+    "origin": [
+      [
+        "src/pages/Credentials.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Dashboard.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Dashboard": {
+    "origin": [
+      [
+        "src/pages/Dashboard.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/InstanceGroups.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Instance Groups": {
+    "origin": [
+      [
+        "src/pages/InstanceGroups.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Inventories.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Inventories": {
+    "origin": [
+      [
+        "src/pages/Inventories.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/InventoryScripts.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Inventory Scripts": {
+    "origin": [
+      [
+        "src/pages/InventoryScripts.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Jobs.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Jobs": {
+    "origin": [
+      [
+        "src/pages/Jobs.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/JobsSettings.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Jobs Settings": {
+    "origin": [
+      [
+        "src/pages/JobsSettings.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/License.jsx.json

@@ -0,0 +1,10 @@
+{
+  "License": {
+    "origin": [
+      [
+        "src/pages/License.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Login.jsx.json

@@ -0,0 +1,34 @@
+{
+  "Welcome to Ansible Tower! Please Sign In.": {
+    "origin": [
+      [
+        "src/pages/Login.jsx",
+        70
+      ]
+    ]
+  },
+  "Username": {
+    "origin": [
+      [
+        "src/pages/Login.jsx",
+        73
+      ]
+    ]
+  },
+  "Password": {
+    "origin": [
+      [
+        "src/pages/Login.jsx",
+        76
+      ]
+    ]
+  },
+  "Invalid username or password. Please try again.": {
+    "origin": [
+      [
+        "src/pages/Login.jsx",
+        80
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/ManagementJobs.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Management Jobs": {
+    "origin": [
+      [
+        "src/pages/ManagementJobs.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/NotificationTemplates.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Notification Templates": {
+    "origin": [
+      [
+        "src/pages/NotificationTemplates.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Organizations/components/OrganizationBreadcrumb.jsx.json

@@ -0,0 +1,18 @@
+{
+  "> edit": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationBreadcrumb.jsx",
+        53
+      ]
+    ]
+  },
+  "> add": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationBreadcrumb.jsx",
+        60
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Organizations/components/OrganizationDetail.jsx.json

@@ -0,0 +1,66 @@
+{
+  "deleting {currentTab} association with orgs": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationDetail.jsx",
+        67
+      ]
+    ]
+  },
+  "confirm removal of {currentTab}/cancel and go back to {currentTab} view.": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationDetail.jsx",
+        69
+      ]
+    ]
+  },
+  "adding {currentTab}": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationDetail.jsx",
+        76
+      ]
+    ]
+  },
+  "save/cancel and go back to {currentTab} view": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationDetail.jsx",
+        78
+      ]
+    ]
+  },
+  "{currentTab} detail view": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationDetail.jsx",
+        85
+      ]
+    ]
+  },
+  "add {currentTab}": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationDetail.jsx",
+        87
+      ]
+    ]
+  },
+  "delete {currentTab}": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationDetail.jsx",
+        91
+      ]
+    ]
+  },
+  "Organization detail tabs": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationDetail.jsx",
+        99
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Organizations/components/OrganizationEdit.jsx.json

@@ -0,0 +1,18 @@
+{
+  "edit view": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationEdit.jsx",
+        20
+      ]
+    ]
+  },
+  "save/cancel and go back to view": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationEdit.jsx",
+        22
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Organizations/components/OrganizationListItem.jsx.json

@@ -0,0 +1,34 @@
+{
+  "select organization {itemId}": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationListItem.jsx",
+        30
+      ]
+    ]
+  },
+  "Users": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationListItem.jsx",
+        50
+      ]
+    ]
+  },
+  "Teams": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationListItem.jsx",
+        58
+      ]
+    ]
+  },
+  "Admins": {
+    "origin": [
+      [
+        "src/pages/Organizations/components/OrganizationListItem.jsx",
+        66
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Organizations/views/Organization.add.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Organization Add": {
+    "origin": [
+      [
+        "src/pages/Organizations/views/Organization.add.jsx",
+        15
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Organizations/views/Organization.view.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Organizations": {
+    "origin": [
+      [
+        "src/pages/Organizations/views/Organization.view.jsx",
+        62
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Organizations/views/Organizations.list.jsx.json

@@ -0,0 +1,46 @@
+{
+  "Name": {
+    "origin": [
+      [
+        "src/pages/Organizations/views/Organizations.list.jsx",
+        30
+      ]
+    ]
+  },
+  "Modified": {
+    "origin": [
+      [
+        "src/pages/Organizations/views/Organizations.list.jsx",
+        31
+      ]
+    ]
+  },
+  "Created": {
+    "origin": [
+      [
+        "src/pages/Organizations/views/Organizations.list.jsx",
+        32
+      ]
+    ]
+  },
+  "Organizations": {
+    "origin": [
+      [
+        "src/pages/Organizations/views/Organizations.list.jsx",
+        189
+      ],
+      [
+        "src/pages/Organizations/views/Organizations.list.jsx",
+        195
+      ]
+    ]
+  },
+  "Organizations List": {
+    "origin": [
+      [
+        "src/pages/Organizations/views/Organizations.list.jsx",
+        211
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Portal.jsx.json

@@ -0,0 +1,10 @@
+{
+  "My View": {
+    "origin": [
+      [
+        "src/pages/Portal.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Projects.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Projects": {
+    "origin": [
+      [
+        "src/pages/Projects.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Schedules.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Schedules": {
+    "origin": [
+      [
+        "src/pages/Schedules.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/SystemSettings.jsx.json

@@ -0,0 +1,10 @@
+{
+  "System Settings": {
+    "origin": [
+      [
+        "src/pages/SystemSettings.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Teams.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Teams": {
+    "origin": [
+      [
+        "src/pages/Teams.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Templates.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Templates": {
+    "origin": [
+      [
+        "src/pages/Templates.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/UISettings.jsx.json

@@ -0,0 +1,10 @@
+{
+  "User Interface Settings": {
+    "origin": [
+      [
+        "src/pages/UISettings.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/_build/src/pages/Users.jsx.json

@@ -0,0 +1,10 @@
+{
+  "Users": {
+    "origin": [
+      [
+        "src/pages/Users.jsx",
+        17
+      ]
+    ]
+  }
+}

src/locales/en/messages.js

@@ -0,0 +1 @@
+/* eslint-disable */module.exports={languageData:{"plurals":function(n,ord){var s=String(n).split("."),v0=!s[1],t0=Number(s[0])==n,n10=t0&&s[0].slice(-1),n100=t0&&s[0].slice(-2);if(ord)return n10==1&&n100!=11?"one":n10==2&&n100!=12?"two":n10==3&&n100!=13?"few":"other";return n==1&&v0?"one":"other"}},messages:{"> add":"> add","> edit":"> edit","About":"About","AboutModal Logo":"AboutModal Logo","Access":"Access","Add":"Add","Administration":"Administration","Admins":"Admins","Ansible Version":"Ansible Version","Applications":"Applications","Authentication":"Authentication","Authentication Settings":"Authentication Settings","Brand Image":"Brand Image","Collapse":"Collapse","Copyright 2018 Red Hat, Inc.":"Copyright 2018 Red Hat, Inc.","Created":"Created","Credential Types":"Credential Types","Credentials":"Credentials","Dashboard":"Dashboard","Delete":"Delete","Expand":"Expand","First":"First","Help":"Help","Instance Groups":"Instance Groups","Integrations":"Integrations","Invalid username or password. Please try again.":"Invalid username or password. Please try again.","Inventories":"Inventories","Inventory Scripts":"Inventory Scripts","Jobs":"Jobs","Jobs Settings":"Jobs Settings","Last":"Last","License":"License","Logout":"Logout","Management Jobs":"Management Jobs","Modified":"Modified","My View":"My View","Name":"Name","Next":"Next","Notification Templates":"Notification Templates","Notifications":"Notifications","Organization Add":"Organization Add","Organization detail tabs":"Organization detail tabs","Organizations":"Organizations","Organizations List":"Organizations List","Page <0/> of {pageCount}":function(a){return["Page <0/> of ",a("pageCount")]},"Page Number":"Page Number","Password":"Password","Per Page":"Per Page","Portal Mode":"Portal Mode","Previous":"Previous","Primary Navigation":"Primary Navigation","Projects":"Projects","Resources":"Resources","Schedules":"Schedules","Search":"Search","Search text input":"Search text input","Select all":"Select all","Settings":"Settings","Sort":"Sort","System":"System","System Settings":"System Settings","Teams":"Teams","Templates":"Templates","Tower Brand Image":"Tower Brand Image","User Interface":"User Interface","User Interface Settings":"User Interface Settings","Username":"Username","Users":"Users","Views":"Views","Welcome to Ansible Tower! Please Sign In.":"Welcome to Ansible Tower! Please Sign In.","add {currentTab}":function(a){return["add ",a("currentTab")]},"adding {currentTab}":function(a){return["adding ",a("currentTab")]},"confirm removal of {currentTab}/cancel and go back to {currentTab} view.":function(a){return["confirm removal of ",a("currentTab"),"/cancel and go back to ",a("currentTab")," view."]},"delete {currentTab}":function(a){return["delete ",a("currentTab")]},"deleting {currentTab} association with orgs":function(a){return["deleting ",a("currentTab")," association with orgs"]},"edit view":"edit view","save/cancel and go back to view":"save/cancel and go back to view","save/cancel and go back to {currentTab} view":function(a){return["save/cancel and go back to ",a("currentTab")," view"]},"select organization {itemId}":function(a){return["select organization ",a("itemId")]},"{currentTab} detail view":function(a){return[a("currentTab")," detail view"]},"{itemMin} - {itemMax} of {count}":function(a){return[a("itemMin")," - ",a("itemMax")," of ",a("count")]}}};

src/locales/en/messages.po

@@ -0,0 +1,360 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2018-12-10 10:08-0500\n"
+"Mime-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: en\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: src/pages/Organizations/components/OrganizationBreadcrumb.jsx:60
+msgid "> add"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationBreadcrumb.jsx:53
+msgid "> edit"
+msgstr ""
+
+#: src/components/HelpDropdown.jsx:32
+msgid "About"
+msgstr ""
+
+#: src/components/About.jsx:82
+msgid "AboutModal Logo"
+msgstr ""
+
+#: src/App.jsx:235
+msgid "Access"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:227
+#: src/components/DataListToolbar/DataListToolbar.jsx:228
+msgid "Add"
+msgstr ""
+
+#: src/App.jsx:253
+msgid "Administration"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationListItem.jsx:66
+msgid "Admins"
+msgstr ""
+
+#: src/components/About.jsx:100
+msgid "Ansible Version"
+msgstr ""
+
+#: src/pages/Applications.jsx:17
+msgid "Applications"
+msgstr ""
+
+#: src/App.jsx:283
+msgid "Authentication"
+msgstr ""
+
+#: src/pages/AuthSettings.jsx:17
+msgid "Authentication Settings"
+msgstr ""
+
+#: src/components/About.jsx:80
+msgid "Brand Image"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:212
+msgid "Collapse"
+msgstr ""
+
+#: src/components/About.jsx:78
+msgid "Copyright 2018 Red Hat, Inc."
+msgstr ""
+
+#: src/pages/Organizations/views/Organizations.list.jsx:32
+msgid "Created"
+msgstr ""
+
+#: src/App.jsx:257
+#: src/pages/CredentialTypes.jsx:17
+msgid "Credential Types"
+msgstr ""
+
+#: src/App.jsx:217
+#: src/pages/Credentials.jsx:17
+msgid "Credentials"
+msgstr ""
+
+#: src/App.jsx:191
+#: src/pages/Dashboard.jsx:17
+msgid "Dashboard"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:220
+#: src/components/DataListToolbar/DataListToolbar.jsx:221
+msgid "Delete"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:207
+msgid "Expand"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:164
+msgid "First"
+msgstr ""
+
+#: src/components/HelpDropdown.jsx:26
+msgid "Help"
+msgstr ""
+
+#: src/App.jsx:269
+#: src/pages/InstanceGroups.jsx:17
+msgid "Instance Groups"
+msgstr ""
+
+#: src/App.jsx:273
+msgid "Integrations"
+msgstr ""
+
+#: src/pages/Login.jsx:80
+msgid "Invalid username or password. Please try again."
+msgstr ""
+
+#: src/App.jsx:225
+#: src/pages/Inventories.jsx:17
+msgid "Inventories"
+msgstr ""
+
+#: src/App.jsx:229
+#: src/pages/InventoryScripts.jsx:17
+msgid "Inventory Scripts"
+msgstr ""
+
+#: src/App.jsx:195
+#: src/App.jsx:287
+#: src/pages/Jobs.jsx:17
+msgid "Jobs"
+msgstr ""
+
+#: src/pages/JobsSettings.jsx:17
+msgid "Jobs Settings"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:216
+msgid "Last"
+msgstr ""
+
+#: src/App.jsx:299
+#: src/pages/License.jsx:17
+msgid "License"
+msgstr ""
+
+#: src/components/LogoutButton.jsx:17
+msgid "Logout"
+msgstr ""
+
+#: src/App.jsx:265
+#: src/pages/ManagementJobs.jsx:17
+msgid "Management Jobs"
+msgstr ""
+
+#: src/pages/Organizations/views/Organizations.list.jsx:31
+msgid "Modified"
+msgstr ""
+
+#: src/pages/Portal.jsx:17
+msgid "My View"
+msgstr ""
+
+#: src/pages/Organizations/views/Organizations.list.jsx:30
+msgid "Name"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:207
+msgid "Next"
+msgstr ""
+
+#: src/pages/NotificationTemplates.jsx:17
+msgid "Notification Templates"
+msgstr ""
+
+#: src/App.jsx:261
+msgid "Notifications"
+msgstr ""
+
+#: src/pages/Organizations/views/Organization.add.jsx:15
+msgid "Organization Add"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:99
+msgid "Organization detail tabs"
+msgstr ""
+
+#: src/App.jsx:239
+#: src/pages/Organizations/views/Organization.view.jsx:62
+#: src/pages/Organizations/views/Organizations.list.jsx:189
+#: src/pages/Organizations/views/Organizations.list.jsx:195
+msgid "Organizations"
+msgstr ""
+
+#: src/pages/Organizations/views/Organizations.list.jsx:211
+msgid "Organizations List"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:184
+msgid "Page <0/> of {pageCount}"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:187
+msgid "Page Number"
+msgstr ""
+
+#: src/pages/Login.jsx:76
+msgid "Password"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:153
+msgid "Per Page"
+msgstr ""
+
+#: src/App.jsx:203
+msgid "Portal Mode"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:173
+msgid "Previous"
+msgstr ""
+
+#: src/App.jsx:180
+msgid "Primary Navigation"
+msgstr ""
+
+#: src/App.jsx:221
+#: src/pages/Projects.jsx:17
+msgid "Projects"
+msgstr ""
+
+#: src/App.jsx:209
+msgid "Resources"
+msgstr ""
+
+#: src/App.jsx:199
+#: src/pages/Schedules.jsx:17
+msgid "Schedules"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:163
+msgid "Search"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:157
+msgid "Search text input"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:128
+msgid "Select all"
+msgstr ""
+
+#: src/App.jsx:279
+msgid "Settings"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:199
+msgid "Sort"
+msgstr ""
+
+#: src/App.jsx:291
+msgid "System"
+msgstr ""
+
+#: src/pages/SystemSettings.jsx:17
+msgid "System Settings"
+msgstr ""
+
+#: src/App.jsx:247
+#: src/pages/Organizations/components/OrganizationListItem.jsx:58
+#: src/pages/Teams.jsx:17
+msgid "Teams"
+msgstr ""
+
+#: src/App.jsx:213
+#: src/pages/Templates.jsx:17
+msgid "Templates"
+msgstr ""
+
+#: src/components/TowerLogo/TowerLogo.jsx:48
+msgid "Tower Brand Image"
+msgstr ""
+
+#: src/App.jsx:295
+msgid "User Interface"
+msgstr ""
+
+#: src/pages/UISettings.jsx:17
+msgid "User Interface Settings"
+msgstr ""
+
+#: src/pages/Login.jsx:73
+msgid "Username"
+msgstr ""
+
+#: src/App.jsx:243
+#: src/pages/Organizations/components/OrganizationListItem.jsx:50
+#: src/pages/Users.jsx:17
+msgid "Users"
+msgstr ""
+
+#: src/App.jsx:187
+msgid "Views"
+msgstr ""
+
+#: src/pages/Login.jsx:70
+msgid "Welcome to Ansible Tower! Please Sign In."
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:87
+msgid "add {currentTab}"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:76
+msgid "adding {currentTab}"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:69
+msgid "confirm removal of {currentTab}/cancel and go back to {currentTab} view."
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:91
+msgid "delete {currentTab}"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:67
+msgid "deleting {currentTab} association with orgs"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationEdit.jsx:20
+msgid "edit view"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationEdit.jsx:22
+msgid "save/cancel and go back to view"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:78
+msgid "save/cancel and go back to {currentTab} view"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationListItem.jsx:30
+msgid "select organization {itemId}"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:85
+msgid "{currentTab} detail view"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:158
+msgid "{itemMin} - {itemMax} of {count}"
+msgstr ""

src/locales/ja/messages.js

@@ -0,0 +1 @@
+/* eslint-disable */module.exports={languageData:{"plurals":function(n,ord){if(ord)return"other";return"other"}},messages:{"> add":"> add","> edit":"> edit","About":"About","AboutModal Logo":"AboutModal Logo","Access":"Access","Add":"Add","Administration":"Administration","Admins":"Admins","Ansible Version":"Ansible Version","Applications":"Applications","Authentication":"Authentication","Authentication Settings":"Authentication Settings","Brand Image":"Brand Image","Collapse":"Collapse","Copyright 2018 Red Hat, Inc.":"Copyright 2018 Red Hat, Inc.","Created":"Created","Credential Types":"Credential Types","Credentials":"Credentials","Dashboard":"Dashboard","Delete":"Delete","Expand":"Expand","First":"First","Help":"Help","Instance Groups":"Instance Groups","Integrations":"Integrations","Invalid username or password. Please try again.":"Invalid username or password. Please try again.","Inventories":"Inventories","Inventory Scripts":"Inventory Scripts","Jobs":"Jobs","Jobs Settings":"Jobs Settings","Last":"Last","License":"License","Logout":"Logout","Management Jobs":"Management Jobs","Modified":"Modified","My View":"My View","Name":"Name","Next":"Next","Notification Templates":"Notification Templates","Notifications":"Notifications","Organization Add":"Organization Add","Organization detail tabs":"Organization detail tabs","Organizations":"Organizations","Organizations List":"Organizations List","Page <0/> of {pageCount}":function(a){return["Page <0/> of ",a("pageCount")]},"Page Number":"Page Number","Password":"Password","Per Page":"Per Page","Portal Mode":"Portal Mode","Previous":"Previous","Primary Navigation":"Primary Navigation","Projects":"Projects","Resources":"Resources","Schedules":"Schedules","Search":"Search","Search text input":"Search text input","Select all":"Select all","Settings":"Settings","Sort":"Sort","System":"System","System Settings":"System Settings","Teams":"Teams","Templates":"Templates","Tower Brand Image":"Tower Brand Image","User Interface":"User Interface","User Interface Settings":"User Interface Settings","Username":"Username","Users":"Users","Views":"Views","Welcome to Ansible Tower! Please Sign In.":"Welcome to Ansible Tower! Please Sign In.","add {currentTab}":function(a){return["add ",a("currentTab")]},"adding {currentTab}":function(a){return["adding ",a("currentTab")]},"confirm removal of {currentTab}/cancel and go back to {currentTab} view.":function(a){return["confirm removal of ",a("currentTab"),"/cancel and go back to ",a("currentTab")," view."]},"delete {currentTab}":function(a){return["delete ",a("currentTab")]},"deleting {currentTab} association with orgs":function(a){return["deleting ",a("currentTab")," association with orgs"]},"edit view":"edit view","save/cancel and go back to view":"save/cancel and go back to view","save/cancel and go back to {currentTab} view":function(a){return["save/cancel and go back to ",a("currentTab")," view"]},"select organization {itemId}":function(a){return["select organization ",a("itemId")]},"{currentTab} detail view":function(a){return[a("currentTab")," detail view"]},"{itemMin} - {itemMax} of {count}":function(a){return[a("itemMin")," - ",a("itemMax")," of ",a("count")]}}};

src/locales/ja/messages.po

@@ -0,0 +1,360 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2018-12-10 10:08-0500\n"
+"Mime-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: ja\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: src/pages/Organizations/components/OrganizationBreadcrumb.jsx:60
+msgid "> add"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationBreadcrumb.jsx:53
+msgid "> edit"
+msgstr ""
+
+#: src/components/HelpDropdown.jsx:32
+msgid "About"
+msgstr ""
+
+#: src/components/About.jsx:82
+msgid "AboutModal Logo"
+msgstr ""
+
+#: src/App.jsx:235
+msgid "Access"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:227
+#: src/components/DataListToolbar/DataListToolbar.jsx:228
+msgid "Add"
+msgstr ""
+
+#: src/App.jsx:253
+msgid "Administration"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationListItem.jsx:66
+msgid "Admins"
+msgstr ""
+
+#: src/components/About.jsx:100
+msgid "Ansible Version"
+msgstr ""
+
+#: src/pages/Applications.jsx:17
+msgid "Applications"
+msgstr ""
+
+#: src/App.jsx:283
+msgid "Authentication"
+msgstr ""
+
+#: src/pages/AuthSettings.jsx:17
+msgid "Authentication Settings"
+msgstr ""
+
+#: src/components/About.jsx:80
+msgid "Brand Image"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:212
+msgid "Collapse"
+msgstr ""
+
+#: src/components/About.jsx:78
+msgid "Copyright 2018 Red Hat, Inc."
+msgstr ""
+
+#: src/pages/Organizations/views/Organizations.list.jsx:32
+msgid "Created"
+msgstr ""
+
+#: src/App.jsx:257
+#: src/pages/CredentialTypes.jsx:17
+msgid "Credential Types"
+msgstr ""
+
+#: src/App.jsx:217
+#: src/pages/Credentials.jsx:17
+msgid "Credentials"
+msgstr ""
+
+#: src/App.jsx:191
+#: src/pages/Dashboard.jsx:17
+msgid "Dashboard"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:220
+#: src/components/DataListToolbar/DataListToolbar.jsx:221
+msgid "Delete"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:207
+msgid "Expand"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:164
+msgid "First"
+msgstr ""
+
+#: src/components/HelpDropdown.jsx:26
+msgid "Help"
+msgstr ""
+
+#: src/App.jsx:269
+#: src/pages/InstanceGroups.jsx:17
+msgid "Instance Groups"
+msgstr ""
+
+#: src/App.jsx:273
+msgid "Integrations"
+msgstr ""
+
+#: src/pages/Login.jsx:80
+msgid "Invalid username or password. Please try again."
+msgstr ""
+
+#: src/App.jsx:225
+#: src/pages/Inventories.jsx:17
+msgid "Inventories"
+msgstr ""
+
+#: src/App.jsx:229
+#: src/pages/InventoryScripts.jsx:17
+msgid "Inventory Scripts"
+msgstr ""
+
+#: src/App.jsx:195
+#: src/App.jsx:287
+#: src/pages/Jobs.jsx:17
+msgid "Jobs"
+msgstr ""
+
+#: src/pages/JobsSettings.jsx:17
+msgid "Jobs Settings"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:216
+msgid "Last"
+msgstr ""
+
+#: src/App.jsx:299
+#: src/pages/License.jsx:17
+msgid "License"
+msgstr ""
+
+#: src/components/LogoutButton.jsx:17
+msgid "Logout"
+msgstr ""
+
+#: src/App.jsx:265
+#: src/pages/ManagementJobs.jsx:17
+msgid "Management Jobs"
+msgstr ""
+
+#: src/pages/Organizations/views/Organizations.list.jsx:31
+msgid "Modified"
+msgstr ""
+
+#: src/pages/Portal.jsx:17
+msgid "My View"
+msgstr ""
+
+#: src/pages/Organizations/views/Organizations.list.jsx:30
+msgid "Name"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:207
+msgid "Next"
+msgstr ""
+
+#: src/pages/NotificationTemplates.jsx:17
+msgid "Notification Templates"
+msgstr ""
+
+#: src/App.jsx:261
+msgid "Notifications"
+msgstr ""
+
+#: src/pages/Organizations/views/Organization.add.jsx:15
+msgid "Organization Add"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:99
+msgid "Organization detail tabs"
+msgstr ""
+
+#: src/App.jsx:239
+#: src/pages/Organizations/views/Organization.view.jsx:62
+#: src/pages/Organizations/views/Organizations.list.jsx:189
+#: src/pages/Organizations/views/Organizations.list.jsx:195
+msgid "Organizations"
+msgstr ""
+
+#: src/pages/Organizations/views/Organizations.list.jsx:211
+msgid "Organizations List"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:184
+msgid "Page <0/> of {pageCount}"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:187
+msgid "Page Number"
+msgstr ""
+
+#: src/pages/Login.jsx:76
+msgid "Password"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:153
+msgid "Per Page"
+msgstr ""
+
+#: src/App.jsx:203
+msgid "Portal Mode"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:173
+msgid "Previous"
+msgstr ""
+
+#: src/App.jsx:180
+msgid "Primary Navigation"
+msgstr ""
+
+#: src/App.jsx:221
+#: src/pages/Projects.jsx:17
+msgid "Projects"
+msgstr ""
+
+#: src/App.jsx:209
+msgid "Resources"
+msgstr ""
+
+#: src/App.jsx:199
+#: src/pages/Schedules.jsx:17
+msgid "Schedules"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:163
+msgid "Search"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:157
+msgid "Search text input"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:128
+msgid "Select all"
+msgstr ""
+
+#: src/App.jsx:279
+msgid "Settings"
+msgstr ""
+
+#: src/components/DataListToolbar/DataListToolbar.jsx:199
+msgid "Sort"
+msgstr ""
+
+#: src/App.jsx:291
+msgid "System"
+msgstr ""
+
+#: src/pages/SystemSettings.jsx:17
+msgid "System Settings"
+msgstr ""
+
+#: src/App.jsx:247
+#: src/pages/Organizations/components/OrganizationListItem.jsx:58
+#: src/pages/Teams.jsx:17
+msgid "Teams"
+msgstr ""
+
+#: src/App.jsx:213
+#: src/pages/Templates.jsx:17
+msgid "Templates"
+msgstr ""
+
+#: src/components/TowerLogo/TowerLogo.jsx:48
+msgid "Tower Brand Image"
+msgstr ""
+
+#: src/App.jsx:295
+msgid "User Interface"
+msgstr ""
+
+#: src/pages/UISettings.jsx:17
+msgid "User Interface Settings"
+msgstr ""
+
+#: src/pages/Login.jsx:73
+msgid "Username"
+msgstr ""
+
+#: src/App.jsx:243
+#: src/pages/Organizations/components/OrganizationListItem.jsx:50
+#: src/pages/Users.jsx:17
+msgid "Users"
+msgstr ""
+
+#: src/App.jsx:187
+msgid "Views"
+msgstr ""
+
+#: src/pages/Login.jsx:70
+msgid "Welcome to Ansible Tower! Please Sign In."
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:87
+msgid "add {currentTab}"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:76
+msgid "adding {currentTab}"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:69
+msgid "confirm removal of {currentTab}/cancel and go back to {currentTab} view."
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:91
+msgid "delete {currentTab}"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:67
+msgid "deleting {currentTab} association with orgs"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationEdit.jsx:20
+msgid "edit view"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationEdit.jsx:22
+msgid "save/cancel and go back to view"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:78
+msgid "save/cancel and go back to {currentTab} view"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationListItem.jsx:30
+msgid "select organization {itemId}"
+msgstr ""
+
+#: src/pages/Organizations/components/OrganizationDetail.jsx:85
+msgid "{currentTab} detail view"
+msgstr ""
+
+#: src/components/Pagination/Pagination.jsx:158
+msgid "{itemMin} - {itemMax} of {count}"
+msgstr ""

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,4 +1,5 @@
 import React, { Fragment } from 'react';
+import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
@@ -10,7 +11,9 @@ const { light, medium } = PageSectionVariants;
 const OrganizationView = () => (
   <Fragment>
     <PageSection variant={light} className="pf-m-condensed">
-      <Title size="2xl">Organization Add</Title>
+      <Title size="2xl">
+        <Trans>Organization Add</Trans>
+      </Title>
     </PageSection>
     <PageSection variant={medium}>
       This is the add view

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>
     );