Add custom forbidden alerts messages in APPM store UI

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/Utils.js

@@ -18,12 +18,12 @@
 
 import {notification} from "antd";
 
-export const handleApiError = (error, message, isForbiddenMessageSilent) => {
+export const handleApiError = (error, message, isForbiddenMessageSilent = false) => {
     if (error.hasOwnProperty("response") && error.response.status === 401) {
         const redirectUrl = encodeURI(window.location.href);
         window.location.href = window.location.origin + `/publisher/login?redirect=${redirectUrl}`;
         // silence 403 forbidden message
-    } else if(!(isForbiddenMessageSilent && error.hasOwnProperty("response") && error.response.status === 403)){
+    } else if (!(isForbiddenMessageSilent && error.hasOwnProperty("response") && error.response.status === 403)) {
         notification["error"]({
             message: "There was a problem",
             duration: 10,

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js

@@ -18,7 +18,7 @@
 
 import React from "react";
 import AppCard from "./AppCard";
-import {Col, message, notification, Row, Result, Skeleton} from "antd";
+import {Col, message, notification, Row, Result, Skeleton, Alert} from "antd";
 import axios from "axios";
 import {withConfigContext} from "../../context/ConfigContext";
 import {handleApiError} from "../../js/Utils";
@@ -28,7 +28,10 @@ class AppList extends React.Component {
         super(props);
         this.state = {
             apps: [],
-            loading: true
+            loading: true,
+            forbiddenErrors: {
+                apps: false
+            }
         }
     }
 
@@ -60,7 +63,7 @@ class AppList extends React.Component {
         });
         //send request to the invoker
         axios.post(
-            window.location.origin+ 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) {
@@ -73,18 +76,37 @@ class AppList extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load apps.");
+            handleApiError(error, "Error occurred while trying to load apps.", true);
-            this.setState({loading: false});
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.apps = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
     render() {
-        const {apps,loading} = this.state;
+        const {apps, loading, forbiddenErrors} = this.state;
 
         return (
             <Skeleton loading={loading} active>
                 <Row gutter={16}>
-                    {apps.length === 0 && (
+                    {(forbiddenErrors.apps) && (
+                        <Result
+                            status="403"
+                            title="403"
+                            subTitle="You don't have permission to view apps."
+                            // extra={<Button type="primary">Back Home</Button>}
+                        />
+                    )}
+                    {!((forbiddenErrors.apps)) && apps.length === 0 && (
                         <Result
                             status="404"
                             title="No apps, yet."

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/SubscriptionDetails.js

@@ -18,7 +18,20 @@
 
 import React from "react";
 import axios from "axios";
-import {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider, Button, Modal, Select} from "antd";
+import {
+    Tag,
+    message,
+    notification,
+    Table,
+    Typography,
+    Tooltip,
+    Icon,
+    Divider,
+    Button,
+    Modal,
+    Select,
+    Alert
+} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
@@ -149,7 +162,8 @@ class SubscriptionDetails extends React.Component {
             selectedRows: [],
             deviceGroups: [],
             groupModalVisible: false,
-            selectedGroupId: []
+            selectedGroupId: [],
+            isForbidden: false
         };
     }
 
@@ -188,8 +202,17 @@ class SubscriptionDetails extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Something went wrong when trying to load subscription data.");
+            handleApiError(error, "Something went wrong when trying to load subscription data.", true);
-            this.setState({loading: false});
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -197,6 +220,13 @@ class SubscriptionDetails extends React.Component {
         const {data, pagination, loading, selectedRows} = this.state;
         return (
             <div>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view subscription details."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <div style={{paddingBottom: 24}}>
                     <Text>
                         The following are the subscription details of the application in each respective device.

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js

@@ -18,7 +18,7 @@
 
 import React from "react";
 import axios from "axios";
-import {Button, message, DatePicker, Table, Typography} from "antd";
+import {Button, message, DatePicker, Table, Typography, Alert} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
@@ -112,7 +112,8 @@ class DeviceInstall extends React.Component {
             loading: false,
             selectedRows: [],
             scheduledTime: null,
-            isScheduledInstallVisible: false
+            isScheduledInstallVisible: false,
+            isForbidden: false
         };
     }
 
@@ -169,8 +170,17 @@ class DeviceInstall extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load devices.");
+            handleApiError(error, "Error occurred while trying to load devices.", true);
-            this.setState({loading: false});
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -209,6 +219,13 @@ class DeviceInstall extends React.Component {
                     Start installing the application for one or more users by entering the corresponding user name.
                     Select install to automatically start downloading the application for the respective user/users.
                 </Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view devices."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <Table
                     style={{paddingTop: 20}}
                     columns={columns}

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceUninstall.js

@@ -18,7 +18,7 @@
 
 import React from "react";
 import axios from "axios";
-import {Button, Select, Table, Typography} from "antd";
+import {Alert, Button, Select, Table, Typography} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
@@ -109,7 +109,8 @@ class DeviceUninstall extends React.Component {
             data: [],
             pagination: {},
             loading: false,
-            selectedRows: []
+            selectedRows: [],
+            isForbidden: false
         };
     }
 
@@ -164,8 +165,17 @@ class DeviceUninstall extends React.Component {
                 });
             }
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load devices.");
+            handleApiError(error, "Error occurred while trying to load devices.", true);
-            this.setState({loading: false});
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -204,6 +214,13 @@ class DeviceUninstall extends React.Component {
                     Start uninstalling the application for devices by selecting the corresponding devices.
                     Select uninstall to automatically start uninstalling the application for the respective devices.
                 </Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view installed devices."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <Table
                     style={{paddingTop: 20}}
                     columns={columns}

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Typography, Select, Spin, message, notification, Button} from "antd";
+import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
@@ -40,6 +40,7 @@ class GroupInstall extends React.Component {
         data: [],
         value: [],
         fetching: false,
+        isForbidden: false
     };
 
     fetchUser = value => {
@@ -67,8 +68,17 @@ class GroupInstall extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load groups.");
+            handleApiError(error,"Error occurred while trying to load groups.", true);
-            this.setState({fetching: false});
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -96,6 +106,13 @@ class GroupInstall extends React.Component {
         return (
             <div>
                 <Text>Start installing the application for one or more groups by entering the corresponding group name. Select install to automatically start downloading the application for the respective device group/ groups.</Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view groups."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <br/>
                 <br/>
                 <Select

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupUninstall.js

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Typography, Select, Spin, message, notification, Button} from "antd";
+import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
@@ -39,6 +39,7 @@ class GroupUninstall extends React.Component {
         data: [],
         value: [],
         fetching: false,
+        isForbidden: false
     };
 
     fetchUser = value => {
@@ -50,9 +51,8 @@ class GroupUninstall extends React.Component {
         const uuid = this.props.uuid;
 
         axios.get(
-                window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store+ "/subscription/" + uuid + "/"+
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/subscription/" + uuid + "/" +
             "/GROUP?",
-
         ).then(res => {
             if (res.status === 200) {
                 if (fetchId !== this.lastFetchId) {
@@ -69,8 +69,17 @@ class GroupUninstall extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load groups.");
+            handleApiError(error, "Error occurred while trying to load groups.", true);
-            this.setState({fetching: false});
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -82,13 +91,13 @@ class GroupUninstall extends React.Component {
         });
     };
 
-    uninstall = (timestamp=null) =>{
+    uninstall = (timestamp = null) => {
         const {value} = this.state;
         const data = [];
-        value.map(val=>{
+        value.map(val => {
             data.push(val.key);
         });
-        this.props.onUninstall("group", data, "uninstall",timestamp);
+        this.props.onUninstall("group", data, "uninstall", timestamp);
     };
 
     render() {
@@ -97,7 +106,16 @@ class GroupUninstall extends React.Component {
 
         return (
             <div>
-                    <Text>Start uninstalling the application for one or more groups by entering the corresponding group name. Select uninstall to automatically start uninstalling the application for the respective device group/ groups.</Text>
+                <Text>Start uninstalling the application for one or more groups by entering the corresponding group
+                    name. Select uninstall to automatically start uninstalling the application for the respective device
+                    group/ groups.</Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view installed groups."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <br/>
                 <br/>
                 <Select
@@ -114,7 +132,7 @@ class GroupUninstall extends React.Component {
                         <Option key={d.value}>{d.text}</Option>
                     ))}
                 </Select>
-                    <InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length===0}/>
+                <InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length === 0}/>
             </div>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Typography, Select, Spin, message, notification, Button} from "antd";
+import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
@@ -40,6 +40,7 @@ class RoleInstall extends React.Component {
         data: [],
         value: [],
         fetching: false,
+        isForbidden: false
     };
 
     fetchUser = value => {
@@ -67,8 +68,17 @@ class RoleInstall extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load roles.");
+            handleApiError(error,"Error occurred while trying to load roles.", true);
-            this.setState({fetching: false});
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -96,6 +106,13 @@ class RoleInstall extends React.Component {
         return (
             <div>
                 <Text>Start installing the application for one or more roles by entering the corresponding role name. Select install to automatically start downloading the application for the respective user role/roles.</Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view roles."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <br/>
                 <br/>
                 <Select

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleUninstall.js

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Typography, Select, Spin, message, notification, Button} from "antd";
+import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
@@ -39,6 +39,7 @@ class RoleUninstall extends React.Component {
         data: [],
         value: [],
         fetching: false,
+        isForbidden: false
     };
 
     fetchUser = value => {
@@ -50,7 +51,7 @@ class RoleUninstall extends React.Component {
         const uuid = this.props.uuid;
 
         axios.get(
-                window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store+ "/subscription/" + uuid + "/"+
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/subscription/" + uuid + "/" +
             "/ROLE?",
         ).then(res => {
             if (res.status === 200) {
@@ -68,8 +69,17 @@ class RoleUninstall extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load roles.");
+            handleApiError(error, "Error occurred while trying to load roles.", true);
-            this.setState({fetching: false});
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -81,13 +91,13 @@ class RoleUninstall extends React.Component {
         });
     };
 
-    uninstall = (timestamp=null) =>{
+    uninstall = (timestamp = null) => {
         const {value} = this.state;
         const data = [];
-        value.map(val=>{
+        value.map(val => {
             data.push(val.key);
         });
-        this.props.onUninstall("role", data, "uninstall",timestamp);
+        this.props.onUninstall("role", data, "uninstall", timestamp);
     };
 
     render() {
@@ -95,7 +105,16 @@ class RoleUninstall extends React.Component {
 
         return (
             <div>
-                    <Text>Start uninstalling the application for one or more roles by entering the corresponding role name. Select uninstall to automatically start uninstalling the application for the respective user role/roles.</Text>
+                <Text>Start uninstalling the application for one or more roles by entering the corresponding role name.
+                    Select uninstall to automatically start uninstalling the application for the respective user
+                    role/roles.</Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view uninstalled roles."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <br/>
                 <br/>
                 <Select
@@ -113,7 +132,7 @@ class RoleUninstall extends React.Component {
                         <Option key={d.value}>{d.text}</Option>
                     ))}
                 </Select>
-                    <InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length===0}/>
+                <InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length === 0}/>
             </div>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Typography, Select, Spin, message, notification, Button} from "antd";
+import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
@@ -69,8 +69,17 @@ class UserInstall extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load users.");
+            handleApiError(error,"Error occurred while trying to load users.", true);
-            this.setState({fetching: false});
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -79,6 +88,7 @@ class UserInstall extends React.Component {
             value,
             data: [],
             fetching: false,
+            isForbidden: false
         });
     };
 
@@ -97,6 +107,13 @@ class UserInstall extends React.Component {
         return (
             <div>
                 <Text>Start installing the application for one or more users by entering the corresponding user name. Select install to automatically start downloading the application for the respective user/users. </Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view users."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <p>Select users</p>
                 <Select
                     mode="multiple"

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserUninstall.js

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Typography, Select, Spin, message, notification, Button} from "antd";
+import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
@@ -39,6 +39,7 @@ class UserUninstall extends React.Component {
         data: [],
         value: [],
         fetching: false,
+        isForbidden: false
     };
 
     fetchUser = (value) => {
@@ -67,8 +68,17 @@ class UserUninstall extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load users.");
+            handleApiError(error, "Error occurred while trying to load users.", true);
-            this.setState({fetching: false});
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -97,6 +107,13 @@ class UserUninstall extends React.Component {
                 <Text>Start uninstalling the application for one or more users by entering the corresponding user name.
                     Select uninstall to automatically start uninstalling the application for the respective
                     user/users. </Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view uninstalled users."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <p>Select users</p>
                 <Select
                     mode="multiple"

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {List, message, Typography, Empty, Button, Row, Col, notification} from "antd";
+import {List, message, Typography, Empty, Button, Row, Col, notification, Alert} from "antd";
 import SingleReview from "./singleReview/SingleReview";
 import axios from "axios";
 import AddReview from "./AddReview";
@@ -34,6 +34,14 @@ class CurrentUsersReview extends React.Component {
         return (
             <div>
                 <Text>MY REVIEW</Text>
+                {(this.props.forbidden) && (
+                    <Alert
+                        message="You don't have permission to add reviews."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
+                {(!this.props.forbidden) && (
                     <div style={{
                         overflow: "auto",
                         paddingTop: 8,
@@ -69,8 +77,7 @@ class CurrentUsersReview extends React.Component {
                                     }}
                                     description={
                                         <span>Share your experience with your community by adding a review.</span>
-                                }
+                                    }>
-                            >
                                     {/*<Button type="primary">Add review</Button>*/}
                                     <AddReview
                                         uuid={uuid}
@@ -78,8 +85,8 @@ class CurrentUsersReview extends React.Component {
                                 </Empty>
                             </div>
                         )}
-
                     </div>
+                )}
             </div>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/ReviewContainer.js

@@ -32,7 +32,12 @@ class ReviewContainer extends React.Component {
         super(props);
         this.state = {
             currentUserReviews: [],
-            detailedRating: null
+            detailedRating: null,
+            forbiddenErrors: {
+                currentReview: false,
+                reviews: false,
+                rating: false
+            }
         }
     }
 
@@ -54,7 +59,19 @@ class ReviewContainer extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to get your review.");
+            handleApiError(error, "Error occurred while trying to get your review.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.currentReview = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -79,7 +96,7 @@ class ReviewContainer extends React.Component {
             }
 
         }).catch(function (error) {
-            handleApiError(error, "Error occurred while trying to load ratings.");
+            handleApiError(error, "Error occurred while trying to load ratings.", true);
         });
     };
 
@@ -90,10 +107,11 @@ class ReviewContainer extends React.Component {
 
     render() {
         const {uuid} = this.props;
-        const {currentUserReviews,detailedRating} = this.state;
+        const {currentUserReviews,detailedRating, forbiddenErrors} = this.state;
         return (
             <div>
                 <CurrentUsersReview
+                    forbidden={forbiddenErrors.currentReview}
                     uuid={uuid}
                     currentUserReviews={currentUserReviews}
                     onUpdateReview={this.onUpdateReview}

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {List, message, Avatar, Spin, Button, notification} from 'antd';
+import {List, message, Avatar, Spin, Button, notification, Alert} from 'antd';
 import "./Reviews.css";
 
 import InfiniteScroll from 'react-infinite-scroller';
@@ -33,7 +33,10 @@ class Reviews extends React.Component {
         data: [],
         loading: false,
         hasMore: false,
-        loadMore: false
+        loadMore: false,
+        forbiddenErrors: {
+            reviews: false
+        }
     };
 
 
@@ -51,7 +54,7 @@ class Reviews extends React.Component {
         const config = this.props.context;
 
         axios.get(
-            window.location.origin+ 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 => {
@@ -60,8 +63,20 @@ class Reviews extends React.Component {
                 callback(reviews);
             }
 
-        }).catch(function (error) {
+        }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load reviews.");
+            handleApiError(error, "Error occurred while trying to load reviews.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.reviews = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -101,7 +116,7 @@ class Reviews extends React.Component {
         });
     };
 
-    deleteCallback = () =>{
+    deleteCallback = () => {
         this.fetchData(0, limit, res => {
             this.setState({
                 data: res,
@@ -114,6 +129,14 @@ class Reviews extends React.Component {
         const {loading, hasMore, data, loadMore} = this.state;
         const {uuid} = this.props;
         return (
+            <div>
+                {(this.state.forbiddenErrors.reviews) && (
+                    <Alert
+                        message="You don't have permission to view reviews."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <div className="infinite-container">
                     <InfiniteScroll
                         initialLoad={false}
@@ -125,7 +148,8 @@ class Reviews extends React.Component {
                             dataSource={data}
                             renderItem={item => (
                                 <List.Item key={item.id}>
-                                <SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={false} deleteCallback={this.deleteCallback}/>
+                                    <SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={false}
+                                                  deleteCallback={this.deleteCallback}/>
                                 </List.Item>
                             )}>
                             {loading && hasMore && (
@@ -139,6 +163,7 @@ class Reviews extends React.Component {
                         <Button type="dashed" htmlType="button" onClick={this.enableLoading}>Read All Reviews</Button>
                     </div>)}
                 </div>
+            </div>
         );
     }
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/Utils.js

@@ -18,14 +18,15 @@
 
 import {notification} from "antd";
 
-export const handleApiError = (error, message) => {
+export const handleApiError = (error, message, isForbiddenMessageSilent = false) => {
     if (error.hasOwnProperty("response") && error.response.status === 401) {
         const redirectUrl = encodeURI(window.location.href);
         window.location.href = window.location.origin + `/store/login?redirect=${redirectUrl}`;
-    } else {
+        // silence 403 forbidden message
+    } else if (!(isForbiddenMessageSilent && error.hasOwnProperty("response") && error.response.status === 403)) {
         notification["error"]({
             message: "There was a problem",
-            duration: 2,
+            duration: 10,
             description: message,
         });
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js

@@ -17,7 +17,8 @@
  */
 
 import React from "react";
-import {Layout, Menu, Icon, Drawer, Button} from 'antd';
+import {Layout, Menu, Icon, Drawer, Button, Alert} from 'antd';
+
 const {Header, Content, Footer} = Layout;
 import {Link} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes";
@@ -38,7 +39,10 @@ class Dashboard extends React.Component {
             selectedKeys: [],
             deviceTypes: [],
             visible: false,
-            collapsed: false
+            collapsed: false,
+            forbiddenErrors: {
+                deviceTypes: false
+            }
         };
         this.logo = this.props.context.theme.logo;
         this.config = this.props.context;
@@ -62,10 +66,19 @@ class Dashboard extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load device types.");
+            handleApiError(error, "Error occurred while trying to load device types.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.deviceTypes = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
                 this.setState({
                     loading: false
                 });
+            }
         });
     };
 
@@ -90,7 +103,7 @@ class Dashboard extends React.Component {
 
     render() {
         const config = this.props.context;
-        const {selectedKeys, deviceTypes} = this.state;
+        const {selectedKeys, deviceTypes, forbiddenErrors} = this.state;
 
         const DeviceTypesData = deviceTypes.map((deviceType) => {
             const platform = deviceType.name;
@@ -116,7 +129,7 @@ class Dashboard extends React.Component {
                 <Layout>
                     <Header style={{paddingLeft: 0, paddingRight: 0, backgroundColor: "white"}}>
                         <div className="logo-image">
-                            <Link to="/store/android"><img alt="logo" src={this.logo}/></Link>
+                            <Link to="/store"><img alt="logo" src={this.logo}/></Link>
                         </div>
 
                         <div className="web-layout">
@@ -140,7 +153,7 @@ class Dashboard extends React.Component {
                                              <span className="submenu-title-wrapper">
                                      <Icon type="user"/>
                                                  {this.config.user}
-                                     </span> }>
+                                     </span>}>
                                     <Logout/>
                                 </SubMenu>
                             </Menu>
@@ -157,7 +170,7 @@ class Dashboard extends React.Component {
                     </div>
                 </Layout>
                 <Drawer
-                        title={<Link to="/store/android" onClick={this.onCloseMobileNavigationBar}>
+                    title={<Link to="/store" onClick={this.onCloseMobileNavigationBar}>
                         <img alt="logo" src={this.logo} style={{marginLeft: 30}} width={"60%"}/>
                     </Link>}
                     placement="left"
@@ -198,6 +211,13 @@ class Dashboard extends React.Component {
                 </Layout>
 
                 <Layout className="dashboard-body">
+                    {(forbiddenErrors.deviceTypes) && (
+                        <Alert
+                            message="You don't have permission to view device types."
+                            type="warning"
+                            banner
+                            closable/>
+                    )}
                     <Content style={{padding: '0 0'}}>
                         <Switch>
                             {this.state.routes.map((route) => (

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js

@@ -36,7 +36,10 @@ class Release extends React.Component {
         this.state = {
             loading: true,
             app: null,
-            uuid: null
+            uuid: null,
+            forbiddenErrors: {
+                app: false
+            }
         };
     }
 
@@ -72,8 +75,19 @@ class Release extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load releases.");
+            handleApiError(error,"Error occurred while trying to load releases.", false);
-            this.setState({loading: false});
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.app = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };