@onehat/ui 0.3.334 → 0.3.335

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.334",
+	"version": "0.3.335",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Editor/Editor.js

@@ -15,7 +15,7 @@ function Editor(props) {
 			onEditorDelete: onDelete,
 			editorMode,
 			onEditMode,
-			verifyCanEdit,
+			canRecordBeEdited,
 			_viewer = {},
 			_form = {
 				containerProps: {}
@@ -36,7 +36,7 @@ function Editor(props) {
 	const propsToPass = _.omit(props, ['self', 'reference', 'parent']);
 
 	let canEdit = true;
-	if (verifyCanEdit && !verifyCanEdit(selection)) {
+	if (canRecordBeEdited && !canRecordBeEdited(selection)) {
 		canEdit = false;
 	}
 

package/src/Components/Form/Form.js

@@ -7,6 +7,9 @@ import {
 	ScrollView,
 	Text,
 } from 'native-base';
+import {
+	VIEW,
+} from '../../Constants/Commands.js';
 import {
 	EDITOR_TYPE__INLINE,
 	EDITOR_TYPE__WINDOWED,
@@ -106,6 +109,9 @@ function Form(props) {
 
 			// withData
 			Repository,
+
+			// withPermissions
+			canUser,
 			
 			// withEditor
 			isEditorViewOnly = false,
@@ -922,7 +928,7 @@ function Form(props) {
 										>Back</Button>}
 									<Text fontSize={20} ml={2} color="trueGray.500">Edit Mode</Text>
 								</Row>
-								{onViewMode && !disableView &&
+								{onViewMode && !disableView && (!canUser || canUser(VIEW)) &&
 									<Button
 										{...testProps('toViewBtn')}
 										key="viewBtn"

package/src/Components/Grid/Grid.js

@@ -14,6 +14,10 @@ import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
 } from '../../Constants/Selection.js';
+import {
+	EDIT,
+	VIEW,
+} from '../../Constants/Commands.js';
 import {
 	DROP_POSITION_BEFORE,
 	DROP_POSITION_AFTER,
@@ -59,6 +63,7 @@ import Toolbar from '../Toolbar/Toolbar.js';
 import NoReorderRows from '../Icons/NoReorderRows.js';
 import ReorderRows from '../Icons/ReorderRows.js';
 import ColumnSelectorWindow from './ColumnSelectorWindow.js';
+import Unauthorized from '../Messages/Unauthorized.js';
 import _ from 'lodash';
 
 
@@ -129,7 +134,7 @@ function GridComponent(props) {
 			h,
 			flex,
 			bg = '#fff',
-			verifyCanEdit,
+			canRecordBeEdited,
 			alternateRowBackgrounds = true,
 			alternatingInterval = 2,
 			defaultRowHeight = 48,
@@ -154,6 +159,9 @@ function GridComponent(props) {
 			idIx,
 			displayIx,
 
+			// withPermissions
+			canUser,
+
 			// withDnd
 			isDropTarget,
 			canDrop,
@@ -372,11 +380,17 @@ function GridComponent(props) {
 
 									if (UiGlobals.doubleClickingGridRowOpensEditorInViewMode) { // global setting
 										if (onView) {
+											if (canUser && !canUser(VIEW)) { // permissions
+												return;
+											}
 											onView(true);
 										}
 									} else {
 										if (onEdit) {
-											if (verifyCanEdit && !verifyCanEdit(selection)) {
+											if (canUser && !canUser(EDIT)) { // permissions
+												return;
+											}
+											if (canRecordBeEdited && !canRecordBeEdited(selection)) { // record can be edited
 												return;
 											}
 											onEdit();
@@ -468,49 +482,53 @@ function GridComponent(props) {
 							dragSelectionRef.current = selection;
 							const getSelection = () => dragSelectionRef.current;
 
-							// assign event handlers
-							if (canRowsReorder && isReorderMode) {
-								WhichRow = DragSourceGridRow;
-								rowReorderProps.isDragSource = true;
-								rowReorderProps.dragSourceType = 'row';
-								const dragIx = showHeaders ? index - 1 : index;
-								rowReorderProps.dragSourceItem = {
-									id: item.id,
-									getSelection,
-									onDrag: (dragState) => {
-										onRowReorderDrag(dragState, dragIx);
-									},
-								};
-								rowReorderProps.onDragEnd = onRowReorderEnd;
-							} else {
-								// Don't allow drag/drop from withDnd while reordering
-								if (areRowsDragSource) {
+							const userHasPermissionToDrag = (!canUser || canUser(EDIT));
+							if (userHasPermissionToDrag) {
+								// assign event handlers
+								if (canRowsReorder && isReorderMode) {
 									WhichRow = DragSourceGridRow;
-									rowDragProps.isDragSource = true;
-									rowDragProps.dragSourceType = rowDragSourceType;
-									if (getRowDragSourceItem) {
-										rowDragProps.dragSourceItem = getRowDragSourceItem(item, getSelection, rowDragSourceType);
-									} else {
-										rowDragProps.dragSourceItem = {
-											id: item.id,
-											getSelection,
-											type: rowDragSourceType,
+									rowReorderProps.isDragSource = true;
+									rowReorderProps.dragSourceType = 'row';
+									const dragIx = showHeaders ? index - 1 : index;
+									rowReorderProps.dragSourceItem = {
+										id: item.id,
+										getSelection,
+										onDrag: (dragState) => {
+											onRowReorderDrag(dragState, dragIx);
+										},
+									};
+									rowReorderProps.onDragEnd = onRowReorderEnd;
+								} else {
+									// Don't allow drag/drop from withDnd while reordering
+									if (areRowsDragSource) {
+										WhichRow = DragSourceGridRow;
+										rowDragProps.isDragSource = true;
+										rowDragProps.dragSourceType = rowDragSourceType;
+										if (getRowDragSourceItem) {
+											rowDragProps.dragSourceItem = getRowDragSourceItem(item, getSelection, rowDragSourceType);
+										} else {
+											rowDragProps.dragSourceItem = {
+												id: item.id,
+												getSelection,
+												type: rowDragSourceType,
+											};
+										}
+									}
+									if (areRowsDropTarget) {
+										WhichRow = DropTargetGridRow;
+										rowDragProps.isDropTarget = true;
+										rowDragProps.dropTargetAccept = dropTargetAccept;
+										rowDragProps.onDrop = (droppedItem) => {
+											// NOTE: item is sometimes getting destroyed, but it still as the id, so you can still use it
+											onRowDrop(item, droppedItem); // item is what it was dropped on; droppedItem is the dragSourceItem defined above
 										};
 									}
-								}
-								if (areRowsDropTarget) {
-									WhichRow = DropTargetGridRow;
-									rowDragProps.isDropTarget = true;
-									rowDragProps.dropTargetAccept = dropTargetAccept;
-									rowDragProps.onDrop = (droppedItem) => {
-										// NOTE: item is sometimes getting destroyed, but it still as the id, so you can still use it
-										onRowDrop(item, droppedItem); // item is what it was dropped on; droppedItem is the dragSourceItem defined above
-									};
-								}
-								if (areRowsDragSource && areRowsDropTarget) {
-									WhichRow = DragSourceDropTargetGridRow;
+									if (areRowsDragSource && areRowsDropTarget) {
+										WhichRow = DragSourceDropTargetGridRow;
+									}
 								}
 							}
+
 						}
 						return <WhichRow
 									columnsConfig={localColumnsConfig}
@@ -942,6 +960,10 @@ function GridComponent(props) {
 
 	}, [selectorSelected]);
 
+	if (canUser && !canUser('view')) {
+		return <Unauthorized />;
+	}
+
 	if (self) {
 		self.ref = containerRef;
 		self.gridRef = gridRef;

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -57,6 +57,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				// withSecondaryData
 				SecondaryRepository,
 
+				// withPermissions
+				canUser,
+				showPermissionsError,
+
 				// withSecondarySelection
 				secondarySelection,
 				secondarySetSelection,
@@ -69,6 +73,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 			secondaryListeners = useRef({}),
 			secondaryEditorStateRef = useRef(),
 			secondaryNewEntityDisplayValueRef = useRef(),
+			secondaryModel = SecondaryRepository?.schema?.name,
 			[secondaryCurrentRecord, secondarySetCurrentRecord] = useState(null),
 			[secondaryIsAdding, setIsAdding] = useState(false),
 			[secondaryIsSaving, setIsSaving] = useState(false),
@@ -109,6 +114,11 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				return secondaryNewEntityDisplayValueRef.current;
 			},
 			secondaryDoAdd = async (e, values) => {
+				if (canUser && !canUser(ADD, secondaryModel)) {
+					showPermissionsError(ADD, secondaryModel);
+					return;
+				}
+
 				let addValues = values;
 
 				if (SecondaryRepository?.isLoading) {
@@ -197,6 +207,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				secondarySetIsEditorShown(true);
 			},
 			secondaryDoEdit = async () => {
+				if (canUser && !canUser(EDIT, secondaryModel)) {
+					showPermissionsError(EDIT, secondaryModel);
+					return;
+				}
 				if (_.isEmpty(secondarySelection) || (_.isArray(secondarySelection) && (secondarySelection.length > 1 || secondarySelection[0]?.isDestroyed))) {
 					return;
 				}
@@ -211,6 +225,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				secondarySetIsEditorShown(true);
 			},
 			secondaryDoDelete = async (args) => {
+				if (canUser && !canUser(DELETE, secondaryModel)) {
+					showPermissionsError(DELETE, secondaryModel);
+					return;
+				}
 				let cb = null;
 				if (_.isFunction(args)) {
 					cb = args;
@@ -263,6 +281,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				deleteRecord(false, cb);
 			},
 			deleteRecord = async (moveSubtreeUp, cb) => {
+				if (canUser && !canUser(DELETE, secondaryModel)) {
+					showPermissionsError(DELETE, secondaryModel);
+					return;
+				}
 				if (getListeners().onBeforeDelete) {
 					const listenerResult = await getListeners().onBeforeDelete(secondarySelection);
 					if (listenerResult === false) {
@@ -292,6 +314,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				if (!secondaryUserCanView) {
 					return;
 				}
+				if (canUser && !canUser(VIEW, secondaryModel)) {
+					showPermissionsError(VIEW, secondaryModel);
+					return;
+				}
 				if (secondarySelection.length !== 1) {
 					return;
 				}
@@ -307,6 +333,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				if (!secondaryUserCanEdit || secondaryDisableDuplicate) {
 					return;
 				}
+				if (canUser && !canUser(DUPLICATE, secondaryModel)) {
+					showPermissionsError(DUPLICATE, secondaryModel);
+					return;
+				}
 				if (secondarySelection.length !== 1) {
 					return;
 				}
@@ -335,6 +365,12 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				secondaryDoEdit();
 			},
 			secondaryDoEditorSave = async (data, e) => {
+				let mode = editorMode === EDITOR_MODE__ADD ? ADD : EDIT;
+				if (canUser && !canUser(mode, secondaryModel)) {
+					showPermissionsError(mode, secondaryModel);
+					return;
+				}
+
 				// NOTE: The Form submits onSave for both adds (when not isAutoSsave) and edits.
 				const isSingle = secondarySelection.length === 1;
 				let useStaged = false;
@@ -391,7 +427,11 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 							await getListeners().onAfterAdd(secondarySelection);
 						}
 						setIsAdding(false);
-						secondarySetEditorMode(EDITOR_MODE__EDIT);
+						if (!canUser || canUser(EDIT, secondaryModel)) {
+							secondarySetEditorMode(EDITOR_MODE__EDIT);
+						} else {
+							secondarySetEditorMode(EDITOR_MODE__VIEW);
+						}
 					} else if (secondaryEditorMode === EDITOR_MODE__EDIT) {
 						if (getListeners().onAfterEdit) {
 							await getListeners().onAfterEdit(secondarySelection);
@@ -436,6 +476,11 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				secondarySetIsEditorShown(false);
 			},
 			secondaryDoEditorDelete = async () => {
+				if (canUser && !canUser(DELETE, secondaryModel)) {
+					showPermissionsError(DELETE, secondaryModel);
+					return;
+				}
+
 				secondaryDoDelete(() => {
 					secondarySetEditorMode(EDITOR_MODE__VIEW);
 					secondarySetIsEditorShown(false);
@@ -470,9 +515,19 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				return mode;
 			},
 			secondarySetEditMode = () => {
+				if (canUser && !canUser(EDIT, secondaryModel)) {
+					showPermissionsError(EDIT, secondaryModel);
+					return;
+				}
+
 				secondarySetEditorMode(EDITOR_MODE__EDIT);
 			},
 			secondarySetViewMode = () => {
+				if (canUser && !canUser(VIEW, secondaryModel)) {
+					showPermissionsError(VIEW, secondaryModel);
+					return;
+				}
+
 				function doIt() {
 					secondarySetEditorMode(EDITOR_MODE__VIEW);
 				}

package/src/Components/Hoc/withEditor.js

@@ -2,11 +2,22 @@ import { useEffect, useState, useRef, } from 'react';
 import {
 	Button,
 } from 'native-base';
+import {
+	ADD,
+	EDIT,
+	DELETE,
+	VIEW,
+	COPY,
+	DUPLICATE,
+	PRINT,
+	UPLOAD_DOWNLOAD,
+} from '../../Constants/Commands.js';
 import {
 	EDITOR_MODE__VIEW,
 	EDITOR_MODE__ADD,
 	EDITOR_MODE__EDIT,
 	EDITOR_TYPE__SIDE,
+	EDITOR_TYPE__INLINE,
 } from '../../Constants/Editor.js';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
@@ -56,6 +67,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				// withData
 				Repository,
 
+				// withPermissions
+				canUser,
+				showPermissionsError,
+
 				// withSelection
 				selection,
 				setSelection,
@@ -108,6 +123,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				return newEntityDisplayValueRef.current;
 			},
 			doAdd = async (e, values) => {
+				if (canUser && !canUser(ADD)) {
+					showPermissionsError(ADD);
+					return;
+				}
+
 				let addValues = values;
 
 				if (Repository?.isLoading) {
@@ -201,6 +221,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsEditorShown(true);
 			},
 			doEdit = async () => {
+				if (canUser && !canUser(EDIT)) {
+					showPermissionsError(EDIT);
+					return;
+				}
 				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
 					return;
 				}
@@ -215,6 +239,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsEditorShown(true);
 			},
 			doDelete = async (args) => {
+				if (canUser && !canUser(DELETE)) {
+					showPermissionsError(DELETE);
+					return;
+				}
 				let cb = null;
 				if (_.isFunction(args)) {
 					cb = args;
@@ -267,6 +295,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				deleteRecord(false, cb);
 			},
 			deleteRecord = async (moveSubtreeUp, cb) => {
+				if (canUser && !canUser(DELETE)) {
+					showPermissionsError(DELETE);
+					return;
+				}
 				if (getListeners().onBeforeDelete) {
 					const listenerResult = await getListeners().onBeforeDelete(selection);
 					if (listenerResult === false) {
@@ -296,6 +328,17 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				if (!userCanView) {
 					return;
 				}
+				if (canUser && !canUser(VIEW)) {
+					showPermissionsError(VIEW);
+					return;
+				}
+				if (editorType === EDITOR_TYPE__INLINE) {
+					alert('Cannot view in inline editor.');
+					return; // inline editor doesn't have a view mode
+				}
+
+				// check permissions for view
+
 				if (selection.length !== 1) {
 					return;
 				}
@@ -311,6 +354,14 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				if (!userCanEdit || disableDuplicate) {
 					return;
 				}
+				if (canUser && !canUser(DUPLICATE)) {
+					showPermissionsError(DUPLICATE);
+					return;
+				}
+
+				// check permissions for duplicate
+
+
 				if (selection.length !== 1) {
 					return;
 				}
@@ -339,6 +390,12 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				doEdit();
 			},
 			doEditorSave = async (data, e) => {
+				let mode = editorMode === EDITOR_MODE__ADD ? ADD : EDIT;
+				if (canUser && !canUser(mode)) {
+					showPermissionsError(mode);
+					return;
+				}
+
 				// NOTE: The Form submits onSave for both adds (when not isAutoSsave) and edits.
 				const isSingle = selection.length === 1;
 				let useStaged = false;
@@ -395,7 +452,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 							await getListeners().onAfterAddSave(selection);
 						}
 						setIsAdding(false);
-						setEditorMode(EDITOR_MODE__EDIT);
+						if (!canUser || canUser(EDIT)) {
+							setEditorMode(EDITOR_MODE__EDIT);
+						} else {
+							setEditorMode(EDITOR_MODE__VIEW);
+						}
 					} else if (editorMode === EDITOR_MODE__EDIT) {
 						if (getListeners().onAfterEdit) {
 							await getListeners().onAfterEdit(selection);
@@ -440,6 +501,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsEditorShown(false);
 			},
 			doEditorDelete = async () => {
+				if (canUser && !canUser(DELETE)) {
+					showPermissionsError(DELETE);
+					return;
+				}
+
 				doDelete(() => {
 					setEditorMode(EDITOR_MODE__VIEW);
 					setIsEditorShown(false);
@@ -484,9 +550,19 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				return mode;
 			},
 			setEditMode = () => {
+				if (canUser && !canUser(EDIT)) {
+					showPermissionsError(EDIT);
+					return;
+				}
+
 				setEditorMode(EDITOR_MODE__EDIT);
 			},
 			setViewMode = () => {
+				if (canUser && !canUser(VIEW)) {
+					showPermissionsError(VIEW);
+					return;
+				}
+
 				function doIt() {
 					setEditorMode(EDITOR_MODE__VIEW);
 				}

package/src/Components/Hoc/withPdfButtons.js

@@ -4,6 +4,9 @@ import {
 	Row,
 	Text,
 } from 'native-base';
+import {
+	VIEW,
+} from '../../Constants/Commands.js';
 import * as yup from 'yup'; // https://github.com/jquense/yup#string
 import Inflector from 'inflector-js';
 import qs from 'qs';
@@ -19,15 +22,21 @@ import _ from 'lodash';
 export default function withPdfButtons(WrappedComponent) {
 	return withModal((props) => {
 
+		let showButtons = true;
 		if (!props.showPdfBtns) {
+			showButtons = false;
+		}
+		if (props.canUser && !props.canUser(VIEW)) { // permissions
+			showButtons = false;
+		}
+		if (!showButtons) {
 			// bypass everything.
 			// If we don't do this, we get an infinite recursion with Form
 			// because this HOC wraps Form and uses Form itself.
 			return <WrappedComponent {...props} />;
 		}
 
-		const
-			{
+		const {
 				additionalEditButtons = [],
 				additionalViewButtons = [],
 				items = [],

package/src/Components/Hoc/withPermissions.js

@@ -14,18 +14,21 @@ import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
 
 
-export default function withPermissions(WrappedComponent) {
+export default function withPermissions(WrappedComponent, forceUsePermissions = false) {
 	return (props) => {
 
-		if (!props.usePermissions) {
+		if (!props.usePermissions && !forceUsePermissions) {
 			return <WrappedComponent {...props} />;
 		}
 
 		const {
+				// withAlert
+				alert,
+
 				// withData
 				Repository,
 			} = props,
-			model = Repository.schema.name,
+			model = Repository?.schema?.name,
 			checkPermission = (permission) => {
 				const
 					reduxState = UiGlobals.redux?.getState(),
@@ -36,6 +39,15 @@ export default function withPermissions(WrappedComponent) {
 				return inArray(permission, permissions);
 			},
 
+			showPermissionsError = (permission, modelForAlert = null) => {
+				if (!modelForAlert) {
+					modelForAlert = model; // use default model if none supplied
+				}
+				modelForAlert = Inflector.humanize(Inflector.underscore(modelForAlert)); // 'PmEvents' -> 'pm events'
+			
+				alert(`You are not authorized to ${permission} ${modelForAlert}.`);
+			},
+
 			/**
 			 * Check if user has permission to perform an action
 			 * 
@@ -50,18 +62,28 @@ export default function withPermissions(WrappedComponent) {
 			 */
 			canUser = (permission, modelToCheck = null) => {
 
-				// in certain cases, shift permissions to standard CRUD operations
+				// deal with special cases that refer to other permissions
 				switch(permission) {
-					case COPY:
-					case DUPLICATE:
-						permission = ADD;
-						break;
 					case PRINT:
 						permission = VIEW;
 						break;
-					case UPLOAD_DOWNLOAD:
-						permission = EDIT;
-						break;
+					case COPY:
+					case DUPLICATE: {
+						// user must have ADD _and_ EDIT permissions, so check both
+						const
+							hasAddPermission = canUser(ADD, modelToCheck),
+							hasEditPermission = canUser(EDIT, modelToCheck);
+						return hasAddPermission && hasEditPermission;
+					}
+					case UPLOAD_DOWNLOAD: {
+						// user must have VIEW, ADD, EDIT, and DELETE permissions, so check all of them
+						const
+							hasViewPermission = canUser(VIEW, modelToCheck),
+							hasAddPermission = canUser(ADD, modelToCheck),
+							hasEditPermission = canUser(EDIT, modelToCheck),
+							hasDeletePermission = canUser(DELETE, modelToCheck);
+						return hasViewPermission && hasAddPermission && hasEditPermission && hasDeletePermission;
+					}
 					default:
 						// do nothing
 						break;
@@ -82,6 +104,7 @@ export default function withPermissions(WrappedComponent) {
 		return <WrappedComponent
 					{...props}
 					canUser={canUser}
+					showPermissionsError={showPermissionsError}
 				/>;
 	};
 }

package/src/Components/Hoc/withPresetButtons.js

@@ -52,9 +52,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				additionalToolbarButtons = [],
 				useUploadDownload = false,
 				onChangeColumnsConfig,
-				verifyCanEdit,
-				verifyCanDelete,
-				verifyCanDuplicate,
+				canRecordBeEdited,
+				canRecordBeDeleted,
+				canRecordBeDuplicated,
 				...propsToPass
 			} = props,
 			{
@@ -204,7 +204,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (_.isEmpty(selection) || (_.isArray(selection) && selection.length > 1)) {
 							isDisabled = true;
 						}
-						if (verifyCanEdit && !verifyCanEdit(selection)) {
+						if (canRecordBeEdited && !canRecordBeEdited(selection)) {
 							isDisabled = true;
 						}
 						break;
@@ -219,7 +219,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (_.isEmpty(selection) || (_.isArray(selection) && selection.length > 1)) {
 							isDisabled = true;
 						}
-						if (verifyCanDelete && !verifyCanDelete(selection)) {
+						if (canRecordBeDeleted && !canRecordBeDeleted(selection)) {
 							isDisabled = true;
 						}
 						if (isTree) {
@@ -267,7 +267,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (_.isEmpty(selection) || selection.length > 1) {
 							isDisabled = true;
 						}
-						if (verifyCanDuplicate && !verifyCanDuplicate(selection)) {
+						if (canRecordBeDuplicated && !canRecordBeDuplicated(selection)) {
 							isDisabled = true;
 						}
 						break;

package/src/Components/Messages/Unauthorized.js

@@ -0,0 +1,17 @@
+import {
+	Column,
+	Text,
+} from 'native-base';
+
+export default function Unauthorized(props) {
+	const 
+		{
+			text = 'Unauthorized.',
+		} = props;
+	return <Column justifyContent="center" alignItems="center" w="100%" flex={1}>
+				<Text
+					textAlign="center"
+					color="#f00"
+				>{text}</Text>
+			</Column>;
+}

package/src/Components/Tree/Tree.js

@@ -13,6 +13,9 @@ import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
 } from '../../Constants/Selection.js';
+import {
+	EDIT,
+} from '../../Constants/Commands.js';
 import {
 	VERTICAL,
 } from '../../Constants/Directions.js';
@@ -56,6 +59,7 @@ import PaginationToolbar from '../Toolbar/PaginationToolbar.js';
 import NoRecordsFound from '../Grid/NoRecordsFound.js';
 import Toolbar from '../Toolbar/Toolbar.js';
 import Loading from '../Messages/Loading.js';
+import Unauthorized from '../Messages/Unauthorized.js';
 import _ from 'lodash';
 
 const DEPTH_INDENT_PX = 25;
@@ -106,6 +110,7 @@ function TreeComponent(props) {
 			reload = null, // Whenever this value changes after initial render, the tree will reload from scratch
 			parentIdIx,
 			initialSelection,
+			canRecordBeEdited,
 			onTreeLoad,
 
 			// withComponent
@@ -135,6 +140,9 @@ function TreeComponent(props) {
 			idIx,
 			displayIx,
 
+			// withPermissions
+			canUser,
+
 			// withSelection
 			selection,
 			setSelection,
@@ -864,6 +872,12 @@ function TreeComponent(props) {
 										onNodeClick(item, e); // so reselect it
 									}
 									if (onEdit) {
+										if (canUser && !canUser(EDIT)) { // permissions
+											return;
+										}
+										if (canRecordBeEdited && !canRecordBeEdited(selection)) { // record can be edited
+											return;
+										}
 										onEdit();
 									}
 									break;
@@ -1177,6 +1191,10 @@ function TreeComponent(props) {
 		}
 	}, [selectorId, selectorSelected]);
 
+	if (canUser && !canUser('view')) {
+		return <Unauthorized />;
+	}
+
 	if (setWithEditListeners) {
 		setWithEditListeners({ // Update withEdit's listeners on every render
 			onBeforeAdd,

package/src/Components/Viewer/Viewer.js

@@ -6,6 +6,9 @@ import {
 	Row,
 	Text,
 } from 'native-base';
+import {
+	EDIT,
+} from '../../Constants/Commands.js';
 import {
 	EDITOR_TYPE__SIDE,
 } from '../../Constants/Editor.js';
@@ -33,7 +36,7 @@ function Viewer(props) {
 			columnDefaults = {}, // defaults for each Column defined in items (above)
 			record,
 			additionalViewButtons,
-			verifyCanEdit,
+			canRecordBeEdited,
 
 			// withComponent
 			self,
@@ -41,6 +44,10 @@ function Viewer(props) {
 			// withData
 			Repository,
 
+			// withPermissions
+			canUser,
+			showPermissionsError,
+
 			// withEditor
 			editorType,
 			onEditMode,
@@ -246,7 +253,7 @@ function Viewer(props) {
 	}
 
 	let canEdit = true;
-	if (verifyCanEdit && !verifyCanEdit([record])) {
+	if (canRecordBeEdited && !canRecordBeEdited([record])) {
 		canEdit = false;
 	}
 
@@ -259,13 +266,14 @@ function Viewer(props) {
 								<Row flex={1} alignItems="center">
 									<Text fontSize={20} ml={2} color="trueGray.500">View Mode</Text>
 								</Row>
-								<Button
-									{...testProps('toEditBtn')}
-									key="editBtn"
-									onPress={onEditMode}
-									leftIcon={<Icon as={Pencil} color="#fff" size="sm" />}	
-									color="#fff"
-								>To Edit</Button>
+								{(!canUser || canUser(EDIT)) &&
+									<Button
+										{...testProps('toEditBtn')}
+										key="editBtn"
+										onPress={onEditMode}
+										leftIcon={<Icon as={Pencil} color="#fff" size="sm" />}	
+										color="#fff"
+									>To Edit</Button>}
 							</Toolbar>}
 						{!_.isEmpty(additionalButtons) && 
 							<Toolbar justifyContent="flex-end" flexWrap="wrap">

package/src/Functions/chunkArray.js

@@ -0,0 +1,7 @@
+export default function chunkArray(array, chunkSize) {
+	const result = [];
+	for (let i = 0; i < array.length; i += chunkSize) {
+		result.push(array.slice(i, i + chunkSize));
+	}
+	return result;
+}