Add RBAC to org views

src/pages/Organizations/screens/Organization/Organization.jsx

@@ -33,13 +33,17 @@ class Organization extends Component {
       organization: null,
       error: false,
       loading: true,
+      isNotifAdmin: false,
+      isAuditorOfThisOrg: false,
+      isAdminOfThisOrg: false
     };
 
     this.fetchOrganization = this.fetchOrganization.bind(this);
+    this.fetchOrganizationAndRoles = this.fetchOrganizationAndRoles.bind(this);
   }
 
   componentDidMount () {
-    this.fetchOrganization();
+    this.fetchOrganizationAndRoles();
   }
 
   async componentDidUpdate (prevProps) {
@@ -49,6 +53,43 @@ class Organization extends Component {
     }
   }
 
+  async fetchOrganizationAndRoles () {
+    const {
+      match,
+      setBreadcrumb,
+      api,
+      handleHttpError
+    } = this.props;
+
+    try {
+      const [{ data }, notifAdminRest, auditorRes, adminRes] = await Promise.all([
+        api.getOrganizationDetails(parseInt(match.params.id, 10)),
+        api.getOrganizations({
+          role_level: 'notification_admin_role',
+          page_size: 1
+        }),
+        api.getOrganizations({
+          role_level: 'auditor_role',
+          id: parseInt(match.params.id, 10)
+        }),
+        api.getOrganizations({
+          role_level: 'admin_role',
+          id: parseInt(match.params.id, 10)
+        })
+      ]);
+      setBreadcrumb(data);
+      this.setState({
+        organization: data,
+        loading: false,
+        isNotifAdmin: notifAdminRest.data.results.length > 0,
+        isAuditorOfThisOrg: auditorRes.data.results.length > 0,
+        isAdminOfThisOrg: adminRes.data.results.length > 0
+      });
+    } catch (error) {
+      handleHttpError(error) || this.setState({ error: true, loading: false });
+    }
+  }
+
   async fetchOrganization () {
     const {
       match,
@@ -70,19 +111,40 @@ class Organization extends Component {
     const {
       location,
       match,
+      me,
       history
     } = this.props;
 
     const {
       organization,
       error,
-      loading
+      loading,
+      isNotifAdmin,
+      isAuditorOfThisOrg,
+      isAdminOfThisOrg
     } = this.state;
 
     const tabsPaddingOverride = {
       padding: '0'
     };
 
+    const canSeeNotificationsTab = me.is_system_auditor || isNotifAdmin || isAuditorOfThisOrg;
+    const canToggleNotifications = isNotifAdmin && (
+      me.is_system_auditor
+      || isAuditorOfThisOrg
+      || isAdminOfThisOrg
+    );
+
+    const tabElements = [
+      { name: i18nMark('Details'), link: `${match.url}/details` },
+      { name: i18nMark('Access'), link: `${match.url}/access` },
+      { name: i18nMark('Teams'), link: `${match.url}/teams` }
+    ];
+
+    if (canSeeNotificationsTab) {
+      tabElements.push({ name: i18nMark('Notifications'), link: `${match.url}/notifications` });
+    }
+
     let cardHeader = (
       loading ? ''
         : (
@@ -174,16 +236,19 @@ class Organization extends Component {
                 />
               )}
             />
-            <Route
-              path="/organizations/:id/notifications"
-              render={() => (
-                <OrganizationNotifications
-                  match={match}
-                  location={location}
-                  history={history}
-                />
-              )}
-            />
+            {canSeeNotificationsTab && (
+              <Route
+                path="/organizations/:id/notifications"
+                render={() => (
+                  <OrganizationNotifications
+                    match={match}
+                    location={location}
+                    history={history}
+                    canToggleNotifications={canToggleNotifications}
+                  />
+                )}
+              />
+            )}
             {organization && <NotifyAndRedirect to={`/organizations/${match.params.id}/details`} />}
           </Switch>
           {error ? 'error!' : ''}

src/pages/Organizations/screens/Organization/OrganizationDetail.jsx

@@ -100,7 +100,8 @@ class OrganizationDetail extends Component {
         description,
         custom_virtualenv,
         created,
-        modified
+        modified,
+        summary_fields
       },
       match
     } = this.props;
@@ -165,11 +166,13 @@ class OrganizationDetail extends Component {
                 </TextContent>
               )}
             </div>
-            <div style={{ display: 'flex', flexDirection: 'row-reverse', marginTop: '20px' }}>
-              <Link to={`/organizations/${match.params.id}/edit`}>
-                <Button><Trans>Edit</Trans></Button>
-              </Link>
-            </div>
+            {summary_fields.user_capabilities.edit && (
+              <div style={{ display: 'flex', flexDirection: 'row-reverse', marginTop: '20px' }}>
+                <Link to={`/organizations/${match.params.id}/edit`}>
+                  <Button><Trans>Edit</Trans></Button>
+                </Link>
+              </div>
+            )}
             {error ? 'error!' : ''}
           </CardBody>
         )}

src/pages/Organizations/screens/Organization/OrganizationNotifications.jsx

@@ -41,13 +41,18 @@ class OrganizationNotifications extends Component {
   }
 
   render () {
+    const {
+      canToggleNotifications
+    } = this.props;
+
     return (
       <NotificationsList
+        canToggleNotifications={canToggleNotifications}
+        onCreateError={this.createOrgNotificationError}
+        onCreateSuccess={this.createOrgNotificationSuccess}
+        onReadError={this.readOrgNotificationError}
         onReadNotifications={this.readOrgNotifications}
         onReadSuccess={this.readOrgNotificationSuccess}
-        onReadError={this.readOrgNotificationError}
-        onCreateSuccess={this.createOrgNotificationSuccess}
-        onCreateError={this.createOrgNotificationError}
       />
     );
   }