Merge branch 'fix/appm-publisher/android-for-work' into 'master'

Fix android enterprise view crashing by permission rendering

Closes product-iots#491

See merge request entgra/carbon-device-mgt!519

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,
-      '/device-mgt/enterprise/user/view',
+      this.props.context.user,
+      '/permission/admin/device-mgt/enterprise/user/modify',
     );
   }
 
@@ -63,7 +63,9 @@ class Pages extends React.Component {
   };
 
   componentDidMount() {
-    this.setHomePage();
+    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">
+          <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}>
-              <Title editable={{ onChange: this.handleNameChange }} level={4}>
-                {name}
-              </Title>
+              {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,51 +418,55 @@ class Cluster extends React.Component {
               );
             })}
           </div>
-          <Row>
-            <Col>
-              {isTemporary && (
-                <div>
-                  <Button onClick={this.cancelAddingNewCluster}>Cancel</Button>
-                  <Divider type="vertical" />
-                  <Tooltip
-                    title={
-                      products.length === 0
-                        ? 'You must add applications to the cluster before saving'
-                        : ''
-                    }
-                  >
+          {this.props.hasPermissionToManage && (
+            <Row>
+              <Col>
+                {isTemporary && (
+                  <div>
+                    <Button onClick={this.cancelAddingNewCluster}>
+                      Cancel
+                    </Button>
+                    <Divider type="vertical" />
+                    <Tooltip
+                      title={
+                        products.length === 0
+                          ? 'You must add applications to the cluster before saving'
+                          : ''
+                      }
+                    >
+                      <Button
+                        disabled={products.length === 0}
+                        onClick={this.saveNewCluster}
+                        htmlType="button"
+                        type="primary"
+                      >
+                        Save
+                      </Button>
+                    </Tooltip>
+                  </div>
+                )}
+                {!isTemporary && (
+                  <div>
+                    <Button
+                      onClick={this.resetChanges}
+                      disabled={!this.state.isSaveable}
+                    >
+                      Cancel
+                    </Button>
+                    <Divider type="vertical" />
                     <Button
-                      disabled={products.length === 0}
-                      onClick={this.saveNewCluster}
+                      onClick={this.updateCluster}
                       htmlType="button"
                       type="primary"
+                      disabled={!this.state.isSaveable}
                     >
                       Save
                     </Button>
-                  </Tooltip>
-                </div>
-              )}
-              {!isTemporary && (
-                <div>
-                  <Button
-                    onClick={this.resetChanges}
-                    disabled={!this.state.isSaveable}
-                  >
-                    Cancel
-                  </Button>
-                  <Divider type="vertical" />
-                  <Button
-                    onClick={this.updateCluster}
-                    htmlType="button"
-                    type="primary"
-                    disabled={!this.state.isSaveable}
-                  >
-                    Save
-                  </Button>
-                </div>
-              )}
-            </Col>
-          </Row>
+                  </div>
+                )}
+              </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,15 +63,22 @@ class Page extends React.Component {
       links: [],
     };
     this.hasPermissionToManage = isAuthorized(
-      this.props.config.user,
-      '/device-mgt/enterprise/user/view',
+      this.props.context.user,
+      '/permission/admin/device-mgt/enterprise/user/modify',
+    );
+
+    this.hasPermissionToView = isAuthorized(
+      this.props.context.user,
+      '/permission/admin/device-mgt/enterprise/user/view',
     );
   }
 
   componentDidMount() {
-    this.fetchClusters();
-    this.fetchApplications();
-    this.fetchPages();
+    if (this.hasPermissionToView) {
+      this.fetchClusters();
+      this.fetchApplications();
+      this.fetchPages();
+    }
   }
 
   removeLoadedCluster = clusterId => {
@@ -344,12 +351,17 @@ class Page extends React.Component {
               >
                 <Row>
                   <Col md={8} sm={18} xs={24}>
-                    <Title
-                      editable={{ onChange: this.updatePageName }}
-                      level={2}
-                    >
-                      {pageName}
-                    </Title>
+                    {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}