From 4864d5f8ec39e1ad2f2e0652c1d516a145d08129 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Tue, 30 Apr 2019 15:50:05 +0530
Subject: [PATCH 1/8] moved components to sub directory

---
 .../react-app/src/components/{ => apps}/AppCard.js              | 2 +-
 .../react-app/src/components/{ => apps}/AppList.js              | 2 +-
 .../react-app/src/pages/dashboard/apps/Apps.js                  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/{ => apps}/AppCard.js (94%)
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/{ => apps}/AppList.js (94%)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/AppCard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js
similarity index 94%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/AppCard.js
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js
index d965e05d7f0..ac1f66f2da3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/AppCard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js
@@ -2,7 +2,7 @@ import {
     Skeleton, Switch, Card, Icon, Avatar, Typography
 } from 'antd';
 import React from "react";
-import config from "../../public/conf/config.json";
+import config from "../../../public/conf/config.json";
 
 const { Meta } = Card;
 const { Text } = Typography;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/AppList.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppList.js
similarity index 94%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/AppList.js
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppList.js
index d6c54f4039a..08da7efe86f 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/AppList.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppList.js
@@ -2,7 +2,7 @@ import React from "react";
 import AppCard from "./AppCard";
 import {Col, Row} from "antd";
 import {connect} from "react-redux";
