From 05d23272050fbfc272277fa578091cb418649613 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Fri, 21 Jun 2019 00:02:19 +0530
Subject: [PATCH] Complete lifecycle component in APPM publisher UI

---
 .../apps/release/lifeCycle/LifeCycle.js       | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git 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
index 72f2b11869..24f721a0c4 100644
--- 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
@@ -1,5 +1,5 @@
 import React from "react";
-import {Typography, Tag, Divider, Select, Button, Modal, message, notification} from "antd";
+import {Typography, Tag, Divider, Select, Button, Modal, message, notification, Collapse} from "antd";
 import axios from "axios";
 import config from "../../../../../public/conf/config.json";
 
@@ -9,6 +9,7 @@ import './LifeCycle.css';
 
 const {Text, Title, Paragraph} = Typography;
 const {Option} = Select;
+const Panel = Collapse.Panel;
 
 const modules = {
     toolbar: [
@@ -193,6 +194,33 @@ class LifeCycle extends React.Component {
                     Change
                 </Button>
 
+
+                <Divider/>
+                <Text strong={true}>Lorem Ipsum</Text>
+                <Collapse defaultActiveKey={currentStatus}>
+                    {
+                        Object.keys(lifecycle).map(lifecycleState => {
+                            return (
+                                <Panel header={lifecycleState} key={lifecycleState}>
+                                    {
+                                        Object.keys(lifecycle).map(state => {
+                                            // console.log(lifecycle[lifecycleState].proceedingStates);
+                                            const isEnabled = lifecycle[lifecycleState].hasOwnProperty("proceedingStates") && (lifecycle[lifecycleState].proceedingStates.includes(state));
+                                            const color = isEnabled ? "green" : "";
+                                            return (
+                                                <Tag
+                                                    disabled={!isEnabled}
+                                                    key={state} style={{marginBottom: 5}} color={color}>{state}</Tag>
+                                            )
+                                        })
+                                    }
+                                </Panel>
+                            )
+                        })
+                    }
+
+                </Collapse>
+
                 <Modal
                     title="Confirm changing lifecycle state"
                     visible={this.state.isReasonModalVisible}