From 9a61cf87f5e4f45280067d0c0a4e9f73a8805fca Mon Sep 17 00:00:00 2001
From: megala21 <ktumegala@yahoo.com>
Date: Tue, 3 Oct 2017 00:05:11 +0530
Subject: [PATCH] Adding support for internationalization

---
 .../src/main/resources/publisher/package.json |  1 +
 .../publisher/public/locales/en.json          | 43 +++++++++++
 .../publisher/src/common/constants.js         |  8 +++
 .../AppPublisherBase/BaseLayout.jsx           |  3 +-
 .../Application/ApplicationListing.jsx        | 14 ++--
 .../Application/Create/ApplicationCreate.jsx  | 21 ++++--
 .../Application/Create/CreateSteps/Step1.jsx  | 51 ++++++-------
 .../Application/Create/CreateSteps/Step2.jsx  | 18 ++---
 .../Application/Create/CreateSteps/Step3.jsx  | 16 +++--
 .../Edit/Base/ApplicationEditBaseLayout.jsx   | 10 +--
 .../Edit/GenenralInfo/GeneralInfo.jsx         | 71 +++++++++----------
 .../Release/Create/CreateRelease.jsx          |  9 ++-
 .../Release/Create/UploadPackage.jsx          | 40 +++++++----
 .../Release/ReleaseMgtBase/ReleaseManager.jsx |  8 +--
 .../Application/View/ApplicationView.jsx      | 17 +++--
 .../src/main/resources/publisher/src/index.js | 32 ++++++++-
 .../resources/publisher/webpack.config.js     |  1 -
 17 files changed, 233 insertions(+), 130 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json
index 441f751757..9c9755c4a1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json
@@ -46,6 +46,7 @@
     "mocha": "^3.4.1",
     "mock-local-storage": "^1.0.2",
     "node-sass": "^4.5.3",
