@onehat/ui 0.4.108 → 0.4.111

package/package.json

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

package/src/Components/Form/Field/Tag/Tag.js

@@ -320,7 +320,7 @@ function TagComponent(props) {
 						/>;
 			}
 			switch (items.length) {
-				case 1: height = 250; break;
+				case 1: height = 300; break;
 				case 2: height = 400; break;
 				default: height = 600; break;
 			}

package/src/Components/Form/Form.js

@@ -321,7 +321,11 @@ function Form(props) {
 						type = 'Text';
 					}
 				}
-				const isCombo = type?.match && type.match(/Combo/);
+				const
+					Element = getComponentFromType(type),
+					shouldHideFieldUi = type === 'Hidden',
+					isCombo = type?.match && type.match(/Combo/);
+				
 				if (config.hasOwnProperty('autoLoad')) {
 					editorTypeProps.autoLoad = config.autoLoad;
 				} else {
@@ -335,9 +339,8 @@ function Form(props) {
 						editorTypeProps.showXButton = true;
 					}
 				}
-				const Element = getComponentFromType(type);
 
-				if (isEditorViewOnly || !isEditable) {
+				if ((isEditorViewOnly || !isEditable) && !shouldHideFieldUi) {
 					let value = null;
 					if (renderer) {
 						value = renderer(record);
@@ -483,6 +486,9 @@ function Form(props) {
 														{...dynamicProps}
 														className={elementClassName}
 													/>;
+										if (shouldHideFieldUi) {
+											return element;
+										}
 
 										const dirtyIcon = isDirty && !disableDirtyIcon ? 
 															<Icon
@@ -532,6 +538,7 @@ function Form(props) {
 					isEditable = true,
 					isEditingEnabledInPlainEditor,
 					label,
+					disableLabel = false,
 					labelWidth,
 					items,
 					onChange: onEditorChange,
@@ -588,7 +595,11 @@ function Form(props) {
 					type = 'Text';
 				}
 			}
-			const isCombo = type?.match && type.match(/Combo/);
+			const
+				Element = getComponentFromType(type),
+				shouldHideFieldUi = type === 'Hidden',
+				isCombo = type?.match && type.match(/Combo/);
+			
 			if (item.hasOwnProperty('autoLoad')) {
 				editorTypeProps.autoLoad = item.autoLoad;
 			} else {
@@ -602,7 +613,6 @@ function Form(props) {
 					editorTypeProps.showXButton = true;
 				}
 			}
-			const Element = getComponentFromType(type);
 			
 			if (inArray(type, ['Column', 'Row', 'FieldSet'])) {
 				if (_.isEmpty(items)) {
@@ -676,7 +686,7 @@ function Form(props) {
 				label = propertyDef.title;
 			}
 
-			if (isEditorViewOnly || !isEditable) {
+			if ((isEditorViewOnly || !isEditable) && !shouldHideFieldUi) {
 				let value = null;
 				if (isSingle) {
 					value = record?.properties?.[name]?.displayValue || null;
@@ -713,7 +723,10 @@ function Form(props) {
 									{...viewerTypeProps}
 									className={elementClassName}
 								/>;
-				if (!disableLabels && label) {
+				if (shouldHideFieldUi) {
+					return null;
+				}
+				if (!disableLabels && !disableLabel && label) {
 					const style = {};
 					if (defaults?.labelWidth) {
 						style.width = defaults.labelWidth;
@@ -846,6 +859,9 @@ function Form(props) {
 												{...dynamicProps}
 												className={elementClassName}
 											/>;
+							if (shouldHideFieldUi) {
+								return element;
+							}
 							let message = null;
 							if (error) {
 								message = error.message;
@@ -905,7 +921,7 @@ function Form(props) {
 								}
 							}
 							const labelToUse = dynamicProps.label || label;
-							if (!disableLabels && labelToUse && editorType !== EDITOR_TYPE__INLINE) {
+							if (!disableLabels && !disableLabel && labelToUse && editorType !== EDITOR_TYPE__INLINE) {
 								const style = {};
 								if (defaults?.labelWidth) {
 									style.width = defaults.labelWidth;
@@ -933,7 +949,7 @@ function Form(props) {
 													{element}
 												</VStack>;
 								}
-							} else if (disableLabels && requiredIndicator) {
+							} else if ((disableLabels || disableLabel) && requiredIndicator) {
 								element = <HStack className="Form-HStack10 w-full">
 												{requiredIndicator}
 												{element}
@@ -1274,7 +1290,10 @@ function Form(props) {
 		showCancelBtn = false,
 		showSaveBtn = false,
 		showSubmitBtn = false,
-		isAddMode = getEditorMode() === EDITOR_MODE__ADD;
+		isAddMode = getEditorMode() === EDITOR_MODE__ADD,
+		isEditableMode =
+			getEditorMode() === EDITOR_MODE__ADD ||
+			getEditorMode() === EDITOR_MODE__EDIT;
 	if (containerWidth) { // we need to render this component twice in order to get the container width. Skip this on first render
 
 		// create editor
@@ -1363,7 +1382,7 @@ function Form(props) {
 		if (onDelete && getEditorMode() === EDITOR_MODE__EDIT && isSingle) {
 			showDeleteBtn = true;
 		}
-		if (!isEditorViewOnly && !hideResetButton) {
+		if (!isEditorViewOnly && isEditableMode && !hideResetButton) {
 			showResetBtn = true;
 		}
 		// determine whether we should show the close or cancel button
@@ -1394,7 +1413,7 @@ function Form(props) {
 				}
 			}
 		}
-		if (!isEditorViewOnly && onSave) {
+		if (!isEditorViewOnly && isEditableMode && onSave) {
 			showSaveBtn = true;
 		}
 		if (!!onSubmit) {

package/src/Components/Hoc/withPdfButtons.js

@@ -62,9 +62,9 @@ export default function withPdfButtons(WrappedComponent) {
 			buildModalItems = () => {
 				// Build a cloned PDF item tree so we never mutate source items by reference.
 				const
-					itemsTouse = pdfItems || items,
+					itemsToUse = pdfItems || _.filter(items, (item) => item?.type !== 'Hidden'),
 					ancillaryItemsToUse = pdfAncillaryItems || ancillaryItems,
-					modalItems = _.compact(_.map(itemsTouse, (item, ix) => buildNextLayer(item, ix, columnDefaults)));
+					modalItems = _.compact(_.map(itemsToUse, (item, ix) => buildNextLayer(item, ix, columnDefaults)));
 
 				if (!_.isEmpty(ancillaryItemsToUse)) {
 					const

package/src/Components/Hoc/withPermissions.js

@@ -23,7 +23,7 @@ import _ from 'lodash';
 export function checkPermission(permission) {
 	const
 		reduxState = UiGlobals.redux?.getState(),
-		permissions = reduxState?.app?.permissions || [];
+		permissions = reduxState?.app?.permissions || reduxState?.auth?.permissions || [];
 	let hasPermission = inArray(permission, permissions);
 	if (hasPermission) {
 		return true;

package/src/Components/Hoc/withPresetButtons.js

@@ -436,6 +436,10 @@ export default function withPresetButtons(WrappedComponent) {
 					showInfo('Copied to clipboard!');
 				}
 			},
+			getColumnsConfigForDownload = () => {
+				const activeColumnsConfig = localColumnsConfig.length ? localColumnsConfig : props.columnsConfig;
+				return _.filter(activeColumnsConfig, (config) => !config.isHidden);
+			},
 			onUploadDownload = () => {
 				const onUploadDecorator = async () => {
 					if (onUpload) {
@@ -454,7 +458,7 @@ export default function withPresetButtons(WrappedComponent) {
 								reference="uploadsDownloads"
 								onClose={hideModal}
 								Repository={Repository}
-								columnsConfig={props.columnsConfig}
+								columnsConfig={getColumnsConfigForDownload()}
 								uploadHeaders={uploadHeaders}
 								uploadParams={uploadParams}
 								onUpload={onUploadDecorator}
@@ -471,7 +475,7 @@ export default function withPresetButtons(WrappedComponent) {
 								onClose={hideModal}
 								isDownloadOnly={true}
 								Repository={Repository}
-								columnsConfig={props.columnsConfig}
+								columnsConfig={getColumnsConfigForDownload()}
 								downloadHeaders={downloadHeaders}
 								downloadParams={downloadParams}
 							/>,

package/src/Components/Layout/UserIndicator.js

@@ -8,8 +8,10 @@ import clsx from 'clsx';
 import { useSelector, useDispatch } from 'react-redux';
 import {
 	logout,
-	selectUser,
 } from '@src/Models/Slices/AppSlice';
+import {
+	selectUser,
+} from '../../Models/Slices/AuthSlice.js';
 import IconButton from '../Buttons/IconButton';
 import RightFromBracket from '../Icons/RightFromBracket';
 import User from '../Icons/User';

package/src/Components/Viewer/Viewer.js

@@ -107,6 +107,14 @@ function Viewer(props) {
 		}),
 		isSideEditor = editorType === EDITOR_TYPE__SIDE,
 		isSmartEditor = editorType === EDITOR_TYPE__SMART,
+		parentEditorModeRaw = (getEditorMode && getEditorMode()) || editorMode || null,
+		parentEditorMode = parentEditorModeRaw === EDITOR_MODE__ADD
+			? EDITOR_MODE__EDIT
+			: parentEditorModeRaw,
+		normalizedParentEditorMode =
+			parentEditorMode === EDITOR_MODE__EDIT || parentEditorMode === EDITOR_MODE__VIEW
+				? parentEditorMode
+				: null,
 		styles = UiGlobals.styles,
 		flex = props.flex || 1,
 		buildFromItems = () => {
@@ -125,6 +133,7 @@ function Viewer(props) {
 					title,
 					name,
 					label,
+					disableLabel = false,
 					items,
 					useSelectorId = false,
 					isHidden = false,
@@ -160,7 +169,11 @@ function Viewer(props) {
 					type = 'Text';
 				}
 			}
-			const isCombo = type?.match && type.match(/Combo/);
+			const
+				Element = getComponentFromType(type),
+				shouldHideFieldUi = type === 'Hidden',
+				isCombo = type?.match && type.match(/Combo/);
+			
 			if (item.hasOwnProperty('autoLoad')) {
 				viewerTypeProps.autoLoad = item.autoLoad;
 			} else {
@@ -175,7 +188,6 @@ function Viewer(props) {
 			if (type?.match(/(Grid|GridEditor)$/)) {
 				viewerTypeProps.canEditorViewOnly = true;
 			}
-			const Element = getComponentFromType(type);
 
 			if (inArray(type, ['Column', 'Row', 'FieldSet'])) {
 				if (_.isEmpty(items)) {
@@ -264,6 +276,10 @@ function Viewer(props) {
 						>{children}</Element>;
 			}
 
+			if (shouldHideFieldUi) {
+				return null;
+			}
+
 			if (!label && Repository && propertyDef?.title) {
 				label = propertyDef.title;
 			}
@@ -334,7 +350,7 @@ function Viewer(props) {
 							</HStack>;
 			}
 
-			if (!disableLabels && label) {
+			if (!disableLabels && !disableLabel && label) {
 				const style = {};
 				if (defaults?.labelWidth) {
 					style.width = defaults.labelWidth;
@@ -359,14 +375,6 @@ function Viewer(props) {
 		buildAncillary = () => {
 			const
 				validAncillaryItems = _.filter(ancillaryItems, (item) => !!item), // filter out any null/undefined items
-				parentEditorModeRaw = (getEditorMode && getEditorMode()) || editorMode || null,
-				parentEditorMode = parentEditorModeRaw === EDITOR_MODE__ADD
-					? EDITOR_MODE__EDIT
-					: parentEditorModeRaw,
-				normalizedParentEditorMode =
-					parentEditorMode === EDITOR_MODE__EDIT || parentEditorMode === EDITOR_MODE__VIEW
-						? parentEditorMode
-						: null,
 				components = [];
 			setAncillaryButtons([]);
 			if (validAncillaryItems.length) {
@@ -584,7 +592,7 @@ function Viewer(props) {
 
 						<Toolbar className="justify-end">
 							<HStack className="flex-1 items-center">
-									<Text className="text-[20px] ml-1 text-grey-500">{isEditorModeControlledByParent ? 'View Mode (Inherited)' : 'View Mode'}</Text>
+									<Text className="text-[20px] ml-1 text-grey-500">{isEditorModeControlledByParent && normalizedParentEditorMode === EDITOR_MODE__VIEW ? 'View Mode (Inherited)' : 'View Mode'}</Text>
 							</HStack>
 							{onEditMode && (!canUser || canUser(EDIT)) && 
 								<Button

package/src/Components/Window/UploadsDownloadsWindow.js

@@ -18,6 +18,11 @@ import Upload from '../Icons/Upload';
 import Cookies from 'js-cookie';
 import _ from 'lodash';
 
+const
+	MODES__GRID = 'grid',
+	MODES__BATCH = 'batch',
+	MODES__TEMPLATE = 'template';
+
 function UploadsDownloadsWindow(props) {
 	const {
 			Repository,
@@ -37,8 +42,8 @@ function UploadsDownloadsWindow(props) {
 			showInfo,
 		} = props,
 		[importFile, setImportFile] = useState(null),
-		[width, height] = useAdjustedWindowSize(400, 450),
-		onDownload = (isTemplate = false) => {
+		[width, height] = useAdjustedWindowSize(400, 550),
+		onDownload = (mode) => {
 
 			const win = window.open('');
 			win.document.write('<html><head><title>Downloading</title></head><body><img style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);" src="' + 
@@ -63,7 +68,7 @@ function UploadsDownloadsWindow(props) {
 						columns,
 						order,
 						model,
-						isTemplate,
+						mode,
 						...Repository._params,
 						...downloadParams,
 					}),
@@ -79,9 +84,6 @@ function UploadsDownloadsWindow(props) {
 				}
 			}, 1000);
 		},
-		onDownloadTemplate = () => {
-			onDownload(true);
-		},
 		onUploadLocal = async () => {
 			const
 				url = Repository.api.baseURL + Repository.name + '/uploadBatch',
@@ -130,24 +132,40 @@ function UploadsDownloadsWindow(props) {
 		const items = [
 			{
 				type: 'DisplayField',
-				text: 'Download an Excel file of the current grid contents.',
+				text: "Get the current grid's contents as an Excel file.",
+			},
+			{
+				type: 'Button',
+				text: 'Get as Excel',
+				isEditable: false,
+				icon: Excel,
+				_icon: {
+					size: 'md',
+				},
+				onPress: () => onDownload(MODES__GRID),
+				className: 'mb-5',
+			},
+			{
+				type: 'DisplayField',
+				text: "Batch download the current grid's records,\n"
+					+ "so they can be edited and re-uploaded.",
 			},
 			{
 				type: 'Button',
-				text: 'Download',
+				text: 'Batch Download',
 				isEditable: false,
 				icon: Excel,
 				_icon: {
 					size: 'md',
 				},
-				onPress: () => onDownload(),
+				onPress: () => onDownload(MODES__BATCH),
 				className: 'mb-5',
 			},
 		];
 		if (!isDownloadOnly) {
 			items.push({
 				type: 'DisplayField',
-				text: 'Upload an Excel file to the current grid.',
+				text: 'Batch upload an Excel file to the current grid.',
 			});
 			items.push({
 				type: 'File',
@@ -161,7 +179,7 @@ function UploadsDownloadsWindow(props) {
 				items: [
 					{
 						type: 'Button',
-						text: 'Upload',
+						text: 'Batch Upload',
 						isEditable: false,
 						icon: Upload,
 						_icon: {
@@ -175,7 +193,7 @@ function UploadsDownloadsWindow(props) {
 						text: 'Get Template',
 						icon: Download,
 						isEditable: false,
-						onPress: onDownloadTemplate,
+						onPress: () => onDownload(MODES__TEMPLATE),
 					},
 
 				],

package/src/Constants/Auth.js

@@ -0,0 +1,3 @@
+export const AUTH_STATUS_UNKNOWN = 'unknown';
+export const AUTH_STATUS_AUTHENTICATED = 'authenticated';
+export const AUTH_STATUS_UNAUTHENTICATED = 'unauthenticated';

package/src/Functions/authFunctions.js

@@ -0,0 +1,98 @@
+import UiGlobals from '../UiGlobals.js';
+import oneHatData from '@onehat/data';
+
+
+/**
+ * getTokenHeaders
+ * 
+ * Main entry point for building an Authentication header object.
+ * If `clearAll` is true, returns a header with Authentication: null to wipe the token (e.g. on logout).
+ * Accepts an optional `user` arg (a plain object or @onehat/data Entity); falls back to Redux state if omitted.
+ * 
+ * @param {boolean} [clearAll=false] - When true, returns a header that clears the token (Authentication: null).
+ * @param {object|null} [user=null] - A plain user object or @onehat/data Entity. Falls back to Redux state if null.
+ * @returns {object} Header object with an `Authentication` key.
+ */
+export default function getTokenHeaders(clearAll = false, user = null) {
+	if (clearAll) {
+		return getRepositoryAuthHeaders(null);
+	}
+
+	const
+		reduxState = UiGlobals?.redux?.getState ? UiGlobals.redux.getState() : null,
+		scopedUser = user || reduxState?.app?.user,
+		token = getUserToken(scopedUser);
+
+	if (!token) {
+		return {};
+	}
+
+	return getRepositoryAuthHeaders(token);
+}
+
+/**
+ * getUserData
+ * 
+ * Normalizes a user value into a plain data object.
+ * Exists because a user may arrive as either a raw plain object or a @onehat/data Entity.
+ * 
+ * @param {object|null} user - A plain user object or @onehat/data Entity.
+ * @returns {object|null} The raw user data object, or null if no user was provided.
+ */
+export function getUserData(user) {
+	if (!user) {
+		return null;
+	}
+	return user?.getOriginalData ? user.getOriginalData() : user;
+}
+
+/**
+ * getUserToken
+ * 
+ * Extracts the auth token string from a user value.
+ * Exists because the token may be stored under either `token` or `users__token` depending on the API response shape.
+ * Normalizes the user via getUserData first, then returns whichever key is present, or null.
+ * 
+ * @param {object|null} user - A plain user object or @onehat/data Entity.
+ * @returns {string|null} The token string, or null if none is found.
+ */
+export function getUserToken(user) {
+	const userData = getUserData(user);
+	return userData?.token || userData?.users__token || null;
+}
+
+/**
+ * getRepositoryAuthHeaders
+ * 
+ * Builds the raw header object used for authenticated API requests.
+ * Exists as a dedicated function so the header shape is defined in one place and can be used
+ * both for one-off header construction and for pushing headers to all repositories.
+ * Passing null (or omitting the arg) sets Authentication to null, clearing the token.
+ * 
+ * @param {string|null} [token=null] - The auth token string. Pass null to clear the token.
+ * @returns {object} Header object with an `Authentication` key.
+ */
+export function getRepositoryAuthHeaders(token = null) {
+	return {
+		Authentication: token ? `Token ${token}` : null,
+		// Cookie: null,
+	};
+}
+
+/**
+ * setRepositoryAuthHeaders
+ * 
+ * Propagates an auth token to every @onehat/data repository in one call.
+ * Exists to support the refresh token flow: when a new token is obtained, this immediately
+ * updates all repository instances and the repository globals so subsequent requests use the new token.
+ * Passing null clears the token everywhere (e.g. on logout).
+ * 
+ * @param {string|null} [token=null] - The auth token string. Pass null to clear the token on all repositories.
+ * @returns {object} The header object that was applied to all repositories.
+ */
+export function setRepositoryAuthHeaders(token = null) {
+	const headers = getRepositoryAuthHeaders(token);
+	oneHatData.setOptionsOnAllRepositories({ headers });
+	oneHatData.setRepositoryGlobals({ headers });
+	return headers;
+}

package/src/Functions/getTokenHeaders.js

@@ -1,6 +1,9 @@
 import UiGlobals from '../UiGlobals.js';
 
 export default function(clearAll = false) {
+
+	throw Error('getTokenHeaders is deprecated. Please use the new functions in authFunctions.js instead.');
+
 	const reduxState = UiGlobals.redux.getState();
 	if (!reduxState.app.user || (!reduxState.app.user.token && !reduxState.app.user.users__token)) {
 		return {};

package/src/Hooks/useCrossTabSecureSync.js

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import oneHatData from '@onehat/data';
+import { CROSS_TAB_EVENT_NAME } from '@onehat/data/src/Integration/Browser/Repository/crossTabConstants.js';
+
+/**
+ * Subscribes to cross-tab storage change events emitted by the Secure repository.
+ * When another tab writes to the Secure store, `onChange` is called with:
+ *   { operation, key, namespacedKey, timestamp, repositoryName, repositoryType }
+ *
+ * The callback is intentionally free of Redux/app concerns — wire your own
+ * re-hydration logic (e.g. re-dispatch setUserThunk) in the callback.
+ *
+ * Usage:
+ *   useCrossTabSecureSync(useCallback(async ({ key }) => {
+ *     if (key === 'user') {
+ *       const user = await getSecure('user');
+ *       dispatch(setUserThunk(user));
+ *     }
+ *   }, [dispatch]));
+ *
+ * @param {Function} onChange - Stable callback (wrap in useCallback).
+ * @param {string} [repositoryName='Secure'] - Override target repository name.
+ */
+export default function useCrossTabSecureSync(onChange, repositoryName = 'Secure') {
+	useEffect(() => {
+		const handler = (data) => {
+			if (data?.repositoryName !== repositoryName) {
+				return;
+			}
+			onChange(data);
+		};
+		oneHatData.on(CROSS_TAB_EVENT_NAME, handler);
+		return () => {
+			oneHatData.off(CROSS_TAB_EVENT_NAME, handler);
+		};
+	}, [onChange, repositoryName]);
+}