Permissions editor from catalog-ui

- Using API v1

src/constants/apiURLS.ts

@@ -6,6 +6,8 @@ const origin = typeof window !== 'undefined' ?
 
 export const API_ROOT = `${origin}/proxy`;
 export const API_BASE_URL = `${API_ROOT}/api/v0`;
+export const APIv1_BASE_URL = `${API_ROOT}/api/v1`;
+
 export const SERVER_INFO_URL = `${API_ROOT}/api/v1/info/version`;
 
 export const LOGIN_URL = `${API_ROOT}/oauth/token`;

src/service/PermissionService.ts

 import {AclObjectIdentity, SidPermissions} from 'model/acl.model';
 import authenticatedRequest from 'utilities/requestUtils';
-import {API_BASE_URL} from 'constants/apiURLS';
+import {APIv1_BASE_URL} from 'constants/apiURLS';
 // import {log} from 'utilities/debug';
 
-const API_URL = `${API_BASE_URL}/permission`;
+const API_URL = `${APIv1_BASE_URL}/permission`;
 
 export class PermissionService {
 

src/ui/common/permission/Permissions.tsx

@@ -107,6 +107,7 @@ class Permissions extends React.Component<IPermissionsProps, any> {
                                         onInputChange={ this.onInputChange }
                                         autocomplete={ autocomplete }
                                         autocompleteObj={ autocompleteObj }
+                                        inherits={ aclObjectIdentity.entriesInheriting }
                                     />
                                 </div>
                         }

src/ui/common/permission/PermissionsTableForm.tsx

@@ -21,6 +21,7 @@ interface IPermissionsTableFormProps extends React.ClassAttributes<any> {
     addPermission: (sidPermissions: SidPermissions) => Promise<AclObjectIdentity>;
     autocompleteObj: {[key: string]: number};
     onInputChange: (e) => void;
+    inherits?: boolean;
 }
 
 const styles = {
@@ -36,6 +37,11 @@ const styles = {
             },
         },
     },
+    inheritedTitle: {
+        fontSize: '1rem',
+        fontFamily: 'Roboto, sans-serif',
+        fontWeight: 'bold' as 'bold',
+    },
     textField: {
         margin: 0,
     },
@@ -72,33 +78,36 @@ class PermissionsTableForm extends React.Component<IPermissionsTableFormProps, a
         }
     }
 
-    protected renderRows = ({ fields, suggestions, onInputChange }) => fields.map((entry, index) => {
+    protected renderRows = ({ fields, suggestions, onInputChange, inherits = false }) => fields.map((entry, index) => {
         const isNewEntry = index === fields.length - 1;
-        const {sid} = fields.get(index);
-        const owner = typeof sid === 'number';
+        let {sid} = fields.get(index);
+        sid = typeof sid === 'object' ? sid.sid : sid;
+        const owner: boolean = this.props.initialValues.ownerSid.sid === sid;
 
         return (
             <TableRow key={ index }>
                 <TableCell>
-                    { owner ? this.props.initialValues.ownerSid.sid : !isNewEntry ? sid.sid : (
-                        <Field
-                            name={ `${entry}.sid` }
-                            component={ MaterialAutosuggest }
-                            label="Sid"
-                            placeholder="Sid"
-                            onChange={ onInputChange }
-                            suggestions={ suggestions }
-                            suggestionLabel="label"
-                            classes={ {textField: this.props.classes.textField} }
-                        />
-                    ) }
+                    {
+                        inherits || !isNewEntry ? sid : (
+                            <Field
+                                name={ `${entry}.sid` }
+                                component={ MaterialAutosuggest }
+                                label="Sid"
+                                placeholder="Sid"
+                                onChange={ onInputChange }
+                                suggestions={ suggestions }
+                                suggestionLabel="label"
+                                classes={ {textField: this.props.classes.textField} }
+                            />
+                        )
+                    }
                 </TableCell>
                 <TableCell>
                     <Field
                         name={ `${entry}.create` }
                         component={ ReduxCheckbox }
                         onChange={ this.save(fields, index, isNewEntry) }
-                        disabled={ owner }
+                        disabled={ owner || inherits }
                     />
                 </TableCell>
                 <TableCell>
@@ -106,7 +115,7 @@ class PermissionsTableForm extends React.Component<IPermissionsTableFormProps, a
                         name={ `${entry}.read` }
                         component={ ReduxCheckbox }
                         onChange={ this.save(fields, index, isNewEntry) }
-                        disabled={ owner }
+                        disabled={ owner || inherits }
                     />
                 </TableCell>
                 <TableCell>
@@ -114,7 +123,7 @@ class PermissionsTableForm extends React.Component<IPermissionsTableFormProps, a
                         name={ `${entry}.write` }
                         component={ ReduxCheckbox }
                         onChange={ this.save(fields, index, isNewEntry) }
-                        disabled={ owner }
+                        disabled={ owner || inherits }
                     />
                 </TableCell>
                 <TableCell>
@@ -122,7 +131,7 @@ class PermissionsTableForm extends React.Component<IPermissionsTableFormProps, a
                         name={ `${entry}.delete` }
                         component={ ReduxCheckbox }
                         onChange={ this.save(fields, index, isNewEntry) }
-                        disabled={ owner }
+                        disabled={ owner || inherits }
                     />
                 </TableCell>
                 <TableCell>
@@ -130,12 +139,12 @@ class PermissionsTableForm extends React.Component<IPermissionsTableFormProps, a
                         name={ `${entry}.manage` }
                         component={ ReduxCheckbox }
                         onChange={ this.save(fields, index, isNewEntry) }
-                        disabled={ owner }
+                        disabled={ owner || inherits }
                     />
                 </TableCell>
                 <TableCell>
                     {
-                        !owner && (
+                        !owner && !inherits && (
                             index < fields.length - 1
                                 ? <Button onClick={ this.remove(fields, index) }>Delete</Button>
                                 : <Button onClick={ this.add(fields, index) }>Add</Button>
@@ -147,7 +156,7 @@ class PermissionsTableForm extends React.Component<IPermissionsTableFormProps, a
     })
 
     public render() {
-        const {classes, onInputChange, autocompleteObj} = this.props;
+        const {classes, onInputChange, autocompleteObj, inherits} = this.props;
         return (
             <form>
                 <Table className={ classes.table }>
@@ -171,6 +180,32 @@ class PermissionsTableForm extends React.Component<IPermissionsTableFormProps, a
                         />
                     </TableBody>
                 </Table>
+
+                { inherits &&
+                    <div>
+                        <div className={ classes.inheritedTitle }>Effective permissions</div>
+                        <Table className={ classes.table }>
+                            <TableHead>
+                                <TableRow>
+                                    <TableCell>Sid</TableCell>
+                                    <TableCell>Create</TableCell>
+                                    <TableCell>Read</TableCell>
+                                    <TableCell>Write</TableCell>
+                                    <TableCell>Delete</TableCell>
+                                    <TableCell>Manage</TableCell>
+                                    <TableCell/>
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                <FieldArray
+                                    name="inherited"
+                                    component={ this.renderRows }
+                                    inherits="true"
+                                />
+                            </TableBody>
+                        </Table>
+                    </div>
+                }
             </form>
         );
     }