Add ui improvements to APPM

- Add breadcrumbs - Fix tag spacing - Add price type selection in New Release form - Change edit button disable when release isn't in an editable state - Add autofill functionality to edit release - Add dynamic device types in add new app form
2025-10-06 02:01:45 +00:00 · 2019-07-30 13:15:44 +05:30 · 2019-07-30 13:15:44 +05:30 · 0f4eaa575c
commit 0f4eaa575c
parent 02e3bca9ed
21 changed files with 369 additions and 362 deletions
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js
@ -464,7 +464,7 @@ class AppDetailsDrawer extends React.Component {
                            dataSource={app.applicationReleases}
                            renderItem={release => (
                                <List.Item>
-                                    <a href={"apps/releases/" + release.uuid}>
+                                    <Link to={"apps/releases/" + release.uuid}>
                                        <Card className="release-card">
                                            <Meta
                                                avatar={
@ -484,7 +484,7 @@ class AppDetailsDrawer extends React.Component {
                                                }
                                            />
                                        </Card>
-                                    </a>
+                                    </Link>
                                </List.Item>
                            )}
                        />
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js
@ -53,7 +53,9 @@ const columns = [
            <span>
                {categories.map(category => {
                    return (
-                        <Tag color={pSBC(0.30, config.theme.primaryColor)} key={category}>
+                        <Tag
+                            style={{marginBottom: 8}}
+                            color={pSBC(0.30, config.theme.primaryColor)} key={category}>
                            {category}
                        </Tag>
                    );
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
@ -1,5 +1,5 @@
 import React from "react";
-import {Divider, Row, Col, Typography, Button, Drawer, Icon} from "antd";
+import {Divider, Row, Col, Typography, Button, Drawer, Icon, Tooltip} from "antd";
 import StarRatings from "react-star-ratings";
 import Reviews from "./review/Reviews";
 import "../../../App.css";
@ -14,10 +14,15 @@ class ReleaseView extends React.Component {
        const config = this.props.context;
        const app = this.props.app;
        const release = (app !== null) ? app.applicationReleases[0] : null;
-        if (release == null) {
+        const {lifecycle, currentLifecycleStatus} = this.props;
+        if (release == null || lifecycle == null) {
            return null;
        }

+        const {isAppUpdatable, isAppInstallable} = lifecycle[currentLifecycleStatus];
+
+        console.log(isAppInstallable, isAppUpdatable);
+
        const platform = app.deviceType;
        const defaultPlatformIcons = config.defaultPlatformIcons;
        let icon = defaultPlatformIcons.default.icon;
@ -57,21 +62,30 @@ class ReleaseView extends React.Component {
                            <Divider type="vertical"/>
                            <Text>Version : {release.version}</Text><br/>

-                            <EditRelease uuid={release.uuid} type={app.type}/>
+                            <EditRelease
+                                isAppUpdatable={isAppUpdatable}
+                                type={app.type}
+                                release={release}
+                                updateRelease={this.props.updateRelease}
+                            />
+
                        </Col>
                        <Col xl={8} md={10} sm={24} xs={24} style={{float: "right"}}>
                            <div>
-                                <Button
-                                    style={{float: "right"}}
-                                    htmlType="button"
-                                    type="primary"
-                                    icon="shop"
-                                    disabled={this.props.currentLifecycleStatus !== "PUBLISHED"}
-                                    onClick={() => {
-                                        window.open(window.location.origin+ "/store/" + app.deviceType + "/apps/" + release.uuid)
-                                    }}>
-                                    Open in store
-                                </Button>
+                                <Tooltip
+                                    title={isAppInstallable ? "Open this app in store" : "This release isn't in an installable state"}>
+                                    <Button
+                                        style={{float: "right"}}
+                                        htmlType="button"
+                                        type="primary"
+                                        icon="shop"
+                                        disabled={!isAppInstallable}
+                                        onClick={() => {
+                                            window.open(window.location.origin + "/store/" + app.deviceType + "/apps/" + release.uuid)
+                                        }}>
+                                        Open in store
+                                    </Button>
+                                </Tooltip>
                            </div>
                        </Col>
                    </Row>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js
@ -1,5 +1,5 @@
 import React from "react";
-import {Modal, Button, Icon, notification, Spin, Row, Col, Card, Upload, Input, Switch, Form} from 'antd';
+import {Modal, Button, Icon, notification, Spin, Tooltip, Upload, Input, Switch, Form, Divider} from 'antd';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";

@ -83,6 +83,49 @@ class EditReleaseModal extends React.Component {


    showModal = () => {
+        const {release} = this.props;
+        const {formConfig} = this.state;
+        const {specificElements} = formConfig;
+
+        this.props.form.setFields({
+            releaseType: {
+                value: release.releaseType
+            },
+            releaseDescription: {
+                value: release.description
+            },
+            price:{
+                value: release.price
+            },
+            isSharedWithAllTenants:{
+                value: release.isSharedWithAllTenants
+            }
+        });
+
+        if (specificElements.hasOwnProperty("version")) {
+            this.props.form.setFields({
+                version: {
+                    value: release.version
+                }
+            });
+        }
+
+        if (specificElements.hasOwnProperty("url")) {
+            this.props.form.setFields({
+                url: {
+                    value: release.url
+                }
+            });
+        }
+
+        if (specificElements.hasOwnProperty("packageName")) {
+            this.props.form.setFields({
+                packageName: {
+                    value: release.packageName
+                }
+            });
+        }
+
        this.setState({
            visible: true,
        });
@ -115,7 +158,7 @@ class EditReleaseModal extends React.Component {

    handleSubmit = e => {
        e.preventDefault();
-        const {uuid} = this.props;
+        const {uuid} = this.props.release;
        const config = this.props.context;

        const {formConfig} = this.state;
@ -162,15 +205,15 @@ class EditReleaseModal extends React.Component {
                    data.append('icon', icons[0].originFileObj);
                }

-                if(screenshots.length>0){
+                if (screenshots.length > 0) {
                    data.append('screenshot1', screenshots[0].originFileObj);
                }

-                if(screenshots.length>1){
+                if (screenshots.length > 1) {
                    data.append('screenshot2', screenshots[1].originFileObj);
                }

-                if(screenshots.length>2){
+                if (screenshots.length > 2) {
                    data.append('screenshot3', screenshots[2].originFileObj);
                }

@ -181,7 +224,7 @@ class EditReleaseModal extends React.Component {

                data.append("applicationRelease", blob);

-                const url = window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications" + formConfig.endpoint + "/" + uuid;
+                const url = window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications" + formConfig.endpoint + "/" + uuid;

                axios.put(
                    url,
@ -199,14 +242,12 @@ class EditReleaseModal extends React.Component {
                                "Saved!",
                        });

-                        const uuid = res.data.data.uuid;
-
-                        // this.props.history.push('/publisher/apps/releases/' + uuid);
+                        window.location.reload();
                    }

                }).catch((error) => {
                    if (error.hasOwnProperty("response") && error.response.status === 401) {
-                        window.location.href = window.location.origin+ '/publisher/login';
+                        window.location.href = window.location.origin + '/publisher/login';
                    } else {
                        notification["error"]({
                            message: "Something went wrong!",
@ -227,15 +268,21 @@ class EditReleaseModal extends React.Component {
    render() {
        const {formConfig, icons, screenshots, loading, binaryFiles} = this.state;
        const {getFieldDecorator} = this.props.form;
+        const {isAppUpdatable} = this.props;
+
        return (
            <div>
-                <Button size="small" type="primary" onClick={this.showModal}>
-                    <Icon type="edit"/> Edit
-                </Button>
+                <Tooltip title={isAppUpdatable ? "Edit this release" : "This release isn't in an editable state"}>
+                    <Button
+                        disabled={!isAppUpdatable}
+                        size="small" type="primary" onClick={this.showModal}>
+                        <Icon type="edit"/> Edit
+                    </Button>
+                </Tooltip>
                <Modal
                    title="Edit release"
                    visible={this.state.visible}
-                    onOk={this.handleOk}
+                    footer={null}
                    onCancel={this.handleCancel}
                >
                    <div>
@ -340,14 +387,11 @@ class EditReleaseModal extends React.Component {
                                            beforeUpload={() => false}
                                            multiple
                                        >
-
                                            {screenshots.length < 3 && (
                                                <Button>
                                                    <Icon type="upload"/> Click to upload
                                                </Button>
                                            )}
-
-
                                        </Upload>,
                                    )}
                                </Form.Item>
@ -399,11 +443,18 @@ class EditReleaseModal extends React.Component {
                                    )}

                                </Form.Item>
-                                <Form.Item style={{float: "right"}}>
+                                <Divider/>
+                                <Form.Item style={{float: "right", marginLeft: 8}}>
                                    <Button type="primary" htmlType="submit">
-                                        Submit
+                                        Update
                                    </Button>
                                </Form.Item>
+                                <Form.Item style={{float: "right"}}>
+                                    <Button htmlType="button" onClick={this.handleCancel}>
+                                        Back
+                                    </Button>
+                                </Form.Item>
+                                <br/>
                            </Form>
                        </Spin>
                    </div>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js
@ -34,17 +34,12 @@ class LifeCycle extends React.Component {
        this.state = {
            currentStatus: props.currentStatus,
            selectedStatus: null,
-            lifecycle: [],
            reasonText: '',
            isReasonModalVisible: false,
            isConfirmButtonLoading: false
        }
    }

-    componentDidMount() {
-        this.fetchData();
-    }
-
    componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevProps.currentStatus !== this.props.currentStatus || prevProps.uuid !== this.props.uuid) {
            this.setState({
@ -53,33 +48,6 @@ class LifeCycle extends React.Component {
        }
    }

-
-    fetchData = () => {
-        const config = this.props.context;
-        axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/lifecycle-config"
-        ).then(res => {
-            if (res.status === 200) {
-                const lifecycle = res.data.data;
-                this.setState({
-                    lifecycle: lifecycle
-                })
-            }
-
-        }).catch(function (error) {
-            if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = window.location.origin+ '/publisher/login';
-            } else {
-                notification["error"]({
-                    message: "There was a problem",
-                    duration: 0,
-                    description:
-                        "Error occurred while trying to load lifecycle configuration.",
-                });
-            }
-        });
-    };
-
    handleChange = (value) => {
        this.setState({reasonText: value})
    };
@ -114,7 +82,7 @@ class LifeCycle extends React.Component {
        });

        axios.post(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/life-cycle/" + uuid,
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/life-cycle/" + uuid,
            data
        ).then(res => {
            if (res.status === 201) {
@ -135,7 +103,7 @@ class LifeCycle extends React.Component {

        }).catch((error) => {
            if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = window.location.origin+ '/publisher/login';
+                window.location.href = window.location.origin + '/publisher/login';
            } else {
                notification["error"]({
                    message: "Error",
@ -153,12 +121,15 @@ class LifeCycle extends React.Component {


    render() {
-        const {currentStatus, lifecycle, selectedStatus} = this.state;
+        const {currentStatus, selectedStatus} = this.state;
+        const {lifecycle} = this.props;
        const selectedValue = selectedStatus == null ? [] : selectedStatus;
        let proceedingStates = [];
-        if((lifecycle.hasOwnProperty(currentStatus)) && lifecycle[currentStatus].hasOwnProperty("proceedingStates")){
+
+        if (lifecycle !== null && (lifecycle.hasOwnProperty(currentStatus)) && lifecycle[currentStatus].hasOwnProperty("proceedingStates")) {
            proceedingStates = lifecycle[currentStatus].proceedingStates;
        }
+
        return (
            <div>
                <Title level={4}>Manage Lifecycle</Title>
@ -169,7 +140,7 @@ class LifeCycle extends React.Component {
                    state to another. <br/>Note: ‘Change State To’ displays only the next states allowed from the
                    current state
                </Paragraph>
-                <LifeCycleDetailsModal lifecycle={lifecycle}/>
+                {lifecycle !== null && (<LifeCycleDetailsModal lifecycle={lifecycle}/>)}
                <Divider dashed={true}/>
                <Text strong={true}>Current State: </Text> <Tag color="blue">{currentStatus}</Tag><br/><br/>
                <Text>Change State to: </Text>
@ -182,14 +153,14 @@ class LifeCycle extends React.Component {
                    showSearch={true}
                >
                    {proceedingStates.map(lifecycleState => {
-                            return (
-                                <Option
-                                    key={lifecycleState}
-                                    value={lifecycleState}>
-                                    {lifecycleState}
-                                </Option>
-                            )
-                        })
+                        return (
+                            <Option
+                                key={lifecycleState}
+                                value={lifecycleState}>
+                                {lifecycleState}
+                            </Option>
+                        )
+                    })
                    }
                </Select>
                <Button
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageCategories.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageCategories.js
@ -121,6 +121,7 @@ class ManageCategories extends React.Component {
        const tagElem = (
            <Tag
                color={pSBC(0.30, config.theme.primaryColor)}
+                style={{marginTop:8}}
            >
                {categoryName}
                <Divider type="vertical"/>
@ -160,9 +161,9 @@ class ManageCategories extends React.Component {
    };

    renderTempElement = (category) => {
-        const config = this.props.context;
        const tagElem = (
            <Tag
+                style={{marginTop:8}}
                closable
                onClose={e => {
                    e.preventDefault();
@ -428,7 +429,7 @@ class ManageCategories extends React.Component {
                        </div>
                        }
                        <Divider dashed="true"/>
-                        <div style={{marginTop: 16}}>
+                        <div style={{marginTop: 8}}>
                            <TweenOneGroup
                                enter={{
                                    scale: 0.8,
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageTags.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageTags.js
@ -124,6 +124,7 @@ class ManageTags extends React.Component {
        const tagElem = (
            <Tag
                color="#34495e"
+                style={{marginTop:8}}
            >
                {tagName}
                <Divider type="vertical"/>
@ -166,6 +167,7 @@ class ManageTags extends React.Component {
        const {tempElements} = this.state;
        const tagElem = (
            <Tag
+                style={{marginTop:8}}
                closable
                onClose={e => {
                    e.preventDefault();
@ -429,7 +431,7 @@ class ManageTags extends React.Component {
                        </div>
                        }
                        <Divider dashed="true"/>
-                        <div style={{marginTop: 16}}>
+                        <div style={{marginTop: 8}}>
                            <TweenOneGroup
                                enter={{
                                    scale: 0.8,
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js
@ -5,12 +5,12 @@ import {withConfigContext} from "../../../context/ConfigContext";

 const formItemLayout = {
    labelCol: {
-        xs: { span: 24 },
-        sm: { span: 5 },
+        xs: {span: 24},
+        sm: {span: 5},
    },
    wrapperCol: {
-        xs: { span: 24 },
-        sm: { span: 19 },
+        xs: {span: 24},
+        sm: {span: 19},
    },
 };
 const {Option} = Select;
@ -22,7 +22,8 @@ class NewAppDetailsForm extends React.Component {
        super(props);
        this.state = {
            categories: [],
-            tags: []
+            tags: [],
+            deviceTypes:[]
        }
    }

@ -62,12 +63,13 @@ class NewAppDetailsForm extends React.Component {
    componentDidMount() {
        this.getCategories();
        this.getTags();
+        this.getDeviceTypes();
    }

    getCategories = () => {
        const config = this.props.context;
        axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories"
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories"
        ).then(res => {
            if (res.status === 200) {
                let categories = JSON.parse(res.data.data);
@ -79,7 +81,7 @@ class NewAppDetailsForm extends React.Component {

        }).catch((error) => {
            if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = window.location.origin+ '/publisher/login';
+                window.location.href = window.location.origin + '/publisher/login';
            } else {
                notification["error"]({
                    message: "There was a problem",
@ -97,7 +99,7 @@ class NewAppDetailsForm extends React.Component {
    getTags = () => {
        const config = this.props.context;
        axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags"
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags"
        ).then(res => {
            if (res.status === 200) {
                let tags = JSON.parse(res.data.data);
@ -109,7 +111,7 @@ class NewAppDetailsForm extends React.Component {

        }).catch((error) => {
            if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = window.location.origin+ '/publisher/login';
+                window.location.href = window.location.origin + '/publisher/login';
            } else {
                notification["error"]({
                    message: "There was a problem",
@ -124,9 +126,39 @@ class NewAppDetailsForm extends React.Component {
        });
    };

+    getDeviceTypes = () => {
+        const config = this.props.context;
+        axios.get(
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt + "/device-types"
+        ).then(res => {
+            if (res.status === 200) {
+                const deviceTypes = JSON.parse(res.data.data);
+                this.setState({
+                    deviceTypes,
+                    loading: false,
+                });
+            }
+
+        }).catch((error) => {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
+                window.location.href = window.location.origin + '/publisher/login';
+            } else {
+                notification["error"]({
+                    message: "There was a problem",
+                    duration: 0,
+                    description:
+                        "Error occurred while trying to load device types.",
+                });
+            }
+            this.setState({
+                loading: false
+            });
+        });
+    };
+
    render() {
        const {formConfig} = this.props;
-        const {categories, tags} = this.state;
+        const {categories, tags, deviceTypes} = this.state;
        const {getFieldDecorator} = this.props.form;

        return (
@ -153,9 +185,22 @@ class NewAppDetailsForm extends React.Component {

                                        }
                                    )(
-                                        <Select placeholder="select device type">
-                                            <Option key="android">Android</Option>
-                                            <Option key="ios">iOS</Option>
+                                        <Select
+                                            mode="multiple"
+                                            style={{width: '100%'}}
+                                            placeholder="select device type"
+                                            onChange={this.handleCategoryChange}
+                                        >
+                                            {
+                                                deviceTypes.map(deviceType => {
+                                                    return (
+                                                        <Option
+                                                            key={deviceType.name}>
+                                                            {deviceType.name}
+                                                        </Option>
+                                                    )
+                                                })
+                                            }
                                        </Select>
                                    )}
                                </Form.Item>
@ -237,19 +282,19 @@ class NewAppDetailsForm extends React.Component {
                            </Form.Item>
                            {/* //todo implement add meta data */}
                            {/*<Form.Item {...formItemLayout} label="Meta Data">*/}
-                                {/*<InputGroup>*/}
-                                    {/*<Row gutter={8}>*/}
-                                        {/*<Col span={10}>*/}
-                                            {/*<Input placeholder="Key"/>*/}
-                                        {/*</Col>*/}
-                                        {/*<Col span={12}>*/}
-                                            {/*<Input placeholder="value"/>*/}
-                                        {/*</Col>*/}
-                                        {/*<Col span={2}>*/}
-                                            {/*<Button type="dashed" shape="circle" icon="plus"/>*/}
-                                        {/*</Col>*/}
-                                    {/*</Row>*/}
-                                {/*</InputGroup>*/}
+                            {/*<InputGroup>*/}
+                            {/*<Row gutter={8}>*/}
+                            {/*<Col span={10}>*/}
+                            {/*<Input placeholder="Key"/>*/}
+                            {/*</Col>*/}
+                            {/*<Col span={12}>*/}
+                            {/*<Input placeholder="value"/>*/}
+                            {/*</Col>*/}
+                            {/*<Col span={2}>*/}
+                            {/*<Button type="dashed" shape="circle" icon="plus"/>*/}
+                            {/*</Col>*/}
+                            {/*</Row>*/}
+                            {/*</InputGroup>*/}
                            {/*</Form.Item>*/}
                            <Form.Item style={{float: "right"}}>
                                <Button type="primary" htmlType="submit">
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js
@ -97,8 +97,7 @@ class NewAppUploadForm extends React.Component {
    handlePriceTypeChange = (value) => {
        this.setState({
            isFree: (value === 'free')
-        })
-
+        });
    };

    render() {
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js
@ -13,7 +13,7 @@ import {
    Upload,
    Divider,
    notification,
-    Spin
+    Spin, InputNumber
 } from "antd";
 import axios from "axios";
 import {withRouter} from 'react-router-dom'
@ -43,7 +43,8 @@ class AddNewReleaseFormComponent extends React.Component {
            icons: [],
            screenshots: [],
            loading: false,
-            binaryFiles: []
+            binaryFiles: [],
+            isFree: true
        };
    }

@ -143,8 +144,14 @@ class AddNewReleaseFormComponent extends React.Component {

    handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList});

+    handlePriceTypeChange = (value) => {
+        this.setState({
+            isFree: (value === 'free')
+        });
+    };
+
    render() {
-        const {categories, tags, icons, screenshots, loading, binaryFiles} = this.state;
+        const {isFree, icons, screenshots, loading, binaryFiles} = this.state;
        const {getFieldDecorator} = this.props.form;
        return (
            <div>
@ -252,13 +259,35 @@ class AddNewReleaseFormComponent extends React.Component {
                                                )}
                                            </Form.Item>

+                                            <Form.Item {...formItemLayout} label="Price Type">
+                                                {getFieldDecorator('select', {
+                                                    rules: [{required: true, message: 'Please select price Type'}],
+                                                })(
+                                                    <Select
+                                                        placeholder="Please select a price type"
+                                                        onChange={this.handlePriceTypeChange}>
+                                                        <Option value="free">Free</Option>
+                                                        <Option value="paid">Paid</Option>
+                                                    </Select>,
+                                                )}
+                                            </Form.Item>
+
                                            <Form.Item {...formItemLayout} label="Price">
                                                {getFieldDecorator('price', {
                                                    rules: [{
-                                                        required: false
+                                                        required: !isFree
                                                    }],
                                                })(
-                                                    <Input prefix="$" placeholder="00.00"/>
+                                                    <InputNumber
+                                                        disabled={isFree}
+                                                        options={{
+                                                            initialValue: 1
+                                                        }}
+                                                        min={0}
+                                                        max={10000}
+                                                        formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+                                                        parser={value => value.replace(/\$\s?|(,*)/g, '')}
+                                                    />
                                                )}
                                            </Form.Item>

--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
@ -1,5 +1,5 @@
 import React from "react";
-import {Layout, Menu, Icon} from 'antd';
+import {Layout, Menu, Icon, Breadcrumb} from 'antd';
 import {Switch, Link} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
 import {Redirect} from 'react-router'
@ -61,7 +61,6 @@ class Dashboard extends React.Component {
                            {this.state.routes.map((route) => (
                                <RouteWithSubRoutes key={route.path} {...route} />
                            ))}
-
                        </Switch>
                    </Content>
                    <Footer style={{textAlign: 'center'}}>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewEnterpriseApp.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewEnterpriseApp.js
@ -1,11 +1,14 @@
 import React from "react";
 import {
    PageHeader,
-    Typography
+    Typography,
+    Breadcrumb,
+    Icon
 } from "antd";
 import AddNewAppForm from "../../../components/new-app/AddNewAppForm";
+import {Link} from "react-router-dom";

-const Paragraph = Typography;
+const {Paragraph} = Typography;

 const formConfig = {
    installationType: "ENTERPRISE",
@ -29,21 +32,19 @@ class AddNewEnterpriseApp extends React.Component {
        };
    }

-    componentDidMount() {
-        // this.getCategories();
-    }
-
-
    render() {
        return (
            <div>
-                <PageHeader
-                    title="Add New Enterprise App"
-                >
+                <PageHeader style={{paddingTop:0}}>
+                    <Breadcrumb style={{paddingBottom:16}}>
+                        <Breadcrumb.Item>
+                            <Link to="/publisher/apps"><Icon type="home"/> Home</Link>
+                        </Breadcrumb.Item>
+                        <Breadcrumb.Item>Add New Enterprise App</Breadcrumb.Item>
+                    </Breadcrumb>
                    <div className="wrap">
-                        <Paragraph>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
-                        </Paragraph>
+                        <h3>Add New Enterprise App</h3>
+                        <Paragraph>Submit and share your own application to the corporate app store.</Paragraph>
                    </div>
                </PageHeader>
                <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewPublicApp.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewPublicApp.js
@ -1,11 +1,14 @@
 import React from "react";
 import {
+    Icon,
    PageHeader,
-    Typography
+    Typography,
+    Breadcrumb
 } from "antd";
 import AddNewAppForm from "../../../components/new-app/AddNewAppForm";
+import {Link} from "react-router-dom";

-const Paragraph = Typography;
+const {Paragraph, Title} = Typography;

 const formConfig = {
    installationType: "PUBLIC",
@ -40,12 +43,16 @@ class AddNewEnterpriseApp extends React.Component {
    render() {
        return (
            <div>
-                <PageHeader
-                    title="Add New Public App"
-                >
+                <PageHeader style={{paddingTop:0}}>
+                    <Breadcrumb style={{paddingBottom:16}}>
+                        <Breadcrumb.Item>
+                            <Link to="/publisher/apps"><Icon type="home"/> Home</Link>
+                        </Breadcrumb.Item>
+                        <Breadcrumb.Item>Add New Public App</Breadcrumb.Item>
+                    </Breadcrumb>
                    <div className="wrap">
-                        <Paragraph>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
+                        <h3>Add New Public App</h3>
+                        <Paragraph>Share a public application in google play or apple store to your corporate app store.
                        </Paragraph>
                    </div>
                </PageHeader>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewWebClip.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewWebClip.js
@ -1,11 +1,14 @@
 import React from "react";
 import {
+    Icon,
    PageHeader,
-    Typography
+    Typography,
+    Breadcrumb
 } from "antd";
 import AddNewAppForm from "../../../components/new-app/AddNewAppForm";
+import {Link} from "react-router-dom";

-const Paragraph = Typography;
+const {Paragraph, Title}= Typography;

 const formConfig = {
    installationType: "WEB_CLIP",
@ -32,21 +35,20 @@ class AddNewEnterpriseApp extends React.Component {
        };
    }

-    componentDidMount() {
-        // this.getCategories();
-    }
-

    render() {
        return (
            <div>
-                <PageHeader
-                    title="Add New Web Clip"
-                >
+                <PageHeader style={{paddingTop:0}}>
+                    <Breadcrumb style={{paddingBottom:16}}>
+                        <Breadcrumb.Item>
+                            <Link to="/publisher/apps"><Icon type="home"/> Home</Link>
+                        </Breadcrumb.Item>
+                        <Breadcrumb.Item>Add New Web Clip</Breadcrumb.Item>
+                    </Breadcrumb>
                    <div className="wrap">
-                        <Paragraph>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
-                        </Paragraph>
+                        <h3>Add New Web Clip</h3>
+                        <Paragraph>Share a Web Clip to your corporate  app store.</Paragraph>
                    </div>
                </PageHeader>
                <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step1.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step1.js
@ -1,150 +0,0 @@
-import React from "react";
-import {Form, Input, Button, Select, Divider, Tag, Tooltip, Icon, Checkbox, Row, Col} from "antd";
-import styles from './Style.less';
-
-const { Option } = Select;
-const { TextArea } = Input;
-const InputGroup = Input.Group;
-
-const formItemLayout = {
-    labelCol: {
-        span: 8,
-    },
-    wrapperCol: {
-        span: 16,
-    },
-};
-
-class EditableTagGroup extends React.Component {
-    state = {
-        tags: [],
-        inputVisible: false,
-        inputValue: '',
-    };
-
-    handleClose = (removedTag) => {
-        const tags = this.state.tags.filter(tag => tag !== removedTag);
-        this.setState({ tags });
-    }
-
-    showInput = () => {
-        this.setState({ inputVisible: true }, () => this.input.focus());
-    }
-
-    handleInputChange = (e) => {
-        this.setState({ inputValue: e.target.value });
-    }
-
-    handleInputConfirm = () => {
-        const { inputValue } = this.state;
-        let { tags } = this.state;
-        if (inputValue && tags.indexOf(inputValue) === -1) {
-            tags = [...tags, inputValue];
-        }
-        this.setState({
-            tags,
-            inputVisible: false,
-            inputValue: '',
-        });
-    }
-
-    saveInputRef = input => this.input = input
-
-    render() {
-        const { tags, inputVisible, inputValue } = this.state;
-        return (
-            <div>
-                {tags.map((tag, index) => {
-                    const isLongTag = tag.length > 20;
-                    const tagElem = (
-                        <Tag key={tag} closable={index !== 0} onClose={() => this.handleClose(tag)}>
-                            {isLongTag ? `${tag.slice(0, 20)}...` : tag}
-                        </Tag>
-                    );
-                    return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
-                })}
-                {inputVisible && (
-                    <Input
-                        ref={this.saveInputRef}
-                        type="text"
-                        size="small"
-                        style={{ width: 78 }}
-                        value={inputValue}
-                        onChange={this.handleInputChange}
-                        onBlur={this.handleInputConfirm}
-                        onPressEnter={this.handleInputConfirm}
-                    />
-                )}
-                {!inputVisible && (
-                    <Tag
-                        onClick={this.showInput}
-                        style={{ background: '#fff', borderStyle: 'dashed' }}
-                    >
-                        <Icon type="plus" /> New Tag
-                    </Tag>
-                )}
-            </div>
-        );
-    }
-}
-
-class Step1 extends React.Component {
-    render() {
-        return (
-            <div>
-                <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
-
-                    <Form.Item {...formItemLayout} label="Platform">
-                            <Select placeholder="ex: android">
-                                <Option value="Android">Android</Option>
-                                <Option value="iOS">iOS</Option>
-                            </Select>
-                    </Form.Item>
-                    <Form.Item {...formItemLayout} label="Type">
-                            <Select value="Enterprise">
-                                <Option value="Enterprise" selected>Enterprise</Option>
-                            </Select>
-                    </Form.Item>
-                    <Form.Item {...formItemLayout} label="Name">
-                        <Input placeholder="App Name" />
-                    </Form.Item>
-                    <Form.Item {...formItemLayout} label="Description">
-                        <TextArea placeholder="Enter the description" rows={4} />
-                    </Form.Item>
-                    <Form.Item {...formItemLayout} label="Category">
-                        <Select placeholder="Select a category">
-                            <Option value="travel">Travel</Option>
-                            <Option value="entertainment">Entertainment</Option>
-                        </Select>
-                    </Form.Item>
-                    <Form.Item {...formItemLayout} label="Tags">
-                        <EditableTagGroup/>
-                    </Form.Item>
-                    <Form.Item {...formItemLayout} label="Price">
-                        <Input prefix="$" placeholder="00.00" />
-                    </Form.Item>
-                    <Form.Item {...formItemLayout} label="Share with all tenents?">
-                        <Checkbox > </Checkbox>
-                    </Form.Item>
-                    <Form.Item {...formItemLayout} label="Meta Daa">
-                        <InputGroup>
-                            <Row gutter={8}>
-                                <Col span={5}>
-                                    <Input placeholder="Key" />
-                                </Col>
-                                <Col span={10}>
-                                    <Input placeholder="value" />
-                                </Col>
-                                <Col span={4}>
-                                    <Button type="dashed" shape="circle" icon="plus" />
-                                </Col>
-                            </Row>
-                        </InputGroup>
-                    </Form.Item>
-                </Form>
-            </div>
-        );
-    }
-}
-
-export default Step1;
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step2.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step2.js
@ -1,11 +0,0 @@
-import React from "react"
-
-class Step2 extends React.Component {
-    render() {
-        return (
-            <p>tttoooeeee</p>
-        );
-    }
-}
-
-export default Step2;
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step3.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step3.js
@ -1,11 +0,0 @@
-import React from "react"
-
-class Step3 extends React.Component {
-    render() {
-        return (
-            <p>tttoooeeee</p>
-        );
-    }
-}
-
-export default Step3;
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-release/AddNewRelease.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-release/AddNewRelease.js
@ -1,9 +1,12 @@
 import React from "react";
 import {
+    Icon,
    PageHeader,
-    Typography
+    Typography,
+    Breadcrumb
 } from "antd";
-import AddNewAppForm from "../../../components/new-release/AddReleaseForm";
+import AddNewReleaseForm from "../../../components/new-release/AddReleaseForm";
+import {Link} from "react-router-dom";

 const Paragraph = Typography;

@ -17,27 +20,24 @@ class AddNewRelease extends React.Component {
        };
    }

-    componentDidMount() {
-        // this.getCategories();
-    }
-
    render() {
        const {appId} = this.props.match.params;
        return (
            <div>
-                <PageHeader
-                    title="Add New Release"
-                >
+                <PageHeader style={{paddingTop: 0}}>
+                    <Breadcrumb style={{paddingBottom: 16}}>
+                        <Breadcrumb.Item>
+                            <Link to="/publisher/apps"><Icon type="home"/> Home</Link>
+                        </Breadcrumb.Item>
+                        <Breadcrumb.Item>Add New Release</Breadcrumb.Item>
+                    </Breadcrumb>
                    <div className="wrap">
-                        <div className="content">
-                            <Paragraph>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
-                            </Paragraph>
-                        </div>
+                        <h3>Add New Release</h3>
+                        <Paragraph>Maintain and manage categories and tags here..</Paragraph>
                    </div>
                </PageHeader>
                <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
-                    <AddNewAppForm appId={appId}/>
+                    <AddNewReleaseForm appId={appId}/>
                </div>

            </div>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
@ -22,7 +22,8 @@ class Release extends React.Component {
            uuid: null,
            release: null,
            currentLifecycleStatus: null,
-        }
+            lifecycle: null
+        };
    }

    componentDidMount() {
@ -36,12 +37,19 @@ class Release extends React.Component {
            this.fetchData(uuid);
        }
    }
+
    changeCurrentLifecycleStatus = (status) =>{
        this.setState({
            currentLifecycleStatus: status
        });
    };

+    updateRelease = (release) =>{
+      this.setState({
+         release
+      });
+    };
+
    fetchData = (uuid) => {
        const config = this.props.context;

@ -77,10 +85,38 @@ class Release extends React.Component {
            }
            this.setState({loading: false});
        });
+
+        this.getLifecycle();
+    };
+
+    getLifecycle = () => {
+        const config = this.props.context;
+        axios.get(
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/lifecycle-config"
+        ).then(res => {
+            if (res.status === 200) {
+                const lifecycle = res.data.data;
+                this.setState({
+                    lifecycle: lifecycle
+                })
+            }
+
+        }).catch(function (error) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
+                window.location.href = window.location.origin+ '/publisher/login';
+            } else {
+                notification["error"]({
+                    message: "There was a problem",
+                    duration: 0,
+                    description:
+                        "Error occurred while trying to load lifecycle configuration.",
+                });
+            }
+        });
    };

    render() {
-        const {app, release, currentLifecycleStatus} = this.state;
+        const {app, release, currentLifecycleStatus, lifecycle} = this.state;

        if (release == null) {
            return (
@ -97,12 +133,22 @@ class Release extends React.Component {
                    <Row style={{padding: 10}}>
                        <Col lg={16} md={24} style={{padding: 3}}>
                            <Card>
-                                <ReleaseView app={app} currentLifecycleStatus={currentLifecycleStatus}/>
+                                <ReleaseView
+                                    app={app}
+                                    currentLifecycleStatus={currentLifecycleStatus}
+                                    lifecycle ={lifecycle}
+                                    updateRelease={this.updateRelease}
+                                />
                            </Card>
                        </Col>
                        <Col lg={8} md={24} style={{padding: 3}}>
                            <Card lg={8} md={24}>
-                                <LifeCycle uuid={release.uuid} currentStatus={release.currentStatus.toUpperCase()} changeCurrentLifecycleStatus={this.changeCurrentLifecycleStatus}/>
+                                <LifeCycle
+                                    uuid={release.uuid}
+                                    currentStatus={release.currentStatus.toUpperCase()}
+                                    changeCurrentLifecycleStatus={this.changeCurrentLifecycleStatus}
+                                    lifecycle ={lifecycle}
+                                />
                            </Card>
                        </Col>
                    </Row>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js
@ -1,7 +1,8 @@
 import React from "react";
-import {PageHeader, Typography, Input, Button, Row, Col} from "antd";
+import {PageHeader, Typography, Breadcrumb, Row, Col, Icon} from "antd";
 import ManageCategories from "../../../components/manage/categories/ManageCategories";
 import ManageTags from "../../../components/manage/categories/ManageTags";
+import {Link} from "react-router-dom";

 const {Paragraph} = Typography;

@ -33,14 +34,16 @@ class Manage extends React.Component {
    render() {
        return (
            <div>
-                <PageHeader
-                    // breadcrumb={{routes}}
-                    title="Manage"
-                >
+                <PageHeader style={{paddingTop: 0}}>
+                    <Breadcrumb style={{paddingBottom: 16}}>
+                        <Breadcrumb.Item>
+                            <Link to="/publisher/apps"><Icon type="home"/> Home</Link>
+                        </Breadcrumb.Item>
+                        <Breadcrumb.Item>Manage</Breadcrumb.Item>
+                    </Breadcrumb>
                    <div className="wrap">
-                        <Paragraph>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
-                        </Paragraph>
+                        <h3>Manage</h3>
+                        <Paragraph>Maintain and manage categories and tags here..</Paragraph>
                    </div>
                </PageHeader>
                <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
@ -1,9 +1,10 @@
 import React from "react";
 import '../../../../App.css';
-import {Skeleton, Typography, Row, Col, Card, message, notification} from "antd";
+import {Skeleton, Typography, Row, Col, Card, message, notification, Breadcrumb, Icon} from "antd";
 import ReleaseView from "../../../../components/apps/release/ReleaseView";
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
+import {Link} from "react-router-dom";

 const {Title} = Typography;

@ -13,12 +14,11 @@ class Release extends React.Component {
    constructor(props) {
        super(props);
        this.routes = props.routes;
-        this.state={
+        this.state = {
            loading: true,
            app: null,
            uuid: null
-        }
-
+        };
    }

    componentDidMount() {
@ -29,19 +29,18 @@ class Release extends React.Component {

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevState.uuid !== this.state.uuid) {
-            const {uuid,deviceType} = this.props.match.params;
+            const {uuid, deviceType} = this.props.match.params;
            this.fetchData(uuid);
            this.props.changeSelectedMenuItem(deviceType);
        }
    }

-    fetchData = (uuid)=>{
+    fetchData = (uuid) => {
        const config = this.props.context;

        //send request to the invoker
        axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store+"/applications/"+uuid,
-
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/applications/" + uuid,
        ).then(res => {
            if (res.status === 200) {
                let app = res.data.data;
@ -53,11 +52,12 @@ class Release extends React.Component {
                })
            }

-        }).catch((error) => { console.log(error);
+        }).catch((error) => {
+            console.log(error);
            if (error.hasOwnProperty("response") && error.response.status === 401) {
                //todo display a popop with error
                message.error('You are not logged in');
-                window.location.href = window.location.origin+ '/store/login';
+                window.location.href = window.location.origin + '/store/login';
            } else {
                notification["error"]({
                    message: "There was a problem",
@ -76,12 +76,13 @@ class Release extends React.Component {
        const {deviceType} = this.props.match.params;

        let content = <Title level={3}>No Releases Found</Title>;
+        let appName = "loading...";

-        if (app != null && app.applicationReleases.length!==0) {
+        if (app != null && app.applicationReleases.length !== 0) {
            content = <ReleaseView app={app} deviceType={deviceType}/>;
+            appName = app.name;
        }

-
        return (
            <div style={{background: '#f0f2f5', minHeight: 780}}>
                <Row style={{padding: 10}}>
@ -89,6 +90,12 @@ class Release extends React.Component {

                    </Col>
                    <Col lg={16} md={24} style={{padding: 3}}>
+                        <Breadcrumb style={{paddingBottom: 16}}>
+                            <Breadcrumb.Item>
+                                <Link to={"/store/"+deviceType}><Icon type="home"/> {deviceType + " apps"} </Link>
+                            </Breadcrumb.Item>
+                            <Breadcrumb.Item>{appName}</Breadcrumb.Item>
+                        </Breadcrumb>
                        <Card>
                            <Skeleton loading={loading} avatar={{size: 'large'}} active paragraph={{rows: 8}}>
                                {content}