From 99af739f15e45ce46fb0b0c17cb843512f89944a Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Sun, 8 Oct 2017 02:08:05 +0530
Subject: [PATCH] Stepper component created and added it to the application
 creation modal.

---
 .../publisher/public/locales/en.json          |   3 +-
 .../public/themes/default/default-theme.css   |  53 ++---
 .../Application/Create/ApplicationCreate.jsx  |  67 ++----
 .../Application/Create/CreateSteps/Step1.jsx  | 215 +++++++++---------
 .../Application/Create/CreateSteps/Step2.jsx  |  59 ++---
 .../Application/Create/CreateSteps/Step3.jsx  | 146 ++++++------
 .../Application/Create/CreateSteps/Step4.jsx  |   6 +-
 .../UIComponents/StepprHeader/Step.jsx        |  74 ++++++
 .../UIComponents/StepprHeader/Stepper.jsx     |  52 +++++
 .../UIComponents/StepprHeader/stepper.css     |  97 ++++++++
 10 files changed, 490 insertions(+), 282 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/stepper.css

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json
index 3bc7a828d77..99cad4fbb59 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json
@@ -57,5 +57,6 @@
   "Yes" : "Yes",
   "No" : "No",
   "No.Platform.Tags" : "No Platform Tags",
-  "Create.Platform" : "Create Platform"
+  "Create.Platform" : "Create Platform",
+  "Optional": "Optional"
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
index a1e6296243a..ded54adbd79 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
@@ -335,24 +335,6 @@ body {
     padding: 24px;
 }
 
-.stepper-header {
-    width: 100%;
-    color: #BaBaBa;
-    padding-bottom: 5px;
-    margin-bottom: 10px;
-}
-
-#application-tag {
-    margin: 0 2px 0 2px;
-    background-color: blue;
-    height: 20px;
-}
-
-#application-tag:hover {
-    cursor: pointer;
-    background-color: #007bff;
-}
-
 .platform-link-placeholder {
     color: #888888;
     float: right;
@@ -484,26 +466,29 @@ body {
 
 #modal-body-content {
     max-height: 700px;
+    padding-left: 24px;
     overflow-y: auto;
 }
 
-.step-index {
-    height: 20px;
-    width: 20px;
-    background-color: #2196F3;
-    border-radius: 50%;
-}
-
 #img-btn-screenshot {
     margin: 0 5px 0 5px;
 }
 
 #app-create-modal {
     max-width: 700px;
-    overflow-x: auto;
     border-radius: 0% !important;
 }
 
+.app-create-modal-header {
+    background-color: #4353bd;
+    color: white;
+    padding: 24px !important;
+}
+
+.app-create-modal-content {
+    padding: 0 !important;
+}
+
 #store {
     border: none;
     border-bottom: solid #BDBDBD 1px;
@@ -853,3 +838,19 @@ div.tab button.active {
     font-weight: 500;
     color: #9e9e9e;
 }
+
+/**
+    If you need to change the color of active steps in stepper,
+    uncomment the following and set the background color and font color as needed.
+*/
+/*
+.stepper-active-index {
+    background-color: #0a6eff !important;
+    color: white !important;
+}
+
+.stepper-passed-index {
+    background-color: #0a6eff !important;
+    color: green !important;
+}
+*/
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 4d03280ff19..ffcee5be92d 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
@@ -21,8 +21,9 @@ import {withRouter} from 'react-router-dom';
 import AuthHandler from "../../../api/authHandler";
 import {Step1, Step2, Step3, Step4} from './CreateSteps/index';
 import ApplicationMgtApi from '../../../api/applicationMgtApi';
-import {Col, Modal, ModalBody, ModalHeader, Row} from 'reactstrap';
+import {Modal, ModalHeader} from 'reactstrap';
 import {FormattedMessage} from 'react-intl';
+import Stepper from "../../UIComponents/StepprHeader/Stepper";
 
 
 /**
@@ -148,6 +149,18 @@ class ApplicationCreate extends Component {
         }
     };
 
+    /**
+     * Defines the application creation stepper.
+     * */
+    getStepperHeaders() {
+        return [
+            {index: 1, text: <FormattedMessage id="General.Info" defaultMessage="General.Info"/>},
+            {index: 2, text: <FormattedMessage id="Select.Platform" defaultMessage="Select.Platform"/>},
+            {index: 3, text: <FormattedMessage id="Screenshots" defaultMessage="Screenshots"/>},
+            {index: 4, text: <FormattedMessage id="Release" defaultMessage="Release"/>, optional: true}
+        ];
+    }
+
     /**
      * Remove the last data point
      * */
