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,23 +92,50 @@ 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.getUserPermissions(config);
+        }
+      })
+      .catch(error => {
+        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;
@@ -128,7 +155,6 @@ class App extends React.Component {
         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;
+        handleApiError(error, 'Error occurred while trying to load apps.');
         this.setState({
-            forbiddenErrors,
           loading: false,
         });
-        } else {
-          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,10 +34,22 @@ class Apps extends React.Component {
       <div>
         <div style={{ background: '#f0f2f5', padding: 24, minHeight: 760 }}>
           {deviceType !== null && (
+            <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>
       </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,15 +31,6 @@ 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',
@@ -68,7 +60,9 @@ class CurrentUsersReview extends React.Component {
           )}
 
           {currentUserReviews.length === 0 && (
-              <div>
+            <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>
+              }
+              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,7 +136,10 @@ class Review extends React.Component {
             updateCallback={this.updateCallback}
           />
         )}
-        {isDeletable && (
+        {isDeletable && !isPersonalReview && (
+          <Authorized
+            permission="/permission/admin/app-mgt/store/admin/review/update"
+            yes={
               <Popconfirm
                 title="Are you sure delete this review?"
                 onConfirm={this.deleteReview}
@@ -144,6 +148,23 @@ class Review extends React.Component {
               >
                 <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,11 +118,13 @@ class ReviewContainer extends React.Component {
 
   render() {
     const { uuid } = this.props;
-    const { currentUserReviews, detailedRating, forbiddenErrors } = this.state;
+    const { currentUserReviews, detailedRating } = this.state;
     return (
+      <Authorized
+        permission="/permission/admin/app-mgt/store/review/view"
+        yes={
           <div>
             <CurrentUsersReview
-          forbidden={forbiddenErrors.currentReview}
               uuid={uuid}
               currentUserReviews={currentUserReviews}
               onUpdateReview={this.onUpdateReview}
@@ -147,8 +137,14 @@ class ReviewContainer extends React.Component {
                 <DetailedRating type="app" detailedRating={detailedRating} />
               </Col>
             </Row>
-        <Reviews type="app" uuid={uuid} deleteCallback={this.onUpdateReview} />
+            <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,15 +224,10 @@ class SubscriptionDetails extends React.Component {
   render() {
     const { data, pagination, loading } = this.state;
     return (
+      <Authorized
+        permission="/permission/admin/app-mgt/store/admin/subscription/view"
+        yes={
           <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
@@ -265,6 +261,14 @@ class SubscriptionDetails extends React.Component {
               scroll={{ x: 1000 }}
             />
           </div>
+        }
+        no={
+          <Alert
+            type="warning"
+            message="You don't have permission to view subscription details"
+          />
+        }
+      />
     );
   }
 }

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;
@@ -166,6 +167,7 @@ class ReleaseView extends React.Component {
     );
 
     return (
+      <div>
         <div>
           <AppInstallModal
             uuid={release.uuid}
@@ -183,6 +185,7 @@ class ReleaseView extends React.Component {
             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',
                 }}
               >
+                <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>
+            <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;