Create new action for lifecycle modal

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js

@@ -1,10 +1,13 @@
 import React from "react";
 import LifeCycleGraph from "./LifeCycleGraph";
 import {connect} from "react-redux";
-import {getLifecycle, openReleasesModal} from "../../../js/actions";
+import {getLifecycle, openLifecycleModal} from "../../../js/actions";
+import {Button} from "antd";
+import LifecycleModal from "./LifecycleModal";
 
 const mapDispatchToProps = dispatch => ({
-    getLifecycle: () => dispatch(getLifecycle())
+    getLifecycle: () => dispatch(getLifecycle()),
+    openLifecycleModal: (nextState) => dispatch(openLifecycleModal(nextState))
 });
 
 const mapStateToProps = state => {
@@ -14,19 +17,35 @@ const mapStateToProps = state => {
 };
 
 class ConnectedLifeCycle extends React.Component {
+
+    constructor(props){
+        super(props);
+
+        this.openModal = this.openModal.bind(this);
+    }
+
     componentDidMount() {
         this.props.getLifecycle();
     }
 
+    openModal() {
+        console.log(this.props);
+        this.props.openLifecycleModal("IN_REVIEW");
+    }
+
     render() {
         console.log();
         const lifecycle = this.props.lifecycle;
-        if(lifecycle != null){
+        if (lifecycle != null) {
             return (
-                <LifeCycleGraph currentStatus={this.props.currentStatus} lifecycle={this.props.lifecycle}/>
+                <div>
+                    <LifecycleModal/>
+                    <Button onClick={this.openModal}>aaaa</Button>
+                    <LifeCycleGraph currentStatus={this.props.currentStatus} lifecycle={this.props.lifecycle}/>
+                </div>
             );
 
-        }else {
+        } else {
             return null;
         }
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js

@@ -25,11 +25,10 @@ class LifeCycleGraph extends React.Component {
             let color = "rgb(83, 92, 104)";
             if (stateName === this.props.currentStatus) {
                 color = "rgb(192,255,0)";
-            }else if(nextStates.includes(stateName)){
+            } else if (nextStates.includes(stateName)) {
                 color = "rgb(0,192,255)";
             }
             const node = createNode(stateName, color);
-            // node.addPort()
             nodes.push(node);
             lifecycle[stateName].node = node;
         });
@@ -47,6 +46,11 @@ class LifeCycleGraph extends React.Component {
 
         nodes.forEach((node) => {
             model.addNode(node);
+            // node.addListener({
+            //     selectionChanged: (node, isSelected) => {
+            //         console.log(isSelected);
+            //     }
+            // });
         });
         links.forEach((link) => {
             model.addLink(link);
@@ -57,7 +61,7 @@ class LifeCycleGraph extends React.Component {
         engine.setDiagramModel(distributedModel);
 
         return (
-            <div style={{height: 900}}>
+            <div style={{height: 500}}>
                 <SRD.DiagramWidget diagramEngine={engine} maxNumberPointsPerLink={10} smartRouting={true}/>
             </div>
         );
@@ -87,4 +91,8 @@ function connectNodes(nodeFrom, nodeTo) {
     return nodeFrom.getPort(outPortName).link(nodeTo.getPort(inPortName));
 }
 
+function f() {
+    console.log(1);
+}
+
 export default LifeCycleGraph;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js

@@ -0,0 +1,74 @@
+import React from "react";
+import {Modal, Typography,List, Avatar} from 'antd';
+import {connect} from 'react-redux';
+
+// connecting state.releaseView with the component
+const mapStateToProps = state => {
+    console.log(state);
+    return {
+        nextState: state.lifecycleModal.nextState,
+        visible: state.lifecycleModal.visible
+    }
+};
+
+const Text = Typography;
+
+class ConnectedLifecycleModal extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            visible: false
+        };
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps !== this.props) {
+            console.log(nextProps);
+            this.setState({
+                visible: nextProps.visible
+            })
+        }
+    }
+
+    showModal = () => {
+        this.setState({
+            visible: true,
+        });
+    };
+
+    handleOk = (e) => {
+        this.setState({
+            visible: false,
+        });
+    };
+
+    handleCancel = (e) => {
+        this.setState({
+            visible: false,
+        });
+    };
+
+    render() {
+        if (this.props.nextState != null) {
+            const nextState = this.props.nextState;
+            return (
+                <div>
+                    <Modal
+                        title="Change State"
+                        visible={this.state.visible}
+                        onOk={this.handleOk}
+                        onCancel={this.handleCancel}
+                    >
+                        <p>Some contents...</p>
+                    </Modal>
+                </div>
+            );
+        } else {
+            return null;
+        }
+    }
+}
+
+const LifecycleModal = connect(mapStateToProps, null)(ConnectedLifecycleModal);
+
+export default LifecycleModal;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js

@@ -55,6 +55,17 @@ export const openReleasesModal = (app) => dispatch => {
     });
 };
 
+
+export const openLifecycleModal = (nextState) => dispatch => {
+    console.log(nextState);
+    dispatch({
+        type: ActionTypes.OPEN_LIFECYCLE_MODAL,
+        payload: {
+            nextState: nextState
+        }
+    });
+};
+
 export const getLifecycle = ()=> dispatch =>{
     const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/lifecycle-config";
 

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/ActionTypes.js

@@ -6,8 +6,8 @@ const ActionTypes = keyMirror({
     OPEN_RELEASES_MODAL: null,
     CLOSE_RELEASES_MODAL: null,
     GET_RELEASE: null,
-    GET_LIFECYCLE: null
+    GET_LIFECYCLE: null,
-
+    OPEN_LIFECYCLE_MODAL: null
 });
 
 export default ActionTypes;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js

@@ -7,7 +7,11 @@ const initialState = {
         app: null
     },
     release: null,
-    lifecycle: null
+    lifecycle: null,
+    lifecycleModal:{
+        visible: false,
+        nextState: null
+    }
 };
 
 function rootReducer(state = initialState, action) {
@@ -30,6 +34,13 @@ function rootReducer(state = initialState, action) {
         return Object.assign({}, state, {
             lifecycle: action.payload
         });
+    }else if (action.type === ActionTypes.OPEN_LIFECYCLE_MODAL) {
+        return Object.assign({}, state, {
+            lifecycleModal: {
+                visible: true,
+                nextState: action.payload.nextState
+            }
+        });
     }
     return state;
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js

@@ -69,14 +69,15 @@ class ConnectedRelease extends React.Component {
                                 <ReleaseView release={release}/>
                             </Card>
                         </Col>
-                        <Col span={8}>
+                    </Row>
+                    <Row style={{padding: 10}}>
+                        <Col>
                             <Card>
-                               <LifeCycle currentStatus={release.currentStatus.toUpperCase()}/>
+                                <LifeCycle currentStatus={release.currentStatus.toUpperCase()}/>
                             </Card>
                         </Col>
                     </Row>
                 </div>
-
             </div>
 
         );