From 62d0a0480a5aed06f434f6784cfb1de3ca6de2c9 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Thu, 25 Jul 2019 19:41:20 +0530
Subject: [PATCH 1/2] Get configuration with React Context in APPM store

---
 .../components/apps/release/ReleaseView.js    | 26 +++++-
 .../react-app/src/App.js                      | 83 ++++++++++++++++---
 .../react-app/src/components/apps/AppList.js  |  6 +-
 .../components/apps/release/DetailedRating.js |  5 +-
 .../components/apps/release/ReleaseView.js    |  6 +-
 .../apps/release/install/DeviceInstall.js     |  5 +-
 .../apps/release/install/GroupInstall.js      |  5 +-
 .../apps/release/install/RoleInstall.js       |  5 +-
 .../apps/release/install/UserInstall.js       |  5 +-
 .../apps/release/review/AddReview.js          |  5 +-
 .../apps/release/review/CurrentUsersReview.js |  5 +-
 .../components/apps/release/review/Reviews.js |  5 +-
 .../review/singleReview/SingleReview.js       |  5 +-
 .../singleReview/editReview/EditReview.js     |  5 +-
 .../react-app/src/context/ConfigContext.js    | 16 ++++
 .../react-app/src/index.js                    |  2 +-
 .../react-app/src/js/utils/dagre-utils.ts     | 56 -------------
 .../react-app/src/pages/Login.js              |  6 +-
 .../src/pages/dashboard/Dashboard.js          | 10 +--
 .../pages/dashboard/apps/release/Release.js   |  6 +-
 20 files changed, 161 insertions(+), 106 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/context/ConfigContext.js
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/utils/dagre-utils.ts

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
index 7822559731..b7022888ec 100644
--- 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
@@ -1,5 +1,5 @@
 import React from "react";
-import {Divider, Row, Col, Typography, Button, Drawer} from "antd";
+import {Divider, Row, Col, Typography, Button, Drawer, Icon} from "antd";
 import StarRatings from "react-star-ratings";
 import Reviews from "./review/Reviews";
 import "../../../App.css";
