Add permission based access control to APPM store

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json

@@ -85,7 +85,7 @@
     "start": "webpack-dev-server --mode development --open",
     "dev": "webpack --mode development",
     "build": "webpack --mode production",
-    "watch": "webpack --watch --mode development",
+    "watch": "webpack --watch --mode development --progress --colors",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "build_prod": "cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 webpack -p --display errors-only --hide-modules",

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json

@@ -7,8 +7,8 @@
     "footerText": "©2019 entgra.io"
   },
   "serverConfig": {
-    "invokerUri": "/ui-request-handler/invoke/application-mgt-store/v1.0",
     "invoker": {
+      "contextPath" : "/store-ui-request-handler",
       "uri": "/store-ui-request-handler/invoke",
       "publisher": "/application-mgt-publisher/v1.0",
       "store": "/application-mgt-store/v1.0",

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

@@ -92,43 +92,69 @@ class App extends React.Component {
   checkUserLoggedIn = config => {
     axios
       .post(
-        window.location.origin + '/store-ui-request-handler/user',
-        'platform=publisher',
+        window.location.origin +
+          config.serverConfig.invoker.contextPath +
+          '/user',
       )
       .then(res => {
-        config.user = res.data.data;
+        config.user = {
+          username: res.data.data,
+        };
         const pageURL = window.location.pathname;
         const lastURLSegment = pageURL.substr(pageURL.lastIndexOf('/') + 1);
         if (lastURLSegment === 'login') {
           window.location.href = window.location.origin + '/store/';
         } else {
-          this.setState({
-            loading: false,
-            config: config,
-          });
+          this.getUserPermissions(config);
         }
       })
       .catch(error => {
-        if (error.hasOwnProperty('response') && error.response.status === 401) {
-          const redirectUrl = encodeURI(window.location.href);
-          const pageURL = window.location.pathname;
-          const lastURLSegment = pageURL.substr(pageURL.lastIndexOf('/') + 1);
-          if (lastURLSegment !== 'login') {
-            window.location.href =
-              window.location.origin + `/store/login?redirect=${redirectUrl}`;
-          } else {
-            this.setState({
-              loading: false,
-              config: config,
-            });
-          }
-        } else {
-          this.setState({
-            loading: false,
-            error: true,
-          });
-        }
+        this.handleApiError(error, config);
+      });
+  };
+
+  getUserPermissions = config => {
+    axios
+      .get(
+        window.location.origin +
+          config.serverConfig.invoker.uri +
+          config.serverConfig.invoker.deviceMgt +
+          '/users/' +
+          config.user.username +
+          '/permissions',
+      )
+      .then(res => {
+        config.user.permissions = res.data.data.permissions;
+        this.setState({
+          loading: false,
+          config: config,
+        });
+      })
+      .catch(error => {
+        this.handleApiError(error, config);
+      });
+  };
+
+  handleApiError = (error, config) => {
+    if (error.hasOwnProperty('response') && error.response.status === 401) {
+      const redirectUrl = encodeURI(window.location.href);
+      const pageURL = window.location.pathname;
+      const lastURLSegment = pageURL.substr(pageURL.lastIndexOf('/') + 1);
+      if (lastURLSegment !== 'login') {
+        window.location.href =
+          window.location.origin + `/store/login?redirect=${redirectUrl}`;
+      } else {
+        this.setState({
+          loading: false,
+          config: config,
+        });
+      }
+    } else {
+      this.setState({
+        loading: false,
+        error: true,
       });
+    }
   };
 
   render() {

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

@@ -0,0 +1,27 @@
+import react from 'react';
+import { withConfigContext } from '../context/ConfigContext';
+
+class Authorized extends react.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  isAuthorized = (user, permission) => {
+    if (!user || !permission) {
+      return false;
+    }
+    return user.permissions.includes(permission);
+  };
+
+  render() {
+    return this.isAuthorized(this.props.context.user, this.props.permission)
+      ? this.props.yes
+      : this.props.no;
+  }
+}
+
+Authorized.defaultProps = {
+  yes: () => null,
+  no: () => null,
+};
+export default withConfigContext(Authorized);

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

@@ -171,7 +171,7 @@ class Dashboard extends React.Component {
                   title={
                     <span className="submenu-title-wrapper">
                       <Icon type="user" />
-                      {this.config.user}
+                      {this.config.user.username}
                     </span>
                   }
                 >

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/index.js

@@ -34,9 +34,6 @@ class AppList extends React.Component {
       loading: true,
       hasMore: true,
       loadMore: true,
-      forbiddenErrors: {
-        apps: false,
-      },
       totalAppCount: 0,
     };
   }
@@ -101,23 +98,10 @@ class AppList extends React.Component {
         }
       })
       .catch(error => {
-        handleApiError(
-          error,
-          'Error occurred while trying to load apps.',
-          true,
-        );
-        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,
-          });
-        }
+        handleApiError(error, 'Error occurred while trying to load apps.');
+        this.setState({
+          loading: false,
+        });
       });
   };
 