@@ -239,51 +252,17 @@ class ApplicationCreate extends Component {
             <div id="create-application-modal">
                 <Modal isOpen={this.state.open} toggle={this.toggle} id="app-create-modal"
                        backdrop={'static'}>
-                    <ModalHeader toggle={this.toggle}>
+                    <ModalHeader toggle={this.toggle} className="app-create-modal-header">
                         <FormattedMessage id="Create.Application" defaultMessage="Create Application"/>
                     </ModalHeader>
-                    <ModalBody id="modal-body-content">
-                        <Row>
-                            <Col>
-                                <div className="stepper-header">
-                                    <Row>
-                                        <Col>
-                                            <div className="stepper-header-content">
-                                                <div className="step-index">1</div>
-                                                <div className="step-header">
-                                                    <FormattedMessage id="General.Info" defaultMessage="General.Info"/>
-                                                </div>
-                                            </div>
-                                        </Col>
-                                        <Col>
-                                            <span className="step-index">2</span>
-                                            <span className="step-header">
-                                                <FormattedMessage id="Select.Platform"
-                                                                  defaultMessage="Select.Platform"/>
-                                            </span>
-                                        </Col>
-                                        <Col>
-                                            <span className="step-index">3</span>
-                                            <span className="step-header">
-                                                <FormattedMessage id="Screenshots" defaultMessage="Screenshots"/>
-                                            </span>
-                                        </Col>
-                                        <Col>
-                                            <span className="step-index">4</span>
-                                            <span className="step-header">
-                                                <FormattedMessage id="Release" defaultMessage="Release"/>
-                                            </span>
-                                        </Col>
-                                    </Row>
-                                </div>
-                            </Col>
-                        </Row>
-                        <Row>
-                            <Col>
-                                {this.getStepContent(stepIndex)}
-                            </Col>
-                        </Row>
-                    </ModalBody>
+                    <div className="container app-create-modal-content">
+                        <Stepper
+                            activeStep={stepIndex + 1}
+                            previousStep={stepIndex}
+                            stepContent={this.getStepperHeaders()}
+                        />
+                        {this.getStepContent(stepIndex)}
+                    </div>
                 </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 bd7de1e981c..e0e477f77ab 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
@@ -19,7 +19,7 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {FormattedMessage} from 'react-intl';
-import {Button, Form, FormFeedback, FormGroup, Input, Label, ModalFooter} from 'reactstrap';
+import {Button, Form, FormFeedback, FormGroup, Input, Label, ModalFooter, ModalBody} from 'reactstrap';
 import * as validator from '../../../../common/validator';
 import Chip from "../../../UIComponents/Chip/Chip";
 
@@ -166,6 +166,7 @@ class Step1 extends Component {
      * Set text field values to state.
      * */
     onTextFieldChange(event) {
+        console.log(event.target.value);
         let field = event.target.name;
         switch (field) {
             case "appName": {
@@ -236,114 +237,112 @@ class Step1 extends Component {
 
         return (
             <div>
-                <div>
-                    <div>
-                        <FormGroup>
-                            <Label for="app-title">
-                                <FormattedMessage id='Title' defaultMessage='Title'/>*
-                            </Label>
-                            <Input
-                                required
-                                type="text"
-                                name="appName"
-                                id="app-title"
-                                value={this.state.name}
-                                onChange={this.onTextFieldChange}
-                            />
-                            <FormFeedback id="form-error">{this.state.errors.name}</FormFeedback>
-                        </FormGroup>
-                        <FormGroup>
-                            <Label for="app-short-description">
-                                <FormattedMessage id="ShortDescription" defaultMessage="ShortDescription"/>*
-                            </Label>
-                            <Input
-                                required
-                                type="textarea"
-                                name="appShortDescription"
-                                id="app-short-description"
-                                value={this.state.shortDescription}
-                                onChange={this.onTextFieldChange}
-                            />
-                            <FormFeedback id="form-error">{this.state.errors.shortDescription}</FormFeedback>
-                        </FormGroup>
-                        <FormGroup>
-                            <Label for="app-description">
-                                <FormattedMessage id='Description' defaultMessage='Description'/>*
-                            </Label>
-                            <Input
-                                required
-                                type="textarea"
-                                name="appDescription"
-                                id="app-description"
-                                value={this.state.description}
-                                onChange={this.onTextFieldChange}
-                            />
-                            <FormFeedback id="form-error">{this.state.errors.description}</FormFeedback>
-                        </FormGroup>
-                        <FormGroup>
-                            <Label for="app-category">
-                                <FormattedMessage id='Category' defaultMessage='Category'/>
-                            </Label>
-                            <Input
-                                type="select"
-                                name="category"
-                                id="app-category"
-                            >
-                                <option key={0} value={{id: 0, name: "business"}}>Business</option>
-                            </Input>
-                        </FormGroup>
-                        <FormGroup>
-                            <Label for="app-visibility">
-                                <FormattedMessage id='Visibility' defaultMessage='Visibility'/>
-                            </Label>
-                            <Form inline>
-                                <FormGroup>
-                                    <Input
-                                        type="select"
-                                        name="visibility"
-                                        id="app-visibility"
-                                        onChange={this.onVisibilityChange}
-                                    >
-                                        <option id="app-visibility-default" disabled selected>Select the App Visibility
-                                                                                              Option.
-                                        </option>
-                                        <option key={1}><FormattedMessage id='Devices' defaultMessage='Devices'/>
-                                        </option>
-                                        <option key={2}><FormattedMessage id='Roles' defaultMessage='Roles'/></option>
-                                        <option key={3}><FormattedMessage id='Groups' defaultMessage='Groups'/></option>
-                                    </Input>
-                                </FormGroup>
-                                {visibilityItem()}
-                            </Form>
-                        </FormGroup>
-                        <FormGroup>
-                            <Label for="app-tags"><FormattedMessage id='Tags' defaultMessage='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)}
-                            />
+                <ModalBody id="modal-body-content">
+                    <FormGroup>
+                        <Label for="app-title">
+                            <FormattedMessage id='Title' defaultMessage='Title'/>*
+                        </Label>
+                        <Input
+                            required
+                            type="text"
+                            name="appName"
+                            id="app-title"
+                            value={this.state.name}
+                            onChange={this.onTextFieldChange}
+                        />
+                        <FormFeedback id="form-error">{this.state.errors.name}</FormFeedback>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-short-description">
+                            <FormattedMessage id="ShortDescription" defaultMessage="ShortDescription"/>*
+                        </Label>
+                        <Input
+                            required
+                            type="textarea"
+                            name="appShortDescription"
+                            id="app-short-description"
+                            value={this.state.shortDescription}
+                            onChange={this.onTextFieldChange}
+                        />
+                        <FormFeedback id="form-error">{this.state.errors.shortDescription}</FormFeedback>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-description">
+                            <FormattedMessage id='Description' defaultMessage='Description'/>*
+                        </Label>
+                        <Input
+                            required
+                            type="textarea"
+                            name="appDescription"
+                            id="app-description"
+                            value={this.state.description}
+                            onChange={this.onTextFieldChange}
+                        />
+                        <FormFeedback id="form-error">{this.state.errors.description}</FormFeedback>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-category">
+                            <FormattedMessage id='Category' defaultMessage='Category'/>
+                        </Label>
+                        <Input
+                            type="select"
+                            name="category"
+                            id="app-category"
+                        >
+                            <option key={0} value={{id: 0, name: "business"}}>Business</option>
+                        </Input>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-visibility">
+                            <FormattedMessage id='Visibility' defaultMessage='Visibility'/>
+                        </Label>
+                        <Form inline>
+                            <FormGroup>
+                                <Input
+                                    type="select"
+                                    name="visibility"
+                                    id="app-visibility"
+                                    onChange={this.onVisibilityChange}
+                                >
+                                    <option id="app-visibility-default" disabled selected>Select the App Visibility
+                                                                                          Option.
+                                    </option>
+                                    <option key={1}><FormattedMessage id='Devices' defaultMessage='Devices'/>
+                                    </option>
+                                    <option key={2}><FormattedMessage id='Roles' defaultMessage='Roles'/></option>
+                                    <option key={3}><FormattedMessage id='Groups' defaultMessage='Groups'/></option>
+                                </Input>
+                            </FormGroup>
+                            {visibilityItem()}
+                        </Form>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-tags"><FormattedMessage id='Tags' defaultMessage='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 (
-                                            <Chip
-                                                key={tag.key}
-                                                content={tag}
-                                                onDelete={this.handleRequestDelete}
-                                            />
-                                        )
-                                    }
-                                )}
-                            </div>
-                            <FormFeedback id="form-error">{this.state.errors.tags}</FormFeedback>
-                        </FormGroup>
-                    </div>
-                </div>
+                        <div id="batch-content">
+                            {this.state.tags.map(tag => {
+                                    return (
+                                        <Chip
+                                            key={tag.key}
+                                            content={tag}
+                                            onDelete={this.handleRequestDelete}
+                                        />
+                                    )
+                                }
+                            )}
+                        </div>
+                        <FormFeedback id="form-error">{this.state.errors.tags}</FormFeedback>
+                    </FormGroup>
+                </ModalBody>
                 <ModalFooter>
                     <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
                         <FormattedMessage id="Cancel" defaultMessage="Cancel"/>
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 f40ca3c6306..af8017d1bba 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
@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import AuthHandler from "../../../../api/authHandler";
 import PlatformMgtApi from "../../../../api/platformMgtApi";
-import {Button, FormFeedback, FormGroup, Input, Label, ModalFooter} from 'reactstrap';
+import {Button, FormFeedback, FormGroup, Input, Label, ModalBody, ModalFooter} from 'reactstrap';
 import {FormattedMessage} from 'react-intl';
 import * as validator from '../../../../common/validator';
 
@@ -145,33 +145,36 @@ class Step2 extends Component {
     render() {
         return (
             <div>
-
-                <FormGroup>
-                    <Label for="store">Store Type</Label>
-                    <Input type="select" name="store" className="input-custom" onChange={this.onChangeStore.bind(this)}>
-                        <option>Enterprise</option>
-                        <option>Public</option>
-                    </Input>
-                </FormGroup>
-                <FormGroup>
-                    <Label for="store"><FormattedMessage id='Platform' defaultMessage='Platform'/></Label>
-                    <Input
-                        required
-                        type="select"
-                        name="store"
-                        onChange={this.onChangePlatform.bind(this)}
-                    >
-                        <option id="app-visibility-default" disabled selected>Select the Application Platform</option>
-                        {this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
-                            return (
-                                <option value={platform.identifier} key={platform.identifier}>
-                                    {platform.name}
-                                </option>
-                            )
-                        }) : <option><FormattedMessage id='No.Platform' defaultMessage='No Platforms'/></option>}
-                    </Input>
-                    <FormFeedback id="form-error">{this.state.errors.platform}</FormFeedback>
-                </FormGroup>
+                <ModalBody id="modal-body-content">
+                    <FormGroup>
+                        <Label for="store">Store Type</Label>
+                        <Input type="select" name="store" className="input-custom"
+                               onChange={this.onChangeStore.bind(this)}>
+                            <option>Enterprise</option>
+                            <option>Public</option>
+                        </Input>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="store"><FormattedMessage id='Platform' defaultMessage='Platform'/></Label>
+                        <Input
+                            required
+                            type="select"
+                            name="store"
+                            onChange={this.onChangePlatform.bind(this)}
+                        >
+                            <option id="app-visibility-default" disabled selected>Select the Application Platform
+                            </option>
+                            {this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
+                                return (
+                                    <option value={platform.identifier} key={platform.identifier}>
+                                        {platform.name}
+                                    </option>
+                                )
+                            }) : <option><FormattedMessage id='No.Platform' defaultMessage='No Platforms'/></option>}
+                        </Input>
+                        <FormFeedback id="form-error">{this.state.errors.platform}</FormFeedback>
+                    </FormGroup>
+                </ModalBody>
                 <ModalFooter>
                     <Button className="custom-flat primary-flat" onClick={this.onBackClick}>
                         <FormattedMessage id="Back" defaultMessage="Back"/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
index 27c9b6fb1e9..74b68eb5526 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import Dropzone from 'react-dropzone';
 import React, {Component} from 'react';
 import * as validator from '../../../../common/validator';
-import {Button, FormFeedback, FormGroup, Label, ModalFooter} from 'reactstrap';
+import {Button, FormFeedback, FormGroup, Label, ModalBody, ModalFooter} from 'reactstrap';
 import AppImage from "../../../UIComponents/AppImage/AppImage";
 import {FormattedMessage} from 'react-intl';
 
@@ -138,92 +138,94 @@ class Step3 extends Component {
     render() {
         return (
             <div className="createStep2Content">
-                <div>
-                    <FormGroup>
-                        <Label for="app-screenshots">
-                            <FormattedMessage id='Screenshots' defaultMessage='Screenshots'/>*
-                        </Label>
-                        <span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
-                        <div id="screenshot-container">
-                            {this.state.screenshots.map((tile) => (
-                                <div id="app-image-screenshot">
-                                    <AppImage image={tile[0].preview}/>
-                                </div>
-                            ))}
-                            {this.state.screenshots.length < 3 ?
-                                <Dropzone
-                                    className="application-create-screenshot-dropzone"
-                                    accept="image/jpeg, image/png"
-                                    onDrop={(screenshots, rejected) => {
-                                        let tmpScreenshots = this.state.screenshots;
-                                        tmpScreenshots.push(screenshots);
-                                        this.setState({
-                                            screenshots: tmpScreenshots
-                                        });
-                                    }}
-                                >
-                                    <i className="fw fw-add"></i>
-                                </Dropzone> : <div/>}
-                        </div>
-                        <FormFeedback id="form-error">{this.state.errors.screenshots}</FormFeedback>
-                    </FormGroup>
-                </div>
-                <div style={{display: 'flex'}}>
-                    <div style={{float: 'left', marginRight: '15px'}}>
+                <ModalBody id="modal-body-content">
+                    <div>
                         <FormGroup>
-                            <Label for="app-icon">
+                            <Label for="app-screenshots">
                                 <FormattedMessage id='Screenshots' defaultMessage='Screenshots'/>*
                             </Label>
-                            <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
-                            <div id="app-icon-container">
-                                {this.state.icon.map((tile) => (
-                                    <div id="app-image-icon">
-                                        <AppImage image={tile.preview}/>
+                            <span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
+                            <div id="screenshot-container">
+                                {this.state.screenshots.map((tile) => (
+                                    <div id="app-image-screenshot">
+                                        <AppImage image={tile[0].preview}/>
                                     </div>
                                 ))}
-
-                                {this.state.icon.length === 0 ?
+                                {this.state.screenshots.length < 3 ?
                                     <Dropzone
-                                        className="application-create-icon-dropzone"
+                                        className="application-create-screenshot-dropzone"
                                         accept="image/jpeg, image/png"
-                                        onDrop={(icon, rejected) => {
-                                            this.setState({icon, rejected});
+                                        onDrop={(screenshots, rejected) => {
+                                            let tmpScreenshots = this.state.screenshots;
+                                            tmpScreenshots.push(screenshots);
+                                            this.setState({
+                                                screenshots: tmpScreenshots
+                                            });
                                         }}
                                     >
                                         <i className="fw fw-add"></i>
                                     </Dropzone> : <div/>}
                             </div>
-                            <FormFeedback id="form-error">{this.state.errors.icon}</FormFeedback>
+                            <FormFeedback id="form-error">{this.state.errors.screenshots}</FormFeedback>
                         </FormGroup>
                     </div>
-                    <div style={{marginLeft: '15px'}}>
-                        <FormGroup>
-                            <Label for="app-banner">
-                                <FormattedMessage id='Icon' defaultMessage='Icon'/>*
-                            </Label>
-                            <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
-                            <div id="app-banner-container">
-                                {this.state.banner.map((tile) => (
-                                    <div id="app-image-banner">
-                                        <AppImage image={tile.preview}/>
-                                    </div>
-                                ))}
-                                {this.state.banner.length === 0 ?
-                                    <Dropzone
-                                        className="application-create-banner-dropzone"
-                                        accept="image/jpeg, image/png"
-                                        onDrop={(banner, rejected) => {
-                                            this.setState({banner, rejected});
-                                        }}
-                                    >
-                                        <i className="fw fw-add"></i>
-                                    </Dropzone> : <div/>
-                                }
-                            </div>
-                            <FormFeedback id="form-error">{this.state.errors.banner}</FormFeedback>
-                        </FormGroup>
+                    <div style={{display: 'flex'}}>
+                        <div style={{float: 'left', marginRight: '15px'}}>
+                            <FormGroup>
+                                <Label for="app-icon">
+                                    <FormattedMessage id='Screenshots' defaultMessage='Screenshots'/>*
+                                </Label>
+                                <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
+                                <div id="app-icon-container">
+                                    {this.state.icon.map((tile) => (
+                                        <div id="app-image-icon">
+                                            <AppImage image={tile.preview}/>
+                                        </div>
+                                    ))}
+
+                                    {this.state.icon.length === 0 ?
+                                        <Dropzone
+                                            className="application-create-icon-dropzone"
+                                            accept="image/jpeg, image/png"
+                                            onDrop={(icon, rejected) => {
+                                                this.setState({icon, rejected});
+                                            }}
+                                        >
+                                            <i className="fw fw-add"></i>
+                                        </Dropzone> : <div/>}
+                                </div>
+                                <FormFeedback id="form-error">{this.state.errors.icon}</FormFeedback>
+                            </FormGroup>
+                        </div>
+                        <div style={{marginLeft: '15px'}}>
+                            <FormGroup>
+                                <Label for="app-banner">
+                                    <FormattedMessage id='Icon' defaultMessage='Icon'/>*
+                                </Label>
+                                <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
+                                <div id="app-banner-container">
+                                    {this.state.banner.map((tile) => (
+                                        <div id="app-image-banner">
+                                            <AppImage image={tile.preview}/>
+                                        </div>
+                                    ))}
+                                    {this.state.banner.length === 0 ?
+                                        <Dropzone
+                                            className="application-create-banner-dropzone"
+                                            accept="image/jpeg, image/png"
+                                            onDrop={(banner, rejected) => {
+                                                this.setState({banner, rejected});
+                                            }}
+                                        >
+                                            <i className="fw fw-add"></i>
+                                        </Dropzone> : <div/>
+                                    }
+                                </div>
+                                <FormFeedback id="form-error">{this.state.errors.banner}</FormFeedback>
+                            </FormGroup>
+                        </div>
                     </div>
-                </div>
+                </ModalBody>
                 <ModalFooter>
                     <Button className="custom-flat primary-flat" onClick={this.onBackClick}>
                         <FormattedMessage id="Back" defaultMessage="Back"/>
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 9cb1b3432cf..392441878d6 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 {Button, Collapse, FormGroup, FormText, Input, Label, ModalFooter} from 'reactstrap';
+import {Button, Collapse, FormGroup, FormText, Input, Label, ModalBody, ModalFooter} from 'reactstrap';
 import Switch from '../../../UIComponents/Switch/Switch'
 import {FormattedMessage} from 'react-intl';
 
@@ -91,7 +91,7 @@ class Step4 extends Component {
     render() {
         return (
             <div className="applicationCreateStepMiddle">
-                <div>
+                <ModalBody id="modal-body-content">
                     <FormGroup>
                         <div id="app-release-switch-content">
                             <div id="app-release-switch-label">
@@ -150,7 +150,7 @@ class Step4 extends Component {
                             />
                         </FormGroup>
                     </Collapse>
-                </div>
+                </ModalBody>
                 <ModalFooter>
                     <Button className="custom-flat primary-flat" onClick={this.onBackClick}>
                         <FormattedMessage id="Back" defaultMessage="Back"/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx
new file mode 100644
index 00000000000..2a61ff7c168
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx
@@ -0,0 +1,74 @@
+/*
+ * 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 './stepper.css';
+import {FormattedMessage} from "react-intl";
+
+class Step extends Component {
+
+    render() {
+        const {index, text, active, passed, finalStep, optional} = this.props;
+
+        let activeStep = active ? "stepper-active-index" : "stepper-inactive-index";
+        let activeStepText = active ? " stepper-active-step-text" : "";
+        let stepPassed = index === passed || index < passed ? " stepper-passed-index" : "";
+        let stepPassedText = index === passed || index < passed ? " stepper-passed-step-text" : "";
+
+        let indexClassNames = "step-index " + activeStep + stepPassed;
+        let indexTextClassNames = "step-text " + activeStepText + stepPassedText;
+
+        let stepIndexContent = index === passed || index < passed ? <i className="fw fw-check"></i> : index;
+
+        return (
+
+
+            <div className="step">
+                <div className="step-content">
+                    <div className={indexClassNames}>
+                            <span>
+                                {stepIndexContent}
+                             </span>
+                    </div>
+                    <div className={indexTextClassNames}>
+                        <div>
+                            {text} {!finalStep? <i className="stepper-next-arrow fw fw-right-arrow"></i> : <i/>}
+                        </div>
+                        {optional ?
+                            <div className="stepper-optional-text">
+                                (<FormattedMessage id="Optional" defaultMessage="Optional"/>)
+                            </div>: <div/>}
+                    </div>
+
+                </div>
+            </div>
+        )
+    }
+}
+
+Step.propTypes = {
+    index: PropTypes.number,
+    text: PropTypes.node,
+    active: PropTypes.bool,
+    passed: PropTypes.number,
+    finalStep: PropTypes.bool,
+    optional: PropTypes.bool
+}
+
+export default Step;
\ 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/UIComponents/StepprHeader/Stepper.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx
new file mode 100644
index 00000000000..75b619907f0
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx
@@ -0,0 +1,52 @@
+/*
+ * 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 './stepper.css';
+import Step from "./Step";
+
+class Stepper extends Component {
+
+    render() {
+        const {stepContent, activeStep, previousStep} = this.props;
+        return (
+            <div className="stepper-header">
+                {stepContent.map(content => {
+                    return (
+                        <Step
+                            passed={previousStep}
+                            text={content.text}
+                            index={content.index}
+                            optional={content.optional}
+                            active={activeStep === content.index}
+                            finalStep={content.index === stepContent.length}
+                        />
+                    )
+                })}
+            </div>
+        )
+    }
+}
+
+Stepper.propTypes = {
+    stepContent: PropTypes.array,
+    activeStep: PropTypes.number
+};
+
+export default Stepper;
\ 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/UIComponents/StepprHeader/stepper.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/stepper.css
new file mode 100644
index 00000000000..3e35918e7c1
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/stepper.css
@@ -0,0 +1,97 @@
+/*
+ * 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.
+ */
+
+.stepper-header {
+    width: 100%;
+    padding: 24px;
+    height: 72px;
+    color: rgba(0, 0, 0, 0.38);
+    box-shadow: 1px 0px 1px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19);
+    display: table;
+    align-items: baseline;
+    justify-content: space-between;
+    margin: 0 !important;
+}
+
+.step {
+    display: table-cell;
+    flex-direction: row;
+    align-items: baseline;
+}
+
+.step-content {
+    display: flex;
+    width: auto;
+}
+
+
+.step-index {
+    padding-top: 3px;
+    height: 24px;
+    width: 24px;
+    font-size: 12px;
+    border-radius: 50%;
+    text-align: center;
+    margin-right: 8px;
+}
+
+.stepper-inactive-index {
+    background-color: rgba(0, 0, 0, 0.38);
+}
+
+.stepper-active-index {
+    background-color: #0a6eff;
+    color: white;
+}
+
+.stepper-passed-index {
+    background-color: #0a6eff;
+    color: white;
+}
+
+.step-text {
+    padding-top: 3px;
+    font-family: Roboto-Regular;
+    font-size: 14px;
+}
+
+.inactive-text {
+    color: rgba(0, 0, 0, 0.54);
+}
+
+.stepper-active-step-text {
+    font-family: Roboto-Medium;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.87);
+    font-weight: 300;
+}
+
+.stepper-passed-step-text {
+    font-family: Roboto-Medium;
+    color: rgba(0, 0, 0, 0.87);
+}
+
+.stepper-next-arrow {
+    margin-left: 15px;
+}
+
+.stepper-optional-text {
+    font-family: Roboto-Regular;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.39)
+}