[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:
@@ -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);
|
||||
|
Reference in New Issue
Block a user