From 59d3407cd5597c7cf99d2ca5124d7bfa5c081ce5 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Thu, 4 Apr 2019 22:31:20 +0530
Subject: [PATCH 1/7] moved items to left

---
 .../pages/dashboard/add-new-app/AddNewApp.js  | 196 +++++++++++++++---
 1 file changed, 168 insertions(+), 28 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
index 49283784f9..dd5c5343f4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
@@ -1,12 +1,30 @@
 import React from "react";
 import "antd/dist/antd.css";
-import {PageHeader, Typography, Card, Steps, Button, message, Row, Col} from "antd";
+import {
+    PageHeader,
+    Typography,
+    Card,
+    Steps,
+    Button,
+    message,
+    Row,
+    Col,
+    Tag,
+    Tooltip,
+    Input,
+    Icon,
+    Select,
+    Checkbox,
+    Form,
+    Upload
+} from "antd";
 import Step1 from "./Step1"
 import Step2 from "./Step2"
 import Step3 from "./Step3"
+import styles from "./Style.less"
 
 const Paragraph = Typography;
-
+const Dragger = Upload.Dragger;
 const routes = [
     {
         path: 'index',
@@ -36,6 +54,94 @@ const steps = [{
 }];
 
 
+const {Option} = Select;
+const {TextArea} = Input;
+const InputGroup = Input.Group;
+
+const formItemLayout = {
+    labelCol: {
+        span: 8,
+    },
+    wrapperCol: {
+        span: 16,
+    },
+};
+
+class EditableTagGroup extends React.Component {
+    state = {
+        tags: [],
+        inputVisible: false,
+        inputValue: '',
+    };
+
+    handleClose = (removedTag) => {
+        const tags = this.state.tags.filter(tag => tag !== removedTag);
+        console.log(tags);
+        this.setState({tags});
+    }
+
+    showInput = () => {
+        this.setState({inputVisible: true}, () => this.input.focus());
+    }
+
+    handleInputChange = (e) => {
+        this.setState({inputValue: e.target.value});
+    }
+
+    handleInputConfirm = () => {
+        const {inputValue} = this.state;
+        let {tags} = this.state;
+        if (inputValue && tags.indexOf(inputValue) === -1) {
+            tags = [...tags, inputValue];
+        }
+        console.log(tags);
+        this.setState({
+            tags,
+            inputVisible: false,
+            inputValue: '',
+        });
+    }
+
+    saveInputRef = input => this.input = input
+
+    render() {
+        const {tags, inputVisible, inputValue} = this.state;
+        return (
+            <div>
+                {tags.map((tag, index) => {
+                    const isLongTag = tag.length > 20;
+                    const tagElem = (
+                        <Tag key={tag} closable={index !== 0} onClose={() => this.handleClose(tag)}>
+                            {isLongTag ? `${tag.slice(0, 20)}...` : tag}
+                        </Tag>
+                    );
+                    return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
+                })}
+                {inputVisible && (
+                    <Input
+                        ref={this.saveInputRef}
+                        type="text"
+                        size="small"
+                        style={{width: 78}}
+                        value={inputValue}
+                        onChange={this.handleInputChange}
+                        onBlur={this.handleInputConfirm}
+                        onPressEnter={this.handleInputConfirm}
+                    />
+                )}
+                {!inputVisible && (
+                    <Tag
+                        onClick={this.showInput}
+                        style={{background: '#fff', borderStyle: 'dashed'}}
+                    >
+                        <Icon type="plus"/> New Tag
+                    </Tag>
+                )}
+            </div>
+        );
+    }
+}
+
 class AddNewApp extends React.Component {
 
     constructor(props) {
@@ -75,33 +181,67 @@ class AddNewApp extends React.Component {
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
                     <Row>
-                        <Col span={16} offset={4}>
+                        <Col span={20} offset={2}>
                             <Card>
-                                <div>
-                                    <Steps current={current}>
-                                        {steps.map(item => <Step key={item.title} title={item.title}/>)}
-                                    </Steps>
-                                    <Content/>
-                                    <div className="steps-action">
-                                        {
-                                            current < steps.length - 1
-                                            && <Button type="primary" onClick={() => this.next()}>Next</Button>
-                                        }
-                                        {
-                                            current === steps.length - 1
-                                            && <Button type="primary"
-                                                       onClick={() => message.success('Processing complete!')}>Done</Button>
-                                        }
-                                        {
-                                            current > 0
-                                            && (
-                                                <Button style={{marginLeft: 8}} onClick={() => this.prev()}>
-                                                    Previous
-                                                </Button>
-                                            )
-                                        }
-                                    </div>
-                                </div>
+                                <Row>
+                                    <Col span={12}>
+                                        <div>
+                                            <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
+
+                                                <Form.Item {...formItemLayout} label="Platform">
+                                                    <Select placeholder="ex: android">
+                                                        <Option value="Android">Android</Option>
+                                                        <Option value="iOS">iOS</Option>
+                                                    </Select>
+                                                </Form.Item>
+                                                <Form.Item {...formItemLayout} label="Type">
+                                                    <Select value="Enterprise">
+                                                        <Option value="Enterprise" selected>Enterprise</Option>
+                                                    </Select>
+                                                </Form.Item>
+                                                <Form.Item {...formItemLayout} label="Name">
+                                                    <Input placeholder="App Name"/>
+                                                </Form.Item>
+                                                <Form.Item {...formItemLayout} label="Description">
+                                                    <TextArea placeholder="Enter the description" rows={4}/>
+                                                </Form.Item>
+                                                <Form.Item {...formItemLayout} label="Category">
+                                                    <Select placeholder="Select a category">
+                                                        <Option value="travel">Travel</Option>
+                                                        <Option value="entertainment">Entertainment</Option>
+                                                    </Select>
+                                                </Form.Item>
+                                                <Form.Item {...formItemLayout} label="Tags">
+                                                    <EditableTagGroup/>
+                                                </Form.Item>
+                                                <Form.Item {...formItemLayout} label="Price">
+                                                    <Input prefix="$" placeholder="00.00"/>
+                                                </Form.Item>
+                                                <Form.Item {...formItemLayout} label="Share with all tenents?">
+                                                    <Checkbox> </Checkbox>
+                                                </Form.Item>
+                                                <Form.Item {...formItemLayout} label="Meta Daa">
+                                                    <InputGroup>
+                                                        <Row gutter={8}>
+                                                            <Col span={5}>
+                                                                <Input placeholder="Key"/>
+                                                            </Col>
+                                                            <Col span={10}>
+                                                                <Input placeholder="value"/>
+                                                            </Col>
+                                                            <Col span={4}>
+                                                                <Button type="dashed" shape="circle" icon="plus"/>
+                                                            </Col>
+                                                        </Row>
+                                                    </InputGroup>
+                                                </Form.Item>
+                                            </Form>
+                                        </div>
+                                    </Col>
+                                    <Col span={12}>
+
+                                    </Col>
+                                </Row>
                             </Card>
                         </Col>
                     </Row>

From f4ec3e211cb2197866078338f630047bfafd7e7c Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Thu, 4 Apr 2019 23:38:35 +0530
Subject: [PATCH 2/7] added all form items to single page

---
 .../react-app/src/App.css                     |  4 ++
 .../pages/dashboard/add-new-app/AddNewApp.js  | 49 +++++++++++++-
 .../pages/dashboard/add-new-app/IconImg.js    | 66 +++++++++++++++++++
 .../add-new-app/UploadScreenshots.js          | 54 +++++++++++++++
 4 files changed, 172 insertions(+), 1 deletion(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/IconImg.js
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/UploadScreenshots.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
index b41d297cab..4fea44459f 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
@@ -31,3 +31,7 @@
     transform: rotate(360deg);
   }
 }
+
+.ant-upload.ant-upload-drag {
+  height: 170px;
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
index dd5c5343f4..c94b693d35 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
@@ -22,6 +22,8 @@ import Step1 from "./Step1"
 import Step2 from "./Step2"
 import Step3 from "./Step3"
 import styles from "./Style.less"
+import IconImage from "./IconImg"
+import UploadScreenshots from "./UploadScreenshots"
 
 const Paragraph = Typography;
 const Dragger = Upload.Dragger;
@@ -40,6 +42,23 @@ const routes = [
     },
 ];
 
+const props = {
+    name: 'file',
+    multiple: true,
+    action: '//jsonplaceholder.typicode.com/posts/',
+    onChange(info) {
+        const status = info.file.status;
+        if (status !== 'uploading') {
+            console.log(info.file, info.fileList);
+        }
+        if (status === 'done') {
+            message.success(`${info.file.name} file uploaded successfully.`);
+        } else if (status === 'error') {
+            message.error(`${info.file.name} file upload failed.`);
+        }
+    },
+};
+
 const Step = Steps.Step;
 
 const steps = [{
@@ -238,7 +257,35 @@ class AddNewApp extends React.Component {
                                             </Form>
                                         </div>
                                     </Col>
-                                    <Col span={12}>
+                                    <Col span={12} style={{paddingTop:40}}>
+                                        <p>Application</p>
+                                        <div style={{height:170}}>
+                                            <Dragger {...props}>
+                                                <p className="ant-upload-drag-icon">
+                                                    <Icon type="inbox" />
+                                                </p>
+                                                <p className="ant-upload-text">Click or drag file to this area to upload</p>
+                                                <p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+                                            </Dragger>
+                                        </div>
+                                        <Row style={{marginTop:40}}>
+                                            <Col span={12}>
+                                                <p>Icon</p>
+                                                <IconImage/>
+                                            </Col>
+                                            <Col span={12}>
+                                                <p>Banner</p>
+                                                <IconImage/>
+                                            </Col>
+                                        </Row>
+
+
+                                        <Row style={{marginTop:40}}>
+                                            <Col span={24}>
+                                                <p>Screenshots</p>
+                                                <UploadScreenshots/>
+                                            </Col>
+                                        </Row>
 
                                     </Col>
                                 </Row>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/IconImg.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/IconImg.js
new file mode 100644
index 0000000000..b56dedb034
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/IconImg.js
@@ -0,0 +1,66 @@
+import React from "react";
+import { Upload, Icon, message } from 'antd';
+
+function getBase64(img, callback) {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => callback(reader.result));
+    reader.readAsDataURL(img);
+}
+
+function beforeUpload(file) {
+    const isJPG = file.type === 'image/jpeg';
+    if (!isJPG) {
+        message.error('You can only upload JPG file!');
+    }
+    const isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+        message.error('Image must smaller than 2MB!');
+    }
+    return isJPG && isLt2M;
+}
+
+
+class IconImage extends React.Component {
+    state = {
+        loading: false,
+    };
+
+    handleChange = (info) => {
+        if (info.file.status === 'uploading') {
+            this.setState({ loading: true });
+            return;
+        }
+        if (info.file.status === 'done') {
+            // Get this url from response in real world.
+            getBase64(info.file.originFileObj, imageUrl => this.setState({
+                imageUrl,
+                loading: false,
+            }));
+        }
+    }
+
+    render() {
+        const uploadButton = (
+            <div>
+                <Icon type={this.state.loading ? 'loading' : 'plus'} />
+                <div className="ant-upload-text">Upload</div>
+            </div>
+        );
+        const imageUrl = this.state.imageUrl;
+        return (
+            <Upload
+                name="avatar"
+                listType="picture-card"
+                className="avatar-uploader"
+                showUploadList={false}
+                action="//jsonplaceholder.typicode.com/posts/"
+                beforeUpload={beforeUpload}
+                onChange={this.handleChange}
+            >
+                {imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}
+            </Upload>
+        );
+    }
+}
+
+export default IconImage;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/UploadScreenshots.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/UploadScreenshots.js
new file mode 100644
index 0000000000..8f83fc3d23
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/UploadScreenshots.js
@@ -0,0 +1,54 @@
+import React from "react";
+import { Upload, Icon, Modal} from 'antd';
+
+
+class UploadScreenshots extends React.Component {
+    state = {
+        previewVisible: false,
+        previewImage: '',
+        fileList: [{
+            uid: '-1',
+            name: 'xxx.png',
+            status: 'done',
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        }],
+    };
+
+    handleCancel = () => this.setState({ previewVisible: false })
+
+    handlePreview = (file) => {
+        this.setState({
+            previewImage: file.url || file.thumbUrl,
+            previewVisible: true,
+        });
+    }
+
+    handleChange = ({ fileList }) => this.setState({ fileList })
+
+    render() {
+        const { previewVisible, previewImage, fileList } = this.state;
+        const uploadButton = (
+            <div>
+                <Icon type="plus" />
+                <div className="ant-upload-text">Upload</div>
+            </div>
+        );
+        return (
+            <div className="clearfix">
+                <Upload
+                    action="//jsonplaceholder.typicode.com/posts/"
+                    listType="picture-card"
+                    fileList={fileList}
+                    onPreview={this.handlePreview}
+                    onChange={this.handleChange}
+                >
+                    {fileList.length >= 3 ? null : uploadButton}
+                </Upload>
+                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
+                </Modal>
+            </div>
+        );
+    }
+}
+export default UploadScreenshots;
\ No newline at end of file

From 36127ceca5cafaa2956305dfd4852db536c37994 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Thu, 11 Apr 2019 10:04:23 +0530
Subject: [PATCH 3/7] added semicolons in line endings

---
 .../src/pages/dashboard/add-new-app/AddNewApp.js     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
index c94b693d35..b53954fc90 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
@@ -18,12 +18,12 @@ import {
     Form,
     Upload
 } from "antd";
-import Step1 from "./Step1"
-import Step2 from "./Step2"
-import Step3 from "./Step3"
-import styles from "./Style.less"
-import IconImage from "./IconImg"
-import UploadScreenshots from "./UploadScreenshots"
+import Step1 from "./Step1";
+import Step2 from "./Step2";
+import Step3 from "./Step3";
+import styles from "./Style.less";
+import IconImage from "./IconImg";
+import UploadScreenshots from "./UploadScreenshots";
 
 const Paragraph = Typography;
 const Dragger = Upload.Dragger;

From f260dfdc8b5ef634ee7c41c21f9912a80847ac0e Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Thu, 11 Apr 2019 14:10:27 +0530
Subject: [PATCH 4/7] changed layout of add nuw app in publisher

---
 .../pages/dashboard/add-new-app/AddNewApp.js  | 65 +++++++++++++------
 .../add-new-app/UploadScreenshots.js          | 13 ++--
 2 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
index b53954fc90..83e1906da1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
@@ -14,9 +14,10 @@ import {
     Input,
     Icon,
     Select,
-    Checkbox,
+    Switch,
     Form,
-    Upload
+    Upload,
+    Divider
 } from "antd";
 import Step1 from "./Step1";
 import Step2 from "./Step2";
@@ -44,7 +45,7 @@ const routes = [
 
 const props = {
     name: 'file',
-    multiple: true,
+    multiple: false,
     action: '//jsonplaceholder.typicode.com/posts/',
     onChange(info) {
         const status = info.file.status;
@@ -79,13 +80,15 @@ const InputGroup = Input.Group;
 
 const formItemLayout = {
     labelCol: {
-        span: 8,
+        span: 4,
     },
     wrapperCol: {
-        span: 16,
+        span: 20,
     },
 };
 
+
+
 class EditableTagGroup extends React.Component {
     state = {
         tags: [],
@@ -170,6 +173,12 @@ class AddNewApp extends React.Component {
         };
     }
 
+    tags = [];
+
+    addTag(key, value){
+        this.tags.push(<Option key={key}>{value}</Option>);
+    }
+
     next() {
         const current = this.state.current + 1;
         this.setState({current});
@@ -184,6 +193,8 @@ class AddNewApp extends React.Component {
     render() {
         const {current} = this.state;
         const Content = steps[current].content;
+        this.addTag('1','Lorem');
+        this.addTag('2','Ipsum');
         return (
             <div>
                 <PageHeader
@@ -205,7 +216,8 @@ class AddNewApp extends React.Component {
                                 <Row>
                                     <Col span={12}>
                                         <div>
-                                            <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
+                                            <Form labelAlign="left" layout="horizontal" className={styles.stepForm}
+                                                  hideRequiredMark>
 
                                                 <Form.Item {...formItemLayout} label="Platform">
                                                     <Select placeholder="ex: android">
@@ -218,11 +230,11 @@ class AddNewApp extends React.Component {
                                                         <Option value="Enterprise" selected>Enterprise</Option>
                                                     </Select>
                                                 </Form.Item>
-                                                <Form.Item {...formItemLayout} label="Name">
-                                                    <Input placeholder="App Name"/>
+                                                <Form.Item {...formItemLayout} label="App Name">
+                                                    <Input placeholder="ex: Lorem App"/>
                                                 </Form.Item>
                                                 <Form.Item {...formItemLayout} label="Description">
-                                                    <TextArea placeholder="Enter the description" rows={4}/>
+                                                    <TextArea placeholder="Enter the description..." rows={4}/>
                                                 </Form.Item>
                                                 <Form.Item {...formItemLayout} label="Category">
                                                     <Select placeholder="Select a category">
@@ -230,14 +242,21 @@ class AddNewApp extends React.Component {
                                                         <Option value="entertainment">Entertainment</Option>
                                                     </Select>
                                                 </Form.Item>
-                                                <Form.Item {...formItemLayout} label="Tags">
-                                                    <EditableTagGroup/>
-                                                </Form.Item>
                                                 <Form.Item {...formItemLayout} label="Price">
                                                     <Input prefix="$" placeholder="00.00"/>
                                                 </Form.Item>
-                                                <Form.Item {...formItemLayout} label="Share with all tenents?">
-                                                    <Checkbox> </Checkbox>
+                                                <Form.Item {...formItemLayout} label="Is Sahred?">
+                                                    <Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="close" />} defaultChecked />
+                                                </Form.Item>
+                                                <Divider/>
+                                                <Form.Item {...formItemLayout} label="Tags">
+                                                    <Select
+                                                        mode="tags"
+                                                        style={{ width: '100%' }}
+                                                        placeholder="Tags Mode"
+                                                    >
+                                                        {this.tags}
+                                                    </Select>,
                                                 </Form.Item>
                                                 <Form.Item {...formItemLayout} label="Meta Daa">
                                                     <InputGroup>
@@ -257,18 +276,21 @@ class AddNewApp extends React.Component {
                                             </Form>
                                         </div>
                                     </Col>
-                                    <Col span={12} style={{paddingTop:40}}>
+                                    <Col span={12} style={{paddingTop: 40, paddingLeft: 20}}>
                                         <p>Application</p>
-                                        <div style={{height:170}}>
+                                        <div style={{height: 170}}>
                                             <Dragger {...props}>
                                                 <p className="ant-upload-drag-icon">
-                                                    <Icon type="inbox" />
+                                                    <Icon type="inbox"/>
                                                 </p>
-                                                <p className="ant-upload-text">Click or drag file to this area to upload</p>
-                                                <p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+                                                <p className="ant-upload-text">Click or drag file to this area to
+                                                    upload</p>
+                                                <p className="ant-upload-hint">Support for a single or bulk upload.
+                                                    Strictly prohibit from uploading company data or other band
+                                                    files</p>
                                             </Dragger>
                                         </div>
-                                        <Row style={{marginTop:40}}>
+                                        <Row style={{marginTop: 40}}>
                                             <Col span={12}>
                                                 <p>Icon</p>
                                                 <IconImage/>
@@ -280,7 +302,7 @@ class AddNewApp extends React.Component {
                                         </Row>
 
 
-                                        <Row style={{marginTop:40}}>
+                                        <Row style={{marginTop: 40}}>
                                             <Col span={24}>
                                                 <p>Screenshots</p>
                                                 <UploadScreenshots/>
@@ -288,6 +310,7 @@ class AddNewApp extends React.Component {
                                         </Row>
 
                                     </Col>
+
                                 </Row>
                             </Card>
                         </Col>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/UploadScreenshots.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/UploadScreenshots.js
index 8f83fc3d23..057e0f75be 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/UploadScreenshots.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/UploadScreenshots.js
@@ -6,24 +6,19 @@ class UploadScreenshots extends React.Component {
     state = {
         previewVisible: false,
         previewImage: '',
-        fileList: [{
-            uid: '-1',
-            name: 'xxx.png',
-            status: 'done',
-            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-        }],
+        fileList: [],
     };
 
-    handleCancel = () => this.setState({ previewVisible: false })
+    handleCancel = () => this.setState({ previewVisible: false });
 
     handlePreview = (file) => {
         this.setState({
             previewImage: file.url || file.thumbUrl,
             previewVisible: true,
         });
-    }
+    };
 
-    handleChange = ({ fileList }) => this.setState({ fileList })
+    handleChange = ({ fileList }) => this.setState({ fileList });
 
     render() {
         const { previewVisible, previewImage, fileList } = this.state;

From a2ff850d06c04ea5a814864310e62c036e04ed81 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Thu, 11 Apr 2019 15:53:09 +0530
Subject: [PATCH 5/7] changed layout of add nuw app in publisher

---
 .../pages/dashboard/add-new-app/AddNewApp.js  | 33 ++++++++-----
 .../add-new-app/components/AddTagModal.js     | 49 +++++++++++++++++++
 2 files changed, 70 insertions(+), 12 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/components/AddTagModal.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
index 83e1906da1..3965c506c6 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
@@ -218,7 +218,6 @@ class AddNewApp extends React.Component {
                                         <div>
                                             <Form labelAlign="left" layout="horizontal" className={styles.stepForm}
                                                   hideRequiredMark>
-
                                                 <Form.Item {...formItemLayout} label="Platform">
                                                     <Select placeholder="ex: android">
                                                         <Option value="Android">Android</Option>
@@ -234,7 +233,7 @@ class AddNewApp extends React.Component {
                                                     <Input placeholder="ex: Lorem App"/>
                                                 </Form.Item>
                                                 <Form.Item {...formItemLayout} label="Description">
-                                                    <TextArea placeholder="Enter the description..." rows={4}/>
+                                                    <TextArea placeholder="Enter the description..." rows={7}/>
                                                 </Form.Item>
                                                 <Form.Item {...formItemLayout} label="Category">
                                                     <Select placeholder="Select a category">
@@ -250,24 +249,34 @@ class AddNewApp extends React.Component {
                                                 </Form.Item>
                                                 <Divider/>
                                                 <Form.Item {...formItemLayout} label="Tags">
-                                                    <Select
-                                                        mode="tags"
-                                                        style={{ width: '100%' }}
-                                                        placeholder="Tags Mode"
-                                                    >
-                                                        {this.tags}
-                                                    </Select>,
+
+                                                    <InputGroup>
+                                                        <Row gutter={8}>
+                                                            <Col span={22}>
+                                                                <Select
+                                                                    mode="multiple"
+                                                                    style={{ width: '100%' }}
+                                                                    placeholder="Tags Mode"
+                                                                >
+                                                                    {this.tags}
+                                                                </Select>
+                                                            </Col>
+                                                            <Col span={2}>
+                                                                <Button type="dashed" shape="circle" icon="plus"/>
+                                                            </Col>
+                                                        </Row>
+                                                    </InputGroup>
                                                 </Form.Item>
                                                 <Form.Item {...formItemLayout} label="Meta Daa">
                                                     <InputGroup>
                                                         <Row gutter={8}>
-                                                            <Col span={5}>
+                                                            <Col span={10}>
                                                                 <Input placeholder="Key"/>
                                                             </Col>
-                                                            <Col span={10}>
+                                                            <Col span={12}>
                                                                 <Input placeholder="value"/>
                                                             </Col>
-                                                            <Col span={4}>
+                                                            <Col span={2}>
                                                                 <Button type="dashed" shape="circle" icon="plus"/>
                                                             </Col>
                                                         </Row>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/components/AddTagModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/components/AddTagModal.js
new file mode 100644
index 0000000000..c0644ec149
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/components/AddTagModal.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { Upload, Icon, Modal} from 'antd';
+
+
+class AddTagModal extends React.Component {
+    state = {
+        previewVisible: false,
+        previewImage: '',
+        fileList: [],
+    };
+
+    handleCancel = () => this.setState({ previewVisible: false });
+
+    handlePreview = (file) => {
+        this.setState({
+            previewImage: file.url || file.thumbUrl,
+            previewVisible: true,
+        });
+    };
+
+    handleChange = ({ fileList }) => this.setState({ fileList });
+
+    render() {
+        const { previewVisible, previewImage, fileList } = this.state;
+        const uploadButton = (
+            <div>
+                <Icon type="plus" />
+                <div className="ant-upload-text">Upload</div>
+            </div>
+        );
+        return (
+            <div className="clearfix">
+                <Upload
+                    action="//jsonplaceholder.typicode.com/posts/"
+                    listType="picture-card"
+                    fileList={fileList}
+                    onPreview={this.handlePreview}
+                    onChange={this.handleChange}
+                >
+                    {fileList.length >= 3 ? null : uploadButton}
+                </Upload>
+                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
+                </Modal>
+            </div>
+        );
+    }
+}
+export default AddTagModal;
\ No newline at end of file

From eeb4d961d08bdd3c5280a338f60a776ec1e24eb4 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Mon, 22 Apr 2019 16:55:42 +0530
Subject: [PATCH 6/7] Created folder structure for redux

---
 .../react-app/package.json                           |  1 +
 .../react-app/src/index.js                           | 12 ++++++++----
 .../react-app/src/js/constants/action-types.js       |  1 +
 .../react-app/src/js/reducers/index.js               |  9 +++++++++
 .../react-app/src/js/store/index.js                  |  4 ++++
 5 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/action-types.js
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/store/index.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
index a5e7d491a9..5b15c2b6c9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
@@ -49,6 +49,7 @@
     "react": "^15.6.2",
     "react-dom": "^15.6.2",
     "react-intl": "^2.4.0",
+    "react-redux": "^7.0.2",
     "redux": "^4.0.1",
     "sass-loader": "^6.0.7",
     "style-loader": "^0.18.2",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js
index 166528a210..734182829b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js
@@ -7,7 +7,8 @@ import Dashboard from "./pages/dashboard/Dashboard";
 import Apps from "./pages/dashboard/apps/Apps";
 import AddNewApp from "./pages/dashboard/add-new-app/AddNewApp";
 import './index.css';
-
+import store from "./js/store/index";
+import {Provider} from "react-redux";
 
 
 const routes = [
@@ -29,11 +30,14 @@ const routes = [
             }
         ]
     }
-]
-
+];
 
 
-ReactDOM.render( <App routes={routes}/>, document.getElementById('root'));
+ReactDOM.render(
+    <Provider store={store}>
+        <App routes={routes}/>
+    </Provider>,
+    document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/action-types.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/action-types.js
new file mode 100644
index 0000000000..2cd535bbc2
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/action-types.js
@@ -0,0 +1 @@
+export const LOGIN = "LOGIN";
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js
new file mode 100644
index 0000000000..08eb66ed6d
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js
@@ -0,0 +1,9 @@
+const initialState = {
+    
+};
+
+function rootReducer(state = initialState, action) {
+    return state;
+}
+
+export default rootReducer;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/store/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/store/index.js
new file mode 100644
index 0000000000..7209a4b021
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/store/index.js
@@ -0,0 +1,4 @@
+import { createStore } from "redux";
+import rootReducer from "../reducers/index";
+const store = createStore(rootReducer);
+export default store;
\ No newline at end of file

From 6dbcb37ea24b4d7d4c0806736fee71c36d4a3032 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Mon, 22 Apr 2019 22:58:47 +0530
Subject: [PATCH 7/7] Send request from login page

---
 .../react-app/package.json                    |  1 +
 .../react-app/src/pages/Login.js              | 31 +++++++++++++------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
index 5b15c2b6c9..3aa97aca33 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "acorn": "^6.1.1",
     "antd": "^3.15.0",
+    "axios": "^0.18.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-highlight-words": "^0.16.0",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js
index f4faa2a348..d6b1b3fa15 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js
@@ -1,6 +1,8 @@
 import React from "react";
 import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox,} from 'antd';
 import styles from './Login.less';
+import axios from 'axios';
+
 const {Title} = Typography;
 
 class Login extends React.Component {
@@ -38,26 +40,36 @@ class NormalLoginForm extends React.Component {
         this.props.form.validateFields((err, values) => {
             if (!err) {
                 console.log('Received values of form: ', values);
+                let data = "username="+values.username+"&password="+values.password+"&platform=publisher";
+                axios.post('https://localhost:9443/api/application-mgt-handler/v1.0/login', data
+                    ).then(res => {
+                        console.log(res);
+                        console.log(res.data);
+                    })
             }
+
         });
-    }
+    };
 
     render() {
-        const { getFieldDecorator } = this.props.form;
+        const {getFieldDecorator} = this.props.form;
         return (
             <Form onSubmit={this.handleSubmit} className="login-form">
                 <Form.Item>
-                    {getFieldDecorator('userName', {
-                        rules: [{ required: true, message: 'Please input your username!' }],
+                    {getFieldDecorator('username', {
+                        rules: [{required: true, message: 'Please input your username!'}],
                     })(
-                        <Input style={{height: 32}} prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
+                        <Input style={{height: 32}} prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
+                               placeholder="Username"/>
                     )}
                 </Form.Item>
                 <Form.Item>
                     {getFieldDecorator('password', {
-                        rules: [{ required: true, message: 'Please input your Password!' }],
+                        rules: [{required: true, message: 'Please input your Password!'}],
                     })(
-                        <Input style={{height: 32}} className={styles.input} prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
+                        <Input style={{height: 32}} className={styles.input}
+                               prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password"
+                               placeholder="Password"/>
                     )}
                 </Form.Item>
                 <Form.Item>
@@ -65,19 +77,18 @@ class NormalLoginForm extends React.Component {
                         valuePropName: 'checked',
                         initialValue: true,
                     })(
-                        <Checkbox>Remember me</Checkbox>
+                        <Checkbox>Remember me....</Checkbox>
                     )}
                     <a className="login-form-forgot" href="">Forgot password</a>
                     <Button block type="primary" htmlType="submit" className="login-form-button">
                         Log in
                     </Button>
-                    Or <a href="">register now!</a>
                 </Form.Item>
             </Form>
         );
     }
 }
 
-const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);
+const WrappedNormalLoginForm = Form.create({name: 'normal_login'})(NormalLoginForm);
 
 export default Login;