@onehat/ui 0.4.96 → 0.4.98

package/src/Components/Hoc/withPresetButtons.js

@@ -339,6 +339,11 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					case DUPLICATE:
 						key = 'duplicateBtn';
 						text = 'Duplicate';
+						if (model) {
+							let inflected = Inflector.singularize(model); // can only add one at a time
+							inflected = Inflector.camel2words(Inflector.humanize(Inflector.underscore(inflected))); // Separate with spaces, capitalize each word
+							text += ' ' + inflected;
+						}
 						handler = (parent, e) => {
 							onDuplicate();
 						};

package/src/Components/Panel/TabPanel.js

@@ -7,7 +7,7 @@ export default function TabPanel(props) {
 			_panel = {},
 			_tab = {},
 		} = props;
-	return <Panel className="w-full flex" {..._panel}>
+	return <Panel {...props} className="w-full flex" {..._panel}>
 				<TabBar {...props} {..._tab} />
 			</Panel>;
 }

package/src/Components/Panel/TreePanel.js

@@ -26,7 +26,7 @@ export function TreePanel(props) {
 		}
 	}
 
-	return <Panel {..._panel}>
+	return <Panel {...props} {..._panel}>
 				<WhichTree {...props} {..._tree} />
 			</Panel>;
 }

package/src/Components/Tree/Tree.js

@@ -654,9 +654,23 @@ function TreeComponent(props) {
 				return;
 			}
 
-			// Create datum for the new entity and add it to parent's children
 			const newDatum = buildTreeNodeDatum(entity);