-import {getApps} from "../js/actions";
+import {getApps} from "../../js/actions";
 
 // connecting state.articles with the component
 const mapStateToProps= state => {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js
index 92d366a3ae6..13477af124c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js
@@ -1,7 +1,7 @@
 import React from "react";
 import "antd/dist/antd.css";
 import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
-import AppList from "../../../components/AppList";
+import AppList from "../../../components/apps/AppList";
 
 const Search = Input.Search;
 

From 31ce3fb9d09cca17d383712cbd527c5cffce4719 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Tue, 30 Apr 2019 16:54:36 +0530
Subject: [PATCH 2/8] changed action types to single object

---
 .../react-app/package.json                       |  1 +
 .../react-app/src/js/actions/index.js            |  4 ++--
 .../react-app/src/js/constants/ActionTypes.js    | 16 ++++++++++++++++
 .../react-app/src/js/constants/action-types.js   |  3 ---
 .../react-app/src/js/reducers/index.js           |  4 ++--
 5 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/ActionTypes.js
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/action-types.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
index ba015d08d14..2abcaecd713 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
@@ -13,6 +13,7 @@
     "acorn": "^6.1.1",
     "antd": "^3.15.0",
     "axios": "^0.18.0",
+    "keymirror": "^0.1.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-highlight-words": "^0.16.0",
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 05da75eb702..b589331769b 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
@@ -1,5 +1,5 @@
 import axios from "axios";
-import {GET_APPS} from "../constants/action-types";
+import ActionTypes from "../constants/ActionTypes";
 import config from "../../../public/conf/config.json";
 
 export function getApps() {
@@ -16,7 +16,7 @@ export function getApps() {
                     apps = res.data.data.applications;
                 }
                 console.log(res.data);
-                dispatch({type: GET_APPS, payload: apps});
+                dispatch({type: ActionTypes.GET_APPS, payload: apps});
             }
 
         }).catch(function (error) {
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
new file mode 100644
index 00000000000..036e0e595f9
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/ActionTypes.js
@@ -0,0 +1,16 @@
+import keyMirror from 'keymirror';
+
+// export const LOGIN = "LOGIN";
+// export const GET_APPS = "GET_APPS";
+// export const OPEN_RELEASES_MODAL = "OPEN_RELEASES_MODAL";
+// export const CLOSE_RELEASES_MODAL = "CLOSE_RELEASES_MODAL";
+
+const ActionTypes = keyMirror({
+    LOGIN: null,
+    GET_APPS: null,
+    OPEN_RELEASES_MODAL: null,
+    CLOSE_RELEASES_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/constants/action-types.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/action-types.js
deleted file mode 100644
index e270ea0c6aa..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/action-types.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const LOGIN = "LOGIN";
-export const GET_APPS = "GET_APPS";
-
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 30934026425..5dcda40c8b4 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
@@ -1,11 +1,11 @@
-import {GET_APPS} from "../constants/action-types";
+import ActionTypes from "../constants/ActionTypes";
 
 const initialState = {
     apps: []
 };
 
 function rootReducer(state = initialState, action) {
-    if (action.type === GET_APPS) {
+    if (action.type === ActionTypes.GET_APPS) {
         console.log(11);
         return Object.assign({}, state, {
             apps: action.payload

From fffad9eea4294097e48ff3a2802660e1f1a5a508 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Tue, 30 Apr 2019 18:03:33 +0530
Subject: [PATCH 3/8] displayed modal title from redux

---
 .../react-app/src/components/apps/AppList.js  |  2 +-
 .../src/components/apps/ReleaseModal.js       | 68 +++++++++++++++++++
 .../react-app/src/js/actions/index.js         | 46 +++++++------
 .../react-app/src/js/reducers/index.js        | 15 +++-
 .../src/pages/dashboard/apps/Apps.js          |  2 +
 5 files changed, 111 insertions(+), 22 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppList.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppList.js
index 08da7efe86f..599e6be2d0c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppList.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppList.js
@@ -4,7 +4,7 @@ import {Col, Row} from "antd";
 import {connect} from "react-redux";
 import {getApps} from "../../js/actions";
 
-// connecting state.articles with the component
+// connecting state.apps with the component
 const mapStateToProps= state => {
     return {apps : state.apps}
 };
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js
new file mode 100644
index 00000000000..bb09ca6e432
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js
@@ -0,0 +1,68 @@
+import React from "react";
+import {Modal, Button} from 'antd';
+import { connect } from 'react-redux';
+
+// connecting state.releaseView with the component
+const mapStateToProps = state => {
+    return {releaseView: state.releaseView}
+};
+
+class ConnectedReleaseModal extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            visible: false
+        };
+    }
+    componentWillReceiveProps(nextProps) {
+        if (nextProps !== this.props) {
+            this.setState({
+               visible: nextProps.releaseView.visible
+            })
+        }
+    }
+
+    showModal = () => {
+        this.setState({
+            visible: true,
+        });
+    };
+
+    handleOk = (e) => {
+        console.log(e);
+        this.setState({
+            visible: false,
+        });
+    };
+
+    handleCancel = (e) => {
+        console.log(e);
+        this.setState({
+            visible: false,
+        });
+    };
+
+    render() {
+        return (
+            <div>
+                <Button type="primary" onClick={this.showModal}>
+                    Open Modal
+                </Button>
+                <Modal
+                    title={this.props.releaseView.title}
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    onCancel={this.handleCancel}
+                >
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                </Modal>
+            </div>
+        );
+    }
+}
+
+const ReleaseModal = connect(mapStateToProps,null)(ConnectedReleaseModal);
+
+export default ReleaseModal;
\ 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 b589331769b..cd9fc1adc61 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
@@ -2,30 +2,38 @@ import axios from "axios";
 import ActionTypes from "../constants/ActionTypes";
 import config from "../../../public/conf/config.json";
 
-export function getApps() {
+export const getApps = () => dispatch => {
 
-    return (dispatch) => {
-        const request = "method=post&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications";
 
-        return axios.post('https://'+config.serverConfig.hostname+':'+config.serverConfig.httpsPort+config.serverConfig.invokerUri, request
-        ).then(res => {
-            if (res.status === 200) {
-                let apps = [];
+    const request = "method=post&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications";
 
-                if(res.data.data.hasOwnProperty("applications")){
-                    apps = res.data.data.applications;
-                }
-                console.log(res.data);
-                dispatch({type: ActionTypes.GET_APPS, payload: apps});
-            }
+    return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+    ).then(res => {
+        if (res.status === 200) {
+            let apps = [];
 
-        }).catch(function (error) {
-            if (error.response.status === 401) {
-                window.location.href = 'https://localhost:9443/publisher/login';
+            if (res.data.data.hasOwnProperty("applications")) {
+                apps = res.data.data.applications;
             }
-        });
+            console.log(res.data);
+            dispatch({type: ActionTypes.GET_APPS, payload: apps});
+        }
+
+    }).catch(function (error) {
+        if (error.response.status === 401) {
+            window.location.href = 'https://localhost:9443/publisher/login';
+        }
+    });
+
 
-    };
+};
 
+export const openReleasesModal = () => dispatch => {
+    dispatch({
+        type: ActionTypes.OPEN_RELEASES_MODAL,
+        payload: {
+            title :"hi"
+        }
+    });
+};
 
-}
\ 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 5dcda40c8b4..c2e5074064d 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
@@ -1,17 +1,28 @@
 import ActionTypes from "../constants/ActionTypes";
 
 const initialState = {
-    apps: []
+    apps: [],
+    releaseView: {
+        visible: false,
+        title: "hi"
+    }
 };
 
 function rootReducer(state = initialState, action) {
     if (action.type === ActionTypes.GET_APPS) {
-        console.log(11);
         return Object.assign({}, state, {
             apps: action.payload
         });
+    } else if (action.type === ActionTypes.OPEN_RELEASES_MODAL) {
+        return Object.assign({}, state, {
+            releaseView: {
+                visible: true,
+                title: action.title
+            }
+        });
     }
     return state;
 }
 
+
 export default rootReducer;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js
index 13477af124c..e24f40a6eae 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js
@@ -2,6 +2,7 @@ import React from "react";
 import "antd/dist/antd.css";
 import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
 import AppList from "../../../components/apps/AppList";
+import ReleaseModal from "../../../components/apps/ReleaseModal";
 
 const Search = Input.Search;
 
@@ -46,6 +47,7 @@ class Apps extends React.Component {
                             <Button style={{margin:5}}>Advanced Search</Button>
                         </Col>
                     </Row>
+                    <ReleaseModal/>
                     <AppList/>
                 </div>
 

From 9843e6f0e2f61c6e66eefa8e7fd588dd0e6b29c0 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Tue, 30 Apr 2019 21:55:39 +0530
Subject: [PATCH 4/8] loaded modal with redux

---
 .../react-app/src/components/apps/AppCard.js  | 17 ++++++-
 .../react-app/src/components/apps/AppList.js  |  1 +
 .../src/components/apps/ReleaseModal.js       | 49 ++++++++++---------
 .../react-app/src/js/actions/index.js         |  5 +-
 .../react-app/src/js/reducers/index.js        |  4 +-
 5 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js
index ac1f66f2da3..8fa60bffcc4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js
@@ -3,14 +3,25 @@ import {
 } from 'antd';
 import React from "react";
 import config from "../../../public/conf/config.json";
+import {openReleasesModal} from "../../js/actions";
+import {connect} from "react-redux";
 
 const { Meta } = Card;
 const { Text } = Typography;
 
-class AppCard extends React.Component {
+const mapDispatchToProps = dispatch => ({
+    openReleasesModal: (app) => dispatch(openReleasesModal(app))
+});
+
+class ConnectedAppCard extends React.Component {
 
     constructor(props){
         super(props);
+        this.handleReleasesClick = this.handleReleasesClick.bind(this);
+    }
+
+    handleReleasesClick(){
+        this.props.openReleasesModal(this.props.app);
     }
 
 
@@ -33,7 +44,7 @@ class AppCard extends React.Component {
         );
 
         return (
-                <Card style={{marginTop: 16 }}  actions={[<Icon type="edit" />, <Icon type="close" />, <Icon type="ellipsis" />]}>
+                <Card style={{marginTop: 16 }}  actions={[<Icon type="edit" />, <Icon type="close" />, <Icon type="ellipsis" onClick={this.handleReleasesClick} />]}>
                     <Meta
                         avatar={<Avatar src={icon} />}
                         title={this.props.name}
@@ -44,4 +55,6 @@ class AppCard extends React.Component {
     }
 }
 
+const AppCard = connect(null,mapDispatchToProps)(ConnectedAppCard);
+
 export default AppCard;
\ 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/AppList.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppList.js
index 599e6be2d0c..00f715825f0 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppList.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppList.js
@@ -24,6 +24,7 @@ class ConnectedAppList extends React.Component {
                 {this.props.apps.map(app => (
                     <Col key={app.id} xs={24} sm={12} md={6} lg={6}>
                         <AppCard key={app.id}
+                                 app = {app}
                                  name={app.name}
                                  platform={app.deviceType}
                                  type={app.type}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js
index bb09ca6e432..04aa767abeb 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js
@@ -1,5 +1,5 @@
 import React from "react";
-import {Modal, Button} from 'antd';
+import {Modal, Typography} from 'antd';
 import { connect } from 'react-redux';
 
 // connecting state.releaseView with the component
@@ -7,17 +7,21 @@ const mapStateToProps = state => {
     return {releaseView: state.releaseView}
 };
 
+const Text = Typography;
+
 class ConnectedReleaseModal extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            visible: false
+            visible: false,
+            app: null
         };
     }
     componentWillReceiveProps(nextProps) {
         if (nextProps !== this.props) {
             this.setState({
-               visible: nextProps.releaseView.visible
+               visible: nextProps.releaseView.visible,
+                app: nextProps.releaseView.app
             })
         }
     }
@@ -29,37 +33,38 @@ class ConnectedReleaseModal extends React.Component {
     };
 
     handleOk = (e) => {
-        console.log(e);
         this.setState({
             visible: false,
         });
     };
 
     handleCancel = (e) => {
-        console.log(e);
         this.setState({
             visible: false,
         });
     };
 
     render() {
-        return (
-            <div>
-                <Button type="primary" onClick={this.showModal}>
-                    Open Modal
-                </Button>
-                <Modal
-                    title={this.props.releaseView.title}
-                    visible={this.state.visible}
-                    onOk={this.handleOk}
-                    onCancel={this.handleCancel}
-                >
-                    <p>Some contents...</p>
-                    <p>Some contents...</p>
-                    <p>Some contents...</p>
-                </Modal>
-            </div>
-        );
+        if(this.props.releaseView.app != null){
+            const app = this.props.app;
+
+            return (
+                <div>
+                    <Modal
+                        title={app.title}
+                        visible={this.state.visible}
+                        onOk={this.handleOk}
+                        onCancel={this.handleCancel}
+                    >
+                        <p>Some contents...</p>
+                        <p>Some contents...</p>
+                        <p>Some contents...</p>
+                    </Modal>
+                </div>
+            );
+        }else {
+            return null;
+        }
     }
 }
 
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 cd9fc1adc61..ba225caf320 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
@@ -28,11 +28,12 @@ export const getApps = () => dispatch => {
 
 };
 
-export const openReleasesModal = () => dispatch => {
+export const openReleasesModal = (app) => dispatch => {
+    console.log(app);
     dispatch({
         type: ActionTypes.OPEN_RELEASES_MODAL,
         payload: {
-            title :"hi"
+            app:app
         }
     });
 };
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 c2e5074064d..51db6d4e50a 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
@@ -4,7 +4,7 @@ const initialState = {
     apps: [],
     releaseView: {
         visible: false,
-        title: "hi"
+        app: null
     }
 };
 
@@ -17,7 +17,7 @@ function rootReducer(state = initialState, action) {
         return Object.assign({}, state, {
             releaseView: {
                 visible: true,
-                title: action.title
+                app: action.payload.app
             }
         });
     }

From 9dc007c1da2f807a369bee34157158139cd3b57e Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Tue, 30 Apr 2019 22:32:59 +0530
Subject: [PATCH 5/8] loaded releases in modal (basic view)

---
 .../src/components/apps/ReleaseModal.js       | 33 ++++++++++++-------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js
index 04aa767abeb..cdce5b08384 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js
@@ -1,6 +1,6 @@
 import React from "react";
-import {Modal, Typography} from 'antd';
-import { connect } from 'react-redux';
+import {Modal, Typography,List, Avatar} from 'antd';
+import {connect} from 'react-redux';
 
 // connecting state.releaseView with the component
 const mapStateToProps = state => {
@@ -17,10 +17,11 @@ class ConnectedReleaseModal extends React.Component {
             app: null
         };
     }
+
     componentWillReceiveProps(nextProps) {
         if (nextProps !== this.props) {
             this.setState({
-               visible: nextProps.releaseView.visible,
+                visible: nextProps.releaseView.visible,
                 app: nextProps.releaseView.app
             })
         }
@@ -45,29 +46,39 @@ class ConnectedReleaseModal extends React.Component {
     };
 
     render() {
-        if(this.props.releaseView.app != null){
-            const app = this.props.app;
-
+        if (this.props.releaseView.app != null) {
+            const app = this.props.releaseView.app;
             return (
                 <div>
                     <Modal
-                        title={app.title}
+                        title={app.name}
                         visible={this.state.visible}
                         onOk={this.handleOk}
                         onCancel={this.handleCancel}
                     >
                         <p>Some contents...</p>
-                        <p>Some contents...</p>
-                        <p>Some contents...</p>
+                        <List
+                        itemLayout="horizontal"
+                        dataSource={app.applicationReleases}
+                        renderItem={item => (
+                            <List.Item>
+                                <List.Item.Meta
+                                    avatar={<Avatar src={item.iconPath} />}
+                                    title={<a href="https://ant.design">Title</a>}
+                                    description={item.description}
+                                />
+                            </List.Item>
+                        )}
+                    />
                     </Modal>
                 </div>
             );
-        }else {
+        } else {
             return null;
         }
     }
 }
 
-const ReleaseModal = connect(mapStateToProps,null)(ConnectedReleaseModal);
+const ReleaseModal = connect(mapStateToProps, null)(ConnectedReleaseModal);
 
 export default ReleaseModal;
\ No newline at end of file

From 20b13d15126a4422453166ef055bb5bb4a87e1de Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Thu, 2 May 2019 11:16:21 +0530
Subject: [PATCH 6/8] changed Icon and color on App Card

---
 .../react-app/src/components/apps/AppCard.js                    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js
index 8fa60bffcc4..2d78b656970 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js
@@ -44,7 +44,7 @@ class ConnectedAppCard extends React.Component {
         );
 
         return (
-                <Card style={{marginTop: 16 }}  actions={[<Icon type="edit" />, <Icon type="close" />, <Icon type="ellipsis" onClick={this.handleReleasesClick} />]}>
+                <Card style={{marginTop: 16 }}  actions={[<Icon type="edit" />, <Icon type="delete" />, <Icon type="appstore" theme="twoTone" onClick={this.handleReleasesClick} />]}>
                     <Meta
                         avatar={<Avatar src={icon} />}
                         title={this.props.name}

From 1d14bc39c489807fdcb0ca9e16d6daf622d22557 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Thu, 2 May 2019 14:05:17 +0530
Subject: [PATCH 7/8] Link release to Release component

---
 .../src/components/apps/ReleaseModal.js       |  9 +--
 .../react-app/src/index.js                    |  8 ++-
 .../pages/dashboard/apps/release/Release.js   | 63 +++++++++++++++++++
 3 files changed, 75 insertions(+), 5 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js
index cdce5b08384..661ba1efbd0 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {Modal, Typography,List, Avatar} from 'antd';
 import {connect} from 'react-redux';
+import {Link} from "react-router-dom";
 
 // connecting state.releaseView with the component
 const mapStateToProps = state => {
@@ -60,12 +61,12 @@ class ConnectedReleaseModal extends React.Component {
                         <List
                         itemLayout="horizontal"
                         dataSource={app.applicationReleases}
-                        renderItem={item => (
+                        renderItem={release => (
                             <List.Item>
                                 <List.Item.Meta
-                                    avatar={<Avatar src={item.iconPath} />}
-                                    title={<a href="https://ant.design">Title</a>}
-                                    description={item.description}
+                                    avatar={<Avatar src={release.iconPath} />}
+                                    title={<Link to={"/publisher/apps/releases/"+release.uuid}>{release.version}</Link>}
+                                    description={release.description}
                                 />
                             </List.Item>
                         )}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js
index 829941613a6..623840107a2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js
@@ -5,6 +5,7 @@ import App from "./App";
 import Login from "./pages/Login";
 import Dashboard from "./pages/dashboard/Dashboard";
 import Apps from "./pages/dashboard/apps/Apps";
+import Release from "./pages/dashboard/apps/release/Release";
 import AddNewApp from "./pages/dashboard/add-new-app/AddNewApp";
 import './index.css';
 import store from "./js/store/index";
@@ -31,6 +32,11 @@ const routes = [
                 path: '/publisher/apps/new-app',
                 component: AddNewApp,
                 exact: true
+            },
+            {
+                path: '/publisher/apps/releases/:uuid',
+                exact: true,
+                component: Release
             }
         ]
     }
@@ -39,7 +45,7 @@ const routes = [
 
 ReactDOM.render(
     <Provider store={store}>
-            <App routes={routes}/>
+        <App routes={routes}/>
     </Provider>,
     document.getElementById('root'));
 
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
new file mode 100644
index 00000000000..d497aed19d3
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
@@ -0,0 +1,63 @@
+import React from "react";
+import "antd/dist/antd.css";
+import {PageHeader, Typography, Input, Button, Row, Col} from "antd";
+
+
+const Search = Input.Search;
+
+const routes = [
+    {
+        path: 'index',
+        breadcrumbName: 'Publisher',
+    },
+    {
+        path: 'first',
+        breadcrumbName: 'Dashboard',
+    },
+    {
+        path: 'second',
+        breadcrumbName: 'Apps',
+    },
+];
+
+
+class Release extends React.Component {
+    routes;
+
+    constructor(props) {
+        super(props);
+        this.routes = props.routes;
+
+    }
+
+    componentDidMount() {
+
+    }
+
+    render() {
+        const {uuid} = this.props.match.params;
+        return (
+            <div>
+                <PageHeader
+                    breadcrumb={{routes}}
+                />
+                <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
+                    <Row style={{padding: 10}}>
+                        <Col span={6} offset={18}>
+                            <Search
+                                placeholder="search"
+                                onSearch={value => console.log(value)}
+                                style={{width: 200}}
+                            />
+                            <Button style={{margin: 5}}>Advanced Search</Button>
+                        </Col>
+                    </Row>
+                </div>
+
+            </div>
+
+        );
+    }
+}
+
+export default Release;

From 1712792d87945127981492f9b722d2f9afc4d679 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Fri, 3 May 2019 15:41:17 +0530
Subject: [PATCH 8/8] display release

---
 .../components/apps/release/ReleaseView.js    | 33 ++++++++++++++
 .../react-app/src/js/actions/index.js         | 23 +++++++++-
 .../react-app/src/js/constants/ActionTypes.js |  3 +-
 .../react-app/src/js/reducers/index.js        |  8 +++-
 .../pages/dashboard/apps/release/Release.js   | 43 +++++++++++++------
 5 files changed, 94 insertions(+), 16 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
new file mode 100644
index 00000000000..8e0953c9c35
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -0,0 +1,33 @@
+import React from "react";
+import {Avatar, Row, Col, Typography} from "antd";
+
+const {Title, Text} = Typography;
+
+class ReleaseView extends React.Component {
+    render() {
+        const release = this.props.release;
+        return (
+            <div>
+                <Row>
+                    <Col span={4}>
+                        <Avatar size={128} shape="square"
+                                src={release.iconPath}/>
+                    </Col>
+                    <Col span={18}>
+                        <Title level={2}>App Name</Title>
+                        <Text>{release.version}</Text><br/>
+                        <Text type="secondary">{release.description}</Text>
+                    </Col>
+                </Row>
+                <br/>
+                <Row>
+                    <Col span={6}>
+                        <img style={{width:"100%"}} src={release.screenshotPath1}/>
+                    </Col>
+                </Row>
+            </div>
+        );
+    }
+}
+
+export default ReleaseView;
\ 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 ba225caf320..de94675a262 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
@@ -4,7 +4,6 @@ import config from "../../../public/conf/config.json";
 
 export const getApps = () => dispatch => {
 
-
     const request = "method=post&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications";
 
     return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
@@ -26,6 +25,28 @@ export const getApps = () => dispatch => {
     });
 
 
+};
+
+export const getRelease = (uuid) => dispatch => {
+
+    const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/release/"+uuid;
+
+    return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+    ).then(res => {
+        if (res.status === 200) {
+            let release = res.data.data;
+
+            console.log(res.data);
+            dispatch({type: ActionTypes.GET_RELEASE, payload: release});
+        }
+
+    }).catch(function (error) {
+        if (error.response.status === 401) {
+            window.location.href = 'https://localhost:9443/publisher/login';
+        }
+    });
+
+
 };
 
 export const openReleasesModal = (app) => dispatch => {
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 036e0e595f9..211bd739a4f 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
@@ -9,7 +9,8 @@ const ActionTypes = keyMirror({
     LOGIN: null,
     GET_APPS: null,
     OPEN_RELEASES_MODAL: null,
-    CLOSE_RELEASES_MODAL: null
+    CLOSE_RELEASES_MODAL: null,
+    GET_RELEASE: null
 
 });
 
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 51db6d4e50a..5a9b3796574 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
@@ -5,7 +5,8 @@ const initialState = {
     releaseView: {
         visible: false,
         app: null
-    }
+    },
+    release: null
 };
 
 function rootReducer(state = initialState, action) {
@@ -20,6 +21,11 @@ function rootReducer(state = initialState, action) {
                 app: action.payload.app
             }
         });
+    }else if(action.type === ActionTypes.GET_RELEASE){
+        return Object.assign({}, state, {
+            release: action.payload
+        });
+
     }
     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 d497aed19d3..aad15ec595c 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
@@ -1,9 +1,11 @@
 import React from "react";
-import "antd/dist/antd.css";
-import {PageHeader, Typography, Input, Button, Row, Col} from "antd";
-
+import {PageHeader, Typography, Input, Button, Row, Col, Avatar, Card} from "antd";
+import {connect} from "react-redux";
+import ReleaseView from "../../../../components/apps/release/ReleaseView";
+import {getRelease} from "../../../../js/actions";
 
 const Search = Input.Search;
+const {Title} = Typography;
 
 const routes = [
     {
@@ -20,8 +22,15 @@ const routes = [
     },
 ];
 
+const mapStateToProps = state => {
+    return {release: state.release}
+};
+
+const mapDispatchToProps = dispatch => ({
+    getRelease: (uuid) => dispatch(getRelease(uuid))
+});
 
-class Release extends React.Component {
+class ConnectedRelease extends React.Component {
     routes;
 
     constructor(props) {
@@ -31,11 +40,20 @@ class Release extends React.Component {
     }
 
     componentDidMount() {
-
+        const {uuid} = this.props.match.params;
+        this.props.getRelease(uuid);
     }
 
     render() {
-        const {uuid} = this.props.match.params;
+
+        const release = this.props.release;
+        if (release == null) {
+            return (
+                <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
+                    <Title level={3}>No Releases Found</Title>
+                </div>
+            );
+        }
         return (
             <div>
                 <PageHeader
@@ -43,13 +61,10 @@ class Release extends React.Component {
                 />
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
                     <Row style={{padding: 10}}>
-                        <Col span={6} offset={18}>
-                            <Search
-                                placeholder="search"
-                                onSearch={value => console.log(value)}
-                                style={{width: 200}}
-                            />
-                            <Button style={{margin: 5}}>Advanced Search</Button>
+                        <Col span={18}>
+                            <Card>
+                                <ReleaseView release={release}/>
+                            </Card>
                         </Col>
                     </Row>
                 </div>
@@ -60,4 +75,6 @@ class Release extends React.Component {
     }
 }
 
+const Release = connect(mapStateToProps,mapDispatchToProps)(ConnectedRelease);
+
 export default Release;