From 5ba211191f06eaab21debae2f2861d9795b83ab1 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Fri, 22 Sep 2017 01:11:34 +0530
Subject: [PATCH] Release and Edit application components.

---
 .../AppPublisherBase/BaseLayout.jsx           |  36 ++--
 .../Application/Create/ApplicationCreate.jsx  |  12 +-
 .../Application/Create/CreateSteps/Step1.jsx  |  20 +-
 .../Application/Create/CreateSteps/Step2.jsx  |   6 +-
 .../Application/Create/CreateSteps/Step4.jsx  |  39 ++--
 .../Edit/Base/ApplicationEditBaseLayout.jsx   |  74 ++------
 .../Application/Edit/Base/baseLayout.css      |  17 ++
 .../Application/Edit/GeneralInfo.jsx          | 175 +++++++++++++++++-
 .../generalInfo.css}                          |  15 +-
 .../Release/Create/CreateRelease.jsx          | 173 +++++++++++++++++
 .../Release/Create/UploadPackage.jsx          |  95 ++++++++++
 .../Release/Create/createRelease.css          |  38 ++++
 .../Release/ReleaseMgtBase/ReleaseManager.jsx | 104 +++++++----
 .../Release/ReleaseMgtBase/release-mgt.css    |  18 ++
 .../main/resources/publisher/src/index.css    |  28 +++
 15 files changed, 691 insertions(+), 159 deletions(-)
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/{Release/ReleaseContent.jsx => Edit/generalInfo.css} (85%)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/CreateRelease.jsx
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/UploadPackage.jsx
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/createRelease.css

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 203f9aafac2..dcb1e25d95c 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
@@ -42,7 +42,6 @@ class BaseLayout extends Component {
             user: 'Admin',
             openModal: false
         };
-        this.scriptId = "basic-layout";
         this.logout = this.logout.bind(this);
     }
 
@@ -83,31 +82,30 @@ class BaseLayout extends Component {
                     </div>
                     <div id="search-box">
                         <InputGroup>
-                            <Input id="search"
-                                   name="search"
-                                   placeholder={'Search for Applications'}
-                                   onChange={(event) => console.log(event.target.value)}
+                            <Input
+                                id="search"
+                                name="search"
+                                placeholder={'Search for Applications'}
+                                onChange={(event) => console.log(event.target.value)}
                             />
                         </InputGroup>
                     </div>
-                </div>
-                <div id="add-btn-container">
-                    <Button id="add-btn"
+                    <div id="add-btn-container">
+                        <Button
+                            id="add-btn"
                             onClick={this.handleApplicationCreateClick.bind(this)}
-                    >
-                        <h3>
-                            <strong>+</strong>
-                        </h3>
-                    </Button>
+                        >
+                            <h3>
+                                <strong>+</strong>
+                            </h3>
+                        </Button>
+                    </div>
                 </div>
-                <div className="application-content"
-                     style={this.state.style}
-                >
+
+                <div id="application-content" style={this.state.style}>
                     {this.props.children}
                 </div>
-                <ApplicationCreate
-                    open={this.state.openModal}
-                />
+                <ApplicationCreate open={this.state.openModal}/>
             </div>
         );
     }
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 835e3ab3999..38b5d261029 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
@@ -70,7 +70,6 @@ class ApplicationCreate extends Component {
         this.setState({stepIndex: nextStep}, console.log(this.state.stepIndex));
     }
 
-
     /**
      * Handles next button click event.
      * */