-			parentDatum.children.push(newDatum);
+
+			let isInserted = false;
+			if (entity._originalData?.previousSiblingId) {
+				// Insert datum in the correct position among parent's children
+				const siblingDatum = getDatumById(entity._originalData.previousSiblingId);
+				if (siblingDatum) {
+					const siblingIndex = parentDatum.children.findIndex(child => child.item.id === siblingDatum.item.id);
+					parentDatum.children.splice(siblingIndex + 1, 0, newDatum);
+					isInserted = true;
+				}
+			}
+			if (!isInserted) {
+				// Insert datum at end of parent's children
+				parentDatum.children.push(newDatum);
+			}
+
 			
 			// Update parent to show it has children and expand if needed
 			if (!entity.parent.hasChildren) {
@@ -1052,7 +1066,16 @@ function TreeComponent(props) {
 			return items;
 		},
 		getFooterToolbarItems = () => {
-			return _.map(additionalToolbarButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
+			// Process additionalToolbarButtons to evaluate getIsButtonDisabled functions
+			const processedButtons = _.map(additionalToolbarButtons, (config) => {
+				const processedConfig = { ...config };
+				// If the button has an getIsButtonDisabled function, evaluate it with current selection
+				if (_.isFunction(config.getIsButtonDisabled)) {
+					processedConfig.isDisabled = config.getIsButtonDisabled(selection);
+				}
+				return processedConfig;
+			});
+			return _.map(processedButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
 		},
 		renderTreeNode = (datum) => {
 			if (!datum.isVisible) {

package/src/Components/Tree/TreeNode.js

@@ -148,6 +148,9 @@ export default function TreeNode(props) {
 		if (props.className) {
 			className += ' ' + props.className;
 		}
+		if (nodeProps.className) {
+			className += ' ' + nodeProps.className;
+		}
 	
 		return <HStackNative
 					{...testProps('node' + (isSelected ? '-selected' : ''))}

package/src/Components/Viewer/DateTimeViewer.js

@@ -0,0 +1,25 @@
+import DisplayField from '../Form/Field/DisplayField.js';
+import clsx from 'clsx';
+import {
+	MOMENT_DATE_FORMAT_1,
+} from '../../Constants/Dates';
+
+export default function DateTimeViewer(props) {
+	const {
+			moment,
+		} = props;
+	if (!moment || !moment.isValid()) {
+		return null;
+	}
+	let className = clsx(
+		'flex-none',
+	);
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	return <DisplayField
+				text={moment.format(MOMENT_DATE_FORMAT_1)}
+				{...props}
+				className={className}
+			/>;
+}

package/src/Components/Viewer/DateViewer.js

@@ -0,0 +1,25 @@
+import DisplayField from '../Form/Field/DisplayField.js';
+import clsx from 'clsx';
+import {
+	MOMENT_DATE_FORMAT_4,
+} from '../../Constants/Dates';
+
+export default function DateViewer(props) {
+	const {
+			moment,
+		} = props;
+	if (!moment || !moment.isValid()) {
+		return null;
+	}
+	let className = clsx(
+		'flex-none',
+	);
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	return <DisplayField
+				text={moment.format(MOMENT_DATE_FORMAT_4)}
+				{...props}
+				className={className}
+			/>;
+}

package/src/Components/Viewer/PmCalcDebugViewer.js

@@ -0,0 +1,299 @@
+import {
+	Text,
+	VStack,
+} from '@project-components/Gluestack';
+import clsx from 'clsx';
+import {
+	MOMENT_DATE_FORMAT_6,
+} from '../../Constants/Dates.js';
+import {
+	PM_SCHEDULE_MODES__HISTORICAL_USAGE,
+	PM_SCHEDULE_MODES__EXPECTED_USAGE,
+	PM_SCHEDULE_MODES__NO_ESTIMATION,
+	PM_SCHEDULE_MODES__WILL_CALL,
+} from '../../Constants/PmScheduleModes.js';
+import {
+	PM_STATUSES__OK,
+	PM_STATUSES__PM_DUE,
+	PM_STATUSES__DELAYED,
+	PM_STATUSES__WILL_CALL,
+	PM_STATUSES__SCHEDULED,
+	PM_STATUSES__OVERDUE,
+	PM_STATUSES__COMPLETED,
+} from '../../Constants/PmStatuses.js';
+import {
+	METER_TYPES__HOURS,
+	METER_TYPES__HOURS_UNITS,
+	METER_TYPES__HOURS_TEXT,
+	METER_TYPES__MILES,
+	METER_TYPES__MILES_UNITS,
+	METER_TYPES__MILES_TEXT,
+} from '../../Constants/MeterTypes.js';
+import Button from '../Buttons/Button.js';
+import Json from '../Form/Field/Json.js';
+import Panel from '../Panel/Panel.js';
+import Footer from '../Layout/Footer.js';
+import Viewer from '../Viewer/Viewer.js';
+import testProps from '../../Functions/testProps.js';
+import moment from 'moment';
+import _ from 'lodash';
+
+export default function PmCalcDebugViewer(props) {
+
+	const {
+			metersPmSchedule,
+			onClose,
+		} = props,
+		json = metersPmSchedule?.properties.meters_pm_schedules__debug_json.json,
+		flatten = (obj, prefix = '', result = {}) => {
+			for (const key in obj) {
+				if (obj.hasOwnProperty(key)) {
+					const
+						newKey = prefix ? `${prefix}.${key}` : key,
+						value = obj[key];
+					
+					if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+						// Recursively flatten nested objects
+						flatten(value, newKey, result);
+					} else if (Array.isArray(value)) {
+						// Flatten arrays using index as key
+						value.forEach((item, index) => {
+							const arrayKey = `${newKey}.${index}`;
+							if (item !== null && typeof item === 'object') {
+								flatten(item, arrayKey, result);
+							} else {
+								result[arrayKey] = item;
+							}
+						});
+					} else {
+						// Assign primitive values and null
+						result[newKey] = value;
+					}
+				}
+			}
+			return result;
+		},
+		ucfirst = (string) => {
+			return string.charAt(0).toUpperCase() + string.slice(1);
+		},
+		getPmScheduleMode = (pm_schedule_mode_id) => {
+			switch(pm_schedule_mode_id) {
+				case PM_SCHEDULE_MODES__HISTORICAL_USAGE:
+					return 'Historical Usage';
+				case PM_SCHEDULE_MODES__EXPECTED_USAGE:
+					return 'Expected Usage';
+				case PM_SCHEDULE_MODES__NO_ESTIMATION:
+					return 'No Estimation';
+				case PM_SCHEDULE_MODES__WILL_CALL:
+					return 'Will Call';
+				default:
+					return 'Unknown Mode';
+			}
+		},
+		flattenedJson = flatten(json),
+		formatDaysValue = (value, record, self) => {
+			if (value === null || value === undefined) {
+				return value;
+			}
+			return parseInt(_.round(value), 10);
+		},
+		formatMeterValue = (value, record, self) => {
+			if (value === null || value === undefined) {
+				return value;
+			}
+			let ret;
+			const meterType = parseInt(record?.meter_type, 10);
+			switch(meterType) {
+				case METER_TYPES__HOURS:
+					ret = `${value} ${METER_TYPES__HOURS_UNITS}`;
+					break;
+				case METER_TYPES__MILES:
+					ret = `${value} ${METER_TYPES__MILES_UNITS}`;
+					break;
+			}
+			return ret;
+		},
+		formatDateValue = (value, record, self) => {
+			if (value === null || value === undefined) {
+				return value;
+			}
+
+			// convert from datetime to pretty-printed date
+			return moment(value).format(MOMENT_DATE_FORMAT_6);
+		},
+		items = [
+			{
+				"type": "Column",
+				"flex": 1,
+				"defaults": {
+					labelWidth: 300,
+				},
+				"items": [
+					{
+						"type": "FieldSet",
+						"title": "General",
+						"reference": "general",
+						"defaults": {},
+						"items": [
+							{
+								label: 'PM Schedule',
+								name: 'pmSchedule.name',
+							},
+							{
+								label: 'Status',
+								name: 'pm_status_name',
+							},
+							{
+								label: 'Next PM Date',
+								name: 'nextPmDate',
+								viewerFormatter: formatDateValue,
+							},
+							json?.overduePms > 0 && {
+								label: 'Overdue PMs',
+								name: 'overduePms',
+							},
+						],
+					},
+					{
+						"type": "FieldSet",
+						"title": "Calculation Details",
+						"reference": "calcDetails",
+						"defaults": {},
+						"items": [
+							{
+								label: 'Controlling Method',
+								name: 'controllingMethod',
+								tooltip: 'Indicates whether the calculation was based on days or usage (meter). ' +
+										'If both methods are applicable, the one resulting in the earlier PM date is chosen.',
+							},
+							(json?.pm_status_id === PM_STATUSES__OVERDUE || json?.pm_status_id === PM_STATUSES__PM_DUE) && {
+								label: 'Grace Period End Date',
+								name: 'maxGracePeriodDateTime',
+								viewerFormatter: formatDateValue,
+							},
+							{
+								label: 'Last Reset Date',
+								name: 'resetDate',
+								tooltip: 'Indicates whether the calculation was based on days or usage (meter). ' +
+										'If both methods are applicable, the one resulting in the earlier PM date is chosen.',
+								viewerFormatter: formatDateValue,
+							},
+							json?.workOrder?.title && {
+								label: 'Work Order',
+								name: 'workOrder.title',
+							},
+							json?.workOrder?.service_order && {
+								label: 'Work Order',
+								name: 'workOrder.service_order',
+							},
+							{
+								label: 'Meter Accrued Since Last PM',
+								name: 'meterAccruedSinceLatestPm',
+								viewerFormatter: formatMeterValue,
+							},
+							{
+								label: 'Meter Remaining Until Next PM',
+								name: 'meterRemainingUntilNextPm',
+								viewerFormatter: formatMeterValue,
+							},
+							{
+								label: 'Days Since Last PM',
+								name: 'daysSinceLatestPm',
+								viewerFormatter: formatDaysValue,
+							},
+							{
+								label: 'Days Left Until Next PM',
+								name: 'daysLeft',
+								viewerFormatter: formatDaysValue,
+							},
+							// json?.isDelayed && {
+							// 	label: 'Is Delayed',
+							// 	name: 'isDelayed',
+							// },
+							// json?.isOverride && {
+							// 	label: 'Is Override',
+							// 	name: 'isOverride',
+							// },
+						]
+					},
+					{
+						"type": "FieldSet",
+						"title": "PM Schedule Config",
+						"reference": "pmSchedule",
+						"defaults": {},
+						"items": [
+							json?.pmSchedule?.interval_days && {
+								label: 'Interval Days',
+								name: 'pmSchedule.interval_days',
+							},
+							json?.pmSchedule?.interval_meter && {
+								label: 'Interval Meter',
+								name: 'pmSchedule.interval_meter',
+								viewerFormatter: formatMeterValue,
+							},
+							{
+								label: 'Mode',
+								name: 'pmScheduleMode',
+							},
+						]
+					},
+					{
+						"type": "FieldSet",
+						"title": "Equipment",
+						"reference": "equipment",
+						"defaults": {},
+						"items": [
+							{
+								label: 'In Service Date',
+								name: 'inServiceDate',
+								viewerFormatter: formatDateValue,
+							},
+							{
+								label: 'Latest Meter Reading',
+								name: 'latestMeterReading',
+								viewerFormatter: formatMeterValue,
+							},
+							{
+								label: 'Avg Daily Meter',
+								name: 'avgDailyMeter',
+								viewerFormatter: formatMeterValue,
+							},
+						]
+					},
+
+				]
+			}
+		];
+
+	flattenedJson.pmScheduleMode = getPmScheduleMode(json?.pmSchedule.pm_schedule_mode_id);
+
+	return <Panel
+				title="PM Calculation Info"
+				className="PmCalcViewer-Panel"
+				isScrollable={true}
+				footer={<Footer className="justify-end">
+								<Button
+									{...testProps('closeBtn')}
+									key="closeBtn"
+									onPress={onClose}
+									className="text-white"
+									text="Close"
+								/>
+						</Footer>}
+			>
+				<Viewer
+					record={flattenedJson}
+					items={items}
+				/>
+				{/* <VStack className="PmCalcDebugViewer-VStack p-4">
+					
+					<Text>Equipment: {metersPmSchedule.meters__nickname}</Text>
+					<Json
+						value={metersPmSchedule.meters_pm_schedules__debug_json}
+						displaySize="expanded"
+						editable={false}
+						collapsed={2}
+					/>
+				</VStack> */}
+			</Panel>;
+}

package/src/Components/Viewer/PmStatusesViewer.js

@@ -0,0 +1,51 @@
+import DisplayField from '../Form/Field/DisplayField.js';
+import clsx from 'clsx';
+import {
+	PM_STATUSES__OK,
+	PM_STATUSES__PM_DUE,
+	PM_STATUSES__DELAYED,
+	PM_STATUSES__WILL_CALL,
+	PM_STATUSES__SCHEDULED,
+	PM_STATUSES__OVERDUE,
+	PM_STATUSES__COMPLETED,
+} from '../../Constants/PmStatuses.js';
+
+export default function PmStatusesViewer(props) {
+	let text = '';
+	switch(props.id) {
+		case PM_STATUSES__OK:
+			text = 'OK';
+			break;
+		case PM_STATUSES__PM_DUE:
+			text = 'Due';
+			break;
+		case PM_STATUSES__DELAYED:
+			text = 'Delayed';
+			break;
+		case PM_STATUSES__WILL_CALL:
+			text = 'Will Call';
+			break;
+		case PM_STATUSES__SCHEDULED:
+			text = 'Scheduled';
+			break;
+		case PM_STATUSES__OVERDUE:
+			text = 'Overdue';
+			break;
+		case PM_STATUSES__COMPLETED:
+			text = 'Completed';
+			break;
+		default:
+			text = 'Unknown';
+	}
+	let className = clsx(
+		'flex-none',
+	);
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	return <DisplayField
+				text={text}
+				{...props}
+				className={className}
+			/>;
+}

package/src/Components/Viewer/TimeViewer.js

@@ -0,0 +1,25 @@
+import DisplayField from '../Form/Field/DisplayField.js';
+import clsx from 'clsx';
+import {
+	MOMENT_DATE_FORMAT_5,
+} from '../../Constants/Dates';
+
+export default function TimeViewer(props) {
+	const {
+			moment,
+		} = props;
+	if (!moment || !moment.isValid()) {
+		return null;
+	}
+	let className = clsx(
+		'flex-none',
+	);
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	return <DisplayField
+				text={moment.format(MOMENT_DATE_FORMAT_5)}
+				{...props}
+				className={className}
+			/>;
+}

package/src/Components/Viewer/Viewer.js

@@ -114,6 +114,7 @@ function Viewer(props) {
 			}
 			let {
 					type,
+					viewerType,
 					title,
 					name,
 					label,
@@ -122,6 +123,7 @@ function Viewer(props) {
 					isHidden = false,
 					isHiddenInViewMode = false,
 					getDynamicProps,
+					viewerFormatter = null,
 					...itemPropsToPass
 				} = item,
 				viewerTypeProps = {};
@@ -137,7 +139,9 @@ function Viewer(props) {
 			}
 			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
 			if (!type) {
-				if (propertyDef?.viewerType?.type) {
+				if (viewerType) {
+					type = viewerType;
+				} else if (propertyDef?.viewerType?.type) {
 					const
 						{
 							type: t,
@@ -274,6 +278,9 @@ function Viewer(props) {
 					value = record.properties[fkDisplayField].displayValue;
 				}
 			}
+			if (viewerFormatter) {
+				value = viewerFormatter(value, record, self);
+			}
 
 			let elementClassName = clsx(
 				'Viewer-field',

package/src/Components/index.js

@@ -255,6 +255,8 @@ import Container from './Container/Container.js';
 import ContainerColumn from './Container/ContainerColumn.js';
 import DataMgt from './Screens/DataMgt.js';
 import Date from './Form/Field/Date.js';
+import DateViewer from './Viewer/DateViewer.js';
+import DateTimeViewer from './Viewer/DateTimeViewer.js';
 import DateRange from './Filter/DateRange.js';
 import DisplayField from './Form/Field/DisplayField.js';
 import ExpandButton from './Buttons/ExpandButton.js';
@@ -278,6 +280,8 @@ import NumberRange from './Filter/NumberRange.js';
 import Panel from './Panel/Panel.js';
 // import Picker from './Panel/Picker.js';
 import PlusMinusButton from './Buttons/PlusMinusButton.js';
+import PmCalcDebugViewer from './Viewer/PmCalcDebugViewer.js';
+import PmStatusesViewer from './Viewer/PmStatusesViewer.js';
 import RadioGroup from './Form/Field/RadioGroup/RadioGroup.js';
 // import Slider from './Form/Field/Slider.js'; // Currently, Slider is not compatible with the new React architecture. Temporarily remove it from index.js to prevent issues.
 import SquareButton from './Buttons/SquareButton.js';
@@ -286,6 +290,7 @@ import Tag from './Form/Field/Tag/Tag.js';
 import TextArea from './Form/Field/TextArea.js';
 import Text from './Form/Field/Text.js';
 import TextWithLinks from './Viewer/TextWithLinks.js';
+import TimeViewer from './Viewer/TimeViewer.js';
 import TimezonesCombo from './Form/Field/Combo/TimezonesCombo.js';
 import Toggle from './Form/Field/Toggle.js';
 import Toolbar from './Toolbar/Toolbar.js';
@@ -550,6 +555,8 @@ const components = {
 	ContainerColumn,
 	DataMgt,
 	Date,
+	DateViewer,
+	DateTimeViewer,
 	DateRange,
 	DisplayField,
 	ExpandButton,
@@ -573,6 +580,8 @@ const components = {
 	Panel,
 	// Picker,
 	PlusMinusButton,
+	PmCalcDebugViewer,
+	PmStatusesViewer,
 	RadioGroup,
 	// Slider,
 	SquareButton,
@@ -581,6 +590,7 @@ const components = {
 	Text,
 	TextArea,
 	TextWithLinks,
+	TimeViewer,
 	TimezonesCombo,
 	Toggle,
 	Toolbar,

package/src/Constants/Dates.js

@@ -18,3 +18,4 @@ export const MOMENT_DATE_FORMAT_2 = 'MMM D YYYY, h:mm:ssa'; // pretty datetime
 export const MOMENT_DATE_FORMAT_3 = 'h:mma'; // pretty time
 export const MOMENT_DATE_FORMAT_4 = 'YYYY-MM-DD';
 export const MOMENT_DATE_FORMAT_5 = 'HH:mm:ss';
+export const MOMENT_DATE_FORMAT_6 = 'MMM D, YYYY'; // pretty date

package/src/Constants/EditorModes.js

@@ -0,0 +1,2 @@
+export const EDITOR_MODE_ADD = 'EDITOR_MODE_ADD';
+export const EDITOR_MODE_EDIT = 'EDITOR_MODE_EDIT';

package/src/Constants/MeterSources.js

@@ -0,0 +1,5 @@
+export const METER_SOURCES__INITIAL_SETUP = 1;
+export const METER_SOURCES__WORK_ORDER = 2;
+export const METER_SOURCES__PM_EVENT = 3;
+export const METER_SOURCES__TELEMETRY = 4;
+export const METER_SOURCES__MANUAL_ENTRY = 5;

package/src/Constants/MeterTypes.js

@@ -1,4 +1,6 @@
 export const METER_TYPES__HOURS = 1;
+export const METER_TYPES__HOURS_UNITS = 'hrs';
+export const METER_TYPES__HOURS_TEXT = 'Time (' + METER_TYPES__HOURS_UNITS + ')';
 export const METER_TYPES__MILES = 2;
-export const METER_TYPES__HOURS_TEXT = 'Time (hrs)';
-export const METER_TYPES__MILES_TEXT = 'Distance (mi/km)';
+export const METER_TYPES__MILES_UNITS = 'mi-km';
+export const METER_TYPES__MILES_TEXT = 'Distance (' + METER_TYPES__MILES_UNITS + ')';

package/src/Constants/PmEventTypes.js

@@ -0,0 +1,11 @@
+export const PM_EVENT_TYPES__INITIAL = 1;
+export const PM_EVENT_TYPES__WORK_ORDER = 2;
+export const PM_EVENT_TYPES__ALERT = 3;
+export const PM_EVENT_TYPES__COMPLETE = 4;
+export const PM_EVENT_TYPES__RESET = 5;
+export const PM_EVENT_TYPES__DELAY_BY_DAYS = 6;
+export const PM_EVENT_TYPES__DELAY_BY_METER = 7;
+export const PM_EVENT_TYPES__SCHEDULE_PM = 8;
+export const PM_EVENT_TYPES__WILL_CALL = 9;
+export const PM_EVENT_TYPES__ASSIGN_TECHNICIAN = 10;
+export const PM_EVENT_TYPES__COMMENT = 11;

package/src/Constants/PmScheduleModes.js

@@ -0,0 +1,4 @@
+export const PM_SCHEDULE_MODES__HISTORICAL_USAGE = 1;
+export const PM_SCHEDULE_MODES__EXPECTED_USAGE = 2;
+export const PM_SCHEDULE_MODES__NO_ESTIMATION = 3;
+export const PM_SCHEDULE_MODES__WILL_CALL = 4;

package/src/Constants/PmStatuses.js

@@ -0,0 +1,16 @@
+export const PM_STATUSES__OK = 1;
+export const PM_STATUSES__OK_TEXT = 'OK';
+export const PM_STATUSES__PM_DUE = 2;
+export const PM_STATUSES__PM_DUE_TEXT = 'PM Due';
+export const PM_STATUSES__DELAYED = 3;
+export const PM_STATUSES__DELAYED_TEXT = 'Delayed';
+export const PM_STATUSES__WILL_CALL = 4;
+export const PM_STATUSES__WILL_CALL_TEXT = 'Will Call';
+export const PM_STATUSES__SCHEDULED = 5;
+export const PM_STATUSES__SCHEDULED_TEXT = 'Scheduled';
+export const PM_STATUSES__OVERDUE = 6;
+export const PM_STATUSES__OVERDUE_TEXT = 'Overdue';
+export const PM_STATUSES__COMPLETED = 7;
+export const PM_STATUSES__COMPLETED_TEXT = 'Completed';
+export const PM_STATUSES__DISABLED = 8;
+export const PM_STATUSES__DISABLED_TEXT = 'Disabled';

package/src/PlatformImports/Web/Attachments.js

@@ -819,6 +819,7 @@ function AttachmentsElement(props) {
 	}
 
 	if (self) {
+		self.repository = Attachments;
 		self.getFiles = getFiles;
 		self.setFiles = setFiles;
 		self.clearFiles = clearFiles;
@@ -1211,7 +1212,7 @@ function AttachmentsElement(props) {
 								onChangeSelection: (selection) => {
 									setTreeSelection(selection);
 								},
-								additionalToolbarButtons: canCrud ? [
+								additionalToolbarButtons: canCrud && treeSelection[0] && !treeSelection[0].isDestroyed ? [
 									{
 										key: 'Plus',
 										text: 'New Directory',