+    "react-intl": "^2.4.0",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.1",
     "webpack": "^2.7.0"
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json
new file mode 100644
index 0000000000..81f452f40c
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json
@@ -0,0 +1,43 @@
+{
+  "Title" : "Title",
+  "Description" : "Description",
+  "Category" : "Category",
+  "Visibility" : "Visibility",
+  "Devices" : "Devices",
+  "Roles" : "Roles",
+  "Groups" : "Groups",
+  "Tags" : "Tags",
+  "Platform" : "Platform",
+  "Platforms" : "Platfomrs",
+  "No.Platform" : "No Platforms",
+  "Screenshots" : "Screenshots",
+  "Icon" : "Icon",
+  "Banner" : "Banner",
+  "Create.Application" : "Create Application",
+  "Back" : "Back",
+  "Cancel" : "Cancel",
+  "Finish" : "Finish",
+  "Continue" : "Continue",
+  "Application.Name" : "Application Name",
+  "General" : "General",
+  "App.Releases" : "Application Releases",
+  "Package.Manager" : "Package Manager",
+  "Save" : "Save",
+  "Create.Release" : "Create Release",
+  "Release" : "Release",
+  "New.Release.For" : "New Release for",
+  "Upload.Package.File" : "Upload Package File",
+  "Upload" : "Upload",
+  "Select.from.package.library" : "Select from package library",
+  "Release.Name" : "Release Name",
+  "Release.Notes" : "Release Notes",
+  "Send.for.Review" : "Send for Review",
+  "Production.Releases" : "Production Releases",
+  "Beta.Releases" : "Beta Releases",
+  "Alpha.Releases" : "Alpha Releases",
+  "Version" : "Version",
+  "Status" : "Status",
+  "App.Publisher" : "Application Publisher"
+
+
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
index 336b122e7b..c0f22aaeca 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
@@ -43,5 +43,13 @@ export default class Constants {
         REFRESH_TOKEN_URL: "",
         WSO2_USER: 'wso2_user',
         PARTIAL_TOKEN: 'WSO2_IOT_TOKEN'
+    };
+
+    static hostConstants = {
+        baseURL : window.location.origin,
+        appContext : window.location.pathname.split("/")[1]
+
     }
+
+    static defaultLocale = "en";
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx
index 6b845f796c..843788c7c3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx
@@ -23,6 +23,7 @@ import AuthHandler from "../../api/authHandler";
 import ApplicationCreate from '../Application/Create/ApplicationCreate';
 import {Col, Container, Input, Row,} from 'reactstrap';
 import FloatingButton from "../UIComponents/FloatingButton/FloatingButton";
+import {FormattedMessage} from 'react-intl';
 
 /**
  * Base Layout:
@@ -75,7 +76,7 @@ class BaseLayout extends Component {
                 <div id="header-content">
                     <div id="header">
                         <span id="header-text">
-                            WSO2 IoT App Publisher
+                            WSO2 IoT <FormattedMessage id="App.Publisher" defaultMessage="Application Publisher"/>
                         </span>
                         <div id="header-btn-container">
                             <i className="fw fw-notification btn-header"></i>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index 89aa4ed87b..0ebad7600b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -21,6 +21,7 @@ import {withRouter} from 'react-router-dom';
 import {Button, Col, Row, Table} from 'reactstrap';
 import Drawer from '../UIComponents/Drawer/Drawer';
 import ApplicationView from './View/ApplicationView';
+import {FormattedMessage} from 'react-intl';
 
 /**
  * The App Create Component.
@@ -242,7 +243,9 @@ class ApplicationListing extends Component {
                 <Row>
                     <Col xs="3 offset-9">
                         <div className="platform-link-placeholder">
-                            <Button><i className="fw fw-settings"></i> Platforms</Button>
+                            <Button><i className="fw fw-settings"></i>
+                                <FormattedMessage id="Platforms" defaultMessage="Platforms"/>
+                            </Button>
                         </div>
                     </Col>
                 </Row>
@@ -255,11 +258,12 @@ class ApplicationListing extends Component {
                                 {/* TODO: Remove console.log and add sort method. */}
                                 <th onClick={() => {
                                     console.log("sort")
-                                }}>Application Name
+                                }}>
+                                    <FormattedMessage id="Application.Name" defaultMessage="Application Name"/>
                                 </th>
-                                <th>Category</th>
-                                <th>Platform</th>
-                                <th>Status</th>
+                                <th><FormattedMessage id="Category" defaultMessage="Category"/></th>
+                                <th><FormattedMessage id="Platform" defaultMessage="Platform"/></th>
+                                <th><FormattedMessage id="Status" defaultMessage="Status"/></th>
                                 <th></th>
                             </tr>
                             </thead>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx
index 340990da5d..5586997e14 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx
@@ -22,6 +22,7 @@ import AuthHandler from "../../../api/authHandler";
 import {Step1, Step2, Step3, Step4} from './CreateSteps/index';
 import ApplicationMgtApi from '../../../api/applicationMgtApi';
 import {Button, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row} from 'reactstrap';