@@ -16,6 +16,18 @@ class ReleaseView extends React.Component {
         if (release == null) {
             return null;
         }
+
+        const platform = app.deviceType;
+        const defaultPlatformIcons = config.defaultPlatformIcons;
+        let icon = defaultPlatformIcons.default.icon;
+        let color = defaultPlatformIcons.default.color;
+        let theme = defaultPlatformIcons.default.theme;
+        if (defaultPlatformIcons.hasOwnProperty(platform)) {
+            icon = defaultPlatformIcons[platform].icon;
+            color = defaultPlatformIcons[platform].color;
+            theme = defaultPlatformIcons[platform].theme;
+        }
+
         return (
             <div>
                 <div className="release">
@@ -25,7 +37,6 @@ class ReleaseView extends React.Component {
                         </Col>
                         <Col xl={10} sm={11} className="release-title">
                             <Title level={2}>{app.name}</Title>
-                            <Text>Version : {release.version}</Text><br/>
                             <StarRatings
                                 rating={release.rating}
                                 starRatedColor="#777"
@@ -34,6 +45,17 @@ class ReleaseView extends React.Component {
                                 numberOfStars={5}
                                 name='rating'
                             />
+                            <br/>
+                            <Text>Platform : </Text>
+                            <span style={{fontSize: 20, color: color, textAlign: "center"}}>
+                                <Icon
+                                    type={icon}
+                                    theme={theme}
+                                />
+                            </span>
+                            <Divider type="vertical"/>
+                            <Text>Version : {release.version}</Text><br/>
+
                             <EditRelease uuid={release.uuid} type={app.type}/>
                         </Col>
                         <Col xl={8} md={10} sm={24} xs={24} style={{float: "right"}}>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.js
index 2b6921e095..55814d28b3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.js
@@ -3,30 +3,89 @@ import "antd/dist/antd.less";
 import RouteWithSubRoutes from "./components/RouteWithSubRoutes";
 import {
     BrowserRouter as Router,
-    Link, Redirect, Switch,
+    Redirect, Switch,
 } from 'react-router-dom';
+import axios from "axios";
+import {Layout, Spin, Result} from "antd";
+import ConfigContext from "./context/ConfigContext";
+
+const {Content} = Layout;
+const loadingView = (
+    <Layout>
+        <Content style={{
+            padding: '0 0',
+            paddingTop: 300,
+            backgroundColor: '#fff',
+            textAlign: 'center'
+        }}>
+            <Spin tip="Loading..."/>
+        </Content>
+    </Layout>
+);
+
+const errorView = (
+    <Result
+        style={{
+            paddingTop: 200
+        }}
+        status="500"
+        title="Error occurred while loading the configuration"
+        subTitle="Please refresh your browser window"
+    />
+);
 
 class App extends React.Component {
-    routes;
 
     constructor(props) {
         super(props);
-        this.routes = props.routes;
+        this.state = {
+            loading: true,
+            error: false,
+            config: {}
+        }
+    }
+
+    componentDidMount() {
+        axios.get(
+            window.location.origin + "/store/public/conf/config.json",
+        ).then(res => {
+            console.log(res);
+            this.setState({
+                loading: false,
+                config: res.data
+            })
+        }).catch((error) => {
+            this.setState({
+                loading: false,
+                error: true
+            })
+        });
     }
 
     render() {
-        return (
+        const {loading, error} = this.state;
+
+        const applicationView = (
             <Router>
-                <div>
-                    <Switch>
-                        <Redirect exact from="/store" to="/store/android"/>
-                        {this.routes.map((route) => (
-                            <RouteWithSubRoutes key={route.path} {...route} />
-                        ))}
-                    </Switch>
-                </div>
+                <ConfigContext.Provider value={this.state.config}>
+                    <div>
+                        <Switch>
+                            <Redirect exact from="/store" to="/store/android"/>
+                            {this.props.routes.map((route) => (
+                                <RouteWithSubRoutes key={route.path} {...route} />
+                            ))}
+                        </Switch>
+                    </div>
+                </ConfigContext.Provider>
             </Router>
+        );
 
+        return (
+            <div>
+                {loading && loadingView}
+                {!loading && !error && applicationView}
+                {error && errorView}
+            </div>
         );
     }
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
index 0eb6502e74..02b41ade68 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
@@ -2,7 +2,7 @@ import React from "react";
 import AppCard from "./AppCard";
 import {Col, message, notification, Row, Result, Skeleton} from "antd";
 import axios from "axios";
-import config from "../../../public/conf/config.json";
+import {withConfigContext} from "../../context/ConfigContext";
 
 class AppList extends React.Component {
     constructor(props) {
@@ -29,7 +29,7 @@ class AppList extends React.Component {
     }
 
     fetchData = (deviceType) => {
-
+        const config = this.props.context;
         const payload = {};
         if (deviceType === "web-clip") {
             payload.appType = "WEB_CLIP";
@@ -99,4 +99,4 @@ class AppList extends React.Component {
     }
 }
 
-export default AppList;
\ No newline at end of file
+export default withConfigContext(AppList);
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js
index 90fc93b5cf..f06b8b4793 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js
@@ -2,8 +2,8 @@ import React from "react";
 import {Row, Typography, Icon} from "antd";
 import StarRatings from "react-star-ratings";
 import "./DetailedRating.css";
-import config from "../../../../public/conf/config.json";
 import axios from "axios";
+import {withConfigContext} from "../../../context/ConfigContext";
 
 const { Text } = Typography;
 
@@ -30,6 +30,7 @@ class DetailedRating extends React.Component{
     }
 
     getData = (type, uuid)=>{
+        const config = this.props.context;
 
         return axios.get(
             config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.store+"/reviews/"+uuid+"/"+type+"-rating",
@@ -117,4 +118,4 @@ class DetailedRating extends React.Component{
 }
 
 
-export default DetailedRating;
\ No newline at end of file
+export default withConfigContext(DetailedRating);
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
index 80098733eb..8ae2867966 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -5,11 +5,10 @@ import ImgViewer from "../../apps/release/images/ImgViewer";
 import StarRatings from "react-star-ratings";
 import DetailedRating from "./DetailedRating";
 import Reviews from "./review/Reviews";
-import AddReview from "./review/AddReview";
 import axios from "axios";
-import config from "../../../../public/conf/config.json";
 import AppInstallModal from "./install/AppInstallModal";
 import CurrentUsersReview from "./review/CurrentUsersReview";
+import {withConfigContext} from "../../../context/ConfigContext";
 
 const {Title, Text, Paragraph} = Typography;
 
@@ -23,6 +22,7 @@ class ReleaseView extends React.Component {
     }
 
     installApp = (type, payload) => {
+        const config = this.props.context;
         const release = this.props.app.applicationReleases[0];
         const {uuid} = release;
 
@@ -150,4 +150,4 @@ class ReleaseView extends React.Component {
     }
 }
 
-export default ReleaseView;
\ No newline at end of file
+export default withConfigContext(ReleaseView);
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
index 9ddd088697..7a804b6171 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
@@ -1,11 +1,11 @@
 import React from "react";
 import axios from "axios";
-import config from "../../../../../public/conf/config.json";
 import {Button, message, notification, Table, Typography} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
 import en from 'javascript-time-ago/locale/en'
+import {withConfigContext} from "../../../../context/ConfigContext";
 const {Text} = Typography;
 const columns = [
     {
@@ -112,6 +112,7 @@ class DeviceInstall extends React.Component {
 
     //fetch data from api
     fetch = (params = {}) => {
+        const config = this.props.context;
         this.setState({loading: true});
         const {deviceType} = this.props;
         // get current page
@@ -219,4 +220,4 @@ class DeviceInstall extends React.Component {
     }
 }
 
-export default DeviceInstall;
\ No newline at end of file
+export default withConfigContext(DeviceInstall);
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
index b2a2c68505..83ea7f7cba 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
@@ -2,7 +2,7 @@ import React from "react";
 import {Typography, Select, Spin, message, notification, Button} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
-import config from "../../../../../public/conf/config.json";
+import {withConfigContext} from "../../../../context/ConfigContext";
 
 const {Text} = Typography;
 const {Option} = Select;
@@ -25,6 +25,7 @@ class GroupInstall extends React.Component {
     fetchUser = value => {
         this.lastFetchId += 1;
         const fetchId = this.lastFetchId;
+        const config = this.props.context;
         this.setState({data: [], fetching: true});
 
         axios.post(
@@ -111,4 +112,4 @@ class GroupInstall extends React.Component {
     }
 }
 
-export default GroupInstall;
\ No newline at end of file
+export default withConfigContext(GroupInstall);
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
index 27ffc3eb1b..617634b868 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
@@ -2,7 +2,7 @@ import React from "react";
 import {Typography, Select, Spin, message, notification, Button} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
-import config from "../../../../../public/conf/config.json";
+import {withConfigContext} from "../../../../context/ConfigContext";
 
 const {Text} = Typography;
 const {Option} = Select;
@@ -23,6 +23,7 @@ class RoleInstall extends React.Component {
     };
 
     fetchUser = value => {
+        const config = this.props.context;
         this.lastFetchId += 1;
         const fetchId = this.lastFetchId;
         this.setState({data: [], fetching: true});
@@ -111,4 +112,4 @@ class RoleInstall extends React.Component {
     }
 }
 
-export default RoleInstall;
\ No newline at end of file
+export default withConfigContext(RoleInstall);
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
index 31c9a6eb6d..ec139d9071 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
@@ -2,7 +2,7 @@ import React from "react";
 import {Typography, Select, Spin, message, notification, Button} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
-import config from "../../../../../public/conf/config.json";
+import {withConfigContext} from "../../../../context/ConfigContext";
 
 const {Text} = Typography;
 const {Option} = Select;
@@ -23,6 +23,7 @@ class UserInstall extends React.Component {
     };
 
     fetchUser = value => {
+        const config = this.props.context;
         this.lastFetchId += 1;
         const fetchId = this.lastFetchId;
         this.setState({data: [], fetching: true});
@@ -111,4 +112,4 @@ class UserInstall extends React.Component {
     }
 }
 
-export default UserInstall;
\ No newline at end of file
+export default withConfigContext(UserInstall);
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/AddReview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/AddReview.js
index 55f14fbefa..f6939dfab9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/AddReview.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/AddReview.js
@@ -2,7 +2,7 @@ import React from "react";
 import {Drawer, Button, Icon, Row, Col, Typography, Divider, Input, Spin, notification} from 'antd';
 import StarRatings from "react-star-ratings";
 import axios from "axios";
-import config from "../../../../../public/conf/config.json";
+import {withConfigContext} from "../../../../context/ConfigContext";
 
 const {Title} = Typography;
 const {TextArea} = Input;
@@ -41,6 +41,7 @@ class AddReview extends React.Component {
     };
 
     onSubmit = () => {
+        const config = this.props.context;
         const {content, rating} = this.state;
         const {uuid} = this.props;
         this.setState({
@@ -159,4 +160,4 @@ class AddReview extends React.Component {
     }
 }
 
-export default AddReview;
\ No newline at end of file
+export default withConfigContext(AddReview);
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js
index 810f7b7fb8..14ef0409a6 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js
@@ -2,8 +2,8 @@ import React from "react";
 import {List, message, Typography, Empty, Button, Row, Col, notification} from "antd";
 import SingleReview from "./singleReview/SingleReview";
 import axios from "axios";
-import config from "../../../../../public/conf/config.json";
 import AddReview from "./AddReview";
+import {withConfigContext} from "../../../../context/ConfigContext";
 
 const {Text, Paragraph} = Typography;
 
@@ -23,6 +23,7 @@ class CurrentUsersReview extends React.Component {
 
     fetchData = () => {
         const {uuid} = this.props;
+        const config = this.props.context;
 
         axios.get(
             config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/app/user/" + uuid,
@@ -106,4 +107,4 @@ class CurrentUsersReview extends React.Component {
 
 }
 
-export default CurrentUsersReview;
\ No newline at end of file
+export default withConfigContext(CurrentUsersReview);
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js
index 835702bd05..3d00216e15 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js
@@ -5,7 +5,7 @@ import "./Reviews.css";
 import InfiniteScroll from 'react-infinite-scroller';
 import SingleReview from "./singleReview/SingleReview";
 import axios from "axios";
-import config from "../../../../../public/conf/config.json";
+import {withConfigContext} from "../../../../context/ConfigContext";
 
 const limit = 5;
 
@@ -29,6 +29,7 @@ class Reviews extends React.Component {
     fetchData = (offset, limit, callback) => {
 
         const {uuid, type} = this.props;
+        const config = this.props.context;
 
         axios.get(
             config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.store+"/reviews/"+type+"/"+uuid,
@@ -133,4 +134,4 @@ class Reviews extends React.Component {
     }
 }
 
-export default Reviews;
\ No newline at end of file
+export default withConfigContext(Reviews);
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js
index a5241f1c16..0d9622817e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js
@@ -6,7 +6,7 @@ import Twemoji from "react-twemoji";
 import "./SingleReview.css";
 import EditReview from "./editReview/EditReview";
 import axios from "axios";
-import config from "../../../../../../public/conf/config.json";
+import {withConfigContext} from "../../../../../context/ConfigContext";
 
 const {Text, Paragraph} = Typography;
 const colorList = ['#f0932b', '#badc58', '#6ab04c', '#eb4d4b', '#0abde3', '#9b59b6', '#3498db', '#22a6b3', '#e84393', '#f9ca24'];
@@ -38,6 +38,7 @@ class SingleReview extends React.Component {
     deleteReview = () => {
         const {uuid} = this.props;
         const {id} = this.state.review;
+        const config = this.props.context;
 
         let url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' +
             config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store;
@@ -131,4 +132,4 @@ class SingleReview extends React.Component {
     }
 }
 
-export default SingleReview;
\ No newline at end of file
+export default withConfigContext(SingleReview);
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/editReview/EditReview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/editReview/EditReview.js
index 1ec2f613bb..b382d3e8ec 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/editReview/EditReview.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/editReview/EditReview.js
@@ -2,8 +2,8 @@ import React from "react";
 import {Drawer, Button, Icon, Row, Col, Typography, Divider, Input, Spin, notification} from 'antd';
 import StarRatings from "react-star-ratings";
 import axios from "axios";
-import config from "../../../../../../../public/conf/config.json";
 import "./EditReview.css";
+import {withConfigContext} from "../../../../../../context/ConfigContext";
 
 const {Title} = Typography;
 const {TextArea} = Input;
@@ -54,6 +54,7 @@ class EditReview extends React.Component {
     };
 
     onSubmit = () => {
+        const config = this.props.context;
         const {content, rating} = this.state;
         const {id} = this.props.review;
         const {uuid} = this.props;
@@ -169,4 +170,4 @@ class EditReview extends React.Component {
     }
 }
 
-export default EditReview;
\ No newline at end of file
+export default withConfigContext(EditReview);
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/context/ConfigContext.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/context/ConfigContext.js
new file mode 100644
index 0000000000..3dfb011d50
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/context/ConfigContext.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+const ConfigContext = React.createContext();
+
+export const withConfigContext = Component => {
+    return props => (
+        <ConfigContext.Consumer>
+            {context => {
+                return <Component {...props} context={context}/>;
+            }}
+        </ConfigContext.Consumer>
+    );
+};
+
+export default ConfigContext;
+
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js
index 3e415a3cee..a6ac65a389 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js
@@ -38,7 +38,7 @@ ReactDOM.render(
     <App routes={routes}/>,
     document.getElementById('root'));
 
-// If you want your app to work offline and load faster, you can change
+// If you want your app e and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
 serviceWorker.unregister();
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/utils/dagre-utils.ts b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/utils/dagre-utils.ts
deleted file mode 100644
index 58a006f9a9..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/utils/dagre-utils.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as dagre from "dagre";
-import * as _ from "lodash";
-
-const size = {
-    width: 60,
-    height: 60
-};
-
-export function distributeElements(model) {
-    let clonedModel = _.cloneDeep(model);
-    let nodes = distributeGraph(clonedModel);
-    nodes.forEach(node => {
-        let modelNode = clonedModel.nodes.find(item => item.id === node.id);
-        modelNode.x = node.x - node.width / 2;
-        modelNode.y = node.y - node.height / 2;
-    });
-    return clonedModel;
-}
-
-function distributeGraph(model) {
-    let nodes = mapElements(model);
-    let edges = mapEdges(model);
-    let graph = new dagre.graphlib.Graph();
-    graph.setGraph({});
-    graph.setDefaultEdgeLabel(() => ({}));
-    //add elements to dagre graph
-    nodes.forEach(node => {
-        graph.setNode(node.id, node.metadata);
-    });
-    edges.forEach(edge => {
-        if (edge.from && edge.to) {
-            graph.setEdge(edge.from, edge.to);
-        }
-    });
-    //auto-distribute
-    dagre.layout(graph);
-    return graph.nodes().map(node => graph.node(node));
-}
-
-function mapElements(model) {
-    // dagre compatible format
-    return model.nodes.map(node => ({ id: node.id, metadata: { ...size, id: node.id } }));
-}
-
-function mapEdges(model) {
-    // returns links which connects nodes
-    // we check are there both from and to nodes in the model. Sometimes links can be detached
-    return model.links
-        .map(link => ({
-            from: link.source,
-            to: link.target
-        }))
-        .filter(
-            item => model.nodes.find(node => node.id === item.from) && model.nodes.find(node => node.id === item.to)
-        );
-}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
index b480b5e584..8cd95b5249 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
@@ -2,7 +2,7 @@ import React from "react";
 import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox} from 'antd';
 import './Login.css';
 import axios from 'axios';
-import config from "../../public/conf/config.json";
+import {withConfigContext} from "../context/ConfigContext";
 
 const {Title} = Typography;
 const {Text} = Typography;
@@ -59,6 +59,8 @@ class NormalLoginForm extends React.Component {
 
     handleSubmit = (e) => {
         const thisForm = this;
+        const config = this.props.context;
+
         e.preventDefault();
         this.props.form.validateFields((err, values) => {
             thisForm.setState({
@@ -146,4 +148,4 @@ class NormalLoginForm extends React.Component {
 
 const WrappedNormalLoginForm = Form.create({name: 'normal_login'})(NormalLoginForm);
 
-export default Login;
+export default withConfigContext(Login);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
index 9c2682904b..d83e3ba32c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
@@ -5,16 +5,16 @@ import {Link} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
 import {Switch} from 'react-router'
 import "../../App.css";
-import config from "../../../public/conf/config.json";
+import {withConfigContext} from "../../context/ConfigContext";
 
 class Dashboard extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             routes: props.routes,
-            selectedKeys : []
+            selectedKeys: []
         };
-        this.Logo = config.theme.logo;
+        this.logo = this.props.context.theme.logo;
     }
 
     changeSelectedMenuItem = (key) =>{
@@ -30,7 +30,7 @@ class Dashboard extends React.Component {
                 <Layout className="layout">
                     <Header style={{paddingLeft: 0, paddingRight: 0}}>
                         <div className="logo-image">
-                            <img alt="logo" src={this.Logo}/>
+                            <img alt="logo" src={this.logo}/>
                         </div>
                         <Menu
                             theme="light"
@@ -63,4 +63,4 @@ class Dashboard extends React.Component {
     }
 }
 
-export default Dashboard;
+export default withConfigContext(Dashboard);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
index 6135faf950..296d319c4d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
@@ -3,7 +3,7 @@ import '../../../../App.css';
 import {Skeleton, Typography, Row, Col, Card, message, notification} from "antd";
 import ReleaseView from "../../../../components/apps/release/ReleaseView";
 import axios from "axios";
-import config from "../../../../../public/conf/config.json";
+import {withConfigContext} from "../../../../context/ConfigContext";
 
 const {Title} = Typography;
 
@@ -36,6 +36,8 @@ class Release extends React.Component {
     }
 
     fetchData = (uuid)=>{
+        const config = this.props.context;
+
         //send request to the invoker
         axios.get(
             config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store+"/applications/"+uuid,
@@ -101,4 +103,4 @@ class Release extends React.Component {
 }
 
 
-export default Release;
+export default withConfigContext(Release);

From 151ca7d5757bfd94b59fd031af99407a2966c930 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Thu, 25 Jul 2019 20:24:19 +0530
Subject: [PATCH 2/2] Remove origin from configuration file in APPM store

---
 .../react-app/public/conf/config.json                     | 3 ---
 .../react-app/src/components/apps/AppList.js              | 4 ++--
 .../src/components/apps/release/DetailedRating.js         | 4 ++--
 .../react-app/src/components/apps/release/ReleaseView.js  | 4 ++--
 .../src/components/apps/release/install/DeviceInstall.js  | 4 ++--
 .../src/components/apps/release/install/GroupInstall.js   | 4 ++--
 .../src/components/apps/release/install/RoleInstall.js    | 4 ++--
 .../src/components/apps/release/install/UserInstall.js    | 4 ++--
 .../src/components/apps/release/review/AddReview.js       | 4 ++--
 .../components/apps/release/review/CurrentUsersReview.js  | 4 ++--
 .../src/components/apps/release/review/Reviews.js         | 4 ++--
 .../apps/release/review/singleReview/SingleReview.js      | 5 ++---
 .../release/review/singleReview/editReview/EditReview.js  | 4 ++--
 .../react-app/src/pages/Login.js                          | 8 +++++---
 .../react-app/src/pages/dashboard/apps/release/Release.js | 4 ++--
 15 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json
index ac90b4874d..3fab34b8b4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json
@@ -6,9 +6,6 @@
     "primaryColor": "rgb(24, 144, 255)"
   },
   "serverConfig": {
-    "protocol": "https",
-    "hostname": "localhost",
-    "httpsPort": "9443",
     "invokerUri": "/ui-request-handler/invoke/application-mgt-store/v1.0",
     "invoker": {
       "uri": "/store-ui-request-handler/invoke",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
index 02b41ade68..fe2732e2a4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
@@ -41,7 +41,7 @@ class AppList extends React.Component {
         });
         //send request to the invoker
         axios.post(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/applications/",
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/applications/",
             payload,
         ).then(res => {
             if (res.status === 200) {
@@ -58,7 +58,7 @@ class AppList extends React.Component {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
                 //todo display a popup with error
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+                window.location.href = window.location.origin+ '/store/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js
index f06b8b4793..08d290f37c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js
@@ -33,7 +33,7 @@ class DetailedRating extends React.Component{
         const config = this.props.context;
 
         return axios.get(
-            config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.store+"/reviews/"+uuid+"/"+type+"-rating",
+            window.location.origin+ config.serverConfig.invoker.uri +config.serverConfig.invoker.store+"/reviews/"+uuid+"/"+type+"-rating",
             ).then(res => {
             if (res.status === 200) {
                 let detailedRating = res.data.data;
@@ -44,7 +44,7 @@ class DetailedRating extends React.Component{
 
         }).catch(function (error) {
             if (error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
+                window.location.href = window.location.origin+'/publisher/login';
             }
         });
     };
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
index 8ae2867966..516ac367e4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -29,7 +29,7 @@ class ReleaseView extends React.Component {
         this.setState({
             loading: true,
         });
-        const url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/subscription/" + uuid + "/" + type + "/install";
+        const url = window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/subscription/" + uuid + "/" + type + "/install";
         axios.post(
             url,
             payload,
@@ -61,7 +61,7 @@ class ReleaseView extends React.Component {
 
         }).catch((error) => {
             if (error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+                window.location.href = window.location.origin+ '/store/login';
             } else {
                 this.setState({
                     loading: false,
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
index 7a804b6171..b1c13a6919 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
@@ -131,7 +131,7 @@ class DeviceInstall extends React.Component {
 
         //send request to the invoker
         axios.get(
-            config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt+"/devices?" + encodedExtraParams,
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt+"/devices?" + encodedExtraParams,
 
         ).then(res => {
             if (res.status === 200) {
@@ -148,7 +148,7 @@ class DeviceInstall extends React.Component {
             if (error.hasOwnProperty("status") && error.response.status === 401) {
                 //todo display a popop with error
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+                window.location.href = window.location.origin+ '/store/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
index 83ea7f7cba..7840e4f2f4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
@@ -29,7 +29,7 @@ class GroupInstall extends React.Component {
         this.setState({data: [], fetching: true});
 
         axios.post(
-            config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt+"/groups?name=" + value,
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt+"/groups?name=" + value,
 
         ).then(res => {
             if (res.status === 200) {
@@ -49,7 +49,7 @@ class GroupInstall extends React.Component {
         }).catch((error) => { console.log(error);
             if (error.hasOwnProperty("status") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
+                window.location.href = window.location.origin+'/store/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
index 617634b868..8f0db4bae1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
@@ -29,7 +29,7 @@ class RoleInstall extends React.Component {
         this.setState({data: [], fetching: true});
 
         axios.get(
-            config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt+"/roles?filter=" + value,
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt+"/roles?filter=" + value,
 
         ).then(res => {
             if (res.status === 200) {
@@ -49,7 +49,7 @@ class RoleInstall extends React.Component {
         }).catch((error) => { console.log(error);
             if (error.hasOwnProperty("status") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
+                window.location.href = window.location.origin+'/store/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
index ec139d9071..418dfc995b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
@@ -31,7 +31,7 @@ class UserInstall extends React.Component {
 
         //send request to the invoker
         axios.get(
-            config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt+"/users/search?username=" + value,
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt+"/users/search?username=" + value,
 
         ).then(res => {
             if (res.status === 200) {
@@ -51,7 +51,7 @@ class UserInstall extends React.Component {
         }).catch((error) => {
             if (error.response.hasOwnProperty(status) && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+                window.location.href = window.location.origin+ '/store/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/AddReview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/AddReview.js
index f6939dfab9..9cdf163f2d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/AddReview.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/AddReview.js
@@ -54,7 +54,7 @@ class AddReview extends React.Component {
         };
 
         axios.post(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/" + uuid,
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/" + uuid,
             payload,
         ).then(res => {
             if (res.status === 201) {
@@ -86,7 +86,7 @@ class AddReview extends React.Component {
 
         }).catch((error) => {
             if (error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+                window.location.href = window.location.origin+ '/store/login';
             } else {
                 this.setState({
                     loading: false,
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js
index 14ef0409a6..81ed85fdbe 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js
@@ -26,7 +26,7 @@ class CurrentUsersReview extends React.Component {
         const config = this.props.context;
 
         axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/app/user/" + uuid,
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/app/user/" + uuid,
         ).then(res => {
             if (res.status === 200) {
                 const data = res.data.data.data;
@@ -36,7 +36,7 @@ class CurrentUsersReview extends React.Component {
         }).catch((error) => {
             if (error.response.hasOwnProperty(status) && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+                window.location.href = window.location.origin+ '/store/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js
index 3d00216e15..2d42469b86 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js
@@ -32,7 +32,7 @@ class Reviews extends React.Component {
         const config = this.props.context;
 
         axios.get(
-            config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.store+"/reviews/"+type+"/"+uuid,
+            window.location.origin+ config.serverConfig.invoker.uri +config.serverConfig.invoker.store+"/reviews/"+type+"/"+uuid,
             {
                 headers: {'X-Platform': config.serverConfig.platform}
             }).then(res => {
@@ -43,7 +43,7 @@ class Reviews extends React.Component {
 
         }).catch(function (error) {
             if (error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+                window.location.href = window.location.origin+ '/store/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js
index 0d9622817e..2dabd2a901 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js
@@ -40,8 +40,7 @@ class SingleReview extends React.Component {
         const {id} = this.state.review;
         const config = this.props.context;
 
-        let url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' +
-            config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store;
+        let url =window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store;
 
         // call as an admin api if the review is not a personal review
         if (!this.props.isPersonalReview) {
@@ -63,7 +62,7 @@ class SingleReview extends React.Component {
         }).catch((error) => {
             console.log(error);
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+                window.location.href = window.location.origin+ '/store/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/editReview/EditReview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/editReview/EditReview.js
index b382d3e8ec..52cebd7075 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/editReview/EditReview.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/editReview/EditReview.js
@@ -68,7 +68,7 @@ class EditReview extends React.Component {
         };
 
         axios.put(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/" + uuid+"/"+id,
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/" + uuid+"/"+id,
             payload,
         ).then(res => {
             if (res.status === 200) {
@@ -99,7 +99,7 @@ class EditReview extends React.Component {
         }).catch((error) => {
             console.log(error);
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+                window.location.href = window.location.origin+ '/store/login';
             } else {
                 this.setState({
                     loading: false,
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
index 8cd95b5249..a2eb653697 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
@@ -9,6 +9,7 @@ const {Text} = Typography;
 
 class Login extends React.Component {
     render() {
+        const config = this.props.context;
         return (
             <div>
                 <div className="background">
@@ -60,6 +61,7 @@ class NormalLoginForm extends React.Component {
     handleSubmit = (e) => {
         const thisForm = this;
         const config = this.props.context;
+        console.log(config);
 
         e.preventDefault();
         this.props.form.validateFields((err, values) => {
@@ -78,10 +80,10 @@ class NormalLoginForm extends React.Component {
 
                 const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
 
-                axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.loginUri, request
+                axios.post(window.location.origin+ config.serverConfig.loginUri, request
                 ).then(res => {
                     if (res.status === 200) {
-                        window.location = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + "/store";
+                        window.location = window.location.origin+ "/store";
                     }
                 }).catch(function (error) {
                     if (error.response.status === 400) {
@@ -146,6 +148,6 @@ class NormalLoginForm extends React.Component {
     }
 }
 
-const WrappedNormalLoginForm = Form.create({name: 'normal_login'})(NormalLoginForm);
+const WrappedNormalLoginForm = withConfigContext(Form.create({name: 'normal_login'})(NormalLoginForm));
 
 export default withConfigContext(Login);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
index 296d319c4d..7989ba6827 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
@@ -40,7 +40,7 @@ class Release extends React.Component {
 
         //send request to the invoker
         axios.get(
-            config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store+"/applications/"+uuid,
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store+"/applications/"+uuid,
 
         ).then(res => {
             if (res.status === 200) {
@@ -57,7 +57,7 @@ class Release extends React.Component {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
                 //todo display a popop with error
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+                window.location.href = window.location.origin+ '/store/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",