From c8086f8b5c9beb051c16b9b2b3b217a1c624c90e Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Wed, 31 Jul 2019 13:14:44 +0530
Subject: [PATCH] Fix installation error in APPM ui

---
 .../react-app/public/conf/config.json         | 16 +++-
 .../components/apps/release/ReleaseView.js    |  4 +-
 .../src/pages/dashboard/Dashboard.js          | 77 ++++++++++++++++---
 3 files changed, 82 insertions(+), 15 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 3fab34b8b4..062ac0df96 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
@@ -19,16 +19,24 @@
   },
   "defaultPlatformIcons": {
     "default": {
-      "icon": "mobile",
-      "color": "#535c68"
+      "icon": "global",
+      "color": "#535c68",
+      "theme": "outlined"
     },
     "android": {
       "icon": "android",
-      "color": "#7db343"
+      "color": "#7db343",
+      "theme": "filled"
     },
     "ios": {
       "icon": "apple",
-      "color": "#535c68"
+      "color": "#535c68",
+      "theme": "filled"
+    },
+    "windows": {
+      "icon": "windows",
+      "color": "#008cc4",
+      "theme": "filled"
     }
   }
 }
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 516ac367e4..e2f89051df 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
@@ -37,7 +37,7 @@ class ReleaseView extends React.Component {
                 headers: {'X-Platform': config.serverConfig.platform}
             }
         ).then(res => {
-            if (res.status === 201) {
+            if (res.status === 200) {
                 this.setState({
                     loading: false,
                     appInstallModalVisible: false
@@ -45,7 +45,7 @@ class ReleaseView extends React.Component {
                 notification["success"]({
                     message: 'Done!',
                     description:
-                        'App installed successfully.',
+                        'App installed triggered.',
                 });
             } else {
                 this.setState({
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 d83e3ba32c..3a0d3a88c7 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
@@ -1,9 +1,11 @@
 import React from "react";
 import {Layout, Menu, Icon} from 'antd';
+
 const {Header, Content, Footer} = Layout;
 import {Link} from "react-router-dom";
-import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
-import {Switch} from 'react-router'
+import RouteWithSubRoutes from "../../components/RouteWithSubRoutes";
+import {Switch} from 'react-router';
+import axios from "axios";
 import "../../App.css";
 import {withConfigContext} from "../../context/ConfigContext";
 
@@ -12,19 +14,56 @@ class Dashboard extends React.Component {
         super(props);
         this.state = {
             routes: props.routes,
-            selectedKeys: []
+            selectedKeys: [],
+            deviceTypes: []
         };
         this.logo = this.props.context.theme.logo;
     }
 
-    changeSelectedMenuItem = (key) =>{
+    componentDidMount() {
+        this.getDeviceTypes();
+    }
+
+    getDeviceTypes = () => {
+        const config = this.props.context;
+        axios.get(
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt + "/device-types"
+        ).then(res => {
+            if (res.status === 200) {
+                const deviceTypes = JSON.parse(res.data.data);
+                this.setState({
+                    deviceTypes,
+                    loading: false,
+                });
+            }
+
+        }).catch((error) => {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
+                window.location.href = window.location.origin + '/publisher/login';
+            } else {
+                notification["error"]({
+                    message: "There was a problem",
+                    duration: 0,
+                    description:
+                        "Error occurred while trying to load device types.",
+                });
+            }
+            this.setState({
+                loading: false
+            });
+        });
+    };
+
+    changeSelectedMenuItem = (key) => {
         this.setState({
             selectedKeys: [key]
         })
     };
 
     render() {
-        const {selectedKeys} = this.state;
+        const config = this.props.context;
+        const {selectedKeys, deviceTypes} = this.state;
+
         return (
             <div>
                 <Layout className="layout">
@@ -38,9 +77,28 @@ class Dashboard extends React.Component {
                             defaultSelectedKeys={selectedKeys}
                             style={{lineHeight: '64px'}}
                         >
-                            <Menu.Item key="android"><Link to="/store/android"><Icon type="android" theme="filled"/>Android</Link></Menu.Item>
-                            <Menu.Item key="ios"><Link to="/store/ios"><Icon type="apple" theme="filled"/>iOS</Link></Menu.Item>
-                            <Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web Clips</Link></Menu.Item>
+                            {
+                                deviceTypes.map((deviceType)=>{
+                                    const platform = deviceType.name;
+                                    const defaultPlatformIcons = config.defaultPlatformIcons;
+                                    let icon = defaultPlatformIcons.default.icon;
+                                    let theme = defaultPlatformIcons.default.theme;
+                                    if (defaultPlatformIcons.hasOwnProperty(platform)) {
+                                        icon = defaultPlatformIcons[platform].icon;
+                                        theme = defaultPlatformIcons[platform].theme;
+                                    }
+                                    return (
+                                        <Menu.Item key={platform}>
+                                            <Link to={"/store/"+platform}>
+                                                <Icon type={icon} theme={theme}/>
+                                                {platform}
+                                            </Link>
+                                        </Menu.Item>
+                                    );
+                                })
+                            }
+                            <Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web
+                                Clips</Link></Menu.Item>
                         </Menu>
                     </Header>
                 </Layout>
@@ -48,7 +106,8 @@ class Dashboard extends React.Component {
                     <Content style={{padding: '0 0'}}>
                         <Switch>
                             {this.state.routes.map((route) => (
-                                <RouteWithSubRoutes changeSelectedMenuItem={this.changeSelectedMenuItem} key={route.path} {...route} />
+                                <RouteWithSubRoutes changeSelectedMenuItem={this.changeSelectedMenuItem}
+                                                    key={route.path} {...route} />
                             ))}
 
                         </Switch>