+import {FormattedMessage} from 'react-intl';
 
 /**
  * The App Create Component.
@@ -210,7 +211,9 @@ class ApplicationCreate extends Component {
             <div id="create-application-modal">
                 <Modal isOpen={this.state.open} toggle={this.toggle} id="app-create-modal"
                        backdrop={'static'}>
-                    <ModalHeader toggle={this.toggle}>Create Application</ModalHeader>
+                    <ModalHeader toggle={this.toggle}>
+                        <FormattedMessage id="Create.Application" defaultMessage="Create Application"/>
+                    </ModalHeader>
                     <ModalBody id="modal-body-content">
                         <Row>
                             <Col>
@@ -227,11 +230,19 @@ class ApplicationCreate extends Component {
                     </ModalBody>
                     <ModalFooter>
                         {stepIndex === 0 ? <div/> :
-                            <Button color="primary" onClick={this.onPrevClick}>Back</Button>}
-                        <Button color="secondary" onClick={this.onClose}>Cancel</Button>
+                            <Button color="primary" onClick={this.onPrevClick}>
+                                <FormattedMessage id="Back" defaultMessage="Back"/>
+                            </Button>}
+                        <Button color="secondary" onClick={this.onClose}>
+                            <FormattedMessage id="Cancel" defaultMessage="Cancel"/>
+                        </Button>
                         {finished ?
-                            <Button color="primary" onClick={this.onSubmit}>Finish</Button> :
-                            <Button color="primary" onClick={this.onNextClick}>Continue</Button>}
+                            <Button color="primary" onClick={this.onSubmit}>
+                                <FormattedMessage id="Finish" defaultMessage="Finish" />
+                            </Button> :
+                            <Button color="primary" onClick={this.onNextClick}>
+                                <FormattedMessage id="Continue" defaultMessage="Continue"/>
+                            </Button>}
                     </ModalFooter>
                 </Modal>
             </div>);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
index ba5744d2fa..4d1732f17b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
@@ -19,6 +19,7 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {Badge, FormGroup, Input, Label} from 'reactstrap';
+import {FormattedMessage} from 'react-intl';
 
 /**
  * The Second step of application create wizard.
@@ -131,47 +132,37 @@ class Step1 extends Component {
                 <div>
                     <div>
                         <FormGroup>
-                            <Label for="app-title">Title*</Label>
-                            <Input
-                                required
-                                type="text"
-                                name="appName"
-                                id="app-title"
-                            />
+                            <Label for="app-title">
+                                <FormattedMessage id='Title' defaultMessage='Title'/>*
+                            </Label>
+                            <Input required type="text" name="appName" id="app-title"/>
                         </FormGroup>
                         <FormGroup>
-                            <Label for="app-description">Description*</Label>
-                            <Input
-                                required
-                                type="textarea"
-                                name="appDescription"
-                                id="app-description"
-                            />
+                            <Label for="app-description">
+                                <FormattedMessage id='Description' defaultMessage='Description'/>*
+                            </Label>
+                            <Input required type="textarea" name="appDescription" id="app-description"/>
                         </FormGroup>
                         <FormGroup>
-                            <Label for="app-category">Category</Label>
-                            <Input
-                                type="select"
-                                name="category"
-                                id="app-category"
-                            >
+                            <Label for="app-category">
+                                <FormattedMessage id='Category' defaultMessage='Category'/>
+                            </Label>
+                            <Input type="select" name="category" id="app-category">
                                 <option>Business</option>
                             </Input>
                         </FormGroup>
                         <FormGroup>
-                            <Label for="app-visibility">Visibility</Label>
-                            <Input
-                                type="select"
-                                name="visibility"
-                                id="app-visibility"
-                            >
-                                <option>Devices</option>
-                                <option>Roles</option>
-                                <option>Groups</option>
+                            <Label for="app-visibility">
+                                <FormattedMessage id='Visibility' defaultMessage='Visibility'/>
+                            </Label>
+                            <Input type="select" name="visibility" id="app-visibility">
+                                <option><FormattedMessage id='Devices' defaultMessage='Devices'/></option>
+                                <option><FormattedMessage id='Roles' defaultMessage='Roles'/></option>
+                                <option><FormattedMessage id='Groups' defaultMessage='Groups'/></option>
                             </Input>
                         </FormGroup>
                         <FormGroup>
-                            <Label for="app-tags">Tags*</Label>
+                            <Label for="app-tags"><FormattedMessage id='Tags' defaultMessage='Tags'/>*</Label>
                             <Input
                                 required
                                 type="text"
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
index 57bbcf6d2d..edc7b5ce71 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
@@ -21,6 +21,7 @@ import React, {Component} from 'react';
 import AuthHandler from "../../../../api/authHandler";
 import PlatformMgtApi from "../../../../api/platformMgtApi";
 import {FormGroup, Input, Label} from 'reactstrap';
+import {FormattedMessage} from 'react-intl';
 
 /**
  * The first step of the application creation wizard.
@@ -114,30 +115,21 @@ class Step2 extends Component {
 
                 <FormGroup>
                     <Label for="store">Store Type</Label>
-                    <Input
-                        type="select"
-                        name="store"
-                        className="input-custom"
-                        onChange={this.onChangeStore.bind(this)}
-                    >
+                    <Input type="select" name="store" className="input-custom" onChange={this.onChangeStore.bind(this)}>
                         <option>Enterprise</option>
                         <option>Public</option>
                     </Input>
                 </FormGroup>
                 <FormGroup>
-                    <Label for="store">Platform</Label>
-                    <Input
-                        type="select"
-                        name="store"
-                        onChange={this.onChangePlatform.bind(this)}
-                    >
+                    <Label for="store"><FormattedMessage id='Platform' defaultMessage='Platform'/></Label>
+                    <Input type="select" name="store" onChange={this.onChangePlatform.bind(this)}>
                         {this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
                             return (
                                 <option value={platform.identifier}>
                                     {platform.name}
                                 </option>
                             )
-                        }) : <option>No Platforms</option>}
+                        }) : <option><FormattedMessage id='No.Platform' defaultMessage='No Platforms'/></option>}
                     </Input>
                 </FormGroup>
             </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
index c214847cb0..ed2e294f75 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
@@ -17,13 +17,11 @@
  */
 
 import PropTypes from 'prop-types';
