[MM-14058] Add support for i18n (#2190)

* Add language files

* Add react-intl, mmjstool, setup for adding translations

* Translated main module

* Translations for renderer

* A few minor fixes

* More fixes

* Add CI, add missing menu translations, other cleanup

* Added setting to manually select the language of the app

* Force English for E2e

* Unit tests

* Fix mmjstool

* Move set language to before update menu

* PR feedback
This commit is contained in:
Devin Binnie
2022-07-14 11:04:18 -04:00
committed by GitHub
parent 22c97591d5
commit 59e4e7e516
92 changed files with 3554 additions and 2375 deletions

View File

@@ -3,20 +3,24 @@
import React from 'react';
import {Modal, Button} from 'react-bootstrap';
import {FormattedMessage, injectIntl, IntlShape} from 'react-intl';
import {PermissionType} from 'types/trustedOrigin';
import {ModalMessage} from 'types/modals';
import urlUtil from 'common/utils/url';
import {t} from 'common/utils/util';
import {MODAL_INFO} from 'common/communication';
import {PERMISSION_DESCRIPTION} from 'common/permissions';
import IntlProvider from 'renderer/intl_provider';
type Props = {
handleDeny: React.MouseEventHandler<HTMLButtonElement>;
handleGrant: React.MouseEventHandler<HTMLButtonElement>;
getPermissionInfo: () => void;
openExternalLink: (protocol: string, url: string) => void;
intl: IntlShape;
};
type State = {
@@ -24,7 +28,7 @@ type State = {
permission?: PermissionType;
}
export default class PermissionModal extends React.PureComponent<Props, State> {
class PermissionModal extends React.PureComponent<Props, State> {
constructor(props: Props) {
super(props);
this.state = {};
@@ -53,12 +57,13 @@ export default class PermissionModal extends React.PureComponent<Props, State> {
}
getModalTitle() {
return `${PERMISSION_DESCRIPTION[this.state.permission!]} Required`;
const permission = this.props.intl.formatMessage({id: `common.permissions.${PERMISSION_DESCRIPTION[this.state.permission!]}`});
return this.props.intl.formatMessage({id: 'renderer.modals.permission.permissionModal.title', defaultMessage: '{permission} Required'}, {permission});
}
getModalBody() {
const {url, permission} = this.state;
const originDisplay = url ? urlUtil.getHost(url) : 'unknown origin';
const originDisplay = url ? urlUtil.getHost(url) : this.props.intl.formatMessage({id: 'renderer.modals.permission.permissionModal.unknownOrigin', defaultMessage: 'unknown origin'});
const originLink = url ? originDisplay : '';
const click = (e: React.MouseEvent<HTMLAnchorElement>) => {
@@ -75,10 +80,20 @@ export default class PermissionModal extends React.PureComponent<Props, State> {
return (
<div>
<p>
{`A site that's not included in your Mattermost server configuration requires access for ${PERMISSION_DESCRIPTION[permission!]}.`}
<FormattedMessage
id='renderer.modals.permission.permissionModal.body'
defaultMessage={'A site that\'s not included in your Mattermost server configuration requires access for {permission}.'}
values={{
permission: this.props.intl.formatMessage({id: `common.permissions.${PERMISSION_DESCRIPTION[permission!]}`}),
}}
/>
{}
</p>
<p>
<span>{'This request originated from '}</span>
<FormattedMessage
id='renderer.modals.permission.permissionModal.requestOriginatedFrom'
defaultMessage='This request originated from '
/>
<a onClick={click}>{originDisplay}</a>
</p>
</div>
@@ -87,32 +102,46 @@ export default class PermissionModal extends React.PureComponent<Props, State> {
render() {
return (
<Modal
bsClass='modal'
className='permission-modal'
show={Boolean(this.state.url && this.state.permission)}
id='requestPermissionModal'
enforceFocus={true}
onHide={() => {}}
>
<Modal.Header>
<Modal.Title>{this.getModalTitle()}</Modal.Title>
</Modal.Header>
<Modal.Body>
{this.getModalBody()}
</Modal.Body>
<Modal.Footer className={'remove-border'}>
<div>
<Button
onClick={this.props.handleDeny}
>{'Cancel'}</Button>
<Button
variant='primary'
onClick={this.props.handleGrant}
>{'Accept'}</Button>
</div>
</Modal.Footer>
</Modal>
<IntlProvider>
<Modal
bsClass='modal'
className='permission-modal'
show={Boolean(this.state.url && this.state.permission)}
id='requestPermissionModal'
enforceFocus={true}
onHide={() => {}}
>
<Modal.Header>
<Modal.Title>{this.getModalTitle()}</Modal.Title>
</Modal.Header>
<Modal.Body>
{this.getModalBody()}
</Modal.Body>
<Modal.Footer className={'remove-border'}>
<div>
<Button onClick={this.props.handleDeny}>
<FormattedMessage
id='label.cancel'
defaultMessage='Cancel'
/>
</Button>
<Button
variant='primary'
onClick={this.props.handleGrant}
>
<FormattedMessage
id='label.accept'
defaultMessage='Accept'
/>
</Button>
</div>
</Modal.Footer>
</Modal>
</IntlProvider>
);
}
}
t('common.permissions.canBasicAuth');
export default injectIntl(PermissionModal);