feat: Add links to users and roles in ACL dialog and handle invalid entries (#2436)

Author: FransGH

src/components/ACLEditor/ACLEditor.react.js

@@ -9,8 +9,10 @@ import Parse             from 'parse';
 import PermissionsDialog from 'components/PermissionsDialog/PermissionsDialog.react';
 import React             from 'react';
 
-function validateEntry(text) {
+function validateEntry(text, returnInvalid = true) {
 
+  let type = 'unknown';
+  let entry = text;
   let userQuery;
   let roleQuery;
 
@@ -19,22 +21,26 @@ function validateEntry(text) {
   }
 
   if (text.startsWith('user:')) {
+    type = 'user';
     // no need to query roles
     roleQuery = {
       find: () => Promise.resolve([])
     };
 
     let user = text.substring(5);
+    entry = user;
     userQuery = new Parse.Query.or(
       new Parse.Query(Parse.User).equalTo('username', user),
       new Parse.Query(Parse.User).equalTo('objectId', user)
     );
   } else if (text.startsWith('role:')) {
+    type = 'role';
     // no need to query users
     userQuery = {
       find: () => Promise.resolve([])
     };
     let role = text.substring(5);
+    entry = role;
     roleQuery = new Parse.Query.or(
       new Parse.Query(Parse.Role).equalTo('name', role),
       new Parse.Query(Parse.Role).equalTo('objectId', role)
@@ -61,6 +67,9 @@ function validateEntry(text) {
     } else if (role.length > 0) {
       return { entry: role[0], type: 'role' };
     } else {
+      if(returnInvalid) {
+        return Promise.resolve({entry, type})
+      }
       return Promise.reject();
     }
   });

src/components/PermissionsDialog/PermissionsDialog.react.js

@@ -20,6 +20,8 @@ import Toggle           from 'components/Toggle/Toggle.react';
 import Autocomplete     from 'components/Autocomplete/Autocomplete.react';
 import { Map, fromJS }  from 'immutable';
 import TrackVisibility  from 'components/TrackVisibility/TrackVisibility.react';
+import {CurrentApp} from '../../context/currentApp';
+import generatePath from '../../lib/generatePath';
 
 let origin = new Position(0, 0);
 
@@ -517,6 +519,8 @@ function renderPointerCheckboxes(
 
 const intersectionMargin = '10px 0px 0px 20px';
 export default class PermissionsDialog extends React.Component {
+  static contextType = CurrentApp;
+
   constructor(props) {
     super(props);
 
@@ -647,23 +651,31 @@ export default class PermissionsDialog extends React.Component {
       let key;
       let value = {};
 
-      if (type === 'user') {
+      if(typeof entry === 'string') {
+        key = type + ':' + entry;
+        value[type] = {
+          name: entry,
+          id: undefined
+        };
+      }
+
+      else if (type === 'user') {
         key = entry.id;
         value[type] = {
           name: entry.get('username'),
           id: entry.id
         };
       }
 
-      if (type === 'role') {
+      else if (type === 'role') {
         key = 'role:' + entry.getName();
         value[type] = {
           name: entry.getName(),
           id: entry.id
         };
       }
 
-      if (type === 'pointer') {
+      else if (type === 'pointer') {
         key = entry;
         value[type] = true;
       }
@@ -971,7 +983,21 @@ export default class PermissionsDialog extends React.Component {
     return output;
   }
 
+  urlForKey(key) {
+    let isRole = key.startsWith('role:')
+    let className = isRole ? '_Role' : '_User';
+    let field = isRole ? 'name' : 'objectId';
+    let value = isRole ? key.replace('role:', '') : key
+    let filters = JSON.stringify([{
+      field,
+      constraint: 'eq',
+      compareTo: value
+    }]);
+    return generatePath(this.context, `browser/${className}?filters=${encodeURIComponent(filters)}`);
+  }
+
   renderRow(key, columns, types) {
+
     const pill = text => (
       <span className={styles.pillType}>
         <Pill value={text} />
@@ -982,20 +1008,21 @@ export default class PermissionsDialog extends React.Component {
     const type = (types && types.get(key)) || {};
 
     let pointer = this.state.pointerPerms.has(key);
-    let label = <span>{key}</span>;
+    let label = <span><a target="_blank" href={this.urlForKey(key)} >{key}</a></span>;
 
     if (type.user) {
       label = (
         <span>
           <p>
             <span>
-              <span className={styles.selectable}>{type.user.id}</span>
+              <span className={styles.selectable}>
+                <a target="_blank" href={this.urlForKey(key)} >{type.user.id}</a>
+              </span>
               {pill('User')}
             </span>
           </p>
           <p className={styles.hint}>
-            {'username: '}
-            <span className={styles.selectable}>{type.user.name}</span>
+            username: <span className={styles.selectable} style={{color:type.user.name ? undefined : '#f00'}}>{type.user.name ?? 'user not found'}</span>
           </p>
         </span>
       );
@@ -1005,11 +1032,11 @@ export default class PermissionsDialog extends React.Component {
           <p>
             <span>
               <span className={styles.prefix}>{'role:'}</span>
-              {type.role.name}
+                <a target="_blank" href={this.urlForKey(key)} >{type.role.name}</a>
             </span>
           </p>
           <p className={styles.hint}>
-            id: <span className={styles.selectable}>{type.role.id}</span>
+            id: <span className={styles.selectable} style={{color:type.role.id ? undefined : '#f00'}}>{type.role.id ?? 'role not found'}</span>
           </p>
         </span>
       );