Add custom forbidden alerts messages in APPM publisher UI

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/detailed-rating/DetailedRating.js

@@ -61,7 +61,7 @@ class DetailedRating extends React.Component{
             }
 
         }).catch(function (error) {
-            handleApiError(error, "Error occurred while trying to load rating for the release.");
+            handleApiError(error, "Error occurred while trying to load rating for the release.", true);
         });
     };
 

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

@@ -136,7 +136,7 @@ class AppDetailsDrawer extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load app details.");
+            handleApiError(error, "Error occurred while trying to load categories.", true);
             this.setState({
                 loading: false
             });

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

@@ -30,7 +30,7 @@ import {
     Form,
     message,
     Radio,
-    notification
+    notification, Alert
 } from "antd";
 import axios from "axios";
 import {withConfigContext} from "../../../context/ConfigContext";
@@ -46,7 +46,12 @@ class FiltersForm extends React.Component {
         this.state = {
             categories: [],
             tags: [],
-            deviceTypes: []
+            deviceTypes: [],
+            forbiddenErrors: {
+                categories: false,
+                tags: false,
+                deviceTypes: false
+            }
         };
     }
 
@@ -73,6 +78,8 @@ class FiltersForm extends React.Component {
 
     componentDidMount() {
         this.getCategories();
+        this.getTags();
+        this.getDeviceTypes();
     }
 
     getCategories = () => {
@@ -82,7 +89,6 @@ class FiltersForm extends React.Component {
         ).then(res => {
             if (res.status === 200) {
                 let categories = JSON.parse(res.data.data);
-                this.getTags();
                 this.setState({
                     categories: categories,
                     loading: false
@@ -90,10 +96,19 @@ class FiltersForm extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load categories.");
+            handleApiError(error, "Error occurred while trying to load categories.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.categories = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
                 this.setState({
                     loading: false
                 });
+            }
         });
     };
 
@@ -104,7 +119,6 @@ class FiltersForm extends React.Component {
         ).then(res => {
             if (res.status === 200) {
                 let tags = JSON.parse(res.data.data);
-                this.getDeviceTypes();
                 this.setState({
                     tags: tags,
                     loading: false,
@@ -112,10 +126,19 @@ class FiltersForm extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load tags.");
+            handleApiError(error, "Error occurred while trying to load tags.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.tags = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
                 this.setState({
                     loading: false
                 });
+            }
         });
     };
 
@@ -134,15 +157,24 @@ class FiltersForm 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
                 });
+            }
         });
     };
 
     render() {
-        const {categories, tags, deviceTypes} = this.state;
+        const {categories, tags, deviceTypes, forbiddenErrors} = this.state;
         const {getFieldDecorator} = this.props.form;
 
         return (
@@ -170,7 +202,13 @@ class FiltersForm extends React.Component {
                             </Form.Item>
                         </Col>
                     </Row>
-
+                    {(forbiddenErrors.categories) && (
+                        <Alert
+                            message="You don't have permission to view categories."
+                            type="warning"
+                            banner
+                            closable/>
+                    )}
                     <Form.Item label="Categories">
                         {getFieldDecorator('categories', {
                             rules: [{
@@ -182,8 +220,7 @@ class FiltersForm extends React.Component {
                                 mode="multiple"
                                 style={{width: '100%'}}
                                 placeholder="Select a Category"
-                                onChange={this.handleCategoryChange}
+                                onChange={this.handleCategoryChange}>
-                            >
                                 {
                                     categories.map(category => {
                                         return (
@@ -198,7 +235,13 @@ class FiltersForm extends React.Component {
                         )}
                     </Form.Item>
 
-
+                    {(forbiddenErrors.deviceTypes) && (
+                        <Alert
+                            message="You don't have permission to view device types."
+                            type="warning"
+                            banner
+                            closable/>
+                    )}
                     <Form.Item label="Device Type">
                         {getFieldDecorator('deviceType', {
                             rules: [{
@@ -208,8 +251,7 @@ class FiltersForm extends React.Component {
                         })(
                             <Select
                                 style={{width: '100%'}}
-                                placeholder="Select device types"
+                                placeholder="Select device types">
-                            >
                                 {
                                     deviceTypes.map(deviceType => {
                                         return (
@@ -226,7 +268,13 @@ class FiltersForm extends React.Component {
                             </Select>
                         )}
                     </Form.Item>
-
+                    {(forbiddenErrors.tags) && (
+                        <Alert
+                            message="You don't have permission to view tags."
+                            type="warning"
+                            banner
+                            closable/>
+                    )}
                     <Form.Item label="Tags">
                         {getFieldDecorator('tags', {
                             rules: [{

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Avatar, Table, Tag, Icon, message, notification, Col, Badge} from "antd";
+import {Avatar, Table, Tag, Icon, message, notification, Col, Badge, Alert} from "antd";
 import axios from "axios";
 import pSBC from 'shade-blend-color';
 import "./AppsTable.css";
@@ -147,7 +147,8 @@ class AppsTable extends React.Component {
             isDrawerVisible: false,
             selectedApp: null,
             selectedAppIndex: -1,
-            loading: false
+            loading: false,
+            isForbiddenErrorVisible: false
         };
         config = this.props.context;
     }
@@ -239,7 +240,12 @@ class AppsTable extends React.Component {
                 });
             }
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load apps.");
+            handleApiError(error, "Error occurred while trying to load apps.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbiddenErrorVisible: true
+                })
+            }
             this.setState({loading: false});
         });
     };
@@ -255,6 +261,14 @@ class AppsTable extends React.Component {
     render() {
         const {isDrawerVisible, loading} = this.state;
         return (
+            <div>
+                {(this.state.isForbiddenErrorVisible) && (
+                    <Alert
+                        message="You don't have permission to view apps."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <div className="apps-table">
                     <Table
                         rowKey={record => record.id}
@@ -277,7 +291,7 @@ class AppsTable extends React.Component {
                         app={this.state.selectedApp}
                         onUpdateApp={this.onUpdateApp}/>
                 </div>
-
+            </div>
         );
     }
 }

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

@@ -24,6 +24,7 @@ import "../../../App.css";
 import DetailedRating from "../detailed-rating/DetailedRating";
 import EditRelease from "./edit-release/EditRelease";
 import {withConfigContext} from "../../../context/ConfigContext";
+import NewAppUploadForm from "../../new-app/subForms/NewAppUploadForm";
 
 const {Title, Text, Paragraph} = Typography;
 
@@ -97,6 +98,7 @@ class ReleaseView extends React.Component {
                             <Text>Version : {release.version}</Text><br/>
 
                             <EditRelease
+                                forbiddenErrors={this.props.forbiddenErrors}
                                 isAppUpdatable={isAppUpdatable}
                                 type={app.type}
                                 deviceType={app.deviceType}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js

@@ -31,7 +31,7 @@ import {
     Divider,
     Row,
     Col,
-    Select
+    Select, Alert
 } from 'antd';
 import axios from "axios";
 import "@babel/polyfill";
@@ -522,6 +522,14 @@ class EditReleaseModal extends React.Component {
                                     )}
                                 </Form.Item>
                                 {(config.deviceTypes.mobileTypes.includes(deviceType)) && (
+                                    <div>
+                                        {(this.props.forbiddenErrors.supportedOsVersions) && (
+                                            <Alert
+                                                message="You don't have permission to view supported OS versions."
+                                                type="warning"
+                                                banner
+                                                closable/>
+                                        )}
                                         <Form.Item {...formItemLayout} label="Supported OS Versions">
                                             {getFieldDecorator('supportedOS')(
                                                 <div>
@@ -579,6 +587,7 @@ class EditReleaseModal extends React.Component {
                                                 </div>
                                             )}
                                         </Form.Item>
+                                    </div>
                                 )}
                                 <Form.Item {...formItemLayout} label="Meta Data">
                                     {getFieldDecorator('meta', {

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.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
+        }
     };
 
 
@@ -49,17 +52,34 @@ class Reviews extends React.Component {
         const config = this.props.context;
 
         const {uuid, type} = this.props;
-
+        this.setState({
+            loading: true
+        });
         axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/admin/reviews/" + type + "/" + uuid
+            window.location.origin +
+            config.serverConfig.invoker.uri +
+            config.serverConfig.invoker.publisher +
+            "/admin/reviews/" + type + "/" + uuid
         ).then(res => {
             if (res.status === 200) {
                 let reviews = res.data.data.data;
                 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,22 +121,28 @@ class Reviews extends React.Component {
 
     render() {
         return (
+            <div>
+                {(this.state.forbiddenErrors.reviews) && (
+                    <Alert
+                        message="You don't have permission to view reviews."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <div className="demo-infinite-container">
                     <InfiniteScroll
                         initialLoad={false}
                         pageStart={0}
                         loadMore={this.handleInfiniteOnLoad}
                         hasMore={!this.state.loading && this.state.hasMore}
-                    useWindow={true}
+                        useWindow={true}>
-                >
                         <List
                             dataSource={this.state.data}
                             renderItem={item => (
                                 <List.Item key={item.id}>
                                     <SingleReview review={item}/>
                                 </List.Item>
-                        )}
+                            )}>
-                    >
                             {this.state.loading && this.state.hasMore && (
                                 <div className="demo-loading-container">
                                     <Spin/>
@@ -128,6 +154,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.publisher.ui/react-app/src/components/manage/categories/ManageCategories.js

@@ -32,7 +32,7 @@ import {
     Modal,
     Row,
     Col,
-    Typography
+    Typography, Alert
 } from "antd";
 import axios from "axios";
 import {TweenOneGroup} from 'rc-tween-one';
@@ -53,7 +53,10 @@ class ManageCategories extends React.Component {
         isAddNewVisible: false,
         isEditModalVisible: false,
         currentlyEditingId: null,
-        editingValue: null
+        editingValue: null,
+        forbiddenErrors: {
+            categories: false
+        }
     };
 
     componentDidMount() {
@@ -70,10 +73,19 @@ class ManageCategories extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occured while trying to load categories");
+            handleApiError(error, "Error occured while trying to load categories", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.categories = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
                 this.setState({
                     loading: false
                 });
+            }
         });
     }
 
@@ -125,8 +137,7 @@ class ManageCategories extends React.Component {
         const tagElem = (
             <Tag
                 color={pSBC(0.30, config.theme.primaryColor)}
-                style={{marginTop:8}}
+                style={{marginTop: 8}}>
-            >
                 {categoryName}
                 <Divider type="vertical"/>
                 <Tooltip title="edit">
@@ -150,8 +161,7 @@ class ManageCategories extends React.Component {
                             }
                         }}
                         okText="Yes"
-                        cancelText="No"
+                        cancelText="No">
-                    >
                         <Icon type="delete"/>
                     </Popconfirm>
                 </Tooltip>
@@ -324,11 +334,18 @@ class ManageCategories extends React.Component {
     };
 
     render() {
-        const {categories, inputVisible, inputValue, tempElements, isAddNewVisible} = this.state;
+        const {categories, inputVisible, inputValue, tempElements, isAddNewVisible, forbiddenErrors} = this.state;
         const categoriesElements = categories.map(this.renderElement);
         const temporaryElements = tempElements.map(this.renderTempElement);
         return (
             <div style={{marginBottom: 16}}>
+                {(forbiddenErrors.categories) && (
+                    <Alert
+                        message="You don't have permission to view categories."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <Card>
                     <Spin tip="Working on it..." spinning={this.state.loading}>
                         <Row>

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

@@ -31,7 +31,7 @@ import {
     Popconfirm,
     Modal,
     Row, Col,
-    Typography
+    Typography, Alert
 } from "antd";
 import axios from "axios";
 import {TweenOneGroup} from 'rc-tween-one';
@@ -51,7 +51,10 @@ class ManageTags extends React.Component {
         isAddNewVisible: false,
         isEditModalVisible: false,
         currentlyEditingId: null,
-        editingValue: null
+        editingValue: null,
+        forbiddenErrors: {
+            tags: false
+        }
     };
 
     componentDidMount() {
@@ -68,10 +71,19 @@ class ManageTags extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load tags.");
+            handleApiError(error, "Error occurred while trying to load tags.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.tags = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
                 this.setState({
                     loading: false
                 });
+            }
         });
     }
 
@@ -321,11 +333,18 @@ class ManageTags extends React.Component {
     };
 
     render() {
-        const {tags, inputVisible, inputValue, tempElements, isAddNewVisible} = this.state;
+        const {tags, inputVisible, inputValue, tempElements, isAddNewVisible, forbiddenErrors} = this.state;
         const tagsElements = tags.map(this.renderElement);
         const temporaryElements = tempElements.map(this.renderTempElement);
         return (
             <div style={{marginBottom: 16}}>
+                {(forbiddenErrors.tags) && (
+                    <Alert
+                        message="You don't have permission to view tags."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <Card>
                     <Spin tip="Working on it..." spinning={this.state.loading}>
                         <Row>
@@ -365,8 +384,7 @@ class ManageTags extends React.Component {
                                         },
                                     }}
                                     leave={{opacity: 0, width: 0, scale: 0, duration: 200}}
-                                    appear={false}
+                                    appear={false}>
-                                >
                                     {temporaryElements}
 
                                     {inputVisible && (

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

@@ -55,7 +55,10 @@ class AddNewAppFormComponent extends React.Component {
             isError: false,
             deviceType: null,
             supportedOsVersions: [],
-            errorText: ""
+            errorText: "",
+            forbiddenErrors: {
+                supportedOsVersions: false
+            }
         };
     }
 
@@ -143,15 +146,24 @@ class AddNewAppFormComponent extends React.Component {
                 });
             }
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load supported OS versions.");
+            handleApiError(error, "Error occurred while trying to load supported OS versions.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.supportedOsVersions = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
                 this.setState({
                     loading: false
                 });
+            }
         });
     };
 
     render() {
-        const {loading, current, isError, supportedOsVersions, errorText} = this.state;
+        const {loading, current, isError, supportedOsVersions, errorText, forbiddenErrors} = this.state;
         const {formConfig} = this.props;
         return (
             <div>
@@ -171,6 +183,7 @@ class AddNewAppFormComponent extends React.Component {
                                 </div>
                                 <div style={{display: (current === 1 ? 'unset' : 'none')}}>
                                     <NewAppUploadForm
+                                        forbiddenErrors={forbiddenErrors}
                                         formConfig={formConfig}
                                         supportedOsVersions={supportedOsVersions}
                                         onSuccessReleaseData={this.onSuccessReleaseData}

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

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Button, Col, Divider, Form, Icon, Input, notification, Row, Select, Spin, Switch, Upload} from "antd";
+import {Alert, Button, Col, Divider, Form, Icon, Input, notification, Row, Select, Spin, Switch, Upload} from "antd";
 import axios from "axios";
 import {withConfigContext} from "../../../context/ConfigContext";
 import {handleApiError} from "../../../js/Utils";
@@ -46,10 +46,16 @@ class NewAppDetailsForm extends React.Component {
             deviceTypes: [],
             fetching: false,
             roleSearchValue: [],
-            unrestrictedRoles: []
+            unrestrictedRoles: [],
+            forbiddenErrors: {
+                categories: false,
+                tags: false,
+                deviceTypes: false,
+                roles: false
+            }
         };
         this.lastFetchId = 0;
-        this.fetchUser = debounce(this.fetchRoles, 800);
+        this.fetchRoles = debounce(this.fetchRoles, 800);
     }
 
     handleSubmit = e => {
@@ -89,6 +95,8 @@ class NewAppDetailsForm extends React.Component {
 
     componentDidMount() {
         this.getCategories();
+        this.getTags();
+        this.getDeviceTypes();
     }
 
     getCategories = () => {
@@ -103,13 +111,20 @@ class NewAppDetailsForm extends React.Component {
                     loading: false
                 });
             }
-            this.getTags();
-
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load categories.");
+            handleApiError(error, "Error occurred while trying to load categories.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.categories = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
                 this.setState({
                     loading: false
                 });
+            }
         });
     };
 
@@ -125,13 +140,20 @@ class NewAppDetailsForm extends React.Component {
                     loading: false,
                 });
             }
-            this.getDeviceTypes();
-
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load tags.");
+            handleApiError(error, "Error occurred while trying to load tags.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.tags = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
                 this.setState({
                     loading: false
                 });
+            }
         });
     };
 
@@ -169,10 +191,19 @@ class NewAppDetailsForm 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
                 });
+            }
         });
     };
 
@@ -203,8 +234,19 @@ class NewAppDetailsForm 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) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.roles = true;
+                this.setState({
+                    forbiddenErrors,
+                    fetching: false
+                })
+            } else {
+                this.setState({
+                    fetching: false
+                });
+            }
         });
     };
 
@@ -218,7 +260,7 @@ class NewAppDetailsForm extends React.Component {
 
     render() {
         const {formConfig} = this.props;
-        const {categories, tags, deviceTypes, fetching, roleSearchValue, unrestrictedRoles} = this.state;
+        const {categories, tags, deviceTypes, fetching, roleSearchValue, unrestrictedRoles, forbiddenErrors} = this.state;
         const {getFieldDecorator} = this.props.form;
 
         return (
@@ -233,6 +275,14 @@ class NewAppDetailsForm extends React.Component {
                             layout="horizontal"
                             onSubmit={this.handleSubmit}>
                             {formConfig.installationType !== "WEB_CLIP" && (
+                                <div>
+                                    {(forbiddenErrors.deviceTypes) && (
+                                        <Alert
+                                            message="You don't have permission to view device types."
+                                            type="warning"
+                                            banner
+                                            closable/>
+                                    )}
                                     <Form.Item {...formItemLayout} label="Device Type">
                                         {getFieldDecorator('deviceType', {
                                                 rules: [
@@ -245,8 +295,7 @@ class NewAppDetailsForm extends React.Component {
                                         )(
                                             <Select
                                                 style={{width: '100%'}}
-                                            placeholder="select device type"
+                                                placeholder="select device type">
-                                            onChange={this.handleCategoryChange}>
                                                 {
                                                     deviceTypes.map(deviceType => {
                                                         return (
@@ -260,6 +309,7 @@ class NewAppDetailsForm extends React.Component {
                                             </Select>
                                         )}
                                     </Form.Item>
+                                </div>
                             )}
 
                             {/*app name*/}
@@ -287,6 +337,13 @@ class NewAppDetailsForm extends React.Component {
                             </Form.Item>
 
                             {/*Unrestricted Roles*/}
+                            {(forbiddenErrors.roles) && (
+                                <Alert
+                                    message="You don't have permission to view roles."
+                                    type="warning"
+                                    banner
+                                    closable/>
+                            )}
                             <Form.Item {...formItemLayout} label="Unrestricted Roles">
                                 {getFieldDecorator('unrestrictedRoles', {
                                     rules: [],
@@ -295,7 +352,7 @@ class NewAppDetailsForm extends React.Component {
                                     <Select
                                         mode="multiple"
                                         labelInValue
-                                        value={roleSearchValue}
+                                        // value={roleSearchValue}
                                         placeholder="Search roles"
                                         notFoundContent={fetching ? <Spin size="small"/> : null}
                                         filterOption={false}
@@ -308,6 +365,13 @@ class NewAppDetailsForm extends React.Component {
                                     </Select>
                                 )}
                             </Form.Item>
+                            {(forbiddenErrors.categories) && (
+                                <Alert
+                                    message="You don't have permission to view categories."
+                                    type="warning"
+                                    banner
+                                    closable/>
+                            )}
                             <Form.Item {...formItemLayout} label="Categories">
                                 {getFieldDecorator('categories', {
                                     rules: [{
@@ -333,6 +397,13 @@ class NewAppDetailsForm extends React.Component {
                                     </Select>
                                 )}
                             </Form.Item>
+                            {(forbiddenErrors.tags) && (
+                                <Alert
+                                    message="You don't have permission to view tags."
+                                    type="warning"
+                                    banner
+                                    closable/>
+                            )}
                             <Form.Item {...formItemLayout} label="Tags">
                                 {getFieldDecorator('tags', {
                                     rules: [{

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

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber, Modal} from "antd";
+import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber, Modal, Alert} from "antd";
 import "@babel/polyfill";
 import axios from "axios";
 import {handleApiError} from "../../../js/Utils";
@@ -400,6 +400,14 @@ class NewAppUploadForm extends React.Component {
                             </Form.Item>
 
                             {(formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") && (
+                                <div>
+                                    {(this.props.forbiddenErrors.supportedOsVersions) && (
+                                        <Alert
+                                            message="You don't have permission to view supported OS versions."
+                                            type="warning"
+                                            banner
+                                            closable/>
+                                    )}
                                     <Form.Item
                                         {...formItemLayout}
                                         label="Supported OS Versions"
@@ -454,6 +462,7 @@ class NewAppUploadForm extends React.Component {
                                             </div>
                                         )}
                                     </Form.Item>
+                                </div>
                             )}
                             <Form.Item {...formItemLayout} label="Meta Data">
                                 {getFieldDecorator('meta', {})(

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

@@ -41,7 +41,10 @@ class AddNewReleaseFormComponent extends React.Component {
             supportedOsVersions: [],
             application: null,
             release: null,
-            deviceType: null
+            deviceType: null,
+            forbiddenErrors: {
+                supportedOsVersions: false
+            }
         };
     }
 
@@ -63,10 +66,19 @@ class AddNewReleaseFormComponent extends React.Component {
                 });
             }
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load supported OS versions.");
+            handleApiError(error, "Error occurred while trying to load supported OS versions.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.supportedOsVersions = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
                 this.setState({
                     loading: false
                 });
+            }
         });
     };
 
@@ -122,7 +134,7 @@ class AddNewReleaseFormComponent extends React.Component {
     };
 
     render() {
-        const {loading, supportedOsVersions} = this.state;
+        const {loading, supportedOsVersions, forbiddenErrors} = this.state;
         return (
             <div>
                 <Spin tip="Uploading..." spinning={loading}>
@@ -130,6 +142,7 @@ class AddNewReleaseFormComponent extends React.Component {
                         <Col span={17} offset={4}>
                             <Card>
                                 <NewAppUploadForm
+                                    forbiddenErrors={forbiddenErrors}
                                     formConfig={formConfig}
                                     supportedOsVersions={supportedOsVersions}
                                     onSuccessReleaseData={this.onSuccessReleaseData}

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

@@ -18,11 +18,12 @@
 
 import {notification} from "antd";
 
-export const handleApiError = (error, message) => {
+export const handleApiError = (error, message, isForbiddenMessageSilent) => {
     if (error.hasOwnProperty("response") && error.response.status === 401) {
         const redirectUrl = encodeURI(window.location.href);
         window.location.href = window.location.origin + `/publisher/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: 10,

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

@@ -24,6 +24,7 @@ import ReleaseView from "../../../../components/apps/release/ReleaseView";
 import LifeCycle from "../../../../components/apps/release/lifeCycle/LifeCycle";
 import {withConfigContext} from "../../../../context/ConfigContext";
 import {handleApiError} from "../../../../js/Utils";
+import NewAppUploadForm from "../../../../components/new-app/subForms/NewAppUploadForm";
 
 const {Title} = Typography;
 
@@ -40,13 +41,19 @@ class Release extends React.Component {
             release: null,
             currentLifecycleStatus: null,
             lifecycle: null,
-            supportedOsVersions:[]
+            supportedOsVersions: [],
+            forbiddenErrors: {
+                supportedOsVersions: false,
+                lifeCycle: false
+            }
         };
     }
 
     componentDidMount() {
         const {uuid} = this.props.match.params;
         this.fetchData(uuid);
+        this.getLifecycle();
+
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
@@ -88,8 +95,6 @@ class Release extends React.Component {
                 });
                 if (config.deviceTypes.mobileTypes.includes(app.deviceType)) {
                     this.getSupportedOsVersions(app.deviceType);
-                }else{
-                    this.getLifecycle();
                 }
             }
 
@@ -111,8 +116,15 @@ class Release extends React.Component {
                 })
             }
 
-        }).catch(function (error) {
+        }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load lifecycle configuration.");
+            handleApiError(error, "Error occurred while trying to load lifecycle configuration.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.lifeCycle = true;
+                this.setState({
+                    forbiddenErrors
+                })
+            }
         });
     };
 
@@ -125,21 +137,28 @@ class Release extends React.Component {
             if (res.status === 200) {
                 let supportedOsVersions = JSON.parse(res.data.data);
                 this.setState({
-                    supportedOsVersions,
+                    supportedOsVersions
-                    loading: false,
                 });
-                this.getLifecycle();
             }
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load supported OS versions.");
+            handleApiError(error, "Error occurred while trying to load supported OS versions.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.supportedOsVersions = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
                 this.setState({
                     loading: false
                 });
+            }
         });
     };
 
     render() {
-        const {app, release, currentLifecycleStatus, lifecycle, loading} = this.state;
+        const {app, release, currentLifecycleStatus, lifecycle, loading, forbiddenErrors} = this.state;
 
         if (release == null && loading === false) {
             return (
@@ -159,6 +178,7 @@ class Release extends React.Component {
                                 <Skeleton loading={loading} avatar={{size: 'large'}} active paragraph={{rows: 18}}>
                                     {(release !== null) && (
                                         <ReleaseView
+                                            forbiddenErrors={forbiddenErrors}
                                             app={app}
                                             release={release}
                                             currentLifecycleStatus={currentLifecycleStatus}