mirror of
https://github.com/ansible/awx.git
synced 2026-02-01 09:38:10 -03:30
Add support for i18n using lingui
This commit is contained in:
mabashian
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user