Translaton doesn't work

[mdsina]

Plesk version: 17.9.5 plesk-ext-sdk version: 0.2.3 Example:

Create test extension as in documentation. Add localization file: src/plib/resources/locales/en-US.php:

<?php

$messages = [
    'app.okButton' => '1111',
    'app' => [
        'Settings' => [
            'title' => 'Settings',
            'startPort' => 'Start Port',
            'endPort' => 'End Port',
        ],
    ],
];

View:

import {
    createElement,
    Component,
    List,
    Translate,
    PropTypes,
    ToolbarGroup,
    Toolbar,
    Button,
    Form,
    Grid,
    GridCol,
    Input,
    Dialog
} from '@plesk/plesk-ext-sdk';

import axios from 'axios';

export default class Settings extends Component {
    static propTypes = {
        baseUrl: PropTypes.string.isRequired,
    };

    state = {
        data: null,
        showAddPortRange: false
    };

    columns = [{
        key: 'startPort',
        title: (<Translate content="Settings.startPort" />),
    }, {
        key: 'endPort',
        title: (<Translate content="Settings.endPort" />),
    }];

    componentDidMount() {
        const { baseUrl } = this.props;
        axios.get(`${baseUrl}/settings/portRanges`).then(({ data }) => this.setState({ data }));
    }

    handleAddNewPortRange() {

    }

    render() {
        const { data } = this.state;

        if (!data) {
            return null;
        }

        return (
            <div>
                <Dialog
                    title="Add new port range"
                    isOpen={this.state.showAddPortRange}
                    buttons={<Button intent="primary" onClick={this.handleAddNewPortRange}><Translate content="okButton" /></Button>}
                    size="sm">
                    <Grid sm={2} gap="md">
                        <GridCol><Input size="fill" placeholder="Start Port" /></GridCol>
                        <GridCol><Input size="fill" placeholder="End Port" /></GridCol>
                    </Grid>

                </Dialog>
                <Toolbar>
                    <ToolbarGroup title="Port Ranges">
                        <Button onClick={() => this.setState({ showAddPortRange: true })} intent="primary">{'Add Port Range'}</Button>
                    </ToolbarGroup>
                </Toolbar>
                <List
                    columns={this.columns}
                    data={data}
                />
            </div>
        );
    }
}

There are no localization:

[mdsina]

Looks like documentation is outdated. on plesk-ext-sdk 0.4.0 works fine.

Please, fix it: https://github.com/plesk/plesk-ext-sdk/blob/master/docs/01-getting-started.md

[ekaragodin]

Version 0.2.3 is not supported localization. Please pay attention that the master branch contains changes for an upcoming release. Currently, you can use tags for referencing documentation for your version. For example documentation for version 0.4 https://github.com/plesk/plesk-ext-sdk/tree/v0.4.0/docs. Thanks for the feedback, we will improve the documentation in future.