@onehat/ui 0.3.333 → 0.3.335

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.333",
+	"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,
@@ -32,18 +36,19 @@ import withComponent from '../Hoc/withComponent.js';
 import withData from '../Hoc/withData.js';
 import { withDropTarget } from '../Hoc/withDnd.js';
 import withEvents from '../Hoc/withEvents.js';
-import withSideEditor from '../Hoc/withSideEditor.js';
 import withFilters from '../Hoc/withFilters.js';
+import withInlineEditor from '../Hoc/withInlineEditor.js';
+import withPermissions from '../Hoc/withPermissions.js';
 import withPresetButtons from '../Hoc/withPresetButtons.js';
 import withMultiSelection from '../Hoc/withMultiSelection.js';
 import withSelection from '../Hoc/withSelection.js';
+import withSideEditor from '../Hoc/withSideEditor.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
-import withInlineEditor from '../Hoc/withInlineEditor.js';
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
 import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js';
-import nbToRgb from '../../Functions/nbToRgb.js';
 import testProps from '../../Functions/testProps.js';
+import nbToRgb from '../../Functions/nbToRgb.js';
 import Loading from '../Messages/Loading.js';
 import isSerializable from '../../Functions/isSerializable.js';
 import inArray from '../../Functions/inArray.js';
@@ -58,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';
 
 
@@ -128,7 +134,7 @@ function GridComponent(props) {
 			h,
 			flex,
 			bg = '#fff',
-			verifyCanEdit,
+			canRecordBeEdited,
 			alternateRowBackgrounds = true,
 			alternatingInterval = 2,
 			defaultRowHeight = 48,
@@ -153,6 +159,9 @@ function GridComponent(props) {
 			idIx,
 			displayIx,
 
+			// withPermissions
+			canUser,
+
 			// withDnd
 			isDropTarget,
 			canDrop,
@@ -371,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();
@@ -467,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}
@@ -941,6 +960,10 @@ function GridComponent(props) {
 
 	}, [selectorSelected]);
 
+	if (canUser && !canUser('view')) {
+		return <Unauthorized />;
+	}
+
 	if (self) {
 		self.ref = containerRef;
 		self.gridRef = gridRef;
@@ -1146,16 +1169,18 @@ export const Grid = withComponent(
 						withAlert(
 							withEvents(
 								withData(
-									withDropTarget(
-										withMultiSelection(
-											withSelection(
-												withFilters(
-													withPresetButtons(
-														withContextMenu(
-															GridComponent
-														)
-													),
-													true // isGrid
+									withPermissions(
+										withDropTarget(
+											withMultiSelection(
+												withSelection(
+													withFilters(
+														withPresetButtons(
+															withContextMenu(
+																GridComponent
+															)
+														),
+														true // isGrid
+													)
 												)
 											)
 										)
@@ -1169,17 +1194,19 @@ export const SideGridEditor = withComponent(
 									withAlert(
 										withEvents(
 											withData(
-												withDropTarget(
-													withMultiSelection(
-														withSelection(
-															withSideEditor(
-																withFilters(
-																	withPresetButtons(
-																		withContextMenu(
-																			GridComponent
-																		)
-																	),
-																	true // isGrid
+												withPermissions(
+													withDropTarget(
+														withMultiSelection(
+															withSelection(
+																withSideEditor(
+																	withFilters(
+																		withPresetButtons(
+																			withContextMenu(
+																				GridComponent
+																			)
+																		),
+																		true // isGrid
+																	)
 																)
 															)
 														)
@@ -1194,16 +1221,18 @@ export const WindowedGridEditor = withComponent(
 									withAlert(
 										withEvents(
 											withData(
-												withDropTarget(
-													withMultiSelection(
-														withSelection(
-															withWindowedEditor(
-																withFilters(
-																	withPresetButtons(
-																		withContextMenu(
-																			GridComponent
-																		),
-																		true // isGrid
+												withPermissions(
+													withDropTarget(
+														withMultiSelection(
+															withSelection(
+																withWindowedEditor(
+																	withFilters(
+																		withPresetButtons(
+																			withContextMenu(
+																				GridComponent
+																			),
+																			true // isGrid
+																		)
 																	)
 																)
 															)
@@ -1219,17 +1248,19 @@ export const InlineGridEditor = withComponent(
 									withAlert(
 										withEvents(
 											withData(
-												withDropTarget(
-													withMultiSelection(
-														withSelection(
-															withInlineEditor(
-																withFilters(
-																	withPresetButtons(
-																		withContextMenu(
-																			GridComponent
-																		)
-																	),
-																	true // isGrid
+												withPermissions(
+													withDropTarget(
+														withMultiSelection(
+															withSelection(
+																withInlineEditor(
+																	withFilters(
+																		withPresetButtons(
+																			withContextMenu(
+																				GridComponent
+																			)
+																		),
+																		true // isGrid
+																	)
 																)
 															)
 														)
@@ -1244,17 +1275,19 @@ export const InlineGridEditor = withComponent(
 // 									withAlert(
 // 										withEvents(
 // 											withData(
-// 												withDropTarget(
-// 													withMultiSelection(
-// 														withSelection(
-// 															withInlineSideEditor(
-// 																withFilters(
-// 																	withPresetButtons(
-// 																		withContextMenu(
-// 																			GridComponent
-// 																		)
-// 																	),
-// 																	true // isGrid
+// 												withPermissions(
+// 													withDropTarget(
+// 														withMultiSelection(
+// 															withSelection(
+// 																withInlineSideEditor(
+// 																	withFilters(
+// 																		withPresetButtons(
+// 																			withContextMenu(
+// 																				GridComponent
+// 																			)
+// 																		),
+// 																		true // isGrid
+// 																	)
 // 																)
 // 															)
 // 														)

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

@@ -22,7 +22,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 
 		let [secondaryEditorMode, secondarySetEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
 		const {
-				secondaryUserCanEdit = true,
+				secondaryUserCanEdit = true, // not permissions, but capability
 				secondaryUserCanView = true,
 				secondaryCanEditorViewOnly = false, // whether the editor can *ever* change state out of 'View' mode
 				secondaryDisableAdd = false,
@@ -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/withData.js

@@ -38,7 +38,6 @@ export default function withData(WrappedComponent) {
 				// withComponent
 				self,
 			} = props,
-			propsToPass = _.omit(props, ['model']), // passing 'model' would mess things up if withData gets called twice (e.g. withData(...withData(...)) ), as we'd be trying to recreate Repository twice
 			localIdIx = idIx || (fields && idField ? fields.indexOf(idField) : null),
 			localDisplayIx = displayIx || (fields && displayField ? fields?.indexOf(displayField) : null),
 			[LocalRepository, setLocalRepository] = useState(Repository || null), // simply pass on Repository if it's already supplied
@@ -106,11 +105,9 @@ export default function withData(WrappedComponent) {
 		}
 
 		return <WrappedComponent
-					{...propsToPass}
+					{...props}
 					disableWithData={false}
 					Repository={LocalRepository}
-					model={model}
-					data={data}
 					fields={fields}
 					idField={idField}
 					displayField={displayField}