@@ -145,7 +129,7 @@ class AppList extends React.Component {
   };
 
   render() {
-    const { apps, loading, forbiddenErrors, hasMore } = this.state;
+    const { apps, loading, hasMore } = this.state;
 
     return (
       <div>
@@ -158,14 +142,7 @@ class AppList extends React.Component {
           useWindow={true}
         >
           <Row gutter={16}>
-            {forbiddenErrors.apps && (
-              <Result
-                status="403"
-                title="403"
-                subTitle="You don't have permission to view apps."
-              />
-            )}
-            {!forbiddenErrors.apps && apps.length === 0 && (
+            {apps.length === 0 && (
               <Result
                 status="404"
                 title="No apps, yet."

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/index.js

@@ -18,6 +18,8 @@
 
 import React from 'react';
 import AppList from './components/AppList';
+import Authorized from '../../../../components/Authorized';
+import { Result } from 'antd';
 
 class Apps extends React.Component {
   routes;
@@ -32,9 +34,21 @@ class Apps extends React.Component {
       <div>
         <div style={{ background: '#f0f2f5', padding: 24, minHeight: 760 }}>
           {deviceType !== null && (
-            <AppList
-              changeSelectedMenuItem={this.props.changeSelectedMenuItem}
-              deviceType={deviceType}
+            <Authorized
+              permission="/permission/admin/app-mgt/store/application/view"
+              yes={
+                <AppList
+                  changeSelectedMenuItem={this.props.changeSelectedMenuItem}
+                  deviceType={deviceType}
+                />
+              }
+              no={
+                <Result
+                  status="403"
+                  title="403"
+                  subTitle="You don't have permission to view apps."
+                />
+              }
             />
           )}
         </div>

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/Install/components/DeviceInstall/index.js

@@ -23,8 +23,8 @@ import TimeAgo from 'javascript-time-ago';
 
 // Load locale-specific relative date/time formatting rules.
 import en from 'javascript-time-ago/locale/en';
-import { withConfigContext } from '../../../../../../../../../../../../components/context/ConfigContext';
-import { handleApiError } from '../../../../../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../../../../../services/utils/errorHandler';
 import InstallModalFooter from '../../../installModalFooter';
 
 const { Text } = Typography;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/Install/components/GroupInstall/index.js

@@ -20,8 +20,8 @@ import React from 'react';
 import { Typography, Select, Spin, Alert } from 'antd';
 import debounce from 'lodash.debounce';
 import axios from 'axios';
-import { withConfigContext } from '../../../../../../../../../../../../components/context/ConfigContext';
-import { handleApiError } from '../../../../../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../../../../../services/utils/errorHandler';
 import InstallModalFooter from '../../../installModalFooter';
 
 const { Text } = Typography;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/Install/components/RoleInstall/index.js

@@ -20,8 +20,8 @@ import React from 'react';
 import { Typography, Select, Spin, Alert } from 'antd';
 import debounce from 'lodash.debounce';
 import axios from 'axios';
-import { withConfigContext } from '../../../../../../../../../../../../components/context/ConfigContext';
-import { handleApiError } from '../../../../../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../../../../../services/utils/errorHandler';
 import InstallModalFooter from '../../../installModalFooter';
 
 const { Text } = Typography;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/Install/components/UserInstall/index.js

@@ -20,8 +20,8 @@ import React from 'react';
 import { Typography, Select, Spin, Alert } from 'antd';
 import debounce from 'lodash.debounce';
 import axios from 'axios';
-import { withConfigContext } from '../../../../../../../../../../../../components/context/ConfigContext';
-import { handleApiError } from '../../../../../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../../../../../services/utils/errorHandler';
 import InstallModalFooter from '../../../installModalFooter';
 
 const { Text } = Typography;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/componets/CurrentUsersReview/components/AddReview/index.js

@@ -31,8 +31,8 @@ import {
 } from 'antd';
 import StarRatings from 'react-star-ratings';
 import axios from 'axios';
-import { withConfigContext } from '../../../../../../../../../../../../../../components/context/ConfigContext';
-import { handleApiError } from '../../../../../../../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../../../../../../../services/utils/errorHandler';
 
 const { Title } = Typography;
 const { TextArea } = Input;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/componets/CurrentUsersReview/index.js

@@ -20,7 +20,8 @@ import React from 'react';
 import { List, Typography, Empty, Alert } from 'antd';
 import SingleReview from '../Reviews/components/Review';
 import AddReview from './components/AddReview';
-import { withConfigContext } from '../../../../../../../../../../../../components/context/ConfigContext';
+import { withConfigContext } from '../../../../../../../../../../../../../../components/context/ConfigContext';
+import Authorized from '../../../../../../../../../../../../../../components/Authorized';
 
 const { Text } = Typography;
 
@@ -30,45 +31,38 @@ 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,
-              paddingLeft: 24,
-            }}
-          >
-            {currentUserReviews.length > 0 && (
-              <div>
-                <List
-                  dataSource={currentUserReviews}
-                  renderItem={item => (
-                    <List.Item key={item.id}>
-                      <SingleReview
-                        uuid={uuid}
-                        review={item}
-                        isDeletable={true}
-                        isEditable={true}
-                        deleteCallback={this.props.deleteCallback}
-                        onUpdateReview={this.props.onUpdateReview}
-                        isPersonalReview={true}
-                      />
-                    </List.Item>
-                  )}
-                />
-              </div>
-            )}
+        <div
+          style={{
+            overflow: 'auto',
+            paddingTop: 8,
+            paddingLeft: 24,
+          }}
+        >
+          {currentUserReviews.length > 0 && (
+            <div>
+              <List
+                dataSource={currentUserReviews}
+                renderItem={item => (
+                  <List.Item key={item.id}>
+                    <SingleReview
+                      uuid={uuid}
+                      review={item}
+                      isDeletable={true}
+                      isEditable={true}
+                      deleteCallback={this.props.deleteCallback}
+                      onUpdateReview={this.props.onUpdateReview}
+                      isPersonalReview={true}
+                    />
+                  </List.Item>
+                )}
+              />
+            </div>
+          )}
 
-            {currentUserReviews.length === 0 && (
-              <div>
+          {currentUserReviews.length === 0 && (
+            <Authorized
+              permission="/permission/admin/app-mgt/store/review/update"
+              yes={
                 <Empty
                   image={Empty.PRESENTED_IMAGE_DEFAULT}
                   imagestyle={{
@@ -81,16 +75,21 @@ class CurrentUsersReview extends React.Component {
                     </span>
                   }
                 >
-                  {/* <Button type="primary">Add review</Button>*/}
                   <AddReview
                     uuid={uuid}
                     onUpdateReview={this.props.onUpdateReview}
                   />
                 </Empty>
-              </div>
-            )}
-          </div>
-        )}
+              }
+              no={
+                <Alert
+                  type="warning"
+                  message="You don't have permission to add reviews"
+                />
+              }
+            />
+          )}
+        </div>
       </div>
     );
   }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/componets/Rating/index.js

@@ -20,7 +20,7 @@ import React from 'react';
 import { Row, Typography, Icon } from 'antd';
 import StarRatings from 'react-star-ratings';
 import './styles.css';
-import { withConfigContext } from '../../../../../../../../../../../../components/context/ConfigContext';
+import { withConfigContext } from '../../../../../../../../../../../../../../components/context/ConfigContext';
 
 const { Text } = Typography;
 

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/componets/Reviews/components/Review/components/Edit/index.js

@@ -31,8 +31,8 @@ import {
 import StarRatings from 'react-star-ratings';
 import axios from 'axios';
 import './styles.css';
-import { withConfigContext } from '../../../../../../../../../../../../../../../../components/context/ConfigContext';
-import { handleApiError } from '../../../../../../../../../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../../../../../../../../../services/utils/errorHandler';
 
 const { Title } = Typography;
 const { TextArea } = Input;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/componets/Reviews/components/Review/index.js

@@ -24,8 +24,9 @@ import Twemoji from 'react-twemoji';
 import './styles.css';
 import EditReview from './components/Edit';
 import axios from 'axios';
-import { withConfigContext } from '../../../../../../../../../../../../../../components/context/ConfigContext';
-import { handleApiError } from '../../../../../../../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../../../../../../../services/utils/errorHandler';
+import Authorized from '../../../../../../../../../../../../../../../../components/Authorized';
 
 const { Text, Paragraph } = Typography;
 const colorList = [
@@ -100,7 +101,7 @@ class Review extends React.Component {
   };
 
   render() {
-    const { isEditable, isDeletable, uuid } = this.props;
+    const { isEditable, isDeletable, uuid, isPersonalReview } = this.props;
     const { color, review } = this.state;
     const { content, rating, username } = review;
     const avatarLetter = username.charAt(0).toUpperCase();
@@ -135,15 +136,35 @@ class Review extends React.Component {
             updateCallback={this.updateCallback}
           />
         )}
-        {isDeletable && (
-          <Popconfirm
-            title="Are you sure delete this review?"
-            onConfirm={this.deleteReview}
-            okText="Yes"
-            cancelText="No"
-          >
-            <span className="delete-button">delete</span>
-          </Popconfirm>
+        {isDeletable && !isPersonalReview && (
+          <Authorized
+            permission="/permission/admin/app-mgt/store/admin/review/update"
+            yes={
+              <Popconfirm
+                title="Are you sure delete this review?"
+                onConfirm={this.deleteReview}
+                okText="Yes"
+                cancelText="No"
+              >
+                <span className="delete-button">delete</span>
+              </Popconfirm>
+            }
+          />
+        )}
+        {isDeletable && isPersonalReview && (
+          <Authorized
+            permission="/permission/admin/app-mgt/store/review/update"
+            yes={
+              <Popconfirm
+                title="Are you sure delete this review?"
+                onConfirm={this.deleteReview}
+                okText="Yes"
+                cancelText="No"
+              >
+                <span className="delete-button">delete</span>
+              </Popconfirm>
+            }
+          />
         )}
       </div>
     );

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/componets/Reviews/index.js

@@ -23,8 +23,8 @@ import './styles.css';
 import InfiniteScroll from 'react-infinite-scroller';
 import SingleReview from './components/Review';
 import axios from 'axios';
-import { withConfigContext } from '../../../../../../../../../../../../components/context/ConfigContext';
-import { handleApiError } from '../../../../../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../../../../../services/utils/errorHandler';
 
 const limit = 5;
 

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/index.js

@@ -22,8 +22,9 @@ import { Col, Divider, Row, Typography } from 'antd';
 import DetailedRating from './componets/Rating';
 import Reviews from './componets/Reviews';
 import axios from 'axios';
-import { handleApiError } from '../../../../../../../../../../services/utils/errorHandler';
-import { withConfigContext } from '../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../../../components/context/ConfigContext';
+import Authorized from '../../../../../../../../../../../../components/Authorized';
 
 const { Text } = Typography;
 
@@ -34,7 +35,6 @@ class ReviewContainer extends React.Component {
       currentUserReviews: [],
       detailedRating: null,
       forbiddenErrors: {
-        currentReview: false,
         reviews: false,
         rating: false,
       },
@@ -70,18 +70,6 @@ class ReviewContainer extends React.Component {
           '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,
-          });
-        }
       });
   };
 
@@ -130,25 +118,33 @@ class ReviewContainer extends React.Component {
 
   render() {
     const { uuid } = this.props;
-    const { currentUserReviews, detailedRating, forbiddenErrors } = this.state;
+    const { currentUserReviews, detailedRating } = this.state;
     return (
-      <div>
-        <CurrentUsersReview
-          forbidden={forbiddenErrors.currentReview}
-          uuid={uuid}
-          currentUserReviews={currentUserReviews}
-          onUpdateReview={this.onUpdateReview}
-          deleteCallback={this.deleteCurrentUserReviewCallback}
-        />
-        <Divider dashed={true} />
-        <Text>REVIEWS</Text>
-        <Row>
-          <Col lg={18} md={24}>
-            <DetailedRating type="app" detailedRating={detailedRating} />
-          </Col>
-        </Row>
-        <Reviews type="app" uuid={uuid} deleteCallback={this.onUpdateReview} />
-      </div>
+      <Authorized
+        permission="/permission/admin/app-mgt/store/review/view"
+        yes={
+          <div>
+            <CurrentUsersReview
+              uuid={uuid}
+              currentUserReviews={currentUserReviews}
+              onUpdateReview={this.onUpdateReview}
+              deleteCallback={this.deleteCurrentUserReviewCallback}
+            />
+            <Divider dashed={true} />
+            <Text>REVIEWS</Text>
+            <Row>
+              <Col lg={18} md={24}>
+                <DetailedRating type="app" detailedRating={detailedRating} />
+              </Col>
+            </Row>
+            <Reviews
+              type="app"
+              uuid={uuid}
+              deleteCallback={this.onUpdateReview}
+            />
+          </div>
+        }
+      />
     );
   }
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/SubscriptionDetails/index.js

@@ -23,8 +23,9 @@ import TimeAgo from 'javascript-time-ago';
 
 // Load locale-specific relative date/time formatting rules.
 import en from 'javascript-time-ago/locale/en';
-import { withConfigContext } from '../../../../../../../../../../components/context/ConfigContext';
-import { handleApiError } from '../../../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../../../services/utils/errorHandler';
+import Authorized from '../../../../../../../../../../../../components/Authorized';
 
 const { Text } = Typography;
 
@@ -223,48 +224,51 @@ class SubscriptionDetails extends React.Component {
   render() {
     const { data, pagination, loading } = this.state;
     return (
-      <div>
-        {this.state.isForbidden && (
+      <Authorized
+        permission="/permission/admin/app-mgt/store/admin/subscription/view"
+        yes={
+          <div>
+            <div style={{ paddingBottom: 24 }}>
+              <Text>
+                The following are the subscription details of the application in
+                each respective device.
+              </Text>
+            </div>
+            <div style={{ textAlign: 'right', paddingBottom: 6 }}>
+              <Button icon="sync" onClick={this.fetch}>
+                Refresh
+              </Button>
+            </div>
+            <Table
+              columns={columns}
+              rowKey={record =>
+                record.device.deviceIdentifier +
+                record.device.enrolmentInfo.owner +
+                record.device.enrolmentInfo.ownership
+              }
+              dataSource={data.data}
+              pagination={{
+                ...pagination,
+                size: 'small',
+                // position: "top",
+                total: data.recordsTotal,
+                showTotal: (total, range) =>
+                  `showing ${range[0]}-${range[1]} of ${total} devices`,
+                // showQuickJumper: true
+              }}
+              onChange={this.handleTableChange}
+              loading={loading}
+              scroll={{ x: 1000 }}
+            />
+          </div>
+        }
+        no={
           <Alert
-            message="You don't have permission to view subscription details."
             type="warning"
-            banner
-            closable
+            message="You don't have permission to view subscription details"
           />
-        )}
-        <div style={{ paddingBottom: 24 }}>
-          <Text>
-            The following are the subscription details of the application in
-            each respective device.
-          </Text>
-        </div>
-        <div style={{ textAlign: 'right', paddingBottom: 6 }}>
-          <Button icon="sync" onClick={this.fetch}>
-            Refresh
-          </Button>
-        </div>
-        <Table
-          columns={columns}
-          rowKey={record =>
-            record.device.deviceIdentifier +
-            record.device.enrolmentInfo.owner +
-            record.device.enrolmentInfo.ownership
-          }
-          dataSource={data.data}
-          pagination={{
-            ...pagination,
-            size: 'small',
-            // position: "top",
-            total: data.recordsTotal,
-            showTotal: (total, range) =>
-              `showing ${range[0]}-${range[1]} of ${total} devices`,
-            // showQuickJumper: true
-          }}
-          onChange={this.handleTableChange}
-          loading={loading}
-          scroll={{ x: 1000 }}
-        />
-      </div>
+        }
+      />
     );
   }
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/Uninstall/components/DeviceUninstall/index.js

@@ -23,8 +23,8 @@ import TimeAgo from 'javascript-time-ago';
 
 // Load locale-specific relative date/time formatting rules.
 import en from 'javascript-time-ago/locale/en';
-import { withConfigContext } from '../../../../../../../../../../../../components/context/ConfigContext';
-import { handleApiError } from '../../../../../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../../../../../services/utils/errorHandler';
 import InstallModalFooter from '../../../installModalFooter';
 
 const { Text } = Typography;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/Uninstall/components/GroupUninstall/index.js

@@ -20,8 +20,8 @@ import React from 'react';
 import { Typography, Select, Spin, Alert } from 'antd';
 import debounce from 'lodash.debounce';
 import axios from 'axios';
-import { withConfigContext } from '../../../../../../../../../../../../components/context/ConfigContext';
-import { handleApiError } from '../../../../../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../../../../../services/utils/errorHandler';
 import InstallModalFooter from '../../../installModalFooter';
 
 const { Text } = Typography;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/Uninstall/components/RoleUninstall/index.js

@@ -20,8 +20,8 @@ import React from 'react';
 import { Typography, Select, Spin, Alert } from 'antd';
 import debounce from 'lodash.debounce';
 import axios from 'axios';
-import { withConfigContext } from '../../../../../../../../../../../../components/context/ConfigContext';
-import { handleApiError } from '../../../../../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../../../../../services/utils/errorHandler';
 import InstallModalFooter from '../../../installModalFooter';
 
 const { Text } = Typography;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/Uninstall/components/UserUninstall/index.js

@@ -20,8 +20,8 @@ import React from 'react';
 import { Typography, Select, Spin, Alert } from 'antd';
 import debounce from 'lodash.debounce';
 import axios from 'axios';
-import { withConfigContext } from '../../../../../../../../../../../../components/context/ConfigContext';
-import { handleApiError } from '../../../../../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../../../../../services/utils/errorHandler';
 import InstallModalFooter from '../../../installModalFooter';
 
 const { Text } = Typography;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/index.js

@@ -30,17 +30,18 @@ import {
   Tabs,
   Tag,
 } from 'antd';
-import '../../../../../../../../App.css';
+// import '../../../../../../../../App.css';
 import ImageViewer from './components/ImageViewer';
 import StarRatings from 'react-star-ratings';
 import axios from 'axios';
 import pSBC from 'shade-blend-color';
 import AppInstallModal from './components/Install';
 import Uninstall from './components/Uninstall';
-import { withConfigContext } from '../../../../../../../../components/context/ConfigContext';
-import { handleApiError } from '../../../../../../../../services/utils/errorHandler';
+import { withConfigContext } from '../../../../../../../../../../components/context/ConfigContext';
+import { handleApiError } from '../../../../../../../../../../services/utils/errorHandler';
 import ReviewContainer from './components/ReviewContainer';
 import SubscriptionDetails from './components/SubscriptionDetails';
+import Authorized from '../../../../../../../../../../components/Authorized';
 
 const { Title, Text, Paragraph } = Typography;
 const { TabPane } = Tabs;
@@ -167,22 +168,24 @@ class ReleaseView extends React.Component {
 
     return (
       <div>
-        <AppInstallModal
-          uuid={release.uuid}
-          loading={this.state.loading}
-          visible={this.state.appInstallModalVisible}
-          deviceType={deviceType}
-          onClose={this.closeAppOperationModal}
-          onInstall={this.appOperation}
-        />
-        <Uninstall
-          uuid={release.uuid}
-          loading={this.state.loading}
-          visible={this.state.appUninstallModalVisible}
-          deviceType={deviceType}
-          onClose={this.closeAppOperationModal}
-          onUninstall={this.appOperation}
-        />
+        <div>
+          <AppInstallModal
+            uuid={release.uuid}
+            loading={this.state.loading}
+            visible={this.state.appInstallModalVisible}
+            deviceType={deviceType}
+            onClose={this.closeAppOperationModal}
+            onInstall={this.appOperation}
+          />
+          <Uninstall
+            uuid={release.uuid}
+            loading={this.state.loading}
+            visible={this.state.appUninstallModalVisible}
+            deviceType={deviceType}
+            onClose={this.closeAppOperationModal}
+            onUninstall={this.appOperation}
+          />
+        </div>
         <div className="release">
           <Row>
             <Col xl={4} sm={6} xs={8} className="release-icon">
@@ -208,11 +211,21 @@ class ReleaseView extends React.Component {
                   textAlign: 'right',
                 }}
               >
-                <Dropdown overlay={menu}>
-                  <Button type="primary">
-                    Subscribe <Icon type="down" />
-                  </Button>
-                </Dropdown>
+                <Authorized
+                  permission="/permission/admin/app-mgt/store/subscription"
+                  yes={
+                    <Dropdown overlay={menu}>
+                      <Button type="primary">
+                        Subscribe <Icon type="down" />
+                      </Button>
+                    </Dropdown>
+                  }
+                  no={
+                    <Button type="primary" disabled={true}>
+                      Subscribe <Icon type="down" />
+                    </Button>
+                  }
+                />
               </div>
             </Col>
           </Row>
@@ -281,9 +294,14 @@ class ReleaseView extends React.Component {
               <Divider />
               <ReviewContainer uuid={release.uuid} />
             </TabPane>
-            <TabPane tab="Subscription Details" key="2">
-              <SubscriptionDetails uuid={release.uuid} />
-            </TabPane>
+            <Authorized
+              permission="/permission/admin/app-mgt/store/admin/subscription/view"
+              yes={
+                <TabPane tab="Subscription Details" key="2">
+                  <SubscriptionDetails uuid={release.uuid} />
+                </TabPane>
+              }
+            />
           </Tabs>
         </div>
       </div>

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/index.js

@@ -0,0 +1,135 @@
+/*
+ * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import '../../../../../../../../App.css';
+import { Skeleton, Typography, Row, Col, Card, Breadcrumb, Icon } from 'antd';
+import ReleaseView from './components/ReleaseView';
+import axios from 'axios';
+import { withConfigContext } from '../../../../../../../../components/context/ConfigContext';
+import { Link } from 'react-router-dom';
+import { handleApiError } from '../../../../../../../../services/utils/errorHandler';
+
+const { Title } = Typography;
+
+class ReleasePage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      app: null,
+      uuid: null,
+      forbiddenErrors: {
+        app: false,
+      },
+    };
+  }
+
+  componentDidMount() {
+    const { uuid, deviceType } = this.props;
+    this.fetchData(uuid);
+    this.props.changeSelectedMenuItem(deviceType);
+  }
+
+  fetchData = uuid => {
+    const config = this.props.context;
+
+    // send request to the invoker
+    axios
+      .get(
+        window.location.origin +
+          config.serverConfig.invoker.uri +
+          config.serverConfig.invoker.store +
+          '/applications/' +
+          uuid,
+      )
+      .then(res => {
+        if (res.status === 200) {
+          let app = res.data.data;
+
+          this.setState({
+            app: app,
+            loading: false,
+            uuid: uuid,
+          });
+        }
+      })
+      .catch(error => {
+        handleApiError(
+          error,
+          'Error occurred while trying to load releases.',
+          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,
+          });
+        }
+      });
+  };
+
+  render() {
+    const { app, loading } = this.state;
+    const { deviceType } = this.props;
+
+    let content = <Title level={3}>No Releases Found</Title>;
+    let appName = 'loading...';
+
+    if (app != null && app.applicationReleases.length !== 0) {
+      content = <ReleaseView app={app} deviceType={deviceType} />;
+      appName = app.name;
+    }
+
+    return (
+      <div style={{ background: '#f0f2f5', minHeight: 780 }}>
+        <Row style={{ padding: 10 }}>
+          <Col lg={4}></Col>
+          <Col lg={16} md={24} style={{ padding: 3 }}>
+            <Breadcrumb style={{ paddingBottom: 16 }}>
+              <Breadcrumb.Item>
+                <Link to={'/store/' + deviceType}>
+                  <Icon type="home" /> {deviceType + ' apps'}{' '}
+                </Link>
+              </Breadcrumb.Item>
+              <Breadcrumb.Item>{appName}</Breadcrumb.Item>
+            </Breadcrumb>
+            <Card>
+              <Skeleton
+                loading={loading}
+                avatar={{ size: 'large' }}
+                active
+                paragraph={{ rows: 8 }}
+              >
+                {content}
+              </Skeleton>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(ReleasePage);

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/index.js

@@ -1,138 +1,31 @@
-/*
- * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
- *
- * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
 import React from 'react';
-import '../../../../../../App.css';
-import { Skeleton, Typography, Row, Col, Card, Breadcrumb, Icon } from 'antd';
-import ReleaseView from './components/ReleaseView';
-import axios from 'axios';
-import { withConfigContext } from '../../../../../../components/context/ConfigContext';
-import { Link } from 'react-router-dom';
-import { handleApiError } from '../../../../../../services/utils/errorHandler';
-
-const { Title } = Typography;
+import Authorized from '../../../../../../components/Authorized';
+import ReleasePage from './components/ReleasePage';
+import { Result } from 'antd';
 
 class Release extends React.Component {
-  routes;
-
-  constructor(props) {
-    super(props);
-    this.routes = props.routes;
-    this.state = {
-      loading: true,
-      app: null,
-      uuid: null,
-      forbiddenErrors: {
-        app: false,
-      },
-    };
-  }
-
-  componentDidMount() {
+  render() {
     const { uuid, deviceType } = this.props.match.params;
-    this.fetchData(uuid);
-    this.props.changeSelectedMenuItem(deviceType);
-  }
-
-  fetchData = uuid => {
-    const config = this.props.context;
-
-    // send request to the invoker
-    axios
-      .get(
-        window.location.origin +
-          config.serverConfig.invoker.uri +
-          config.serverConfig.invoker.store +
-          '/applications/' +
-          uuid,
-      )
-      .then(res => {
-        if (res.status === 200) {
-          let app = res.data.data;
-
-          this.setState({
-            app: app,
-            loading: false,
-            uuid: uuid,
-          });
+    return (
+      <Authorized
+        permission="/permission/admin/app-mgt/store/application/view"
+        yes={
+          <ReleasePage
+            uuid={uuid}
+            deviceType={deviceType}
+            changeSelectedMenuItem={this.props.changeSelectedMenuItem}
+          />
         }
-      })
-      .catch(error => {
-        handleApiError(
-          error,
-          'Error occurred while trying to load releases.',
-          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,
-          });
+        no={
+          <Result
+            status="403"
+            title="403"
+            subTitle="You don't have permission to view apps."
+          />
         }
-      });
-  };
-
-  render() {
-    const { app, loading } = this.state;
-    const { deviceType } = this.props.match.params;
-
-    let content = <Title level={3}>No Releases Found</Title>;
-    let appName = 'loading...';
-
-    if (app != null && app.applicationReleases.length !== 0) {
-      content = <ReleaseView app={app} deviceType={deviceType} />;
-      appName = app.name;
-    }
-
-    return (
-      <div style={{ background: '#f0f2f5', minHeight: 780 }}>
-        <Row style={{ padding: 10 }}>
-          <Col lg={4}></Col>
-          <Col lg={16} md={24} style={{ padding: 3 }}>
-            <Breadcrumb style={{ paddingBottom: 16 }}>
-              <Breadcrumb.Item>
-                <Link to={'/store/' + deviceType}>
-                  <Icon type="home" /> {deviceType + ' apps'}{' '}
-                </Link>
-              </Breadcrumb.Item>
-              <Breadcrumb.Item>{appName}</Breadcrumb.Item>
-            </Breadcrumb>
-            <Card>
-              <Skeleton
-                loading={loading}
-                avatar={{ size: 'large' }}
-                active
-                paragraph={{ rows: 8 }}
-              >
-                {content}
-              </Skeleton>
-            </Card>
-          </Col>
-        </Row>
-      </div>
+      />
     );
   }
 }
 
-export default withConfigContext(Release);
+export default Release;