@@ -220,13 +219,12 @@ class ApplicationCreate extends Component {
                         {this.getStepContent(this.state.stepIndex)}
                     </ModalBody>
                     <ModalFooter>
-                        {this.state.stepIndex === 0?
-                            <div/> : <Button color="primary" onClick={this.handlePrev}>Back</Button>}
+                        {this.state.stepIndex === 0? <div/> :
+                            <Button color="primary" onClick={this.handlePrev}>Back</Button>}
                         <Button color="secondary" onClick={this.close}>Cancel</Button>
-                        {this.state.finished?
-                            <Button color="primary" onClick={this.handleSubmit}>Finish</Button>
-                            : <Button color="primary" onClick={this.handleNext}>Continue</Button> }
-
+                        {this.state.finished ?
+                            <Button color="primary" onClick={this.handleSubmit}>Finish</Button> :
+                            <Button color="primary" onClick={this.handleNext}>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 4997bc0ac74..b85054689a4 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
@@ -125,18 +125,30 @@ class Step1 extends Component {
 
                 <FormGroup>
                     <Label for="store">Store Type</Label>
-                    <Input type="select" name="store" id="store" className="input-custom"
-                           onChange={this.onChangeStore.bind(this)}>
+                    <Input
+                        type="select"
+                        name="store"
+                        id="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" id="store" onChange={this.onChangePlatform.bind(this)}>
+                    <Input
+                        type="select"
+                        name="store"
+                        id="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 value={platform.identifier}>
+                                    {platform.name}
+                                </option>
                             )
                         }) : <option>No Platforms</option>}
                     </Input>
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 6238e38256b..50a679e6221 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
@@ -259,7 +259,8 @@ class Step2 extends Component {
                         <FormGroup>
                             <Label for="app-title">Title*</Label>
                             <Input
-                                required type="text"
+                                required
+                                type="text"
                                 name="appName"
                                 id="app-title"
                             />
@@ -267,7 +268,8 @@ class Step2 extends Component {
                         <FormGroup>
                             <Label for="app-description">Description*</Label>
                             <Input
-                                required type="textarea"
+                                required
+                                type="textarea"
                                 name="appDescription"
                                 id="app-description"
                             />
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
index 7b75a108f40..05982af2d68 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {Collapse, FormGroup, Input, Label} from 'reactstrap';
+import {Collapse, FormGroup, Input, Label, FormText} from 'reactstrap';
 import Switch from '../../../UIComponents/Switch/Switch'
 
 /**
@@ -88,32 +88,42 @@ class Step4 extends Component {
                     <FormGroup>
                         <div id="app-release-switch-content">
                             <div id="app-release-switch-label">
-                                <Label for="app-release-switch"><strong>Add Release to Application</strong></Label>
+                                <Label for="app-release-switch">
+                                    <strong>
+                                        Add Release to Application
+                                    </strong>
+                                </Label>
                             </div>
                             <div id="app-release-switch-switch">
-                                <Switch id="app-release-switch" onChange={this.handleToggle.bind(this)}/>
+                                <Switch
+                                    id="app-release-switch"
+                                    onChange={this.handleToggle.bind(this)}
+                                />
                             </div>
                         </div>
                     </FormGroup>
                     <br/>
                     <div>
-                            <span style={{color: '#BBBBBB', width: '100%', justify: 'left'}}>
+                            <FormText color="muted">
                                 <i>Info: </i>
                                 Enabling this will create a release for the current Application.
                                 To upload the Application, please visit to the Release management section of
                                 Application Edit View.
-                            </span>
+                            </FormText>
                     </div>
                     {/*If toggle is true, the release form will be shown.*/}
                     <Collapse isOpen={this.state.showForm}>
                         <FormGroup>
                             <Label for="release-channel">Release Channel</Label>
-                            <Input id="input-custom" type="select" mid="release-channel" style={{
-                                width: '200px',
-                                border: 'none',
-                                borderRadius: '0',
-                                borderBottom: 'solid 1px #BDBDBD'
-                            }}>
+                            <Input
+                                type="select"
+                                id="release-channel"
+                                style={{
+                                    width: '200px',
+                                    border: 'none',
+                                    borderRadius: '0',
+                                    borderBottom: 'solid 1px #BDBDBD'
+                                }}>
                                 <option>GA</option>
                                 <option>Alpha</option>
                                 <option>Beta</option>
@@ -121,7 +131,12 @@ class Step4 extends Component {
                         </FormGroup>
                         <FormGroup>
                             <Label for="version">Version*</Label>
-                            <Input type="text" id="version input-custom" placeholder="v1.0" required/>
+                            <Input
+                                type="text"
+                                id="version input-custom"
+                                placeholder="v1.0"
+                                required
+                            />
                         </FormGroup>
                     </Collapse>
                 </div>
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 f96a9c82745..1962659fbf0 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
@@ -19,7 +19,8 @@
 import React, {Component} from 'react';
 import './baseLayout.css';
 import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
-import {Button, Col, Row} from "reactstrap";
+import {Col, Row} from "reactstrap";
+import GeneralInfo from "../GeneralInfo";
 
 class ApplicationEdit extends Component {
 
@@ -57,14 +58,12 @@ class ApplicationEdit extends Component {
                 return "No Content";
             }
         }
-
     }
 
     getTabContent(tab) {
-
         switch (tab) {
             case 1: {
-                return ("Step 1")
+                return <GeneralInfo/>
             }
             case 2: {
                 return <ReleaseManager/>
@@ -73,14 +72,12 @@ class ApplicationEdit extends Component {
                 return ("Step3")
             }
         }
-
     }
 
     render() {
         console.log(this.state);
         return (
             <div id="application-edit-base">
-
                 <Row id="application-edit-header">
                     <Col>Application Name</Col>
                 </Row>
@@ -101,66 +98,19 @@ class ApplicationEdit extends Component {
                     </Col>
                     <Col xs="9">
                         <div id="app-edit-content">
-                        <Row>
-                            <Col xs="12">
-                                <div id="application-edit-outer-content">
-                                    {/* Application edit content */}
-                                    <div id="application-edit-content">
-                                        {this.getTabContent(this.state.activeTab)}
+                            <Row>
+                                <Col xs="12">
+                                    <div id="application-edit-outer-content">
+                                        {/* Application edit content */}
+                                        <div id="application-edit-content">
+                                            {this.getTabContent(this.state.activeTab)}
+                                        </div>
                                     </div>
-                                </div>
-                            </Col>
-                        </Row>
-                        <Row >
-                            <Col xs="3 offset-9">
-                                <Button>Save</Button>
-                            </Col>
-                        </Row>
+                                </Col>
+                            </Row>
                         </div>
                     </Col>
                 </Row>
-
-                {/*<Row>*/}
-                {/*/!* Contains the application Name and Save button*!/*/}
-                {/*<div id="application-edit-header">*/}
-                {/*<Col>*/}
-                {/*<span className="application-header-text">*/}
-                {/*Header*/}
-                {/*</span>*/}
-                {/*</Col>*/}
-                {/*<Col>*/}
-                {/*<Button id="app-save-btn" className="save-btn">Save</Button>*/}
-                {/*</Col>*/}
-                {/*</div>*/}
-                {/*</Row>*/}
-                {/*<div id="application-edit-main-container">*/}
-                {/*<Row>*/}
-                {/*<Col xs="6" sm="4">*/}
-
-                {/*/!* Contains side bar items, General, App Release, Package Manager *!/*/}
-                {/*<div className="tab">*/}
-                {/*<button className={this.state.general} value={1} onClick={this.handleClick.bind(this)}>*/}
-                {/*General*/}
-                {/*</button>*/}
-                {/*<button className={this.state.release} value={2} onClick={this.handleClick.bind(this)}>*/}
-                {/*App*/}
-                {/*Releases*/}
-                {/*</button>*/}
-                {/*<button className={this.state.pkgmgt} value={3} onClick={this.handleClick.bind(this)}>*/}
-                {/*Package Manager*/}
-                {/*</button>*/}
-                {/*</div>*/}
-                {/*</Col>*/}
-                {/*<Col xs="6" sm="4">*/}
-                {/*<div id="application-edit-outer-content">*/}
-                {/*/!* Application edit content *!/*/}
-                {/*<div id="application-edit-content">*/}
-                {/*{this.getTabContent(this.state.activeTab)}*/}
-                {/*</div>*/}
-                {/*</div>*/}
-                {/*</Col>*/}
-                {/*</Row>*/}
-                {/*</div>*/}
             </div>
         )
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css
index 5e6c1e9af3b..3ee209b3e53 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css
@@ -1,3 +1,20 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
 
 #application-edit-base {
     width: 70%;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GeneralInfo.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GeneralInfo.jsx
index d1cda615269..13c1b1a9ab6 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GeneralInfo.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GeneralInfo.jsx
@@ -18,26 +18,187 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-
+import {FormGroup, Input, Label, Badge, Button} from 'reactstrap';
+import Dropzone from 'react-dropzone';
+import './generalInfo.css';
 
 class GeneralInfo extends Component {
 
     constructor() {
         super();
+        this.state = {
+            defValue: "",
+            tags: [],
+            screenshots: [],
+            icon: [],
+            banner: []
+        }
     }
 
-
     render() {
         return(
-            <div>
+            <div className="app-edit-general-info">
+                <form>
+                    <FormGroup>
+                        <Label for="app-title">Title*</Label>
+                        <Input
+                            required
+                            type="text"
+                            name="appName"
+                            id="app-title"
+                        />
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-title">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"
+                        >
+                            <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>
+                        </Input>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-tags">Tags*</Label>
+                        <Input
+                            required
+                            type="text"
+                            value={this.state.defValue}
+                            name="app-tags"
+                            id="app-tags"
+                            // onChange={this.handleTagChange.bind(this)}
+                            // onKeyPress={this.addTags.bind(this)}
+                        />
+                        <div id="batch-content">
+                            {this.state.tags.map(tag => {
+                                    return (
+                                        <Badge
+                                            style={{margin: '0 2px 0 2px'}}
+                                            value={tag.value}
+                                            // onClick={this.handleRequestDelete.bind(this)}
+                                        >
+                                            {tag.value}
+                                        </Badge>
+                                    )
+                                }
+                            )}
+                        </div>
+                    </FormGroup>
+                    <div>
+                        <FormGroup>
+                            <Label for="app-screenshots">Screenshots*</Label>
+                            <span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
+                            <div id="screenshot-container">
+                                {this.state.screenshots.map((tile) => (
+                                    <button id="img-btn-screenshot" style={{height: '210px', width: '410px'}}
+                                            onMouseEnter={() => {
+                                                console.log("Mouse Entered")
+                                            }}>
+                                        {console.log(tile[0].preview)}
+                                        <img style={{height: '200px', width: '400px'}} src={tile[0].preview}/>
+                                    </button>
+                                ))}
+                                {this.state.screenshots.length < 3 ?
+                                    <Dropzone
+                                        className="applicationCreateScreenshotDropZone"
+                                        accept="image/jpeg, image/png"
+                                        onDrop={(screenshots, rejected) => {
+                                            let tmpScreenshots = this.state.screenshots;
+                                            tmpScreenshots.push(screenshots);
+                                            console.log(screenshots);
+                                            this.setState({
+                                                screenshots: tmpScreenshots
+                                            });
+                                        }}
+                                    >
+                                        <p className="applicationCreateScreenshotp">+</p>
+                                    </Dropzone> : <div/>}
+                            </div>
+                        </FormGroup>
+                    </div>
+                    <div style={{display: 'flex'}}>
+                        <div style={{float: 'left', marginRight: '15px'}}>
+                            <FormGroup>
+                                <Label for="app-icon">Icon*</Label>
+                                <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
+                                <div id="app-icon-container">
+                                    {this.state.icon.map((tile) => (
+                                        <button onMouseEnter={() => {
+                                            console.log("Mouse Entered")
+                                        }}>
+                                            <img style={{height: '200px', width: '200px'}} src={tile.preview}/>
+                                        </button>
+                                    ))}
+                                </div>
 
+                                {this.state.icon.length === 0 ?
+                                    <Dropzone
+                                        className="applicationCreateIconDropZone"
+                                        accept="image/jpeg, image/png"
+                                        onDrop={(icon, rejected) => {
+                                            this.setState({icon, rejected});
+                                        }}
+                                    >
+                                        <p className="applicationCreateIconp">+</p>
+                                    </Dropzone> : <div/>}
+                            </FormGroup>
+                        </div>
+                        <div style={{marginLeft: '15px'}}>
+                            <FormGroup>
+                                <Label for="app-banner">Banner*</Label>
+                                <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
+                                <div id="app-banner-container">
+                                    {this.state.banner.map((tile) => (
+                                        <button onMouseEnter={() => {
+                                            console.log("Mouse Entered")
+                                        }}>
+                                            <img style={{height: '200px', width: '400px'}} src={tile.preview}/>
+                                        </button>
+                                    ))}
+                                    {this.state.banner.length === 0 ?
+                                        <Dropzone
+                                            className="applicationCreateBannerDropZone"
+                                            accept="image/jpeg, image/png"
+                                            onDrop={(banner, rejected) => {
+                                                this.setState({banner, rejected});
+                                            }}
+                                        >
+                                            <p className="applicationCreateBannerp">+</p>
+                                        </Dropzone> : <div/>
+                                    }
+                                </div>
+                            </FormGroup>
+                        </div>
+                    </div>
+                    <div className="save-info">
+                        <Button>Save</Button>
+                    </div>
+                </form>
             </div>
         )
-
-
     }
-
-
 }
 
 export default GeneralInfo;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseContent.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/generalInfo.css
similarity index 85%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseContent.jsx
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/generalInfo.css
index 1d22a374454..fb0471eddc0 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseContent.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/generalInfo.css
@@ -16,14 +16,11 @@
  * under the License.
  */
 
-import React, {Component} from 'react';
-
-class ReleaseContent extends Component {
-
-
-
-
+.app-edit-general-info {
+    margin-top: 20px;
 }
 
-
-export default ReleaseContent;
+.save-info {
+    float: right;
+    margin-bottom: 10px;
+}
\ 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/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
new file mode 100644
index 00000000000..b737680c920
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/CreateRelease.jsx
@@ -0,0 +1,173 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import './createRelease.css';
+import {Button, FormGroup, FormText, Input, Label, Row} from "reactstrap";
+import UploadPackage from "./UploadPackage";
+
+class CreateRelease extends Component {
+    constructor() {
+        super();
+        this.onTestMethodChange = this.onTestMethodChange.bind(this);
+        this.showUploadArtifacts = this.showUploadArtifacts.bind(this);
+        this.handleBack = this.handleBack.bind(this);
+        this.backToRelease = this.backToRelease.bind(this);
+        this.state = {
+            open: true,
+            hiddenMain: false
+        }
+    }
+
+    onTestMethodChange(event) {
+        let type = event.target.value;
+        if (type !== 'open') {
+            this.setState({open: false})
+        } else {
+            this.setState({open: true})
+        }
+    }
+
+    showUploadArtifacts() {
+        this.setState({hiddenMain: true})
+    }
+
+    handleBack() {
+        this.props.handleBack();
+    }
+
+    backToRelease() {
+        this.setState({hiddenMain: false});
+    }
+
+    render() {
+        const {channel} = this.props;
+        console.log(channel);
+        return (
+            <div>
+
+                {this.state.hiddenMain ?
+                    <div>
+                        <UploadPackage
+                            backToRelease={this.backToRelease}
+                            selectedChannel={channel}
+                        />
+                    </div> :
+
+                    <div>
+                        <Row>
+                            <div className="release-header">
+                                <a onClick={this.handleBack}>{"<-"}</a>
+                                <span id="create-release-header">
+                            <strong>{channel} Release</strong>
+                        </span>
+                            </div>
+                        </Row>
+                        <Row>
+                            <div className="release-create">
+                                <div>
+                            <span>
+                                <strong>Create Release</strong>
+                            </span>
+                                    <p>
+                                        {channel === 'Production' ? "" :
+                                            "You could create " + channel + " release for your application and let " +
+                                            "the test users to test the application for it's stability."}
+                                    </p>
+                                </div>
+                                <div>
+                                    <Button id="create-release-btn" onClick={this.showUploadArtifacts}>Create a {channel} Release</Button>
+                                </div>
+                            </div>
+                        </Row>
+                        {channel !== 'Production' ?
+                            <Row>
+                                <div>
+                            <span>
+                                <strong>Manage Test Method</strong>
+                            </span>
+                                    <p>
+                                        This section allows you to change the test method and the users who would be
+                                        able to test your application.
+                                    </p>
+                                    <div>
+                                        <form>
+                                            <FormGroup>
+                                                <Label for="test-method">Test Method*</Label>
+                                                <Input
+                                                    required
+                                                    type="select"
+                                                    name="testMethod"
+                                                    id="test-method"
+                                                    onChange={this.onTestMethodChange}
+                                                >
+                                                    <option value="open">Open {channel}</option>
+                                                    <option value="closed">Closed {channel}</option>
+                                                </Input>
+                                            </FormGroup>
+                                            {!this.state.open ? (
+                                                <FormGroup>
+                                                    <Label for="user-list">Users List*</Label>
+                                                    <Input
+                                                        required
+                                                        name="userList"
+                                                        id="user-list"
+                                                        type="text"
+                                                    />
+                                                    <FormText color="muted">
+                                                        Provide a comma separated list of email
+                                                        addresses.
+                                                    </FormText>
+                                                </FormGroup>
+                                            ) : <div/>}
+                                            <FormGroup>
+                                                <Label for="app-title">Feedback Method*</Label>
+                                                <Input
+                                                    required
+                                                    name="appName"
+                                                    id="app-title"
+                                                />
+                                                <FormText color="muted">
+                                                    Provide an Email address or a URL for your users to provide
+                                                    feedback on the application.
+                                                </FormText>
+                                            </FormGroup>
+                                            <div>
+                                                <Button className="form-btn">Save</Button>
+                                            </div>
+                                        </form>
+                                    </div>
+                                </div>
+                            </Row> :
+                            <div/>
+                        }
+                    </div>
+                }
+
+            </div>
+        );
+    }
+}
+
+CreateRelease.propTypes = {
+    channel: PropTypes.string,
+    handleBack: PropTypes.func
+};
+
+export default CreateRelease;
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
new file mode 100644
index 00000000000..8eb017fa599
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/UploadPackage.jsx
@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import './createRelease.css';
+import {Button, Col, FormGroup, Input, Label, Row} from "reactstrap";
+
+class UploadPackage extends Component {
+
+    constructor() {
+        super();
+        this.handleBack = this.handleBack.bind(this)
+    }
+
+    handleBack() {
+        this.props.backToRelease();
+    }
+
+    render() {
+        const {selectedChannel} = this.props;
+        return (
+            <div>
+                <Row>
+                    <div className="release-header">
+                        <a onClick={this.handleBack}>{"<-"}</a>
+                        <span id="create-release-header">
+                            <strong>New Release for {selectedChannel}</strong>
+                        </span>
+                    </div>
+                </Row>
+                <Row>
+                    <div className="release-header">
+                        <span id="create-release-header">
+                            <strong>Upload Package File</strong>
+                        </span>
+                    </div>
+                </Row>
+                <Row>
+                    <Col xs="3">
+                        <Button>Upload</Button>
+                    </Col>
+                    <Col xs="3">
+                        <Button>Select from package library</Button>
+                    </Col>
+                </Row>
+                <Row>
+                    <div className="release-detail-content">
+                        <form>
+                            <FormGroup>
+                                <Label>Release Name *</Label>
+                                <Input
+                                    required
+                                    type="text"
+                                />
+                            </FormGroup>
+                            <FormGroup>
+                                <Label>Release Notes *</Label>
+                                <Input
+                                    required
+                                    type="textarea"
+                                />
+                            </FormGroup>
+                            <div className="form-btn">
+                                <Button>Send for Review</Button>
+                            </div>
+                        </form>
+                    </div>
+                </Row>
+            </div>
+        );
+    }
+}
+
+UploadPackage.protoTypes = {
+    backToRelease: PropTypes.func,
+    channel: PropTypes.string
+};
+
+export default UploadPackage;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/createRelease.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/createRelease.css
new file mode 100644
index 00000000000..1cd66945976
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/createRelease.css
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.release-header {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.release-create {
+    height: 150px;
+    margin-bottom: 20px;
+}
+
+.release-detail-content {
+    width: 100%;
+    margin-top: 20%;
+    height: 300px;
+}
+
+.form-btn {
+    float: right;
+    margin-bottom: 10px;
+}
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 a580d75edb5..0501f6b2d60 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,15 +16,32 @@
  * under the License.
  */
 
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import './release-mgt.css';
 import {Button, Col, Row} from "reactstrap";
+import CreateRelease from "../Create/CreateRelease";
 
 class ReleaseManager extends Component {
 
     constructor() {
         super();
         this.getNoReleaseContent = this.getNoReleaseContent.bind(this);
+        this.createRelease = this.createRelease.bind(this);
+        this.handleBackPress = this.handleBackPress.bind(this);
+        this.state = {
+            createRelease: false,
+            onGoing: ""
+        }
+    }
+
+    createRelease(event) {
+        event.preventDefault();
+        this.setState({createRelease: true, onGoing: event.target.value})
+    }
+
+    handleBackPress() {
+        this.setState({createRelease: false});
     }
 
     /**
@@ -40,7 +57,14 @@ class ReleaseManager extends Component {
                 </Row>
                 <Row>
                     <Col sm="12" md={{size: 8, offset: 5}}>
-                        <Button className="button-add" id={release.toLowerCase()}>Create a Release</Button>
+                        <Button
+                            className="button-add"
+                            id={release.toLowerCase()}
+                            value={release}
+                            onClick={this.createRelease}
+                        >
+                            Create a Release
+                        </Button>
                     </Col>
                 </Row>
             </div>
@@ -49,45 +73,51 @@ class ReleaseManager extends Component {
 
     render() {
         return (
-            <div id="release-mgt-content">
-                <Row>
-                    <Col sm="12">
-                        <div className="release" id="production">
-                            <span>Production Releases</span>
-                            <div className="release-content">
-                                <div className="release-inner">
-
-                                    {this.getNoReleaseContent("Production")}
-
+            <div>
+                {this.state.createRelease ?
+                    <CreateRelease
+                        channel={this.state.onGoing}
+                        handleBack={this.handleBackPress}
+                    /> :
+                    <div id="release-mgt-content">
+                        <Row>
+                            <Col sm="12">
+                                <div className="release" id="production">
+                                    <span>Production Releases</span>
+                                    <div className="release-content">
+                                        <div className="release-inner">
+                                            {this.getNoReleaseContent("Production")}
+                                        </div>
+                                    </div>
                                 </div>
-                            </div>
-                        </div>
-                    </Col>
-                </Row>
-                <Row>
-                    <Col sm="12">
-                        <div className="release" id="beta">
-                            <span>Beta Releases</span>
-                            <div className="release-content">
-                                <div className="release-inner">
-                                    {this.getNoReleaseContent("Beta")}
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col sm="12">
+                                <div className="release" id="beta">
+                                    <span>Beta Releases</span>
+                                    <div className="release-content">
+                                        <div className="release-inner">
+                                            {this.getNoReleaseContent("Beta")}
+                                        </div>
+                                    </div>
                                 </div>
-                            </div>
-                        </div>
-                    </Col>
-                </Row>
-                <Row>
-                    <Col sm="12">
-                        <div className="release" id="alpha">
-                            <span>Alpha Releases</span>
-                            <div className="release-content">
-                                <div className="release-inner">
-                                    {this.getNoReleaseContent("Alpha")}
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col sm="12">
+                                <div className="release" id="alpha">
+                                    <span>Alpha Releases</span>
+                                    <div className="release-content">
+                                        <div className="release-inner">
+                                            {this.getNoReleaseContent("Alpha")}
+                                        </div>
+                                    </div>
                                 </div>
-                            </div>
-                        </div>
-                    </Col>
-                </Row>
+                            </Col>
+                        </Row>
+                    </div>
+                }
             </div>
         )
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/release-mgt.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/release-mgt.css
index d72a8ea81c9..7fd6831f245 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/release-mgt.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/release-mgt.css
@@ -1,3 +1,21 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
 .release-content {
     height: 180px;
     width: 95%;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css
index c5776f73188..32f3c298a8e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css
@@ -1,3 +1,21 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
 body {
     width: 100%;
     font-family: sans-serif;
@@ -32,6 +50,14 @@ body {
     width: 100%;
     background-color: #BDBDBD;
     border-bottom: solid 2px;
+    position: fixed; /* Set the navbar to fixed position */
+    top: 0; /* Position the navbar at the top of the page */
+    z-index: 2;
+}
+
+#application-content {
+    max-height: 800px;
+    margin-top: 150px;
 }
 
 #add-btn {
@@ -187,3 +213,5 @@ body {
     color: #818181;
 }
 
+
+