-import Chip from 'material-ui/Chip';
 import Dropzone from 'react-dropzone';
 import React, {Component} from 'react';
-import MenuItem from 'material-ui/MenuItem';
-import SelectField from 'material-ui/SelectField';
 import {FormGroup, Label} from 'reactstrap';
 import AppImage from "../../../UIComponents/AppImage/AppImage";
+import {FormattedMessage} from 'react-intl';
 
 /**
  * The Third step of application create wizard.
@@ -111,7 +109,9 @@ class Step3 extends Component {
             <div className="createStep2Content">
                 <div>
                     <FormGroup>
-                        <Label for="app-screenshots">Screenshots*</Label>
+                        <Label for="app-screenshots">
+                            <FormattedMessage id='Screenshots' defaultMessage='Screenshots'/>*
+                        </Label>
                         <span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
                         <div id="screenshot-container">
                             {this.state.screenshots.map((tile) => (
@@ -140,7 +140,9 @@ class Step3 extends Component {
                 <div style={{display: 'flex'}}>
                     <div style={{float: 'left', marginRight: '15px'}}>
                         <FormGroup>
-                            <Label for="app-icon">Icon*</Label>
+                            <Label for="app-icon">
+                                <FormattedMessage id='Screenshots' defaultMessage='Screenshots'/>*
+                            </Label>
                             <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
                             <div id="app-icon-container">
                                 {this.state.icon.map((tile) => (
@@ -164,7 +166,9 @@ class Step3 extends Component {
                     </div>
                     <div style={{marginLeft: '15px'}}>
                         <FormGroup>
-                            <Label for="app-banner">Banner*</Label>
+                            <Label for="app-banner">
+                                <FormattedMessage id='Icon' defaultMessage='Icon'/>*
+                            </Label>
                             <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
                             <div id="app-banner-container">
                                 {this.state.banner.map((tile) => (
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx
index 1febf7c28e..9e0029bba5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx
@@ -20,6 +20,7 @@ import {Col, Row} from "reactstrap";
 import React, {Component} from 'react';
 import GeneralInfo from "../GenenralInfo/GeneralInfo";
 import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
+import {FormattedMessage} from 'react-intl';
 
 class ApplicationEdit extends Component {
 
@@ -85,21 +86,20 @@ class ApplicationEdit extends Component {
                         </a>
                     </Col>
                     <Col>
-                        Application Name
+                        <FormattedMessage id="Application.Name" defaultMessage="Application Name"/>
                     </Col>
                 </Row>
                 <Row id="application-edit-main-container">
                     <Col xs="3">
                         <div className="tab">
                             <button className={this.state.general} value={1} onClick={this.handleTabClick.bind(this)}>
-                                General
+                                <FormattedMessage id="General" defaultMessage="General"/>
                             </button>
                             <button className={this.state.release} value={2} onClick={this.handleTabClick.bind(this)}>
-                                App
-                                Releases
+                                <FormattedMessage id="App.Releases" defaultMessage="Application Releases"/>
                             </button>
                             <button className={this.state.pkgmgt} value={3} onClick={this.handleTabClick.bind(this)}>
-                                Package Manager
+                                <FormattedMessage id="Package.Manager" defaultMessage="Package Manager"/>
                             </button>
                         </div>
                     </Col>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx
index 71372c0cec..3055396bcd 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx
@@ -19,6 +19,7 @@
 import React, {Component} from 'react';
 import {Badge, Button, FormGroup, Input, Label, Row} from 'reactstrap';
 import Dropzone from 'react-dropzone';
+import {FormattedMessage} from 'react-intl';
 
 class GeneralInfo extends Component {
 
@@ -40,7 +41,9 @@ class GeneralInfo extends Component {
                 <Row>
                     <form>
                         <FormGroup>
-                            <Label for="app-title">Title*</Label>
+                            <Label for="app-title">
+                                <FormattedMessage id="Title" defaultMessage="Title"/>*
+                            </Label>
                             <Input
                                 required
                                 type="text"
@@ -49,46 +52,34 @@ class GeneralInfo extends Component {
                             />
                         </FormGroup>
                         <FormGroup>
-                            <Label for="app-title">Description*</Label>
-                            <Input
-                                required
-                                type="textarea"
-                                multiline
-                                name="appName"
-                                id="app-title"
-                            />
+                            <Label for="app-title">
+                                <FormattedMessage id="Description" defaultMessage="Description"/>*
+                            </Label>
+                            <Input required type="textarea" multiline name="appName" id="app-title"/>
                         </FormGroup>
                         <FormGroup>
-                            <Label for="app-category">Category</Label>
-                            <Input
-                                type="select"
-                                name="category"
-                                id="app-category"
-                            >
+                            <Label for="app-category">
+                                <FormattedMessage id="Category" defaultMessage="Category"/>
+                            </Label>
+                            <Input type="select" name="category" id="app-category">
                                 <option>Business</option>
                             </Input>
                         </FormGroup>
                         <FormGroup>
-                            <Label for="app-visibility">Visibility</Label>
-                            <Input
-                                type="select"
-                                name="visibility"
-                                id="app-visibility"
-                            >
-                                <option>Devices</option>
-                                <option>Roles</option>
-                                <option>Groups</option>
+                            <Label for="app-visibility">
+                                <FormattedMessage id="Visibility" defaultMessage="Visibility"/>
+                            </Label>
+                            <Input type="select" name="visibility" id="app-visibility">
+                                <option><FormattedMessage id="Devices" defaultMessage="Devices"/></option>
+                                <option><FormattedMessage id="Roles" defaultMessage="Roles"/></option>
+                                <option><FormattedMessage id="Groups" defaultMessage="Groups"/></option>
                             </Input>
                         </FormGroup>
                         <FormGroup>
-                            <Label for="app-tags">Tags*</Label>
-                            <Input
-                                required
-                                type="text"
-                                value={this.state.defValue}
-                                name="app-tags"
-                                id="app-tags"
-                            />
+                            <Label for="app-tags">
+                                <FormattedMessage id="Tags" defaultMessage="Tags"/>*
+                            </Label>
+                            <Input required type="text" value={this.state.defValue} name="app-tags" id="app-tags"/>
                             <div id="batch-content">
                                 {this.state.tags.map(tag => {
                                         return (
@@ -105,7 +96,9 @@ class GeneralInfo extends Component {
                         </FormGroup>
                         <div>
                             <FormGroup>
-                                <Label for="app-screenshots">Screenshots*</Label>
+                                <Label for="app-screenshots">
+                                    <FormattedMessage id="Screenshots" defaultMessage="Screenshots"/>*
+                                </Label>
                                 <span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
                                 <div id="screenshot-container">
                                     {this.state.screenshots.map((tile) => (
@@ -138,7 +131,9 @@ class GeneralInfo extends Component {
                         <div style={{display: 'flex'}}>
                             <div style={{float: 'left', marginRight: '15px'}}>
                                 <FormGroup>
-                                    <Label for="app-icon">Icon*</Label>
+                                    <Label for="app-icon">
+                                        <FormattedMessage id="Icon" defaultMessage="Icon"/>*
+                                    </Label>
                                     <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
                                     <div id="app-icon-container">
                                         {this.state.icon.map((tile) => (
@@ -163,7 +158,9 @@ class GeneralInfo extends Component {
                             </div>
                             <div style={{marginLeft: '15px'}}>
                                 <FormGroup>
-                                    <Label for="app-banner">Banner*</Label>
+                                    <Label for="app-banner">
+                                        <FormattedMessage id="Banner" defaultMessage="Banner"/>*
+                                    </Label>
                                     <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
                                     <div id="app-banner-container">
                                         {this.state.banner.map((tile) => (
@@ -189,7 +186,9 @@ class GeneralInfo extends Component {
                             </div>
                         </div>
                         <div className="save-info">
-                            <Button>Save</Button>
+                            <Button>
+                                <FormattedMessage id="Save" defaultMessage="Save"/>
+                            </Button>
                         </div>
                     </form>
                 </Row>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/CreateRelease.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/CreateRelease.jsx
index 85c78a1000..57fc546609 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/CreateRelease.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/CreateRelease.jsx
@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {Button, FormGroup, FormText, Input, Label, Row} from "reactstrap";
 import UploadPackage from "./UploadPackage";
+import {FormattedMessage} from 'react-intl';
 
 class CreateRelease extends Component {
     constructor() {
@@ -74,7 +75,7 @@ class CreateRelease extends Component {
                             <div className="release-header">
                                 <a onClick={this.onBackClick}>{"<-"}</a>
                                 <span id="create-release-header">
-                            <strong>{channel} Release</strong>
+                            <strong>{channel} <FormattedMessage id="Release" defaultMessage="Release"/></strong>
                         </span>
                             </div>
                         </Row>
@@ -82,7 +83,7 @@ class CreateRelease extends Component {
                             <div className="release-create">
                                 <div>
                             <span>
-                                <strong>Create Release</strong>
+                                <strong><FormattedMessage id="Create.Release" defaultMessage="Create Release"/></strong>
                             </span>
                                     <p>
                                         {channel === 'Production' ? "" :
@@ -148,7 +149,9 @@ class CreateRelease extends Component {
                                                 </FormText>
                                             </FormGroup>
                                             <div>
-                                                <Button className="form-btn">Save</Button>
+                                                <Button className="form-btn">
+                                                    <FormattedMessage id="Save" defaultMessage="Save"/>
+                                                </Button>
                                             </div>
                                         </form>
                                     </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/UploadPackage.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/UploadPackage.jsx
index 6c51efdb8a..e41bf5a634 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/UploadPackage.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/UploadPackage.jsx
@@ -19,6 +19,7 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {Button, Col, FormGroup, Input, Label, Row} from "reactstrap";
+import {FormattedMessage} from 'react-intl';
 
 class UploadPackage extends Component {
 
@@ -39,44 +40,53 @@ class UploadPackage extends Component {
                     <div className="release-header">
                         <a onClick={this.handleBack}>{"<-"}</a>
                         <span id="create-release-header">
-                            <strong>New Release for {selectedChannel}</strong>
+                            <strong>
+                                <FormattedMessage id="New.Release.For" defaultMessage="New Release For"/> {selectedChannel}
+                            </strong>
                         </span>
                     </div>
                 </Row>
                 <Row>
                     <div className="release-header">
                         <span id="create-release-header">
-                            <strong>Upload Package File</strong>
+                            <strong>
+                                <FormattedMessage id="Upload.Package.File" defaultMessage="Upload Package File"/>
+                            </strong>
                         </span>
                     </div>
                 </Row>
                 <Row>
                     <Col xs="3">
-                        <Button>Upload</Button>
+                        <Button>
+                            <FormattedMessage id="Upload" defaultMessage="Upload"/>
+                        </Button>
                     </Col>
                     <Col xs="3">
-                        <Button>Select from package library</Button>
+                        <Button>
+                            <FormattedMessage id="Select.from.package.library"
+                                              defaultMessage="Select from package library"/>
+                        </Button>
                     </Col>
                 </Row>
                 <Row>
                     <div className="release-detail-content">
                         <form>
                             <FormGroup>
-                                <Label>Release Name *</Label>
-                                <Input
-                                    required
-                                    type="text"
-                                />
+                                <Label>
+                                    <FormattedMessage id="Release.Name" defaultMessage="Release Name"/> *
+                                </Label>
+                                <Input required type="text"/>
                             </FormGroup>
                             <FormGroup>
-                                <Label>Release Notes *</Label>
-                                <Input
-                                    required
-                                    type="textarea"
-                                />
+                                <Label>
+                                    <FormattedMessage id="Release.Notes" defaultMessage="Release Notes"/> *
+                                </Label>
+                                <Input required type="textarea"/>
                             </FormGroup>
                             <div className="form-btn">
-                                <Button>Send for Review</Button>
+                                <Button>
+                                    <FormattedMessage id="Send.for.Review" defaultMessage="Send for Review"/>
+                                </Button>
                             </div>
                         </form>
                     </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/ReleaseManager.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/ReleaseManager.jsx
index e12dfab4c1..1c0a8825e6 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/ReleaseManager.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/ReleaseManager.jsx
@@ -16,10 +16,10 @@
  * under the License.
  */
 
