From b39a52fd7c477d85fda04697f68a1bbfa64f6858 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Thu, 9 May 2019 15:38:25 +0530 Subject: [PATCH] Create new action for lifecycle modal --- .../src/components/apps/release/LifeCycle.js | 29 ++++++-- .../components/apps/release/LifeCycleGraph.js | 14 +++- .../components/apps/release/LifecycleModal.js | 74 +++++++++++++++++++ .../react-app/src/js/actions/index.js | 11 +++ .../react-app/src/js/constants/ActionTypes.js | 4 +- .../react-app/src/js/reducers/index.js | 13 +++- .../pages/dashboard/apps/release/Release.js | 7 +- 7 files changed, 138 insertions(+), 14 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js index 1d76067d7f..4896801b57 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js +++ b/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 ( - +
+ + + +
); - }else { + } else { return null; } } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js index f5051decd1..fc25a9b306 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js +++ b/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 ( -
+
); @@ -87,4 +91,8 @@ function connectNodes(nodeFrom, nodeTo) { return nodeFrom.getPort(outPortName).link(nodeTo.getPort(inPortName)); } +function f() { + console.log(1); +} + export default LifeCycleGraph; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js new file mode 100644 index 0000000000..2bef078f8f --- /dev/null +++ b/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 ( +
+ +

Some contents...

+ +
+ ); + } else { + return null; + } + } +} + +const LifecycleModal = connect(mapStateToProps, null)(ConnectedLifecycleModal); + +export default LifecycleModal; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js index f89df5fbf0..442fa33f73 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js +++ b/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"; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/ActionTypes.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/ActionTypes.js index dd66861ec7..53bf7e8e57 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/ActionTypes.js +++ b/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; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js index 0d720a3578..0a29b77500 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js +++ b/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; } diff --git 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 index c01c0b9283..ebf96e42f1 100644 --- 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 @@ -69,14 +69,15 @@ class ConnectedRelease extends React.Component { - + + + - +
- );