Fix android enterprise view crashing by permission rendering

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/components/Pages/index.js

@@ -49,8 +49,8 @@ class Pages extends React.Component {
       homePageId: null,
     };
     this.hasPermissionToManage = isAuthorized(
-      this.props.config.user,
+      this.props.context.user,
-      '/device-mgt/enterprise/user/view',
+      '/permission/admin/device-mgt/enterprise/user/modify',
     );
   }
 
@@ -63,7 +63,9 @@ class Pages extends React.Component {
   };
 
   componentDidMount() {
+    if (this.hasPermissionToView) {
       this.setHomePage();
+    }
     this.fetch();
   }
 
@@ -273,7 +275,7 @@ class Pages extends React.Component {
     return (
       <div className="layout-pages">
         <Title level={4}>Pages</Title>
-        <AddNewPage />
+        {this.hasPermissionToManage && <AddNewPage />}
         <div style={{ backgroundColor: '#ffffff', borderRadius: 5 }}>
           <Table
             columns={this.columns}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/components/Cluster/index.js

@@ -295,8 +295,8 @@ class Cluster extends React.Component {
       }
       return (
         <div className="product">
-          {this.props.hasPermissionToManage && (
           <div className="arrow">
+            {this.props.hasPermissionToManage && (
               <button
                 disabled={index === 0}
                 className="btn"
@@ -306,8 +306,8 @@ class Cluster extends React.Component {
               >
                 <Icon type="caret-left" theme="filled" />
               </button>
-            </div>
             )}
+          </div>
           <div className="product-icon">
             <img src={imageSrc} />
             <Tooltip title={packageId}>
@@ -348,9 +348,14 @@ class Cluster extends React.Component {
         <Spin spinning={loading}>
           <Row>
             <Col span={16}>
+              {this.props.hasPermissionToManage && (
                 <Title editable={{ onChange: this.handleNameChange }} level={4}>
                   {name}
                 </Title>
+              )}
+              {!this.props.hasPermissionToManage && (
+                <Title level={4}>{name}</Title>
+              )}
             </Col>
             <Col span={8}>
               {!isTemporary && this.props.hasPermissionToManage && (
@@ -413,11 +418,14 @@ class Cluster extends React.Component {
               );
             })}
           </div>
+          {this.props.hasPermissionToManage && (
             <Row>
               <Col>
                 {isTemporary && (
                   <div>
-                  <Button onClick={this.cancelAddingNewCluster}>Cancel</Button>
+                    <Button onClick={this.cancelAddingNewCluster}>
+                      Cancel
+                    </Button>
                     <Divider type="vertical" />
                     <Tooltip
                       title={
@@ -458,6 +466,7 @@ class Cluster extends React.Component {
                 )}
               </Col>
             </Row>
+          )}
         </Spin>
       </div>
     );

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/index.js

@@ -63,16 +63,23 @@ class Page extends React.Component {
       links: [],
     };
     this.hasPermissionToManage = isAuthorized(
-      this.props.config.user,
+      this.props.context.user,
-      '/device-mgt/enterprise/user/view',
+      '/permission/admin/device-mgt/enterprise/user/modify',
+    );
+
+    this.hasPermissionToView = isAuthorized(
+      this.props.context.user,
+      '/permission/admin/device-mgt/enterprise/user/view',
     );
   }
 
   componentDidMount() {
+    if (this.hasPermissionToView) {
       this.fetchClusters();
       this.fetchApplications();
       this.fetchPages();
     }
+  }
 
   removeLoadedCluster = clusterId => {
     const clusters = [...this.state.clusters];
@@ -344,12 +351,17 @@ class Page extends React.Component {
               >
                 <Row>
                   <Col md={8} sm={18} xs={24}>
+                    {this.hasPermissionToManage && (
                       <Title
                         editable={{ onChange: this.updatePageName }}
                         level={2}
                       >
                         {pageName}
                       </Title>
+                    )}
+                    {!this.hasPermissionToManage && (
+                      <Title level={2}>{pageName}</Title>
+                    )}
                   </Col>
                 </Row>
                 <Row>
@@ -412,6 +424,7 @@ class Page extends React.Component {
                       name: 'New Cluster',
                       products: [],
                     }}
+                    hasPermissionToManage={true}
                     orderInPage={clusters.length}
                     isTemporary={true}
                     pageId={this.pageId}