-import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {Button, Col, Row} from "reactstrap";
 import CreateRelease from "../Create/CreateRelease";
+import {FormattedMessage} from 'react-intl';
 
 class ReleaseManager extends Component {
 
@@ -82,7 +82,7 @@ class ReleaseManager extends Component {
                         <Row>
                             <Col sm="12">
                                 <div className="release" id="production">
-                                    <span>Production Releases</span>
+                                    <FormattedMessage id="Production.Releases" defaultMessage="Production Releases"/>
                                     <div className="release-content">
                                         <div className="release-inner">
                                             {this.getNoReleaseContent("Production")}
@@ -94,7 +94,7 @@ class ReleaseManager extends Component {
                         <Row>
                             <Col sm="12">
                                 <div className="release" id="beta">
-                                    <span>Beta Releases</span>
+                                    <FormattedMessage id="Beta.Releases" defaultMessage="Beta Releases"/>
                                     <div className="release-content">
                                         <div className="release-inner">
                                             {this.getNoReleaseContent("Beta")}
@@ -106,7 +106,7 @@ class ReleaseManager extends Component {
                         <Row>
                             <Col sm="12">
                                 <div className="release" id="alpha">
-                                    <span>Alpha Releases</span>
+                                    <FormattedMessage id="Alpha.Releases" defaultMessage="Alpha Releases"/>
                                     <div className="release-content">
                                         <div className="release-inner">
                                             {this.getNoReleaseContent("Alpha")}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx
index e76991b10b..85cb7b5fa3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx
@@ -19,6 +19,7 @@
 import React, {Component} from 'react';
 import {withRouter} from 'react-router-dom';
 import {Col, Row} from "reactstrap";
+import {FormattedMessage} from 'react-intl';
 
 /**
  * Application view component.
@@ -90,7 +91,9 @@ class ApplicationView extends Component {
                 <div id="application-view-row">
                     <Row>
                         <Col>
-                            <span><strong>Description: </strong></span>
+                            <span><strong>
+                                 <FormattedMessage id="Description" defaultMessage="Description"/>:
+                            </strong></span>
                         </Col>
                         <Col>
                             <p>sdfjlkdsjfsjdfjsdf sfjdslkjfdsflkjdsfslkdjfl j</p>
@@ -98,7 +101,9 @@ class ApplicationView extends Component {
                     </Row>
                     <Row>
                         <Col>
-                            <span><strong>Tags: </strong></span>
+                            <span><strong>
+                                <FormattedMessage id="Tags" defaultMessage="Tags"/>:
+                            </strong></span>
                         </Col>
                         <Col>
                             <p>[list of tags...]</p>
@@ -106,7 +111,9 @@ class ApplicationView extends Component {
                     </Row>
                     <Row>
                         <Col>
-                            <span><strong>Release: </strong></span>
+                            <span><strong>
+                                 <FormattedMessage id="Release" defaultMessage="Release"/>:
+                            </strong></span>
                         </Col>
                         <Col>
                             <p>Production</p>
@@ -114,7 +121,9 @@ class ApplicationView extends Component {
                     </Row>
                     <Row>
                         <Col>
-                            <span><strong>Version: </strong></span>
+                            <span><strong>
+                                 <FormattedMessage id="Version" defaultMessage="Version"/>:
+                            </strong></span>
                         </Col>
                         <Col>
                             <p>v1.0</p>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.js
index 07157102cb..6a137f3876 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.js
@@ -21,9 +21,37 @@ import Publisher from './App';
 import ReactDOM from 'react-dom';
 import 'bootstrap/dist/css/bootstrap.css';
 import registerServiceWorker from './registerServiceWorker';
+import {IntlProvider, addLocaleData, defineMessages} from 'react-intl';
+import Axios from 'axios';
+import Constants from './common/constants';
+
+const possibleLocale = navigator.language.split("-")[0];
+let loadLocaleFile = Axios.create({
+    baseURL: Constants.hostConstants.baseURL + "/" + Constants.hostConstants.appContext + "/locales/"
+    + possibleLocale + ".json"
+}).get();
+
 
 /**
  * This is the base js file of the app. All the content will be rendered in the root element.
  * */
-ReactDOM.render(<Publisher/>, document.getElementById('root'));
-registerServiceWorker();
+loadLocaleFile.then(response => {
+    const messages = defineMessages(response.data);
+    addLocaleData(require('react-intl/locale-data/' + possibleLocale));
+    ReactDOM.render(<IntlProvider locale={possibleLocale}
+                                  messages={messages}><Publisher/></IntlProvider>, document.getElementById('root'));
+    registerServiceWorker();
+}).catch(error => {
+    addLocaleData(require('react-intl/locale-data/' + Constants.defaultLocale));
+    let defaultLocale = axios.create({
+        baseURL: Constants.hostConstants.baseURL + "/" + Constants.hostConstants.appContext + "/locales"
+        + Constants.defaultLocale + ".json"
+    }).get();
+    defaultLocale.then(response => {
+        const messages = defineMessages(response.data);
+        ReactDOM.render(<IntlProvider locale={possibleLocale}
+                                      messages={messages}><Publisher/></IntlProvider>, document.getElementById('root'));
+        registerServiceWorker();
+    }).catch(error => {
+    });
+});
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js
index 8b9124b3f2..00f2d7dc43 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js
@@ -64,7 +64,6 @@ const config = {
         ]
     },
     resolve: {
-        // you can now require('file') instead of require('file.coffee')
         extensions: ['.jsx', '.js', '.ttf', '.woff', '.woff2', '.svg']
     }