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

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>
                             )}
                         />

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>
                     );

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>
+                                <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={this.props.currentLifecycleStatus !== "PUBLISHED"}
+                                        disabled={!isAppInstallable}
                                         onClick={() => {
                                             window.open(window.location.origin + "/store/" + app.deviceType + "/apps/" + release.uuid)
                                         }}>
                                         Open in store
                                     </Button>
+                                </Tooltip>
                             </div>
                         </Col>
                     </Row>

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;
@@ -199,9 +242,7 @@ class EditReleaseModal extends React.Component {
                                 "Saved!",
                         });
 
-                        const uuid = res.data.data.uuid;
+                        window.location.reload();
-
-                        // this.props.history.push('/publisher/apps/releases/' + uuid);
                     }
 
                 }).catch((error) => {
@@ -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}>
+                <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>

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})
     };
@@ -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>

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,

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,

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js

@@ -22,7 +22,8 @@ class NewAppDetailsForm extends React.Component {
         super(props);
         this.state = {
             categories: [],
-            tags: []
+            tags: [],
+            deviceTypes:[]
         }
     }
 
@@ -62,6 +63,7 @@ class NewAppDetailsForm extends React.Component {
     componentDidMount() {
         this.getCategories();
         this.getTags();
+        this.getDeviceTypes();
     }
 
     getCategories = () => {
@@ -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">
+                                        <Select
-                                            <Option key="android">Android</Option>
+                                            mode="multiple"
-                                            <Option key="ios">iOS</Option>
+                                            style={{width: '100%'}}
+                                            placeholder="select device type"
+                                            onChange={this.handleCategoryChange}
+                                        >
+                                            {
+                                                deviceTypes.map(deviceType => {
+                                                    return (
+                                                        <Option
+                                                            key={deviceType.name}>
+                                                            {deviceType.name}
+                                                        </Option>
+                                                    )
+                                                })
+                                            }
                                         </Select>
                                     )}
                                 </Form.Item>

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() {

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>
 

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'}}>

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
+                <PageHeader style={{paddingTop:0}}>
-                    title="Add New Enterprise App"
+                    <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>
+                        <h3>Add New Enterprise App</h3>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
+                        <Paragraph>Submit and share your own application to the corporate app store.</Paragraph>
-                        </Paragraph>
                     </div>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>

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
+                <PageHeader style={{paddingTop:0}}>
-                    title="Add New Public App"
+                    <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>
+                        <h3>Add New Public App</h3>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
+                        <Paragraph>Share a public application in google play or apple store to your corporate app store.
                         </Paragraph>
                     </div>
                 </PageHeader>

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
+                <PageHeader style={{paddingTop:0}}>
-                    title="Add New Web Clip"
+                    <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>
+                        <h3>Add New Web Clip</h3>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
+                        <Paragraph>Share a Web Clip to your corporate  app store.</Paragraph>
-                        </Paragraph>
                     </div>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>

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;

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;

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;

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
+                <PageHeader style={{paddingTop: 0}}>
-                    title="Add New Release"
+                    <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">
+                        <h3>Add New Release</h3>
-                            <Paragraph>
+                        <Paragraph>Maintain and manage categories and tags here..</Paragraph>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
-                            </Paragraph>
-                        </div>
                     </div>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
-                    <AddNewAppForm appId={appId}/>
+                    <AddNewReleaseForm appId={appId}/>
                 </div>
 
             </div>

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>

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
+                <PageHeader style={{paddingTop: 0}}>
-                    // breadcrumb={{routes}}
+                    <Breadcrumb style={{paddingBottom: 16}}>
-                    title="Manage"
+                        <Breadcrumb.Item>
-                >
+                            <Link to="/publisher/apps"><Icon type="home"/> Home</Link>
+                        </Breadcrumb.Item>
+                        <Breadcrumb.Item>Manage</Breadcrumb.Item>
+                    </Breadcrumb>
                     <div className="wrap">
-                        <Paragraph>
+                        <h3>Manage</h3>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
+                        <Paragraph>Maintain and manage categories and tags here..</Paragraph>
-                        </Paragraph>
                     </div>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>

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;
 
@@ -17,8 +18,7 @@ class Release extends React.Component {
             loading: true,
             app: null,
             uuid: null
-        }
+        };
-
     }
 
     componentDidMount() {
@@ -41,7 +41,6 @@ class Release extends React.Component {
         //send request to the invoker
         axios.get(
             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,7 +52,8 @@ 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');
@@ -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) {
             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}