From b39a52fd7c477d85fda04697f68a1bbfa64f6858 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Thu, 9 May 2019 15:38:25 +0530 Subject: [PATCH 01/13] 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 1d76067d7f1..4896801b578 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 f5051decd19..fc25a9b306b 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 00000000000..2bef078f8f9 --- /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 f89df5fbf09..442fa33f73c 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 dd66861ec7a..53bf7e8e57c 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 0d720a35786..0a29b775005 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 c01c0b9283f..ebf96e42f1c 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 { - + + + - +
- ); From c2018da2e8e9c003657738d3534d005b7c4b38e0 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Thu, 9 May 2019 16:50:36 +0530 Subject: [PATCH 02/13] Fix issue: Publisher not opening modal for second time --- .../src/components/apps/release/LifeCycle.js | 7 +++---- .../components/apps/release/LifecycleModal.js | 19 ++++++++++++++----- .../react-app/src/js/actions/index.js | 7 ++++++- .../react-app/src/js/constants/ActionTypes.js | 3 ++- .../react-app/src/js/reducers/index.js | 7 +++++++ 5 files changed, 32 insertions(+), 11 deletions(-) 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 4896801b578..0447bd02131 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 @@ -12,7 +12,8 @@ const mapDispatchToProps = dispatch => ({ const mapStateToProps = state => { return { - lifecycle: state.lifecycle + lifecycle: state.lifecycle, + currentStatus : state.release.currentStatus.toUpperCase() }; }; @@ -29,17 +30,15 @@ class ConnectedLifeCycle extends React.Component { } openModal() { - console.log(this.props); this.props.openLifecycleModal("IN_REVIEW"); } render() { - console.log(); const lifecycle = this.props.lifecycle; if (lifecycle != null) { return (
- +
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 index 2bef078f8f9..fa1e7194501 100644 --- 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 @@ -1,16 +1,23 @@ import React from "react"; -import {Modal, Typography,List, Avatar} from 'antd'; +import {Modal, Typography,Icon,Input} from 'antd'; import {connect} from 'react-redux'; +import {closeLifecycleModal} from "../../../js/actions"; + +const { TextArea } = Input; +const { Title } = Typography; // connecting state.releaseView with the component const mapStateToProps = state => { - console.log(state); return { nextState: state.lifecycleModal.nextState, visible: state.lifecycleModal.visible } }; +const mapDispatchToProps = dispatch => ({ + closeLifecycleModal : () => dispatch(closeLifecycleModal()) +}); + const Text = Typography; class ConnectedLifecycleModal extends React.Component { @@ -23,7 +30,6 @@ class ConnectedLifecycleModal extends React.Component { componentWillReceiveProps(nextProps) { if (nextProps !== this.props) { - console.log(nextProps); this.setState({ visible: nextProps.visible }) @@ -46,6 +52,7 @@ class ConnectedLifecycleModal extends React.Component { this.setState({ visible: false, }); + this.props.closeLifecycleModal(); }; render() { @@ -59,7 +66,9 @@ class ConnectedLifecycleModal extends React.Component { onOk={this.handleOk} onCancel={this.handleCancel} > -

Some contents...

+ {this.props.currentStatus} <Icon type="arrow-right" /> {nextState} +

Reason:

+